:root{
      --bg: #070b12;
      --bg2:#0b1220;
      --card:#0f1a2f;
      --card2:#0c1628;
      --text:#e8eefc;
      --muted:#9db0d0;
      --border: rgba(255,255,255,.08);
      --shadow: 0 18px 50px rgba(0,0,0,.35);
      --primary:#22c55e;
      --primary2:#0ea5e9;
      --danger:#ef4444;
      --warn:#f59e0b;
      --ok:#10b981;

      --radius: 18px;
      --radius2: 22px;
      --blur: 16px;

      --sidebarW: 290px;
      --topbarH: 64px;
      --gap: 16px;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    [data-theme="light"]{
      --bg:#f5f7fb;
      --bg2:#ffffff;
      --card:#ffffff;
      --card2:#ffffff;
      --text:#0b1220;
      --muted:#55627b;
      --border: rgba(13,27,54,.10);
      --shadow: 0 18px 50px rgba(13,27,54,.12);
      --primary:#16a34a;
      --primary2:#0284c7;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: var(--font);
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 15% 10%, rgba(34,197,94,.12), transparent 55%),
        radial-gradient(1000px 600px at 85% 25%, rgba(14,165,233,.14), transparent 55%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
      overflow:hidden;
    }

    /* -------- Scrollbars (brand) -------- */
    *{
      scrollbar-width: thin;
      scrollbar-color: rgba(34,197,94,.55) rgba(255,255,255,.08);
    }
    *::-webkit-scrollbar{height:10px;width:10px}
    *::-webkit-scrollbar-track{background: rgba(255,255,255,.08); border-radius: 999px}
    *::-webkit-scrollbar-thumb{background: rgba(34,197,94,.55); border-radius: 999px}
    *::-webkit-scrollbar-thumb:hover{background: rgba(34,197,94,.75)}

    /* -------- App layout -------- */
    .app{
      height:100%;
      display:grid;
      grid-template-columns: var(--sidebarW) 1fr;
      grid-template-rows: var(--topbarH) 1fr;
      grid-template-areas:
        "sidebar topbar"
        "sidebar main";
      gap: 0;
    }

    .topbar{
      grid-area: topbar;
      height: var(--topbarH);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
    }

    .brand{
      display:flex; align-items:center; gap:12px;
      min-width: 0;
    }
    .logo{
      width:38px;height:38px;border-radius: 14px;
      background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(14,165,233,.22));
      border:1px solid var(--border);
      box-shadow: var(--shadow);
      display:grid;place-items:center;
      flex:0 0 auto;
    }
    .logo svg{opacity:.95}
    .brand-title{
      display:flex; flex-direction:column; line-height:1.12;
      min-width: 0;
    }
    .brand-title b{
      font-size: 14px; letter-spacing:.2px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .brand-title span{
      font-size: 12px; color: var(--muted);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }

    .top-actions{display:flex; align-items:center; gap:10px}
    .pill{
      display:flex; align-items:center; gap:8px;
      padding: 10px 12px;
      border-radius: 999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      backdrop-filter: blur(var(--blur));
      cursor: default;
      user-select:none;
      max-width: 240px;
    }
    .pill .dot{
      width:10px;height:10px;border-radius:999px;
      background: var(--primary);
      box-shadow: 0 0 0 6px rgba(34,197,94,.18);
      flex:0 0 auto;
    }
    .pill .text{
      min-width:0;
      font-size: 12px;
      color: var(--muted);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }

    .btn{
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius: 14px;
      padding: 10px 12px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:10px;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      user-select:none;
    }
    .btn:hover{background: rgba(255,255,255,.07)}
    .btn:active{transform: scale(.98)}
    .btn.primary{
      background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(34,197,94,.06));
      border-color: rgba(34,197,94,.35);
    }
    .btn.danger{
      background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.06));
      border-color: rgba(239,68,68,.35);
    }

    /* Theme toggle (sun/moon with animation) */
    .theme-toggle{
      width: 46px; height: 42px;
      border-radius: 16px;
      position:relative;
      overflow:hidden;
    }
    .theme-toggle .icon{
      width: 20px; height: 20px;
      position:absolute; top:50%; left:50%;
      transform: translate(-50%,-50%);
      transition: transform .25s ease, opacity .25s ease;
      opacity: 1;
    }
    [data-theme="dark"] .theme-toggle .sun{transform: translate(-50%,-50%) rotate(-35deg) scale(.7); opacity:.0}
    [data-theme="dark"] .theme-toggle .moon{transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity:1}
    [data-theme="light"] .theme-toggle .sun{transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity:1}
    [data-theme="light"] .theme-toggle .moon{transform: translate(-50%,-50%) rotate(35deg) scale(.7); opacity:.0}

    /* -------- Sidebar -------- */
    .sidebar{
      grid-area: sidebar;
      height: 100%;
      border-right: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
      padding: 18px 14px;
      display:flex; flex-direction:column;
      gap: 14px;
      overflow:hidden;
    }

    .nav{
      display:flex; flex-direction:column;
      gap: 6px;
      overflow:auto;
      padding-right: 6px;
    }

    .nav a{
      text-decoration:none;
      color: var(--text);
      border-radius: 16px;
      padding: 12px 12px;
      display:flex;
      align-items:center;
      gap:12px;
      border: 1px solid transparent;
      transition: background .12s ease, border-color .12s ease, transform .12s ease;
    }
    .nav a:hover{
      background: rgba(255,255,255,.05);
      border-color: var(--border);
    }
    .nav a:active{transform: scale(.99)}
    .nav a.active{
      background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(14,165,233,.10));
      border-color: rgba(34,197,94,.28);
      box-shadow: 0 10px 25px rgba(0,0,0,.18);
    }
    .nav .ico{
      width: 36px; height: 36px;
      border-radius: 14px;
      display:grid; place-items:center;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      flex: 0 0 auto;
    }
    .nav .meta{min-width:0}
    .nav .meta b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .nav .meta span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* -------- Main -------- */
    .main{
      grid-area: main;
      height: calc(100vh - var(--topbarH));
      overflow:hidden;
    }
    .content{
      height:100%;
      padding: 18px;
      overflow:auto;
    }

    .grid{
      display:grid;
      gap: var(--gap);
    }

    .card{
      background: rgba(255,255,255,.04);
      border:1px solid var(--border);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
      overflow:hidden;
    }
    .card .hd{
      padding: 14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid var(--border);
      background: rgba(255,255,255,.03);
    }
    .card .hd b{font-size:14px}
    .card .hd span{font-size:12px;color:var(--muted)}
    .card .bd{padding: 16px}
    .muted{color:var(--muted)}
    .h1{font-size: 22px; margin:0 0 6px 0}
    .h2{font-size: 16px; margin:0 0 8px 0}
    .row{display:flex; gap: 10px; flex-wrap:wrap; align-items:center}

    /* -------- Inputs (brand, dark/light ok) -------- */
    .field{display:flex; flex-direction:column; gap:8px; min-width: 220px}
    .label{font-size:12px;color:var(--muted)}
    input, select{
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      color: var(--text);
      outline:none;
      transition: border-color .12s ease, background .12s ease;
      appearance:none;
    }
    input:focus, select:focus{
      border-color: rgba(34,197,94,.45);
      background: rgba(255,255,255,.06);
    }

    /* custom select arrow */
    .select-wrap{position:relative}
    .select-wrap:after{
      content:"";
      position:absolute;
      right: 12px; top: 50%;
      width: 10px; height: 10px;
      transform: translateY(-50%) rotate(45deg);
      border-right: 2px solid rgba(157,176,208,.9);
      border-bottom: 2px solid rgba(157,176,208,.9);
      pointer-events:none;
      opacity:.8;
    }
    select{padding-right: 38px}

    /* -------- Login view -------- */
    .auth{
      height:100vh;
      display:grid;
      place-items:center;
      padding: 18px;
    }
    .auth-card{
      width: min(520px, 100%);
      border-radius: 26px;
    }
    .auth-inner{
      padding: 18px;
      display:grid;
      gap: 14px;
    }
    .auth-top{
      display:flex; align-items:center; gap: 12px;
    }
    .auth-top .logo{width:44px;height:44px;border-radius: 18px}
    .auth-actions{display:flex; gap:10px; justify-content:flex-end}
    .error{
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(239,68,68,.35);
      background: rgba(239,68,68,.10);
      color: #ffd7d7;
      font-size: 13px;
      display:none;
    }
    .error.show{display:block}

    /* -------- Mobile burger + drawer -------- */
    .burger{
      display:none;
      width: 46px; height: 42px;
      border-radius: 16px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      cursor:pointer;
      align-items:center;
      justify-content:center;
    }
    .burger span, .burger span:before, .burger span:after{
      content:"";
      display:block;
      width: 18px; height: 2px;
      background: var(--text);
      border-radius: 99px;
      position: relative;
      transition: transform .2s ease, top .2s ease, opacity .2s ease;
      opacity:.9;
    }
    .burger span:before{position:absolute; top:-6px}
    .burger span:after{position:absolute; top:6px}

    .drawer-backdrop{
      display:none;
      position: fixed; inset:0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 40;
    }
    .drawer{
      display:none;
      position: fixed;
      top:0; left:0;
      height:100vh;
      width: min(92vw, 330px);
      z-index: 50;
      box-shadow: 0 22px 70px rgba(0,0,0,.55);
      transform: translateX(-105%);
      transition: transform .22s ease;
    }
    .drawer.open{transform: translateX(0)}
    .drawer-backdrop.open{display:block}
    .drawer-wrap{height:100%}

    /* -------- Loading overlay -------- */
    .loading{
      position: fixed; inset:0;
      display:none;
      z-index: 80;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      align-items:center;
      justify-content:center;
      padding: 18px;
    }
    .loading.show{display:flex}
    .loader{
      width: min(520px, 92vw);
      border-radius: 22px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.05);
      box-shadow: var(--shadow);
      padding: 16px;
      display:flex;
      gap: 14px;
      align-items:center;
    }
    .spinner{
      width: 38px; height: 38px;
      border-radius: 999px;
      border: 3px solid rgba(255,255,255,.18);
      border-top-color: rgba(34,197,94,.85);
      animation: spin 1s linear infinite;
      flex:0 0 auto;
    }
    @keyframes spin{to{transform: rotate(360deg)}}
    .loader b{display:block; font-size: 14px}
    .loader span{display:block; font-size: 12px; color: var(--muted)}

    /* -------- Toast -------- */
    .toasts{
      position: fixed;
      right: 14px;
      bottom: 14px;
      z-index: 90;
      display:flex;
      flex-direction:column;
      gap: 10px;
      max-width: min(420px, 92vw);
      pointer-events:none;
    }
    .toast{
      pointer-events:auto;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
      box-shadow: var(--shadow);
      padding: 12px 12px;
      display:flex;
      gap: 10px;
      align-items:flex-start;
      animation: toastIn .18s ease;
    }
    @keyframes toastIn{from{transform: translateY(6px); opacity:0}to{transform: translateY(0); opacity:1}}
    .toast .tag{
      width:10px;height:10px;border-radius:999px;
      margin-top: 6px;
      flex:0 0 auto;
      background: var(--primary);
      box-shadow: 0 0 0 6px rgba(34,197,94,.16);
    }
    .toast.err .tag{background: var(--danger); box-shadow:0 0 0 6px rgba(239,68,68,.14)}
    .toast .t{
      min-width:0;
    }
    .toast .t b{display:block; font-size: 13px}
    .toast .t span{display:block; font-size: 12px; color: var(--muted)}
    .toast button{
      margin-left:auto;
      border:none;
      background: transparent;
      color: var(--muted);
      cursor:pointer;
      font-size: 16px;
      line-height: 1;
    }

    /* -------- Responsive -------- */
    @media (max-width: 980px){
      .app{
        grid-template-columns: 1fr;
        grid-template-areas:
          "topbar"
          "main";
      }
      .sidebar{display:none}
      .burger{display:flex}
      .topbar{padding: 12px 14px}
      .content{padding: 14px}
      .pill{display:none}
    }
