:root{color-scheme:dark;--bg:#07111f;--panel:#0d1b2d;--panel2:#10243b;--line:#203650;--text:#f7fbff;--muted:#92a8bd;--cyan:#5eead4;--blue:#5ca9ff;--amber:#fbbf24;--orange:#fb923c;--red:#fb7185;--shadow:0 24px 70px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);font-size:16px}
body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 78% -10%,rgba(40,126,190,.25),transparent 35%),linear-gradient(160deg,#07111f 0%,#081522 55%,#07111f 100%);color:var(--text)}
button,input{font:inherit}
button{touch-action:manipulation}
.shell{width:min(980px,100%);margin:auto;padding:clamp(20px,4vw,48px) clamp(16px,4vw,38px) calc(36px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.eyebrow{margin:0 0 5px;color:var(--cyan);font-size:.76rem;font-weight:800;letter-spacing:.16em}
h1,h2,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(1.6rem,5vw,2.45rem);letter-spacing:-.04em}h2{margin-bottom:0;font-size:1.05rem}
.source-state{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.88rem;white-space:nowrap}.dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.dashboard{display:grid;grid-template-columns:minmax(280px,1.15fr) minmax(280px,.85fr);gap:16px;margin-bottom:16px}
.leave-card,.metric,.panel{border:1px solid var(--line);background:linear-gradient(145deg,rgba(19,43,69,.96),rgba(10,24,41,.96));box-shadow:var(--shadow)}
.leave-card{position:relative;overflow:hidden;min-height:302px;border-radius:26px;padding:31px;display:flex;flex-direction:column;justify-content:center}.leave-card:after{content:"";position:absolute;width:260px;height:260px;border:48px solid rgba(94,234,212,.07);border-radius:50%;right:-130px;top:-95px}
.card-label{position:relative;z-index:1;margin:0;color:var(--muted);font-size:.8rem;font-weight:800;letter-spacing:.18em}.leave-time{position:relative;z-index:1;margin:2px 0 0;font-size:clamp(4rem,12vw,7rem);font-weight:800;line-height:1;letter-spacing:-.075em}.arrival-copy{position:relative;z-index:1;color:var(--muted);font-size:1.05rem}.arrival-copy strong{color:var(--text)}
.status-pill{position:relative;z-index:1;width:max-content;max-width:100%;margin-top:18px;padding:9px 13px;border-radius:99px;background:#17283a;color:var(--muted);font-size:.88rem;font-weight:750}.status-pill[data-level="normal"]{background:rgba(94,234,212,.13);color:var(--cyan)}.status-pill[data-level="moderate"]{background:rgba(251,191,36,.14);color:var(--amber)}.status-pill[data-level="heavy"]{background:rgba(251,146,60,.14);color:var(--orange)}.status-pill[data-level="severe"]{background:rgba(251,113,133,.14);color:var(--red)}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px}.metric{min-height:143px;padding:22px;border-radius:20px;display:flex;flex-direction:column;justify-content:space-between}.metric span{color:var(--muted);font-size:.9rem}.metric strong{font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:-.045em}
.panel{margin-top:16px;border-radius:22px;padding:clamp(20px,4vw,28px)}.panel-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px}.panel-heading>span{color:var(--muted);font-size:.82rem;text-align:right}
form{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}label{color:#bfd0df;font-size:.88rem;font-weight:700}
input{width:100%;min-height:50px;border:1px solid #2b4560;border-radius:12px;background:#081625;color:var(--text);padding:0 14px;outline:none;transition:border .2s,box-shadow .2s}input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(94,234,212,.13)}input::placeholder{color:#63798e}
.input-action{display:flex;gap:8px}.location-button{flex:0 0 50px;border:1px solid #2b4560;border-radius:12px;background:#10243b;color:var(--cyan);font-size:1.5rem;cursor:pointer}.location-button:hover{background:#16314f}
.input-suffix{position:relative}.input-suffix input{padding-right:52px}.input-suffix span{position:absolute;right:14px;top:50%;translate:0 -50%;color:var(--muted);font-size:.85rem;pointer-events:none}
.fixed-setting{min-height:72px;border:1px solid #2b4560;border-radius:14px;background:#081625;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:5px}.fixed-setting.full{grid-column:1/-1}.fixed-setting span{color:var(--muted);font-size:.8rem}.fixed-setting strong{font-size:1rem;line-height:1.4}
.secondary{width:100%;min-height:50px;border:1px solid #2b4560;border-radius:12px;background:#10243b;color:var(--text);padding:0 14px;font-weight:750;cursor:pointer}.secondary:hover{border-color:var(--cyan)}.secondary:disabled{opacity:.65;cursor:default}
.primary{grid-column:1/-1;min-height:54px;margin-top:3px;border:0;border-radius:14px;padding:0 18px;background:linear-gradient(110deg,var(--cyan),#38bdf8);color:#04131e;font-weight:850;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:0 12px 28px rgba(56,189,248,.18)}.primary:hover{filter:brightness(1.05)}.primary:disabled{cursor:wait;opacity:.62}
.error{margin:16px 0 0;padding:13px 15px;border:1px solid rgba(251,113,133,.35);border-radius:12px;background:rgba(251,113,133,.09);color:#fecdd3;line-height:1.5}
.monitor-note{margin:16px 0 0;color:var(--muted);font-size:.85rem;line-height:1.5}
.details dl{display:grid;grid-template-columns:1fr 1fr;margin:0;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}.details dl div{padding:17px;background:#0a1929}.details dt{color:var(--muted);font-size:.82rem}.details dd{margin:6px 0 0;font-size:1.15rem;font-weight:750}
footer{padding:25px 4px 0;color:#63798e;text-align:center;font-size:.8rem;line-height:1.5}
@media(max-width:700px){.dashboard{grid-template-columns:1fr}.leave-card{min-height:270px}.metrics{gap:10px}.metric{min-height:118px;padding:17px}.topbar{align-items:flex-start}.source-state{margin-top:8px}.panel-heading{align-items:flex-start}form{grid-template-columns:1fr}.field,.field.full,.primary{grid-column:1}.details dl{grid-template-columns:1fr}}
@media(max-width:390px){.source-state span:last-child{display:none}.leave-card{padding:24px}.leave-time{font-size:3.75rem}.metric strong{font-size:1.45rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}