:root{
  --bg:#f5f7fb;--panel:#ffffff;--ink:#152033;--muted:#6c7890;--line:#e5e9f2;
  --nav:#0e172a;--nav2:#17233a;--accent:#5b67f1;--accent2:#8a5cf6;--good:#1eaf76;--warn:#f3a533;--bad:#e45b62;
  --shadow:0 16px 40px rgba(24,39,75,.08);--radius:20px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}.shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--nav),#111b30);padding:22px 16px;color:#fff;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 24px}.brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#6f76ff,#9d64ff);display:grid;place-items:center;font-size:13px;font-weight:800;box-shadow:0 10px 30px rgba(91,103,241,.35)}.brand strong{display:block;font-size:15px;letter-spacing:.1px}.brand span{display:block;color:#94a2bd;font-size:11px;margin-top:3px}nav{display:grid;gap:5px}nav button{border:0;background:transparent;color:#aeb8ca;border-radius:12px;padding:11px 12px;text-align:left;display:flex;gap:11px;align-items:center;cursor:pointer;transition:.18s}nav button:hover,nav button.active{background:rgba(255,255,255,.08);color:#fff}nav button.active{box-shadow:inset 3px 0 0 #7d7cff}.side-foot{margin-top:auto;padding:14px 9px 4px;color:#8090ad;font-size:11px}.mini-status{display:flex;gap:8px;align-items:center;margin-bottom:8px;color:#b8c2d4}.mini-status i{width:8px;height:8px;background:#3bd59c;border-radius:50%;box-shadow:0 0 0 4px rgba(59,213,156,.12)}
