:root{
  /* cool archival-neutral — a system of record, not a brand. faint slate tint (~255). */
  --paper:    oklch(0.988 0.0015 255);
  --paper-2:  oklch(0.970 0.0025 255);
  --card:     oklch(0.998 0.001 255);
  --ink:      oklch(0.275 0.008 258);
  --ink-soft: oklch(0.470 0.008 258);
  --mut:      oklch(0.620 0.006 258);
  --line:     oklch(0.915 0.004 258);
  --line-2:   oklch(0.850 0.005 258);
  --shu:      oklch(0.560 0.150 33);   /* single functional accent — "registered" status only */
  --shu-soft: oklch(0.560 0.150 33 / .08);
  --green:    oklch(0.52 0.09 155);
  --amber:    oklch(0.64 0.10 72);
  --space-xs:4px;--space-sm:8px;--space:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:72px;
  --r:7px;
}
:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:"Hanken Grotesk","Noto Sans JP",sans-serif;
  background:var(--paper);color:var(--ink);font-size:15px;line-height:1.55;
  font-feature-settings:"tnum" 0;
}
.jp{font-family:"Noto Sans JP","Hanken Grotesk",sans-serif}
.serif{font-family:"Spectral",serif}
.tnum{font-variant-numeric:tabular-nums;letter-spacing:.01em}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{
  background:var(--paper-2);border-right:1px solid var(--line);
  padding:var(--space-lg) var(--space-md);display:flex;flex-direction:column;gap:var(--space-xl);
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:11px;padding:var(--space-sm) var(--space-sm) var(--space)}
.brand .mark{font-family:"Spectral",serif;font-weight:600;font-size:21px;letter-spacing:.04em;color:var(--ink)}
.brand .seal{width:30px;height:30px;color:var(--ink);display:grid;place-items:center;flex:none}
.brand .seal svg{width:22px;height:22px}
.brand .sub{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-top:3px}

.nav{display:flex;flex-direction:column;gap:2px}
.nav .lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding:0 var(--space-sm) var(--space-xs)}
.nav a{
  display:flex;align-items:center;gap:10px;padding:9px var(--space-sm);border-radius:8px;
  color:var(--ink-soft);font-weight:500;font-size:14px;cursor:pointer;transition:background .15s,color .15s
}
.nav a .ja{font-family:"Noto Sans JP";font-weight:500}
.nav a .en{font-size:11px;color:var(--mut);margin-left:auto;letter-spacing:.02em}
.nav a:hover{background:var(--paper-2)}
.nav a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line),0 1px 3px oklch(0.4 0.02 258/.05)}
.nav a.on .dot{background:var(--shu)}
.nav a .dot{width:5px;height:5px;border-radius:50%;background:transparent}

.side .foot{margin-top:auto;font-size:12px;color:var(--mut);padding:0 var(--space-sm)}
.side .foot b{color:var(--ink-soft);font-weight:600}
.side .foot .signout{display:inline-flex;align-items:center;gap:7px;margin-top:var(--space);padding:6px 10px;border:1px solid var(--line-2);border-radius:7px;background:var(--card);color:var(--ink-soft);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.side .foot .signout:hover{background:var(--paper);color:var(--ink)}
.side .foot .signout svg{width:15px;height:15px;flex:none}

/* ---------- main ---------- */
.main{min-width:0}
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-md) var(--space-2xl);border-bottom:1px solid var(--line);
  background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(6px);
  position:sticky;top:0;z-index:5
}
.crumb{font-size:13px;color:var(--mut)}
.crumb b{color:var(--ink);font-weight:600}
.top .org{display:flex;align-items:center;gap:10px;font-size:13px}
.top .org .ava{width:28px;height:28px;border-radius:7px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:"Noto Sans JP";font-weight:700;font-size:12px}
.screen{padding:var(--space-2xl);max-width:1080px;display:none;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.screen.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.h-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:600}
h1.page{font-family:"Spectral",serif;font-weight:600;font-size:30px;letter-spacing:-.01em;margin:6px 0 4px}
.page-sub{color:var(--ink-soft);max-width:64ch;font-size:14.5px}

