body.app { height: 100vh; overflow: hidden; }
.studio { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; }

/* ---------- stage ---------- */
.stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--soft); border-right: 1px solid var(--line); }
.stage-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 22px 28px 0; }
.stage-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.head-text { min-width: 0; }
.phase { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.sub { max-width: 640px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sub { color: var(--muted); font-size: 13px; }
.meter { min-width: 230px; }
.meter-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.meter-top b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.dots i { height: 6px; border-radius: 3px; background: var(--line); transition: background .4s; }
.dots i.no { background: #d4d4d4; }
.dots i.need { box-shadow: inset 0 0 0 1px #bdbdbd; background: transparent; }
.dots i.yes { background: var(--fg); }

.canvas-wrap { flex: 1; min-height: 0; padding: 18px 28px 14px; display: flex; align-items: center; justify-content: center; }
.canvas-wrap { position: relative; }
.art { position: relative; height: 100%; aspect-ratio: 1; max-width: 100%; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -16px rgba(0,0,0,.22); }
.art[hidden], .board[hidden] { display: none; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .9s ease; }
.art img:not([src]) { opacity: 0; }
.art.painting::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--pc, #0a0a0a); animation: paintpulse 1.6s ease-in-out infinite; }
@keyframes paintpulse { 50% { box-shadow: inset 0 0 0 5px var(--pc, #0a0a0a); } }
.art-chip { position: absolute; left: 12px; top: 12px; display: none; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 999px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); font-size: 12px; font-weight: 500; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.art-chip.on { display: inline-flex; }
.art-chip img { position: static; width: 18px; height: 18px; border-radius: 5px; background: #fff; padding: 2px; border: 1px solid var(--line); opacity: 1; }
.back-live { position: absolute; right: 12px; top: 12px; all: unset; position: absolute; right: 12px; top: 12px; cursor: pointer; background: var(--fg); color: #fff; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 999px; }
.back-live[hidden] { display: none; }

.board { width: 100%; max-width: 860px; max-height: 100%; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-content: start; padding: 2px; }
.pitch { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; display: flex; flex-direction: column; gap: 8px; animation: rise .45s ease both; position: relative; }
.pitch.empty { border-style: dashed; background: transparent; color: var(--faint); align-items: center; justify-content: center; min-height: 150px; font-size: 13px; animation: none; }
.pitch.lead { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.pitch .ph { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pitch .ph img { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); padding: 2px; background: #fff; }
.pitch .ph .num { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.pitch h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.pitch p { font-size: 13px; color: #404040; line-height: 1.45; }
.pitch .style { font-size: 12px; color: var(--muted); }
.pitch .cap { font-family: Impact, "Anton", sans-serif; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--fg); }
.pitch .picks { display: flex; align-items: center; gap: 4px; min-height: 22px; margin-top: auto; }
.pitch .picks img { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); padding: 2px; background: #fff; animation: rise .3s ease both; }
.pitch .picks span { font-size: 11.5px; color: var(--muted); margin-left: 4px; }

.strip { display: flex; gap: 6px; padding: 0 28px 12px; overflow-x: auto; min-height: 0; flex: none; }
.strip:empty { display: none; }
.strip button { all: unset; cursor: pointer; flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid var(--line); background: #fff; transition: transform .15s; }
.strip button:hover { transform: translateY(-2px); }
.strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip button span { position: absolute; left: 3px; bottom: 3px; font-family: var(--mono); font-size: 9px; background: rgba(255,255,255,.9); padding: 0 4px; border-radius: 4px; }
.strip button.cur { outline: 2px solid var(--fg); outline-offset: 1px; }
.strip button.rev-revert img { filter: grayscale(.6); }

.now { margin: 0 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; font-size: 13px; }
.now-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.now-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-text q { color: var(--muted); }
.now-logo { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); display: grid; place-items: center; flex: none; background: #fff; }
.now-logo img { width: 14px; height: 14px; }
.now-logo:empty { display: none; }
.now.thinking #nowText b { font-weight: 600; }
.now.thinking .shimmer {
  background: linear-gradient(90deg, var(--muted) 30%, var(--fg) 50%, var(--muted) 70%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.now-time { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.now.paused { background: #fffbeb; border-color: #fde68a; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 12px 28px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.stats div { padding: 10px 14px; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; }
.stats span { display: block; font-size: 11.5px; color: var(--muted); }
.stats b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ---------- council ---------- */
.council { min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.council-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 12px; font-size: 13.5px; }
.tag-live { font-size: 11px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.tag-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.roster { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 0 18px 14px; border-bottom: 1px solid var(--line); }
.roster button {
  all: unset; aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; cursor: default; position: relative;
  transition: border-color .25s, box-shadow .25s, transform .25s, opacity .25s;
}
.roster button img { width: 52%; height: 52%; display: block; }
.roster button.on { border-color: var(--rc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 22%, transparent); transform: translateY(-1px); }
.roster button.on::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 1px solid var(--rc); animation: ring 1.4s ease-out infinite; }
@keyframes ring { from { opacity: .8; } to { opacity: 0; inset: -9px; border-radius: 16px; } }
.roster button.off { opacity: .35; }

.feed { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 0 14px; }
.feed::-webkit-scrollbar { width: 6px; }
.feed::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 11px; padding: 12px 18px; animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.msg .av { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; }
.msg .av img { width: 16px; height: 16px; }
.msg .hd { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.msg .who { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.msg .mid { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg .t { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.msg .txt { font-size: 13.5px; color: #262626; margin-top: 2px; line-height: 1.5; overflow-wrap: anywhere; }
.msg .ops { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.msg .op { font-family: var(--mono); font-size: 11.5px; color: var(--muted); display: flex; gap: 7px; align-items: baseline; overflow-wrap: anywhere; }
.msg .op i { font-style: normal; color: var(--faint); flex: none; width: 10px; text-align: center; }
.msg .op.err { color: #b91c1c; }
.msg .foot2 { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint); font-family: var(--mono); }
.vote { font-family: var(--sans); font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.vote.yes { background: var(--fg); color: #fff; border-color: var(--fg); }
.msg .pcard { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; color: #404040; }
.msg .pcard b { display: block; font-size: 13px; color: var(--fg); margin-bottom: 2px; }
.msg .paintrow { margin-top: 8px; display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; }
.msg .paintrow img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); cursor: pointer; }
.msg .paintrow div { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.msg .paintrow div b { color: var(--fg); font-weight: 600; }
.msg.err .txt { color: var(--muted); font-style: italic; }
.sysline { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 12px; color: var(--muted); animation: rise .4s ease both; }
.sysline::before, .sysline::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sysline span { max-width: 75%; text-align: center; }
.readonly { border-top: 1px solid var(--line); padding: 12px 18px; font-size: 12px; color: var(--faint); text-align: center; }
.empty { padding: 40px 24px; text-align: center; color: var(--faint); font-size: 13px; }

@media (max-width: 1100px) { .studio { grid-template-columns: minmax(0, 1fr) 360px; } .roster { grid-template-columns: repeat(10, 1fr); gap: 4px; } }
@media (max-width: 860px) {
  body.app { height: auto; overflow: auto; }
  .studio { grid-template-columns: minmax(0, 1fr); }
  .stage { border-right: 0; border-bottom: 1px solid var(--line); }
  .stage-head { flex-direction: column; align-items: stretch; padding: 18px 16px 0; gap: 12px; }
  .canvas-wrap { padding: 14px 16px; }
  .art { width: 100%; height: auto; }
  .board { grid-template-columns: 1fr; max-height: none; }
  .strip { padding: 0 16px 12px; }
  .now { margin: 0 16px; }
  .stats { margin: 12px 16px 16px; grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .council { height: 78vh; }
}