
:root{--bg:#f7f6f2;--bg2:#ecebe5;--panel:#fff;--ink:#1f2633;--dim:#545b68;--accent:#6b4f2a;--good:#2f6b4f;--warn:#7a4f0e;--bad:#8c2b20;--line:rgba(31,38,51,.14);--display:Georgia,'Times New Roman',serif;--body:system-ui,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.55 var(--body);display:grid;grid-template-columns:250px 1fr;grid-template-rows:64px 1fr}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:99;background:var(--ink);color:#fff;padding:8px 12px;border-radius:4px}.skip:focus{top:12px}
header.top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 24px;background:var(--panel);border-bottom:1px solid var(--line)}
header .brand{font:600 22px/1 var(--display)}header .who{font-size:12px;color:var(--dim)}header .sp{flex:1}
#rail{overflow:auto;padding:16px 10px 40px;border-right:1px solid var(--line);background:var(--panel)}
#rail h4{font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:18px 12px 8px}
#rail button{display:flex;justify-content:space-between;width:100%;padding:8px 12px;border-radius:6px;color:var(--ink);background:none;border:0;text-align:left}
#rail button:hover{background:var(--bg)}#rail button.on{background:var(--bg2);font-weight:600}
#rail .n{font-size:11px;background:var(--accent);color:#fff;border-radius:10px;padding:1px 7px}
#view{overflow:auto;padding:28px 36px 80px}
h1{font:500 34px/1.1 var(--display);margin:0 0 6px}h2{font:600 20px/1.2 var(--display);margin:26px 0 10px}h3{font:600 16px/1.3 var(--body);margin:14px 0 6px}
.lead{color:var(--dim);max-width:760px;margin:0 0 18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.stat b{display:block;font:500 34px/1 var(--display)}.stat span{color:var(--dim);font-size:12px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
tr.click{cursor:pointer}tr.click:hover,tr.click:focus-within{background:var(--bg)}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--bg2);color:var(--ink)}
.pill.new{background:#e6eef8;color:#1d4570}.pill.ok{background:#e3efe8;color:#245a41}.pill.warn{background:#f6ecd9;color:#6b440a}.pill.no{background:#eee;color:#474747}
.f{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.f .full{grid-column:1/-1}
label.fl{font-size:12px;color:var(--dim);display:block}
label.fl input,label.fl select,label.fl textarea,.in{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid rgba(31,38,51,.3);border-radius:6px;background:#fff;color:var(--ink)}
textarea.in{min-height:64px;resize:vertical}
.hint{font-size:11.5px;color:var(--dim);margin-top:3px;display:block}
.btn{display:inline-block;padding:8px 14px;border-radius:6px;background:var(--ink);color:#fff;font-weight:600;font-size:13px;border:0;text-decoration:none}
.btn.alt{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(31,38,51,.35)}
.btn.small{padding:5px 10px;font-size:12px}
.btn[disabled]{opacity:.55;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.note{font-size:12.5px;color:var(--dim)}
.warnbox{border-left:3px solid var(--warn);background:#fbf6ec;padding:10px 14px;border-radius:0 8px 8px 0;margin:10px 0}
.lock{border-left:3px solid var(--good);background:#eef5f0;padding:10px 14px;border-radius:0 8px 8px 0;margin:10px 0}
.only{border:1px dashed var(--accent);border-radius:10px;padding:16px 18px}
.rights td:not(:first-child),.rights th:not(:first-child){text-align:center}
.err{display:block;color:var(--bad);font-size:12px;margin-top:4px}
.drawer{position:fixed;right:0;top:64px;bottom:0;width:min(600px,100vw);background:var(--panel);box-shadow:-20px 0 60px rgba(0,0,0,.12);padding:24px 26px 60px;overflow:auto;transform:translateX(105%);transition:transform .3s;z-index:20}
.drawer.on{transform:none}
.drawer .x{position:absolute;right:16px;top:12px;font-size:24px;color:var(--dim);background:none;border:0}
.theme{display:flex;gap:6px}.theme i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.themes button{display:block;text-align:left;padding:14px;border-radius:10px;border:1px solid var(--line);background:#fff}
.themes button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,120px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;max-width:90vw;transition:transform .3s;z-index:40}
.toast.on{transform:translate(-50%,0)}
.sh fieldset{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 10px}
.sh legend{font-size:12px;font-weight:600;color:var(--dim);padding:0 6px}
.sh .sub{margin-left:8px;padding-left:10px;border-left:2px solid var(--bg2)}
.phrow{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.phrow img,.phrow .noph{width:120px;height:80px;object-fit:cover;border-radius:6px;background:var(--bg2);display:grid;place-items:center;font-size:11px;color:var(--dim)}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.phgrid button{padding:0;border:2px solid transparent;border-radius:6px;background:none}.phgrid button[aria-pressed=true]{border-color:var(--ink)}
.phgrid img{width:100%;height:80px;object-fit:cover;border-radius:4px;display:block}
.wordrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.wordrow.one{grid-template-columns:1fr}
iframe.pv{width:100%;height:70vh;border:1px solid var(--line);border-radius:8px;background:#fff}
@media (max-width:820px){body{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}header.top{flex-wrap:wrap;padding:10px 14px;gap:8px}#rail{display:flex;overflow-x:auto;padding:6px;border-right:0;border-bottom:1px solid var(--line)}#rail h4{display:none}#rail button{flex:0 0 auto;width:auto;white-space:nowrap}#view{padding:18px 14px 80px}.f,.wordrow{grid-template-columns:1fr}table{font-size:12.5px}.drawer{top:0}.phrow{grid-template-columns:90px 1fr}.phrow img,.phrow .noph{width:90px;height:64px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

body.pvw{grid-template-rows:auto 64px 1fr}
.pvbar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 24px;background:#1f2633;color:#fff;font-size:13px}
.pvbar label{display:flex;align-items:center;gap:6px;color:#fff}
.pvbar select{padding:4px 6px;border-radius:6px;border:0;color:#1f2633;background:#fff;max-width:230px}
.pvbar span{color:#d9dce3}
.pvbar :focus-visible{outline:2px solid #fff;outline-offset:2px}
body.pvw .drawer{top:calc(64px + var(--pvbarh,46px))}
.lawsite{position:fixed;inset:0;z-index:50;background:#fff;display:flex;flex-direction:column}
.lawsite[hidden]{display:none}
.lawsite .h{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--bg2);color:var(--ink);font-size:13px}
.lawsite .h span{flex:1}
.lawsite iframe{flex:1;border:0;width:100%;background:#fff}
.pvdlg{position:fixed;inset:0;z-index:60;background:rgba(31,38,51,.45);display:grid;place-items:center;padding:16px}
.pvdlg[hidden]{display:none}
.pvdlg .box{background:#fff;color:var(--ink);border-radius:10px;padding:20px 22px;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.pvdlg p{margin:0 0 16px;font-size:14px;line-height:1.5}
.pvdlg .row{justify-content:flex-end}
@media (max-width:820px){body.pvw{grid-template-rows:auto auto auto 1fr}.pvbar{padding:8px 14px;gap:6px 10px}.pvbar label{flex-wrap:wrap}.pvbar select{max-width:100%}body.pvw .drawer{top:0}}