/* ---------- ledger / dashboard ---------- */
.ledger{margin-top:var(--space-xl);display:grid;grid-template-columns:1.4fr .9fr .9fr;gap:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--card)}
.ledger .cell{padding:var(--space-lg);border-right:1px solid var(--line)}
.ledger .cell:last-child{border-right:0}
.ledger .k{font-size:12px;color:var(--mut);letter-spacing:.02em}
.ledger .v{font-family:"Spectral",serif;font-size:40px;font-weight:500;line-height:1;margin-top:10px;letter-spacing:-.01em}
.ledger .v small{font-size:15px;color:var(--mut);font-family:"Hanken Grotesk";margin-left:6px}
.ledger .meta{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.ledger .meta .up{color:var(--green);font-weight:600}
.ledger .meta .warn{color:var(--amber);font-weight:600}

.section-h{display:flex;align-items:baseline;justify-content:space-between;margin:var(--space-2xl) 0 var(--space-md)}
.section-h h2{font-family:"Spectral",serif;font-weight:600;font-size:18px}
.section-h a{font-size:13px;color:var(--shu);font-weight:600}

/* table */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
  padding:0 var(--space-md) var(--space-sm);border-bottom:1px solid var(--line-2)
}
tbody td{padding:var(--space)var(--space-md);border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--paper-2)}
.name-cell{display:flex;flex-direction:column;gap:1px}
.name-cell .jp{font-weight:500;font-family:"Noto Sans JP"}
.name-cell .rom{font-size:12px;color:var(--mut)}
.isni{font-family:"Spectral",serif;font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:14px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;border:1px solid var(--line-2)}
.badge.reg{color:var(--green);border-color:color-mix(in oklab,var(--green) 35%,var(--line-2))}
.badge.reg::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.badge.rev{color:var(--amber);border-color:color-mix(in oklab,var(--amber) 45%,var(--line-2))}
.badge.rev::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.badge.mat{color:var(--ink-soft)}
.badge.mat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mut)}

