.topbar { justify-content:center; background:#08090bed; border-bottom-color:#63252c }
.security { position:absolute; right:max(22px,calc((100vw - var(--max))/2)) }
.brand img { width:130px }
.hero { isolation:isolate; overflow:hidden; min-height:0; padding:clamp(55px,8vw,110px) 22px; text-align:center; background:radial-gradient(ellipse at 45% 70%,#22252c,#090a0d 74%) }
.hero::before,.hero::after { content:""; position:absolute; z-index:-1; top:0; bottom:0; width:37%; background-size:cover; background-position:center; opacity:.78 }
.hero::before { left:0; background-image:url("assets/field-agent.png"); mask-image:linear-gradient(to right,#000 45%,transparent) }
.hero::after { right:0; background-image:url("assets/tokyo-signal.png"); mask-image:linear-gradient(to left,#000 35%,transparent) }
.hero h1 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(46px,7vw,98px); line-height:1.12; font-weight:650; margin:24px auto; text-shadow:0 3px 20px #000 }
.hero .eyebrow { color:#eab0b2 }
.hero .lead { margin:auto; max-width:39em; color:#ede6dc; text-shadow:0 1px 5px #000 }
.hero .primary,.result-actions .primary { background:#240f15; border:1px solid #ec3a42; box-shadow:inset 0 0 14px #ac172233 }
.hero .micro { color:#c3babb }
.result-card,.profile-card { color:#f4efe7; border:1px solid #87333c; background:linear-gradient(126deg,#22252c,#101115 63%,#211518); border-top:3px solid #c42a36 }
.classified,.result-label,.result-row span,.profile-card dt,.agent-id,.agent-id strong { color:#ed9c9f }
.result-row,.profile-card dd,.classified { border-color:#56383e }
.barcode { filter:invert(1); opacity:.5 }
.dossier-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 0 }
.dossier-head .result-logo { width:min(50%,205px); margin:0 }
.portrait-slot { width:clamp(78px,13vw,132px); aspect-ratio:4/5; display:grid; place-items:center; background:#191a1e; border:1px solid #88404a; color:#c9a4a5; text-align:center; font:10px/1.8 monospace }
.portrait-slot img:not([hidden]) { width:100%;height:100%;object-fit:cover;min-height:0 }
.portrait-slot img:not([hidden])+span { display:none }
.result-upload { display:grid; gap:9px; padding:16px; margin-top:22px; border:1px dashed #87444c; color:#f2e8e4; font-size:15px }
.result-upload input { max-width:100%; min-width:0; color:inherit }
.result-upload small { color:#c7adb0 }
#pngPreview { width:min(460px,94vw); max-height:92dvh; overflow:auto; color:#faf2ed; background:#151519; border:1px solid #b53f49; padding:18px }
#pngPreview::backdrop { background:#000b }
#pngPreview h2 { margin:0 }
#pngPreview img { width:100%; display:block }
#pngPreview a,#pngPreview button { display:inline-block; margin:12px 12px 0 0; padding:12px; color:#fff; background:#441720; border:1px solid #923d45; font:inherit }
@media(max-width:760px) {
  .hero::before,.hero::after { width:52%; opacity:.56 }
  .hero .lead { font-size:14px }
  .uniform-card { display:grid; grid-template-columns:37% minmax(0,1fr); gap:6px 14px; padding:13px; border-color:#61232a }
  .uniform-card .product-photo { grid-area:1/1/5/2; margin:0; padding:5px; height:100%; min-height:120px }
  .uniform-card .product-photo i { display:none }
  .uniform-card h3,.uniform-card p,.uniform-card .shop-link { margin:0; min-height:0 }
  .uniform-card h3 { font-size:20px }
  .uniform-card p { font-size:12px }
}
.portrait-roster { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px; margin:14px 0; min-width:0; border:1px solid #66343c }
.portrait-roster legend { color:#e6bec1; padding:0 5px; font-size:13px }
.portrait-roster button { position:relative; padding:4px 4px 8px; background:#14161b; color:#eee8e2; border:1px solid #49434a; font-size:13px; cursor:pointer }
.portrait-roster img { display:block; width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:6px }
.portrait-roster button[aria-pressed=true] { border:2px solid #ed5664; padding:3px 3px 7px }
.portrait-roster button[aria-pressed=true]::after { content:'選択中'; position:absolute; top:5px; left:5px; background:#7a1722; color:#fff; font-size:10px; padding:2px 5px }
.directory-link { display:block; width:fit-content; margin:18px 0 0; padding:9px 0; color:#e2c7c8; background:transparent; border:0; text-decoration:underline; text-underline-offset:5px; cursor:pointer }
#rankDirectory { width:min(480px,92vw); max-height:85dvh; overflow:auto; padding:clamp(18px,5vw,32px); color:#eee8e2; background:#141419; border:1px solid #81414a }
#rankDirectory::backdrop { background:#08080be6 }
#rankDirectory h2 { margin:.3em 0 }
#rankDirectory ol { padding-inline-start:2em; line-height:1.65 }
#rankDirectory li { padding:9px 0; border-top:1px solid #46343a }
#rankDirectory li::marker { color:#cb939b; font:12px monospace }
#rankDirectory p { margin:4px 0; color:#c9c3bc; font-size:14px }
#rankDirectory small { margin-right:8px; padding:1px 5px; border:1px solid #b85d67; color:#f1989e }
#rankDirectory .your-rank strong { color:#ffabb0 }
.special-file { border-color:#ad884e }
.special-file .classified { color:#8a2027; font-weight:bold }
.supply-memo { display:flex; gap:16px; align-items:center; border-top:1px solid #52323a; margin:22px 0 0; padding:18px 0; max-width:620px }
.supply-memo img { object-fit:contain; flex:none; background:#19171b; border:1px solid #50383d }
.supply-memo small { color:#d7a6aa }
.supply-memo h3,.supply-memo p { margin:5px 0 }
.supply-memo p { color:#c9c3bc; font-size:14px; line-height:1.65 }
.supply-memo a { display:inline-block; padding:8px 0; color:#edd9d5; font-size:14px; text-decoration:underline; text-underline-offset:3px }