/* Storyboard Drone — minimal sketch studio */
:root {
  --bg: #111113;
  --elev: #18181b;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --faint: #a1a1aa; /* was #71717a (3.9:1); now >=4.5:1 on --elev */
  --paper: #f7f4ef;
  --font: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body.studio {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100dvh;
  touch-action: none;
}

/* top */
.bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: calc(0.55rem + var(--st)) calc(0.9rem + var(--sr)) 0.55rem calc(0.9rem + var(--sl));
  border-bottom: 1px solid var(--line);
  background: var(--elev);
}
.bar-back {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.bar-back:hover { color: var(--text); }
.bar-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}
.bar-title strong {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.bar-title span {
  font-size: 0.72rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.bar-actions {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn {
  appearance: none;
  border: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
}
.btn.sm { padding: 0.32rem 0.6rem; font-size: 0.75rem; }
.btn.solid { background: #fafafa; color: #111; }
.btn.solid:hover { background: #fff; }
.btn.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.btn.ghost:hover { color: var(--text); }

/* orders */
.orders {
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.orders-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--faint);
}
.orders-live {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: start;
}
.orders-count {
  text-align: center;
  min-width: 3rem;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--elev);
}
.orders-count .n {
  display: block;
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 500;
}
.orders-count .u {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.orders-kicker {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-bottom: 0.2rem;
}
.orders-body { font-size: 0.88rem; line-height: 1.4; }
.orders-body p { margin: 0 0 0.15rem; }
.orders-body p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* tools — pen / eraser / undo only */
.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--elev);
}
.tool {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 7px;
  cursor: pointer;
  touch-action: manipulation;
}
.tool:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.tool.is-on {
  color: #111;
  background: #fafafa;
}
.tools-gap {
  width: 1px;
  height: 1.1rem;
  background: var(--line);
  margin: 0 0.2rem;
}
.size-lab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.35rem;
  font-size: 0.72rem;
  color: var(--faint);
}
.size-lab input[type="range"] {
  width: 5.5rem;
  accent-color: #d4d4d8;
  cursor: pointer;
}
.size-lab span {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 1.2rem;
}
.save-hint {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--faint);
}

/* board */
.board-wrap {
  min-height: 0;
  overflow: hidden;
  background: #0c0c0e;
  display: flex;
  flex-direction: column;
}
.focus-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--elev);
  flex-shrink: 0;
}
.focus-label {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  min-width: 6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.board-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  touch-action: pan-x pan-y;
}
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Focus mode: one panel fills the workspace */
body.is-focus .orders { display: none; }
body.is-focus .board {
  display: block;
  max-width: none;
  height: 100%;
  margin: 0;
}
body.is-focus .board-scroll {
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
}
body.is-focus .panel { display: none; }
body.is-focus .panel.is-focus-target {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  max-width: min(1400px, 100%);
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
}
body.is-focus .panel.is-focus-target .panel-stage {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
  height: auto;
}
body.is-focus .panel.is-focus-target .panel-note {
  flex-shrink: 0;
}
body.is-focus .btn#btn-focus {
  background: #fafafa;
  color: #111;
  border-color: transparent;
}
.board-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--faint);
  font-size: 0.9rem;
}
.board-placeholder strong { color: var(--muted); font-weight: 600; }

.panel {
  border-radius: 10px;
  background: var(--elev);
  border: 1px solid var(--line);
  overflow: hidden;
  user-select: none;
  transition: border-color 0.12s;
}
.panel.is-active { border-color: rgba(255,255,255,0.22); }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem 0.4rem 0.65rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  cursor: pointer;
  background: #161618;
  border-bottom: 1px solid var(--line);
}
.panel-head-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.panel-head strong {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--muted);
  font-size: 0.65rem;
}
.panel-head .done-mark {
  color: #4ade80;
  opacity: 0;
  text-transform: uppercase;
  font-size: 0.6rem;
}
.panel.is-done .done-mark { opacity: 1; }
.panel-focus-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}
.panel-focus-btn:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
}
body.is-focus .panel-focus-btn { display: none; }