/* ---------- identity review (HERO) ---------- */
.merge{margin-top:var(--space-xl);display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:0}
.variants{display:flex;flex-direction:column;gap:10px}
.vchip{
  background:var(--card);border:1px solid var(--line-2);border-radius:9px;padding:11px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:relative;transition:transform .2s,border-color .2s
}
.vchip:hover{transform:translateX(3px);border-color:var(--line-2)}
.vchip .src{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.vcol-h{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);letter-spacing:.02em;margin:var(--space-xl) 0 -2px;width:calc((100% - 64px)/2)}
@media(max-width:900px){.vcol-h{width:100%}}
.vchip .nm{font-family:"Noto Sans JP";font-weight:500;font-size:15px}
.vchip .nm.lat{font-family:"Hanken Grotesk"}
.vchip .script{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.arrow{display:grid;place-items:center;color:var(--line-2)}
.arrow svg{width:40px;height:40px}
.canonical{
  background:var(--card);border:1.5px solid var(--ink);border-radius:10px;padding:var(--space-lg);
  position:relative;box-shadow:0 1px 2px oklch(0.4 0.02 258/.06)
}
.canonical .ttl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.canonical .nm{font-family:"Spectral",serif;font-size:30px;font-weight:600;margin:6px 0 2px}
.canonical .rom{color:var(--ink-soft);font-size:14px}
.canonical .row{display:flex;gap:18px;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--line);font-size:13px}
.canonical .row .k{color:var(--mut);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.canonical .row .vv{font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
/* seal */
.seal-stamp{
  position:absolute;top:var(--space-lg);right:var(--space-lg);
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:6px;
  border:1px solid color-mix(in oklab,var(--green) 40%,var(--line-2));
  background:color-mix(in oklab,var(--green) 7%,var(--card));color:var(--green);
  font-family:"Hanken Grotesk";font-weight:600;font-size:12px;letter-spacing:.01em;
  opacity:0;transform:translateY(-4px);animation:tagin .3s cubic-bezier(.2,.7,.2,1) forwards
}
.seal-stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.seal-stamp small{font-family:"Hanken Grotesk";font-size:11px;letter-spacing:.06em;color:var(--mut)}
@keyframes tagin{to{opacity:1;transform:none}}

.review-bar{display:flex;gap:var(--space);margin-top:var(--space-xl);align-items:center}
.btn{padding:10px 18px;border-radius:9px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid var(--line-2);background:var(--card);transition:.15s}
.btn:hover{background:var(--paper-2)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:hover{background:oklch(0.34 0.008 258)}
.btn.shu{background:var(--shu);color:var(--paper);border-color:var(--shu)}
.btn.shu:hover{background:oklch(0.52 0.165 32)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}
.btn.ghost:hover{background:var(--paper-2)}
.hint{font-size:12.5px;color:var(--mut);margin-left:auto}

/* ---------- upload ---------- */
.drop{
  margin-top:var(--space-xl);border:1.5px dashed var(--line-2);border-radius:10px;background:var(--card);
  padding:var(--space-3xl) var(--space-xl);text-align:center;transition:.2s
}
.drop:hover{border-color:var(--shu);background:color-mix(in oklab,var(--shu) 3%,var(--card))}
.drop .ic{width:46px;height:46px;margin:0 auto var(--space-md);color:var(--shu)}
.drop h3{font-family:"Spectral",serif;font-size:19px;font-weight:600}
.drop p{color:var(--mut);font-size:13.5px;margin-top:6px}
.parsed{margin-top:var(--space-xl);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.parsed .ph{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);background:var(--paper-2);border-bottom:1px solid var(--line);font-size:13px}
.parsed .ph b{font-weight:600}

/* ---------- review queue (collision) ---------- */
.collision{margin-top:var(--space-xl);border:1px solid var(--line-2);border-radius:10px;background:var(--card);overflow:hidden}
.collision .ch{padding:var(--space-md)var(--space-lg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.collision .ch .q{font-family:"Spectral",serif;font-size:21px;font-weight:600}
.collision .ch .why{font-size:13px;color:var(--ink-soft);margin-left:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.cand{padding:var(--space-lg);border-right:1px solid var(--line)}
.cand:last-child{border-right:0}
.cand .who{font-family:"Noto Sans JP";font-weight:500;font-size:17px}
.cand dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:var(--space-md) 0;font-size:13px}
.cand dt{color:var(--mut)}
.cand dd{font-weight:500;font-variant-numeric:tabular-nums}
.cand .recs{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}

/* ---------- billing ---------- */
.bill{margin-top:var(--space-xl);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-lg)}
.panel{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:var(--space-lg)}
.panel h3{font-family:"Spectral",serif;font-size:17px;font-weight:600;margin-bottom:var(--space-md)}
.usage-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.usage-row:last-child{border-bottom:0}
.usage-row .amt{font-variant-numeric:tabular-nums;font-weight:600}
.invoice-note{display:flex;gap:10px;align-items:flex-start;margin-top:var(--space-md);font-size:12.5px;color:var(--ink-soft);background:var(--paper-2);padding:var(--space);border-radius:8px}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1.5px solid var(--ink)}
.total .big{font-family:"Spectral",serif;font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- flow map ---------- */
.flow{margin-top:var(--space-xl);display:flex;flex-direction:column;gap:var(--space)}
.flowrow{display:flex;align-items:stretch;gap:var(--space)}
.fstep{
  flex:1;background:var(--card);border:1px solid var(--line-2);border-radius:11px;padding:var(--space-md);position:relative;min-width:0
}
.fstep .n{font-family:"Spectral",serif;font-size:13px;color:var(--shu);font-weight:600}
.fstep h4{font-family:"Noto Sans JP";font-size:14.5px;font-weight:500;margin:4px 0 3px}
.fstep .en{font-size:11px;color:var(--mut);letter-spacing:.02em}
.fstep .scr{font-size:11px;color:var(--shu);margin-top:8px;font-weight:600;cursor:pointer}
.fconn{display:grid;place-items:center;color:var(--line-2);width:22px}
.fbranch{margin-left:var(--space-2xl);border-left:1px dashed var(--line-2);padding-left:var(--space-lg)}

.legend{margin-top:var(--space-2xl);font-size:12.5px;color:var(--mut);display:flex;gap:var(--space-lg);flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:50%}

.empty-foot{margin-top:var(--space-3xl);padding-top:var(--space-lg);border-top:1px solid var(--line);font-size:12px;color:var(--mut);display:flex;justify-content:space-between}

/* state toggle (prototype affordance) */
.state-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--card)}
.seg-b{padding:5px 13px;font-size:12px;font-weight:600;color:var(--mut);background:transparent;border:0;border-right:1px solid var(--line);cursor:pointer;font-family:"Noto Sans JP"}
.seg-b:last-child{border-right:0}
.seg-b.on{background:var(--ink);color:var(--paper)}
.seg-b:not(.on):hover{background:var(--paper-2)}

/* first-run / empty / done */
.firstrun{margin-top:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg)}
.fr-card{background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:var(--space-2xl)}
.fr-card.center{text-align:center;align-items:center;display:flex;flex-direction:column;gap:8px}
.fr-seal{width:44px;height:44px;border:1px solid var(--line-2);border-radius:7px;color:var(--ink-soft);display:grid;place-items:center;font-family:"Noto Sans JP";font-weight:500;font-size:21px;margin-bottom:18px}
.fr-card.center .fr-seal{margin:0 0 6px}
.fr-seal.big{width:58px;height:58px;font-size:27px}
.fr-seal svg{width:22px;height:22px;color:var(--ink-soft)}
.glyph{width:48px;height:48px;border:1px solid var(--line-2);border-radius:9px;color:var(--ink-soft);display:grid;place-items:center;margin:0 auto var(--space-md)}
.glyph svg{width:24px;height:24px}
.glyph.ok{color:var(--green);border-color:color-mix(in oklab,var(--green) 35%,var(--line-2))}
.fr-card h3{font-family:"Spectral",serif;font-size:22px;font-weight:600}
.fr-card p{color:var(--ink-soft);max-width:58ch;margin:8px 0 20px;font-size:14px}
.fr-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px}
.fr-steps li{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:3px}
.fr-steps b{font-family:"Spectral",serif;color:var(--shu);font-size:14px}
.fr-steps .jp{font-weight:600;font-size:13.5px}
.fr-steps small{color:var(--mut);font-size:11.5px}
.ledger.ghost{opacity:.5}
.ledger.ghost .v{color:var(--mut)}
.action-key{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut)}
.action-key b{color:var(--ink-soft);font-weight:600;margin-right:5px;font-family:"Noto Sans JP"}
.action-key b.shu-t{color:var(--shu)}
/* hidden attribute must win over .firstrun{display:flex} etc. */
[hidden]{display:none!important}

