:root{
    --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  
    --bg: #0b1220;
    --bg2:#0f1b33;
    --panel:#0f1b33cc;
    --card:#121f3be6;
    --border:#223459;
    --text:#eaf1ff;
    --muted:#9fb0d0;
    --accent:#6ee7ff;
    --accent2:#a78bfa;
    --good:#35d07f;
    --warn:#fbbf24;
  
    --shadow: 0 20px 60px rgba(0,0,0,.35);
    --radius: 18px;
  }
  
  [data-theme="light"]{
    --bg: #f6f8ff;
    --bg2:#eef2ff;
    --panel:#ffffffcc;
    --card:#ffffff;
    --border:#e5e7eb;
    --text:#0b1220;
    --muted:#5b647a;
    --accent:#2563eb;
    --accent2:#7c3aed;
    --shadow: 0 18px 50px rgba(10,20,40,.12);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:var(--font);
    color:var(--text);
    background:
      radial-gradient(1200px 800px at 20% 10%, rgba(110,231,255,.18), transparent 60%),
      radial-gradient(900px 700px at 90% 30%, rgba(167,139,250,.18), transparent 55%),
      linear-gradient(180deg, var(--bg), var(--bg2));
  }
  
  a{color:inherit; text-decoration:none}
  .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
  

  .sidebar{
    position:fixed;
    top:18px;
    bottom:18px;
    left:18px;
    width:290px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  
  
  .sidebar.collapsed{ width: 86px; }
  
  .brand{ display:flex; align-items:center; gap: 12px; padding: 8px 10px; }
  .brand-badge{
    width:42px; height:42px; border-radius:14px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(110,231,255,.22), rgba(167,139,250,.18));
    border: 1px solid rgba(255,255,255,.08);
  }
  .brand-title{font-weight:700; letter-spacing:.2px}
  .brand-sub{font-size:12px; color:var(--muted)}
  .sidebar.collapsed .brand-text{display:none}
  
  .sidebar-toggle{
    border:1px solid var(--border);
    background:transparent;
    color:var(--text);
    border-radius: 14px;
    padding: 10px 12px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .sidebar-toggle:hover{background: rgba(255,255,255,.06)}
  
  .nav{display:flex; flex-direction:column; gap: 6px; padding-top: 4px}
  .nav-item{
    display:flex; align-items:center; gap: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    color: var(--muted);
  }
  .nav-item i{width:22px; text-align:center}
  .nav-item:hover{background: rgba(255,255,255,.06); color: var(--text)}
  .nav-item.active{
    color: var(--text);
    border-color: rgba(110,231,255,.25);
    background: linear-gradient(135deg, rgba(110,231,255,.14), rgba(167,139,250,.10));
  }
  
  .nav-item-button{
    width:100%;
    background:transparent;
    cursor:pointer;
    justify-content:space-between;
  }
  .nav-item-button span{flex:1; text-align:left}
  .nav-item-button .caret{opacity:.7; transition: transform .2s ease}
  .nav-group.open .caret{transform: rotate(180deg)}
  
  .nav-sub{
    display:none;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px dashed rgba(255,255,255,.12);
  }
  .nav-group.open .nav-sub{display:block}
  .nav-sub a{
    display:flex; gap:10px; align-items:center;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--muted);
    margin: 4px 0;
  }
  .nav-sub a:hover{background: rgba(255,255,255,.06); color: var(--text)}
  .nav-sub-skeleton{color:var(--muted); font-size: 12px; padding: 10px 12px}
  
  .sidebar-footer{ margin-top:auto;}
  
  .mode-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    color:var(--text);
    border-radius:14px;
    padding:10px 12px;
    cursor:pointer;
  }

  .mode-toggle:hover{background: rgba(255,255,255,.06)}
  .mode-toggle span{color:var(--muted)}
  .pill{
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    color: var(--text) !important;
    background: rgba(255,255,255,.06);
  }
  
  
  .app{
    margin-left:326px;
    padding:18px 18px 18px 0;
    min-height:100vh;
  }

  body.sidebar-collapsed .app{margin-left: 122px;}
  
  
  .topbar{
    margin-bottom:14px;
    padding:14px 18px;
    border-radius:18px;
    background:var(--panel);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
  }

  .page-title{font-weight:700; font-size: 18px}
  .page-hint{color:var(--muted); font-size: 12px}
  .chip{
    display:flex; gap:8px; align-items:center;
    border:1px solid rgba(255,255,255,.14);
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.06);
  }
  
  .content{margin-right: 18px;}
  
  .grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
  }
  .grid-2{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
  }
  
  .card{
    background: var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .card.subtle{box-shadow:none}
  .card-header{
    padding: 14px 16px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .card-title{font-weight:700}
  .card-sub{color:var(--muted); font-size: 12px; margin-top: 2px}
  .card-body{padding: 14px 16px}
  
  .kpi{ display:flex; gap: 14px; align-items:center; padding: 16px; }
  .kpi-icon{
    width:46px; height:46px; border-radius: 16px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.14));
    border: 1px solid rgba(255,255,255,.08);
  }
  .kpi-title{color:var(--muted); font-size: 12px}
  .kpi-value{font-size: 26px; font-weight:800; margin-top: 4px}
  .kpi-sub{color:var(--muted); font-size: 12px; margin-top: 2px}
  
  .panel{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    overflow:hidden;
  }
  .panel-head{
    padding: 14px 16px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
    gap: 12px;
  }
  .panel-title{font-weight:800}
  .panel-sub{color:var(--muted); font-size: 12px; margin-top: 2px}
  .panel-actions{display:flex; align-items:center; gap: 10px}
  
  .search{
    display:flex; align-items:center; gap: 10px;
    padding: 10px 12px;
    border:1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    min-width: 340px;
  }
  .search input{
    width:100%;
    border:none; outline:none;
    background:transparent;
    color: var(--text);
    font-family: var(--font);
  }
  .search i{color: var(--muted)}
  
  .table-wrap{overflow:auto}
  .table{width:100%; border-collapse:collapse}
  .table th,.table td{
    padding: 12px 14px;
    text-align:left;
    border-bottom: 1px solid rgba(255,255,255,.08);
    vertical-align: middle;
  }
  .table th{color:var(--muted); font-weight:600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em}
  .table tr:hover td{background: rgba(255,255,255,.04)}
  
  .badge{
    display:inline-flex; align-items:center; gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    font-size: 12px;
  }
  .badge .dot{width:8px; height:8px; border-radius:999px; background: var(--good)}
  .badge.paused .dot{background: var(--warn)}
  
  .btn{
    border:1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--text);
    border-radius: 14px;
    padding: 10px 12px;
    cursor:pointer;
    display:inline-flex; align-items:center; gap: 10px;
    font-weight: 600;
  }
  .btn:hover{background: rgba(255,255,255,.10)}
  .btn-primary{
    border-color: rgba(110,231,255,.28);
    background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.14));
  }
  .icon-btn{
    width:44px; height:44px;
    border-radius: 14px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--text);
    cursor:pointer;
    display:grid; place-items:center;
  }
  .icon-btn:hover{background: rgba(255,255,255,.10)}
  .icon-btn.ghost{background:transparent}
  
  .list{padding: 12px 16px; display:flex; flex-direction:column; gap: 10px}
  .list-item{
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }
  .list-item:hover{background: rgba(255,255,255,.07)}
  .list-item .left{display:flex; gap: 12px; align-items:center}
  .list-item .left i{color: var(--accent)}
  .list-item .right{color:var(--muted); font-size: 12px}
  
  .empty{
    display:flex; gap: 12px; align-items:flex-start;
    padding: 18px 16px;
    color: var(--muted);
  }
  .empty i{font-size: 18px; color: var(--warn)}
  .empty-title{color: var(--text); font-weight:700}
  .empty-sub{font-size: 12px; margin-top: 2px}
  
  .target-meta{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
  .target-meta .title{font-weight:800}
  .target-meta .sub{color:var(--muted); font-size: 12px; margin-top: 2px}
  
  .modal{position:fixed; inset:0; display:none; z-index: 50;}
  .modal.open{display:block;}
  .modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px);}
  .modal-card{
    position:relative;
    width:min(720px, calc(100% - 28px));
    margin: 70px auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .modal-head{
    padding: 14px 16px;
    display:flex; justify-content:space-between; align-items:center;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .modal-title{font-weight:800}
  .modal-sub{color:var(--muted); font-size:12px; margin-top:2px}
  .modal-body{padding: 14px 16px}
  .modal-actions{display:flex; justify-content:flex-end; gap: 10px; padding-top: 12px}
  
  .form-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .form-grid .full{grid-column: 1 / -1;}
  label span{display:block; color:var(--muted); font-size:12px; margin-bottom:6px}
  input, select, textarea{
    width:100%;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    border-radius: 14px;
    padding: 10px 12px;
    font-family: var(--font);
    outline:none;
  }
  textarea{resize: vertical}
  
  .auth{ min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; }
  .auth-bg{
    position:absolute; inset:-20%;
    background:
      radial-gradient(900px 600px at 20% 20%, rgba(110,231,255,.25), transparent 60%),
      radial-gradient(900px 700px at 80% 30%, rgba(167,139,250,.22), transparent 55%),
      radial-gradient(800px 700px at 60% 90%, rgba(53,208,127,.10), transparent 55%);
    filter: blur(10px);
    z-index: 0;
  }
  .auth-card{
    position:relative;
    z-index: 1;
    width:min(440px, calc(100% - 28px));
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    backdrop-filter: blur(16px);
  }
  .auth-brand{display:flex; gap: 12px; align-items:center; margin-bottom: 12px;}
  .auth-logo{
    width:46px; height:46px; border-radius: 16px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.14));
    border: 1px solid rgba(255,255,255,.08);
  }
  
