:root {
  --ink: #1b1b1b;
  --muted: #6f6d68;
  --paper: #f7f5f0;
  --card: #fffefa;
  --line: #dedbd3;
  --lime: #d9ff5c;
  --purple: #7657f6;
  --purple-dark: #593ed4;
  --orange: #ff8b5c;
  --blue: #57b9ff;
  --pink: #f479b7;
  --green: #50c878;
  --shadow: 0 14px 40px rgba(37, 32, 23, .09);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.app { min-height: 100vh; }
.topbar { height: 74px; padding: 0 34px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: rgba(247,245,240,.93); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 11px; font: 800 20px Manrope; letter-spacing: -.6px; }
.brand-mark { width: 35px; height: 35px; border-radius: 11px; background: var(--ink); display: grid; place-items: center; color: var(--lime); font-size: 19px; transform: rotate(-3deg); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #e8e1ff; color: #6348cc; font-weight: 700; border: 0; }
.btn { border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); padding: 10px 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.btn-dark { background: var(--ink); color: white; border-color: var(--ink); }
.btn-purple { background: var(--purple); color: white; border-color: var(--purple); }
.btn-lime { background: var(--lime); border-color: var(--ink); }
.btn-large { padding: 14px 22px; border-radius: 14px; }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); background: white; border-radius: 11px; font-size: 18px; }
.dashboard { max-width: 1180px; margin: 0 auto; padding: 56px 32px; }
.eyebrow { font-weight: 700; color: var(--purple); font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font: 800 clamp(36px,5vw,62px)/1.04 Manrope; letter-spacing: -2.4px; margin-bottom: 18px; }
h2 { font: 800 30px/1.1 Manrope; letter-spacing: -1px; }
h3 { font: 700 18px Manrope; }
.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; margin-bottom: 60px; align-items: stretch; }
.hero-copy { padding: 28px 0; }
.hero-copy p { color: var(--muted); font-size: 18px; max-width: 570px; line-height: 1.6; }
.hero-actions { display: flex; gap: 11px; margin-top: 27px; }
.join-card { border-radius: 28px; background: var(--ink); color: white; padding: 31px; position: relative; overflow: hidden; box-shadow: var(--shadow); min-height: 310px; }
.join-card:before { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; background: var(--purple); right: -60px; top: -70px; }
.join-card:after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 40px; transform: rotate(25deg); background: var(--lime); right: 35px; bottom: -95px; }
.join-card > * { position: relative; z-index: 1; }
.join-card .label { color: #bbb8b1; font-weight: 600; margin-top: 25px; }
.code-row { display: flex; gap: 9px; }
.code-input { width: 100%; border: 0; border-radius: 13px; padding: 15px; font-size: 18px; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; outline: none; }
.join-card small { display: block; color: #999791; margin-top: 15px; }
.section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.section-head p { color: var(--muted); margin: 7px 0 0; }
.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.room-card { background: var(--card); border: 1px solid var(--line); border-radius: 19px; padding: 21px; transition: .2s; }
.room-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.room-art { height: 145px; border-radius: 14px; background: #e7ddff; padding: 18px; position: relative; overflow: hidden; margin-bottom: 18px; }
.room-art.orange { background: #ffe4d8; }.room-art.blue { background: #dcefff; }
.mini-poll { background: white; border-radius: 10px; padding: 10px; width: 78%; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.mini-line { height: 8px; border-radius: 4px; background: #e9e5de; margin: 7px 0; }
.mini-line.color { background: var(--purple); width: 75%; }.orange .mini-line.color { background: var(--orange); width: 56%; }.blue .mini-line.color { background: var(--blue); width: 86%; }
.room-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; }
.room-card-title { display:flex; align-items:start; justify-content:space-between; gap:10px; }
.room-card-title h3 { margin-bottom:14px; }
.delete-room { width:32px; height:32px; flex:0 0 auto; border:1px solid var(--line); border-radius:9px; background:white; color:#a14848; font-size:17px; line-height:1; }
.delete-room:hover { background:#fff0f0; border-color:#e7b2b2; }
.status { display: inline-flex; align-items: center; gap: 6px; color: #27844a; font-weight: 700; }.dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; }

.studio { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 74px); }
.sidebar { border-right: 1px solid var(--line); padding: 25px 18px; background: #f1eee7; }
.back { border: 0; background: transparent; color: var(--muted); font-weight: 700; padding: 8px; }
.room-title { padding: 18px 8px 22px; border-bottom: 1px solid var(--line); }.room-title h3 { margin-bottom: 5px; }.room-title span { color: var(--muted); font-size: 13px; }
.slides-label { display: flex; justify-content: space-between; margin: 23px 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.slide-thumb { display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; border: 1px solid transparent; border-radius: 11px; padding: 7px; margin-bottom: 7px; color: var(--muted); font-size: 12px; cursor: pointer; }
.slide-thumb.active { background: white; color: var(--ink); border-color: var(--purple); box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.thumb-preview { height: 48px; background: white; border: 1px solid var(--line); border-radius: 7px; display: grid; place-items: center; font-size: 17px; }
.add-slide { width: 100%; margin-top: 12px; border: 1px dashed #b9b5ab; border-radius: 11px; background: transparent; padding: 12px; font-weight: 700; }
.slide-controls { display:flex; flex-direction:column; gap:2px; }
.slide-controls button { width:23px; height:19px; padding:0; border:0; border-radius:5px; background:#eeebe4; color:var(--muted); font-size:11px; line-height:1; }
.slide-controls button:hover:not(:disabled) { background:#ded8cb; color:var(--ink); }
.slide-controls button:disabled { opacity:.28; cursor:not-allowed; }
.slide-controls .slide-delete { color:#ae4343; font-size:15px; }
.stage-wrap { padding: 24px 28px; min-width: 0; }
.studio-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.live-pill { background: #e8f8ed; color: #238045; padding: 8px 11px; border-radius: 20px; font-weight: 700; font-size: 13px; }
.stage { background: #242328; border-radius: 22px; min-height: 560px; color: white; display: flex; flex-direction: column; padding: 28px 34px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stage-head { display: flex; justify-content: space-between; align-items: center; color: #b8b6be; font-size: 14px; }
.room-code strong { color: var(--lime); letter-spacing: 2px; font-size: 17px; }
.question { text-align: center; font: 800 clamp(28px,4vw,48px)/1.16 Manrope; letter-spacing: -1.5px; max-width: 850px; margin: 54px auto 34px; }
.chart { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px,4vw,55px); padding: 20px 5%; min-height: 270px; }
.bar-wrap { height: 270px; flex: 1; max-width: 160px; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }
.count { font: 800 23px Manrope; margin-bottom: 8px; }
.bar { min-height: 5px; border-radius: 13px 13px 3px 3px; transition: height .5s cubic-bezier(.2,.8,.2,1); }
.bar-label { margin-top: 11px; font-weight: 700; font-size: 14px; }
.stage-foot { display: flex; justify-content: space-between; align-items: center; color: #aaa8b0; font-size: 13px; }
.presenter-tools { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }

.participant { min-height: 100vh; display: flex; flex-direction: column; background: #fbfaf7; }
.participant-head { padding: 19px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.participant-main { width: min(680px, calc(100% - 32px)); margin: auto; padding: 50px 0; text-align: center; }
.participant-main h1 { font-size: clamp(30px,7vw,48px); letter-spacing: -1.5px; }
.participant-main .sub { color: var(--muted); margin-bottom: 33px; }
.option-list { display: grid; gap: 12px; }
.option { text-align: left; background: white; border: 2px solid var(--line); border-radius: 15px; padding: 17px 19px; font-weight: 700; display: flex; align-items: center; gap: 13px; transition: .18s; }
.option:hover, .option.selected { border-color: var(--purple); background: #f3efff; transform: translateY(-1px); }
.letter { width: 31px; height: 31px; border-radius: 9px; background: #ece8e0; display: grid; place-items: center; }
.option.selected .letter { background: var(--purple); color: white; }
.ranking-list, .ranking-results { display: grid; gap: 11px; width: min(720px, 100%); margin: 0 auto 24px; }
.ranking-item, .ranking-result { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 13px 16px; background: white; border: 2px solid var(--line); border-radius: 15px; text-align: left; }
.rank-number, .ranking-result > b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--purple); color: white; font-size: 17px; }
.rank-controls { display: flex; gap: 6px; }
.rank-controls button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #f7f7f7; font-size: 18px; cursor: pointer; }
.rank-controls button:disabled { opacity: .3; cursor: default; }
.ranking-result { grid-template-columns: 44px 1fr auto; }
.ranking-result small { color: var(--muted); font-weight: 700; }
.presentation-stage .ranking-results { width: min(900px, 90vw); }
@media (max-width: 520px) { .ranking-result { grid-template-columns: 38px 1fr; } .ranking-result small { grid-column: 2; } }
.submit { width: 100%; margin-top: 19px; padding: 16px; border-radius: 14px; border: 0; background: var(--ink); color: white; font-weight: 700; font-size: 16px; }
.thanks { background: #efffd2; padding: 25px; border: 1px solid #c8e584; border-radius: 18px; }
.thanks .check { font-size: 40px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(16,15,13,.5); display: grid; place-items: center; z-index: 30; padding: 20px; }
.modal { width: min(510px,100%); background: var(--card); border-radius: 22px; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.modal label { display: block; font-weight: 700; margin: 16px 0 7px; }
.field { width: 100%; border: 1px solid var(--line); background: white; padding: 13px; border-radius: 11px; outline: none; }.field:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #e8e1ff; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
.toast { position: fixed; right: 24px; bottom: 24px; background: var(--ink); color: white; padding: 13px 18px; border-radius: 12px; z-index: 50; box-shadow: var(--shadow); }
.add-room { display:grid; place-items:center; min-height:250px; border-style:dashed; cursor:pointer; text-align:center; }
.add-room h3 { margin:8px 0 5px; }
.add-room span, .muted { color:var(--muted); }
.studio-bar .muted { margin-left:8px; }
.studio-actions { display:flex; gap:8px; align-items:center; }
.room-code-small { color:var(--ink); letter-spacing:1px; }
.thanks p { margin:0; color:var(--muted); }
.change-answer { margin-top:18px; }
.privacy-note { margin-top:18px; padding:12px; border-radius:10px; background:#efffd2; color:#47641e; font-size:13px; }
.loading { min-height:100vh; display:grid; place-content:center; gap:18px; text-align:center; }
.loading p { color:var(--muted); }
.hidden { display:none; }
.ask-input { width:100%; resize:vertical; min-height:150px; border:2px solid var(--line); border-radius:16px; padding:18px; background:white; font-size:17px; line-height:1.5; outline:none; }
.ask-input:focus { border-color:var(--purple); box-shadow:0 0 0 4px #e8e1ff; }
.question-feed { flex:1; width:min(850px,100%); margin:0 auto 25px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-content:start; overflow:auto; padding:4px; }
.question-card { min-height:105px; border:1px solid #4a4850; border-radius:15px; background:#302f35; color:white; padding:17px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; gap:12px; transition:.2s; }
.question-card:hover { border-color:var(--lime); transform:translateY(-1px); }
.question-card span { font-size:17px; line-height:1.35; font-weight:600; }
.question-card small { color:#aaa8b0; }
.question-card.answered { opacity:.55; }
.question-card.answered span { text-decoration:line-through; }
.empty-questions { flex:1; display:grid; place-content:center; text-align:center; color:#aaa8b0; }
.empty-questions>div { width:62px; height:62px; margin:0 auto 14px; display:grid; place-items:center; border:1px solid #56545c; border-radius:18px; font:800 28px Manrope; color:var(--lime); }
.empty-questions h3 { color:white; margin-bottom:7px; }
.empty-questions p { margin:0; }
.qr-modal { text-align:center; position:relative; }
.qr-modal h2 { margin:8px 30px 20px; }
.modal-close { position:absolute; right:18px; top:15px; border:0; background:transparent; color:var(--muted); font-size:28px; line-height:1; }
.qr-code { width:264px; height:264px; padding:12px; margin:0 auto 15px; border:1px solid var(--line); border-radius:18px; background:white; }
.qr-code img, .qr-code canvas { display:block; width:240px; height:240px; }
.qr-room-code { font-size:14px; color:var(--muted); }
.qr-room-code strong { margin-left:7px; color:var(--ink); font:800 21px Manrope; letter-spacing:2px; }
.qr-help { color:var(--muted); font-size:13px; margin:15px 0 8px; }
.qr-link { background:#f1eee7; border-radius:9px; padding:10px; margin-bottom:16px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.delete-modal { text-align:center; }
.delete-modal>p { color:var(--muted); line-height:1.55; }
.danger-icon { width:52px; height:52px; margin:0 auto 17px; display:grid; place-items:center; border-radius:50%; background:#ffe3e3; color:#ad3434; font:800 25px Manrope; }
.btn-danger { background:#b83c3c; border-color:#b83c3c; color:white; }
.join-only { min-height:calc(100vh - 74px); display:grid; place-items:center; padding:40px 20px; background:radial-gradient(circle at 50% 45%,#eee8ff 0,transparent 37%); }
.join-welcome { width:min(650px,100%); text-align:center; }
.join-welcome h1 { margin:10px 0 16px; }
.join-welcome>p { max-width:560px; margin:0 auto 30px; color:var(--muted); font-size:18px; line-height:1.55; }
.join-panel { padding:25px; border:1px solid var(--line); border-radius:22px; background:var(--ink); color:white; box-shadow:var(--shadow); text-align:left; }
.join-panel label { display:block; margin-bottom:9px; color:#bbb8b1; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:1px; }
.rooms-intro { display:flex; justify-content:space-between; align-items:end; gap:25px; margin-bottom:55px; }
.rooms-intro h1 { margin:9px 0 12px; }
.rooms-intro p { margin:0; color:var(--muted); font-size:18px; }
.no-rooms { grid-column:1/-1; padding:60px; text-align:center; border:1px dashed var(--line); border-radius:19px; color:var(--muted); }
.presentation-view { width:100vw; height:100vh; overflow:hidden; position:relative; background:#19181c; color:white; isolation:isolate; transition:background 1s; }
.presentation-stage { position:relative; z-index:2; width:100%; height:100%; display:flex; flex-direction:column; padding:clamp(26px,4vw,60px); }
.presentation-brand { display:flex; align-items:center; gap:12px; color:#aaa8b0; font:700 14px Manrope; letter-spacing:1.4px; }
.presentation-question { max-width:1200px; margin:clamp(35px,7vh,90px) auto clamp(20px,4vh,50px); text-align:center; font:800 clamp(36px,5.2vw,78px)/1.1 Manrope; letter-spacing:-2px; }
.presentation-stage .chart { width:100%; max-width:1250px; margin:0 auto; min-height:0; }
.presentation-stage .bar-wrap { height:min(36vh,340px); max-width:210px; }
.presentation-stage .bar-label { font-size:clamp(15px,1.5vw,23px); }
.presentation-stage .count { font-size:clamp(23px,2.4vw,38px); }
.presentation-stage .question-feed { width:min(1200px,100%); grid-template-columns:repeat(3,minmax(0,1fr)); }
.presentation-stage .question-card { cursor:default; font-size:clamp(16px,1.4vw,22px); }
.presentation-foot { display:flex; justify-content:space-between; align-items:end; color:#aaa8b0; font-size:clamp(13px,1.3vw,20px); }
.viewer-join { display:flex; align-items:center; gap:15px; color:white; font-weight:700; }
.viewer-qr { width:128px; height:128px; padding:8px; border-radius:12px; background:white; }
.viewer-qr img, .viewer-qr canvas { display:block; width:112px; height:112px; }
.viewer-effects { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.viewer-effects i { position:absolute; display:block; opacity:.5; animation:viewer-drift 10s ease-in-out infinite alternate; transition:transform .8s ease,opacity .8s ease; }
.theme-aurora { background:#171126; }
.theme-aurora .viewer-effects i { width:clamp(220px,28vw,520px); aspect-ratio:1; border-radius:50%; filter:blur(55px); }
.theme-ocean { background:linear-gradient(145deg,#062a40,#087f8c); }
.theme-ocean .viewer-effects i { width:45vw; height:22vw; border:3px solid rgba(116,235,213,.3); border-radius:50%; }
.theme-sunset { background:linear-gradient(145deg,#672e63,#e85d75 55%,#ff9a5a); }
.theme-sunset .viewer-effects i { width:10px; height:45vh; border-radius:10px; background:rgba(255,232,174,.35); bottom:-20%; transform:rotate(38deg); }
.theme-confetti { background:#fff5dd; color:#242126; }
.theme-confetti .presentation-brand,.theme-confetti .presentation-foot { color:#625b50; }
.theme-confetti .viewer-effects i { border-radius:3px; animation-name:confetti-float; }
.theme-confetti .question-card { background:rgba(255,255,255,.82); border-color:#e5cfa5; color:#242126; }
.theme-confetti .empty-questions h3 { color:#242126; }
.theme-confetti .empty-questions { color:#625b50; }
@keyframes viewer-drift { to { translate:8vw 6vh; rotate:18deg; } }
@keyframes confetti-float { 0% { translate:0 -15vh; rotate:0deg; } 100% { translate:4vw 105vh; rotate:300deg; } }
.theme-modal { width:min(620px,100%); }
.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.theme-choice { padding:14px; display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto; column-gap:13px; text-align:left; border:1px solid var(--line); border-radius:15px; background:white; color:var(--ink); }
.theme-choice:hover { border-color:var(--purple); transform:translateY(-2px); box-shadow:var(--shadow); }
.theme-choice i { grid-row:1/3; width:52px; height:52px; border-radius:12px; }
.theme-choice b { align-self:end; font:700 16px Manrope; }
.theme-choice span { color:var(--muted); font-size:12px; }
.aurora-choice i { background:radial-gradient(circle at 70% 30%,#ff65cf,transparent 40%),linear-gradient(145deg,#241044,#7657f6); }
.confetti-choice i { background:radial-gradient(circle at 25% 30%,#ff8b5c 0 9%,transparent 10%),radial-gradient(circle at 72% 65%,#7657f6 0 11%,transparent 12%),#fff1c9; }
.ocean-choice i { background:linear-gradient(145deg,#063b5a,#29c7ba); }
.sunset-choice i { background:linear-gradient(145deg,#672e63,#e85d75,#ffaf5f); }
.login-page { min-height:calc(100vh - 74px); display:grid; place-items:center; padding:30px; }
.login-card { width:min(460px,100%); padding:34px; background:var(--card); border:1px solid var(--line); border-radius:23px; box-shadow:var(--shadow); }
.login-card h1 { margin:10px 0 12px; font-size:38px; letter-spacing:-1.5px; }
.login-card>p { color:var(--muted); }
.login-card label { display:block; margin:17px 0 7px; font-weight:700; }
.login-card .btn { width:100%; margin-top:22px; }
.login-error { min-height:20px; margin:13px 0 0; color:#b83c3c!important; font-weight:600; font-size:14px; text-align:center; }
.user-label { color:var(--muted); font-size:13px; font-weight:700; }
.word-cloud { flex:1; min-height:270px; width:100%; position:relative; overflow:hidden; }
.word-cloud>span { position:absolute; left:50%; top:50%; visibility:hidden; color:var(--lime); font:800 28px/1 Manrope; white-space:nowrap; transition:left .65s cubic-bezier(.2,.8,.2,1),top .65s cubic-bezier(.2,.8,.2,1),font-size .5s ease,opacity .4s ease,rotate .5s ease; text-shadow:0 2px 18px rgba(0,0,0,.18); }
.word-cloud>span:nth-child(4n+2) { color:#8fd4ff; }.word-cloud>span:nth-child(4n+3) { color:#ff9f79; }.word-cloud>span:nth-child(4n) { color:#d4c4ff; }
.word-cloud>span.word-new { opacity:0; scale:.72; }
.word-cloud-empty { position:absolute; inset:0; display:grid; place-items:center; color:#aaa8b0; font-weight:700; }
.presentation-stage .word-cloud { min-height:0; max-width:1400px; margin:0 auto; }
.theme-confetti .word-cloud>span { color:#6845dc; text-shadow:none; }.theme-confetti .word-cloud>span:nth-child(4n+2) { color:#16769e; }.theme-confetti .word-cloud>span:nth-child(4n+3) { color:#c74928; }
.moderation { margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:white; }
.moderation-head,.moderation-head>div { display:flex; justify-content:space-between; align-items:center; gap:9px; }.moderation-head span { margin-left:10px; color:var(--muted); font-size:13px; }
.moderation-list { display:grid; gap:8px; margin-top:14px; max-height:220px; overflow:auto; }
.moderation-list>div { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 12px; border-radius:10px; background:#f4f1eb; font-weight:700; }
.moderation-list button { padding:7px 10px; border:0; border-radius:8px; color:#9a3838; }.moderation-list .approve { margin-left:6px; background:#ddf4c2; color:#376514; }
.word-entry { position:relative; }.word-entry input { width:100%; padding:18px 18px 38px; border:2px solid var(--line); border-radius:16px; background:white; font-size:18px; outline:none; }.word-entry input:focus { border-color:var(--purple); box-shadow:0 0 0 4px #e8e1ff; }
.word-entry span { position:absolute; right:14px; bottom:12px; color:var(--muted); font-size:12px; }.remaining { margin:12px 0 0; color:var(--muted); font-size:14px; }.submit:disabled { opacity:.45; cursor:not-allowed; }
.word-notice { display:flex; flex-direction:column; gap:4px; padding:15px; margin-bottom:14px; border:1px solid #c8e584; border-radius:13px; background:#efffd2; color:#47641e; }.word-notice span { color:#5b7140; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; }.room-grid { grid-template-columns: 1fr; }.studio { grid-template-columns: 1fr; }.sidebar { display:none; }.stage-wrap { padding: 14px; }.stage { padding: 20px 14px; min-height: 570px; }.topbar { padding: 0 18px; }.dashboard { padding: 38px 18px; }.question { margin-top: 45px; }.top-actions .hide-mobile { display:none; } }