/* DICOM 標註工作台 — tokens and components follow review_app/frontend/mbe.html
   (dark reading-room default + [data-theme="light"]). No web fonts, no CDN. */
:root{
  --void:#0b0f14; --panel:#121a23; --panel-2:#182230; --panel-3:#1e2a38;
  --line:#26333f; --line-soft:#1d2833;
  --ink:#e7eef5; --muted:#9aa8b6; --faint:#7f8e9c;
  --accent:#33c2d1; --accent-dim:#1c6d77; --accent-ink:#04171a;
  --ok:#41ba52; --ok-dim:#1f4a28; --warn:#e0a52b; --warn-dim:#4d3c10;
  --crit:#f2564d; --crit-dim:#4d1c1a;
  --shadow:0 1px 0 rgba(255,255,255,.02),0 8px 28px -14px rgba(0,0,0,.7);
  --r:12px; --r-sm:8px;
  --fs-xs:12.5px; --fs-sm:13px; --fs:14px; --fs-md:15.5px; --fs-lg:18px; --fs-xl:23px;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif;
  --topbar-h:53px;
  /* v2 role tokens (UX U08/U12/U13): text on tinted fills and input borders that meet WCAG AA */
  --accent-container:color-mix(in srgb,var(--accent) 22%,var(--panel)); --on-accent-container:var(--accent);
  --accent-strong:var(--accent);
  --ok-ink:#5cd16c; --warn-ink:var(--warn); --crit-ink:#ff7a70;
  --line-strong:#64778a;
  /* 3.4.0 progress chart: one series; checked against --panel (dataviz validator: band, chroma, 3:1) */
  --chart-bar:#1f9aa8;
  color-scheme:dark;
}
[data-theme="light"]{
  --void:#eef2f5; --panel:#ffffff; --panel-2:#f3f6f9; --panel-3:#e9eef3;
  --line:#d8e0e7; --line-soft:#e6ecf1;
  --ink:#17222c; --muted:#4a5966; --faint:#5f6d79;
  --accent:#0f8f9c; --accent-dim:#bfe6ea; --accent-ink:#ffffff;
  --ok:#1f9d3a; --ok-dim:#d6f0da; --warn:#b47b06; --warn-dim:#f6e9c6;
  --crit:#d23a30; --crit-dim:#f7dad7;
  --shadow:0 1px 2px rgba(20,40,60,.06),0 10px 30px -18px rgba(20,40,60,.35);
  --accent-container:#cfecef; --on-accent-container:#0b5f68;
  --accent-strong:#0b7a85;
  --ok-ink:#157a2c; --warn-ink:#7a5200; --crit-ink:#b0271e;
  --line-strong:#7d8c99;
  --chart-bar:#008e9e;
  color-scheme:light;
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{background:var(--void); color:var(--ink); font-family:var(--sans); font-size:var(--fs); line-height:1.5; -webkit-font-smoothing:antialiased; overflow:hidden;}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums;}
button{font:inherit; cursor:pointer; color:inherit; background:none; border:none;}
input,select{font:inherit; color:var(--ink);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
[hidden]{display:none !important;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important;}}

/* ── topbar ─────────────────────────────────────────────────────────────── */
.topbar{position:sticky; top:0; z-index:30; height:var(--topbar-h); display:flex; align-items:center; gap:14px; padding:10px 18px; background:color-mix(in srgb,var(--panel) 88%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; white-space:nowrap;}
.brand .mark{width:22px; height:22px; border-radius:6px; border:2px solid var(--accent); position:relative; flex:none;}
.brand .mark::after{content:""; position:absolute; inset:4px 7px 7px 4px; border:1.5px dashed var(--accent); border-radius:2px;}
.brand small{display:block; font-weight:500; font-size:var(--fs-xs); color:var(--muted); letter-spacing:.3px;}
.topbar .spacer{flex:1 1 0; min-width:0;}
/* 3.4.0 (H01): whatever the language and the admin entries, the account menu stays on screen.
   Buttons and links keep their size; the brand gives way (ellipsis), and below 1440 px the bar
   tightens. Checked at 1280, 1366 and 1440 px in both languages, for admins and annotators
   (ci/auth_e2e.py). 3.4.1: the research-use tag is gone (user's instruction, 2026-10-29). */
.topbar > *{flex-shrink:0;}
.topbar .brand{flex-shrink:4; min-width:6ch; overflow:hidden;}
.topbar .brand > div{min-width:0; overflow:hidden;}
.topbar .brand > div > span,.topbar .brand small{display:block; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:1439px){
  .topbar{gap:10px; padding:10px 14px;}
}
.tbtn{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:600; padding:7px 13px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel-2); white-space:nowrap;}
.tbtn:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--accent); color:var(--accent-strong);}
.tbtn:disabled,.tbtn[aria-disabled="true"]{opacity:.5; cursor:not-allowed;}
.tbtn:active:not(:disabled):not([aria-disabled="true"]),.seg button:active,.chip:active,.palette button:active{filter:brightness(.88);}
.tbtn.primary{background:var(--accent-strong); color:var(--accent-ink); border-color:var(--accent-strong);}
.tbtn.primary:hover:not(:disabled):not([aria-disabled="true"]){filter:brightness(1.06); color:var(--accent-ink);}
.tbtn.primary{min-height:40px; justify-content:center;}   /* 3.1.0: primary actions ≥ 40 px */
.tbtn.primary:active:not(:disabled):not([aria-disabled="true"]){filter:brightness(.9);}
.tbtn.sm{font-size:var(--fs-xs); padding:4px 10px;}
.tbtn.danger:hover:not(:disabled){border-color:var(--crit); color:var(--crit-ink);}
.tbtn.icon{padding:7px 11px;}