.auth-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:16px;
  display:block;
}

  .auth-title{font-weight:900; font-size: 18px}
  .auth-sub{color:var(--muted); font-size: 12px}
  .auth-form{display:flex; flex-direction:column; gap: 12px}
  .alert{
    border: 1px solid rgba(251,191,36,.35);
    background: rgba(251,191,36,.12);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 14px;
    margin: 10px 0 6px;
  }
  .auth-footnote{color:var(--muted); font-size: 12px; margin-top: 8px}
  
  @media (max-width: 1100px){
    .grid{grid-template-columns: repeat(2, minmax(0,1fr))}
    .grid-2{grid-template-columns: 1fr}
    .search{min-width: 240px}
  }
  @media (max-width: 760px){
    .sidebar{position:fixed; inset: 10px auto 10px 10px; width: 260px}
    .search{min-width: 200px}
    .form-grid{grid-template-columns: 1fr}
  }

  /* =========================================================
   Form controls fix (Dark + Light mode safe)
   ========================================================= */

input,
textarea,
select{
  background-color: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
}

/* Focus state */
input:focus,
textarea:focus,
select:focus{
  border-color: rgba(110,231,255,.6);
  box-shadow: 0 0 0 2px rgba(110,231,255,.15);
}

/* =========================
   Select element (critical)
   ========================= */

select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
  padding-right: 42px;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* Dropdown items */
select option{
  background-color: var(--bg2);
  color: var(--text);
}

/* Disabled */
input:disabled,
textarea:disabled,
select:disabled{
  opacity: .5;
  cursor: not-allowed;
}

select{
  appearance:none;
  padding-right:42px;
}
select option{
  background:var(--bg2);
  color:var(--text);
}
/* =========================================================
   Sidebar collapsed – icons only (SAFE PATCH)
   ========================================================= */

   body.sidebar-collapsed .sidebar{
    width: 86px;
  }
  
  /* Hide text elements */
  body.sidebar-collapsed .brand-text,
  body.sidebar-collapsed .nav-item span,
  body.sidebar-collapsed .mode-toggle span,
  body.sidebar-collapsed .mode-toggle .pill{
    display: none !important;
  }
  
  /* Center elements */
  body.sidebar-collapsed .brand{
    justify-content: center;
  }
  
  body.sidebar-collapsed .nav-item{
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  
  body.sidebar-collapsed .nav-item i{
    margin: 0;
  }
  
  /* Content offset */
  body.sidebar-collapsed .app{
    margin-left: 122px;
  }