/* toolbar / search / filter chips */
.toolbar{display:flex;align-items:center;gap:12px;margin-top:var(--space-xl);flex-wrap:wrap}
.search{flex:1;min-width:240px;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line-2);border-radius:8px;padding:9px 12px}
.search input{border:0;outline:0;background:transparent;width:100%;font-size:14px;color:var(--ink)}
.search svg{width:16px;height:16px;color:var(--mut);flex:none}
.fchips{display:inline-flex;gap:6px;flex-wrap:wrap}
.fchip{font-size:12.5px;font-weight:600;color:var(--ink-soft);background:var(--card);border:1px solid var(--line-2);border-radius:7px;padding:7px 12px;cursor:pointer}
.fchip:hover{background:var(--paper-2)}
.fchip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fchip .c{color:var(--mut);margin-left:7px;font-variant-numeric:tabular-nums}
.fchip.on .c{color:color-mix(in oklab,var(--paper) 65%,transparent)}
.tbl-wrap{margin-top:var(--space-md);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.tbl-wrap table{font-size:13.5px}
.tbl-wrap thead th{padding:11px var(--space-md);background:var(--paper-2)}
.tbl-wrap tbody td{padding:11px var(--space-md)}
.rowlink{cursor:pointer}
.muted-note{margin-top:var(--space-md);font-size:12.5px;color:var(--mut);max-width:74ch}

/* CSV spec */
.spec{margin-top:var(--space-xl);display:grid;grid-template-columns:1.35fr .65fr;gap:var(--space-lg);align-items:start}
.spec .panel h3{margin-bottom:10px}
.spec table{font-size:12.5px}
.spec td,.spec th{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left}
.spec th{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.req{color:var(--shu);font-weight:700;font-size:11px}
.opt{color:var(--mut);font-size:11px}
.codeblock{font-family:"Spectral",serif;font-size:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;white-space:pre;color:var(--ink-soft);font-variant-numeric:tabular-nums;line-height:1.6;margin-bottom:14px}
.valbar{display:flex;gap:20px;flex-wrap:wrap;margin-top:var(--space-lg);padding:12px 16px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;font-size:13px}
.valbar b{font-variant-numeric:tabular-nums}
.valbar .ok{color:var(--green);font-weight:600}

/* audit log op tags */
.op{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:6px;border:1px solid var(--line-2);color:var(--ink-soft);white-space:nowrap}
.op::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.op.merge{color:var(--green)}.op.split{color:var(--amber)}.op.reg{color:var(--shu)}.op.match{color:var(--mut)}.op.import{color:var(--ink-soft)}

/* settings */
.settings{margin-top:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg);max-width:780px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field label{font-size:12px;color:var(--mut);font-weight:600}
.field input,.field select{background:var(--paper);border:1px solid var(--line-2);border-radius:7px;padding:9px 11px;font-size:14px;color:var(--ink);font-family:inherit}
.field input:focus{outline:2px solid color-mix(in oklab,var(--shu) 35%,transparent);outline-offset:0;border-color:var(--shu)}
.field input[readonly]{background:var(--paper-2);color:var(--ink-soft)}
.field .fhint{font-size:11.5px;color:var(--mut)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.attr-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.dl-meta dd select{font:inherit;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:4px 8px}
.userrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.userrow:last-child{border-bottom:0}
.userrow .ava{width:30px;height:30px;border-radius:7px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:"Noto Sans JP";font-weight:700;font-size:12px;flex:none}
.userrow .role{margin-left:auto;font-size:12px;color:var(--mut)}

/* onboarding stepper */
.onb{margin-top:var(--space-xl);display:grid;grid-template-columns:248px 1fr;gap:var(--space-2xl);align-items:start}
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:8px;cursor:pointer;text-align:left;background:transparent;border:0;width:100%;font-family:inherit}
.step:hover{background:var(--paper-2)}
.step .num{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);display:grid;place-items:center;font-family:"Spectral",serif;font-size:13px;color:var(--mut);flex:none;font-variant-numeric:tabular-nums}
.step .t{font-size:13.5px;font-weight:600}
.step .d{font-size:11.5px;color:var(--mut);margin-top:1px}
.step.done .num{background:var(--shu);border-color:var(--shu);color:var(--paper)}
.step.cur{background:var(--paper-2)}
.step.cur .num{border-color:var(--ink);color:var(--ink)}
.onb-card{background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:var(--space-xl)}
.onb-card h3{font-family:"Spectral",serif;font-size:20px;font-weight:600;margin-bottom:4px}
.onb-card>p{color:var(--ink-soft);font-size:13.5px;margin-bottom:20px;max-width:60ch}
.terms{background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:14px;font-size:12.5px;color:var(--ink-soft);max-height:130px;overflow:auto;line-height:1.6;margin-bottom:14px}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;margin-bottom:18px}
.chk input{margin-top:3px}

