:root{
  --bg:#0b1220; --bg2:#111c30; --card:#15233c; --line:#25344f;
  --fg:#e8eef7; --muted:#93a6c4;
  --accent:#ffb454; --accent2:#5ec8ff; --good:#6ee7a8; --danger:#ff6b6b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  line-height:1.7}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
.btn{display:inline-block;background:var(--accent);color:#25190a;border:none;border-radius:10px;
  padding:10px 16px;font-weight:700;cursor:pointer;font-size:15px}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:8px}
.muted{color:var(--muted)}
.small{color:var(--muted);font-size:13px;font-weight:400}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(11,18,32,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:58px}
.brand{font-weight:800;font-size:20px;letter-spacing:.3px}
.brand .b2{color:var(--accent)}
.top .sp{flex:1}
.navlink{color:var(--muted);font-size:14px;cursor:pointer}
.navlink:hover{color:var(--fg)}

/* hero */
.hero{background:linear-gradient(180deg,#0e1a2e,#0b1220);border-bottom:1px solid var(--line);
  padding:38px 0 30px}
.hero h1{margin:.1em 0;font-size:30px;line-height:1.3}
.hero .lead{font-size:16px;max-width:680px}
.tag{display:inline-block;background:#1c2c48;color:var(--accent);
  border:1px solid #2c416a;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 8px}
.tabs button{background:var(--bg2);color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;cursor:pointer;font-size:14px;font-weight:600}
.tabs button.on{background:var(--accent);color:#25190a;border-color:var(--accent)}

/* grid of individuals */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:18px 0}
.icard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  cursor:pointer;transition:transform .08s,border-color .12s}
.icard:hover{transform:translateY(-2px);border-color:#3b567f}
.icard .ph{aspect-ratio:4/3;background:#0c1526 center/cover no-repeat;display:flex;
  align-items:center;justify-content:center;color:#3f5a86;font-size:34px}
.icard .ph.empty{color:#33456a}
.icard .body{padding:11px 13px 13px}
.icard .sp{font-weight:700;font-size:15px}
.icard .mm{color:var(--accent);font-weight:800;font-size:20px}
.icard .meta{color:var(--muted);font-size:12.5px;margin-top:3px}
.icard .foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  font-size:13px;color:var(--muted)}
.rank{display:inline-block;min-width:22px;text-align:center;font-weight:800;color:var(--accent)}

/* panels / forms */
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin:16px 0}
.panel h2,.panel h3{margin-top:0}
.form label{display:block;margin:12px 0 4px;font-size:14px;font-weight:600}
.form input,.form select,.form textarea{width:100%;background:#0d1729;color:var(--fg);
  border:1px solid var(--line);border-radius:9px;padding:10px;font-size:15px;font-family:inherit}
.form textarea{resize:vertical}
.form .row{display:flex;gap:12px}
.form .row>label{flex:1}
.form small{color:var(--muted);font-weight:400;font-size:12.5px}
.fs{border:1px solid var(--line);border-radius:12px;padding:10px 16px 16px;margin:16px 0}
.fs legend{padding:0 8px;color:var(--accent);font-weight:700;font-size:14px}
.hint{background:#122036;border:1px solid #274063;border-radius:10px;
  padding:12px 14px;font-size:13.5px;color:#c8d6ea}

/* photo uploader */
.drop{border:1.5px dashed #3a527c;border-radius:12px;padding:16px;text-align:center;color:var(--muted);
  cursor:pointer;background:#0d1729}
.drop:hover{border-color:var(--accent2);color:var(--fg)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs .t{width:78px;height:78px;border-radius:8px;background:#0c1526 center/cover;position:relative;
  border:1px solid var(--line)}
.thumbs .t b{position:absolute;top:-7px;right:-7px;background:var(--danger);color:#fff;border-radius:50%;
  width:20px;height:20px;line-height:20px;text-align:center;font-size:12px;cursor:pointer}
.caliper-badge{display:inline-block;background:#123a2a;color:var(--good);border:1px solid #1f6b48;
  border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700}

/* detail */
.detail-top{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}
@media(max-width:760px){.detail-top{grid-template-columns:1fr}.detail-top{gap:14px}
  .hero h1{font-size:24px}}
.gallery img{width:100%;border-radius:12px;border:1px solid var(--line);margin-bottom:10px;background:#0c1526}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.spec td.k{color:var(--muted);width:34%;white-space:nowrap}
.bigmm{font-size:34px;font-weight:800;color:var(--accent)}
.oshi-btn{background:#2a1c3a;color:#e6b9ff;border:1px solid #5a3b7e}
.oshi-btn.on{background:#ff5aa7;color:#fff;border-color:#ff5aa7}
.story-box{background:#0e1a2e;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  padding:12px 16px;white-space:pre-wrap;margin-top:6px}

/* table */
table.lb{width:100%;border-collapse:collapse;font-size:14.5px}
table.lb th,table.lb td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left}
table.lb th{color:var(--muted);font-weight:600}

/* comments */
.cmt{border-top:1px solid var(--line);padding:10px 0}
.cmt .h{color:var(--accent2);font-weight:700;font-size:13.5px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(4,8,16,.7);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:16px}
.modal{background:var(--card);border:1px solid var(--line);border-radius:14px;max-width:420px;width:100%;padding:22px}

footer{border-top:1px solid var(--line);margin-top:40px;padding:22px 0;color:var(--muted);font-size:13px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1c2c48;
  border:1px solid var(--line);border-radius:10px;padding:11px 18px;z-index:60;font-size:14px}