:root{
  --bg:#0f1115; --bg2:#171a21; --card:#1c2029; --card2:#232833; --line:#2c3240;
  --txt:#e9edf5; --muted:#909aad; --accent:#ffb02e; --accent2:#ff7a2f;
  --green:#2ecc8f; --red:#ff5d6c; --blue:#4aa8ff; --purple:#a97bff;
  --r:16px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f4f6fa; --bg2:#ffffff; --card:#ffffff; --card2:#f0f3f9; --line:#e2e7f0;
         --txt:#111827; --muted:#6b7789; --accent:#e8901b; --accent2:#ef6a1f; }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:var(--bg); color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:15px}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
#app{max-width:760px; margin:0 auto; padding:0 12px}

#topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 4px 8px}
.brand{display:flex; gap:10px; align-items:center}
.logo{font-size:24px}
.t1{font-weight:700; font-size:17px; line-height:1.1}
.t2{font-size:12px; color:var(--muted)}
.who{font-size:12px; color:var(--muted); max-width:130px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

#tabs{position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; justify-content:space-around;
  background:color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)); max-width:760px; margin:0 auto}
#tabs button{background:none; border:0; color:var(--muted); font-size:10.5px; font-family:inherit; display:flex; flex-direction:column; gap:2px; align-items:center; padding:4px 8px; border-radius:10px; flex:1}
#tabs button span{font-size:19px; line-height:1}
#tabs button.active{color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent)}

main{padding-bottom:18px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:12px}
.card h3{margin:0 0 10px; font-size:14px; color:var(--muted); font-weight:600; letter-spacing:.02em; text-transform:uppercase}
.grid{display:grid; gap:10px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px}
.kpi .v{font-size:20px; font-weight:800; letter-spacing:-.02em; white-space:nowrap}
.kpi .l{font-size:11.5px; color:var(--muted); margin-top:2px}
.kpi.green .v{color:var(--green)} .kpi.red .v{color:var(--red)} .kpi.blue .v{color:var(--blue)} .kpi.acc .v{color:var(--accent)}

.row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.muted{color:var(--muted)} .small{font-size:12px}
.sec-title{display:flex; justify-content:space-between; align-items:center; margin:16px 2px 8px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700}

button.btn{background:var(--card2); color:var(--txt); border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-family:inherit; font-size:14px; font-weight:600}
button.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#20160a; border:0}
button.btn.sm{padding:7px 10px; font-size:12.5px}
button.btn.wide{width:100%}
button.btn.danger{color:var(--red)}
.fab{position:fixed; right:16px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:15; width:54px; height:54px; border-radius:50%; border:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#20160a; font-size:28px; font-weight:300; box-shadow:0 8px 24px rgba(255,150,40,.35); max-width:760px}

input,select,textarea{width:100%; background:var(--bg2); color:var(--txt); border:1px solid var(--line); border-radius:12px; padding:11px 12px; font-size:15px; font-family:inherit}
input:focus,select,textarea:focus{outline:none; border-color:var(--accent)}
label{display:block; font-size:12px; color:var(--muted); margin:10px 0 5px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.item{display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0; padding-bottom:0}
.item .dot{width:6px; border-radius:3px; background:var(--line); flex:0 0 6px}
.item.high .dot{background:var(--red)} .item.normal .dot{background:var(--blue)} .item.low .dot{background:var(--muted)}
.item.done .title{text-decoration:line-through; color:var(--muted)}
.item .title{font-weight:600; line-height:1.3}
.item .meta{font-size:12px; color:var(--muted); margin-top:3px}
.item .amt{font-weight:700; white-space:nowrap}
.plus{color:var(--green)} .minus{color:var(--red)}

.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; padding:7px 13px; border-radius:20px; background:var(--card2); border:1px solid var(--line); font-size:13px; color:var(--muted)}
.chip.active{background:color-mix(in srgb,var(--accent) 18%,transparent); border-color:var(--accent); color:var(--accent); font-weight:600}

.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal .dow{text-align:center; font-size:11px; color:var(--muted); padding:4px 0}
.cal .day{aspect-ratio:1; border-radius:11px; background:var(--card2); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:13px; position:relative; border:1px solid transparent}
.cal .day.other{opacity:.3}
.cal .day.today{border-color:var(--accent)}
.cal .day.sel{background:color-mix(in srgb,var(--accent) 22%,transparent); border-color:var(--accent); font-weight:700}
.cal .day .d{position:absolute; bottom:5px; display:flex; gap:2px}
.cal .day .d i{width:4px; height:4px; border-radius:50%; background:var(--blue); display:block}
.monthbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.monthbar button{background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:10px; width:34px; height:34px; font-size:16px}
.monthbar b{font-size:15px}

.badge{font-size:11px; padding:3px 8px; border-radius:20px; background:var(--card2); color:var(--muted); border:1px solid var(--line)}
.badge.green{color:var(--green); border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.badge.red{color:var(--red); border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.badge.acc{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent)}

#sheet{position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center}
#sheet.hidden{display:none}
.sheet-back{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.sheet-card{position:relative; width:100%; max-width:760px; max-height:88vh; overflow-y:auto; background:var(--bg2); border-radius:22px 22px 0 0; padding:16px 16px calc(20px + env(safe-area-inset-bottom)); animation:up .22s ease}
@keyframes up{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
.sheet-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.sheet-head b{font-size:16px}
.sheet-head button{background:none; border:0; color:var(--muted); font-size:20px}
#loading{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:60; color:var(--muted)}
#loading.hidden{display:none}
#toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(88px + env(safe-area-inset-bottom)); background:#2b3140; color:#fff; padding:10px 16px; border-radius:12px; font-size:13px; z-index:70; max-width:90%; text-align:center}
#toast.hidden{display:none}
.empty{color:var(--muted); font-size:13px; text-align:center; padding:18px 0}
.bar{height:8px; border-radius:5px; background:var(--card2); overflow:hidden; margin-top:6px}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2))}
.link{color:var(--blue); text-decoration:none; font-size:13px}