*{box-sizing:border-box}body{margin:0;background:var(--c);color:var(--ink);font:400 16px/1.45 var(--f)}
header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:8px 20px;background:var(--w);border-bottom:3px solid var(--acc)}
header img{height:72px;mix-blend-mode:multiply;display:block}
nav{display:flex;flex-wrap:wrap;gap:6px;flex:1}
nav a{padding:0 14px;min-height:44px;display:flex;align-items:center;border-radius:var(--r);color:var(--ink);text-decoration:none;font-weight:600}
nav a[aria-current]{background:var(--acc);color:#fff}
:focus-visible{outline:3px solid var(--o);outline-offset:2px}
.demo{background:var(--gd);color:var(--c);font-size:14px;padding:6px 16px;text-align:center}
main{max-width:1100px;margin:0 auto;padding:24px 20px 60px}
h1{font-size:clamp(28px,5vw,44px);line-height:1.1;letter-spacing:-.02em;margin:0 0 12px}h2{font-size:22px;margin:28px 0 12px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:16px 0}
.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--acc);border-radius:var(--r);padding:18px}
.stat b{display:block;font-size:28px}
button,.btn{font:600 16px var(--f);min-height:44px;padding:0 18px;border:0;border-radius:var(--r);background:var(--acc);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;margin:2px 4px 2px 0}
button.ghost{background:none;color:var(--ink);border:1.5px solid var(--ink)}
form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}
label{font-weight:600;font-size:14px;display:grid;gap:4px}label.chk{display:flex;align-items:center;gap:8px;min-height:44px}
input,select{font:inherit;min-height:44px;padding:0 10px;border:1.5px solid #17301e55;border-radius:var(--r);background:#fff}input[type=checkbox]{min-height:0;width:20px;height:20px}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%;background:#fff}th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:15px;vertical-align:top}th{background:var(--acc3)}
.b{display:inline-block;padding:2px 10px;border-radius:20px;font-size:13px;font-weight:600;background:#e8e3d6}.b.g{background:var(--g3);color:var(--g)}.b.o{background:var(--o3);color:var(--o2)}.b.r{background:#f6d9d2;color:#9b2c12}
.msg{padding:12px 16px;border-radius:var(--r);margin-bottom:16px;font-weight:600}.msg.ok{background:var(--g3);color:var(--g)}.msg.er{background:#f6d9d2;color:#9b2c12}
.tl{display:flex;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:0}.tl li{font-size:12px;padding:3px 9px;border-radius:20px;background:#e8e3d6;color:var(--mut)}.tl li.on{background:var(--acc);color:#fff}
.flow{display:flex;flex-wrap:wrap;gap:8px}.flow span{padding:8px 12px;background:#fff;border:1.5px solid var(--g);border-radius:var(--r);font-weight:600;font-size:14px}.flow span:nth-child(n+5){border-color:var(--o2)}
.hero{display:flex;flex-wrap:wrap;gap:24px;align-items:center}.hero img{width:min(320px,100%);mix-blend-mode:multiply}.hero>div{flex:1;min-width:260px}
.empty,.mut,small{color:var(--mut)}
@media(max-width:600px){main{padding:16px 12px}header img{height:56px}}