/* ── status pills (spill) ───────────────────────────────────────────────── */
.spill{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.spill .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}
.spill.ok{color:var(--ok-ink); background:var(--ok-dim);}
.spill.warn{color:var(--warn-ink); background:var(--warn-dim);}
.spill.crit{color:var(--crit-ink); background:var(--crit-dim);}
.spill.pending{color:var(--muted); background:var(--panel-3);}
.spill.accent{color:var(--on-accent-container); background:var(--accent-container);}
.spill.ghost{color:var(--muted); background:transparent; box-shadow:inset 0 0 0 1px var(--line); font-weight:600;}

/* ── shell: worklist rail | viewer | editor panel ───────────────────────── */
.shell{display:grid; grid-template-columns:280px minmax(0,1fr) 332px; height:calc(100vh - var(--topbar-h)); height:calc(100dvh - var(--topbar-h));}
.worklist{overflow:auto; border-right:1px solid var(--line); background:var(--panel); padding:14px 12px;}
.wl-h{display:flex; align-items:baseline; justify-content:space-between; padding:2px 6px 10px;}
.wl-h b{font-size:var(--fs-sm); letter-spacing:.4px; color:var(--muted);}
.wl-h span{font-size:var(--fs-xs); color:var(--faint);}
.addbtn{width:calc(100% - 8px); margin:0 4px 12px; justify-content:center; display:flex; align-items:center; gap:6px; padding:9px; font-size:var(--fs-sm); font-weight:600; color:var(--on-accent-container); background:var(--accent-container); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); border-radius:var(--r-sm);}
.addbtn:hover{filter:brightness(1.05);}
.empty{border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:16px; text-align:center; color:var(--faint); font-size:var(--fs-sm);}