/* artist detail */
.backlink{font-size:13px;color:var(--ink-soft);font-weight:600;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.backlink:hover{color:var(--ink)}
.detail-head{display:flex;align-items:flex-start;gap:var(--space-lg);margin-top:var(--space-md);flex-wrap:wrap}
.detail-head .big-isni{font-family:"Spectral",serif;font-variant-numeric:tabular-nums;font-size:21px;letter-spacing:.04em;margin-top:6px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-top:var(--space-lg);align-items:start}
.dl-meta{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px;margin-top:4px}
.dl-meta dt{color:var(--mut)}
.dl-meta dd{font-weight:600}
.vlist{display:flex;flex-direction:column;gap:7px;margin-top:4px}
@media(max-width:760px){.dgrid{grid-template-columns:1fr}}

@media(max-width:900px){.app{grid-template-columns:1fr}.side{display:none}.merge{grid-template-columns:1fr}.arrow{transform:rotate(90deg);margin:6px 0}.bill{grid-template-columns:1fr}.spec{grid-template-columns:1fr}.onb{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.screen{padding:var(--space-lg)}}

/* screen entry animation class for Django server-rendered pages */
.screen-enter{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}

/* Phase 2 — staff banner */
/* UI-SPEC "Staff Area Visual Distinction" §1: persistent banner on all @staff_member_required views */
/* Rendered in base_staff.html (extends base.html); never in base.html directly */
.ops-banner{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-2xl);background:var(--ink);color:var(--paper);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase}
.ops-banner .dot{width:6px;height:6px;border-radius:50%;background:var(--shu)}

/* Phase 2 — pipeline status */
/* UI-SPEC Screen 1C: .badge.pipe for processing/queued states; .badge.queued reuses .badge.pipe CSS */
.badge.pipe{color:var(--ink-soft);border-color:var(--line-2)}
.badge.pipe::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mut)}
.badge.queued{color:var(--ink-soft);border-color:var(--line-2)}
.badge.queued::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mut)}

