:root{--bg:#FFFFFF;--panel:#F4F7F2;--line:#DCE3D8;--ink:#161B16;--mute:#5B685B;--green:#76B900;--green-ink:#4E7A00;--green-soft:#EAF5D6}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Segoe UI","Helvetica Neue",Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
header{display:flex;align-items:center;gap:16px;padding:14px 40px;border-bottom:2px solid var(--green)}
header .who{font-size:15px;font-weight:700}
header .who span{color:var(--green-ink)}
header .tool{margin-left:auto;padding:6px 14px;border:1px solid var(--green);border-radius:8px;color:var(--green-ink);font-weight:700;background:var(--green-soft)}
header .tool:hover{background:var(--green);color:#fff}
header .brand{font-weight:700;font-size:17px;letter-spacing:-.01em}
header .adm{font-size:13px;color:var(--mute);margin-left:14px}
header .adm a{color:var(--green-ink);font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.hero{padding:60px 0 36px;display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 14px;letter-spacing:-.015em}
.hero h1 span{color:var(--green-ink)}
.hero p{color:var(--mute);margin:0 0 8px;max-width:52ch;font-size:17px}
.hero .q{font-size:15px;margin-top:18px}
.hero .q em{font-style:normal;color:var(--mute)}
.intro{border:1px solid var(--green);border-radius:14px;background:var(--green-soft);padding:20px 22px}
.intro h2{margin:0 0 4px;font-size:16px}
.intro p{margin:0 0 14px;color:#2A322A;font-size:14px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-block;border-radius:8px;padding:8px 14px;font-weight:600;font-size:13px;border:1px solid var(--green);background:#fff;color:var(--green-ink)}
.btn.primary{background:var(--green);color:#fff}
.btn.off{opacity:.5;cursor:default;pointer-events:none}
.btn.danger{border-color:#c33;color:#c33}
h2.sec{font-size:22px;margin:24px 0 4px;letter-spacing:-.01em}
.lede{color:var(--mute);margin:0 0 18px;max-width:64ch}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding-bottom:16px}
.tile{border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px 16px 14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:118px}
.tile:hover{border-color:var(--green)}
.tile.open{border-color:var(--green);background:var(--green-soft)}
.tile h3{margin:0;font-size:16px}
.tile p{margin:0;color:var(--mute);font-size:13px}
.tile .n{margin-top:auto;font-size:12px;color:var(--green-ink);font-weight:600}
.panel{display:none;border:1px solid var(--green);border-radius:12px;background:#fff;margin:0 0 40px;overflow:hidden}
.panel.open{display:block}
.panel .hd{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--green-soft)}
.panel .hd h3{margin:0;font-size:18px}
.panel .hd p{margin:0;color:var(--mute);font-size:13px}
.panel .hd button{margin-left:auto;background:none;border:none;color:var(--green-ink);font-weight:600}
.sub{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
.sub:last-child{border-bottom:none}
.sub h4{margin:0 0 2px;font-size:15px}
.sub .use{font-size:14px;color:#2A322A}
.sub .use b{display:block;font-size:13px;color:var(--ink)}
.sub .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
footer{border-top:1px solid var(--line);padding:16px 40px;font-size:12px;color:var(--mute);display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}
.card{max-width:420px;margin:80px auto;border:1px solid var(--line);border-radius:12px;padding:24px}
.card input,.card select{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;margin:6px 0 14px}
.flash{background:var(--green-soft);border:1px solid var(--green);border-radius:8px;padding:8px 12px;margin:12px 0;font-size:14px}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:18px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--mute);font-size:12px;background:var(--panel)}
form.up{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:18px}
form.up label{font-size:13px;color:var(--mute)}
form.up input,form.up select{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px}
form.up .full{grid-column:1/-1}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.sub{grid-template-columns:1fr}.sub .acts{justify-content:flex-start}.wrap{padding:0 20px}header,footer{padding-left:20px;padding-right:20px}.hero h1{font-size:32px}form.up{grid-template-columns:1fr}}

.modal{display:none;position:fixed;inset:0;background:rgba(22,27,22,.45);z-index:20;padding:3vh 3vw}
.modal.open{display:block}
.modal .box{background:#fff;border-radius:14px;height:94vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--green)}
.modal .mh{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--green-soft)}
.modal .mh b{font-size:15px}
.modal .mctx{font-size:12px;color:var(--mute)}
.modal .mh .btn:first-of-type{margin-left:auto}
.modal .mb{flex:1;position:relative;background:var(--panel)}
.modal iframe{width:100%;height:100%;border:none;background:#fff}
.modal .mno{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:var(--mute);padding:40px;text-align:center}