:root{--primary: #0072E5;--primary-600: #005DBF;--primary-soft: #EEF2FF;--accent: #008FFF;--bg: #F6F7FB;--surface: #FFFFFF;--border: #E5E9F0;--border-strong: #CBD5E1;--ink: #0F172A;--ink-2: #334155;--muted: #64748B;--muted-2: #94A3B8;--success: #059669;--success-soft: #D9F2E7;--warning: #B45309;--warning-soft: #FCF0D8;--danger: #DC2626;--danger-soft: #FDE4E4;--info: #0369A1;--info-soft: #DFF1FB;--shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);--shadow-md: 0 4px 12px rgba(15,23,42,.08);--shadow-lg: 0 12px 40px rgba(15,23,42,.18);--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-pill: 999px;--font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--sb-bg: #101323;--sb-ink: #9CA3B8;--sb-active: #1D2138;--t: .15s ease}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:13.5px;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit;font-size:13.5px;color:var(--ink)}a{color:var(--primary);text-decoration:none}::selection{background:var(--primary-soft)}.app{display:flex;height:100vh;overflow:hidden}.sidebar{width:232px;min-width:232px;background:var(--sb-bg);display:flex;flex-direction:column;padding:18px 10px 12px;overflow-y:auto}.brand{padding:2px 12px 16px;border-bottom:1px solid #1E2338;margin-bottom:12px}.brand-logo svg{width:88%;height:auto;display:block}.brand p{font-size:10.5px;color:#5b637d;margin-top:3px;line-height:1.35}.nav-sec{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#4b5269;padding:14px 12px 5px;font-weight:600}.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--sb-ink);font-size:13px;padding:8.5px 12px;border-radius:var(--r-sm);margin-bottom:1px;transition:background var(--t),color var(--t);font-weight:500}.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.85}.nav-item:hover{background:var(--sb-active);color:#e2e6f3}.nav-item.active{background:var(--primary);color:#fff;font-weight:600}.nav-item .count{margin-left:auto;background:#292e4a;color:#a5acc7;border-radius:var(--r-pill);font-size:10.5px;padding:1px 7px;font-weight:600}.nav-item.active .count{background:#ffffff38;color:#fff}.sb-foot{margin-top:auto;padding:12px;font-size:10.5px;color:#4b5269;line-height:1.5}.main{flex:1;display:flex;flex-direction:column;min-width:0}.topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;flex-shrink:0}.content{flex:1;overflow-y:auto;padding:22px 26px 40px}.gsearch{position:relative;width:380px;max-width:42vw}.gsearch input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);transition:border var(--t),box-shadow var(--t)}.gsearch input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:#fff}.gsearch .gs-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted-2);width:15px;height:15px}.gs-drop{position:absolute;top:42px;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);max-height:380px;overflow-y:auto;z-index:60}.gs-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--bg)}.gs-item:hover{background:var(--primary-soft)}.gs-item .t{font-weight:600;font-size:13px}.gs-item .s{font-size:11.5px;color:var(--muted)}.gs-cat{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-2);padding:8px 14px 3px;font-weight:700}.bell{position:relative;margin-left:auto;background:none;border:1px solid var(--border);border-radius:var(--r-sm);width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:background var(--t)}.bell:hover{background:var(--bg)}.bell .dot{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;border-radius:var(--r-pill);min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px}.vhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;flex-wrap:wrap}.vhead h2{font-size:20px;font-weight:700;letter-spacing:-.2px}.vhead .sub{font-size:12.5px;color:var(--muted);margin-top:3px}.vhead .actions{display:flex;gap:8px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:6px;background:var(--primary);color:#fff;border:none;border-radius:var(--r-sm);padding:8.5px 15px;font-size:13px;font-weight:600;transition:background var(--t),transform var(--t)}.btn:hover{background:var(--primary-600)}.btn:active{transform:scale(.98)}.btn.sec{background:var(--surface);color:var(--ink);border:1px solid var(--border)}.btn.sec:hover{background:var(--bg)}.btn.ghost{background:transparent;color:var(--ink-2);border:none}.btn.ghost:hover{background:var(--bg)}.btn.danger{background:var(--danger)}.btn.danger:hover{background:#b91c1c}.btn.success{background:var(--success)}.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}.btn:disabled{opacity:.5;cursor:not-allowed}.logout-btn{white-space:nowrap}@media (max-width: 640px){.logout-btn{padding:6px 10px;font-size:12px}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-sm)}.card h3{font-size:13.5px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}.card h3 .spacer{margin-left:auto}.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kpi-color, var(--primary))}.kpi .lbl{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px}.kpi .val{font-size:22px;font-weight:700;margin-top:6px;letter-spacing:-.4px}.kpi .note{font-size:11.5px;color:var(--muted);margin-top:3px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media (max-width: 1100px){.grid2,.grid3{grid-template-columns:1fr}}.tbl-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;padding:9px 10px;border-bottom:1px solid var(--border);font-weight:700;background:var(--surface);position:sticky;top:0}td{padding:9px 10px;border-bottom:1px solid #EEF1F6;vertical-align:middle}tr:last-child td{border-bottom:none}tr.click{cursor:pointer;transition:background var(--t)}tr.click:hover td{background:#f8faff}td .sub,.sub{font-size:11.5px;color:var(--muted)}.num{font-variant-numeric:tabular-nums}.pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding-top:12px;font-size:12px;color:var(--muted)}.pager button{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:4px 10px;font-size:12px;color:var(--ink-2)}.pager button:disabled{opacity:.4;cursor:default}.badge{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600;white-space:nowrap}.b-success{background:var(--success-soft);color:var(--success)}.b-danger{background:var(--danger-soft);color:var(--danger)}.b-warning{background:var(--warning-soft);color:var(--warning)}.b-info{background:var(--info-soft);color:var(--info)}.b-neutral{background:#edf0f5;color:var(--muted)}.b-primary{background:var(--primary-soft);color:var(--primary)}.chips{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}.chip{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-pill);padding:5px 13px;font-size:12px;color:var(--ink-2);font-weight:500;transition:all var(--t)}.chip:hover{border-color:var(--border-strong)}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.kanban{display:flex;gap:12px;overflow-x:auto;align-items:flex-start;padding-bottom:14px}.kcol{min-width:240px;width:240px;background:#edf0f6;border-radius:var(--r-md);padding:10px;flex-shrink:0}.kcol h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-2);padding:2px 4px 4px;display:flex;align-items:center;gap:7px;font-weight:700}.kcol h4 .n{margin-left:auto;color:var(--muted);font-weight:600}.kcol .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.kcol .sum{font-size:11px;color:var(--muted);padding:0 4px 8px}.kcard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:grab;font-size:12.5px;box-shadow:var(--shadow-sm);transition:box-shadow var(--t),transform var(--t)}.kcard:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.kcard:active{cursor:grabbing}.kcard .t{font-weight:600;margin-bottom:3px;line-height:1.3}.kcard .c{font-size:11.5px;color:var(--muted)}.kcard .v{font-size:12px;font-weight:600;color:var(--primary);margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.kcol.over{outline:2px dashed var(--primary);outline-offset:-2px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:80;animation:fade .12s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border-radius:var(--r-lg);width:620px;max-width:100%;padding:22px 24px;box-shadow:var(--shadow-lg);animation:pop .14s ease}@keyframes pop{0%{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}.modal h3{font-size:16px;font-weight:700;margin-bottom:16px}.field{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:12px}.field input,.field select,.field textarea{display:block;width:100%;margin-top:5px;padding:8.5px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;transition:border var(--t),box-shadow var(--t)}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.field textarea{min-height:70px;resize:vertical}.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}.frow3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.checks{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}.checks label{display:flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 9px;cursor:pointer;font-size:12px;font-weight:500;color:var(--ink);background:#fff}.checks input{accent-color:var(--primary)}.alert-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #EEF1F6;font-size:12.5px}.alert-item:last-child{border-bottom:none}.alert-item .who{font-weight:600}.alert-item .what{color:var(--muted);font-size:11.5px;margin-top:2px}.timeline{position:relative;padding-left:18px}.timeline:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--border)}.tl-item{position:relative;padding:0 0 14px 12px;font-size:12.5px}.tl-item:before{content:"";position:absolute;left:-17px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--tl-color, var(--primary));border:2px solid #fff;box-shadow:0 0 0 1.5px var(--border-strong)}.tl-item .d{font-size:10.5px;color:var(--muted-2);font-weight:600;text-transform:uppercase}.task-line{display:flex;align-items:center;gap:10px;padding:8.5px 0;border-bottom:1px solid #EEF1F6;font-size:13px}.task-line:last-child{border-bottom:none}.task-line input[type=checkbox]{width:16px;height:16px;accent-color:var(--success);cursor:pointer}.task-line .done{text-decoration:line-through;color:var(--muted)}.empty{color:var(--muted);font-size:12.5px;padding:22px;text-align:center}.toasts{position:fixed;bottom:18px;right:18px;z-index:100;display:flex;flex-direction:column;gap:8px}.toast{background:var(--ink);color:#fff;border-radius:var(--r-md);padding:11px 16px;font-size:13px;box-shadow:var(--shadow-lg);animation:pop .15s ease;max-width:340px}.toast.err{background:var(--danger)}.profile-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}.avatar{width:52px;height:52px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;flex-shrink:0}.wa-link{display:inline-flex;align-items:center;gap:5px;background:#e7f8ee;color:#128c4b;border-radius:var(--r-pill);padding:3px 10px;font-size:11.5px;font-weight:600}.wa-link:hover{background:#d2f1df}.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}.tab{background:none;border:none;padding:9px 14px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}.tab.on{color:var(--primary);border-bottom-color:var(--primary)}.login-wrap{height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#101323,#1e1b4b);padding:16px}.login-card{background:var(--surface);border-radius:var(--r-lg);padding:34px 32px;width:400px;max-width:100%;box-shadow:var(--shadow-lg)}.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:var(--r-sm);width:36px;height:36px;align-items:center;justify-content:center;color:var(--ink-2)}@media (max-width: 860px){.sidebar{position:fixed;inset:0 auto 0 0;z-index:90;transform:translate(-100%);transition:transform .2s ease;box-shadow:var(--shadow-lg)}.sidebar.open{transform:none}.menu-btn{display:flex}.content{padding:14px 14px 40px}.gsearch{width:100%;max-width:none;flex:1}.grid2,.grid3{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}.frow,.frow3{grid-template-columns:1fr}.vhead .actions{width:100%}}.scrim{display:none}@media (max-width: 860px){.scrim.show{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a66;z-index:85}}.tour-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:110;pointer-events:none}.tour-card{pointer-events:auto;position:absolute;bottom:24px;left:50%;transform:translate(-50%);width:440px;max-width:calc(100vw - 28px);background:var(--surface);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-lg),0 0 0 1px var(--border);animation:pop .2s ease}