/* Phase 3 — print invoice */
/* UI-SPEC Screen 3: .tekikaku-invoice document block, print styles */
/* UI-SPEC cleanups applied per plan 03-03 */
.tekikaku-invoice{background:var(--card);border:1px solid var(--ink);border-radius:var(--r);padding:var(--space-lg);margin-top:var(--space-lg);max-width:760px}
.tekikaku-invoice .inv-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1.5px solid var(--ink)}
.tekikaku-invoice .inv-title{font-family:"Spectral",serif;font-size:22px;font-weight:600}
.tekikaku-invoice .inv-meta{font-size:12.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:var(--space-xs);align-items:flex-end}
.tekikaku-invoice .inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-bottom:var(--space-lg)}
.tekikaku-invoice .inv-party h4{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mut);font-weight:600;margin-bottom:var(--space-sm)}
.tekikaku-invoice .inv-party p{font-size:13px;line-height:1.6}
.tekikaku-invoice .inv-lines{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:var(--space-md)}
.tekikaku-invoice .inv-lines thead th{text-align:left;font-weight:600;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--mut);padding:var(--space-sm) var(--space-md) var(--space-sm) 0;border-bottom:1px solid var(--line-2)}
.tekikaku-invoice .inv-lines tbody td{padding:8px var(--space-md) 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tekikaku-invoice .inv-lines tfoot td{padding:var(--space-sm) var(--space-md) var(--space-sm) 0;font-weight:600;border-top:1.5px solid var(--ink)}
.tekikaku-invoice .inv-tax-note{font-size:12px;color:var(--ink-soft);margin-bottom:var(--space-md)}
.tekikaku-invoice .inv-total{font-family:"Spectral",serif;font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1.5px solid var(--ink)}
.tekikaku-invoice .inv-reg{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--line);font-size:11px;color:var(--mut)}

@media print{
  .side,.top,.h-eyebrow,h1.page,.page-sub,.btn,.panel:not(.tekikaku-invoice),.invoice-note,nav,.foot,.backlink{display:none!important}
  .app{display:block}
  .main{min-width:unset}
  main{padding:0!important}
  .tekikaku-invoice{border:none;padding:0;max-width:100%}
  body{font-size:12px;color:#000;background:#fff}
  .tekikaku-invoice .inv-title{font-size:20px}
  .tekikaku-invoice .inv-total{font-size:24px}
}

/* i18n — ja/en language toggle (templates/_lang_toggle.html) */
/* Sidebar footer + public lookup page; active language marked via [aria-current] */
.lang-toggle{display:inline-flex;gap:4px;margin-top:var(--space-sm)}
.lang-toggle button{font:inherit;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--mut);background:none;border:1px solid var(--line-2);border-radius:6px;padding:3px 8px;cursor:pointer}
.lang-toggle button:hover{color:var(--ink)}
.lang-toggle button[aria-current]{color:var(--ink);border-color:var(--ink)}