:root{color-scheme:light;--bg:#f3f5f1;--card:#fff;--ink:#16211b;--mute:#5d6b63;--line:#e1e6df;--line2:#c9d1c8;--green:#1f7a4d;--green2:#2fa36b;--amber:#c7861a;--red:#c2412d;--soft:#e8f2ec}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Manrope,system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}
a{color:var(--green)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
button{font:inherit;cursor:pointer;color:var(--ink)}
button:disabled{opacity:.55;cursor:default}
.hidden{display:none!important}

/* forms */
label{font-size:13px;font-weight:600;color:var(--mute);display:block;margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:10px;font:inherit;background:#fff!important;color:#16211b!important;-webkit-text-fill-color:#16211b;caret-color:#16211b}
input::placeholder,textarea::placeholder{color:#8a968f;-webkit-text-fill-color:#8a968f;opacity:1}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green2);border-color:transparent}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset}
textarea{min-height:110px;resize:vertical}
.btn{background:var(--green);color:#fff;border:0;border-radius:10px;padding:12px 18px;font-weight:700}
.btn:hover:not(:disabled){background:#18643f}
.btn.full{width:100%;margin-top:20px}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn.red{background:var(--red)}.btn.red:hover:not(:disabled){background:#a5341f}
.ghost{background:#fff;border:1px solid var(--line2);border-radius:8px;padding:8px 14px;color:var(--ink);font-weight:600}
.ghost:hover:not(:disabled){background:var(--soft)}
.ghost.sm{padding:5px 10px;font-size:12px}
.msg{font-size:13px;margin-top:10px;min-height:18px}
.msg.ok{color:var(--green)}.msg.bad{color:var(--red)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}

/* auth */
#auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.hero{background:linear-gradient(160deg,#123d2a,#1f7a4d);color:#eaf5ee;padding:56px;display:flex;flex-direction:column;justify-content:space-between}
.logo{font-weight:800;font-size:22px;letter-spacing:-.5px;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.logo i{width:30px;height:30px;border-radius:9px;background:#b9f0cf;display:inline-block;position:relative}
.logo i:after{content:"";position:absolute;inset:8px;border-radius:50%;border:3px solid #1f7a4d}
.hero h1{font-size:40px;line-height:1.1;letter-spacing:-1px;max-width:460px}
.hero p{opacity:.8;max-width:440px;line-height:1.6;margin-top:16px}
.hero .pts{display:grid;gap:14px;margin-top:32px}
.hero .pts div{display:flex;gap:12px;align-items:flex-start;font-size:14px;opacity:.9}
.hero .pts b{background:rgba(255,255,255,.12);border-radius:8px;min-width:28px;height:28px;display:grid;place-items:center;font-size:13px}
.authform{display:flex;align-items:center;justify-content:center;padding:40px}
.authform>div{width:100%;max-width:380px}
.authform h2{font-size:26px;letter-spacing:-.5px}
.sub{color:var(--mute);margin:6px 0 20px;font-size:14px}

/* app shell */
header{background:#fff;border-bottom:1px solid var(--line);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:5}
header .logo{font-size:18px;color:var(--ink)}
header .logo i{background:var(--soft)}
nav.top{display:flex;gap:4px;flex-wrap:wrap}
nav.top a{text-decoration:none;padding:8px 13px;border-radius:8px;font-weight:600;color:var(--mute);font-size:14px}
nav.top a.act{background:var(--soft);color:var(--green)}
.badge{background:var(--red);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;margin-left:4px}
.who{display:flex;gap:12px;align-items:center;font-size:14px}
.logout{background:var(--red);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:700}
.logout:hover{background:#a5341f}
main{max-width:1180px;margin:0 auto;padding:28px}
.title{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.title h2{font-size:28px;letter-spacing:-.6px}
.title p{color:var(--mute);font-size:14px;margin-top:4px}

/* cards */
.tag{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.ok{background:#dff3e7;color:var(--green)}.warn{background:#fbeed3;color:var(--amber)}.bad{background:#f8dfda;color:var(--red)}.neutral{background:#eceeea;color:var(--mute)}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:1.5fr 1fr}.g2e{grid-template-columns:1fr 1fr}
.mt{margin-top:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;min-width:0}
.card h3{font-size:15px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card h3 small{font-weight:500;color:var(--mute);font-size:12px}
.kpi .l{font-size:12px;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.kpi .v{font-size:28px;font-weight:800;margin-top:8px;letter-spacing:-.5px}
.kpi .v small{font-size:14px;color:var(--mute);font-weight:600}
.kpi .d{font-size:13px;margin-top:6px;color:var(--mute)}
.bar{height:12px;background:#edf0ec;border-radius:99px;overflow:hidden;margin:12px 0 8px;position:relative}
.bar>div{height:100%;border-radius:99px;position:absolute;left:0;top:0}
.row{display:flex;justify-content:space-between;font-size:13px;color:var(--mute)}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;color:var(--mute);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.slots{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:6px}
.slots div{height:26px;border-radius:4px;background:#edf0ec}
.slots .on{background:var(--green2)}
.hrs{display:grid;grid-template-columns:repeat(24,1fr);font-size:10px;color:var(--mute);margin-top:4px}
.buy{display:flex;gap:10px;align-items:flex-end;margin-top:14px;flex-wrap:wrap}
.buy input{width:140px}
.note{font-size:13px;color:var(--mute);line-height:1.55}
.formula{background:var(--soft);border-radius:10px;padding:14px;font-size:13px;line-height:1.7;margin-bottom:14px}
.empty{padding:30px;text-align:center;color:var(--mute);font-size:14px}
.tg{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#229ed9,#1b7fb3);color:#fff;border-radius:14px;padding:18px;text-decoration:none}
.tg b{font-size:17px}.tg span{opacity:.85;font-size:13px}
.tg .ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:22px;flex:none}
.issue{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px}
.issue .h{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.issue p{font-size:14px;margin-top:8px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.issue .m{font-size:12px;color:var(--mute);margin-top:8px}
.issue .reply{background:var(--soft);border-radius:8px;padding:10px;font-size:13px;margin-top:10px}
.issue .acts{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;z-index:50;box-shadow:0 6px 24px rgba(0,0,0,.2)}
.modal-bg{position:fixed;inset:0;background:rgba(10,20,15,.45);display:grid;place-items:center;z-index:40;padding:16px}
.modal{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:520px;max-height:90vh;overflow:auto}
.modal h3{font-size:18px;margin-bottom:4px}
.modal .acts{justify-content:flex-end;margin-top:20px}
.loading{padding:60px;text-align:center;color:var(--mute)}

@media(max-width:900px){
  #auth{grid-template-columns:1fr}.hero{padding:32px}.hero h1{font-size:30px}
  .g4{grid-template-columns:1fr 1fr}.g2,.g2e{grid-template-columns:1fr}main{padding:16px}
  header{flex-wrap:wrap;padding:12px 16px}.who{margin-left:auto}
}
@media(max-width:520px){.g4{grid-template-columns:1fr}.frow,.frow3{grid-template-columns:1fr}}