.field-check {
  justify-content: flex-start;
  gap: 0.65rem;
}
.field-check input {
  width: 1rem;
  height: 1rem;
  accent-color: #a1a1aa;
  cursor: pointer;
}

.panel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  cursor: crosshair;
  touch-action: none;
}
.panel-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.panel-stage .layer-draw { z-index: 2; }
.panel-stage .layer-onion {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.panel-stage .layer-grid {
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}
.panel-stage.is-eraser { cursor: cell; }

.panel-note {
  width: 100%;
  border: none;
  border-top: 1px solid var(--line);
  background: var(--elev);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.45rem 0.65rem;
  resize: none;
  min-height: 2rem;
  outline: none;
}
.panel-note:focus { color: var(--text); }
.panel-note::placeholder { color: var(--faint); }

/* settings sheet */
.sheet-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
}
.sheet {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(22rem, calc(100vw - 2rem));
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  padding: 0;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.sheet-head h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.sheet-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.field input[type="color"] {
  width: 2.75rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.field-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--faint);
}

@media (max-width: 640px) {
  .orders-live { grid-template-columns: 1fr; }
  .bar { flex-wrap: wrap; }
  .board { grid-template-columns: 1fr; }
  .save-hint { display: none; }
}

/* 2026-10-12: Focus mode — orders row is hidden, so pin the board to the 1fr row and
   size the stage to the largest 16:9 box that fits (canvas buffer is 16:9). */
body.is-focus .board-wrap { grid-row: -2 / -1; }
body.is-focus .board {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: auto;
}
body.is-focus .panel.is-focus-target { container-type: size; }
body.is-focus .panel.is-focus-target .panel-stage {
  flex: none;
  aspect-ratio: 16 / 9;
  height: auto;
  width: min(100%, calc((100cqh - 4.75rem) * 16 / 9));
  margin: auto;
}

/* 2026-10-12h: stage focus ring + phone touch targets */
#board:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
@media (max-width: 720px) {
  .tool, .bar .btn, .btn.sm, .bar-back, #btn-focus-prev, #btn-focus-next, #btn-focus-exit, #btn-settings-close, #btn-again {
    min-height: 44px; min-width: 44px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .size-lab { min-height: 44px; display: inline-flex; align-items: center; }
  #brush-size { height: 44px; min-width: 120px; }
  .field-check { min-height: 44px; }
  #chk-focus-default { width: 24px; height: 24px; margin: 10px; }
  .field input[type="color"] { min-width: 44px; min-height: 44px; }
}