.pcard{width:100%; text-align:left; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:11px 12px; border-radius:var(--r-sm); border:1px solid transparent; margin-bottom:6px; position:relative; cursor:pointer;}
.pcard:hover{background:var(--panel-2);}
.pcard[aria-current="true"]{background:var(--panel-2); border-color:var(--line);}
.pcard[aria-current="true"]::before{content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--accent);}
.pcard .nm{font-weight:600; font-size:var(--fs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* W01: the status pill has its own row, so the series name keeps the full card width */
.pcard .stat{grid-column:1 / 3; min-width:0; display:flex; align-items:center; gap:8px;}
.pcard .stat .tbtn{flex:none;}
.pcard .stat{flex-wrap:wrap;}
.pcard .stat .spill{max-width:100%; min-width:0; white-space:normal; line-height:1.35;}   /* X03: wrap, never cut */
.pcard .stat .spill .tx{min-width:0;}
.pcard .meta{grid-column:1 / 3; font-size:var(--fs-xs); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pcard .prog{grid-column:1 / 3; display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--faint); margin-top:4px;}
.bar{flex:1; height:5px; border-radius:999px; background:var(--panel-3); overflow:hidden;}
.bar i{display:block; height:100%; background:var(--ok); border-radius:999px; transition:width .25s;}
.pcard .acts{grid-column:1 / 3; display:flex; gap:6px; margin-top:6px; align-items:center;}
.pcard .acts .grow{flex:1;}

/* ── viewer ─────────────────────────────────────────────────────────────── */
.viewer{display:flex; flex-direction:column; min-width:0; min-height:0;}
.vtools{display:flex; align-items:center; flex-wrap:wrap; gap:6px 6px; padding:8px 14px; border-bottom:1px solid var(--line); background:var(--panel);}
.vtools .sep{width:1px; align-self:stretch; background:var(--line); margin:2px 0;}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;}
.seg button{font-size:var(--fs-sm); font-weight:600; padding:6px 9px; color:var(--muted); background:var(--panel-2); border-right:1px solid var(--line);}
.seg button:last-child{border-right:none;}
.seg button:hover{color:var(--accent-strong);}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{background:var(--accent-container); color:var(--on-accent-container);}
.seg kbd,.tbtn kbd{font-family:var(--mono); font-size:11px; margin-left:3px;}
.chip{font-size:var(--fs-xs); font-weight:600; padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--panel-2);}
.chip:hover{color:var(--accent-strong);}
.chip[aria-pressed="true"]{background:var(--accent-container); color:var(--on-accent-container); border-color:transparent;}
.wlbox{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--faint);}
.vtools .chip{padding:4px 7px;}
.seglbl{display:inline-flex; align-items:center; padding:0 8px; font-size:var(--fs-xs); color:var(--muted); background:var(--panel); border-right:1px solid var(--line);}
.wlbox input{width:7ch; min-width:58px; box-sizing:content-box; padding:4px 6px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel-2); font-family:var(--mono); font-size:var(--fs-xs);}
/* 3.1.0: zoom lives on the image, bottom right (the toolbar stays one row at 1280 px) */
.zoomdock{position:absolute; right:12px; bottom:12px; z-index:3; display:flex; flex-direction:column; width:52px; border-radius:10px; overflow:hidden; background:rgba(11,15,20,.86); border:1px solid #64778a;}
.zoomdock button{min-height:34px; color:#e8eef3; font-size:16px; font-weight:700; border-bottom:1px solid #26333f;}
.zoomdock button:last-child{border-bottom:none; font-size:var(--fs-xs);}
.zoomdock .zval{display:flex; align-items:center; justify-content:center; min-height:26px; font-size:11.5px; font-weight:600; color:#cfd9e2; border-bottom:1px solid #26333f;}
.zoomdock button:hover{background:#1e2a38; color:#33c2d1;}
.zoomdock button:active{background:#26333f;}
.zoomdock button:focus-visible{outline:2px solid #33c2d1; outline-offset:-2px;}
.tbtn[aria-pressed="true"]{background:var(--accent-container); color:var(--on-accent-container); border-color:transparent;}
/* V13: hover must not swap the pressed ink back to --accent (3.1:1 on the light container) */
.tbtn[aria-pressed="true"]:hover:not(:disabled){color:var(--on-accent-container); border-color:var(--accent);}

.stage{position:relative; flex:1 1 auto; min-height:0; background:#000; overflow:hidden;}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair;}
.stage canvas.tool-select{cursor:default;}
.stage canvas.hov-body{cursor:move;}
.stage canvas.hov-nw,.stage canvas.hov-se{cursor:nwse-resize;}
.stage canvas.hov-ne,.stage canvas.hov-sw{cursor:nesw-resize;}
.stage canvas.hov-n,.stage canvas.hov-s{cursor:ns-resize;}
.stage canvas.hov-e,.stage canvas.hov-w{cursor:ew-resize;}
.stage canvas.panning{cursor:grab;}
.stage canvas.grabbing{cursor:grabbing;}
.stage .placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#9aa8b6; font-size:var(--fs-md); text-align:center; padding:24px;}
.stage .placeholder small{color:#7f8e9c; font-size:var(--fs-sm);}
.stage .loading{position:absolute; right:12px; top:10px; z-index:2;}
.ovl{position:absolute; left:12px; top:10px; z-index:2; pointer-events:none; font-family:var(--mono); font-size:12.5px; line-height:1.55; color:#cfd9e2; text-shadow:0 1px 2px #000;}
.ovl b{color:#fff;}
.ovl .warn{color:#e0a52b;}

.slicebar{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto auto; align-items:center; gap:10px; padding:8px 14px 10px; border-top:1px solid var(--line); background:var(--panel);}
.slicebar .pos{font-family:var(--mono); font-size:var(--fs-sm); font-weight:700; min-width:76px;}
.slicebar .pos small{color:var(--faint); font-weight:500;}
.track{position:relative; height:30px;}
.track input{position:absolute; left:0; right:0; top:0; width:100%; height:24px; margin:0; accent-color:var(--accent); cursor:pointer;}
.track canvas{position:absolute; left:8px; right:8px; bottom:-2px; height:12px; width:calc(100% - 16px); pointer-events:none;}
.legend{display:flex; gap:10px; font-size:var(--fs-xs); color:var(--faint); white-space:nowrap;}
.legend > span{display:inline-flex; align-items:center; gap:4px;}
.legend .lbar{display:inline-block; width:3px; height:10px; border-radius:1px; background:var(--accent);}
.legend .ldot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--warn);}

/* ── editor panel ───────────────────────────────────────────────────────── */
.edpanel{border-left:1px solid var(--line); padding:12px; background:var(--panel-2); overflow:hidden; display:flex; flex-direction:column; min-height:0;}
.edscroll{flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px;}
.edhead{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.edhead b{font-size:var(--fs-md);}
.edstate{font-size:12.5px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--faint); margin-left:auto; white-space:nowrap;}
.edstate.dirty{color:var(--warn-ink); border-color:var(--warn);}
.edstate.saved{color:var(--muted);}
.edstate.reviewed{color:var(--ok-ink); border-color:var(--ok);}
.edstate.err{color:var(--crit-ink); border-color:var(--crit);}
.edgrp{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:.4px; color:var(--muted); margin:12px 0 6px;}
.edgrp .n{font-variant-numeric:tabular-nums; color:var(--faint);}
.edgrp .tbtn{margin-left:auto;}
.who{display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--faint);}
.who input{flex:1; min-width:0; padding:5px 8px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel); font-size:var(--fs-sm);}
.palette{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px;}
.palette button{display:flex; align-items:center; gap:7px; text-align:left; font-size:13px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--panel); min-width:0;}
.palette button:hover{border-color:var(--accent);}
.palette button[aria-pressed="true"]{color:var(--ink); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); font-weight:700;}
.palette .lbl{min-width:0; flex:1; line-height:1.25; overflow-wrap:anywhere;}   /* X03: wrap, never cut */
.swatch{width:11px; height:11px; border-radius:2px; flex:none;}
.addcls{display:grid; grid-template-columns:1fr 1fr auto; gap:6px; margin-top:6px;}
.addcls input{min-width:0; padding:5px 7px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel); font-size:var(--fs-xs);}
.edlist{display:flex; flex-direction:column;}
.edrow{display:flex; align-items:center; gap:8px; padding:6px 9px; margin-bottom:4px; border:1px solid var(--line); border-left-width:3px; border-radius:6px; background:var(--panel); cursor:pointer; font-size:var(--fs-sm); transition:border-color .1s, background .1s;}
.edrow:hover{border-color:var(--accent);}
.edrow.sel{border-color:var(--accent); background:var(--accent-container);}
.edrow{flex-wrap:wrap;}
.edrow .cls{font-weight:600; white-space:normal; overflow-wrap:anywhere; min-width:2.5em; flex:0 1 auto;}   /* round 2: never cut a class name */
.edrow .xy{color:var(--muted); font-family:var(--mono); font-size:12px; white-space:nowrap;}
.edrow .tags{margin-left:auto; flex:none; display:flex; gap:4px; align-items:center;}
.edrow .tag{font-size:11.5px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); color:var(--faint); white-space:nowrap;}
.edrow .tag.model{color:var(--warn-ink); border-color:color-mix(in srgb,var(--warn) 60%,transparent); border-style:dashed;}
.edrow .tag.human{color:var(--ok-ink); border-color:color-mix(in srgb,var(--ok) 60%,transparent);}
.edrow .tag.score{font-family:var(--mono);}
.edrow.off{opacity:.5; border-style:dashed;}
.edrow.off .cls{text-decoration:line-through;}
.eye{flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--panel-2); font-size:13px;}
.eye:hover{border-color:var(--accent); color:var(--accent);}
.eye[aria-pressed="false"]{color:var(--faint); background:transparent;}
.ednote{font-size:var(--fs-xs); color:var(--faint); line-height:1.55; margin-top:6px;}
.ednote.model{color:var(--warn-ink);}
.edfoot{flex:none; border-top:1px solid var(--line); padding-top:10px; margin-top:8px; display:flex; flex-direction:column; gap:6px;}
.edfoot .row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;}
.edfoot .row2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px;}
.edfoot .row2 .tbtn{min-width:0; white-space:normal; text-align:center; line-height:1.25;}
.edfoot .tbtn{justify-content:center;}
.edfoot .big{padding:10px; font-size:var(--fs);}
.chk{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--muted); cursor:pointer; min-height:28px;}
.chk input{width:16px; height:16px; accent-color:var(--accent); margin:0;}