.main{min-width:0}.topbar{min-height:96px;padding:22px 30px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:rgba(245,247,251,.9);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:800;color:#8290a7}.topbar h1{font-size:24px;margin:4px 0 0;letter-spacing:-.5px}.top-actions{display:flex;align-items:center;gap:9px}.month-pill{height:40px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 10px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.month-pill input{border:0;outline:0;color:var(--ink);background:transparent}.primary,.ghost,.danger,.soft{border:0;border-radius:12px;height:40px;padding:0 14px;cursor:pointer;font-weight:700;font-size:12px}.primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(91,103,241,.22)}.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}.soft{background:#eef0ff;color:#4d55c9}.danger{background:#fff0f1;color:#c74750}.content{padding:26px 30px 48px;max-width:1540px;margin:auto}
.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:17px 18px;box-shadow:0 8px 24px rgba(30,42,68,.04);position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;right:-20px;top:-28px;width:80px;height:80px;border-radius:50%;background:rgba(91,103,241,.06)}.kpi .label{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.2px}.kpi .value{font-size:27px;font-weight:800;margin-top:8px;letter-spacing:-1px}.kpi .meta{font-size:11px;margin-top:5px;color:var(--muted)}.good{color:var(--good)!important}.warn{color:var(--warn)!important}.bad{color:var(--bad)!important}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 28px rgba(30,42,68,.045)}.panel-head{padding:17px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head h3{margin:0;font-size:14px}.panel-head p{margin:3px 0 0;color:var(--muted);font-size:11px}.panel-body{padding:18px}.two-col{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)}.three-col{grid-template-columns:1fr 1fr 1fr}.progress{height:9px;background:#edf0f6;border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}.metric-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:13px 0}.metric-row .name{font-size:12px;color:#334058}.metric-row .num{font-size:12px;font-weight:800}.bar-list{display:grid;gap:14px}.bar-item .row{display:flex;justify-content:space-between;gap:15px;font-size:12px;margin-bottom:6px}.bar-item .row span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar{height:7px;border-radius:99px;background:#eef1f6}.bar i{display:block;height:100%;border-radius:99px;background:#6d76ed}.insight{border:1px solid var(--line);border-radius:14px;padding:13px 14px;display:flex;gap:12px;background:#fafbfe}.insight+.insight{margin-top:10px}.insight .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:4px;flex:0 0 auto}.insight b{display:block;font-size:12px}.insight p{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.toolbar{display:flex;gap:9px;align-items:center;justify-content:space-between;margin-bottom:14px}.toolbar-left,.toolbar-right{display:flex;gap:8px;align-items:center}.search,.select,.field input,.field select,.field textarea{height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 11px;outline:0;color:var(--ink)}.search{min-width:240px}.select{min-width:140px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:#8a94a8;text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);white-space:nowrap}.data-table td{padding:12px 13px;border-bottom:1px solid #eef1f6;font-size:12px;vertical-align:top}.data-table tr:hover td{background:#fafbfe}.data-table .title-cell{font-weight:700;max-width:460px}.muted{color:var(--muted)}.small{font-size:11px}.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800;background:#eef1f6;color:#5e687a;white-space:nowrap}.pill.open{background:#eef0ff;color:#4e58c9}.pill.progressing{background:#fff4db;color:#a66a03}.pill.done{background:#e9f9f2;color:#16835a}.pill.urgent,.pill.overdue{background:#ffedef;color:#c5424c}.pill.high{background:#fff3e8;color:#b56a12}.pill.billable{background:#e9f9f2;color:#16835a}.pill.review{background:#fff4db;color:#a66a03}.pill.non_billable{background:#eef1f6;color:#6b7280}.link{color:#5561df;font-weight:700;cursor:pointer}.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;margin-bottom:16px}.stat-strip>div{padding:14px 16px;border-right:1px solid var(--line)}.stat-strip>div:last-child{border-right:0}.stat-strip b{display:block;font-size:19px}.stat-strip span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.kanban{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:12px;overflow:auto}.lane{background:#eff2f7;border-radius:16px;padding:11px;min-height:420px}.lane-head{display:flex;justify-content:space-between;align-items:center;padding:3px 4px 10px}.lane-head b{font-size:12px}.count{font-size:10px;background:#fff;padding:3px 7px;border-radius:99px;color:var(--muted)}.ticket-card{background:#fff;border:1px solid #e4e8f0;border-radius:13px;padding:12px;margin-bottom:9px;cursor:pointer;box-shadow:0 5px 15px rgba(24,39,75,.04)}.ticket-card:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(24,39,75,.08)}.ticket-card .ticket-no{font-size:10px;color:#8b95a8}.ticket-card h4{font-size:12px;margin:7px 0 8px;line-height:1.4}.ticket-meta{display:flex;gap:6px;flex-wrap:wrap}.client-card{padding:15px;border:1px solid var(--line);border-radius:15px;background:#fff;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center}.avatar{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#edf0ff,#f6edff);display:grid;place-items:center;color:#5962d8;font-weight:800}.client-card h4{margin:0;font-size:13px}.client-card p{margin:4px 0 0;color:var(--muted);font-size:11px}.client-card .metric{text-align:right}.client-card .metric b{display:block;font-size:14px}.client-card .metric span{font-size:10px;color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(12,18,31,.48);backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px;z-index:100}.hidden{display:none!important}.modal{width:min(760px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(10,18,36,.25)}.modal-header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:16px}.close{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}.modal-body{padding:20px}.modal-footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#8490a4;font-weight:800}.field textarea{height:90px;padding:10px;resize:vertical}.check{display:flex;gap:8px;align-items:center;font-size:12px}.toast{position:fixed;right:24px;bottom:24px;background:#152033;color:#fff;padding:12px 15px;border-radius:12px;box-shadow:var(--shadow);font-size:12px;z-index:200}.empty{padding:48px 20px;text-align:center;color:var(--muted)}.empty b{display:block;color:var(--ink);margin-bottom:5px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f1f3f8;padding:2px 5px;border-radius:5px;font-size:10px}.dropzone{border:1.5px dashed #cfd5e1;border-radius:16px;padding:28px;text-align:center;background:#fafbfe;cursor:pointer}.dropzone.drag{border-color:var(--accent);background:#f4f4ff}.dropzone b{display:block;font-size:13px}.dropzone p{font-size:11px;color:var(--muted)}.timeline{display:grid;gap:12px}.timeline-item{display:grid;grid-template-columns:26px 1fr;gap:9px}.timeline-item .mark{width:26px;height:26px;border-radius:50%;background:#eef0ff;color:#5d63d8;display:grid;place-items:center;font-size:10px}.timeline-item .msg{border:1px solid var(--line);border-radius:12px;padding:10px 12px}.timeline-item .msg b{font-size:11px}.timeline-item .msg p{font-size:12px;line-height:1.5;margin:5px 0}.timeline-item .msg time{font-size:10px;color:var(--muted)}.hero-panel{padding:22px;background:linear-gradient(135deg,#111b30,#1b2a47);color:#fff;border-radius:20px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-bottom:16px;overflow:hidden;position:relative}.hero-panel:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(123,114,255,.22),rgba(123,114,255,0));right:-70px;top:-100px}.hero-panel h2{font-size:20px;margin:0 0 6px}.hero-panel p{margin:0;color:#aeb9cd;font-size:12px;max-width:650px;line-height:1.55}.hero-panel .big-number{font-size:32px;font-weight:800;position:relative;z-index:2}.hero-panel .big-number small{display:block;font-size:10px;color:#aeb9cd;font-weight:600;text-align:right}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.three-col{grid-template-columns:1fr 1fr}.sidebar{width:78px}.shell{grid-template-columns:78px 1fr}.brand div:last-child,nav button:not(.active) span+*,.side-foot{display:none}.brand{padding-left:2px}.brand-mark{width:44px}nav button{justify-content:center;font-size:0}nav button span{font-size:16px}.topbar{padding-left:20px}.content{padding-left:20px;padding-right:20px}}
@media(max-width:720px){.shell{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:64px;z-index:60;padding:8px;background:#101a2e}.brand,.side-foot{display:none}nav{display:flex;justify-content:space-around}nav button{padding:9px 11px}nav button:nth-child(n+6){display:none}.main{padding-bottom:70px}.topbar{position:static;display:block;padding:16px}.top-actions{margin-top:12px;overflow:auto}.top-actions .ghost{display:none}.content{padding:16px}.kpis{grid-template-columns:1fr 1fr}.three-col{grid-template-columns:1fr}.stat-strip{grid-template-columns:1fr 1fr}.stat-strip>div:nth-child(2){border-right:0}.form-grid{grid-template-columns:1fr}.toolbar{align-items:flex-start;flex-direction:column}.toolbar-left,.toolbar-right{width:100%;overflow:auto}.search{min-width:180px}.hero-panel{grid-template-columns:1fr}.hero-panel .big-number{text-align:left}.hero-panel .big-number small{text-align:left}}

/* v2: Excel-style worklog */
.quick-sheet{overflow:visible}.sheet-actions{display:flex;gap:8px;align-items:center}.sheet-wrap{overflow:auto;max-height:440px;border-radius:0 0 16px 16px}.entry-sheet{border-collapse:separate;border-spacing:0;min-width:1500px;width:100%;background:#fff}.entry-sheet th{position:sticky;top:0;z-index:3;background:#f7f8fc;border-bottom:1px solid var(--line);padding:9px 8px;text-align:left;font-size:9px;color:#7f899b;text-transform:uppercase;letter-spacing:.35px;white-space:nowrap}.entry-sheet td{padding:0;border-bottom:1px solid #edf0f5;border-right:1px solid #f0f2f6;background:#fff}.entry-sheet tr:hover td{background:#fafbff}.entry-sheet input,.entry-sheet select{width:100%;height:40px;border:0;border-radius:0;background:transparent;padding:0 8px;outline:0;font-size:11px;color:var(--ink);min-width:76px}.entry-sheet input:focus,.entry-sheet select:focus{box-shadow:inset 0 0 0 2px rgba(91,103,241,.42);background:#fff}.entry-sheet .qr-client{min-width:160px;font-weight:700}.entry-sheet .qr-site{min-width:145px}.entry-sheet .qr-task{min-width:260px}.entry-sheet .qr-note{min-width:180px}.entry-sheet .qr-ticket{min-width:95px}.entry-sheet td.center{text-align:center;vertical-align:middle}.entry-sheet td.center input{width:16px;height:16px}.row-remove{width:30px;height:30px;border:0;background:transparent;color:#a0a8b7;font-size:18px;cursor:pointer}.row-remove:hover{color:var(--bad);background:#fff0f1;border-radius:8px}.sheet-foot{display:flex;justify-content:space-between;gap:15px;padding:10px 14px;border-top:1px solid var(--line);background:#fafbfe;color:var(--muted);font-size:10px}.sheet-foot b{color:var(--ink)}

/* v2: functional Kanban drag & drop */
.lane{transition:.16s ease;border:1px solid transparent}.lane.drag-over{background:#e8ebff;border-color:#8d93ff;box-shadow:inset 0 0 0 2px rgba(91,103,241,.08)}.lane-drop{min-height:365px}.ticket-card{position:relative;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.ticket-card.dragging{opacity:.45;transform:rotate(1deg) scale(.98)}.drag-handle{position:absolute;right:9px;top:8px;color:#b2b9c6;font-size:13px;letter-spacing:-2px;cursor:grab}.ticket-card:active .drag-handle{cursor:grabbing}

/* v2: hosting / renewals */
.hosting-hero{background:linear-gradient(135deg,#101b31,#173d48)}.hosting-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.hosting-table .renew-soon td{background:#fffdf7}.hosting-table .renew-overdue td{background:#fff8f8}.hosting-table .renew-soon:hover td,.hosting-table .renew-overdue:hover td{filter:brightness(.99)}.hosting-actions{white-space:nowrap}.hosting-actions .link{display:block;margin:2px 0}.simple-flow{display:grid;gap:14px}.compact-checks{display:flex!important;gap:18px;flex-wrap:wrap}.entity-list{display:grid;gap:8px}.entity-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:#fafbfe}.entity-item b{font-size:12px}.entity-item p{margin:3px 0 0;color:var(--muted);font-size:10px}.divider{height:1px;background:var(--line);margin:18px 0}

@media(max-width:720px){.sheet-actions{width:100%;overflow:auto}.panel-head:has(.sheet-actions){align-items:flex-start;flex-direction:column}.sheet-foot{align-items:flex-start;flex-direction:column}.hosting-kpis{grid-template-columns:1fr 1fr}.entry-sheet{min-width:1450px}}
.hosting-table .renew-review td{background:#faf9ff}.hosting-table .renew-review td:first-child:after{content:"import";display:inline-flex;margin-top:5px;padding:2px 6px;border-radius:99px;background:#eeecff;color:#6459c8;font-size:9px;font-weight:800;text-transform:uppercase}