:root{--o:#F77F00;--g:#009E60;--gd:#00724a;--bg:#f6f8f5;--tx:#16221b;--bd:#d8e2da}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--tx)}
header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#fff;flex-wrap:wrap}header img{height:60px}header div{flex:1;min-width:180px}header small{display:block;color:#5b6b61;font-size:.8rem}
.bar{height:6px;background:linear-gradient(90deg,var(--o) 33%,#fff 33% 66%,var(--g) 66%)}
nav{background:var(--g);display:flex;overflow-x:auto}nav a{color:#fff;padding:12px 16px;text-decoration:none;white-space:nowrap}nav a.on,nav a:hover{background:var(--o)}
main{max-width:1000px;margin:0 auto;padding:16px}.narrow{max-width:420px}
.card{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:14px}.card h2{margin:0 0 10px;font-size:1.1rem;color:var(--gd)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.stat b{display:block;font-size:1.9rem;color:var(--o)}
label{display:block;margin:8px 0;font-size:.9rem;color:#4a5a50}input,select{width:100%;padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;margin-top:4px}
button,.btn{background:var(--g);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}button:hover,.btn:hover{background:var(--o)}
table{width:100%;border-collapse:collapse;font-size:.92rem}th,td{padding:8px;border-bottom:1px solid var(--bd);text-align:left}th{background:#eef5f0}.wrap{overflow-x:auto}
.tag{padding:2px 9px;border-radius:12px;font-size:.78rem}.ok{background:#dff3e8}.warn{background:#fdebd0}.bad{background:#fbe0dc}.err{color:#b3261e}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;margin-bottom:22px}.bars i{flex:1;background:var(--g);border-radius:4px 4px 0 0;position:relative;min-height:3px}.bars i:after{content:attr(data-d);position:absolute;top:100%;left:0;right:0;text-align:center;font-size:.7rem;color:#5b6b61;font-style:normal}
footer{text-align:center;color:#5b6b61;font-size:.8rem;padding:16px}:focus-visible{outline:3px solid var(--o)}

body.lg{background:linear-gradient(160deg,#eaf6ee,#fff 55%,#fff1e0);min-height:100vh}
.lgwrap{max-width:880px;margin:5vh auto;display:grid;grid-template-columns:1fr 1.15fr;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 14px 44px rgba(0,60,30,.16)}
.lgwrap aside{background:linear-gradient(160deg,var(--g),var(--gd));color:#fff;padding:32px 28px;display:flex;flex-direction:column;gap:8px}
.lgwrap aside img{width:92px;background:#fff;border-radius:14px;padding:8px}.lgwrap aside h1{margin:10px 0 0;font-size:1.6rem}.lgwrap aside p{margin:0}.lgwrap aside ul{padding-left:18px;margin:8px 0}.lgwrap aside small{margin-top:auto;opacity:.85}
.lgwrap section{padding:32px 30px}.lgwrap h2{margin:0 0 14px;color:var(--gd)}.lgwrap form>button{width:100%;margin-top:10px;padding:12px}
.pw{position:relative}.pw input{padding-right:84px}.eye{position:absolute;right:6px;top:29px;background:transparent;color:var(--gd);padding:6px 10px;font-size:.82rem}.eye:hover{background:#eef5f0}
.lk{display:block;text-align:right;font-size:.88rem;color:var(--gd);margin-top:2px}.hint{color:#5b6b61;font-size:.9rem;margin:0 0 6px}
.demo{margin-top:18px;padding-top:12px;border-top:1px dashed var(--bd)}.demo small{display:block;color:#5b6b61;margin-bottom:8px}.demo button{background:#fdebd0;color:#7a4300;padding:5px 12px;font-size:.82rem;margin:0 4px 6px 0;border-radius:14px}.demo button:hover{background:var(--o);color:#fff}
.msg{padding:10px 12px;border-radius:8px;margin-bottom:10px;font-size:.9rem}.msg.e{background:#fbe0dc;color:#8c1d14}.msg.s{background:#dff3e8;color:#0a4d30}
@media(max-width:700px){.lgwrap{grid-template-columns:1fr;margin:0;border-radius:0;box-shadow:none}.lgwrap aside{padding:18px 20px}.lgwrap aside ul,.lgwrap aside p{display:none}.lgwrap aside img{width:64px}.lgwrap section{padding:22px 20px}}