/* ── modal, dropzone, help, toast ───────────────────────────────────────── */
.modal-bg{position:fixed; inset:0; background:rgba(4,8,12,.66); backdrop-filter:blur(3px); z-index:60; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-bg.on{display:flex;}
.mbox{width:min(680px,100%); max-height:88vh; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);}
.mhead{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); flex:none;}
.mhead b{font-size:var(--fs-md);}
.mhead .sub{font-size:var(--fs-sm); color:var(--faint);}
.mhead .x{margin-left:auto; font-size:16px; line-height:1; padding:8px 12px; border:1px solid var(--line); border-radius:8px; color:var(--muted);}
.mhead .x:hover{border-color:var(--accent); color:var(--accent);}
.mbody{overflow-y:auto; padding:16px 18px;}
.mfoot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--line); flex:none;}
.mfoot .grow{flex:1;}
.dropzone{border:1.5px dashed var(--line-strong); border-radius:var(--r); padding:28px 18px; text-align:center; cursor:pointer; transition:border-color .12s, background .12s;}
.dropzone:hover{border-color:var(--accent);}
.dropzone.drag{border-color:var(--accent); background:var(--accent-container);}
.dropzone .big{font-size:var(--fs-md); color:var(--ink); font-weight:600; margin-bottom:5px;}
.dropzone .sub{font-size:var(--fs-xs); color:var(--faint);}
.pick{display:flex; gap:8px; justify-content:center; margin-top:12px;}
.upinfo{margin-top:12px; font-size:var(--fs-sm); color:var(--muted);}
.upinfo b{color:var(--ink);}
.upbar{margin-top:10px; height:6px;}
.upbar i{background:var(--accent);}
.upbar i.w0{width:0;}
.mfoot .limits{font-size:var(--fs-xs); color:var(--faint);}
.chk.mb6{margin-bottom:6px;}
.vstack6{display:flex; flex-direction:column; gap:6px;}
.rejlist{margin-top:12px; max-height:200px; overflow:auto; border:1px solid var(--line-soft); border-radius:var(--r-sm);}
.rejlist table{width:100%; border-collapse:collapse; font-size:var(--fs-xs);}
.rejlist th{position:sticky; top:0; text-align:left; background:var(--panel-3); color:var(--muted); font-weight:700; padding:6px 10px;}
.rejlist td{padding:5px 10px; border-top:1px solid var(--line-soft);}
.rejlist td:first-child{font-family:var(--mono); color:var(--ink); word-break:break-all;}
.rejlist td:last-child{color:var(--warn-ink);}
.form{display:grid; grid-template-columns:8.5em 1fr; gap:12px 14px; align-items:center;}
.form > label{font-size:var(--fs-sm); color:var(--muted);}
.form input[type="number"],.form select{padding:6px 8px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel-2); width:120px;}
.form select{width:auto; min-width:200px; padding-right:30px; justify-self:start;}
.confirmbox{width:min(520px,100%);}
.confirmbox .mbody{font-size:var(--fs); line-height:1.7; color:var(--muted);}
.radios{display:flex; gap:6px; flex-wrap:wrap;}
.serlist{max-height:170px; overflow:auto; border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:6px 10px; display:flex; flex-direction:column; gap:4px;}
.serlist .chk{font-size:var(--fs-xs);}
.serlist .chk span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.preview{margin-top:16px; border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:12px 14px; font-size:var(--fs-sm); color:var(--muted); min-height:64px;}
.preview .nums{display:flex; gap:22px; flex-wrap:wrap;}
.preview .nums div{display:flex; flex-direction:column;}
.preview .nums b{font-family:var(--mono); font-size:var(--fs-lg); color:var(--ink);}
.preview .warnl{color:var(--warn-ink); margin-top:8px;}
.preview .cls{margin-top:8px; font-size:var(--fs-xs);}
.helpbox{width:min(680px,100%);}
.helpgrp{border-bottom:1px solid var(--line-soft); padding:13px 0 11px;}
.helpgrp:last-child{border-bottom:none;}
.helpgrp h4{margin:0 0 9px; font-size:var(--fs-sm); letter-spacing:.6px; color:var(--accent); font-weight:700;}
.helpgrp dl{display:grid; grid-template-columns:12em 1fr; column-gap:16px; margin:0;}
.helpgrp dt,.helpgrp dd{padding:6px 0; border-top:1px solid var(--line-soft); margin:0;}
.helpgrp dt:first-of-type,.helpgrp dt:first-of-type + dd{border-top:none;}
.helpgrp dd{font-size:var(--fs); color:var(--ink);}
.helpgrp .helpnote{margin:8px 0 0; font-size:var(--fs-sm); color:var(--muted); line-height:1.6;}
kbd{font-family:var(--mono); font-size:var(--fs-xs); background:var(--panel-3); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:2px 6px; color:var(--ink); white-space:nowrap;}
.spin{width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; display:inline-block; animation:sp .8s linear infinite; vertical-align:-2px;}
@keyframes sp{to{transform:rotate(360deg);}}
.snack{position:fixed; left:50%; bottom:64px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; display:flex; align-items:center; gap:12px; background:var(--panel-3); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); padding:9px 10px 9px 18px; border-radius:12px; font-size:var(--fs-sm); font-weight:600;  z-index:80; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s; max-width:min(760px,92vw);}
.snack.on{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; visibility:visible;}
.snack.err{border-color:var(--crit);}
.snack.err .msg{color:var(--crit-ink);}
.snack .msg{line-height:1.5;}
.snack .act{font-weight:700; color:var(--on-accent-container); background:var(--accent-container); padding:6px 12px; border-radius:8px; white-space:nowrap;}
.snack .x{color:var(--muted); padding:6px 9px; border-radius:8px; white-space:nowrap;}
.snack .x:hover,.snack .act:hover{filter:brightness(1.1);}

