*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0a0d14;
      --bg2: #0f1320;
      --card: rgba(255,255,255,0.04);
      --card-hover: rgba(255,255,255,0.07);
      --border: rgba(255,255,255,0.08);
      --text: #e8eaf0;
      --text-muted: #6b7280;
      --text-dim: #9ca3af;
      --accent: #63b3ed;
      --green: #10b981;
      --red: #ef4444;
      --yellow: #f59e0b;
      --grad2: linear-gradient(135deg, #63b3ed 0%, #7c3aed 100%);
      --grad-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
      --grad-red: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      --grad-yellow: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      --shadow: 0 8px 32px rgba(0,0,0,0.5);
      --radius: 14px;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    body::before {
      content: '';
      position: fixed; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% -10%, rgba(99,179,237,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 110%, rgba(124,58,237,0.06) 0%, transparent 60%);
      pointer-events: none; z-index: 0;
    }

    /* ============ LOGIN ============ */
    #login-screen {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      z-index: 1000; padding: 20px;
    }
    .login-box {
      background: rgba(15,19,32,0.92);
      backdrop-filter: blur(24px);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 48px 40px;
      width: 100%; max-width: 420px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(99,179,237,0.1);
      animation: loginAppear .5s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes loginAppear {
      from { opacity:0; transform:scale(.85) translateY(30px); }
      to   { opacity:1; transform:scale(1) translateY(0); }
    }
    @keyframes shake {
      0%,100% { transform:translateX(0); }
      20%,60% { transform:translateX(-8px); }
      40%,80% { transform:translateX(8px); }
    }
    .login-logo { text-align:center; margin-bottom:32px; }
    .login-logo .icon {
      width:72px; height:72px;
      background: var(--grad2);
      border-radius:20px; display:flex; align-items:center; justify-content:center;
      font-size:32px; margin:0 auto 16px;
      box-shadow:0 8px 32px rgba(99,179,237,.3);
    }
    .login-logo h1 {
      font-size:1.6rem; font-weight:800;
      background:var(--grad2);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .login-logo p { color:var(--text-muted); font-size:.85rem; margin-top:4px; }

    /* ============ FORMS ============ */
    .form-group { margin-bottom:18px; }
    .form-group label {
      display:block; font-size:.8rem; font-weight:600;
      color:var(--text-dim); text-transform:uppercase;
      letter-spacing:.08em; margin-bottom:8px;
    }
    .form-group input, .form-group select, .form-group textarea {
      width:100%; background:rgba(255,255,255,.05);
      border:1px solid var(--border); border-radius:10px;
      padding:12px 16px; color:var(--text);
      font-size:.95rem; font-family:inherit; outline:none;
      transition:border-color .2s, box-shadow .2s;
    }
    .form-group input:focus, .form-group select:focus {
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(99,179,237,.15);
    }
    .form-group input::placeholder { color:var(--text-muted); }

    /* ============ BUTTONS ============ */
    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 20px; border-radius:10px; border:none;
      font-family:inherit; font-size:.9rem; font-weight:600;
      cursor:pointer; transition:all .2s; text-decoration:none;
    }
    .btn:hover  { transform:translateY(-1px); filter:brightness(1.1); }
    .btn:active { transform:translateY(0); }
    .btn-primary {
      background:var(--grad2); color:#fff; width:100%;
      padding:14px; font-size:1rem;
      box-shadow:0 4px 20px rgba(99,179,237,.25);
    }
    .btn-green  { background:var(--grad-green); color:#fff; }
    .btn-red    { background:var(--grad-red); color:#fff; }
    .btn-yellow { background:var(--grad-yellow); color:#fff; }
    .btn-ghost  { background:var(--card); border:1px solid var(--border); color:var(--text-dim); }
    .btn-ghost:hover { background:var(--card-hover); color:var(--text); }
    .btn-sm   { padding:6px 12px; font-size:.8rem; border-radius:7px; }
    .btn-icon { padding:8px; border-radius:8px; width:34px; height:34px; }

    .login-error {
      background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
      border-radius:8px; padding:10px 14px; color:var(--red);
      font-size:.85rem; margin-bottom:16px; display:none;
    }

    /* ============ APP ============ */
    #app { display:none; min-height:100vh; position:relative; z-index:1; }

    /* ============ SIDEBAR ============ */
    .sidebar {
      position:fixed; left:0; top:0; bottom:0; width:260px;
      background:rgba(15,19,32,.92); backdrop-filter:blur(20px);
      border-right:1px solid var(--border);
      display:flex; flex-direction:column; z-index:100; transition:transform .3s;
    }
    .sidebar-header { padding:24px 20px; border-bottom:1px solid var(--border); }
    .sidebar-brand { display:flex; align-items:center; gap:12px; }
    .brand-icon {
      width:42px; height:42px; background:var(--grad2); border-radius:12px;
      display:flex; align-items:center; justify-content:center; font-size:20px;
      box-shadow:0 4px 16px rgba(99,179,237,.25); flex-shrink:0;
    }
    .brand-name {
      font-size:1.1rem; font-weight:800;
      background:var(--grad2);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .brand-sub { font-size:.7rem; color:var(--text-muted); }
    .sidebar-nav { flex:1; padding:16px 12px; overflow-y:auto; }
    .nav-label {
      font-size:.65rem; text-transform:uppercase; letter-spacing:.1em;
      color:var(--text-muted); padding:8px 8px 4px; font-weight:600;
    }
    .nav-item {
      display:flex; align-items:center; gap:10px;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      color:var(--text-dim); font-size:.875rem; font-weight:500;
      transition:all .2s; margin-bottom:2px;
      border:none; background:none; width:100%; text-align:left;
    }
    .nav-item:hover { background:var(--card-hover); color:var(--text); }
    .nav-item.active { background:rgba(99,179,237,.12); color:var(--accent); font-weight:600; }
    .nav-item .ni { font-size:1rem; width:20px; text-align:center; }
    .sidebar-footer { padding:16px 12px; border-top:1px solid var(--border); }
    .user-info {
      display:flex; align-items:center; gap:10px;
      padding:10px 12px; background:var(--card);
      border-radius:10px; border:1px solid var(--border); margin-bottom:10px;
    }
    .user-avatar {
      width:34px; height:34px; background:var(--grad2);
      border-radius:8px; display:flex; align-items:center;
      justify-content:center; font-size:16px; flex-shrink:0;
    }
    .user-name { font-size:.85rem; font-weight:600; }
    .user-role { font-size:.7rem; color:var(--text-muted); }

    /* ============ MAIN ============ */
    .main { margin-left:260px; min-height:100vh; padding:32px; }
    .topbar {
      display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;
    }
    .page-header h2 { font-size:1.6rem; font-weight:800; }
    .page-header p  { color:var(--text-muted); font-size:.85rem; margin-top:2px; }
    .time-badge {
      display:flex; align-items:center; gap:8px;
      background:var(--card); border:1px solid var(--border);
      border-radius:10px; padding:8px 14px;
      font-size:.82rem; color:var(--text-dim);
    }
    .time-badge span { color:var(--accent); font-weight:600; }

    /* ============ SECTIONS ============ */
    .section { display:none; animation:fadeIn .3s ease; }
    .section.active { display:block; }
    @keyframes fadeIn {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ============ STATS ============ */
    .stats-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
      gap:16px; margin-bottom:28px;
    }
    .stat-card {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius); padding:22px;
      position:relative; overflow:hidden; transition:all .3s;
    }
    .stat-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:var(--sc-color, var(--grad2));
    }
    .stat-card:hover {
      background:var(--card-hover);
      transform:translateY(-2px); box-shadow:var(--shadow);
    }
    .stat-icon  { font-size:1.6rem; margin-bottom:12px; }
    .stat-value { font-size:2rem; font-weight:800; line-height:1; margin-bottom:6px; }
    .stat-label { font-size:.8rem; color:var(--text-muted); font-weight:500; }

    /* ============ CARDS ============ */
    .card {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius); padding:24px; margin-bottom:20px;
    }
    .card-header {
      display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;
    }
    .card-title { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:8px; }

    /* ============ TABLE ============ */
    .table-wrapper { overflow-x:auto; }
    table { width:100%; border-collapse:collapse; font-size:.875rem; }
    th {
      text-align:left; padding:10px 14px; font-size:.72rem;
      text-transform:uppercase; letter-spacing:.08em;
      color:var(--text-muted); border-bottom:1px solid var(--border); font-weight:600;
    }
    td { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
    tr:last-child td { border-bottom:none; }
    tr:hover td { background:rgba(255,255,255,.02); }

    /* ============ BADGES ============ */
    .badge {
      display:inline-flex; align-items:center; gap:4px;
      padding:3px 10px; border-radius:20px; font-size:.73rem; font-weight:600;
    }
    .badge-green  { background:rgba(16,185,129,.15); color:var(--green); border:1px solid rgba(16,185,129,.2); }
    .badge-red    { background:rgba(239,68,68,.15);  color:var(--red);   border:1px solid rgba(239,68,68,.2); }
    .badge-yellow { background:rgba(245,158,11,.15); color:var(--yellow);border:1px solid rgba(245,158,11,.2); }
    .badge-blue   { background:rgba(99,179,237,.15); color:var(--accent);border:1px solid rgba(99,179,237,.2); }

    /* ============ TOOLBAR ============ */
    .toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
    .search-input {
      background:rgba(255,255,255,.05); border:1px solid var(--border);
      border-radius:9px; padding:9px 14px; color:var(--text);
      font-size:.875rem; font-family:inherit; outline:none; flex:1; min-width:200px;
      transition:border-color .2s;
    }
    .search-input:focus { border-color:var(--accent); }
    .search-input::placeholder { color:var(--text-muted); }
    .filter-select {
      background:rgba(255,255,255,.05); border:1px solid var(--border);
      border-radius:9px; padding:9px 14px; color:var(--text);
      font-size:.875rem; font-family:inherit; outline:none; cursor:pointer;
    }
    .filter-select option { background:#1a1f30; }

    /* ============ MODAL ============ */
    .modal-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
      display:flex; align-items:center; justify-content:center; z-index:500;
      padding:20px; opacity:0; pointer-events:none; transition:opacity .2s;
    }
    .modal-overlay.open { opacity:1; pointer-events:all; }
    .modal {
      background:#0f1320; border:1px solid var(--border); border-radius:20px;
      padding:32px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
      transform:scale(.9) translateY(20px); transition:transform .2s;
      box-shadow:0 24px 80px rgba(0,0,0,.8);
    }
    .modal-overlay.open .modal { transform:scale(1) translateY(0); }
    .modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
    .modal-title  { font-size:1.15rem; font-weight:700; }
    .modal-close {
      background:var(--card); border:1px solid var(--border); border-radius:8px;
      color:var(--text-muted); cursor:pointer; font-size:1.1rem;
      width:32px; height:32px; display:flex; align-items:center; justify-content:center;
      transition:all .2s;
    }
    .modal-close:hover { background:var(--card-hover); color:var(--text); }
    .modal-footer { display:flex; gap:10px; margin-top:20px; }

    /* ============ TOGGLE ============ */
    .toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
    .toggle { position:relative; width:44px; height:24px; }
    .toggle input { opacity:0; width:0; height:0; }
    .toggle-slider {
      position:absolute; inset:0; background:rgba(255,255,255,.1);
      border-radius:12px; cursor:pointer; transition:.3s;
    }
    .toggle-slider::before {
      content:''; position:absolute; width:18px; height:18px;
      left:3px; top:3px; background:#fff; border-radius:50%; transition:.3s;
    }
    input:checked + .toggle-slider { background:var(--green); }
    input:checked + .toggle-slider::before { transform:translateX(20px); }

    /* ============ TOAST ============ */
    #toast-container {
      position:fixed; bottom:24px; right:24px; z-index:9999;
      display:flex; flex-direction:column; gap:10px;
    }
    .toast {
      display:flex; align-items:center; gap:10px;
      background:#1a1f30; border:1px solid var(--border); border-radius:10px;
      padding:12px 16px; font-size:.875rem; font-weight:500;
      box-shadow:0 8px 32px rgba(0,0,0,.5);
      animation:toastIn .3s ease; max-width:340px;
    }
    @keyframes toastIn {
      from { opacity:0; transform:translateX(100%); }
      to   { opacity:1; transform:translateX(0); }
    }
    .toast.success { border-left:3px solid var(--green); }
    .toast.error   { border-left:3px solid var(--red); }
    .toast.info    { border-left:3px solid var(--accent); }

    /* ============ QUICK ACTIONS ============ */
    .quick-actions {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; margin-bottom:24px;
    }
    .quick-btn {
      background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
      padding:18px; cursor:pointer; transition:all .2s; text-align:center; color:var(--text);
      font-family:inherit;
    }
    .quick-btn:hover { background:var(--card-hover); transform:translateY(-2px); box-shadow:var(--shadow); }
    .quick-btn .qi { font-size:1.8rem; margin-bottom:8px; display:block; }
    .quick-btn .ql { font-size:.8rem; font-weight:600; color:var(--text-dim); }

    /* ============ MISC ============ */
    .loading { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--text-muted); gap:10px; }
    .spinner { width:20px; height:20px; border:2px solid rgba(99,179,237,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .empty-state { text-align:center; padding:48px; color:var(--text-muted); }
    .empty-state .ei { font-size:3rem; margin-bottom:12px; display:block; }
    .copy-field {
      display:flex; align-items:center; gap:6px;
      background:rgba(255,255,255,.05); border:1px solid var(--border);
      border-radius:8px; padding:6px 10px;
      font-size:.85rem; font-family:'Courier New',monospace;
    }
    .copy-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:.85rem; padding:2px 4px; border-radius:4px; transition:all .2s; margin-left:auto; }
    .copy-btn:hover { background:var(--card-hover); color:var(--text); }
    .alert { border-radius:10px; padding:14px 16px; font-size:.875rem; margin-bottom:16px; display:flex; gap:10px; align-items:flex-start; }
    .alert-warning { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); color:#fbbf24; }
    .alert-info    { background:rgba(99,179,237,.1);  border:1px solid rgba(99,179,237,.2);  color:var(--accent); }
    .action-row { display:flex; gap:6px; align-items:center; }
    .mobile-toggle { display:none; position:fixed; top:16px; left:16px; z-index:200; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px; cursor:pointer; font-size:1.1rem; color:var(--text); }

    @media (max-width:768px) {
      .sidebar { transform:translateX(-100%); }
      .sidebar.open { transform:translateX(0); }
      .main { margin-left:0; padding:20px; padding-top:70px; }
      .mobile-toggle { display:flex; }
      .stats-grid { grid-template-columns:repeat(2,1fr); }
      .quick-actions { grid-template-columns:repeat(2,1fr); }
    }