:root { color-scheme: dark; --bg:#0b1018; --panel:#141c28; --line:#293444; --text:#edf2f7; --muted:#99a8bb; --accent:#92e5c1; }
* { box-sizing:border-box; }
body { margin:0; padding:24px 32px 40px; background:var(--bg); color:var(--text); font-family:Inter,'Segoe UI',sans-serif; }
button,input,textarea { font:inherit; }
button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border:1px solid var(--line); border-radius:10px; background:#202c3b; color:var(--text); cursor:pointer; font-weight:600; }
button:hover { background:#304054; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
input,textarea { border:1px solid var(--line); border-radius:8px; padding:12px; background:#0d141e; color:var(--text); min-width:0; }
.hidden { display:none !important; }
.view-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; max-width:1600px; margin:0 auto 24px; }
.app-brand { color:var(--text); text-decoration:none; font-size:22px; font-weight:700; letter-spacing:-.6px; }
.app-brand span { color:var(--muted); font-size:14px; font-weight:400; letter-spacing:0; }
.view-actions,.sync-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn-start,.btn-add { background:var(--accent); color:#10261e; border-color:transparent; }
.btn-start:hover,.btn-add:hover { background:#b0f0d6; }
.btn-pause { background:#f6cf7a; color:#2c230f; }
.btn-next { border-color:#74c9a5; color:#a4edce; }
.sync-panel { max-width:1600px; margin:0 auto 24px; border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--panel); }
.sync-heading { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
#sync-status,.sync-help { font-size:13px; color:var(--muted); }
.sync-actions { margin:12px 0; }
.sync-actions input[type=url],#session-link { flex:1; min-width:200px; }
.sound-option { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); }
#session-share { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
#session-share > label { font-size:13px; color:var(--muted); }
#sync-error { color:#ffb3b0; margin:8px 0 0; }
.main-container { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; max-width:1600px; margin:auto; align-items:start; }
.presenters-section { border:1px solid var(--line); padding:22px; border-radius:14px; background:var(--panel); }
h2 { font-size:18px; margin:0 0 20px; }
h3 { font-size:13px; color:var(--muted); font-weight:500; }
.presenters-input-container { display:flex; flex-direction:column; gap:10px; }
textarea { width:100%; min-height:88px; resize:vertical; }
.presenters-list-container { margin-top:24px; }
#presenters-list { padding:0; margin:0; list-style:none; }
#presenters-list li { display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--line); padding:12px 0; }
.presenter-content { flex:1; overflow-wrap:anywhere; font-size:14px; }
.presenter-buttons { display:flex; gap:4px; }
.presenter-buttons button { padding:5px 8px; border:0; background:transparent; }
.remove-presenter { color:#ffa4a4; }
.dragging { opacity:.5; }
.timer-container { min-width:0; grid-column:2; }
.presenters-section.hidden + .timer-container { grid-column:1/-1; }
.container { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#0e1621; }
.header-section { padding:22px 26px; border-bottom:1px solid var(--line); }
h1 { font-size:18px; margin:0 0 16px; font-weight:600; }
.config-section { display:flex; flex-wrap:wrap; gap:20px; }
.config-item { display:flex; gap:12px; align-items:center; font-size:13px; color:var(--muted); }
.config-item input { width:72px; text-align:center; }
.timer-section { min-height:470px; padding:44px 32px 28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.current-presenter { order:2; width:100%; }
.current-presenter h3 { display:none; }
.current-presenter-name { font-size:clamp(28px,4vw,58px); font-weight:500; letter-spacing:-1px; line-height:1.15; overflow-wrap:anywhere; }
.phase-indicator { order:1; font-size:14px; text-transform:uppercase; letter-spacing:.23em; color:var(--accent); margin-bottom:20px; }
.questions-phase { color:#b6c7ff; }
.timer-display { order:3; font-size:clamp(80px,13vw,190px); font-weight:700; letter-spacing:-.045em; line-height:1.15; font-variant-numeric:tabular-nums; margin:12px 0 20px; }
.timer-display.warning { color:#f6cf7a; }
.timer-display.alert { color:#ff8d8d; }
.progress-container { order:4; width:min(70%,600px); height:3px; background:#273445; border-radius:4px; overflow:hidden; }
.progress-bar { height:100%; background:var(--accent); transition:width .2s linear; }
.questions-progress { background:#b6c7ff; }
.controls { order:5; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:36px; }
.notification { display:none; }
.display-connection { position:fixed; top:12px; left:50%; transform:translateX(-50%); color:#f6cf7a; font-size:12px; z-index:20; }
/* A visualização de palco é local a este dispositivo. */
body.presentation-view { padding:0; overflow:hidden; }
.presentation-view .sync-panel,.presentation-view .presenters-section,.presentation-view .header-section,.presentation-view .controls,.presentation-view .progress-container,.presentation-view .app-brand { display:none !important; }
.presentation-view .main-container { display:block; max-width:none; width:100%; }
.presentation-view .timer-container { width:100%; }
.presentation-view .container { border:0; border-radius:0; background:var(--bg); }
.presentation-view .timer-section { width:100%; height:100vh; height:100dvh; min-height:0; padding:8vh 4vw; gap:0; }
.presentation-view .current-presenter { display:block !important; }
.presentation-view .phase-indicator { font-size:clamp(16px,2.5vw,34px); margin:0 0 4vh; }
.presentation-view .current-presenter-name { font-size:clamp(28px,5.5vw,86px); max-width:95%; margin:auto; line-height:1.12; }
.presentation-view .timer-display { font-size:min(29vw,43vh); font-size:min(29vw,43dvh); line-height:1; margin:4vh 0 0; }
.presentation-view .view-toolbar { position:fixed; right:18px; bottom:18px; z-index:10; margin:0; opacity:.12; transition:opacity .2s; }
.presentation-view .view-toolbar:hover,.presentation-view .view-toolbar:focus-within { opacity:1; }
.presentation-view .view-toolbar button { padding:9px 12px; font-size:12px; background:#182330; color:var(--muted); border-color:var(--line); }
@media(max-width:800px) {
 body { padding:18px 14px; }
 .app-brand span { display:none; }
 .view-toolbar { align-items:flex-start; }
 .view-actions { justify-content:flex-end; gap:6px; }
 .view-actions button { font-size:12px; padding:10px; }
 .main-container { grid-template-columns:1fr; }
 .timer-container { grid-column:1; grid-row:1; }
 .presenters-section { grid-row:2; }
 .timer-section { min-height:370px; padding:32px 18px 24px; }
 .timer-display { font-size:clamp(76px,21vw,150px); }
 .current-presenter-name { font-size:32px; }
 .sync-panel { padding:16px; }
 .config-section { gap:12px; }
 .config-item { flex:1 1 100%; justify-content:space-between; }
 .sync-actions input[type=url],#session-link { flex-basis:100%; }
 .controls button { flex:1 1 40%; font-size:13px; }
 .presentation-view .view-toolbar { opacity:.4; }
}