@media (max-width:1280px){ .shell{grid-template-columns:236px minmax(0,1fr) 300px;} }

/* ── v2: worklist groups, kind chips, wheel toggle, upload progress, confirm ── */
.wl-tools{display:flex; gap:6px; padding:0 4px 10px;}
.wl-tools .tbtn{flex:1; justify-content:center; white-space:normal; min-width:0; text-align:center;}
.wgrp{margin:0 0 10px;}
.wgrp > .wgh{display:flex; align-items:baseline; gap:6px; padding:6px 6px 6px; font-size:var(--fs-xs); color:var(--muted); font-weight:700; letter-spacing:.3px; border-top:1px solid var(--line-soft);}
.wgrp > .wgh .n{margin-left:auto; color:var(--faint); font-weight:600; white-space:nowrap;}
details.wgrp > summary{cursor:pointer; list-style:none;}
details.wgrp > summary::-webkit-details-marker{display:none;}
details.wgrp > summary::before{content:"▸"; margin-right:4px;}
details.wgrp[open] > summary::before{content:"▾";}
.pcard .nm{background:none; border:none; padding:0; text-align:left; color:var(--ink); cursor:pointer; font:inherit; font-weight:600;}
.pcard .tags{grid-column:1 / 3; display:flex; gap:5px; flex-wrap:wrap; margin-top:2px;}
.kchip{font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted); white-space:nowrap;}
.kchip.axial{color:var(--on-accent-container); background:var(--accent-container); border-color:transparent;}
.kchip.new{color:var(--accent-ink); background:var(--accent-strong); border-color:transparent;}
.addbtn.warn-dot::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--warn); margin-left:6px;}
.upchip{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-xs); font-weight:700; padding:5px 11px; border-radius:999px; color:var(--on-accent-container); background:var(--accent-container); white-space:nowrap;}
.vbanner{padding:6px 14px; font-size:var(--fs-xs); color:var(--on-accent-container); background:var(--accent-container); border-bottom:1px solid var(--line);}
.vbanner:not([hidden]){display:flex; align-items:center; gap:12px;}
.upopts{display:flex; flex-direction:column; gap:2px; margin-top:12px;}
.upopts .why{font-size:var(--fs-xs); color:var(--faint); margin-left:24px;}
.upsum{display:flex; align-items:baseline; gap:10px; font-size:var(--fs-sm); color:var(--muted);}
.upsum b{color:var(--ink);}
.upsum .eta{margin-left:auto; color:var(--faint);}
.uprows{margin-top:12px; display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto;}
.uprow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; padding:8px 10px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--panel-2);}
.uprow .nm{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.uprow .sub{grid-column:1 / 3; display:flex; gap:10px; align-items:center; font-size:var(--fs-xs); color:var(--muted);}
.uprow .sub .bar{max-width:220px;}
.bar.ind i{width:35% !important; animation:ind 1.2s ease-in-out infinite;}
@keyframes ind{0%{margin-left:-35%;} 100%{margin-left:100%;}}
.bar.accent i{background:var(--accent);}
.upbanner{margin-top:12px; padding:10px 12px; border-radius:var(--r-sm); font-size:var(--fs-sm); line-height:1.6;}
.upbanner.crit{color:var(--crit-ink); background:var(--crit-dim);}
.upbanner.info{color:var(--muted); background:var(--panel-2);}
.upgroup{margin-top:14px;}
.upgroup h4{margin:0 0 6px; font-size:var(--fs-sm); color:var(--muted);}
.upgroup .row{display:flex; gap:10px; font-size:var(--fs-sm); padding:4px 0; border-top:1px solid var(--line-soft);}
.upgroup .row .n{margin-left:auto; color:var(--muted); white-space:nowrap;}
.upgroup .row.muted{color:var(--muted);}
.upgroup details{font-size:var(--fs-xs); color:var(--faint);}
.whohint{font-size:var(--fs-xs); color:var(--warn-ink); margin:4px 0 0;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.stage canvas:focus{outline:none;}
.stage canvas:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.edlist:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.edrow:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.tbtn kbd{font-family:var(--mono); font-size:11px; margin-left:2px;}   /* N5: no opacity, the label colour already passes 4.5:1 */
.palette kbd{font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink); margin-left:2px;}
.linkbtn{color:var(--on-accent-container); text-decoration:underline; padding:0 2px; font-size:inherit; min-height:24px;}
.linkbtn:disabled{opacity:.5; cursor:not-allowed;}

.tbtn.danger-fill{background:var(--crit-dim); color:var(--crit-ink); border-color:var(--crit);}
.tbtn.danger-fill:hover{filter:brightness(1.08);}
.edrow button.cls{background:none; border:none; padding:0; color:inherit; font:inherit; font-weight:600; text-align:left; cursor:pointer; min-height:24px;}
/* ── v3: heat overlay controls, prelabel mode picker ── */
.slicetail{display:flex; align-items:center; gap:12px;}
.heatbox{display:inline-flex; align-items:center; gap:6px;}
.heatbox input[type="range"]{width:90px; accent-color:var(--accent); height:24px; margin:0;}
.pmmodes{display:flex; flex-direction:column; gap:8px;}
.pmmodes button{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--panel-2); min-height:44px;}
.pmmodes button b{font-size:var(--fs); color:var(--ink);}
.pmmodes button span{font-size:var(--fs-sm); color:var(--muted); line-height:1.5;}
.pmmodes button[aria-checked="true"]{border-color:var(--accent); background:var(--accent-container); box-shadow:inset 0 0 0 1px var(--accent);}
.pmmodes button[aria-checked="true"] b{color:var(--on-accent-container);}
.pmnote{margin:12px 0 0; font-size:var(--fs-sm); color:var(--muted); line-height:1.6;}
.warnbanner{color:var(--warn-ink); background:var(--warn-dim);}
.kchip.warnchip{color:var(--warn-ink); background:var(--warn-dim); border-color:transparent;}
/* ── v3 r3: heat legend, inline key feedback, degraded notes ── */
.heatlegend{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:var(--faint);}
.heatramp{display:inline-block; width:56px; height:8px; border-radius:2px; border:1px solid var(--line-strong);}
.stagemsg{position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:3; pointer-events:none; max-width:min(560px,90%); padding:6px 12px; border-radius:var(--r-sm); background:rgba(11,15,20,.86); color:#e8eef3; font-size:var(--fs-sm); font-weight:600; border:1px solid var(--line-strong);}
.stagemsg.err{border-color:var(--crit); color:#ffb4ad;}
.pmwarn{margin:10px 0 0; padding:8px 10px; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--warn-ink); background:var(--warn-dim);}
.pmmodes button.last b::after{content:attr(data-last); margin-left:8px; font-size:var(--fs-xs); font-weight:500; color:var(--muted);}
.upopts .why.warn{color:var(--warn-ink);}

/* ── 3.1.0: mouse parity, prelabel bar, suggestion card, on-image actions ── */
.wlfind{display:block; padding:0 4px 10px;}
.wlfind input{width:100%; min-height:32px; padding:5px 10px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--panel-2); font-size:var(--fs-sm);}
.wlfind input::placeholder{color:var(--faint);}
.navbtn{padding:4px 0; width:34px; height:32px; justify-content:center; font-size:18px; line-height:1;}

