/* ============================================================
       DESIGN TOKENS — MNC SEO Dashboard
    ============================================================ */
    :root {
      /* Brand Colors */
      --mnc-gold:        #ffc000;
      --mnc-gold-dark:   #d4a500;
      --mnc-gold-light:  #ffe066;
      --mnc-gold-tint:   rgba(255,192,0,0.10);
      --mnc-dark:         #141414;
      --mnc-navy:         #242b35;
      --mnc-navy-light:   #2e3744;
      --mnc-text:         #1a2233;
      --mnc-muted:        #6b7280;
      --mnc-border:       #e5e7eb;
      --mnc-surface:      #f1f3f7;

      /* Dashboard Backgrounds */
      --bg-page:          #f4f6fa;
      --bg-card:          #ffffff;
      --bg-sidebar:       #141414;
      --bg-header:        #ffffff;

      /* Semantic */
      --color-primary:    #4a8eff;
      --color-primary-hover: #5998ff;
      --color-success:    #018e11;
      --color-success-light: #dcfce7;
      --color-danger:     #ff5062;
      --color-danger-light: #ffe4e6;
      --color-warning:    #f59e0b;
      --color-warning-light: #fef3c7;
      --color-info:       #2CA8FF;
      --color-info-light: #dbeafe;

      /* Chart Colors */
      --chart-gold:   #ffc000;
      --chart-blue:   #4a8eff;
      --chart-green:  #22c55e;
      --chart-red:    #ff5062;
      --chart-purple: #8b5cf6;
      --chart-teal:   #14b8a6;
      --chart-orange: #f97316;
      --chart-pink:   #ec4899;
      --chart-indigo: #6366f1;
      --chart-gray:   #94a3b8;

      /* Typography */
      --font-th: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

      /* Spacing */
      --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
      --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

      /* Radius */
      --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;

      /* Shadows */
      --sh-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
      --sh-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
      --sh-lg: 0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
      --sh-gold: 0 4px 20px rgba(255,192,0,0.25);
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; }
    body {
      font-family: var(--font-th);
      background: var(--bg-page);
      color: var(--mnc-text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.3; }
    a { color: var(--color-primary); text-decoration: none; }
    a:hover { color: var(--color-primary-hover); }

    /* ============================================================
       LAYOUT — TWO-COLUMN DASHBOARD
    ============================================================ */
    .dashboard {
      display: grid;
      grid-template-columns: 240px 1fr;
      grid-template-rows: 64px 1fr;
      min-height: 100vh;
    }

    /* SIDEBAR */
    .sidebar {
      grid-column: 1; grid-row: 1 / 3;
      background: var(--bg-sidebar);
      padding: var(--sp-6);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
    }
    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding-bottom: var(--sp-6);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      margin-bottom: var(--sp-4);
    }
    .sidebar-logo-icon {
      width: 36px; height: 36px;
      background: var(--mnc-gold);
      border-radius: var(--r-sm);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; color: var(--mnc-dark);
      font-size: 18px;
      flex-shrink: 0;
    }
    .sidebar-logo-text { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; }
    .sidebar-logo-sub { color: rgba(255,255,255,0.4); font-size: 11px; font-weight: 400; }

    .sidebar-nav-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.3);
      padding: var(--sp-4) var(--sp-2) var(--sp-2);
      font-family: var(--font-en);
    }
    .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
    .sidebar-nav a {
      display: flex; align-items: center; gap: var(--sp-3);
      padding: var(--sp-2) var(--sp-3);
      border-radius: var(--r-sm);
      color: rgba(255,255,255,0.6);
      font-size: 14px;
      font-weight: 400;
      transition: all 0.15s ease;
    }
    .sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
    .sidebar-nav a.active {
      background: var(--mnc-gold-tint);
      color: var(--mnc-gold);
      font-weight: 500;
    }
    .sidebar-nav a.active .nav-icon { color: var(--mnc-gold); }
    .nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
    .nav-badge {
      margin-left: auto;
      background: var(--mnc-gold);
      color: var(--mnc-dark);
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: var(--r-full);
      font-family: var(--font-en);
    }
    .sidebar-footer {
      margin-top: auto;
      padding-top: var(--sp-6);
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .sidebar-user {
      display: flex; align-items: center; gap: var(--sp-3);
      padding: var(--sp-3);
      border-radius: var(--r-md);
      background: rgba(255,255,255,0.04);
    }
    .sidebar-avatar {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, var(--mnc-gold), var(--mnc-gold-dark));
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--mnc-dark); font-weight: 700; font-size: 14px;
      flex-shrink: 0;
    }
    .sidebar-user-info { flex: 1; min-width: 0; }
    .sidebar-user-name { color: #fff; font-size: 13px; font-weight: 500; }
    .sidebar-user-role { color: rgba(255,255,255,0.4); font-size: 11px; }

    /* TOP HEADER */
    .topbar {
      grid-column: 2; grid-row: 1;
      background: var(--bg-header);
      border-bottom: 1px solid var(--mnc-border);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 10px var(--sp-8);
      gap: var(--sp-2) var(--sp-4);
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .topbar-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--mnc-text);
      flex: 1;
    }
    .topbar-title span { color: var(--mnc-muted); font-weight: 400; }

    /* Domain Switcher */
    .domain-switcher {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      background: var(--mnc-surface);
      border: 1px solid var(--mnc-border);
      border-radius: var(--r-full);
      padding: 4px;
    }
    .domain-btn {
      padding: 5px 14px;
      border-radius: var(--r-full);
      font-size: 12px;
      font-weight: 500;
      color: var(--mnc-muted);
      cursor: pointer;
      border: none;
      background: transparent;
      font-family: var(--font-th);
      transition: all 0.15s ease;
    }
    .domain-btn.active {
      background: var(--bg-card);
      color: var(--mnc-dark);
      box-shadow: var(--sh-sm);
    }
    .domain-btn:hover:not(.active) { color: var(--mnc-text); }

    /* Header Actions */
    .header-actions { display: flex; align-items: center; gap: var(--sp-3); }
    .icon-btn {
      width: 36px; height: 36px;
      border: 1px solid var(--mnc-border);
      border-radius: var(--r-sm);
      background: var(--bg-card);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 16px;
      color: var(--mnc-muted);
      transition: all 0.15s;
    }
    .icon-btn:hover { border-color: var(--mnc-gold); color: var(--mnc-gold); }

    /* Period Selector */
    .period-tabs {
      display: flex;
      background: var(--mnc-surface);
      border: 1px solid var(--mnc-border);
      border-radius: var(--r-full);
      padding: 3px;
    }
    .period-tab {
      padding: 5px 16px;
      border-radius: var(--r-full);
      font-size: 12px;
      font-weight: 500;
      color: var(--mnc-muted);
      cursor: pointer;
      border: none;
      background: transparent;
      font-family: var(--font-th);
      transition: all 0.15s;
    }
    .period-tab.active {
      background: var(--bg-card);
      color: var(--mnc-dark);
      box-shadow: var(--sh-sm);
    }
    .period-tab:hover:not(.active) { color: var(--mnc-text); }

    /* ============================================================
       MAIN CONTENT
    ============================================================ */
    .main-content {
      grid-column: 2; grid-row: 2;
      padding: var(--sp-8);
      display: flex;
      flex-direction: column;
      gap: var(--sp-6);
    }

    /* ============================================================
       SECTION HEADERS
    ============================================================ */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--sp-5);
    }
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--mnc-text);
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }
    .section-title-icon {
      color: var(--mnc-gold);
      font-size: 18px;
    }
    .section-action {
      font-size: 13px;
      color: var(--color-primary);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* ============================================================
       KPI ROW
    ============================================================ */
    .kpi-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--sp-5);
    }
    .kpi-card {
      background: var(--bg-card);
      border: 1px solid var(--mnc-border);
      border-radius: var(--r-lg);
      padding: var(--sp-6);
      box-shadow: var(--sh-sm);
      position: relative;
      overflow: hidden;
    }
    .kpi-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--accent-color, var(--mnc-gold));
      border-radius: var(--r-lg) var(--r-lg) 0 0;
    }
    .kpi-card.gold   { --accent-color: var(--mnc-gold); }
    .kpi-card.blue   { --accent-color: var(--color-primary); }
    .kpi-card.green  { --accent-color: var(--chart-green); }
    .kpi-card.purple { --accent-color: var(--chart-purple); }

    .kpi-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-3); }
    .kpi-label { font-size: 12px; color: var(--mnc-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
    .kpi-icon-wrap {
      width: 36px; height: 36px;
      border-radius: var(--r-sm);
      display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--accent-color, var(--mnc-gold)) 15%, #fff);
      color: var(--mnc-navy, #0b1f3a);
    }
    .kpi-icon-wrap svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .kpi-value {
      font-size: 30px;
      font-weight: 700;
      color: var(--mnc-dark);
      line-height: 1;
      margin-bottom: var(--sp-2);
      font-family: var(--font-en);
    }
    .kpi-value .unit { font-size: 16px; font-weight: 500; color: var(--mnc-muted); margin-left: 2px; }
    .kpi-footer { display: flex; align-items: center; justify-content: space-between; }
    .kpi-trend {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: var(--r-full);
      font-family: var(--font-en);
    }
    .kpi-trend.up   { background: var(--color-success-light); color: var(--color-success); }
    .kpi-trend.down { background: var(--color-danger-light);  color: var(--color-danger);  }
    .kpi-sub { font-size: 11px; color: var(--mnc-muted); }

    /* ============================================================
       CHARTS ROW
    ============================================================ */
    .charts-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--sp-5);
    }
    .chart-card {
      background: var(--bg-card);
      border: 1px solid var(--mnc-border);
      border-radius: var(--r-lg);
      padding: var(--sp-6);
      box-shadow: var(--sh-sm);
    }

    /* Trend Chart Placeholder (SVG) */
    .chart-area {
      height: 180px;
      position: relative;
      margin: var(--sp-4) 0;
    }
    .chart-area canvas, .chart-area svg { width: 100%; height: 100%; }

    /* SVG Line Chart Mockup */
    .svg-chart { width: 100%; height: 160px; }
    .svg-chart .grid-line { stroke: var(--mnc-border); stroke-width: 1; stroke-dasharray: 4 4; }
    .svg-chart .data-line {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .svg-chart .data-area {
      opacity: 0.08;
    }

    /* Pie Chart */
    .pie-chart-container {
      display: flex;
      align-items: center;
      gap: var(--sp-6);
      padding: var(--sp-4) 0;
    }
    .pie-svg { width: 140px; height: 140px; flex-shrink: 0; }
    .pie-legend { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
    .pie-legend-item { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; }
    .pie-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .pie-legend-name { flex: 1; color: var(--mnc-text); }
    .pie-legend-pct { font-weight: 600; font-family: var(--font-en); color: var(--mnc-muted); font-size: 11px; }

    /* Chart Tabs (for pie) */
    .chart-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); }
    .chart-tab {
      padding: 4px 12px;
      font-size: 11px;
      font-weight: 500;
      border-radius: var(--r-full);
      border: 1px solid var(--mnc-border);
      background: transparent;
      color: var(--mnc-muted);
      cursor: pointer;
      font-family: var(--font-th);
      transition: all 0.15s;
    }
    .chart-tab.active {
      background: var(--mnc-gold);
      border-color: var(--mnc-gold);
      color: var(--mnc-dark);
    }
    .chart-tab:hover:not(.active) { border-color: var(--mnc-gold); color: var(--mnc-dark); }

    /* ============================================================
       DATA TABLE
    ============================================================ */
    .table-card {
      background: var(--bg-card);
      border: 1px solid var(--mnc-border);
      border-radius: var(--r-lg);
      box-shadow: var(--sh-sm);
      overflow: hidden;
    }
    .table-wrap { overflow-x: auto; }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    thead { background: var(--mnc-surface); }
    th {
      padding: var(--sp-3) var(--sp-4);
      text-align: left;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--mnc-muted);
      border-bottom: 1px solid var(--mnc-border);
      white-space: nowrap;
    }
    th:first-child { padding-left: var(--sp-6); }
    th:last-child { padding-right: var(--sp-6); }
    td {
      padding: var(--sp-3) var(--sp-4);
      border-bottom: 1px solid var(--mnc-border);
      color: var(--mnc-text);
      vertical-align: middle;
    }
    td:first-child { padding-left: var(--sp-6); }
    td:last-child { padding-right: var(--sp-6); }
    tr:last-child td { border-bottom: none; }
    tbody tr:hover { background: rgba(255,192,0,0.03); }
    tbody tr:nth-child(even) { background: #fafbfd; }
    tbody tr:nth-child(even):hover { background: rgba(255,192,0,0.04); }

    /* Table Badges */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: var(--r-full);
      font-size: 11px;
      font-weight: 600;
      font-family: var(--font-en);
    }
    .badge-gold   { background: rgba(255,192,0,0.12); color: #926400; }
    .badge-green  { background: var(--color-success-light); color: var(--color-success); }
    .badge-red    { background: var(--color-danger-light);  color: var(--color-danger);  }
    .badge-blue   { background: var(--color-info-light);    color: var(--color-info);    }
    .badge-purple { background: rgba(139,92,246,0.12);     color: var(--chart-purple);  }
    .badge-gray   { background: rgba(148,163,184,0.15);   color: var(--chart-gray);    }

    .keyword-cell {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      font-weight: 500;
    }
    .keyword-icon { font-size: 14px; }
    .position-bar {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }
    .position-track {
      width: 60px;
      height: 4px;
      background: var(--mnc-border);
      border-radius: var(--r-full);
      overflow: hidden;
    }
    .position-fill {
      height: 100%;
      border-radius: var(--r-full);
      transition: width 0.3s;
    }
    .position-num { font-weight: 600; font-family: var(--font-en); font-size: 12px; min-width: 28px; }

    /* ============================================================
       REPORT CARDS (Weekly / Monthly / Yearly)
    ============================================================ */
    .report-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
    }
    .report-card {
      background: var(--bg-card);
      border: 1px solid var(--mnc-border);
      border-radius: var(--r-lg);
      padding: var(--sp-6);
      box-shadow: var(--sh-sm);
    }
    .report-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
    .report-card-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--mnc-text);
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }
    .report-period {
      font-size: 11px;
      color: var(--mnc-muted);
      background: var(--mnc-surface);
      padding: 2px 10px;
      border-radius: var(--r-full);
    }
    .report-stat { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--mnc-border); }
    .report-stat:last-child { border-bottom: none; padding-bottom: 0; }
    .report-stat-label { font-size: 13px; color: var(--mnc-muted); display: flex; align-items: center; gap: var(--sp-2); }
    .report-stat-value { font-size: 14px; font-weight: 600; color: var(--mnc-dark); font-family: var(--font-en); }

    /* Mini sparkline chart in report */
    .mini-chart { display: flex; align-items: flex-end; gap: 2px; height: 24px; }
    .mini-bar { width: 6px; border-radius: 2px 2px 0 0; background: var(--mnc-gold-tint); transition: all 0.2s; }
    .mini-bar.active { background: var(--mnc-gold); }
    .mini-bar:hover { background: var(--mnc-gold-dark); }

    /* ============================================================
       TWO-COLUMN LAYOUT (for bottom section)
    ============================================================ */
    .bottom-row {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: var(--sp-5);
    }

    /* ============================================================
       PROGRESS BARS (Tags / Categories)
    ============================================================ */
    .progress-list { display: flex; flex-direction: column; gap: var(--sp-4); }
    .progress-item { display: flex; flex-direction: column; gap: var(--sp-2); }
    .progress-header { display: flex; justify-content: space-between; align-items: center; }
    .progress-label { font-size: 13px; font-weight: 500; color: var(--mnc-text); }
    .progress-meta { font-size: 11px; color: var(--mnc-muted); font-family: var(--font-en); }
    .progress-track { height: 6px; background: var(--mnc-border); border-radius: var(--r-full); overflow: hidden; }
    .progress-fill { height: 100%; border-radius: var(--r-full); background: var(--fill-color, var(--mnc-gold)); }

    /* ============================================================
       ALERTS / NOTIFICATIONS
    ============================================================ */
    .alert-row { display: flex; flex-direction: column; gap: var(--sp-3); }
    .alert-item {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-3);
      padding: var(--sp-3) var(--sp-4);
      border-radius: var(--r-md);
      border: 1px solid var(--alert-border, var(--mnc-border));
      background: var(--alert-bg, var(--bg-card));
      font-size: 13px;
    }
    .alert-item.success { --alert-border: var(--color-success); --alert-bg: var(--color-success-light); }
    .alert-item.warning { --alert-border: var(--color-warning); --alert-bg: var(--color-warning-light); }
    .alert-item.danger  { --alert-border: var(--color-danger);  --alert-bg: var(--color-danger-light);  }
    .alert-item.info    { --alert-border: var(--color-info);     --alert-bg: var(--color-info-light);     }
    .alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
    .alert-text { flex: 1; color: var(--mnc-text); }
    .alert-time { font-size: 11px; color: var(--mnc-muted); margin-left: auto; white-space: nowrap; font-family: var(--font-en); }

    /* ============================================================
       PAGINATION
    ============================================================ */
    .pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--sp-4) var(--sp-6);
      border-top: 1px solid var(--mnc-border);
    }
    .pagination-info { font-size: 12px; color: var(--mnc-muted); }
    .pagination-btns { display: flex; gap: var(--sp-2); }
    .page-btn {
      width: 32px; height: 32px;
      border: 1px solid var(--mnc-border);
      border-radius: var(--r-sm);
      background: var(--bg-card);
      font-size: 12px;
      font-weight: 500;
      color: var(--mnc-muted);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-en);
      transition: all 0.15s;
    }
    .page-btn:hover { border-color: var(--mnc-gold); color: var(--mnc-dark); }
    .page-btn.active { background: var(--mnc-gold); border-color: var(--mnc-gold); color: var(--mnc-dark); font-weight: 700; }
    .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      padding: 8px 18px;
      border-radius: var(--r-sm);
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font-th);
      cursor: pointer;
      border: none;
      transition: all 0.15s;
    }
    .btn-primary { background: var(--mnc-gold); color: var(--mnc-dark); }
    .btn-primary:hover { background: var(--mnc-gold-dark); box-shadow: var(--sh-gold); }
    .btn-outline {
      background: transparent;
      border: 1px solid var(--mnc-border);
      color: var(--mnc-text);
    }
    .btn-outline:hover { border-color: var(--mnc-gold); color: var(--mnc-dark); }
    .btn-ghost { background: transparent; color: var(--mnc-muted); padding: 8px 12px; }
    .btn-ghost:hover { background: var(--mnc-surface); color: var(--mnc-dark); }

    /* ============================================================
       COLOR SWATCHES (for reference)
    ============================================================ */
    .color-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: var(--sp-4);
    }
    .color-swatch {
      border-radius: var(--r-md);
      overflow: hidden;
      border: 1px solid var(--mnc-border);
      box-shadow: var(--sh-sm);
    }
    .swatch-color { height: 56px; }
    .swatch-info { padding: var(--sp-3); background: var(--bg-card); }
    .swatch-name { font-size: 12px; font-weight: 600; color: var(--mnc-text); }
    .swatch-hex { font-size: 11px; color: var(--mnc-muted); font-family: var(--font-mono); }

    /* ============================================================
       TYPOGRAPHY SPECIMEN
    ============================================================ */
    .type-scale { display: flex; flex-direction: column; gap: var(--sp-4); }
    .type-row { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--mnc-border); }
    .type-label { font-size: 11px; color: var(--mnc-muted); font-family: var(--font-mono); width: 80px; flex-shrink: 0; }
    .type-sample { color: var(--mnc-text); }
    .type-meta { margin-left: auto; font-size: 11px; color: var(--mnc-muted); font-family: var(--font-mono); }

    /* ============================================================
       STYLE GUIDE SECTIONS
    ============================================================ */
    .sg-section {
      background: var(--bg-card);
      border: 1px solid var(--mnc-border);
      border-radius: var(--r-lg);
      padding: var(--sp-8);
      margin-bottom: var(--sp-6);
      box-shadow: var(--sh-sm);
    }
    .sg-title { font-size: 24px; font-weight: 700; margin-bottom: var(--sp-2); color: var(--mnc-dark); }
    .sg-subtitle { font-size: 14px; color: var(--mnc-muted); margin-bottom: var(--sp-6); }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1280px) {
      .dashboard { grid-template-columns: 200px 1fr; }
      /* .kpi-row removed v2 — ให้ auto-fit จัดการเอง */
    .charts-row { grid-template-columns: 1fr 1fr; }
      .report-grid { grid-template-columns: 1fr 1fr; }
      .bottom-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .dashboard { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
      .sidebar { display: none; }
      .topbar { grid-column: 1; }
      .main-content { grid-column: 1; padding: var(--sp-4); }
      .bottom-row { grid-template-columns: 1fr; }
    }
  .badge{padding:2px 12px;border-radius:20px;font-size:12px;font-weight:600;display:inline-block}
.b-dead{background:var(--danger-light);color:#b91c3c}.b-active{background:var(--success-light);color:#166534}.b-watch{background:var(--warning-light);color:#92400e}
.mono{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:13px}
.card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
tbody tr:nth-child(even){background:rgba(0,0,0,.015)}
a.kpi-card{display:block;text-decoration:none;color:inherit}
.foot{margin-top:40px;color:var(--mnc-muted);font-size:12px;text-align:center}

/* sidebar user -> profile link */
.sidebar-user-link { display:block; text-decoration:none; color:inherit; padding:6px 8px; margin:-6px -8px; border-radius:10px; transition:background .15s; min-height:44px; }
.sidebar-user-link:hover { background:rgba(255,255,255,0.06); }
.sidebar-user-link:hover .sidebar-user-edit { opacity:1; transform:scale(1.1); }
.sidebar-user-edit { font-size:12px; opacity:0; transition:all .15s; display:inline-block; }
.sidebar-user-link:hover .sidebar-user-name { color:#f97316; }

/* L-backend-logo — mobile dashboard ไม่ล้น (topbar/kpi wrap + min-width:0) */
@media(max-width:760px){
  .dashboard .topbar{min-width:0;flex-wrap:wrap;padding:10px 16px}
  .dashboard .topbar>*{min-width:0}
  
  .kpi-card{min-width:0}
  .main-content{min-width:0;overflow-x:hidden}
}