/* 2026-10-12j: phone / touch: 44px hit areas for panel Focus, notes, settings checkbox */
@media (max-width: 640px), (pointer: coarse) {
  .panel-focus-btn { min-height: 44px; min-width: 44px; padding: 0.22rem 0.75rem; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
  .panel-note { min-height: 44px; }
  .field-check { min-height: 44px; }
  #chk-focus-default { width: 24px; height: 24px; margin: 10px; }
}

/* 2026-10-21 Capstar top bar (approved mockup, updated set). Prefixed cb- to avoid clashing with page .brand/.home. */
.cbar{position:sticky;top:0;left:0;right:0;z-index:40;height:calc(var(--cb-h) + var(--st,0px));display:flex;align-items:center;gap:10px;padding:var(--st,0px) calc(16px + var(--sr,0px)) 0 calc(16px + var(--sl,0px));box-sizing:border-box;font:500 14px/1 system-ui,'Segoe UI',sans-serif;background:rgba(30,30,52,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
/* 2026-10-22 phone text scrim (approved, alpha .35) */
@media (max-width:720px){.cbar{background-image:linear-gradient(90deg,rgba(10,10,22,.35) 0,rgba(10,10,22,.35) 40%,rgba(10,10,22,0) 56%,rgba(10,10,22,0) 60%,rgba(10,10,22,.35) 70%,rgba(10,10,22,.35) 100%);background-size:100% 48px;background-repeat:no-repeat;background-position:0 0}}
.cbar a{text-decoration:none}
.cb-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:15px;white-space:nowrap}.cb-brand img{width:28px;height:28px;display:block}
.cb-home,.cb-homeicon,.cb-pill{white-space:nowrap;color:#cfd0da;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:13px}
.cb-homeicon{display:none;padding:6px 9px}
.cb-sp{flex:1}.cb-act{display:flex;align-items:center;gap:8px}
.cb-admin{padding:5px 10px;border-radius:999px;background:rgba(224,40,79,.18);border:1px solid rgba(224,40,79,.5);color:#ff8aa3;font-size:12px;font-weight:700}
.cb-signin{height:34px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:inherit;white-space:nowrap}
.cb-av{height:34px;display:flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;white-space:nowrap}
/* avatar chip fix B 2026-10-21 */
.cb-av b,.cb-av img{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;object-fit:cover;background:none}
.cb-av b{background:rgba(14,12,22,.55);border:1px solid rgba(255,54,106,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 8px rgba(255,54,106,.25);color:#fff;font-weight:600;box-sizing:border-box}
.cb-av img{display:none}
.cb-av.cb-av-loaded img{display:block;background:none!important;box-shadow:none}
.cb-av.cb-av-loaded b{display:none}
.cb-av.cb-av-loaded::before,.cb-av.cb-av-loaded::after{content:none}

.cbar a:focus-visible,.cbar button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
@media(max-width:600px){.cbar{padding-left:calc(10px + var(--sl,0px));padding-right:calc(10px + var(--sr,0px));gap:6px}.cb-home{display:none}.cb-homeicon{display:inline-block}.cb-brand{gap:6px}.cb-brand span{max-width:84px;overflow:hidden;text-overflow:ellipsis}.cb-signin{padding:0 12px}.cb-av span{display:none}.cb-av{padding:2px}.cb-admin{padding:5px 7px}.cb-pill{padding:6px 9px}}
.cbar{--st:env(safe-area-inset-top,0px);--sr:env(safe-area-inset-right,0px);--sl:env(safe-area-inset-left,0px)}
.cb-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:13px;white-space:nowrap;color:#e5e7eb;max-width:40vw;overflow:hidden}.cb-chip>i{flex:none;width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 6px #3ddc84}
.cb-ib{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#ddd;border-radius:999px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}
.cb-dl{background:linear-gradient(180deg,#e0284f,#a3122f);color:#fff;padding:7px 14px;border-radius:999px;font-size:13px;white-space:nowrap}
.cb-sn{display:flex;gap:14px}.cb-sn a{color:#cfd0da;font-size:13px}
.cb-sm{display:none;position:relative}.cb-sm summary{list-style:none;cursor:pointer;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff}.cb-sm summary::-webkit-details-marker{display:none}
.cb-sm>div{position:absolute;right:0;top:40px;min-width:150px;background:#15141f;border:1px solid #333;border-radius:12px;padding:8px;display:grid;gap:4px}.cb-sm>div a{color:#e5e7eb;font-size:14px;padding:8px 10px;border-radius:8px}.cb-sm>div a:hover{background:rgba(255,255,255,.06)}.cb-sm .cb-madm{color:#ff8aa3;font-weight:700}
@media(max-width:600px){.cb-chip{font-size:12px;padding:5px 8px}.cb-chip.cb-dot{padding:8px}.cb-chip.cb-dot>span{display:none}.cb-sn{display:none}.cb-sm{display:block}.cb-dl{padding:7px 9px;font-size:12px}.cbar.cb-menu-admin .cb-admin{display:none}}
/* wuju tool pages: tool controls sit in the bar's right slot; under 600px they drop to a second row */
.cbar.cb-wrap .cb-act{flex-wrap:wrap;justify-content:flex-end;min-width:0}
@media(max-width:720px){.cbar.cb-wrap{flex-wrap:wrap;height:auto;min-height:calc(var(--cb-h) + var(--st));padding-top:calc(10px + var(--st));padding-bottom:10px;row-gap:10px}.cbar.cb-wrap .cb-act{order:9;width:100%;justify-content:flex-start}}
@media(max-width:720px){.cbar .btn{min-height:44px;min-width:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}}
.cbar [hidden]{display:none}
@media(max-width:600px){.cbar .cb-pill{display:none}.cbar .btn{padding-left:.6rem;padding-right:.6rem}}
/* 2026-10-21 v4 top bar: star button (app logo, fan) + name/Home wipe. Neutral glass glow, no gold. */
.cbar .cb-star{flex:none;box-sizing:border-box;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .15s,box-shadow .15s}

.cbar .cb-star:hover,.cbar .cb-star:focus-visible{background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 16px rgba(255,255,255,.18)}

.cbar .cb-star:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
.cbar .cb-div{flex:none;width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 4px 0 6px}
.cbar .cb-title{margin:0;font-size:15px;font-weight:500;color:rgba(235,236,245,.78);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.cbar .cb-star{transition:none}}
 
/* Capstar star fan (no float): fan eases out on hover/focus, holds still, settles on leave.
   Shards come pre-positioned from app/assets/capstar-logo.svg; each pushes outward along its own axis. */
@property --fan { syntax:'<number>'; inherits:true; initial-value:0 }
.cap-star { --fan:0; overflow:visible; transition: --fan .55s cubic-bezier(.45,0,.55,1); }
.cb-star:hover .cap-star, .cb-star:focus-visible .cap-star, .cap-star.is-hover { --fan:1; transition: --fan .42s cubic-bezier(.215,.61,.355,1); }
.cap-star .shard { transform-box:view-box; transform-origin:128px 128px;
  transform: rotate(var(--rot)) translateY(calc(var(--fan) * -13.45px)) rotate(calc(-1 * var(--rot))); }
.cap-star .s0{--rot:0deg}.cap-star .s1{--rot:72deg}.cap-star .s2{--rot:144deg}.cap-star .s3{--rot:216deg}.cap-star .s4{--rot:288deg}
.cbar .cb-star .cap-star{width:30px;height:30px;display:block}
@keyframes cb-star-once{0%{--fan:0}30%{--fan:1}70%{--fan:1}100%{--fan:0}}
@media(hover:none){.cbar .cb-star{width:40px;height:40px}
  .cbar .cb-star .cap-star{animation:cb-star-once 1.8s cubic-bezier(.45,0,.55,1) .15s 1 both}}
@media(prefers-reduced-motion:reduce){.cap-star,.cb-star:hover .cap-star,.cb-star:focus-visible .cap-star{--fan:0;transition:none}.cbar .cb-star .cap-star{animation:none!important}}
/* v4b: desktop size + name wipe (hover-capable pointers only) */
.cbar .cb-title{position:relative;display:inline-grid}
.cbar .cb-name,.cbar .cb-hometxt{grid-area:1/1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar .cb-hometxt{opacity:0;pointer-events:none}
@media(hover:hover){
  .cbar .cb-title{min-width:3.2em}
  .cbar .cb-star{width:50px;height:50px}
  .cbar .cb-star .cap-star{width:40px;height:40px}
}
@media(hover:hover) and (prefers-reduced-motion:reduce){.cbar .cb-name,.cbar .cb-hometxt{transition:none}}
/* end v4 top bar */
/* v5c top bar hover 2026-10-21: B motion (divider+name slide/fade, "Home" fades in, no layout gap) + C red glow. Button fixed 50x50, only shards fan. */
@media(hover:hover){
  .cbar .cb-title{display:inline-block;overflow:visible}
  .cbar .cb-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cbar .cb-hometxt{position:absolute;left:0;top:0;visibility:visible;opacity:0;pointer-events:none;white-space:nowrap;color:inherit}
  .cbar .cb-star{transition:background .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s cubic-bezier(.2,.7,.2,1)}
  .cbar .cb-div,.cbar .cb-name,.cbar .cb-hometxt{transition:opacity .2s cubic-bezier(.2,.7,.2,1),transform .2s cubic-bezier(.2,.7,.2,1)}
  .cbar .cb-star:is(:hover,:focus-visible)~.cb-div{opacity:0;transform:translateX(-10px)}
  .cbar .cb-star:is(:hover,:focus-visible)~.cb-title .cb-name{opacity:0;transform:translateX(-10px)}
  .cbar .cb-star:is(:hover,:focus-visible)~.cb-title .cb-hometxt{opacity:1}
  .cbar .cb-star:hover,.cbar .cb-star:focus-visible{background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,54,106,.6),0 0 16px 1px rgba(255,54,106,.38),0 0 30px rgba(255,54,106,.2)}
}
.cbar .cb-star:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cbar .cb-star,.cbar .cb-div,.cbar .cb-name,.cbar .cb-hometxt{transition:none!important}}
/* end v5c top bar */
/* chip-size 2026-10-22: bar 56->48 (--cb-h), star 44x44 fixed, chip 30px/avatar 24px/name 12.5px, 44px tap area, name ellipsis at 200px */
:root{--cb-h:48px}
.cbar{height:calc(var(--cb-h) + var(--st,0px));position:sticky}
.cbar .cb-star{width:40px;height:40px;transform:none!important}
.cbar .cb-star:hover,.cbar .cb-star:focus-visible{transform:none!important}
.cbar .cb-star .cap-star{width:32px;height:32px}
/* mono-at-rest star (2026-10-22): grey at rest, colour on hover/focus-visible; in .42s, out .25s */
.cbar .cb-star .cap-star{filter:grayscale(1) contrast(.4) brightness(1.75);transition:--fan .25s cubic-bezier(.45,0,.55,1),filter .25s cubic-bezier(.45,0,.55,1)}
.cbar .cb-star:focus-visible .cap-star{filter:grayscale(0) contrast(1) brightness(1);transition:--fan .42s cubic-bezier(.215,.61,.355,1),filter .42s cubic-bezier(.215,.61,.355,1)}
@media(hover:hover){.cbar .cb-star:hover .cap-star,.cbar .cap-star.is-hover{filter:grayscale(0) contrast(1) brightness(1);transition:--fan .42s cubic-bezier(.215,.61,.355,1),filter .42s cubic-bezier(.215,.61,.355,1)}}
@media(prefers-reduced-motion:reduce){.cbar .cb-star .cap-star,.cbar .cb-star:is(:hover,:focus-visible) .cap-star,.cbar .cap-star.is-hover{transition:none!important}}
.cbar .cb-star{position:relative}
@media(hover:none),(max-width:600px){.cbar .cb-star::after{content:"";position:absolute;inset:-3px;border-radius:50%}}
.cbar .cb-title{color:rgba(235,236,245,.92)}
.cbar .auth-btn{height:30px;gap:7px;font-size:12.5px;padding:0 14px}
.cbar #auth-btn.is-in{padding:2px 9px 2px 2px;max-width:200px;position:relative}
.cbar #auth-btn .avatar{width:24px;height:24px;font-size:10.5px}
.cb-av{height:30px;gap:7px;padding:2px 9px 2px 2px;font-size:12.5px;max-width:200px;position:relative}
.cb-av b,.cb-av img{width:24px;height:24px;font-size:10.5px;flex:none}
.cb-av span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar #auth-btn.is-in::after,.cb-av::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)}
@media(max-width:600px){.cbar #auth-btn.is-in,.cb-av{padding:2px}}
@media(max-width:600px){.cbar .cb-title{max-width:calc(50% - 80px)}}
.cbar .cb-av.cb-av-loaded::after,.cbar .cb-av::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%);background:none;box-shadow:none;border:0}
/* end chip-size */