:root{--bg:#eef5f8;--tint:#d3e8f1;--card:#fff;--ink:#10303d;--mute:#5b7886;--line:#d5e3ea;--water:#0a6a8a;--water-d:#07506a;--on:#fff;--rope:#d9480f;--ok:#17714a;--hl:#fff1b8;--shadow:0 1px 2px rgba(16,48,61,.06),0 6px 18px rgba(16,48,61,.07);color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#08202b;--tint:#0d3548;--card:#0f2f3d;--ink:#e8f4f8;--mute:#93b4c1;--line:#1f4a5c;--water:#4cc3e0;--water-d:#7fd6ea;--on:#06222d;--rope:#ff8a5c;--ok:#5fd09a;--hl:#4d3f00;--shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3);color-scheme:dark}}
[hidden]{display:none!important}*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.6 "Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif}
a{color:var(--water);text-underline-offset:2px}a:hover{color:var(--water-d)}
/* header */
header{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2rem;padding:.7rem max(1.25rem,calc((100% - 920px)/2 + 1.25rem));background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;padding-right:2rem;font-weight:700;font-size:1.45rem;letter-spacing:.01em;color:var(--ink);text-decoration:none}
.mark{display:block;width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 2px var(--line)}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
nav a{padding:.4rem .75rem;border-radius:999px;color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:500}
nav a:hover{background:var(--bg)}nav a.on{background:var(--water);color:var(--on)}
nav button{margin-left:.4rem;padding:.35rem .9rem}
/* hero */
.hero{position:relative;height:180px;overflow:hidden;background:var(--water-d)}
.hero img{display:block;width:100%;height:100%;object-fit:cover}
.hero div{position:absolute;z-index:1;bottom:2.4rem;left:max(1.25rem,calc((100% - 920px)/2 + 1.25rem));right:1.25rem;color:#fff}
.hero h2{margin:0 0 .15rem;font-size:1.7rem;line-height:1.2;font-weight:700}.hero p{margin:0;opacity:.92}
/* layout */
main{width:100%;max-width:920px;margin:0 auto;padding:1.75rem 1.25rem 3rem;flex:1}
h1{font-size:1.65rem;line-height:1.25;margin:.1rem 0 .9rem;letter-spacing:-.01em}
h2{font-size:1.15rem;margin:1.8rem 0 .7rem}
p{margin:.5rem 0}.mute{color:var(--mute);font-size:.93rem}.grow{flex:1}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.4rem 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}@media(max-width:620px){.grid{grid-template-columns:1fr}.hero h2{font-size:1.3rem}}
footer{padding:1.2rem 1.25rem;text-align:center;font-size:.85rem;color:var(--mute);border-top:1px solid var(--line);background:var(--card)}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.25rem;margin:.8rem 0;box-shadow:var(--shadow)}
.card.item{display:flex;gap:1rem;align-items:flex-start}
.thumb{flex:none;width:76px;height:76px;border-radius:10px;object-fit:cover;background:var(--tint);display:block}
.thumb.ph{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 14c3-3 5 3 8 0s5 3 8 0 4 1 6-1M5 21c3-3 5 3 8 0s5 3 8 0 4 1 6-1' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/62% no-repeat,linear-gradient(135deg,#07506a,#3fb6d8)}
.cbody{flex:1;min-width:0}.cbody>a:first-child{font-size:1.1rem;text-decoration:none}.cbody>a:first-child:hover{text-decoration:underline}
@media(max-width:480px){.thumb{width:58px;height:58px}.card.item{gap:.75rem}}
.card p{margin:.4rem 0 0}
/* forms */
label{display:block;margin:.8rem 0 .25rem;font-weight:600;font-size:.9rem}
input,select,textarea{width:100%;padding:.6rem .75rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--mute)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--water);box-shadow:0 0 0 3px color-mix(in srgb,var(--water) 25%,transparent)}
input[type=checkbox]{width:auto;margin:.25rem .6rem 0 0}.chk{font-weight:400;display:flex;align-items:flex-start;font-size:.95rem}
input[type=color]{padding:.2rem;height:2.6rem}
form.card{padding:1.25rem 1.4rem}
/* buttons */
button,.btn{display:inline-block;background:var(--water);color:var(--on);border:1px solid var(--water);border-radius:8px;padding:.55rem 1.1rem;font:inherit;font-weight:600;font-size:.95rem;line-height:1.3;cursor:pointer;text-decoration:none;transition:background .15s,transform .05s}
button:hover,.btn:hover{background:var(--water-d);border-color:var(--water-d);color:var(--on)}button:active{transform:translateY(1px)}
button.ghost{background:transparent;color:var(--water)}button.ghost:hover{background:color-mix(in srgb,var(--water) 12%,transparent);color:var(--water-d)}
button.warn{background:var(--rope);border-color:var(--rope);color:#fff}button.warn:hover{filter:brightness(.92);background:var(--rope);border-color:var(--rope)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
:focus-visible{outline:3px solid var(--rope);outline-offset:2px}
/* messages, tags */
.msg{padding:.7rem 1rem;border-left:4px solid var(--rope);background:var(--card);border-radius:0 8px 8px 0;margin:.9rem 0;box-shadow:var(--shadow)}.msg.ok{border-color:var(--ok)}
.tag{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.02em;border:1px solid var(--line);border-radius:999px;padding:.05rem .6rem;color:var(--mute);vertical-align:middle;background:var(--bg)}
.tag.ok{color:var(--ok);border-color:var(--ok);background:transparent}
.tag.amend,.amendbox{background:var(--hl);color:var(--ink);border-color:var(--rope)}
.amendbox{border:2px solid var(--rope);border-radius:10px;padding:.8rem 1.1rem;margin:.9rem 0}
/* progress */
.pool{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.lane{position:relative;padding:.8rem 1.1rem .8rem 3.4rem;border-top:1px solid var(--line)}.lane:first-child{border-top:0}
.lane i{position:absolute;left:1rem;top:.85rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--bg);color:var(--mute);font-style:normal;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.lane.done i{background:var(--ok);color:#fff}
.track{height:8px;background:var(--bg);border-radius:4px;margin-top:.45rem;position:relative;overflow:hidden}
.track span{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--water)}.lane.done .track span{background:var(--ok)}
@media(prefers-reduced-motion:no-preference){.track span{transition:width .6s ease}}
.pr{margin:.3rem 0 0;padding-left:1.1rem;font-size:.9rem;color:var(--ink)}.okc{color:var(--ok)}
details summary{cursor:pointer;margin-top:.4rem}
/* tables */
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
th{background:var(--bg);text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding:.65rem .8rem;border-bottom:1px solid var(--line)}
td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line);font-size:.93rem;vertical-align:top}tr:last-child td{border-bottom:0}
.cimg{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:10px;margin:.7rem 0 1rem;box-shadow:var(--shadow)}