/* ══════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════ */
:root {
  --ink:        #0C0F1A;
  --ink2:       #1A1F2E;
  --ink3:       #252B3B;
  --surface:    #F7F8FC;
  --surface2:   #FFFFFF;
  --surface3:   #EEF0F7;
  --border:     #E0E4EF;
  --border2:    #C8CCDB;
  --muted:      #6B7394;
  --muted2:     #9AA0B8;
  --text:       #0C0F1A;
  --text2:      #3D4460;
  --indigo:     #3B4FE8;
  --indigo-lt:  #EEF0FD;
  --indigo-dk:  #2A3BC0;
  --indigo-glow:rgba(59,79,232,.14);
  --green:      #0A7C52;
  --green-lt:   #E6F4EE;
  --amber:      #92600A;
  --amber-lt:   #FEF3E2;
  --red:        #B91C1C;
  --red-lt:     #FEE2E2;
  --slate:      #475569;
  --slate-lt:   #F1F5F9;
  --r:   7px;
  --rl:  12px;
  --rxl: 18px;
  --sh:  0 1px 3px rgba(12,15,26,.06),0 1px 2px rgba(12,15,26,.04);
  --sh2: 0 4px 16px rgba(12,15,26,.09),0 2px 6px rgba(12,15,26,.05);
  --sh3: 0 12px 40px rgba(12,15,26,.14),0 4px 12px rgba(12,15,26,.08);
  --sidebar-w: 252px;
  --topbar-h:  58px;
  --f-display: 'Sora', sans-serif;
  --f-body:    'IBM Plex Sans', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;
}
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box; }
html { font-size:14px; overflow-x:hidden; }
body { font-family:var(--f-body);background:var(--surface);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden; }
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2);border-radius:4px; }

