:root{
      --app-bg:#f5f7fb; --panel:#fff; --panel-2:#fff;
      --border:rgba(20,33,61,.10);
      --muted:rgba(20,33,61,.72); --muted-2:rgba(20,33,61,.58);
      --card:#fff; --card2:#fff; --shadow:0 18px 40px rgba(16,24,40,.10);
      --radius:16px; --text:#0f172a;
    }
    [data-bs-theme="dark"]{
      --app-bg:#0b1220; --panel:#0f1b33; --panel-2:#0c172d;
      --border:rgba(255,255,255,.10);
      --muted:rgba(255,255,255,.72); --muted-2:rgba(255,255,255,.60);
      --card:rgba(255,255,255,.06); --card2:rgba(255,255,255,.08);
      --shadow:0 20px 60px rgba(0,0,0,.35); --text:#e8eefc;
    }

    body{ background:var(--app-bg); color:var(--text); }
    .app{ display:flex; min-height:100vh; }
    .sidebar{
      width:280px; background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
      border-right:1px solid var(--border);
      position:sticky; top:0; height:100vh; padding:18px; display:none;
    }
    @media (min-width:992px){ .sidebar{ display:flex; flex-direction:column; } }
    .content{ flex:1; }
    .topbar{
      position:sticky; top:0; z-index:1020;
      background: color-mix(in srgb, var(--app-bg) 85%, transparent);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--border);
    }
    .topbar-inner{ padding:14px 16px; }
    @media (min-width:992px){ .topbar-inner{ padding:14px 24px; } }

    .glass{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
    .glass-soft{ background:var(--card2); border:1px solid var(--border); border-radius:var(--radius); }

    .brand{ display:flex; align-items:center; gap:10px; padding:10px 10px 14px; }
    .brand-mark{
      width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
      background: color-mix(in srgb, var(--text) 7%, transparent);
      border:1px solid var(--border); color:var(--text);
    }
    .nav-link{ color: color-mix(in srgb, var(--text) 78%, transparent); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; }
    .nav-link:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); color:var(--text); }
    .nav-link.active{ background: color-mix(in srgb, var(--bs-primary) 16%, transparent); border:1px solid color-mix(in srgb, var(--bs-primary) 22%, transparent); color:var(--text); }
    .nav-section-title{ font-size:.75rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.08em; padding:14px 10px 8px; }
    .text-muted-3{ color:var(--muted-2)!important; }

    .btn{ border-radius:12px; }
    .form-control,.form-select,.input-group-text{ border-radius:12px; border:1px solid var(--border); }
    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }
    .badge-soft{ background: color-mix(in srgb, var(--text) 7%, transparent); border:1px solid var(--border); color:var(--text); border-radius:999px; padding:.35rem .6rem; font-size:.8rem; }

    .table thead th{
      color:var(--muted); font-weight:800; border-bottom:1px solid var(--border);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      white-space: nowrap;
    }
    .table td{ border-top:1px solid var(--border); vertical-align:middle; }
      .sidebar{overflow:hidden;}
    .sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-right:-6px;}
    .brand-mark{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb, var(--app-bg) 85%, var(--panel));border:1px solid color-mix(in srgb, var(--text) 16%, transparent);}
      .profile-icon-btn{
      border:0 !important;
      background:transparent !important;
      color: color-mix(in srgb, var(--text, #334155) 90%, transparent) !important;
      padding:.2rem .35rem;
      line-height:1;
    }
    .profile-icon-btn:hover,
    .profile-icon-btn:focus,
    .profile-icon-btn:active{
      border:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      color: color-mix(in srgb, var(--text, #334155) 90%, transparent) !important;
    }
    .profile-icon-btn::after{ display:none !important; }
    .profile-icon-btn i{ font-size:1.25rem; }
      .theme-icon-btn{
      border:0 !important;
      background:transparent !important;
      color: color-mix(in srgb, var(--text, #334155) 90%, transparent) !important;
      padding:.2rem .35rem;
      line-height:1;
    }
    .theme-icon-btn:hover,
    .theme-icon-btn:focus,
    .theme-icon-btn:active{
      border:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      color: color-mix(in srgb, var(--text, #334155) 90%, transparent) !important;
    }
    .theme-icon-btn i{ font-size:1.25rem; }