/* the prelabel bar: always says what happened to this series and what to do next */
.prebar{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:6px 14px; min-height:40px; font-size:var(--fs-sm); border-bottom:1px solid var(--line); background:var(--panel-2); color:var(--ink);}
.prebar[hidden]{display:none;}
.prebar .pbtext{flex:1 1 220px; min-width:0;}
.prebar .pbicon{width:9px; height:9px; border-radius:50%; flex:none; background:var(--muted);}
.prebar.tone-info .pbicon{background:var(--ok);}
.prebar.tone-warn{background:var(--warn-dim);} .prebar.tone-warn .pbtext{color:var(--warn-ink);} .prebar.tone-warn .pbicon{background:var(--warn);}
.prebar.tone-crit{background:var(--crit-dim);} .prebar.tone-crit .pbtext{color:var(--crit-ink);} .prebar.tone-crit .pbicon{background:var(--crit);}
.prebar.tone-busy .pbicon{background:transparent; width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--accent); animation:sp .8s linear infinite;}
.prebar .tbtn{flex:none;}
.heatlegend .notp{margin-left:4px; color:var(--muted); font-weight:600;}

/* suggestion card at the top of the panel */
.sugcard{flex:none; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); padding:10px; margin-bottom:10px; display:flex; flex-direction:column; gap:6px;}
.sughead{display:flex; align-items:baseline; gap:8px;}
.sughead b{font-size:var(--fs-sm);}
.sughead .sub{font-size:var(--fs-xs); color:var(--faint);}
.sugbtn{width:100%;}
.sugbtn[aria-disabled="true"]{background:var(--panel-3); color:var(--muted); border-color:var(--line); opacity:1;}
.sugbtn[aria-disabled="true"] kbd{color:var(--muted);}
.sugone{align-self:flex-start;}
.sugwhy{margin:0; font-size:var(--fs-sm); color:var(--muted); line-height:1.55; display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px;}
.sugwhy:empty{display:none;}
.sugwhy .linkbtn{font-weight:600;}

