/* Reference page: uses the shared theme and keeps lookup behaviour unchanged. */
html { background:var(--bg); }
body.ax-ssn { --ssn-accent:#839dff; --ssn-tint:rgba(116,143,255,.10); background:radial-gradient(ellipse at 92% 4%,var(--ssn-tint),transparent 48%),var(--bg); }
[data-theme="light"] body.ax-ssn { --ssn-accent:#3858d6; --ssn-tint:rgba(67,99,224,.07); }
.ax-ssn>header { padding:20px 0; border-color:var(--border); }
.ax-ssn .brand { color:var(--ssn-accent); letter-spacing:-.8px; }
.ax-ssn .brand span { color:var(--text); }
.ax-ssn main { margin:48px auto; }
.ax-ssn .reference-hero { position:relative; padding:20px 0 34px; max-width:1200px; }
.ax-ssn .heading-row { justify-content:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.ax-ssn .heading-row .eyebrow { margin:0; color:var(--ssn-accent); letter-spacing:1.8px; font-size:10px; }
.ax-ssn .release { margin:0; padding:7px 11px; border:1px solid var(--border); border-radius:100px; font-size:11px; color:var(--fg-muted); }
.ax-ssn h1 { font-size:clamp(32px,4.6vw,62px); font-weight:750; letter-spacing:-.045em; line-height:1.06; margin:0 0 20px; }
.ax-ssn .intro { max-width:660px; font-size:16px; line-height:1.75; color:var(--fg-muted); margin:0; }
.ax-ssn #load-state { font-size:12px; margin:0 0 14px; color:var(--fg-muted); }
.ax-ssn .panel { padding:clamp(22px,3.5vw,48px); border:1px solid var(--border); border-radius:26px; background:var(--panel-bg); box-shadow:0 20px 65px #0000000c; backdrop-filter:blur(12px); }
.ax-ssn .fields { gap:28px; align-items:start; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); }
.ax-ssn label { font-size:13px; color:var(--fg-soft); font-weight:600; margin-bottom:12px; }
.ax-ssn #ssn-input { height:68px; font-size:clamp(22px,2.4vw,32px); letter-spacing:3px; padding:12px 20px; border-radius:14px; background:var(--input-bg); }
.ax-ssn #ssn-input::placeholder { color:var(--fg-faint); font-size:21px; }
.ax-ssn #period { height:68px; border-radius:14px; padding:12px 16px; }
.ax-ssn :is(input,select,button,a,summary):focus-visible { outline:2px solid var(--ssn-accent); outline-offset:4px; }
.ax-ssn .hint { line-height:1.65; color:var(--fg-muted); max-width:640px; }
.ax-ssn .actions { gap:12px; margin-top:24px; }
.ax-ssn button { min-height:46px; border-radius:12px; transition:background .15s,border-color .15s; }
.ax-ssn button:hover { border-color:var(--ssn-accent); background:var(--hover-surface); }
.ax-ssn #check { min-width:180px; background:var(--ssn-accent); border-color:var(--ssn-accent); color:#fff; font-weight:650; box-shadow:0 6px 20px var(--ssn-tint); }
[data-theme="dark"] .ax-ssn #check { color:#10172c; }
.ax-ssn #clear { padding-inline:24px; }
.ax-ssn .empty { margin-top:32px; padding:32px; border:1px dashed var(--border); border-radius:18px; text-align:center; background:var(--ssn-tint); }
.ax-ssn .empty::before { content:'···'; display:block; margin:0 auto 16px; width:54px; height:54px; line-height:38px; font-size:38px; letter-spacing:3px; color:var(--ssn-accent); background:var(--panel-bg); border:1px solid var(--border); border-radius:16px; }
.ax-ssn .empty h2 { font-size:20px; margin:0 0 8px; color:var(--text); }
.ax-ssn .empty p { color:var(--fg-muted); margin:0; }
.ax-ssn #result { border-top:0; padding-top:0; margin-top:34px; gap:18px; }
.ax-ssn #result-prefix { margin:0; color:var(--ssn-accent); }
.ax-ssn .format-row { gap:12px; margin:0; }
.ax-ssn .format-row>div { padding:16px 20px; border:1px solid var(--border); background:var(--hover-surface); border-radius:14px; }
.ax-ssn .format-row span { color:var(--fg-muted); font-size:11px; }
.ax-ssn .format-row strong { color:var(--text); font-weight:600; }
.ax-ssn .region-result,.ax-ssn .history-result { padding:26px; border:1px solid var(--border); border-radius:18px; margin:0; background:var(--panel-bg); }
.ax-ssn .region-result { background:linear-gradient(135deg,var(--ssn-tint),transparent),var(--panel-bg); }
.ax-ssn #result-title { font-size:clamp(26px,3vw,42px); letter-spacing:-1px; }
.ax-ssn #history-title { font-size:clamp(20px,2vw,28px); letter-spacing:-.5px; }
.ax-ssn :is(#region-english,#region-detail,#history-detail,dt,.notice) { color:var(--fg-muted); }
.ax-ssn dd { color:var(--text); flex-shrink:1; }
.ax-ssn dl>div { border-color:var(--border); padding-block:14px; }
.ax-ssn #report-links a { border-color:var(--border); color:var(--ssn-accent); border-radius:9px; }
.ax-ssn .copy-row { border-top:0; margin-top:20px; padding-top:0; }
.ax-ssn .copy-row:has(button:disabled) { display:none; }
.ax-ssn .privacy { border:1px solid var(--border); border-radius:16px; padding:18px 22px; margin:20px 0; align-items:baseline; }
.ax-ssn .privacy strong { color:var(--fg-soft); font-size:13px; }
.ax-ssn .privacy p { color:var(--fg-muted); margin-bottom:0; }
.ax-ssn .note { color:var(--fg-muted); font-size:12px; border-left-color:var(--border); margin:24px 0; }
.ax-ssn main>details { border:1px solid var(--border); border-radius:14px; padding:4px 20px; margin:12px 0; color:var(--fg-muted); }
.ax-ssn summary { display:list-item; align-content:center; padding:12px 0; font-size:13px; font-weight:600; color:var(--fg-soft); min-height:48px; }
.ax-ssn main>details[open] { padding-bottom:16px; }
.ax-ssn a { color:var(--ssn-accent); }
.ax-ssn footer { color:var(--fg-muted); }
.ax-ssn #error:not(:empty) { background:var(--ssn-tint); color:var(--error); border-color:var(--error); border-radius:12px; }
.ax-ssn #ssn-input[aria-invalid="true"] { background:var(--input-bg); border-color:var(--error); }
@media(max-width:680px) {
 .ax-ssn main { margin-top:22px; }
 .ax-ssn .reference-hero { padding:12px 0 26px; }
 .ax-ssn .heading-row { gap:10px; margin-bottom:20px; }
 .ax-ssn .intro { font-size:14px; }
 .ax-ssn .panel { border-radius:20px; padding:22px 18px; }
 .ax-ssn .fields { grid-template-columns:minmax(0,1fr); gap:20px; }
 .ax-ssn #ssn-input,.ax-ssn #period { height:58px; }
 .ax-ssn #check { min-width:0; flex:1; }
 .ax-ssn .empty { padding:26px 16px; }
 .ax-ssn .region-result,.ax-ssn .history-result { padding:20px; }
 .ax-ssn .format-row { grid-template-columns:1fr; }
 .ax-ssn .privacy { padding:16px; }
}
@media(prefers-reduced-motion:reduce) { .ax-ssn button { transition:none; } }