:root{--bg:#eef2f1;--panel:#fff;--ink:#12242a;--mute:#5d6f74;--line:#d3dcdb;--acc:#1f6f5b;--accink:#fff;--warn:#9a6414;--bad:#a8321f;--soft:#e0eeea;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root{--bg:#0f1a1d;--panel:#16262a;--ink:#e6efee;--mute:#93a7ab;--line:#2a3e43;--acc:#4fb79a;--accink:#06201a;--warn:#e0a84a;--bad:#ff8a73;--soft:#1d3a36}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Tamil",sans-serif}
header{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
header h1{font-size:16px;margin:0 8px 0 0;font-weight:700}
nav{display:flex;gap:6px;flex-wrap:wrap;margin-right:auto}
.tab{border:1px solid var(--line);background:transparent;color:var(--ink);padding:8px 14px;border-radius:8px;font:600 14px inherit;font-family:inherit;cursor:pointer}
.tab[aria-selected="true"]{background:var(--acc);color:var(--accink);border-color:var(--acc)}
.tab small{font-weight:400;opacity:.8;margin-left:4px}
.live{width:10px;height:10px;border-radius:50%;background:var(--warn)}
.live.on{background:var(--acc)}
main{max-width:1040px;margin:0 auto;padding:16px;display:grid;gap:16px}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:800px){.grid.two{grid-template-columns:1fr 1fr}}
section{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0}
h2{font-size:15px;margin:0 0 10px;font-weight:700}
h3{font-size:14px;margin:14px 0 6px}
input,select,textarea,button.b{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 10px;min-width:0}
textarea{width:100%;min-height:90px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
button.b{cursor:pointer;font-weight:600}
button.b:disabled{opacity:.6;cursor:wait}
button.p{background:var(--acc);color:var(--accink);border-color:var(--acc)}
button.d{color:var(--bad)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row>input{flex:1 1 150px}
.q{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.q:first-of-type{border-top:0}
.q .n{width:30px;color:var(--mute);font-weight:600}
.q .who{flex:1 1 150px;min-width:0}.q .who span{color:var(--mute);font-size:13px;display:block}
.tag{font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--soft);color:var(--acc);white-space:nowrap}
.tag.w{color:var(--warn);background:transparent;border:1px solid var(--warn)}
.mute{color:var(--mute)}
.empty{color:var(--mute);padding:6px 0}
.hist{border-top:1px solid var(--line);padding:8px 0;font-size:14px}
.hist:first-of-type{border-top:0}
.rx{display:grid;gap:8px;grid-template-columns:2fr 1fr 1.6fr .8fr;position:relative}
@media(max-width:620px){.rx{grid-template-columns:1fr 1fr}.rx .rem{grid-column:1/-1}}
.rem{position:relative}
.rem input{width:100%}
#sug{position:absolute;left:0;top:100%;width:min(100%,380px);background:var(--panel);border:1px solid var(--line);border-radius:8px;z-index:4;display:none;box-shadow:0 6px 18px rgba(0,0,0,.18);margin-top:2px}
#sug div{padding:8px 10px;cursor:pointer}
#sug div.on,#sug div:hover{background:var(--acc);color:var(--accink)}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:7px 6px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
th{font-weight:600;color:var(--mute);border-top:0}
.hint{font-size:13px;color:var(--mute);margin-top:10px}
kbd{font:600 12px inherit;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--bg)}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;display:none;z-index:9;max-width:90vw}
.amt{width:110px}
.vit{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.vit label{font-size:13px;color:var(--mute);display:grid;gap:3px}
details{margin:0 0 12px}
summary{cursor:pointer;font-weight:600}
.bar{flex:1;height:8px;border-radius:4px;background:var(--soft)}
.bar i{display:block;height:8px;border-radius:4px;background:var(--acc)}
.login{max-width:360px;margin:8vh auto 0}
.login form{display:grid;gap:10px}
.err{color:var(--bad);font-size:14px;min-height:20px}
.prev{max-width:100%;max-height:200px;border-radius:8px;border:1px solid var(--line);margin-top:8px}