/* =========================
   FIX: Select / Dropdowns
   (paste at the very end of assets/style.css)
========================= */

/* Make selects look like inputs and be readable */
select.input,
.field select.input,
select.input:focus {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  cursor: pointer;
  padding-right: 42px; /* space for arrow */
}

/* Custom arrow */
select.input{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
body[data-theme="light"] select.input{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.65) 50%),
    linear-gradient(135deg, rgba(0,0,0,.65) 50%, transparent 50%);
}

/* Better focus */
select.input:focus{
  outline: none !important;
  border-color: rgba(34,197,94,.55) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.15) !important;
}

/* Options readable (browser support varies, but helps) */
select.input option{
  background: #0b1020;
  color: #e5e7eb;
}
body[data-theme="light"] select.input option{
  background: #ffffff;
  color: #111827;
}

/* If your global CSS broke summary/details dropdowns too */
details.u-dd { border:1px solid rgba(255,255,255,.10); border-radius:14px; overflow:hidden; }
body[data-theme="light"] details.u-dd { border-color: rgba(0,0,0,.10); }
details.u-dd > summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: rgba(255,255,255,.02);
}
body[data-theme="light"] details.u-dd > summary{ background: rgba(0,0,0,.02); }
details.u-dd > summary::-webkit-details-marker{ display:none; }
details.u-dd > summary::after{
  content:"▾";
  opacity:.75;
  transform: translateY(-1px);
}
details.u-dd[open] > summary::after{ content:"▴"; }
details.u-dd .u-dd-body{ padding: 10px 12px; border-top:1px solid rgba(255,255,255,.08); }
body[data-theme="light"] details.u-dd .u-dd-body{ border-top-color: rgba(0,0,0,.08); }
.auth-head .row {
  justify-content: flex-end;
}
.nav-ico{
  width:25px;
  height:25px;
  display:inline-block;
  margin-right:10px;
  opacity:.9;
  filter: invert(1);
}