@font-face{font-family:"Jakarta";src:url(fonts/jakarta.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"JBMono";src:url(fonts/jbmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
--teal-9:#0F4C5C;--teal-7:#147A7A;--teal-1:#E3F0EE;--coral:#F2705A;--coral-d:#D9573F;--coral-1:#FDE3DD;--coral-t:#9A3422;
--bg:#F6F4EF;--card:#fff;--ink:#1E2A30;--mute:#4A5A60;--soft:#7C8A8F;--line:#E4E0D7;--line-2:#D4CFC3;
--ok:#1F7A4D;--ok-1:#DDF1E5;--warn:#8A5A00;--warn-1:#FBEFD2;--bad:#B3261E;--bad-1:#FBE2DF;
--r:10px;--r-lg:14px;--mono:"JBMono",ui-monospace,Menlo,monospace;
--sans:"Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--teal-7);text-decoration:none}
h1{font-size:24px;font-weight:600;margin:0;letter-spacing:-.01em}
h2{font-size:17px;font-weight:600;margin:0 0 12px}
h3{font-size:15px;font-weight:600;margin:0}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--mute)}.soft{color:var(--soft)}.small{font-size:13px}
.shell{display:flex;min-height:100vh}
.side{width:236px;flex:none;background:var(--teal-9);color:#D7E7E6;padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{display:flex;gap:10px;align-items:center;color:#fff;font-weight:600;font-size:17px;padding:4px 8px 22px}
.brand small{display:block;font-size:11px;font-weight:400;color:#9FC3C2;letter-spacing:.02em}
.mark{width:36px;height:36px;border-radius:10px;background:var(--coral);color:#fff;display:grid;place-items:center;font-weight:700}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side a{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:9px;color:#C9DEDD;font-size:14px}
.side a:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.on{background:rgba(255,255,255,.12);color:#fff}
.side a.on .ic{color:var(--coral)}
.main{flex:1;min-width:0;padding:28px 32px 40px;max-width:1180px}
.foot{margin-top:40px;font-size:12px;color:var(--soft);text-align:center}
.foot a{color:var(--soft);text-decoration:none;font-weight:500}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.top p{margin:4px 0 0;color:var(--mute);font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.card+.card,.mt{margin-top:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.stat .l{font-size:13px;color:var(--mute)}
.stat .v{font:500 24px/1.3 var(--mono);margin-top:4px;color:var(--teal-9)}
.stat .s{font-size:12px;color:var(--soft);margin-top:2px}
.stat.accent{background:var(--teal-9);border-color:var(--teal-9)}
.stat.accent .l,.stat.accent .s{color:#A9CBCA}.stat.accent .v{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r);border:1px solid var(--line-2);background:#fff;color:var(--ink);font:500 14px var(--sans);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--teal-7)}
.btn .ic{width:18px;height:18px}
.btn.primary{background:var(--coral);border-color:var(--coral);color:#fff}
.btn.primary:hover{background:var(--coral-d);border-color:var(--coral-d)}
.btn.teal{background:var(--teal-9);border-color:var(--teal-9);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--mute)}
.btn.danger{color:var(--bad);border-color:#F0C4BF}
.btn.sm{height:32px;padding:0 10px;font-size:13px}
.btn.block{width:100%}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}
label{display:block;font-size:13px;font-weight:500;color:var(--mute);margin:0 0 6px}
.field{margin-bottom:14px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],input[type=tel],select,textarea{width:100%;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;font:400 15px var(--sans);color:var(--ink)}
textarea{height:auto;min-height:92px;padding:10px 12px;line-height:1.5;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal-7);box-shadow:0 0 0 3px rgba(20,122,122,.15)}
.hint{font-size:12px;color:var(--soft);margin-top:5px}
.check{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink);font-weight:400;margin:0 0 8px}
.check input{width:18px;height:18px;accent-color:var(--teal-7)}
.seg{display:inline-flex;background:#EEEBE3;border-radius:var(--r);padding:3px;gap:2px;flex-wrap:wrap}
.seg label{margin:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:6px 12px;border-radius:8px;font-size:13px;color:var(--mute);cursor:pointer;font-weight:500}
.seg input:checked+span{background:#fff;color:var(--teal-9);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line-2);background:#fff;font:500 13px var(--mono);color:var(--teal-9);cursor:pointer}
.chip:hover{border-color:var(--teal-7);background:var(--teal-1)}
.time{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.timer{display:flex;gap:10px;align-items:center;background:var(--teal-1);border-radius:var(--r);padding:8px 10px;margin-top:10px}
.timer .t{font:500 18px var(--mono);color:var(--teal-9);flex:1}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;letter-spacing:.01em;white-space:nowrap}
.tag-teal{background:var(--teal-1);color:#0B5552}.tag-coral{background:var(--coral-1);color:var(--coral-t)}
.tag-blue{background:#E2ECF8;color:#1D4C80}.tag-amber{background:#FBEFD2;color:#7A4E05}
.tag-purple{background:#ECE9FB;color:#43399A}.tag-gray{background:#ECEAE4;color:#4A4943}
.st{display:inline-block;font-size:12px;font-weight:500;padding:2px 9px;border-radius:20px;white-space:nowrap}
.st-requested{background:#ECE9FB;color:#43399A}.st-in_progress{background:var(--warn-1);color:var(--warn)}
.st-done{background:var(--teal-1);color:#0B5552}.st-invoiced{background:#ECEAE4;color:#4A4943}
.inv-draft{background:#ECEAE4;color:#4A4943}.inv-sent{background:#E2ECF8;color:#1D4C80}
.inv-paid{background:var(--ok-1);color:var(--ok)}.inv-overdue{background:var(--bad-1);color:var(--bad)}.inv-cancelled{background:#ECEAE4;color:#7C7B75;text-decoration:line-through}
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.item{display:flex;gap:14px;padding:14px 18px;border-top:1px solid var(--line);align-items:flex-start;color:var(--ink)}
.item:first-child{border-top:0}
a.item:hover{background:#FBFAF7}
.item .body{flex:1;min-width:0}
.item .t1{font-weight:600;font-size:15px}
.item .t2{font-size:13px;color:var(--mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.item .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--soft)}
.item .right{text-align:right;flex:none}
.item .right .num{font-size:15px;color:var(--teal-9)}
.date-col{width:46px;flex:none;text-align:center;line-height:1.1}
.date-col b{display:block;font:500 18px var(--mono);color:var(--teal-9)}
.date-col span{font-size:11px;text-transform:uppercase;color:var(--soft);letter-spacing:.05em}
.group-h{padding:10px 18px;background:#FAF8F3;font-size:12px;font-weight:600;color:var(--mute);border-top:1px solid var(--line);display:flex;justify-content:space-between}
.group-h:first-child{border-top:0}
table.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{text-align:left;font-size:12px;font-weight:600;color:var(--mute);padding:10px 12px;border-bottom:1px solid var(--line);background:#FAF8F3}
.t td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t .r{text-align:right}
.t input{height:36px;font-size:14px}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.flash{background:var(--ok-1);color:var(--ok);padding:10px 14px;border-radius:var(--r);margin-bottom:16px;display:flex;gap:8px;align-items:center;font-size:14px}
.err{background:var(--bad-1);color:var(--bad);padding:10px 14px;border-radius:var(--r);margin-bottom:16px;font-size:14px}
.offline,.queue{background:var(--warn-1);color:var(--warn);padding:10px 14px;border-radius:var(--r);margin-bottom:16px;display:flex;gap:8px;align-items:center;font-size:13px}
.empty{text-align:center;padding:40px 20px;color:var(--mute)}
.empty h3{color:var(--ink);margin-bottom:6px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters select,.filters input{width:auto;min-width:140px;height:38px;font-size:14px}
.bar{height:8px;background:#EEEBE3;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal-7);border-radius:4px}
.totals{margin-left:auto;max-width:340px}
.totals div{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.totals .grand{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:600;font-size:16px;color:var(--teal-9)}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;width:100%}
.auth .card{width:100%;max-width:400px;padding:28px}
.more a{display:flex;gap:12px;align-items:center;padding:15px 18px;border-top:1px solid var(--line);color:var(--ink);font-weight:500}
.more a:first-child{border-top:0}
.more .ic{color:var(--teal-7)}
.tabbar{display:none}
.hide-m{}
@media (max-width:900px){
 .g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr}
}
@media (max-width:760px){
 body{font-size:15px}
 .side{display:none}
 .main{padding:18px 14px calc(96px + env(safe-area-inset-bottom))}
 h1{font-size:21px}
 .g2{grid-template-columns:1fr}
 .card{padding:16px}
 .item{padding:13px 14px;gap:12px}
 .hide-m{display:none!important}
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:20;justify-content:space-around;align-items:center}
 .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--soft);padding:4px 10px;font-weight:500}
 .tabbar a.on{color:var(--teal-9)}
 .tabbar a.add{width:52px;height:52px;border-radius:16px;background:var(--coral);color:#fff;justify-content:center;margin-top:-22px;box-shadow:0 6px 16px rgba(242,112,90,.35)}
 .tabbar a.add .ic{width:26px;height:26px;stroke-width:2.2}
 .stickybar{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom));background:var(--bg);padding:10px 0;z-index:5}
 .filters select,.filters input{flex:1;min-width:0}
}
@media print{.side,.tabbar,.foot,.btn{display:none!important}.main{padding:0}}