/* on-image actions: ✓ ✕ on unconfirmed model boxes, the selected box's toolbar, the context menu */
.boxlayer{position:absolute; inset:0; pointer-events:none; z-index:3;}
.mchip{position:absolute; display:flex; gap:2px; pointer-events:auto; padding:2px; border-radius:8px; background:rgba(11,15,20,.88); border:1px solid #64778a;}
.mchip button{width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; font-size:14px; font-weight:700; color:#e8eef3;}
.mchip button:hover{background:#1e2a38;}
.mchip button.ok{color:#5cd16c;} .mchip button.no{color:#ff7a70;}
.mchip button:focus-visible{outline:2px solid #33c2d1; outline-offset:1px;}
.boxbar{position:absolute; z-index:4; display:flex; gap:4px; padding:4px; border-radius:10px; background:var(--panel); border:1px solid var(--line-strong); box-shadow:var(--shadow);}
.boxbar[hidden]{display:none;}
.boxbar .tbtn{min-height:32px;}
.boxbar .swatch{width:10px; height:10px;}
.menu{position:absolute; z-index:5; min-width:220px; max-width:360px; padding:6px 0; border-radius:10px; background:var(--panel); border:1px solid var(--line-strong); box-shadow:var(--shadow); font-size:var(--fs-sm);}
.menu[hidden]{display:none;}
.menu [role="menuitem"]{display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:6px 14px; text-align:left; color:var(--ink);}
.menu [role="menuitem"]:hover:not([aria-disabled="true"]),.menu [role="menuitem"]:focus-visible{background:var(--accent-container); color:var(--on-accent-container); outline:none;}
.menu [role="menuitem"][aria-disabled="true"]{color:var(--faint); cursor:not-allowed;}
.menu [role="menuitem"] .k{margin-left:auto; font-family:var(--mono); font-size:var(--fs-xs); color:var(--faint);}
.menu [role="menuitem"] .why{display:block; font-size:var(--fs-xs); color:var(--faint);}
.menu .mtitle{padding:4px 14px 6px; font-size:var(--fs-xs); color:var(--faint); font-weight:700;}
.menu hr{border:none; border-top:1px solid var(--line); margin:6px 0;}

/* tooltip: label + shortcut, on hover (after a pause) and on keyboard focus */
.tip{position:fixed; z-index:90; max-width:320px; padding:6px 10px; border-radius:6px; background:#e7eef5; color:#0b0f14; font-size:var(--fs-xs); font-weight:600; line-height:1.45; box-shadow:0 4px 14px rgba(0,0,0,.35);}   /* WCAG 1.4.13: hoverable */
[data-theme="light"] .tip{background:#17222c; color:#ffffff;}
.tip kbd{margin-left:6px; background:transparent; border-color:currentColor; color:inherit;}
.addclsbox{margin-top:6px; font-size:var(--fs-xs); color:var(--muted);}
.addclsbox > summary{cursor:pointer; min-height:28px; display:flex; align-items:center; list-style:none;}
.addclsbox > summary::-webkit-details-marker{display:none;}
.addclsbox > summary:hover{color:var(--accent-strong);}
/* short screens (1280×720): the box list keeps room */
@media (max-height:800px){
  .sughead .sub{display:none;}
  .sugcard{padding:8px; gap:4px; margin-bottom:8px;}
  .edfoot{gap:4px; padding-top:8px;}
  .edfoot .tbtn:not(.big){padding-top:5px; padding-bottom:5px;}
  .edfoot .big{padding:8px;}
  .edgrp{margin:8px 0 4px;}
}

/* ── round 2 ── */
.heatbtn{gap:6px;}
.heatbtn .hb-ico{width:12px; height:12px; border-radius:3px; border:2px solid currentColor; flex:none;}
.heatbtn[aria-pressed="true"]{background:var(--accent-strong); color:var(--accent-ink); border-color:var(--accent-strong);}
.heatbtn[aria-pressed="true"]:hover:not(:disabled){color:var(--accent-ink); filter:brightness(1.06);}
.heatbtn[aria-pressed="true"] .hb-ico{background:currentColor;}
.wheeldock{position:absolute; left:12px; bottom:12px; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.wheelseg{display:flex; align-items:center; border-radius:10px; overflow:hidden; background:rgba(11,15,20,.86); border:1px solid #64778a; font-size:var(--fs-xs);}
.wheelseg .wlab{padding:0 8px; color:#cfd9e2;}
.wheelseg button{min-height:32px; padding:0 12px; color:#cfd9e2; font-weight:600; border-left:1px solid #26333f;}
.wheelseg button[aria-checked="true"]{background:#1c6d77; color:#ffffff;}
.wheelseg button:hover{color:#33c2d1;} .wheelseg button[aria-checked="true"]:hover{color:#ffffff;}
.wheelseg button:focus-visible{outline:2px solid #33c2d1; outline-offset:-2px;}
.wheelhint{min-height:36px; padding:6px 12px; border-radius:10px; background:#e7eef5; color:#0b0f14; font-size:var(--fs-sm); font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.45); text-align:left;}
.wheelhint:hover{background:#ffffff;}
.wlbadge{position:absolute; z-index:4; pointer-events:none; padding:3px 8px; border-radius:6px; background:rgba(11,15,20,.9); color:#e8eef3; border:1px solid #64778a; font-size:var(--fs-xs); white-space:nowrap;}
.boxbar{flex-wrap:wrap; max-width:340px;}
.bbnudge{flex-basis:100%; display:flex; gap:4px; align-items:center; padding-top:4px; border-top:1px solid var(--line);}
.bbnudge[hidden]{display:none;}
.bbnudge button{width:32px; height:32px; border-radius:6px; border:1px solid var(--line); background:var(--panel-2); font-weight:700;}
.bbnudge button:hover{border-color:var(--accent); color:var(--accent-strong);}
.bbnudge button:active{filter:brightness(.88);}
.bbnudge .sep{width:1px; align-self:stretch; background:var(--line); margin:0 2px;}
.stage canvas.hov-pick{cursor:pointer;}
/* ── round 3 ── */
.stage canvas.armed{cursor:crosshair !important;}
.drawbtn[aria-pressed="true"]{background:var(--accent-strong); color:var(--accent-ink); border-color:var(--accent-strong); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);}
.drawbtn[aria-pressed="true"]:hover:not(:disabled){color:var(--accent-ink);}
.bbnudge{flex-wrap:wrap;}
.bbnudge .edges{flex-basis:100%; display:grid; grid-template-columns:auto 32px 32px auto 32px 32px; gap:4px; align-items:center; margin-top:2px;}
.bbnudge .elab{font-size:var(--fs-xs); color:var(--muted); padding:0 2px 0 4px;}
.boxbar{max-width:360px;}
.sugrej{align-self:flex-start; font-size:var(--fs-sm);}
.who input:not([hidden]){flex:1;}
/* ── 3.2.0: UI profile and single class ── */
html.profile-clinical .eng-only{display:none !important;}
html.single-class .multi-class-only{display:none !important;}

/* 3.2.0 r2: M3 menu buttons (language, annotator) and their menu */
.menubtn{display:inline-flex; align-items:center; gap:6px;}
.menubtn .caret{font-size:10px; color:var(--muted);}
.who .menubtn{flex:1; min-width:0; justify-content:space-between; min-height:30px;}
.who .menubtn #annotatorName{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.who .menubtn.empty #annotatorName{color:var(--muted); font-weight:500;}
.whonew{display:flex; gap:6px; align-items:center;}
.whonew input{flex:1; min-width:0; padding:5px 8px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel); font-size:var(--fs-sm); color:var(--ink); outline:2px solid var(--accent); outline-offset:1px;}
.popmenu{position:fixed; z-index:70;}
.menu [role="menuitemradio"]{display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:6px 14px 6px 10px; text-align:left; color:var(--ink);}
.menu [role="menuitemradio"]:hover,.menu [role="menuitemradio"]:focus-visible,.popmenu [role="menuitem"]:focus{background:var(--accent-container); color:var(--on-accent-container); outline:none;}
.popmenu [role="menuitemradio"]:focus{background:var(--accent-container); color:var(--on-accent-container); outline:none;}
.popmenu .chk{width:14px; flex:none; color:var(--accent); font-weight:700;}
input[aria-invalid="true"]{border-color:var(--crit-ink); outline:2px solid var(--crit-ink); outline-offset:1px;}
.boxcls{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--ink); font-weight:600; padding:2px 2px 6px;}
.boxcls .swatch{width:10px; height:10px; border-radius:3px; flex:none;}
/* 3.2.0 physician round 2: English labels are longer; at 1280 the side-panel pairs drop the key hint
   (it stays in the tooltip) so a label wraps to two lines at most. */
@media (max-width:1400px){ html[lang="en"] .edfoot .row2 .tbtn kbd{display:none;} }
/* UX P3 (3.2.0): ✓ ✕ with no free spot collapse to 「⋯」; hover, focus or a click opens them beside it */
.mchip .more{display:none; width:22px; height:22px; font-size:15px; color:#e8eef3;}
.mchip.collapsed .ok,.mchip.collapsed .no{display:none;}
.mchip.collapsed .more{display:inline-flex;}
.mchip.collapsed:hover,.mchip.collapsed.open,.mchip.collapsed:focus-within{z-index:4;}
/* 「⋯」 stays where it is and ✓ ✕ open beside it, so the pointer that opened them never lands on ✓ */
.mchip.collapsed:hover .ok,.mchip.collapsed:hover .no,.mchip.collapsed.open .ok,.mchip.collapsed.open .no,
.mchip.collapsed:focus-within .ok,.mchip.collapsed:focus-within .no{display:inline-flex;}

/* ── accounts (3.3.0) ─────────────────────────────────────────────────── */
.acct{max-width:26ch;}
.acct .acctname{overflow:hidden; text-overflow:ellipsis; max-width:16ch;}
.acct .acctrole{font-size:var(--fs-xs); font-weight:500; color:var(--muted);}
.rlfield{display:block; margin:0 0 12px;}
.rlfield span{display:block; font-size:var(--fs-xs); font-weight:600; color:var(--muted); margin-bottom:4px;}
.rlfield input{width:100%; padding:9px 11px; min-height:40px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--panel-2);}
.rlmsg{margin:0; min-height:1.2em; color:var(--crit-ink); font-size:var(--fs-sm);}
.authbanner{display:flex; align-items:center; gap:12px; justify-content:space-between;}
.authbanner[hidden]{display:none;}
.rlfield input[readonly]{color:var(--muted); background:var(--panel-3);}