:root{
  --paper:#ecf0f2;--surface:#fff;--ink:#0f1b24;--mut:#5b6a76;--line:#d3dce2;--line-soft:#e4eaee;
  --rail:#12232d;--rail-ink:#c4d3dc;--rail-mut:#7f95a3;--rail-hi:#1d3744;
  --ac:#0b7285;--ac-hi:#095c6c;--ac-soft:#e1f1f4;--brass:#a46d12;--brass-soft:#f6ecd7;
  --ok:#23724a;--warn:#b0520b;--err:#b3261e;--sel:#fff7dd;
}
@media(prefers-color-scheme:dark){:root{
  --paper:#0d151b;--surface:#152028;--ink:#e3ebf0;--mut:#8da0ad;--line:#27373f;--line-soft:#1f2d35;
  --rail:#091016;--rail-ink:#c4d3dc;--rail-mut:#6f8696;--rail-hi:#16262f;
  --ac:#4db4c8;--ac-hi:#79c8d8;--ac-soft:#12323a;--brass:#dba43f;--brass-soft:#33280f;
  --ok:#5ec08b;--warn:#f0a050;--err:#ff8a80;--sel:#2b2610}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.app{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:100vh}
.rail{background:var(--rail);color:var(--rail-ink);padding:20px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{font-size:17px;font-weight:650;letter-spacing:-.01em;color:#fff;padding:2px 10px 18px;line-height:1.2}
.brand small{display:block;font-size:12px;font-weight:400;color:var(--rail-mut);letter-spacing:0;margin-top:3px}
.rail a.nav{display:block;padding:8px 10px;border-radius:6px;color:var(--rail-ink);font-weight:500}
.rail a.nav:hover{background:var(--rail-hi);text-decoration:none}
.rail a.nav.on{background:var(--rail-hi);color:#fff;box-shadow:inset 3px 0 0 var(--brass)}
.rail .sp{flex:1}
.rail form button{width:100%;text-align:left;background:none;border:0;color:var(--rail-mut);padding:8px 10px;border-radius:6px;cursor:pointer;font:inherit}
.rail form button:hover{background:var(--rail-hi);color:var(--rail-ink)}
.page{padding:26px 32px 60px;max-width:1240px;width:100%}
.page.wide{max-width:none;padding:18px 20px 40px}
h1{font-size:24px;font-weight:650;letter-spacing:-.015em;margin:0 0 4px;line-height:1.2}
h2{font-size:17px;font-weight:650;margin:28px 0 10px;letter-spacing:-.005em}
h3{font-size:15px;font-weight:650;margin:22px 0 8px}
.lead{color:var(--mut);margin:0 0 18px}
.mut{color:var(--mut)}.warn{color:var(--warn)}.ok{color:var(--ok)}.err{color:var(--err)}
.num,td.n,th.n{font-variant-numeric:tabular-nums}
td.n,th.n{text-align:right;white-space:nowrap}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:7px 10px;min-height:36px}
input::placeholder{color:var(--mut);opacity:.8}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ac);outline-offset:-1px;border-color:var(--ac)}
button,.btn{font:inherit;font-weight:550;border-radius:6px;padding:7px 14px;min-height:36px;border:1px solid var(--ac);background:var(--ac);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
button:hover,.btn:hover{background:var(--ac-hi);border-color:var(--ac-hi);text-decoration:none;color:#fff}
button.ghost,.btn.ghost{background:transparent;color:var(--ac);border-color:var(--line)}
button.ghost:hover,.btn.ghost:hover{background:var(--ac-soft);border-color:var(--ac);color:var(--ac-hi)}
button.danger{background:transparent;color:var(--err);border-color:var(--line)}
button.danger:hover{background:transparent;border-color:var(--err);color:var(--err)}
form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.tbl th,.tbl td{padding:8px 12px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.tbl th{font-weight:600;color:var(--mut);font-size:13px;background:color-mix(in srgb,var(--paper) 55%,var(--surface));border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:color-mix(in srgb,var(--ac-soft) 55%,var(--surface))}
.tbl td.key a{font-weight:650;font-size:15.5px;letter-spacing:-.005em}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:14px}
.panel>b:first-child{display:block;margin-bottom:6px}
.best{box-shadow:inset 3px 0 0 var(--brass)}
.price-best{color:var(--brass);font-weight:650}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brass);margin-right:6px;vertical-align:1px}
.tag{display:inline-block;font-size:12.5px;padding:1px 8px;border-radius:10px;background:var(--ac-soft);color:var(--ac-hi);font-weight:550}
.tag.warn{background:var(--brass-soft);color:var(--warn)}
.searchbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.searchbar input[name=q]{flex:1 1 380px;font-size:17px;min-height:46px;padding:9px 14px;border-radius:8px}
.searchbar select,.searchbar input[name=kw]{min-height:46px;border-radius:8px}
.searchbar button{min-height:46px;border-radius:8px;padding:0 22px}
.maker-line{display:flex;justify-content:space-between;gap:18px;padding:1px 0}
.maker-line span:first-child{color:var(--mut)}
.empty{padding:34px 24px;text-align:center;color:var(--mut);background:var(--surface);border:1px dashed var(--line);border-radius:8px}
details.panel summary{cursor:pointer;font-weight:550}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login form{width:320px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px;display:flex;flex-direction:column;gap:12px}
.login h1{font-size:21px;margin-bottom:2px}
.login .brand-mark{height:4px;width:44px;background:var(--brass);border-radius:2px;margin-bottom:10px}
@media(max-width:820px){.app{grid-template-columns:1fr}.rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px}.brand{padding:0 10px 0 4px}.brand small{display:none}.rail .sp{display:none}.page{padding:18px 14px 40px}}