:root{--sky:#3a6fd8;--hill:#4c9a2a;--title1:#0a5ad8;--title2:#3b8cf5;--win:#ece9d8;--paper:#fff;--ink:#000;--mute:#555;--link:#0b3fa8;--pane1:#7ba2e7;--pane2:#6375d6;--start:#3c9a3c;--task:#245edb;--ui:Tahoma,Verdana,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font:13px/1.5 var(--ui);color:var(--ink);background:linear-gradient(180deg,var(--sky) 0%,#8fb8f0 55%,var(--hill) 56%,#2f7a18 100%);background-attachment:fixed;padding:16px 16px calc(52px + env(safe-area-inset-bottom,0px));min-height:100%}
.win{max-width:960px;margin:0 auto;background:var(--win);border:1px solid #0831d9;border-radius:8px 8px 0 0;box-shadow:2px 3px 12px rgba(0,0,0,.4);overflow:hidden}
.tb{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 8px;color:#fff;font-weight:bold;background:linear-gradient(180deg,var(--title2),var(--title1) 45%,#0848c4);text-shadow:1px 1px #0a1e6e}
.tb span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb i{width:21px;height:21px;border:1px solid #fff;border-radius:3px;font-style:normal;display:grid;place-items:center;background:linear-gradient(#5a8ff5,#2559d6);font-size:12px}
.tb i.x{background:linear-gradient(#e88a6c,#c3401c)}
.menu{display:flex;gap:14px;padding:2px 8px;border-bottom:1px solid #c5c2b2;font-size:12px}
.addr{display:flex;gap:6px;align-items:center;padding:4px 8px;border-bottom:1px solid #c5c2b2}
.addr b{font-weight:normal;color:var(--mute)}
.addr div{flex:1;min-width:0;background:var(--paper);border:1px solid #7f9db9;padding:1px 4px;white-space:nowrap;overflow:hidden}
.body{display:grid;grid-template-columns:200px 1fr}
aside{background:linear-gradient(180deg,var(--pane1),var(--pane2));padding:10px}
.box{background:#d6dff7;border-radius:4px 4px 0 0;margin-bottom:10px;overflow:hidden}
.box h4{margin:0;padding:4px 8px;font-size:12px;background:linear-gradient(90deg,#fff,#c6d3f7);color:#215dc6}
.box a{display:block;padding:3px 10px;color:var(--link);text-decoration:none;font-size:12px}
.box a:hover,.box a.on{text-decoration:underline;font-weight:bold}
.box p{margin:0;padding:6px 10px;font-size:11px;color:var(--mute)}
main{background:var(--paper);padding:16px 20px;min-width:0;min-height:420px}
h1{font-size:20px;margin:0 0 4px;color:#215dc6;text-wrap:balance}
h2{font-size:15px;margin:18px 0 6px;border-bottom:1px solid #aac;color:#039}
p{margin:0 0 10px;max-width:68ch}.lead{color:var(--mute)}
.card{display:grid;grid-template-columns:1fr auto;gap:4px 16px;border:1px solid #c5c2b2;background:#fbfaf4;padding:10px 12px;margin:8px 0}
.card h3{margin:0;font-size:14px}.card .y{font-variant-numeric:tabular-nums;color:var(--mute);font-size:12px}
.card p{grid-column:1/-1;margin:0}
.card dl{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 16px;margin:4px 0 0;font-size:12px}
.card dl div{display:flex}.card dt{color:var(--mute)}.card dd{margin:0 0 0 4px;font-weight:bold}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
.tile{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid #c5c2b2;background:#fbfaf4;color:var(--link);text-decoration:none}
.tile:hover{background:#e8eefc;border-color:#7f9db9}
.ico{width:32px;height:32px;flex:none;border-radius:4px;display:grid;place-items:center;color:#fff;font-weight:bold;font-size:15px}
.status{display:flex;justify-content:space-between;gap:8px;padding:2px 8px;border-top:1px solid #c5c2b2;font-size:11px;color:var(--mute)}
.bar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:0 0 env(safe-area-inset-bottom,0px);height:calc(34px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,#3d86f4,var(--task) 15%,#1d4fc4);z-index:5}
.start{height:34px;padding:0 18px 0 12px;border:0;border-radius:0 12px 12px 0;color:#fff;font:italic bold 17px var(--ui);background:linear-gradient(180deg,#5ec15e,var(--start) 40%,#2b7d2b);text-shadow:1px 1px #1a4a1a;cursor:pointer}
.tasks{flex:1;min-width:0;display:flex}
.tasks span{color:#fff;font-size:12px;padding:5px 10px;border-radius:3px;background:#1e47b0;box-shadow:inset 1px 1px #0c2a7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.clock{color:#fff;font-size:12px;padding:0 10px;height:34px;display:flex;align-items:center;background:#0f8be4;border-left:1px solid #0a5ab0;font-variant-numeric:tabular-nums}
.sm{position:fixed;left:0;bottom:calc(34px + env(safe-area-inset-bottom,0px));width:260px;max-width:calc(100% - 16px);background:var(--paper);border:1px solid #0831d9;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:2px -2px 10px rgba(0,0,0,.4);z-index:6}
.sm header{padding:10px;color:#fff;font-weight:bold;font-size:14px;background:linear-gradient(180deg,#3b8cf5,#1a5ad6)}
.sm a{display:block;padding:7px 14px;color:var(--ink);text-decoration:none}
.sm a:hover,.sm a:focus{background:#316ac5;color:#fff}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:1px dotted #000;outline-offset:2px}
@media(max-width:640px){.body{grid-template-columns:1fr}aside{display:flex;flex-wrap:wrap;gap:8px}.box{flex:1 1 160px;margin:0}.menu{display:none}main{padding:14px}}