/* ── LOGIN ─────────────────────────────────── */
#screen-login { min-height:100vh;background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
#screen-login::before { content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(59,79,232,.18) 0%,transparent 70%);top:-200px;right:-200px;pointer-events:none; }
#screen-login::after  { content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(59,79,232,.10) 0%,transparent 70%);bottom:-100px;left:-100px;pointer-events:none; }
.login-card { width:420px;max-width:94vw;background:var(--ink2);border:1px solid rgba(255,255,255,.08);border-radius:var(--rxl);padding:44px 40px 40px;box-shadow:0 32px 80px rgba(0,0,0,.5);position:relative;z-index:1; }
.login-brand { display:flex;align-items:center;gap:12px;margin-bottom:36px; }
.login-brand-mark { width:42px;height:42px;background:var(--indigo);border-radius:11px;display:flex;align-items:center;justify-content:center; }
.login-brand-mark svg { width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.login-brand-name { font-family:var(--f-display);font-size:18px;font-weight:700;color:#fff;letter-spacing:-.3px; }
.login-brand-tag  { font-size:11px;color:rgba(255,255,255,.3);font-family:var(--f-mono); }
.login-title { font-family:var(--f-display);font-size:22px;font-weight:700;color:#fff;margin-bottom:6px;letter-spacing:-.4px; }
.login-sub   { font-size:13px;color:rgba(255,255,255,.4);margin-bottom:28px; }
.login-field { margin-bottom:16px; }
.login-label { font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-mono);display:block;margin-bottom:7px; }
.login-input { width:100%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);border-radius:var(--r);padding:11px 14px;font-family:var(--f-body);font-size:13px;color:#fff;outline:none;transition:border-color .15s,background .15s; }
.login-input:focus { border-color:var(--indigo);background:rgba(59,79,232,.08); }
.login-input::placeholder { color:rgba(255,255,255,.2); }
.login-btn { width:100%;padding:13px;background:var(--indigo);border:0;border-radius:var(--r);font-family:var(--f-display);font-size:14px;font-weight:700;color:#fff;cursor:pointer;margin-top:8px;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px; }
.login-btn:hover { background:var(--indigo-dk);box-shadow:0 6px 20px rgba(59,79,232,.4); }
.login-btn:disabled { opacity:.5;cursor:not-allowed; }
.login-error { background:var(--red-lt);border:1px solid #FCA5A5;border-radius:var(--r);padding:10px 14px;font-size:12px;color:var(--red);margin-bottom:16px;display:none; }
.login-error.show { display:block; }
.login-footer { margin-top:24px;text-align:center;font-size:11px;color:rgba(255,255,255,.2);font-family:var(--f-mono); }

/* ── SETUP ─────────────────────────────────── */
#screen-setup { min-height:100vh;background:var(--surface);display:none;align-items:center;justify-content:center;padding:40px; }
.setup-card { width:560px;max-width:95vw;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rxl);padding:40px;box-shadow:var(--sh3); }
.setup-title { font-family:var(--f-display);font-size:20px;font-weight:700;color:var(--text);margin-bottom:6px; }
.setup-sub   { font-size:13px;color:var(--muted);margin-bottom:28px; }
.setup-field { margin-bottom:18px; }
.setup-label { font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-mono);display:block;margin-bottom:7px; }
.setup-input { width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:10px 13px;font-family:var(--f-mono);font-size:12px;color:var(--text);outline:none;transition:border-color .15s; }
.setup-input:focus { border-color:var(--indigo); }
.setup-hint { font-size:11px;color:var(--muted2);margin-top:5px;font-family:var(--f-mono); }
.setup-btn { padding:10px 22px;background:var(--indigo);border:0;border-radius:var(--r);font-family:var(--f-display);font-size:13px;font-weight:600;color:#fff;cursor:pointer;transition:all .15s; }
.setup-btn:hover { background:var(--indigo-dk); }
.setup-info { background:var(--indigo-lt);border:1px solid #BFCFF8;border-radius:var(--r);padding:14px 16px;font-size:12px;color:var(--indigo-dk);line-height:1.7;margin-bottom:24px; }
.setup-info code { font-family:var(--f-mono);background:rgba(59,79,232,.12);padding:1px 5px;border-radius:3px;font-size:11px; }

/* ── APP ───────────────────────────────────── */
#screen-app { display:none; }
.layout { display:flex;min-height:100vh; }

/* ── SIDEBAR ───────────────────────────────── */
.sidebar { width:var(--sidebar-w);background:var(--ink);position:fixed;top:0;left:0;bottom:0;z-index:100;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s ease; }
.sb-brand { padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:11px; }
.sb-brand-mark { width:34px;height:34px;background:var(--indigo);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.sb-brand-mark svg { width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.sb-brand-name { font-family:var(--f-display);font-size:14px;font-weight:700;color:#fff;letter-spacing:-.2px; }
.sb-brand-tag  { font-size:10px;color:rgba(255,255,255,.35);margin-top:1px;font-family:var(--f-mono); }
.sb-client { margin:12px 12px 0;padding:10px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);display:flex;align-items:center;gap:9px; }
.sb-client-av { width:28px;height:28px;border-radius:6px;background:var(--indigo);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:11px;font-weight:700;color:#fff;flex-shrink:0; }
.sb-client-name { font-size:12px;font-weight:600;color:#fff;line-height:1.2; }
.sb-client-role { font-size:10px;color:rgba(255,255,255,.35); }
.sb-nav { flex:1;padding:16px 10px;overflow-y:auto; }
.sb-section-label { font-family:var(--f-mono);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.2);padding:10px 10px 6px; }
.sb-section-label:first-child { padding-top:0; }
.nav-item { display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);cursor:pointer;transition:all .15s;margin-bottom:1px;position:relative; }
.nav-item:hover { background:rgba(255,255,255,.06); }
.nav-item.active { background:rgba(59,79,232,.28); }
.nav-item.active::before { content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--indigo); }
.nav-icon { width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;background:rgba(255,255,255,.06);transition:background .15s; }
.nav-item.active .nav-icon { background:rgba(59,79,232,.35); }
.nav-text { font-size:12px;font-weight:500;color:rgba(255,255,255,.5);flex:1; }
.nav-item.active .nav-text { color:#fff;font-weight:600; }
.nav-badge { font-family:var(--f-mono);font-size:9px;font-weight:500;padding:2px 6px;border-radius:10px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.5); }
.nav-item.active .nav-badge { background:var(--indigo);color:#fff; }
.nav-badge.danger { background:rgba(185,28,28,.5);color:#FCA5A5; }
.sb-footer { padding:14px 12px;border-top:1px solid rgba(255,255,255,.07); }
.sb-user { display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);cursor:pointer;transition:background .15s; }
.sb-user:hover { background:rgba(255,255,255,.06); }
.sb-user-av { width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3B4FE8,#6C63FF);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:11px;font-weight:700;color:#fff;flex-shrink:0; }
.sb-user-name  { font-size:12px;font-weight:600;color:rgba(255,255,255,.7); }
.sb-user-email { font-size:10px;color:rgba(255,255,255,.3);font-family:var(--f-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px; }
.sb-logout { margin-top:4px;padding:6px 10px;border-radius:var(--r);font-size:11px;color:rgba(255,255,255,.3);cursor:pointer;transition:all .15s;font-family:var(--f-mono); }
.sb-logout:hover { background:rgba(185,28,28,.2);color:#FCA5A5; }

/* ── MAIN ──────────────────────────────────── */
.sidebar-backdrop { display:none;position:fixed;inset:0;background:rgba(12,15,26,.5);z-index:99; }
.sidebar-backdrop.open { display:block; }
.main { margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden; }
.topbar { background:var(--surface2);border-bottom:1px solid var(--border);padding:0 28px;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:90;box-shadow:var(--sh);gap:12px; }
.topbar-left { display:flex;align-items:center;gap:10px;min-width:0;flex:1; }
.topbar-menu-btn { display:none;width:34px;height:34px;background:var(--surface3);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }
.breadcrumb { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap; }
.breadcrumb-sep { color:var(--border2); }
.breadcrumb-current { color:var(--text);font-weight:600; }
.topbar-right { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.tb-btn { display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--r);font-family:var(--f-body);font-size:12px;font-weight:600;cursor:pointer;border:0;transition:all .15s;white-space:nowrap; }
.tb-btn-primary { background:var(--indigo);color:#fff; }
.tb-btn-primary:hover { background:var(--indigo-dk);box-shadow:0 3px 10px var(--indigo-glow); }
.tb-btn-ghost { background:transparent;color:var(--muted);border:1.5px solid var(--border); }
.tb-btn-ghost:hover { background:var(--surface3);color:var(--text); }
.content { flex:1;padding:28px;width:100%;box-sizing:border-box; }

/* ── VIEWS ─────────────────────────────────── */
.view { display:none;animation:fadeSlide .28s ease; }
.view.active { display:block; }
@keyframes fadeSlide { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── PAGE HEADER ───────────────────────────── */
.page-header { margin-bottom:26px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap; }
.page-header-left h1 { font-family:var(--f-display);font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.4px;margin-bottom:4px; }
.page-header-left p  { font-size:13px;color:var(--muted);line-height:1.5; }
.page-header-right   { display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;align-items:center;position:relative; }

/* ── STATS ─────────────────────────────────── */
.stats-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:26px; }
.stat-card { background:var(--surface2);border:1px solid var(--border);border-radius:var(--rl);padding:18px 20px;box-shadow:var(--sh);position:relative;overflow:hidden;transition:box-shadow .2s; }
.stat-card:hover { box-shadow:var(--sh2); }
.stat-card::after { content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--rl) var(--rl) 0 0; }
.stat-card.blue::after  { background:var(--indigo); }
.stat-card.green::after { background:var(--green); }
.stat-card.amber::after { background:#D97706; }
.stat-card.red::after   { background:var(--red); }
.stat-label  { font-family:var(--f-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);margin-bottom:8px; }
.stat-number { font-family:var(--f-display);font-size:32px;font-weight:700;color:var(--text);line-height:1;margin-bottom:4px; }
.stat-number.blue  { color:var(--indigo); }
.stat-number.green { color:var(--green); }
.stat-number.amber { color:#92600A; }
.stat-number.red   { color:var(--red); }
.stat-sub { font-size:11px;color:var(--muted); }

/* ── CARD ──────────────────────────────────── */
.card { background:var(--surface2);border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--sh);overflow:visible;margin-bottom:18px; }
.card-header { padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.card-title    { font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px; }
.card-subtitle { font-size:11px;color:var(--muted);margin-top:1px; }
.card-actions  { display:flex;gap:8px;flex-wrap:wrap;align-items:center;position:relative; }
.card-body     { padding:0;overflow-x:auto; }

/* ── FILTERS ───────────────────────────────── */
.filters-bar { display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap; }
.search-input { display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:7px 12px;flex:1;min-width:180px;transition:border-color .15s; }
.search-input:focus-within { border-color:var(--indigo); }
.search-input input { border:0;background:transparent;outline:none;font-family:var(--f-body);font-size:12px;color:var(--text);width:100%; }
.search-input input::placeholder { color:var(--muted2); }
.filter-chip { display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface2);font-size:11px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap; }
.filter-chip:hover { border-color:var(--indigo);color:var(--indigo); }
.filter-chip.active { background:var(--indigo-lt);border-color:var(--indigo);color:var(--indigo); }

/* ── TABLE ─────────────────────────────────── */
.data-table { width:100%;border-collapse:collapse;min-width:480px; }
.data-table th { padding:10px 16px;text-align:left;font-family:var(--f-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface3);border-bottom:1px solid var(--border);white-space:nowrap; }
.data-table td { padding:13px 16px;font-size:12px;color:var(--text2);border-bottom:1px solid var(--border);vertical-align:middle; }
.data-table tr:last-child td { border-bottom:0; }
.data-table tbody tr { transition:background .12s; }
.data-table tbody tr:hover { background:var(--indigo-lt); }

/* ── BADGES ────────────────────────────────── */
.badge { display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:10px;font-family:var(--f-mono);font-size:10px;font-weight:500;white-space:nowrap;border:1px solid transparent; }
.badge-dot { width:5px;height:5px;border-radius:50%;flex-shrink:0; }
.badge-green   { background:var(--green-lt);color:var(--green);border-color:#A7D7BE; }
.badge-green   .badge-dot { background:var(--green); }
.badge-amber   { background:var(--amber-lt);color:var(--amber);border-color:#FCD34D; }
.badge-amber   .badge-dot { background:#D97706; }
.badge-red     { background:var(--red-lt);color:var(--red);border-color:#FCA5A5; }
.badge-red     .badge-dot { background:var(--red); }
.badge-slate   { background:var(--slate-lt);color:var(--slate);border-color:#CBD5E1; }
.badge-slate   .badge-dot { background:var(--slate); }
.badge-indigo  { background:var(--indigo-lt);color:var(--indigo-dk);border-color:#BFCFF8; }
.badge-indigo  .badge-dot { background:var(--indigo); }
.doc-code { font-family:var(--f-mono);font-size:11px;color:var(--indigo-dk);background:var(--indigo-lt);padding:2px 6px;border-radius:4px; }

/* ── MINI BUTTONS ──────────────────────────── */
.mini-btn { display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--r);font-size:11px;font-weight:600;cursor:pointer;border:0;font-family:var(--f-body);transition:all .15s; }
.mini-btn-primary   { background:var(--indigo);color:#fff; }
.mini-btn-primary:hover { background:var(--indigo-dk); }
.mini-btn-secondary { background:var(--surface3);color:var(--text2);border:1px solid var(--border); }
.mini-btn-secondary:hover { background:var(--border); }
.mini-btn-danger    { background:var(--red-lt);color:var(--red);border:1px solid #FCA5A5; }
.mini-btn-danger:hover { background:var(--red);color:#fff; }
.mini-btn-success   { background:var(--green-lt);color:var(--green);border:1px solid #A7D7BE; }
.mini-btn-success:hover { background:var(--green);color:#fff; }

/* ── EXPORT MENU ───────────────────────────── */
.export-menu { display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh3);z-index:150;min-width:160px;overflow:hidden; }
.export-menu.open { display:block; }
.export-item { padding:9px 14px;font-size:12px;color:var(--text2);cursor:pointer;transition:background .12s;white-space:nowrap; }
.export-item:hover { background:var(--indigo-lt);color:var(--indigo); }

/* ── MODAL ─────────────────────────────────── */
.modal-overlay { position:fixed;inset:0;background:rgba(12,15,26,.55);z-index:300;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px); }
.modal-overlay.open { display:flex; }
.modal-card { width:580px;max-width:96vw;max-height:92vh;overflow-y:auto;background:var(--surface2);border-radius:var(--rxl);box-shadow:var(--sh3);animation:fadeSlide .2s ease; }
.modal-card.modal-lg { width:720px; }
.modal-header { padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface2);z-index:10; }
.modal-title { font-family:var(--f-display);font-size:16px;font-weight:700; }
.modal-body { padding:24px; }
.form-field { margin-bottom:18px; }
.form-label { font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-mono);display:block;margin-bottom:7px; }
.form-label span { color:var(--red); }
.form-input,.form-select,.form-textarea { width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);padding:9px 12px;font-family:var(--f-body);font-size:13px;color:var(--text);outline:none;transition:border-color .15s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--indigo); }
.form-textarea { resize:vertical;min-height:80px;line-height:1.6; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.form-grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px; }
.form-footer { display:flex;gap:8px;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:1px solid var(--border); }
.btn-cancel { padding:9px 18px;background:var(--surface3);border:1px solid var(--border);border-radius:var(--r);font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;font-family:var(--f-body); }
.btn-save   { padding:9px 20px;background:var(--indigo);border:0;border-radius:var(--r);font-size:13px;font-weight:600;color:#fff;cursor:pointer;font-family:var(--f-body);display:flex;align-items:center;gap:6px; }
.btn-save:hover { background:var(--indigo-dk); }
.btn-save:disabled { opacity:.5;cursor:not-allowed; }
.modal-close { width:30px;height:30px;border-radius:50%;background:var(--surface3);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);transition:all .15s; }
.modal-close:hover { background:var(--border2);color:var(--text); }
.info-box { background:var(--indigo-lt);border:1px solid #BFCFF8;border-radius:var(--r);padding:12px 14px;font-size:11px;color:var(--indigo-dk);line-height:1.6;display:flex;gap:8px;align-items:flex-start;margin-bottom:16px; }

/* ── FILE UPLOAD ───────────────────────────── */
.file-upload-area { border:2px dashed var(--border2);border-radius:var(--r);padding:20px;text-align:center;cursor:pointer;transition:all .15s;background:var(--surface); }
.file-upload-area:hover,.file-upload-area.dragover { border-color:var(--indigo);background:var(--indigo-lt); }
.file-upload-area input[type=file] { display:none; }
.file-upload-icon { font-size:28px;margin-bottom:8px; }
.file-upload-text { font-size:12px;color:var(--muted);line-height:1.6; }
.file-upload-text strong { color:var(--indigo); }
.file-attached { display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--green-lt);border:1px solid #A7D7BE;border-radius:var(--r);font-size:12px;color:var(--green); }

/* ── PROGRESS BAR ──────────────────────────── */
.progress-bar { height:6px;background:var(--surface3);border-radius:10px;overflow:hidden; }
.progress-fill { height:100%;border-radius:10px;transition:width .6s ease; }

/* ── DASHBOARD GRID ────────────────────────── */
.dash-grid { display:grid;grid-template-columns:2fr 1fr;gap:18px; }
.activity-item { display:flex;align-items:flex-start;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border); }
.activity-item:last-child { border-bottom:0; }
.activity-icon { width:28px;height:28px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px; }
.act-doc  { background:var(--indigo-lt); }
.act-act  { background:var(--amber-lt); }
.act-nc   { background:var(--red-lt); }
.activity-text { font-size:11px;color:var(--text2);line-height:1.5;flex:1; }
.activity-text strong { color:var(--text);font-weight:600; }
.activity-time { font-family:var(--f-mono);font-size:10px;color:var(--muted2);white-space:nowrap; }
.pending-item { display:flex;align-items:center;gap:10px;padding:11px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s; }
.pending-item:hover { background:var(--indigo-lt); }
.pending-item:last-child { border-bottom:0; }
.pending-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.pending-text { font-size:11px;color:var(--text2);flex:1;line-height:1.4; }
.pending-text strong { color:var(--text);display:block;font-weight:600;font-size:12px; }
.pending-meta { font-family:var(--f-mono);font-size:9px;color:var(--muted2); }

/* ── ACTIVIDADES CALENDAR ──────────────────── */
.task-item { display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);transition:background .12s; }
.task-item:hover { background:var(--surface3); }
.task-item:last-child { border-bottom:0; }
.task-check { width:18px;height:18px;border-radius:4px;border:2px solid var(--border2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s; }
.task-check.done { background:var(--green);border-color:var(--green);color:#fff; }
.task-check.done::after { content:'✓';font-size:11px;font-weight:700; }
.task-text { flex:1;font-size:12px;color:var(--text2);line-height:1.4; }
.task-text.done { text-decoration:line-through;color:var(--muted2); }
.task-text strong { display:block;color:var(--text);font-weight:600; }
.task-meta { font-family:var(--f-mono);font-size:10px;color:var(--muted2);white-space:nowrap; }

/* ── LOADING / EMPTY ───────────────────────── */
.loading-row td { text-align:center;padding:32px;color:var(--muted);font-family:var(--f-mono);font-size:11px; }
.empty-state { padding:48px 20px;text-align:center;color:var(--muted2);font-size:12px;line-height:1.8; }
.spinner { display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--indigo);border-radius:50%;animation:spin .7s linear infinite;margin-right:8px;vertical-align:middle; }
@keyframes spin { to{ transform:rotate(360deg); } }

/* ── TOAST ─────────────────────────────────── */
.toast-container { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px; }
.toast { background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r);font-size:12px;box-shadow:var(--sh3);display:flex;align-items:center;gap:10px;animation:toastIn .25s ease;max-width:320px; }
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red); }
@keyframes toastIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── MONTH TABS ────────────────────────────── */
.month-tabs { display:flex;gap:4px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--border); }
.month-tab { padding:5px 11px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface2);font-family:var(--f-mono);font-size:10px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s; }
.month-tab:hover { border-color:var(--indigo);color:var(--indigo); }
.month-tab.active { background:var(--indigo-lt);border-color:var(--indigo);color:var(--indigo); }
.month-tab.has-tasks { font-weight:700; }

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width:1024px) {
  :root { --sidebar-w:220px; }
  .content { padding:20px; }
}
@media (max-width:768px) {
  :root { --sidebar-w:0px; }
  .sidebar { width:252px;transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-backdrop.open { display:block; }
  .main { margin-left:0 !important; width:100%; }
  .topbar { padding:12px 16px; height:auto; }
  .topbar-menu-btn { display:flex; }
  .content { padding:14px; }
  .stats-grid { grid-template-columns:repeat(2,1fr);gap:10px; }
  .page-header { flex-direction:column;align-items:flex-start;gap:12px; }
  .page-header-right { width:100%;justify-content:flex-end; }
  .form-grid,.form-grid-3 { grid-template-columns:1fr; }
  .dash-grid { grid-template-columns:1fr; }
  .modal-card { width:100%;max-width:100vw;border-radius:var(--rl) var(--rl) 0 0; }
  .modal-overlay { align-items:flex-end; }
}