:root {
  color-scheme: dark;
  --ink: #eef6ff;
  --muted: #8ca0b8;
  --bg: #07111f;
  --panel: #0d1a2b;
  --panel-2: #12243a;
  --line: rgba(255,255,255,.1);
  --mint: #42e8c6;
  --purple: #7c5cff;
  --danger: #ff6b8a;
  --radius: 18px;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 8px; color: var(--mint); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 80% 10%, rgba(124,92,255,.28), transparent 32%), radial-gradient(circle at 10% 90%, rgba(66,232,198,.16), transparent 34%), #07111f; }
.login-card { width: min(440px,100%); padding: 38px; border: 1px solid var(--line); border-radius: 28px; background: rgba(13,26,43,.88); box-shadow: 0 30px 80px rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 850; letter-spacing: -.03em; }
.brand-mark { width: 38px; height: 38px; display: grid; grid-template-columns: repeat(3,1fr); align-items: end; gap: 3px; padding: 8px; border-radius: 12px; background: var(--mint); }
.brand-mark i { display: block; background: #07111f; border-radius: 2px 2px 0 0; }
.brand-mark i:nth-child(1){height:40%}.brand-mark i:nth-child(2){height:70%}.brand-mark i:nth-child(3){height:100%}
.login-card h1 { margin: 38px 0 8px; font-size: clamp(2rem,7vw,3rem); letter-spacing: -.055em; line-height: 1; }
.login-card > p { margin: 0 0 28px; color: var(--muted); line-height: 1.7; }
.field { display: grid; gap: 8px; margin: 0 0 16px; }
.field label, .field-label { font-size: .82rem; font-weight: 750; color: #b9c9d9; }
.input, .select, .textarea { width: 100%; padding: 13px 14px; color: var(--ink); background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: 12px; outline: none; transition: border .2s, box-shadow .2s; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(66,232,198,.12); }
.textarea { min-height: 80px; resize: vertical; }
.btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.055); font-weight: 750; text-decoration: none; transition: transform .16s, background .16s, border .16s; }
.btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.09); }
.btn:active { transform: translateY(0); }
.btn-primary { border-color: transparent; color: #06131e; background: var(--mint); }
.btn-primary:hover { background: #67efd5; }
.btn-purple { border-color: transparent; background: var(--purple); }
.btn-danger { color: #ffd7e0; border-color: rgba(255,107,138,.28); background: rgba(255,107,138,.08); }
.btn-block { width: 100%; }
.btn-icon { width: 42px; padding: 0; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; border-right: 1px solid var(--line); background: #091522; }
.sidebar .brand { padding: 0 8px 28px; }
.nav { display: grid; gap: 6px; }
.nav button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; text-align: left; font-weight: 700; }
.nav button:hover, .nav button.active { color: var(--ink); background: rgba(255,255,255,.065); }
.nav button.active::before { content:""; width: 4px; height: 18px; border-radius: 4px; background: var(--mint); }
.nav-icon { width: 22px; height: 22px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; font-size: .7rem; }
.sidebar-foot { position: absolute; left: 18px; right: 18px; bottom: 20px; display: grid; gap: 8px; }
.help-btn { color: var(--mint); border-color: rgba(66,232,198,.22); background: rgba(66,232,198,.06); }
.main { min-width: 0; padding: 26px clamp(20px,4vw,52px) 60px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 30px; }
.event-select { max-width: 320px; }
.top-actions, .inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: clamp(1.7rem,3.5vw,3.15rem); letter-spacing: -.05em; }
.page-head p { margin: 8px 0 0; color: var(--muted); }
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 18px 50px rgba(0,0,0,.12); }
.card h2, .card h3 { margin: 0 0 14px; letter-spacing: -.025em; }
.stat { padding: 20px; overflow: hidden; position: relative; }
.stat::after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; right:-30px; top:-36px; background:var(--purple); opacity:.11; }
.stat strong { display: block; font-size: 2rem; letter-spacing: -.04em; }
.stat span { color: var(--muted); font-size: .82rem; }
.realtime-stat strong { color:var(--mint); }.live-update-note{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--muted);font-size:.7rem}.live-update-note i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(66,232,198,.09)}
.status-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .86rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #667485; }
.status-dot.live { background: var(--mint); box-shadow: 0 0 0 5px rgba(66,232,198,.12); }
.status-pill { display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.86rem; white-space:nowrap; }
.status-pill.is-live { color:#c9fff5; border-color:rgba(66,232,198,.25); background:rgba(66,232,198,.07); }
.live-head-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.live-start-btn { min-width:170px; min-height:46px; }
.quick-start { margin-bottom:18px; padding:18px; border:1px solid rgba(66,232,198,.18); border-radius:var(--radius); background:linear-gradient(120deg,rgba(66,232,198,.07),rgba(124,92,255,.06)); }
.quick-start-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:15px; }
.quick-start-head strong,.quick-start-head span { display:block; }.quick-start-head span{margin-top:4px;color:var(--muted);font-size:.82rem}
.text-btn { padding:0; border:0; color:var(--muted); background:transparent; font-size:.8rem; text-decoration:underline; }
.step-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.setup-step { min-width:0; display:flex; align-items:center; gap:10px; padding:11px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:rgba(3,11,20,.32); text-align:left; }
.setup-step:hover { border-color:rgba(66,232,198,.35); }.setup-step.done{background:rgba(66,232,198,.07)}
.setup-step.ready { border-color:rgba(66,232,198,.5); background:rgba(66,232,198,.12); box-shadow:0 0 0 3px rgba(66,232,198,.06); }
.setup-step.ready:hover { transform:translateY(-1px); background:rgba(66,232,198,.18); }
.setup-step > span:last-child { min-width:0; }.setup-step strong,.setup-step small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setup-step strong{font-size:.82rem}.setup-step small{margin-top:3px;color:var(--muted);font-size:.72rem}
.step-number { width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;color:var(--muted);background:rgba(255,255,255,.08);font-size:.75rem;font-weight:850}.setup-step.done .step-number{color:#07111f;background:var(--mint)}
.control-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; align-items: start; }
.live-console { grid-template-columns:minmax(0,1fr) 280px; }
.stage-card { padding: 28px; min-height: 460px; background: linear-gradient(145deg,#10243a,#0a1727); }
.stage-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; }
.stage-meta { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.82rem; font-weight:750; }
.response-live { display:flex; align-items:center; gap:5px; padding-left:12px; border-left:1px solid var(--line); color:#c9fff5; }
.response-live i { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(66,232,198,.1); }
.response-live strong { font-size:1rem; }
.realtime-label { color:var(--muted); font-size:.75rem; }
.stage-question { font-size: clamp(1.5rem,3vw,2.4rem); line-height:1.25; letter-spacing:-.045em; max-width:850px; }
.question-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
.question-tabs { display:flex; gap:8px; overflow:auto; }
.question-tab { flex:0 0 auto; min-width:42px; height:42px; border:1px solid var(--line); border-radius:11px; color:var(--muted); background:transparent; font-weight:800; }
.question-tab.active { color:#07111f; border-color:var(--mint); background:var(--mint); }
.control-card { position:sticky; top:20px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; border-bottom:1px solid var(--line); }
.switch-row:last-child { border-bottom:0; }
.switch-copy strong { display:block; font-size:.92rem; }.switch-copy small{color:var(--muted)}
.helper-note { padding:12px 13px; border:1px solid rgba(124,92,255,.2); border-radius:11px; color:#c4d3e2; background:rgba(124,92,255,.07); font-size:.8rem; line-height:1.65; }
.switch { width:48px; height:27px; border:0; border-radius:30px; padding:3px; background:#354456; }
.switch::after { content:""; display:block; width:21px; height:21px; border-radius:50%; background:#fff; transition:transform .2s; }
.switch.on { background:var(--mint); }.switch.on::after{transform:translateX(21px);background:#07111f}
.chart-toggle { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; border-radius:12px; background:rgba(255,255,255,.045); }
.chart-toggle button { padding:9px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-weight:800; }
.chart-toggle button.active { color:var(--ink); background:var(--panel-2); box-shadow:0 6px 20px rgba(0,0,0,.2); }
.utility-details { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.utility-details summary { color:var(--muted); cursor:pointer; font-size:.82rem; font-weight:750; }
.utility-details[open] summary { margin-bottom:13px; color:var(--ink); }
.utility-details .grid { gap:8px; }
.utility-details .btn { min-height:38px; padding:8px 10px; font-size:.78rem; }
.result-chart { margin-top:24px; }
.bars { display:grid; gap:14px; }
.bar-head { display:flex; justify-content:space-between; gap:16px; margin-bottom:7px; font-size:.9rem; }
.bar-track { height:14px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); }
.bar-fill { height:100%; min-width:0; border-radius:inherit; transition:width .55s cubic-bezier(.2,.8,.2,1); }
.pie-wrap { display:grid; grid-template-columns:minmax(260px,400px) minmax(150px,1fr); gap:24px; align-items:center; }
.pie-canvas { width:100%; max-width:430px; margin-inline:auto; }
.pie-chart { display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 18px 28px rgba(0,0,0,.2)); }
.pie-slice { stroke:rgba(7,17,31,.72); stroke-width:2; transition:opacity .2s; }.pie-slice:hover{opacity:.86}
.pie-label { fill:#fff; font-family:Inter,"Noto Sans JP",system-ui,sans-serif; font-weight:800; font-size:15px; paint-order:stroke; stroke:rgba(7,17,31,.8); stroke-width:4px; stroke-linejoin:round; pointer-events:none; }
.pie-label-percent { font-size:18px; font-weight:900; }.pie-label-outside{font-size:13px}.pie-label-outside .pie-label-percent{font-size:15px}
.pie-leader { fill:none; stroke:rgba(255,255,255,.72); stroke-width:1.6; }.pie-leader-dot{fill:#fff}
.pie-empty { fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.14); stroke-width:2; }.pie-empty-text{fill:var(--muted);font-size:18px;font-weight:800}
.legend { display:grid; gap:11px; }.legend-row{display:grid;grid-template-columns:12px 1fr auto;gap:9px;align-items:center}.swatch{width:12px;height:12px;border-radius:4px}
.empty-state { min-height:260px; display:grid; place-items:center; text-align:center; color:var(--muted); }
.list { display:grid; gap:10px; }
.list-item { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }
.list-item strong { display:block; }.list-item small{color:var(--muted)}
.instruction-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:15px; margin-bottom:18px; padding:16px 18px; border:1px solid rgba(124,92,255,.2); border-radius:var(--radius); background:rgba(124,92,255,.06); }
.instruction-card p { margin:5px 0 0; color:var(--muted); font-size:.85rem; line-height:1.55; }
.instruction-icon { width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#fff;background:var(--purple);font-weight:850; }
.qr-card { display:grid; grid-template-columns:210px 1fr; gap:26px; align-items:center; }
.qr-card img { width:210px; border-radius:14px; background:white; padding:10px; }
.url-box { display:flex; align-items:center; gap:8px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:rgba(0,0,0,.18); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; overflow:hidden; }
.url-box span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy-btn { min-width:68px; padding-inline:10px; }
.label-help,.required-label { margin-left:5px; padding:3px 7px; border-radius:99px; color:var(--muted); background:rgba(255,255,255,.07); font-size:.68rem; font-weight:700; }
.required-label { color:#06131e;background:var(--mint); }
.advanced-links { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }.advanced-links summary{margin-bottom:14px;color:#b9c9d9;cursor:pointer;font-weight:750}.advanced-links[open] summary{color:var(--mint)}
.settings-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.72fr); gap:18px; align-items:start; }
.layout-editor-section { margin-bottom:18px; }
.layout-editor-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.layout-editor-head h2 { margin:0 0 5px; }.layout-editor-head p:not(.eyebrow){margin:0;color:var(--muted);font-size:.86rem}
.layout-mode-toggle { width:max-content; display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:0 0 14px; padding:4px; border-radius:11px; background:rgba(255,255,255,.05); }
.layout-mode-toggle button { padding:8px 15px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-weight:800; }.layout-mode-toggle button.active{color:#07111f;background:var(--mint)}
.layout-editor-grid { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:18px; align-items:stretch; }
.layout-canvas { position:relative; container-type:size; min-height:360px; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); border-radius:16px; color:var(--editor-text); background:radial-gradient(circle at 78% 0%,rgba(124,92,255,.2),transparent 38%),var(--editor-bg); font-family:var(--editor-font); touch-action:none; }
.layout-item { position:absolute; z-index:1; margin:0; border:1px dashed transparent; color:inherit; background:transparent; text-align:left; transform:translate(calc(var(--lx) * 1cqw),calc(var(--ly) * 1cqh)) scale(var(--ls)); transform-origin:center; cursor:grab; user-select:none; touch-action:none; }
.layout-item:hover,.layout-item.selected { z-index:3; border-color:var(--mint); box-shadow:0 0 0 3px rgba(66,232,198,.12); }.layout-item:active{cursor:grabbing}
.layout-item.layout-hidden { opacity:.22; filter:grayscale(.8); }.layout-item.layout-hidden::after{content:"非表示";position:absolute;right:5px;top:5px;padding:3px 6px;border-radius:6px;color:#fff;background:rgba(255,107,138,.9);font-size:9px;font-weight:900}
.layout-item>span { position:absolute; left:0; top:-22px; padding:3px 7px; border-radius:6px; color:#07111f; background:var(--mint); font-size:10px; font-weight:850; opacity:0; }
.layout-item:hover>span,.layout-item.selected>span{opacity:1}
.layout-question { left:6%; top:15%; width:78%; padding:8px; font-family:var(--editor-question-font,var(--editor-font)); font-size:clamp(16px,3.2cqw,34px); font-weight:850; letter-spacing:-.04em; }
.layout-chart { left:20%; top:37%; width:25cqw; height:25cqw; border-radius:50%; background:conic-gradient(#42e8c6 0 62%,#7c5cff 62% 100%); }
.layout-chart>i { position:absolute; inset:32%; border-radius:50%; background:var(--editor-surface); }
.layout-legend { left:61%; top:48%; width:29%; display:grid; gap:10px; padding:12px; border-radius:10px; background:color-mix(in srgb,var(--editor-surface) 82%,transparent); font-size:13px; }
.layout-legend b { display:grid; grid-template-columns:9px 1fr auto; gap:7px; align-items:center; }.layout-legend b i{width:9px;height:9px;border-radius:3px}.layout-legend em{font-style:normal;font-weight:900}
.layout-bars { left:10%; top:38%; width:80%; display:grid; gap:13px; padding:16px; border-radius:10px; background:color-mix(in srgb,var(--editor-surface) 82%,transparent); }
.layout-bars b { display:grid; grid-template-columns:20% 1fr 40px; gap:10px; align-items:center; font-size:12px; }.layout-bars em{font-style:normal}.layout-bars b>i{height:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.1)}.layout-bars u{display:block;height:100%;border-radius:inherit;text-decoration:none}.layout-bars strong{text-align:right}
.layout-canvas[data-mode="pie"] .layout-bars{display:none}.layout-canvas[data-mode="bar"] .layout-chart,.layout-canvas[data-mode="bar"] .layout-legend{display:none}
.layout-question,.layout-legend,.layout-bars { -webkit-text-stroke:calc(var(--editor-edge-width,0) * 1px) var(--editor-edge-color,#07111f); text-shadow:0 2px var(--editor-shadow,0) rgba(0,0,0,.75); }
.layout-inspector { padding:17px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.layout-inspector>strong { display:block; font-size:1.2rem; }.layout-inspector>p{margin:3px 0 20px;color:var(--muted);font-size:.75rem}.layout-inspector>small{display:block;margin-top:18px;color:var(--muted);line-height:1.55}
.element-visibility { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.element-visibility span strong,.element-visibility span small{display:block}.element-visibility span small{margin-top:3px;color:var(--muted);font-size:.68rem}
.layout-scale-row { display:grid; grid-template-columns:1fr 50px; gap:8px; align-items:center; margin:9px 0 17px; }.layout-scale-row input{width:100%}.layout-scale-row output{color:var(--mint);font-weight:800;font-size:.82rem;text-align:right}
.position-inputs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:17px; }.position-inputs label{color:var(--muted);font-size:.72rem;font-weight:750}.position-inputs label>div{position:relative;margin-top:5px}.position-inputs .input{padding:9px 25px 9px 9px}.position-inputs span{position:absolute;right:9px;top:50%;color:var(--muted);transform:translateY(-50%);font-size:.72rem}
.layout-picks { display:grid; gap:6px; }.layout-picks button{padding:9px 10px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:transparent;text-align:left;font-weight:750}.layout-picks button.active{color:#07111f;border-color:var(--mint);background:var(--mint)}
.settings-group { padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid var(--line); }.settings-group:last-child{border:0;margin:0;padding:0}
.settings-help { margin:-6px 0 8px; color:var(--muted); font-size:.78rem; }
.color-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.color-input { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:12px; }
.color-input input[type=color] { width:38px; height:38px; padding:0; border:0; border-radius:8px; overflow:hidden; background:transparent; }
.range-row { display:grid; grid-template-columns:1fr 48px; gap:12px; align-items:center; }.range-row input{width:100%}
.dropzone { padding:18px; border:1px dashed rgba(255,255,255,.2); border-radius:13px; color:var(--muted); text-align:center; }
.preview-window { position:sticky; top:24px; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#07111f; box-shadow:0 30px 70px rgba(0,0,0,.3); }
.preview-window iframe { width:100%;height:100%;border:0; }
.toast { position:fixed; z-index:100; right:22px; bottom:22px; max-width:min(380px,calc(100vw - 44px)); padding:13px 16px; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:#17304a; box-shadow:0 20px 50px rgba(0,0,0,.35); opacity:0; pointer-events:none; transform:translateY(10px); transition:.2s; }
.toast.show { opacity:1; transform:none; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(2,7,13,.72); backdrop-filter:blur(8px); }
.modal { width:min(560px,100%); max-height:90vh; overflow:auto; padding:26px; border:1px solid var(--line); border-radius:22px; background:var(--panel); }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }.modal-head h2{margin:0}
.guide-modal-wrap { width:min(680px,100%); }
.guide-steps { display:grid; gap:11px; }.guide-step{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}.guide-step>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#07111f;background:var(--mint);font-weight:900}.guide-step strong{display:block;margin-top:2px}.guide-step p{margin:4px 0 0;color:var(--muted);font-size:.85rem;line-height:1.55}.guide-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.guest-shell { min-height:100vh; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 70% 0%,rgba(124,92,255,.26),transparent 35%),var(--bg); }
.guest-card { width:min(640px,100%); padding:clamp(22px,6vw,44px); border:1px solid var(--line); border-radius:28px; background:rgba(13,26,43,.92); box-shadow:0 30px 80px rgba(0,0,0,.3); }
.guest-brand { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:44px; }.guest-brand img{max-width:140px;max-height:54px;object-fit:contain}
.guest-card h1 { margin:0 0 10px; font-size:clamp(1.6rem,7vw,2.7rem); line-height:1.2; letter-spacing:-.05em; }
.guest-card .event-name { margin:0 0 10px; color:var(--mint); font-weight:800; font-size:.82rem; letter-spacing:.08em; }
.options { display:grid; gap:11px; margin:28px 0; }
.option { width:100%; display:flex; align-items:center; gap:13px; padding:16px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:rgba(255,255,255,.035); text-align:left; font-weight:700; }
.option:hover,.option.selected{border-color:var(--mint);background:rgba(66,232,198,.09)}
.radio { width:20px;height:20px;border:2px solid #617388;border-radius:50%;padding:4px; }.option.selected .radio{border-color:var(--mint);background:var(--mint);box-shadow:inset 0 0 0 4px var(--panel)}
.thanks { text-align:center; padding:28px 0 8px; }.thanks .check{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 20px;border-radius:50%;color:#07111f;background:var(--mint);font-size:2rem;font-weight:900}
.display-shell { min-height:100vh; padding:var(--display-padding,48px); position:relative; overflow:hidden; color:var(--display-text,#fff); background-color:var(--display-bg,#07111f); background-size:cover; background-position:center; font-family:var(--display-font); }
.display-shell::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(2,7,13,.6),rgba(2,7,13,.08)); pointer-events:none; }
.display-content { position:relative; z-index:1; min-height:calc(100vh - var(--display-padding,48px) * 2); display:flex; flex-direction:column; -webkit-text-stroke:calc(var(--text-edge-width,0) * 1px) var(--text-edge-color,#07111f); text-shadow:0 2px var(--text-shadow,0) rgba(0,0,0,.8); }
.display-top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }.display-logo{max-width:190px;max-height:72px;object-fit:contain}
.display-event { font-size:clamp(.75rem,1.5vw,1.1rem); font-weight:850; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.display-question { max-width:1200px; margin:clamp(35px,7vh,90px) 0 28px; font-family:var(--question-font,var(--display-font)); font-size:clamp(2rem,5.2vw,5.4rem); line-height:1.08; letter-spacing:-.055em; text-wrap:balance; transform:translate(calc(var(--question-x,0) * 1vw),calc(var(--question-y,0) * 1vh)) scale(var(--question-scale,1)); transform-origin:left center; }
.display-off { display:none!important; }
.display-chart { margin-top:auto; padding:clamp(20px,3vw,36px); border-radius:var(--display-radius,24px); background:color-mix(in srgb,var(--display-surface,#102238) 88%,transparent); backdrop-filter:blur(18px); }
.panel-transparent { background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; }
.display-chart .bar-head { font-size:clamp(.9rem,1.8vw,1.45rem); }.display-chart .bar-track{height:clamp(14px,2vh,24px)}.display-chart .bars{gap:clamp(12px,2vh,22px)}
.display-chart .pie-wrap{grid-template-columns:minmax(320px,42vw) 1fr}.display-chart .pie-canvas{max-width:620px;transform:translate(calc(var(--chart-x,0) * 1vw),calc(var(--chart-y,0) * 1vh)) scale(var(--chart-scale,1));transform-origin:center}.display-chart .pie-label{font-family:var(--display-font);font-size:17px;stroke:var(--text-edge-color,#07111f);stroke-width:calc(var(--text-edge-width,0) * 2px);filter:drop-shadow(0 2px var(--text-shadow,0) rgba(0,0,0,.8))}.display-chart .pie-label-percent{font-size:21px}.display-chart .pie-label-outside{font-size:14px}.display-chart .legend{font-size:clamp(.72rem,1.2vw,1rem);transform:translate(calc(var(--legend-x,0) * 1vw),calc(var(--legend-y,0) * 1vh)) scale(var(--legend-scale,.72));transform-origin:left center}.display-chart .legend-row{font-size:inherit}
.display-chart>.bars{transform:translate(calc(var(--bar-x,0) * 1vw),calc(var(--bar-y,0) * 1vh)) scale(var(--bar-scale,1));transform-origin:center}
.overlay-panel h1{transform:translate(calc(var(--question-x,0) * 1vw),calc(var(--question-y,0) * 1vh)) scale(var(--question-scale,1));transform-origin:left center}.overlay-panel .pie-canvas{transform:translate(calc(var(--chart-x,0) * 1vw),calc(var(--chart-y,0) * 1vh)) scale(var(--chart-scale,1))}.overlay-panel .legend{font-size:.78rem;transform:translate(calc(var(--legend-x,0) * 1vw),calc(var(--legend-y,0) * 1vh)) scale(var(--legend-scale,.72));transform-origin:left center}.overlay-panel>.bars{transform:translate(calc(var(--bar-x,0) * 1vw),calc(var(--bar-y,0) * 1vh)) scale(var(--bar-scale,1))}
.overlay-panel .pie-label{font-family:var(--display-font);stroke:var(--text-edge-color,#07111f);stroke-width:calc(var(--text-edge-width,0) * 2px);filter:drop-shadow(0 2px var(--text-shadow,0) rgba(0,0,0,.8))}
.display-footer { margin-top:20px; display:flex;justify-content:space-between;align-items:center;gap:18px;opacity:.7;font-size:.9rem; }
.waiting { margin:auto; text-align:center; }.waiting p{font-size:clamp(1rem,2vw,1.5rem);opacity:.7}.waiting h2{font-size:clamp(2rem,5vw,5rem);margin:0;letter-spacing:-.05em}
.overlay-page { background:transparent!important; overflow:hidden; }
.overlay-shell { min-height:100vh; display:flex; align-items:flex-end; padding:4vh 4vw; color:var(--display-text,#fff); background:transparent; font-family:var(--display-font); }
.overlay-panel { width:min(1050px,90vw); padding:clamp(18px,2vw,28px); border-radius:var(--display-radius,24px); background:color-mix(in srgb,var(--display-surface,#102238) 88%,transparent); box-shadow:var(--overlay-shadow,0 24px 60px rgba(0,0,0,.45)); backdrop-filter:blur(16px); -webkit-text-stroke:calc(var(--text-edge-width,0) * 1px) var(--text-edge-color,#07111f); text-shadow:0 2px var(--text-shadow,0) rgba(0,0,0,.8); }
.overlay-panel h1{margin:0 0 18px;font-family:var(--question-font,var(--display-font));font-size:clamp(1.25rem,2.4vw,2.3rem);line-height:1.2;letter-spacing:-.035em}.overlay-panel .bar-track{height:14px}.overlay-panel .bars{gap:10px}
@media (max-width: 900px) {
  .app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:16px}.sidebar .brand{padding:0 4px 14px}.nav{display:flex;overflow:auto}.nav button{width:auto;white-space:nowrap}.nav button.active::before{display:none}.sidebar-foot{position:static;grid-template-columns:1fr 1fr;margin-top:12px}.main{padding:20px 16px 50px}.grid-3{grid-template-columns:1fr}.grid-2,.control-grid,.settings-layout,.layout-editor-grid{grid-template-columns:1fr}.control-card{position:static}.preview-window{position:static}.topbar{align-items:stretch;flex-direction:column}.event-select{max-width:none}.page-head{align-items:flex-start;flex-direction:column}.qr-card{grid-template-columns:1fr}.qr-card img{width:min(240px,100%)}.step-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px) { .color-grid{grid-template-columns:1fr}.pie-wrap{grid-template-columns:1fr}.guest-shell{padding:12px}.guest-card{border-radius:20px}.top-actions{width:100%}.top-actions .btn{flex:1}.display-shell{--display-padding:24px}.display-chart .pie-wrap{grid-template-columns:1fr}.display-footer{display:none}.step-strip{grid-template-columns:1fr}.instruction-card{grid-template-columns:auto 1fr}.instruction-card>.btn{grid-column:1/-1}.quick-start{padding:14px}.status-pill{white-space:normal}.live-head-actions{width:100%;justify-content:stretch}.live-head-actions>*{flex:1}.question-nav{align-items:stretch;flex-direction:column}.question-nav .inline{display:grid;grid-template-columns:1fr 1fr}.stage-card{padding:20px}.guide-actions{flex-direction:column-reverse}.guide-actions .btn{width:100%} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important} }