:root {
      color-scheme: dark;
      --bg:#080b11;
      --bg-2:#0d121a;
      --bg-3:#111722;
      --panel:#141b25;
      --panel-2:#0f141c;
      --panel-soft:rgba(255,255,255,0.035);
      --ink:#f2f5fb;
      --muted:#8e99ae;
      --line:#212a38;
      --line-strong:#2d3748;
      --accent:#e13a3f;
      --accent-2:#f0c54f;
      --ok:#2f9c67;
      --warn:#c94755;
      --radius:16px;
      --radius-sm:12px;
      --shadow:0 18px 60px rgba(0,0,0,0.35);
      --sidebar-width:248px;
      --content-width:1680px;
      --font-base:13px;
    }
    * { box-sizing:border-box; }
    html, body { min-height:100%; }
    body {
      margin:0;
      font:var(--font-base)/1.4 "Segoe UI", system-ui, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(225, 58, 63, 0.10), transparent 20%),
        radial-gradient(circle at bottom right, rgba(240, 197, 79, 0.08), transparent 18%),
        linear-gradient(180deg, var(--bg-2), var(--bg));
      color:var(--ink);
    }
    a { color:inherit; }
    h1, h2, h3, p { margin:0; }
    button, input, select, textarea { font:inherit; }
    .app-shell {
      display:grid;
      grid-template-columns:var(--sidebar-width) minmax(0, 1fr);
      min-height:100vh;
    }
    .sidebar {
      position:sticky;
      top:0;
      height:100vh;
      display:grid;
      grid-template-rows:auto 1fr auto;
      gap:16px;
      padding:18px 14px;
      border-right:1px solid var(--line);
      background:rgba(8, 10, 15, 0.96);
      backdrop-filter:blur(14px);
    }
    .sidebar-brand {
      display:grid;
      gap:8px;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(240,197,79,0.16);
      background:linear-gradient(180deg, rgba(225,58,63,0.12), rgba(255,255,255,0.03));
    }
    .sidebar-brand strong {
      font-size:1rem;
      letter-spacing:0.06em;
      text-transform:uppercase;
      color:var(--accent-2);
    }
    .sidebar-brand span {
      color:var(--muted);
      font-size:0.77rem;
    }
    .sidebar-nav {
      display:grid;
      gap:4px;
      align-content:start;
      overflow:auto;
      padding-right:2px;
    }
    .sidebar-nav a,
    .sidebar-link {
      display:flex;
      align-items:center;
      gap:8px;
      min-height:40px;
      padding:9px 12px;
      border-radius:12px;
      text-decoration:none;
      color:var(--muted);
      border:1px solid transparent;
      transition:background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
    }
    .sidebar-nav a:hover,
    .sidebar-nav a.active,
    .sidebar-link:hover {
      background:rgba(225, 58, 63, 0.10);
      color:var(--ink);
      border-color:rgba(225, 58, 63, 0.18);
      transform:translateX(1px);
    }
    .sidebar-footer {
      display:grid;
      gap:10px;
    }
    .nav-user {
      display:grid;
      gap:10px;
      padding:12px;
      border-radius:16px;
      border:1px solid var(--line);
      background:rgba(255,255,255,0.03);
      color:var(--muted);
    }
    .nav-user-top {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .nav-user-top strong { color:var(--ink); }
    .nav-user form { margin:0; }
    .nav-switch {
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:10px;
      align-items:center;
      padding:8px 10px;
      border:1px solid var(--line);
      border-radius:12px;
      background:rgba(255,255,255,0.03);
      color:var(--ink);
    }
    .nav-switch-text {
      display:grid;
      gap:1px;
      min-width:0;
    }
    .nav-switch-text strong {
      font-size:0.74rem;
      line-height:1.1;
    }
    .nav-switch-text span {
      font-size:0.68rem;
      color:var(--muted);
      line-height:1.1;
    }
    .nav-switch input[type="checkbox"] {
      width:34px;
      height:20px;
      appearance:none;
      border-radius:999px;
      border:1px solid var(--line-strong);
      background:rgba(255,255,255,0.08);
      position:relative;
      cursor:pointer;
      transition:background 120ms ease, border-color 120ms ease;
    }
    .nav-switch input[type="checkbox"]::after {
      content:"";
      position:absolute;
      top:1px;
      left:1px;
      width:16px;
      height:16px;
      border-radius:50%;
      background:#fff;
      transition:transform 120ms ease;
    }
    .nav-switch input[type="checkbox"]:checked {
      background:rgba(225, 58, 63, 0.5);
      border-color:rgba(225, 58, 63, 0.55);
    }
    .nav-switch input[type="checkbox"]:checked::after {
      transform:translateX(14px);
    }
    .content-area {
      min-width:0;
      display:grid;
      grid-template-rows:auto 1fr;
    }
    .page-frame {
      width:min(100%, var(--content-width));
      margin:0 auto;
      padding:8px 12px;
      display:grid;
      gap:6px;
    }
    .page-frame.is-wide {
      width:100%;
      max-width:none;
      margin:0;
    }
    .page-topbar {
      position:sticky;
      top:0;
      z-index:8;
      display:grid;
      gap:4px;
      padding:6px 12px;
      border-bottom:1px solid var(--line);
      background:rgba(8, 10, 15, 0.88);
      backdrop-filter:blur(12px);
    }
    .page-topbar-layout {
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:12px;
      align-items:start;
    }
    .page-topbar-main {
      display:grid;
      gap:4px;
      min-width:0;
    }
    .breadcrumbs {
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:0.72rem;
      letter-spacing:0.04em;
      text-transform:uppercase;
      line-height:1.1;
    }
    .breadcrumbs a {
      text-decoration:none;
      color:inherit;
    }
    .breadcrumbs .is-current {
      color:var(--ink);
    }
    .page-header {
      display:flex;
      align-items:flex-end;
      justify-content:flex-start;
      gap:8px;
      min-width:0;
    }
    .page-title-stack {
      display:grid;
      gap:1px;
      min-width:0;
    }
    .page-title-stack h1 {
      font-size:1.06rem;
      line-height:1.04;
      letter-spacing:-0.02em;
    }
    .page-title-stack p {
      color:var(--muted);
      max-width:82ch;
      font-size:0.76rem;
    }
    .page-meta {
      display:flex;
      align-items:flex-start;
      justify-content:flex-end;
      gap:6px;
      flex-wrap:wrap;
      min-width:0;
    }
    .section-tabs {
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .section-tab {
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,0.03);
      color:var(--muted);
      text-decoration:none;
      transition:background 120ms ease, color 120ms ease, border-color 120ms ease;
    }
    .section-tab.is-active,
    .section-tab:hover {
      color:var(--ink);
      border-color:rgba(225, 58, 63, 0.24);
      background:rgba(225, 58, 63, 0.08);
    }
    main {
      min-width:0;
    }
    .panel {
      background:linear-gradient(180deg, rgba(22, 28, 38, 0.96), rgba(16, 20, 28, 0.96));
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:12px;
      box-shadow:var(--shadow);
      min-width:0;
    }
    .panel.tight { padding:10px; }
    .panel h1 { font-size:1.24rem; margin-bottom:4px; }
    .panel h2 { font-size:0.98rem; margin-bottom:8px; }
    .panel h3 { font-size:0.86rem; margin-bottom:8px; }
    .panel-header {
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .panel-header.compact { margin-bottom:8px; }
    .grid { display:grid; gap:10px; }
    .grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .stack { display:grid; gap:8px; }
    .hero {
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:end;
      flex-wrap:wrap;
    }
    label, .field {
      display:grid;
      gap:5px;
      min-width:0;
    }
    .fieldset-grid {
      display:grid;
      gap:10px;
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .field-label {
      display:flex;
      align-items:center;
      gap:8px;
      font-size:0.82rem;
      font-weight:600;
      color:var(--ink);
    }
    .field-help, .muted, small {
      color:var(--muted);
      font-size:0.75rem;
      line-height:1.35;
    }
    .tooltip {
      display:inline-grid;
      place-items:center;
      width:16px;
      height:16px;
      border-radius:50%;
      border:1px solid var(--line-strong);
      color:var(--accent-2);
      font-size:0.72rem;
      cursor:help;
    }
    input, textarea, select {
      width:100%;
      border:1px solid var(--line-strong);
      border-radius:12px;
      padding:8px 10px;
      color:var(--ink);
      background:rgba(8, 12, 18, 0.92);
      outline:none;
    }
    input:focus, textarea:focus, select:focus {
      border-color:rgba(225, 58, 63, 0.6);
      box-shadow:0 0 0 3px rgba(225, 58, 63, 0.12);
    }
    input[type="checkbox"] {
      width:16px;
      height:16px;
      margin:0;
      accent-color:var(--accent);
    }
    input[type="file"] {
      padding:7px;
      background:rgba(11, 15, 22, 0.8);
    }
    textarea { min-height:92px; resize:vertical; }
    table {
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      font-size:0.88rem;
    }
    th, td {
      padding:9px 10px;
      border-bottom:1px solid rgba(255,255,255,0.06);
      text-align:left;
      vertical-align:middle;
      white-space:nowrap;
    }
    td.wrap, th.wrap { white-space:normal; }
    tbody tr:hover td {
      background:rgba(255,255,255,0.02);
    }
    th {
      position:sticky;
      top:0;
      z-index:1;
      background:rgba(11, 16, 24, 0.98);
      color:var(--muted);
      font-weight:600;
      text-transform:uppercase;
      font-size:0.68rem;
      letter-spacing:0.08em;
    }
    .table-shell {
      overflow:auto;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(7, 10, 16, 0.72);
    }
    .data-toolbar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .data-toolbar .actions {
      margin-left:auto;
    }
    .toolbar-group {
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .actions,
    .action-bar {
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .action-bar {
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:14px;
      background:rgba(255,255,255,0.03);
      justify-content:space-between;
      margin-bottom:8px;
    }
    .checkline {
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border:1px solid var(--line);
      border-radius:12px;
      background:rgba(9, 12, 18, 0.8);
    }
    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      border:1px solid transparent;
      border-radius:12px;
      background:#dde3ef;
      color:#0a0c10;
      padding:8px 11px;
      text-decoration:none;
      cursor:pointer;
      font-weight:700;
      line-height:1;
      min-height:34px;
    }
    .btn.alt {
      background:linear-gradient(180deg, #ec474d, #cb2f35);
      color:#fff;
    }
    .btn.warn {
      background:#31161a;
      color:#ff9aa3;
      border-color:#5e252e;
    }
    .btn.ghost {
      background:rgba(255,255,255,0.03);
      color:var(--ink);
      border-color:var(--line-strong);
    }
    .btn.linkish {
      background:transparent;
      color:var(--muted);
      border-color:transparent;
      padding-inline:4px;
    }
    .flash {
      padding:10px 12px;
      border-radius:12px;
      background:rgba(47, 156, 103, 0.14);
      border:1px solid rgba(47, 156, 103, 0.24);
    }
    .flash.error {
      background:rgba(201, 71, 85, 0.14);
      border-color:rgba(201, 71, 85, 0.28);
      color:#ffb8c0;
    }
    .stats-cards {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    .metric {
      display:grid;
      gap:4px;
      padding:12px;
      border-radius:14px;
      background:rgba(255,255,255,0.03);
      border:1px solid var(--line);
    }
    .metric strong { font-size:1.42rem; }
    .compact-table {
      max-height:calc(100vh - 220px);
      overflow:auto;
      border-radius:12px;
      border:1px solid var(--line);
    }
    .subpanel {
      padding:10px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,0.02);
    }
    .token {
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:34px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(255,255,255,0.05);
      border:1px solid var(--line);
      font-size:0.74rem;
      line-height:1;
      color:var(--muted);
    }
    .insight-list {
      display:grid;
      gap:8px;
    }
    .insight-row {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px;
      border-radius:12px;
      border:1px solid var(--line);
      background:rgba(8, 12, 18, 0.82);
    }
    .insight-row strong {
      display:block;
      margin-bottom:2px;
    }
    .badges {
      display:flex;
      gap:4px;
      flex-wrap:wrap;
      margin-top:3px;
    }
    .badge {
      display:inline-flex;
      align-items:center;
      padding:2px 6px;
      border-radius:999px;
      font-size:0.66rem;
      border:1px solid var(--line);
      background:rgba(255,255,255,0.04);
      color:var(--muted);
    }
    .badge.is-on {
      border-color:rgba(47, 156, 103, 0.35);
      color:#9ee2bf;
      background:rgba(47, 156, 103, 0.14);
    }
    .badge.is-off {
      border-color:rgba(201, 71, 85, 0.35);
      color:#f2a3ab;
      background:rgba(201, 71, 85, 0.14);
    }
    .badge.is-repeat {
      border-color:rgba(240, 197, 79, 0.35);
      color:#f3da8d;
      background:rgba(240, 197, 79, 0.12);
    }
    .badge.is-goto {
      border-color:rgba(90, 160, 255, 0.35);
      color:#9dc5ff;
      background:rgba(90, 160, 255, 0.12);
    }
    .badge.is-unlock-adviser {
      border-color:rgba(225, 58, 63, 0.35);
      color:#ffb1b4;
      background:rgba(225, 58, 63, 0.14);
    }
    .pagination {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-top:10px;
    }
    .pagination-pages {
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .pagination-pages a,
    .pagination-pages span {
      min-width:34px;
      min-height:34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0 10px;
      border-radius:10px;
      border:1px solid var(--line);
      background:rgba(255,255,255,0.03);
      text-decoration:none;
      color:var(--muted);
    }
    .pagination-pages .is-current {
      background:rgba(225,58,63,0.12);
      border-color:rgba(225,58,63,0.24);
      color:var(--ink);
    }
    .dashboard-grid {
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px;
    }
    .asset-preview {
      display:grid;
      place-items:center;
      min-height:108px;
      border-radius:14px;
      border:1px dashed var(--line-strong);
      background:rgba(9, 12, 18, 0.82);
      color:var(--muted);
      text-align:center;
      overflow:hidden;
    }
    .asset-preview img {
      display:block;
      width:100%;
      height:100%;
      max-height:180px;
      object-fit:cover;
    }
    .asset-preview.is-compact {
      min-height:72px;
      width:72px;
      aspect-ratio:1 / 1;
      margin-left:0;
    }
    .row-actions {
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .row-actions form { margin:0; }
    .icon-btn {
      width:30px;
      min-width:30px;
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      line-height:1;
      font-size:0.95rem;
      font-weight:700;
    }
    @media (max-width:1200px) {
      .grid.two, .grid.three, .grid.four, .stats-cards, .dashboard-grid, .fieldset-grid {
        grid-template-columns:1fr;
      }
    }
    @media (max-width:980px) {
      .app-shell {
        grid-template-columns:1fr;
      }
      .sidebar {
        position:static;
        height:auto;
      }
      .page-topbar {
        position:static;
      }
      .page-topbar-layout {
        grid-template-columns:1fr;
      }
      .page-meta {
        justify-content:flex-start;
      }
      .compact-table {
        max-height:none;
      }
    }
