/* M2 presentation layer. Source: M1 Brand Guideline v2 + System Wireframe v2.
   Existing route, data, form and event contracts remain owned by their views. */
html { font-size:16px; }
body { font-size:14px; line-height:1.55; }
button,input,select,textarea { font:inherit; }
:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:10000; padding:12px 18px; background:var(--bg-card); border:1px solid var(--primary); border-radius:12px; }
.skip-link:focus { top:12px; }
.brand-dark { display:none; }
[data-theme="dark"] .brand-light { display:none; }
[data-theme="dark"] .brand-dark { display:block; }
.m2-app .sidebar-header { padding:0 14px; gap:6px; }
.brand-mark { width:32px; height:32px; object-fit:contain; flex-shrink:0; }
.brand-copy { display:flex; flex-direction:column; min-width:0; }
.brand-copy strong { font-size:22px; line-height:1.1; letter-spacing:-.05em; }
.brand-copy small { font-size:10px; font-weight:600; white-space:nowrap; color:var(--text-muted); margin-top:3px; }
.sidebar-logo { gap:9px; min-width:0; }
.sidebar-content { padding:12px; }
.m2-app .menu-heading { padding:17px 10px 7px; margin-top:8px; border-top:1px solid var(--border-color); font-size:9px; font-weight:800; letter-spacing:.15em; }
.m2-app .menu-heading:first-child { border:0; margin:0; padding-top:5px; }
.m2-app .menu-link { padding:10px; margin:2px 0; border-radius:10px; font-size:12px; font-weight:600; min-height:40px; }
.menu-link.active::before { display:none; }
.menu-icon { width:20px; height:20px; justify-content:center; font-size:18px; opacity:1; }
.sidebar-footer { padding:16px 22px; border-top:1px solid var(--border-color); font-size:10px; color:var(--text-muted); }
.sidebar-footer-mark { display:none; }
.sidebar-toggle { flex-shrink:0; }
.sidebar.collapsed { width:var(--sidebar-collapsed-width); }
.sidebar.collapsed .brand-copy,.sidebar.collapsed .menu-label,.sidebar.collapsed .menu-heading { display:none; }
.sidebar.collapsed .sidebar-header { padding:14px 0; height:auto; flex-direction:column; gap:12px; }
.sidebar.collapsed .sidebar-toggle { transform:rotate(180deg); }
.sidebar.collapsed .menu-link { justify-content:center; padding:10px 0; }
.sidebar.collapsed .sidebar-content { padding:12px 8px; }
.sidebar.collapsed .sidebar-footer { padding:16px 0; text-align:center; }
.sidebar.collapsed .sidebar-footer-mark { display:inline; }
.sidebar.collapsed ~ .app-main { margin-left:var(--sidebar-collapsed-width); }
.app-main,.app-content,.container-fluid { min-width:0; }
.m2-app .app-main { width:calc(100% - var(--sidebar-width)); }
.m2-app .app-content { padding:24px; }
.container-fluid { max-width:1600px; margin:0 auto; }
.header { gap:16px; }
.header-left,.breadcrumb { min-width:0; }
.breadcrumb { flex-wrap:wrap; font-size:12px; }
.breadcrumb .current { color:var(--text-secondary); }
.user-btn { border:0; padding:6px; }
.user-avatar { background:var(--primary-bg); color:var(--primary); border:1px solid var(--primary-line); width:36px; height:36px; }
.theme-toggle { background:var(--bg-card); border-radius:11px; }
.m2-app .m2-page-hero { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:24px; margin-bottom:24px; border:1px solid var(--primary-line); border-radius:18px; background:linear-gradient(100deg,#dcd8ff,#f6f4ff 54%,#f5f6f9); }
[data-theme="dark"] .m2-page-hero { background:linear-gradient(100deg,#2b2754,#191c2d 54%,#171a26); }
.m2-page-hero > div { min-width:0; }
.m2-eyebrow { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--primary); margin-bottom:8px; }
.m2-eyebrow i { font-size:18px; }
.m2-app .page-title { font-size:28px !important; font-weight:700; line-height:1.2; letter-spacing:-.045em; overflow-wrap:anywhere; }
.m2-page-hero p { max-width:780px; line-height:1.6; margin-top:6px !important; }
.m2-filter-bar,.m2-app .card:has(> .card-body > form[method="GET"]) { padding:18px 20px; border:1px solid var(--border-color); border-radius:18px; background:linear-gradient(110deg,var(--bg-card),var(--primary-bg)); }
.m2-app .card:has(> .card-body > form[method="GET"]) > .card-body { padding:0; }
.m2-filter-bar > div { gap:10px; }
.grid { gap:16px; }
.grid > * { min-width:0; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.m2-app :is(.card,.stat-card,.insight-card,.chart-card,.s-card,.cal-widget-card,.calendar-main-column,.doc-card,.prov-list-section) { border:1px solid var(--border-color); border-radius:18px; background:var(--bg-card); box-shadow:var(--shadow-sm); }
.m2-app :is(.card,.stat-card,.s-card,.cfg-card):hover { transform:none; box-shadow:var(--shadow-sm); }
.m2-app .card-header { padding:18px 20px; gap:12px; flex-wrap:wrap; }
.m2-app .card-title { font-size:15px; font-weight:700; letter-spacing:-.02em; }
.card-body { padding:20px; }
.stat-card { padding:20px; }
.stat-icon { width:40px; height:40px; border-radius:12px; }
.stat-value { margin-top:12px; font-size:30px; letter-spacing:-.045em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.stat-label { margin-top:8px; font-size:12px; }
.m2-metric-strip > .stat-card:nth-child(1) { background:var(--violet-surface); border-color:var(--primary-line); }
.m2-metric-strip > .stat-card:nth-child(2) { background:var(--teal-surface); }
.m2-metric-strip > .stat-card:nth-child(3) { background:var(--orange-surface); }
.m2-metric-strip > .stat-card:nth-child(4) { background:var(--rose-surface); }
.btn { min-height:40px; padding:9px 15px; justify-content:center; border-radius:11px; font-size:12px; font-weight:700; }
.btn-sm { min-height:34px; padding:6px 12px; }
.btn-lg { min-height:46px; font-size:14px; }
.btn:hover { transform:none; }
.btn-primary:hover { box-shadow:none; }
.btn-outline { background:var(--bg-card); }
.btn:disabled { cursor:not-allowed; opacity:.55; }
.form-control { min-height:42px; border-radius:10px; border-color:var(--border-strong); font-size:13px; padding:10px 12px; }
.form-label { color:var(--text-secondary); font-size:12px; font-weight:700; }
.form-control:focus { box-shadow:0 0 0 3px var(--primary-bg); }
.m2-app form[method="GET"] { gap:10px; }
.m2-app form[method="GET"] :is(input:not([type="hidden"]),select) { min-height:40px; max-width:100%; }
.badge { border:1px solid transparent; padding:4px 9px; font-size:10px; line-height:1.4; font-weight:700; }
.badge-primary { border-color:var(--primary-line); }
.badge-success { color:#08705e; }
.badge-danger { color:#bd203b; }
.badge-info { color:#086ba4; }
[data-theme="dark"] .badge-success { color:var(--success); }
[data-theme="dark"] .badge-danger { color:var(--danger); }
[data-theme="dark"] .badge-info { color:var(--info); }
.m2-app thead th { padding:13px 16px; background:var(--bg-subtle); color:var(--text-muted); font-size:10px; letter-spacing:.1em; font-weight:800; }
.m2-app tbody td { padding:15px 16px; font-size:12px; color:var(--text-secondary); }
.m2-app tbody tr:hover { background:var(--primary-bg); }
.m2-table-scroll { width:100%; overflow:auto; border-radius:0 0 18px 18px; }
.m2-table-scroll > table { min-width:680px; }
.m2-app :is(.card-body,.card-footer,.insight-card-body) { min-width:0; }
.card-footer { padding:16px 20px; }
.m2-provider-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.m2-app .m2-provider-card .card-body { text-align:left !important; padding:20px !important; }
.m2-provider-card:hover { border-color:var(--primary-line); background:var(--primary-bg); }
.m2-provider-card .card-body > div:first-child { margin:0 0 14px !important; width:44px !important; height:44px !important; border-radius:12px !important; }
.m2-provider-card:focus-visible { outline:3px solid var(--primary); }
.m2-app .platform-tabs { gap:8px !important; padding:8px; background:var(--bg-card); border:1px solid var(--border-color) !important; border-radius:16px; }
.m2-app .platform-tabs .platform-tab { border:1px solid transparent !important; border-radius:10px; min-height:42px; }
.m2-app .platform-tabs .platform-tab.active { color:var(--primary) !important; background:var(--primary-bg) !important; border-color:var(--primary-line) !important; }
.m2-app .platform-tab.active::after { display:none; }
.m2-app .config-section { border-color:var(--border-color); border-radius:16px; }
.m2-app .cfg-card { background:var(--violet-surface) !important; color:var(--text-primary); border:1px solid var(--primary-line); border-radius:18px; box-shadow:var(--shadow-sm); }
.m2-app .cfg-card :is(.cfg-badge,.cfg-active) { background:var(--bg-card); color:var(--success); border:1px solid var(--border-color); }
.m2-app .cfg-sub { color:var(--text-muted); opacity:1; }
.m2-app .configured-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.m2-app .prov-table th { background:var(--bg-subtle); }
.m2-app .modal-overlay { background:rgba(17,24,39,.48); backdrop-filter:blur(3px); padding:20px; }
.m2-app :is(.modal-box,.modal-content-card) { background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border-color); border-radius:24px; max-width:100%; max-height:90dvh; overflow:auto; }
.m2-app .modal-box { width:620px; }
.m2-app .cal-header { flex-wrap:wrap; gap:12px; padding:20px; }
.m2-app .cal-btn { border-radius:10px; min-height:36px; }
.m2-app .cal-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.m2-app .cal-select { background-color:var(--bg-card); border-color:var(--border-strong); color:var(--text-primary); border-radius:10px; min-height:38px; }
.m2-app .cal-filters-bar { background:var(--bg-subtle); gap:12px; flex-wrap:wrap; }
.m2-app :is(.cal-day-header,.cal-day-cell.other-month,.cal-stat-item,.modal-kpi-box) { background:var(--bg-subtle); color:var(--text-secondary); }
.m2-app .cal-day-cell { background:var(--bg-card); }
.m2-app .cal-day-cell.is-today { background:var(--primary-bg); }
.m2-app .cal-day-cell.is-today .cal-day-num { background:var(--primary); }
.m2-app .cal-post-card { background:var(--bg-card); border-radius:8px; }
.m2-app .cal-widget-header { padding:16px 20px; }
.m2-app :is(.chart-card-header,.insight-card-header) { border-color:var(--border-color); }
.m2-app :is(.chart-box,.analyze-bar,.donut-center-badge) { background:var(--bg-card); border-color:var(--border-color); }
.m2-app .s-card.total { background:var(--violet-surface); }
.m2-app .s-card.positive { background:var(--teal-surface); }
.m2-app .s-card.negative { background:var(--rose-surface); }
.m2-app .s-card::before { display:none; }
.m2-app .s-card .s-label { color:var(--text-muted); }
.m2-app .no-provider-banner { background:var(--violet-surface); border-color:var(--primary-line); }
.m2-app .no-provider-banner :is(h3,p) { color:var(--text-secondary); }
.m2-app .doc-card-header { background:var(--bg-subtle); border-color:var(--border-color); border-radius:18px 18px 0 0; }
.m2-app .doc-nav-tabs { padding:8px; border-radius:16px; gap:6px; }
.m2-app .doc-tab-btn { border-radius:10px; font-size:12px; }
.m2-app .doc-tab-btn.active { background:var(--primary-bg); color:var(--primary); }
.m2-app .doc-header-badge { background:transparent; color:var(--text-muted); padding:0; }
.m2-app .text-muted { color:var(--text-muted) !important; }
.m2-app .doc-code-box { overflow:auto; max-width:100%; }
.m2-app .post-hero { border-radius:18px; gap:24px; }
.m2-app .kpi-row { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)) !important; }
.m2-app :is(.growth-item,.stat-box,.info-box,.metric-tab,.insight-card) { border-color:var(--border-color); }
.m2-app .metric-tab.active { background:var(--primary-bg); }
.m2-app .alert { line-height:1.65; }
.m2-app .alert-danger,.m2-auth .alert-danger { color:#bd203b; }
.m2-app .alert-info { color:#086ba4; }
[data-theme="dark"] .alert-danger { color:var(--danger); }
[data-theme="dark"] .alert-info { color:var(--info); }
.m2-app .kpi-tip:focus-visible .kpi-tip-pop,.m2-app .kpi-tip:focus-within .kpi-tip-pop { display:block; opacity:1; }
/* Authentication: the two-column brand/form pattern in wireframe section 05. */
.m2-auth { min-height:100vh; padding:48px 28px; display:grid; align-items:center; background:var(--bg-body); }
.login-container { width:100%; max-width:1120px; margin:auto; display:grid; grid-template-columns:1.08fr .92fr; border:1px solid var(--border-color); border-radius:26px; background:var(--bg-card); box-shadow:var(--shadow-md); overflow:hidden; }
.login-proof { padding:42px; background:radial-gradient(circle at 12% 18%,rgba(117,88,255,.12),transparent 46%),linear-gradient(145deg,#fff,#f3f2ff 60%,#f8fbff); border-right:1px solid var(--border-color); }
[data-theme="dark"] .login-proof { background:linear-gradient(145deg,#111625,#171833 60%,#0e1723); }
.login-brand { display:flex; align-items:center; gap:12px; color:var(--text-primary); font-size:28px; font-weight:800; letter-spacing:-.05em; }
.login-brand img { width:42px; height:42px; object-fit:contain; }
.login-brand-caption { display:block; font-size:11px; letter-spacing:0; font-weight:600; color:var(--text-muted); }
.login-proof-copy { margin-top:56px; }
.login-proof h1 { font-size:46px; line-height:1.07; letter-spacing:-.055em; font-weight:700; }
.login-proof-copy p { margin-top:20px; line-height:1.8; color:var(--text-secondary); font-size:14px; }
.login-capabilities { display:grid; gap:10px; margin-top:30px; }
.login-capabilities > div { display:flex; align-items:center; gap:12px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:12px 16px; font-size:12px; font-weight:600; }
.login-capabilities i { color:var(--primary); width:20px; font-size:18px; }
.login-networks { display:flex; gap:15px; flex-wrap:wrap; margin-top:28px; font-size:10px; color:var(--text-secondary); }
.login-networks span { display:flex; align-items:center; gap:5px; }
.login-networks i { font-size:16px; }
.login-networks .fa-facebook { color:var(--facebook); }
.login-networks .fa-instagram { color:var(--instagram); }
.login-networks .fa-youtube { color:var(--youtube); }
.login-card { align-self:center; padding:48px; min-width:0; }
.login-title { font-size:30px; font-weight:700; letter-spacing:-.04em; }
.login-subtitle { font-size:13px; color:var(--text-muted); margin:10px 0 28px; line-height:1.7; }
.login-card .form-group { margin-bottom:20px; }
.login-card .form-control { min-height:46px; }
.login-disclosure { grid-column:1/-1; padding:24px 32px; border-top:1px solid var(--border-color); background:var(--bg-subtle); }
.login-disclosure .login-footer { margin:0 !important; padding:0 !important; border:0 !important; font-size:11px !important; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.login-footer > div:last-child { grid-column:1/-1; border-top-style:solid !important; }
@media (max-width:1200px) {
 .m2-provider-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .m2-app .calendar-main-column { width:100%; }
 .m2-app .calendar-sidebar-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; }
 .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .m2-app .card-metric-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
 .login-proof,.login-card { padding:28px; }
 .login-proof h1 { font-size:36px; }
 .m2-app .detail-grid,.m2-app .post-hero { grid-template-columns:minmax(0,1fr); }
 .m2-provider-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
 .m2-app .app-main,.sidebar.collapsed ~ .app-main { margin-left:0; width:100%; }
 .sidebar,.sidebar.collapsed { width:236px; }
 .sidebar.collapsed .brand-copy,.sidebar.collapsed .menu-label,.sidebar.collapsed .menu-heading { display:revert; }
 .sidebar.collapsed .sidebar-header { flex-direction:row; padding:0 14px; height:76px; }
 .sidebar.collapsed .menu-link { justify-content:flex-start; padding:10px; }
 .sidebar-toggle { display:none; }
 .m2-app .sidebar-footer-mark { display:none; }
 .m2-app .app-content { padding:16px; }
 .header { height:64px; padding:0 16px; }
 .header-right { gap:6px; }
 .user-info { display:none; }
 .m2-app .m2-page-hero { padding:20px; gap:16px; }
 .m2-app .page-title { font-size:24px !important; }
 .grid-2,.grid-3 { grid-template-columns:minmax(0,1fr); }
 .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .m2-app .calendar-sidebar-column { grid-template-columns:minmax(0,1fr); }
 .m2-app .calendar-main-column { overflow-x:auto; }
 .m2-app .calendar-grid { min-width:650px; }
 .m2-app .cal-header,.m2-app .cal-filters-bar { position:sticky; left:0; }
 .m2-app .form-row { grid-template-columns:minmax(0,1fr); }
 .m2-app .m2-filter-bar .d-flex,.m2-app form.d-flex.flex-wrap { flex-direction:row; }
 .m2-app form[method="GET"] > .form-control { flex:1 1 140px; width:100% !important; }
 .m2-filter-bar :is(input,select) { max-width:100%; }
 .m2-app .modal-overlay { padding:12px; }
 .m2-app :is(.modal-box,.modal-content-card) { padding:20px; border-radius:18px; }
 .m2-auth { padding:20px 16px; }
 .login-container { grid-template-columns:minmax(0,1fr); border-radius:18px; }
 .login-proof { border:0; border-bottom:1px solid var(--border-color); }
 .login-proof-copy { margin-top:24px; }
 .login-proof h1 { font-size:32px; }
 .login-capabilities { display:none; }
 .login-networks { margin-top:20px; }
 .login-card { padding:28px; }
 .login-disclosure { padding:24px; }
 .login-disclosure .login-footer { grid-template-columns:minmax(0,1fr); }
 .login-footer > div:last-child { grid-column:1; }
}
@media (max-width:480px) {
 .header-left { gap:8px; }
 .breadcrumb { font-size:10px; gap:4px; }
 .user-btn > svg { display:none; }
 .m2-app .m2-provider-grid { grid-template-columns:minmax(0,1fr); }
 .m2-app .card-header { padding:16px; }
 .card-body,.stat-card { padding:16px; }
 .stat-value { font-size:24px; }
 .toast { min-width:0; max-width:calc(100vw - 32px); }
 .m2-app .kpi-tip-pop { min-width:180px; max-width:220px; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
.m2-app .m2-page-hero:has(> .page-title) { display:block; }
.m2-app .m2-page-hero:has(> .page-title) > .text-sm { margin-bottom:12px; }
.m2-empty-cell { padding:40px 20px !important; text-align:center; color:var(--text-muted) !important; }
[data-theme="dark"] .m2-eyebrow,[data-theme="dark"] .menu-link.active,[data-theme="dark"] .badge-primary { color:#b7aaff; }
.m2-app .post-hero-info { min-width:0; }
.m2-app .post-hero-title { overflow-wrap:anywhere; }
@media (max-width:1200px) {
 .m2-app .calendar-main-column { flex:none; }
}
@media (max-width:768px) {
 .login-proof { padding:24px 28px; }
 .login-proof-copy { margin-top:20px; }
 .login-proof-copy p { display:none; }
 .login-proof h1 { font-size:28px; }
 .login-networks { gap:10px; margin-top:16px; }
}
/* Compatibility aliases for older page-local components and pagination. */
:root {
 --bg-surface:var(--bg-card); --bg-primary:var(--bg-card); --bg-muted:var(--bg-subtle);
 --text:var(--text-secondary); --border:var(--border-color); --purple:var(--primary);
 --purple-bg:var(--primary-bg); --accent-blue:var(--primary);
}
.m2-app .cal-platform-pills .platform-pill.active:not(.fb):not(.ig):not(.yt):not(.tt) { background:var(--primary-bg); color:var(--primary); border-color:var(--primary-line); }
[data-theme="dark"] .user-avatar,[data-theme="dark"] .theme-toggle:hover { color:#b7aaff; }

/* Provider directory follows M1 AppIntegrations workspace layout. */
.m2-app .m2-directory { border:1px solid var(--border-color); border-radius:1.45rem; background:radial-gradient(ellipse at top left,rgba(87,71,242,.10),transparent 34%),linear-gradient(135deg,rgba(216,225,239,.04),rgba(216,225,239,.015)); overflow:hidden; }
.m2-directory-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px; border-bottom:1px solid var(--border-color); }
.m2-directory-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.24em; color:var(--text-muted); font-weight:700; margin-bottom:12px; }
.m2-directory-header h2 { font-size:1.35rem; font-weight:600; margin:0 0 10px; }
.m2-directory-header p { font-size:14px; line-height:24px; color:var(--text-muted); margin:0; }
.m2-directory-count { border:1px solid var(--border-color); border-radius:999px; padding:6px 12px; font-size:10px; text-transform:uppercase; letter-spacing:.18em; white-space:nowrap; color:var(--text-muted); font-weight:600; }
.m2-directory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:24px; }
.m2-app .m2-directory-item { display:flex; align-items:flex-start; gap:12px; padding:16px; border:1px solid var(--border-color); border-radius:1.15rem; background:transparent; text-align:left; min-width:0; margin:0; color:var(--text-primary); cursor:pointer; text-decoration:none; white-space:normal; position:relative; }
.m2-app .m2-directory-item:hover,.m2-app .m2-directory-item.active { border-color:rgba(87,71,242,.36); background:linear-gradient(135deg,rgba(87,71,242,.18),rgba(87,71,242,.05)); box-shadow:0 18px 40px -28px rgba(87,71,242,.55); }
.m2-directory-item:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.m2-directory-icon { display:flex; align-items:center; justify-content:center; flex:0 0 44px; height:44px; border-radius:1rem; background:color-mix(in srgb,var(--provider-color) 12%,white); color:var(--provider-color); font-size:16px; }
.m2-directory-copy { display:block; min-width:0; flex:1; }
.m2-directory-name { display:block; font-size:14px; font-weight:600; line-height:22px; color:var(--text-primary); }
.m2-directory-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:4px; color:var(--text-muted); font-size:12px; line-height:20px; font-weight:400; }
.m2-directory-active { display:none; position:absolute; right:12px; top:12px; border-radius:999px; padding:3px 7px; color:var(--primary); background:rgba(87,71,242,.12); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.m2-directory-item.active .m2-directory-active { display:block; }
.m2-directory-item.active .m2-directory-name { padding-right:70px; }
.m2-directory-footer { padding:0 24px 24px; }
.m2-app .platform-panel { max-width:none; border:1px solid var(--border-color); border-radius:1.45rem; background:var(--bg-card); padding:24px; }
.m2-app .platform-panel .config-header { border-bottom:1px solid var(--border-color); padding-bottom:24px; margin-bottom:24px !important; }
.m2-app .platform-panel .config-header h2 { font-size:1rem !important; }
.m2-app .platform-panel .config-section { box-shadow:none; border-radius:1.15rem; }
.m2-app .platform-panel .info-box { border-color:var(--primary-line); background:var(--primary-bg); }
@media(max-width:1399px) { .m2-directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1100px) { .m2-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .m2-directory-grid { grid-template-columns:minmax(0,1fr); padding:16px; } .m2-directory-header { padding:20px 16px; flex-wrap:wrap; } .m2-app .platform-panel { padding:16px; } }
.m2-app .m2-integration-hero { justify-content:flex-start; align-items:flex-start; padding:24px; border-color:transparent; gap:16px; }
.m2-integration-hero-icon { width:56px; height:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:rgba(87,71,242,.14); color:var(--primary); font-size:24px; }
.m2-integration-hero-copy { flex:1; }
.m2-integration-title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.m2-integration-hero .m2-directory-eyebrow { margin-bottom:10px; }
.m2-integration-hero p { margin-top:16px !important; }
[data-theme="dark"] .m2-directory-active { color:#b7aaff; }
.m2-app .config-header:has(.m2-config-provider-icon) { position:relative; padding-left:64px; min-height:72px; }
.m2-config-provider-icon { position:absolute; left:0; top:0; width:48px; height:48px; }
.m2-app .m2-directory-footer .platform-tab { border:1px solid var(--border-color); color:var(--text-secondary); background:var(--bg-card); }
.m2-app .m2-directory-footer .platform-tab.active { color:var(--primary); border-color:var(--primary-line); background:var(--primary-bg); }

/* Vietnamese product name is primary; English is secondary. */
.brand-copy strong { font-size:18px; letter-spacing:-.035em; line-height:1.2; }
.sidebar-footer .brand-copy { font-size:10px; line-height:1.5; }
.sidebar-footer-mark { font-size:10px; }