@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@500&display=swap');

:root {
	--bg: #1a202c;
	--bg2: #212836;
	--bg3: #2d3748;
	--surface: #252d3d;
	--border: rgba(76, 159, 112, 0.15);
	--border-solid: #3a4556;
	--text: #e2e8f0;
	--text1: #e2e8f0;
	--text2: #a0aec0;
	--text3: #cbd5e0;
	--primary: #4c9f70;
	--primary-hover: #5cb882;
	--primary-glow: rgba(76, 159, 112, 0.2);
	--success: #48bb78;
	--danger: #fc8181;
	--warning: #f6ad55;
	--answer0: #4c9f70;
	--answer1: #fc8181;
	--answer2: #63b3ed;
	--answer3: #f6ad55;
	--answer4: #68d391;
	--answer5: #b794f4;
	--answer6: #4fd1c5;
	--answer7: #f6993f;
	--radius: 10px;
	--radius-sm: 6px;
	--font: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
	--mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 700; }
h3 {font-size: 1.3rem;  margin: 2rem 2rem 1rem; }
#stats-view h3 {
	margin-left: 0;
	margin-right: 0;
	color: var(--primary);
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.02);
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.card:hover h3 {
	color: var(--primary);
	transition: all .15s;
}
a { color: var(--primary); text-decoration: none; }

.hidden { display: none !important; }

.mt-1 {
	margin-top: 1rem;
}


/* ===== BUTTONS ===== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem 1.2rem;
	border: 1px solid var(--border-solid, var(--border));
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font-family: var(--font);
	font-size: .9rem;
	font-weight: 500;
	cursor: pointer;
	transition: all .15s;
}
.btn:hover {
	border-color: var(--primary);
	transform: translateY(-1px);
}
.btn-primary {
	background: linear-gradient(135deg, var(--primary), #38826a);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 2px 12px var(--primary-glow);
}
.btn-primary:hover {
	background: linear-gradient(135deg, var(--primary-hover), #2d7a5a);
	box-shadow: 0 4px 16px var(--primary-glow);
	transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-danger {
	background: rgba(239, 68, 68, 0.1);
	border-color: rgba(239, 68, 68, 0.3);
	color: #fca5a5;
}
[data-theme="light"] .btn-danger { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.25); color: #dc2626; }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-warning { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; }
[data-theme="light"] .btn-warning { background: rgba(217, 119, 6, 0.08); color: #d97706; }
.btn-warning:hover { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-sm { padding: .35rem .75rem; font-size: .8rem; }
.btn-lg { padding: .9rem 2rem; font-size: 1.1rem; font-weight: 600; width: 100%; justify-content: center; }
.btn-back { }
.btn.btn-secondary {
	border-color: var(--primary);
	color: var(--primary-hover, var(--primary));
}

p#join-error { 
	margin: 1rem 0; 
	padding: .9rem 2rem;
	border: 0px solid var(--danger); 
	filter: brightness(1.15);
	color: var(--danger);
	align-items: center;
	gap: .4rem;
	border-radius: var(--radius-sm);
}
}

/* ===== BADGES ===== */

.badge-waiting { background: rgba(245,158,11,.12); color: #d97706; }
[data-theme="light"] .badge-waiting { color: #d97706; }
.badge-playing { background: rgba(34,197,94,.15); color: #16a34a; animation: pulse 2s ease-in-out infinite; }
[data-theme="light"] .badge-playing { color: #16a34a; }
.badge-draft { background: rgba(76,159,112,.1); color: #409461; }
[data-theme="light"] .badge-draft { color: #409461; }
.badge-finished { background: rgba(45,55,72,.08); color: #4a5568; }
[data-theme="light"] .badge-finished { color: #2d3748; }
.badge {
	display: inline-block;
	padding: .15rem .5rem;
	border-radius: .35rem;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
} 

/* ===== FORMS ===== */

input, textarea, select {
	width: 100%;
	padding: .7rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg2);
	color: var(--text);
	font-family: var(--font);
	font-size: 1rem; 
	margin-top: .6rem;
	outline: none;
	transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--primary); outline: none; /* box-shadow: 0 0 0 3px var(--primary-glow); */ }
input::placeholder, textarea::placeholder { color: var(--text2); }

label { 	
display: block;
	font-size: 1rem;
	margin: 1.2rem 0 .6rem; 
	font-weight: 500;
	color: var(--primary);}
} 

.error { color: var(--danger); font-size: .9rem; margin-top: .5rem; }

/* ===== TABLE ===== */

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}
.table th, .table td {
	padding: .65rem .8rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}
.table th { color: var(--text2); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

/* ===== CARD ===== */

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: .85rem 1rem;
	margin-bottom: .5rem;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.card:hover {
	border-color: var(--primary);
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.card-main { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.card-main h3 { margin: 1rem 0rem 1rem; }
.card-meta { color: var(--text2); font-size: .85rem; margin-top: .5rem; display: flex; justify-content: center; }
.card-meta span { margin: 0 1rem; }
.card-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-left: auto; }

.empty { color: var(--text2); font-style: italic; padding: 2rem; text-align: center; }

/* ===== ADMIN ===== */

.admin-header {
	display: flex;
	align-items: center;
	padding: 0 1.25rem;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	min-height: 56px;
	gap: .75rem;
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-header h1 {
	font-size: 1.1rem;
	color: var(--text);
	font-weight: 800;
	white-space: nowrap;
	letter-spacing: -.02em;
}
.admin-header h1 span { color: var(--text2); font-weight: 400; }
.admin-nav { display: flex; gap: 2px; margin-left: 1rem; min-width: 0; flex-shrink: 1; }
.admin-nav-item {
	padding: .45rem .8rem;
	border-radius: .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--text2);
	cursor: pointer;
	transition: background .15s, color .15s;
	border: none;
	background: none;
	white-space: nowrap;
	text-decoration: none;
}
.admin-nav-item:hover { background: var(--bg); color: var(--text); }
.admin-nav-item.active { background: var(--primary-glow); color: var(--primary); }
.admin-toolbar { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.admin-user-btn {
	display: flex; align-items: center; gap: .4rem;
	padding: .35rem .7rem;
	border-radius: .5rem;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s;
	white-space: nowrap;
}
.admin-user-btn:hover { border-color: var(--primary); }
.admin-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: .35rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: .5rem;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	min-width: 180px;
	padding: .35rem;
	z-index: 200;
	display: none;
}
.admin-dropdown.open { display: block; }
.admin-dropdown a, .admin-dropdown button {
	display: flex; align-items: center; gap: .5rem;
	width: 100%;
	padding: .5rem .75rem;
	border-radius: .35rem;
	font-size: .85rem;
	color: var(--text);
	text-decoration: none;
	border: none;
	background: none;
	cursor: pointer;
	transition: background .15s;
	text-align: left;
}
.admin-dropdown a:hover, .admin-dropdown button:hover { background: var(--bg); }
.admin-dropdown .sep { height: 1px; background: var(--border); margin: .25rem .5rem; }

/* Mobile burger menu */
.admin-burger {
	display: none;
	background: none;
	border: none;
	font-size: 1.3rem;
	cursor: pointer;
	padding: .3rem;
	color: var(--text);
	margin-left: auto;
}
.admin-mobile-menu {
	display: none;
	position: fixed;
	top: 56px;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--surface);
	z-index: 99;
	padding: 1rem;
	overflow-y: auto;
	border-top: 1px solid var(--border);
}
.admin-mobile-menu.open { display: block !important; }
.admin-mobile-menu a,
.admin-mobile-menu button {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	padding: .85rem 1rem;
	border-radius: .5rem;
	font-size: 1rem;
	color: var(--text);
	text-decoration: none;
	border: none;
	background: none;
	cursor: pointer;
	transition: background .15s;
	text-align: left;
}
.admin-mobile-menu a:hover,
.admin-mobile-menu button:hover { background: var(--bg); }
.admin-mobile-menu .mobile-sep { height: 1px; background: var(--border); margin: .5rem 0; }
.admin-mobile-menu .mobile-section { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); padding: .5rem 1rem .25rem; font-weight: 600; }

@media (max-width: 700px) {
	.admin-header { padding: 0 .75rem; gap: .5rem; }
	.admin-header h1 { font-size: .95rem; }
	.admin-nav { display: none; }
	.admin-toolbar { display: none; }
	.admin-burger { display: block; }
}

.admin-page main { max-width: 1000px; margin: 1.25rem auto; padding: 0 1.25rem; }

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding: 0 0 .75rem;
	gap: .75rem;
	flex-wrap: wrap;
}
.section-header h2 { font-size: 1.5rem; color: var(--primary); }

.session-header { 
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1rem; 
	margin-bottom: 2rem;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.02);
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	}
.session-header h2 { font-size: 1.5rem; margin-bottom: .3rem; }
.session-actions { display: flex; gap: .5rem; }

.code-display { font-family: var(--mono); font-size: 1.2rem; color: var(--primary); letter-spacing: .1em; }

.controls-bar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: stretch; }

.question-card { cursor: default; }
.question-card:hover { border-color: var(--border); box-shadow: none; }
.q-number {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	background: var(--primary);
	color: #fff;
	border-radius: 8px;
	font-weight: 700;
	font-size: .9rem;
	flex-shrink: 0;
}
.q-content { flex: 1; text-align: left; }
.q-text { font-weight: 500; margin-bottom: .4rem; }
.answers-preview { display: flex; flex-wrap: wrap; gap: .35rem; }
.answer-tag {
	padding: .2rem .55rem;
	border-radius: 6px;
	font-size: .8rem;
	background: var(--bg3);
	color: var(--text2);
}
.answer-tag.correct { background: rgba(34,197,94,.15); color: var(--success); font-weight: 600; }

.answer-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.answer-row input[type="checkbox"] { width: auto; margin: 0; }
.answer-row .ans-text, .answer-row .ans-image {
	flex: 1;
	margin-bottom: 0;
}
/* ===== MODAL ===== */

.modal-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.65);
	display: flex; align-items: center; justify-content: center;
	z-index: 100;
	backdrop-filter: blur(4px);
}
.modal {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem;
	width: 95%; max-width: 550px;
	overflow-y: hidden;
}
#modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.02);
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
#modal-content {
	max-height: 55vh;
	overflow-y: auto;
	padding: 0 1rem 0 0;
}
.modal h3 {
	margin: 0;
}
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* ===== LIVE PANEL ===== */

.live-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem;
	max-width: 960px;
	margin: 0 auto;
}
.live-card h2 { }

/* Header: question badge + timers */
.live-question-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}
.live-q-badge {
	background: var(--primary);
	color: #fff;
	padding: .35rem .9rem;
	border-radius: 2rem;
	font-weight: 700;
	font-size: .95rem;
	white-space: nowrap;
}
.badge-teams {
	background: rgba(168, 85, 247, 0.15);
	color: #a855f7;
	padding: .25rem .6rem;
	border-radius: 2rem;
	font-size: .8rem;
	font-weight: 600;
}
.live-timers {
	display: flex;
	gap: .75rem;
	align-items: center;
	flex-wrap: wrap;
}
.timer-label {
	font-size: .8rem;
	color: var(--text2);
	white-space: nowrap;
}
.timer-value {
	font-family: var(--mono);
	font-weight: 700;
	font-size: .9rem;
	color: var(--text);
}

/* Question text block */
.live-question-text {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: .75rem;
	padding: 1.25rem 1.5rem;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: .75rem;
}

/* Progress bar */
.live-progress {
	position: relative;
	background: var(--bg);
	border-radius: 2rem;
	height: 2rem;
	margin-bottom: 1.25rem;
	overflow: hidden;
	border: 1px solid var(--border);
}
.live-progress-bar {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	background: linear-gradient(135deg, var(--primary), #3d8b6e);
	border-radius: 2rem;
	transition: width .4s ease;
	min-width: 2px;
}
.live-progress-label {
	position: relative;
	z-index: 1;
	line-height: 2rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--text);
}

/* Actions — hierarchical layout */
.live-actions {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-top: 1.25rem;
	align-items: stretch;
}
.live-actions-primary {
	display: flex;
	gap: .5rem;
}
.live-actions-primary .btn {
	flex: 1;
	padding: .85rem 1.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	border-radius: .75rem;
}
.live-actions-secondary {
	display: flex;
	gap: .5rem;
	justify-content: center;
	flex-wrap: wrap;
}
.live-actions-secondary .btn {
	font-size: .85rem;
	padding: .45rem .9rem;
	border-radius: .5rem;
}
.live-actions-danger {
	margin-top: .25rem;
	padding-top: .75rem;
	border-top: 1px solid var(--border);
}
.live-actions-danger .btn {
	font-size: .8rem;
	padding: .35rem .75rem;
	opacity: .7;
	transition: opacity .2s;
}
.live-actions-danger .btn:hover { opacity: 1; }

/* Results */
.live-results {
	margin-top: 1.5rem;
	text-align: left;
}
.live-results h3, .live-detail-table h3, .live-scoreboard h3, .live-text-responses h3 {
	font-size: 1rem;
	margin-bottom: .75rem;
	text-align: center;
}
.live-detail-table { margin-top: 1rem; text-align: left; }
.live-scoreboard { margin-top: 1.5rem; text-align: left; }

/* Waiting layout */
.waiting-layout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	margin: 1.5rem 0;
	flex-wrap: wrap;
}
.waiting-qr { text-align: center; }
.waiting-qr .qr-img {
	border-radius: .75rem;
	box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.qr-url {
	font-family: var(--mono);
	font-size: .8rem;
	color: var(--text2);
	margin-top: .5rem;
	word-break: break-all;
}
.qr-code-label {
	font-size: 1.1rem;
	margin-top: .25rem;
}
.qr-code-label strong {
	font-family: var(--mono);
	font-size: 1.3rem;
	letter-spacing: .1em;
	color: var(--primary);
}
.waiting-counter { text-align: center; }
.big-number {
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--primary);
	margin: 0;
}
.waiting-counter p { margin: .25rem 0 0; color: var(--text2); }

/* Responsive live panel */
@media (max-width: 600px) {
	.live-question-header { flex-direction: column; align-items: center; }
	.live-timers { justify-content: center; }
	.live-actions-primary .btn { font-size: .95rem; padding: .75rem 1rem; }
	.waiting-layout { flex-direction: column; gap: 1.5rem; }
}

/* ===== ADMIN LOGIN ===== */

.admin-login-page {
	display: flex; align-items: center; justify-content: center;
	min-height: 100vh;
	background: var(--bg);
	flex-direction: column;
}
.login-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 2.5rem;
	width: 95%; max-width: 380px;
	text-align: center;
}
.login-card h1 { margin-bottom: 1.5rem; font-size: 1.4rem; }

/* ========================================
   PLAYER
   ======================================== */

.player-page {
	background: var(--bg);
	min-height: 100vh;
	overflow-x: hidden;
}

.screen {
	display: none;
	min-height: 90vh;
	padding: 1.5rem;
}
.screen.active { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Join */

.join-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 2.5rem 2rem;
	width: 95%; max-width: 420px;
	text-align: center;
}
.logo { font-size: 3rem; margin-bottom: .5rem; }
.join-card h1 { font-size: 1.6rem; margin-bottom: 1.5rem; }
.join-card #field-code {
	text-align: center;
	font-family: var(--mono);
	font-size: 1.5rem; 
	margin-bottom: 1rem;
	letter-spacing: .15em;
	text-transform: uppercase;
}

/* Waiting */

.center-content { text-align: center; }
.pulse-icon {
	font-size: 4rem;
	animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
.center-content h2 { margin: 1rem 0 .5rem; font-size: 1.4rem; }
.center-content p { color: var(--text2); }

/* Question */

#question-screen.active {
	justify-content: flex-start;
	padding-top: 3rem;
}

.question-header {
	width: 100%;
	max-width: 600px;
	margin-bottom: 1rem;
}
.q-counter {
	font-size: .9rem;
	font-weight: 600;
	color: var(--text2);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.question-text {
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	max-width: 600px;
	margin-bottom: 2rem;
	line-height: 1.35;
}

.answers-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
	width: 100%;
	max-width: 600px;
}

.answer-btn {
	padding: 1.25rem 1rem;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: #fff;
	font-family: var(--font);
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
	text-align: center;
	word-wrap: break-word;
}
.answer-btn:not(:disabled):hover { transform: translateY(-2px); }
.answer-btn:disabled { opacity: .7; cursor: default; }
.answer-btn.selected { box-shadow: 0 0 0 3px #fff, 0 0 20px var(--primary-glow); transform: scale(1.02); }

.answer-btn.color-0 { background: var(--answer0); border-color: var(--answer0); }
.answer-btn.color-1 { background: var(--answer1); border-color: var(--answer1); }
.answer-btn.color-2 { background: var(--answer2); border-color: var(--answer2); }
.answer-btn.color-3 { background: var(--answer3); border-color: var(--answer3); }
.answer-btn.color-4 { background: var(--answer4); border-color: var(--answer4); }
.answer-btn.color-5 { background: var(--answer5); border-color: var(--answer5); }
.answer-btn.color-6 { background: var(--answer6); border-color: var(--answer6); }
.answer-btn.color-7 { background: var(--answer7); border-color: var(--answer7); }

.feedback {
	margin-top: 1.5rem;
	padding: .8rem 1.5rem;
	border-radius: var(--radius-sm);
	background: var(--bg3);
	font-weight: 500;
	text-align: center;
}

/* Results between questions */

.results-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 2rem;
	width: 95%; max-width: 550px;
	text-align: center;
}
.results-card h2 { margin-bottom: 1.25rem; }

.q-reminder {
	font-weight: 500;
	color: var(--text2);
	margin-bottom: 1rem;
	font-style: italic;
}

.correct-answer {
	background: rgba(34,197,94,.1);
	border: 1px solid rgba(34,197,94,.3);
	border-radius: var(--radius-sm);
	padding: .75rem;
	margin-bottom: 1.25rem;
}
.correct-answer .label { color: var(--text2); font-size: .85rem; display: block; margin-bottom: .3rem; }
.correct-answer .value { font-weight: 700; color: var(--success); font-size: 1.1rem; }

.stats-bar {
	position: relative;
	height: 44px;
	background: var(--bg3);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: .5rem;
}
.stat-fill {
	position: absolute; left: 0; top: 0; bottom: 0;
	background: var(--primary);
	border-radius: var(--radius-sm);
	transition: width .6s ease;
}
.stat-label {
	position: absolute;
	inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	font-size: 1rem;
	z-index: 1;
	/* text-shadow: 0 1px 3px rgba(0,0,0,.4); */
}
.stat-detail { color: var(--text2); font-size: .85rem; margin: 0.75rem auto; }

.my-result { font-weight: 700; font-size: 1.3rem; margin-bottom: 1.25rem; }
.my-result.correct { color: var(--success); }
.my-result.wrong { color: var(--danger); }

/* Final */

.final-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 2.5rem 2rem;
	width: 95%; max-width: 550px;
	text-align: center;
}
.final-medal { font-size: 4rem; margin-bottom: .5rem; }
.final-card h2 { margin-bottom: 1.25rem; font-size: 1.5rem; }

.final-score {
	background: var(--bg3);
	border-radius: var(--radius);
	padding: 1.5rem;
	margin-bottom: 2rem;
}
.score-big { display: block; font-size: 2.5rem; font-weight: 800; color: var(--primary); }
.score-pct { display: block; color: var(--text2); font-size: 1rem; margin-top: .3rem; }

.final-card h3 { font-size: 1rem; color: var(--text2); margin-bottom: .5rem; }
.global-info { color: var(--text2); font-size: .85rem; margin-bottom: 1rem; }

.distribution { text-align: left; }
.dist-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.dist-label { font-family: var(--mono); font-size: .85rem; font-weight: 600; min-width: 50px; text-align: right; }
.dist-bar-bg { flex: 1; height: 24px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.dist-bar-fill { height: 100%; background: var(--primary); border-radius: 6px; transition: width .5s; }
.dist-count { font-size: .8rem; color: var(--text2); min-width: 110px; }

/* ===== RESPONSIVE ===== */

@media (max-width: 600px) {
	.answers-grid { grid-template-columns: 1fr; }
	.question-text { font-size: 1.25rem; }
	.session-header { flex-direction: column; gap: 1rem; }
	.controls-bar { flex-direction: column; }
	.admin-page main { padding: 0 1rem; }
}

/* ===== EXPECTED ANSWER ===== */
.live-expected-answer {
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.3);
	border-radius: 0.5rem;
	padding: 0.6rem 1rem;
	margin-bottom: 1rem;
	font-size: 0.95rem;
	color: #16a34a;
}

/* ===== RESULTS TABLE ===== */
.table-results td, .table-results th { vertical-align: middle; }
.inline-bar { display: flex; align-items: center; gap: 0.5rem; min-width: 120px; }
.inline-bar-fill { height: 1.2rem; border-radius: 0.3rem; min-width: 2px; transition: width 0.4s ease; }
.inline-bar-fill.correct { background: #22c55e; }
.inline-bar-fill.wrong { background: #ef4444; opacity: 0.3; }
.inline-bar span { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }

/* ===== PLAYER RESULT CARDS ===== */

.result-banner {
	padding: 1.25rem 1.5rem;
	border-radius: 1rem;
	text-align: center;
	margin-bottom: 1rem;
}
.result-banner-icon { font-size: 2.2rem; display: block; margin-bottom: .25rem; }
.result-banner-text { font-size: 1.3rem; font-weight: 800; display: block; }

.result-correct {
	background: linear-gradient(135deg, rgba(34,197,94,.2), rgba(16,185,129,.15));
	border: 2px solid rgba(34,197,94,.5);
	color: #22c55e;
}
.result-wrong {
	background: linear-gradient(135deg, rgba(239,68,68,.15), rgba(249,115,22,.1));
	border: 2px solid rgba(239,68,68,.4);
	color: #ef4444;
}
.result-noanswer {
	background: linear-gradient(135deg, rgba(234,179,8,.15), rgba(245,158,11,.1));
	border: 2px solid rgba(234,179,8,.4);
	color: #eab308;
}

.result-answers {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 1rem 0;
}
.result-answer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem 1rem;
	border-radius: .75rem;
	border: 2px solid transparent;
	background: rgba(255,255,255,.04);
	transition: all .3s;
}
.result-answer-text {
	flex: 1;
	font-weight: 600;
	font-size: .95rem;
}
.result-answer-badges {
	display: flex;
	gap: .4rem;
	flex-shrink: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.badge-correct {
	background: rgba(34,197,94,.2);
	color: #22c55e;
	padding: .2rem .6rem;
	border-radius: 1rem;
	font-size: .75rem;
	font-weight: 700;
	white-space: nowrap;
}
.badge-mine {
	background: rgba(76,159,112,.2);
	color: #5cb882;
	padding: .2rem .6rem;
	border-radius: 1rem;
	font-size: .75rem;
	font-weight: 700;
	white-space: nowrap;
}

.answer-correct { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); }
.answer-correct-mine { border-color: rgba(34,197,94,.6); background: rgba(34,197,94,.15); box-shadow: 0 0 12px rgba(34,197,94,.2); }
.answer-wrong-mine { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }

.result-stats {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}
.stats-bar {
	position: relative;
	height: 2rem;
	background: rgba(255,255,255,.06);
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: .5rem;
}
.stat-fill {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	background: linear-gradient(135deg, #22c55e, #16a34a);
	border-radius: 1rem;
	transition: width .6s ease;
}
.stat-label {
	position: relative;
	z-index: 1;
	line-height: 2rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--text);
	padding: 0 .75rem;
	text-shadow: 0 0 4px var(--surface), 0 0 4px var(--surface), 0 0 4px var(--surface);
}
.stat-detail {
	font-size: .85rem;
	color: var(--text2);
	text-align: center;
}

.results-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 1rem;
	padding: 1.5rem;
	width: 95%;
	max-width: 500px;
}
.q-reminder {
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	color: var(--text);
	margin-bottom: .75rem;
	line-height: 1.4;
}

/* Light theme overrides for player results */
[data-theme="light"] .result-answer { background: rgba(0,0,0,.02); }
[data-theme="light"] .answer-correct { background: rgba(34,197,94,.06); }
[data-theme="light"] .answer-correct-mine { background: rgba(34,197,94,.12); }
[data-theme="light"] .answer-wrong-mine { background: rgba(239,68,68,.06); }
[data-theme="light"] .stats-bar { background: rgba(0,0,0,.05); }
[data-theme="light"] .stat-label { color: var(--text); }

/* ===== STATS VIEW ===== */
.stats-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; margin-bottom: 2rem; padding: 1rem; background: rgba(0, 0, 0, 0.02); border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.08); }
.stats-header span { margin: 0 1rem; }
.stats-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; flex-direction: column; }
.stats-table { width: 100%; }
.stats-question-block { margin-bottom: 2rem; padding: 1rem; background: rgba(255,255,255,0.03); border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.08); }
.stats-question-block h4 { margin: 0 0 0.5rem; font-size: 1rem; }
.stats-correct-answer { color: #22c55e; font-size: 0.9rem; margin-bottom: 0.75rem; }
#stats-view { padding: 1rem; }

#session-controls {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	gap: .4rem;
}

/* ===== DRAG & DROP ===== */
.q-drag-handle {
	cursor: grab;
	font-size: 1.3rem;
	color: #666;
	user-select: none;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
	margin-right: 0.3rem;
}
.q-drag-handle:hover {
	color: #fff;
	background: rgba(99, 102, 241, 0.3);
}
.q-drag-handle:active { cursor: grabbing; }
.question-card { transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; }
.question-card.dragging {
	opacity: 0.4;
	transform: scale(0.97);
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}
.drag-clone {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.85;
	transform: scale(1.02) rotate(1deg);
	box-shadow: 0 8px 30px rgba(0,0,0,0.3);
	border-radius: 0.5rem;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
	--bg: #f7f8fa;
	--bg2: #ffffff;
	--bg3: #edf0f4;
	--surface: #ffffff;
	--border: rgba(45, 55, 72, 0.1);
	--border-solid: #e2e8f0;
	--text: #1a202c;
	--text1: #1a202c;
	--text2: #718096;
	--text3: #a0aec0;
	--primary: #4c9f70;
	--primary-hover: #409461;
	--primary-glow: rgba(76, 159, 112, 0.1);
	--success: #38a169;
	--danger: #e53e3e;
	--warning: #dd6b20;
	--answer0: #4c9f70;
	--answer1: #e53e3e;
	--answer2: #3182ce;
	--answer3: #dd6b20;
	--answer4: #38a169;
	--answer5: #805ad5;
	--answer6: #319795;
	--answer7: #ed8936;
}
[data-theme="light"] .card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
[data-theme="light"] .table th { background: var(--bg); }
[data-theme="light"] .row-correct { background: #f0fdf4; }
[data-theme="light"] .row-wrong { background: #fef2f2; }
[data-theme="light"] .row-none { background: #fffbeb; }
[data-theme="light"] .live-expected-answer { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.2); }
[data-theme="light"] .live-question-text { background: #f8f8ff; border-color: rgba(99, 102, 241, 0.1); }
[data-theme="light"] .live-progress { background: #f0f0f8; border-color: rgba(99, 102, 241, 0.1); }
[data-theme="light"] .live-q-badge { background: #409461; }
[data-theme="light"] .stats-question-block { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .admin-login-page { background: linear-gradient(135deg, #e8f0ed 0%, #f5f7f6 100%); }
[data-theme="light"] .login-card { background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
[data-theme="light"] .session-card { box-shadow: 0 1px 3px rgba(0,0,0,.04); }
[data-theme="light"] .session-card:hover { box-shadow: 0 6px 20px rgba(76,159,112,.1); }
[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(0,0,0,.03); }
[data-theme="light"] .live-card { box-shadow: 0 0 0 1px var(--border), 0 1px 4px rgba(0,0,0,.04); }
[data-theme="light"] .admin-header { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
[data-theme="light"] .modal { background: #fff; }
[data-theme="light"] .answer-btn { color: #fff; }

/* ===== THEME TOGGLE ===== */
.theme-toggle {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 2rem;
	padding: 0.35rem 0.75rem;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.theme-toggle:hover { border-color: var(--primary); }

/* ===== DISCONNECT BTN ===== */
.disconnect-btn {
	position: fixed;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 9999;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--primary-glow);
	color: #fff;
	font-size: 0.85rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	opacity: 0.9;
}
.disconnect-btn:hover {
	opacity: 1;
	border-color: var(--danger);
	color: var(--danger);
	background: rgba(239, 68, 68, 0.1);
	transition: all 0.15s;
	opacity: 1;
}

/* ===== QR CODE ===== */
.join-qr { text-align: center; margin-bottom: 0.5rem; }
.qr-img { border-radius: 8px; }
[data-theme="dark"] .qr-img { filter: invert(1); }
.qr-url { font-family: var(--mono); font-size: 0.8rem; color: var(--text2); margin-top: 0.3rem; word-break: break-all; }
.qr-code-label { font-size: 1.2rem; margin-top: 0.3rem; }
.qr-code-label strong { font-family: var(--mono); color: var(--primary); font-size: 1.5rem; letter-spacing: 0.1em; }

/* Waiting layout */
.waiting-layout { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; margin: 1.5rem 0; }
.waiting-qr { text-align: center; }
.waiting-counter { text-align: center; }

/* ===== COUNTDOWN TIMER ===== */
.question-header { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; }
.q-timer { flex-shrink: 0; }
.countdown-ring { position: relative; width: 52px; height: 52px; }
.countdown-ring svg { width: 100%; height: 100%; }
.countdown-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--text);
}
.countdown-text.urgent { color: var(--danger); animation: pulse-urgent 0.5s infinite alternate; }
.countdown-ring.urgent svg circle:last-child { stroke: var(--danger) !important; }
@keyframes pulse-urgent { from { opacity: 1; } to { opacity: 0.5; } }

/* ===== WAITING PARTICIPANTS ===== */
.waiting-participants {
	margin-top: 1.5rem;
	font-size: 1.3rem;
	color: var(--text2);
	border-bottom: 2px dashed var(--border);
	font-family: var(--mono);
}
.waiting-participants span {
	color: var(--primary);
}

/* ===== FIELDS CONFIG ===== */
.field-config-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
	padding: 0.4rem 0.5rem;
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.field-config-row input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; }
.field-config-row .fc-label { flex: 1; margin: 0; padding: 0.4rem 0.6rem; font-size: 0.9rem; }
.field-config-row .fc-label[readonly] { opacity: 0.7; cursor: default; background: var(--bg3);  }
.fc-req-label { font-size: 0.8rem; color: var(--text2); white-space: nowrap; display: flex; align-items: center; gap: 0.3rem; }
.fc-req-label input { width: auto; margin: 0;}
.join-session-name { text-align: center; margin-bottom: 0.75rem; font-size: 1.1rem; color: var(--text2); }
.join-session-name strong { color: var(--primary); }

/* ===== FOOTER VERSION ===== */
.app-footer {
	text-align: center;
	font-size: .75rem;
	color: var(--text2);
	padding: 2rem 1rem 1.5rem;
	opacity: .6;
}
.app-footer:hover { opacity: 0.8; }

/* ===== QUESTION TIME BADGE ===== */
.q-time { color: var(--text2); font-weight: 400; font-size: 0.8rem; margin-left: 0.3rem; }

/* ===== FINAL SCREEN ENHANCED ===== */
.final-hero { text-align: center; margin-bottom: 1.5rem; }
.final-hero .final-medal { font-size: 4rem; margin-bottom: 0.5rem; animation: popIn 0.6s ease-out; }
.final-hero h2 { font-size: 1.5rem; color: var(--primary); }

@keyframes popIn {
	from { transform: scale(0); opacity: 0; }
	50% { transform: scale(1.3); }
	to { transform: scale(1); opacity: 1; }
}

.final-score-card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 1.5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 1.5rem;
}

.final-score-ring {
	position: relative;
	width: 120px;
	height: 120px;
	flex-shrink: 0;
}
.final-score-ring svg { width: 100%; height: 100%; }
.score-ring-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--primary);
}
.score-ring-progress { transition: stroke-dashoffset 0s; }

.final-score-details { display: flex; flex-direction: column; gap: 1rem; }
.final-stat { display: flex; flex-direction: column; }
.final-stat-value { font-size: 1.4rem; font-weight: 700; font-family: var(--mono); }
.final-stat-label { font-size: 0.85rem; color: var(--text2); }

/* Recap */
.final-recap { margin-bottom: 1.5rem; }
.final-recap h3 { margin-bottom: 0.75rem; }
.recap-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-sm);
	margin-bottom: 0.3rem;
	font-size: 0.9rem;
}
.recap-ok { background: rgba(34, 197, 94, 0.08); }
.recap-ko { background: rgba(239, 68, 68, 0.08); }
.recap-skip { background: rgba(245, 158, 11, 0.08); }
.recap-q { font-weight: 700; white-space: nowrap; min-width: 3.5rem; }
.recap-text { flex: 1; min-width: 200px; }
.recap-detail { width: 100%; font-size: 0.8rem; color: var(--text2); padding-left: 3.5rem; }
.recap-ko .recap-detail { color: var(--danger); }

/* Distribution */
.final-distribution { margin-bottom: 1rem; }
.final-distribution h3 { margin-bottom: 0.75rem; }
.dist-me { background: rgba(124, 92, 252, 0.1); border-radius: var(--radius-sm); font-weight: 600; }
.dist-me .dist-label::after { content: ' ← vous'; font-size: 0.75rem; color: var(--primary); font-weight: 400; }

@media (max-width: 480px) {
	.final-score-card { flex-direction: column; gap: 1rem; text-align: center; }
	.recap-text { min-width: 0; }
	.recap-detail { padding-left: 0; }
}

/* ===== TEXT RESPONSES & SCALE ===== */
.live-text-responses { margin-top: 1.5rem; }
.text-responses-list { display: flex; flex-direction: column; gap: 0.4rem; }
.text-response-item { padding: 0.5rem 0.75rem; background: var(--bg2); border-radius: var(--radius-sm); font-size: 0.9rem; border: 1px solid var(--border); }
.scale-stats { font-size: 1.1rem; padding: 1rem; background: var(--bg2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.scale-stats strong { font-family: var(--mono); font-size: 1.4rem; color: var(--primary); }

/* ===== RECAP INFO TYPE ===== */
.recap-info { background: rgba(99, 102, 241, 0.08); }

/* ===== HELP MODAL ===== */
.help-modal { }
.help-modal h2 { margin-bottom: 1.5rem; font-size: 1.4rem; }
.help-section { margin-bottom: 1.5rem; }
.help-section h3 { font-size: 1.05rem; margin-bottom: 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.help-list { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; line-height: 1.5; }
.help-list li { padding-left: 0.2rem; }
ol.help-list { list-style: decimal; }
ul.help-list { list-style: disc; }
.help-table td, .help-table th { font-size: 0.85rem; padding: 0.5rem 0.6rem; }
.help-note { font-size: 0.85rem; color: var(--text2); margin-top: 0.5rem; }
.help-modal code { font-family: var(--mono); background: var(--bg3); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.85rem; }
.help-footer { text-align: center; color: var(--text2); font-size: 0.8rem; margin: 1.5rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* Widen modal for help */
.modal { max-width: 700px; }


/* ===== ANSWER SELECTION CONTRAST ===== */
.answers-grid:has(.selected) .answer-btn:not(.selected) {
	opacity: 0.4;
	transform: scale(0.97);
	filter: grayscale(0.3);
}
.answers-grid:has(.selected) .answer-btn.selected {
	transform: scale(1.03);
	box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px currentColor;
}
.answer-btn { transition: opacity 0.3s, transform 0.3s, filter 0.3s, box-shadow 0.3s; }

/* ===== PLAYER RESPONSIVE FIX ===== */
.answers-grid {
	box-sizing: border-box;
	padding: 0 0.5rem;
}
.answer-btn {
	overflow-wrap: break-word;
	word-break: break-word;
	min-width: 0;
	min-height: 3rem;
}
.answer-btn img {
	max-width: 100%;
}
.question-text {
	padding: 0 0.5rem;
	box-sizing: border-box;
}
#question-screen.active,
#results-screen.active,
#final-screen.active {
	overflow-y: auto;
	padding-bottom: 3rem;
}
.final-card, .results-card {
	width: 100%;
	max-width: 600px;
	box-sizing: border-box;
	overflow-wrap: break-word;
}
@media (max-width: 420px) {
	.screen { padding: 1rem 0.5rem; }
	.join-card { padding: 1.5rem 1rem; }
	.question-text { font-size: 1.15rem; }
	.answer-btn { padding: 1rem 0.75rem; font-size: 0.95rem; }
	.final-score-card { padding: 1rem; gap: 1rem; }
	.recap-row { font-size: 0.8rem; padding: 0.4rem 0.5rem; }
}

/* ===== ANSWER PREVIEW TAGS ===== */
.answer-tag.open { background: rgba(99, 102, 241, 0.12); color: var(--primary); border-color: rgba(99, 102, 241, 0.3); font-style: italic; }
.answer-tag.scale { background: rgba(20, 184, 166, 0.12); color: #14b8a6; border-color: rgba(20, 184, 166, 0.3); font-family: var(--mono); font-size: 0.8rem; }

/* ===== STATS TYPE-AWARE ===== */
.stats-type-label { color: var(--text2); font-size: 0.9rem; font-style: italic; margin-bottom: 0.75rem; }
.stats-empty { color: var(--text2); font-style: italic; }
.stats-text-list { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; }
.stats-text-item { padding: 0.5rem 0.75rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; }
.stats-scale-result { font-size: 1.1rem; padding: 0.75rem 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.75rem; }
.stats-scale-result strong { font-family: var(--mono); font-size: 1.3rem; color: var(--primary); }
.inline-bar-fill.neutral { background: var(--primary); }

/* ===== QUESTION TYPES — PLAYER ===== */

/* Image answers */
.answer-img {
	flex-direction: column !important;
	padding: 0.5rem !important;
	gap: 0.4rem;
}
.answer-img img {
	width: 100%;
	max-height: 280px;
	object-fit: contain;
	border-radius: 6px;
	background: rgba(0,0,0,.05);
}
[data-theme="dark"] .answer-img img {
	background: rgba(255,255,255,.05);
}
.answer-img span { font-size: 0.85rem; }

/* Open text */
.open-text-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	max-width: 600px;
}
.open-text-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font-family: var(--font);
	font-size: 1rem;
	padding: 1rem;
	resize: vertical;
	min-height: 120px;
	transition: border-color 0.2s;
}
.open-text-form textarea:focus {
	outline: none;
	border-color: var(--primary);
}
.open-text-form .btn { width: 100%; }
.open-text-sent {
	text-align: center;
	padding: 1.5rem;
	width: 100%;
	max-width: 600px;
}
.open-text-sent blockquote {
	border-left: 3px solid var(--primary);
	padding: 0.75rem 1rem;
	margin: 0.5rem 0;
	background: var(--surface);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
	text-align: left;
}

/* Scale / Slider */
.scale-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 1.5rem;
	width: 100%;
	max-width: 600px;
	box-sizing: border-box;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.scale-labels {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: var(--text2);
	font-size: 0.95rem;
	font-weight: 500;
}
.scale-form input[type="range"] {
	width: 100%;
	height: 8px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--border);
	border-radius: 4px;
	outline: none;
	margin: 0;
	padding: 0;
}
.scale-form input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 32px;
	height: 32px;
	background: var(--primary);
	border-radius: 50%;
	cursor: pointer;
	border: 3px solid var(--bg);
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.scale-form input[type="range"]::-moz-range-thumb {
	width: 32px;
	height: 32px;
	background: var(--primary);
	border-radius: 50%;
	cursor: pointer;
	border: 3px solid var(--bg);
}
.scale-current {
	font-family: var(--mono);
	font-size: 3rem;
	font-weight: 800;
	color: var(--primary);
	line-height: 1;
}
.scale-form .btn { width: 100%; }
.scale-sent {
	text-align: center;
	padding: 2rem;
	font-size: 1.2rem;
	width: 100%;
	max-width: 600px;
}
.scale-sent strong {
	font-family: var(--mono);
	font-size: 2.5rem;
	color: var(--primary);
}

/* Admin: image URL field in answer row */
.ans-image {
	flex: 1;
	margin: 0;
	padding: 0.4rem 0.6rem;
	font-size: 0.8rem;
}

/* ===== AUTONOMOUS MODE ===== */
#autonomous-screen.active {
	justify-content: flex-start;
	padding-top: 1.5rem;
	overflow-y: auto;
}
.auto-quiz {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
}
.auto-header { text-align: center; margin-bottom: 1.5rem; }
.auto-header h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.auto-progress-bar {
	width: 100%;
	height: 8px;
	background: var(--border);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 0.5rem;
}
.auto-progress-fill {
	height: 100%;
	background: var(--primary);
	transition: width 0.3s;
	border-radius: 4px;
}
.auto-progress-text {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	color: var(--text2);
}
.auto-progress-text .urgent { color: var(--danger); font-weight: 700; }

/* Nav dots */
.auto-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	justify-content: center;
	margin-bottom: 1.5rem;
}
.auto-dot {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 2px solid var(--border);
	background: var(--surface);
	color: var(--text2);
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.auto-dot:hover { border-color: var(--primary); }
.auto-dot.active { border-color: var(--primary); background: var(--primary); color: #fff; transform: scale(1.15); }
.auto-dot.answered { background: rgba(34, 197, 94, 0.15); border-color: #22c55e; color: #22c55e; }
.auto-dot.answered.active { background: #22c55e; color: #fff; }

/* Question area */
#auto-question-area { margin-bottom: 1.5rem; }
#auto-question-area .question-text { font-size: 1.3rem; margin-bottom: 1.25rem; }
#auto-question-area .answers-grid { max-width: 100%; }
.auto-q-header { margin-bottom: 0.5rem; text-align: center; }

/* Buttons */
.auto-buttons {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
.auto-buttons .btn { min-width: 140px; }

/* Admin: autonomous badge */
.badge-auto { background: rgba(99, 102, 241, 0.12); color: var(--primary); font-size: 0.75rem; }

/* Admin: checkbox label */
.checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	cursor: pointer;
	margin-bottom: 0.3rem;
}
.checkbox-label input[type="checkbox"] { width: auto; margin: 0; }

@media (max-width: 420px) {
	.auto-dot { width: 1.7rem; height: 1.7rem; font-size: 0.65rem; }
	.auto-buttons .btn { min-width: 0; flex: 1; }
}

/* ===== AUTO MONITOR (admin) ===== */
.auto-monitor-header { margin-bottom: 1.5rem; }
.auto-monitor-header h2 { margin-bottom: 0.75rem; }
.auto-monitor-stats {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	font-size: 0.95rem;
	color: var(--text2);
}
.auto-monitor-stats strong {
	color: var(--primary);
	font-family: var(--mono);
	font-size: 1.2rem;
}

/* ===== PUBLIC STATS SEARCH ===== */
.stats-search {
	margin-bottom: 1rem;
}
.stats-search input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font-size: 1rem;
	transition: border-color 0.2s;
}
.stats-search input:focus {
	outline: none;
	border-color: var(--primary);
}
.stats-live-dot {
	font-size: 0.8rem;
	animation: livePulse 2s infinite;
}
@keyframes livePulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* ===== STATS TOOLBAR & FILTERS ===== */
.stats-toolbar {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.stats-toolbar .stats-search { flex: 1; min-width: 200px; margin-bottom: 0; }
.stats-toolbar-btns { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; }
.filter-badge {
	background: var(--primary);
	color: #fff;
	border-radius: 50%;
	font-size: 0.7rem;
	padding: 0.1rem 0.4rem;
	margin-left: 0.3rem;
	font-weight: 700;
}
.filters-panel {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem;
	margin-bottom: 1rem;
}
.filters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 0.75rem;
}
.filter-item label {
	display: block;
	font-size: 0.8rem;
	color: var(--text2);
	margin-bottom: 0.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.filter-item select {
	width: 100%;
	padding: 0.4rem 0.6rem;
	font-size: 0.85rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
}
@media (max-width: 600px) {
	.stats-toolbar { flex-direction: column; }
	.stats-toolbar .stats-search { width: 100%; }
	.filters-grid { grid-template-columns: 1fr; }
}


/* ===== MEDIA PICKER ===== */

.media-upload-zone {
	background: var(--bg2);
	border: 2px dashed var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
	text-align: center;
	transition: all .2s;
	margin-bottom: 1rem;
}
.media-upload-zone.drag-over { border-color: var(--primary); background: var(--primary-glow); }
.media-upload-zone a { color: var(--primary); font-weight: 600; }

.media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: .75rem;
	max-height: 50vh;
	overflow-y: auto;
	padding: .25rem;
}
.media-item {
	position: relative;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 2px solid var(--border);
	cursor: pointer;
	transition: all .15s;
	background: var(--bg2);
}
.media-item:hover { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); }
.media-item img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}
.media-item-actions {
	padding: .35rem .5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .3rem;
}
.media-item-name {
	font-size: .65rem;
	color: var(--text2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.ans-image-wrap {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 1;
}
.ans-image-preview {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--border);
}
.ans-image-placeholder {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border: 1px dashed var(--border);
	font-size: 1.3rem;
	color: var(--text2);
	background: var(--bg2);
}


/* ===== TIMER EXPIRED STATES ===== */

.answers-grid.expired {
	opacity: .5;
	pointer-events: none;
}

.timer-expired {
	color: var(--danger);
	font-weight: 700;
	font-size: 1.1rem;
	padding: .4rem .8rem;
	background: rgba(239, 68, 68, .15);
	border-radius: var(--radius-sm);
	animation: blink 1s ease-in-out 3;
}

.timer-indicative-expired {
	color: var(--text2);
	font-size: .9rem;
	padding: .3rem .7rem;
	background: var(--bg3);
	border-radius: var(--radius-sm);
	font-style: italic;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .4; }
}


/* ===== TEAMS ===== */

.team-color-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid rgba(255,255,255,.2);
}

/* Team selection screen (player) */
.team-select-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 2rem;
	width: 95%; max-width: 450px;
	text-align: center;
}
.team-select-card h2 { margin-bottom: .5rem; }
.team-select-card p { color: var(--text2); margin-bottom: 1.5rem; }
.team-grid { display: grid; gap: .75rem; }
.team-btn {
	padding: 1rem 1.5rem;
	border-radius: var(--radius);
	border: 2px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-family: var(--font);
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
	display: flex;
	align-items: center;
	gap: .75rem;
}
.team-btn:hover { transform: translateY(-2px); border-color: var(--primary); }
.team-btn .team-dot {
	width: 20px; height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Team scoreboard (projection) */
.proj-team-scoreboard { width: 100%; max-width: 700px; margin-top: 1.5rem; }
.proj-team-row {
	display: flex;
	align-items: center;
	padding: .7rem 1.2rem;
	border-radius: var(--radius-sm);
	margin-bottom: .5rem;
	background: var(--surface);
	border-left: 4px solid var(--primary);
	font-size: 1.2rem;
}
.proj-team-name { flex: 1; font-weight: 600; }
.proj-team-score { font-family: var(--mono); font-weight: 700; font-size: 1.3rem; }
.proj-team-members { color: var(--text2); font-size: .85rem; margin-left: .75rem; }


.badge-teams { background: rgba(168, 85, 247, .12); color: #c084fc; }
[data-theme="light"] .badge-teams { color: #9333ea; }


/* ===== RECONNECT SCREEN ===== */

.reconnect-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 2.5rem 2rem;
	width: 95%; max-width: 400px;
	text-align: center;
}
.reconnect-icon { font-size: 3rem; margin-bottom: .5rem; }
.reconnect-card h2 { margin-bottom: .75rem; }
.reconnect-name {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1.5rem;
}
.reconnect-actions { display: flex; flex-direction: column; gap: .6rem; }

/* Edit profile button */
.btn-edit-profile {
	margin-top: 1.5rem;
	opacity: .7;
	transition: opacity .2s;
}
.btn-edit-profile:hover { opacity: 1; }

/* Player modal */
.player-modal-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.65);
	display: flex; align-items: center; justify-content: center;
	z-index: 200;
	backdrop-filter: blur(4px);
}
.player-modal-overlay.hidden { display: none; }
.player-modal {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.75rem;
	width: 95%; max-width: 420px;
	max-height: 85vh;
	overflow-y: auto;
}
.player-modal h3 { margin-bottom: 1rem; }
.player-modal .modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

.modal-lg { max-width: 700px; }

#media-overlay { z-index: 200; }


/* Full width for text and scale answers */
.answers-grid:has(.open-text-form),
.answers-grid:has(.scale-container) {
	grid-template-columns: 1fr !important;
	max-width: 100%;
}
.open-text-form, .scale-container {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}


.btn-validate-multi {
	grid-column: 1 / -1;
	margin-top: .5rem;
}


/* ===== MANUAL DEPOUILLEMENT ===== */

.depouillement-form { overflow-y: auto; }
.depouillement-question { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.depouillement-q-text { margin-bottom: .5rem; font-size: .95rem; }
.depouillement-answers { margin-left: 1.5rem; }
.depouillement-answer-row { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.depouillement-letter { font-weight: 700; color: var(--text2); min-width: 1.2rem; }
.depouillement-ans-text { flex: 1; font-size: .9rem; }
.depouillement-ans-text.correct { color: var(--success); font-weight: 600; }
.depouillement-input { width: 60px !important; text-align: center; padding: .3rem !important; margin: 0 !important; font-family: var(--mono); }
.depouillement-unit { font-size: .8rem; color: var(--text2); }


/* ===== SESSION DETAIL HEADER ===== */

.session-detail-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.session-detail-title {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}
.session-detail-title h2 { margin: 0; font-size: 1.4rem; }
.session-detail-title p { margin: .25rem 0 0; }
.session-detail-cta { flex-shrink: 0; }

/* Action groups */
.action-groups {
	display: flex;
	gap: .5rem;
	margin-bottom: 1.5rem;
}
.action-group {
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: .75rem;
	padding: .6rem .75rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex: 1;
	min-width: 0;
}
.action-group-label {
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--text2);
	font-weight: 700;
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--border);
	margin-bottom: .1rem;
}
.action-group-btns {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
}
.action-group-btns .btn-sm {
	font-size: .78rem;
	padding: .3rem .6rem;
}

.badge-anon { background: rgba(34, 197, 94, .15); color: #22c55e; }

/* ====== Session detail tabs ====== */
.session-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--border);
	margin: 1.25rem 0 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.session-tabs::-webkit-scrollbar { display: none; }
.session-tab {
	padding: .65rem 1.1rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--text2);
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	transition: color .15s;
}
.session-tab:hover { color: var(--text); }
.session-tab.active { color: var(--primary); }
.session-tab.active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: .5rem;
	right: .5rem;
	height: 2px;
	background: var(--primary);
	border-radius: 1px;
}
.session-tab .tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3rem;
	height: 1.3rem;
	padding: 0 .35rem;
	background: var(--bg);
	border-radius: 2rem;
	font-size: .7rem;
	font-weight: 700;
	margin-left: .3rem;
}
.session-tab.active .tab-count { background: var(--primary-glow); color: var(--primary); }
.session-tab-panel { display: none; padding-top: 1rem; }
.session-tab-panel.active { display: block; }
.session-detail-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.session-quick-actions {
	display: flex;
	gap: .3rem;
	flex-wrap: wrap;
	align-items: center;
}
.btn-icon {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: .5rem;
	border: 1px solid var(--border);
	background: var(--surface);
	cursor: pointer;
	font-size: .95rem;
	transition: background .15s, border-color .15s;
	color: var(--text);
	padding: 0;
}
.btn-icon:hover { border-color: var(--primary); background: var(--primary-glow); }
@media (max-width: 600px) {
	.session-detail-top { flex-direction: column; }
	.session-tab { padding: .55rem .7rem; font-size: .82rem; }
}

@media (max-width: 700px) {
	.session-detail-header { flex-direction: column; }
	.action-groups { flex-direction: column; }
	.action-group { flex: unset; }
}


/* ===== SESSIONS LIST ===== */

.sessions-search {
	display: flex;
	gap: .5rem;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.sessions-search input[type="search"] { flex: 1; min-width: 120px; }
.sessions-search select { min-width: 110px; padding: .5rem .6rem; font-size: .85rem; }
.sessions-search input {
	flex: 1;
	margin: 0;
}
.search-count {
	font-size: .8rem;
	color: var(--text2);
	white-space: nowrap;
}

.session-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	cursor: pointer;
	transition: border-color .15s, transform .1s, box-shadow .15s;
}
#sessions-list, #events-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: .6rem;
}
@media (max-width: 700px) {
	#sessions-list, #events-list { grid-template-columns: 1fr; }
}

.session-card, #events-list .session-card {
	animation: cardIn .25s ease both;
}
@keyframes cardIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.session-card:hover {
	border-color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 24px var(--primary-glow);
}
.session-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: .35rem;
}
.session-card-title {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0;
	flex: 1;
	color: var(--text1);
}
.session-card-badges {
	display: flex;
	gap: .3rem;
	flex-wrap: wrap;
}
.session-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
}
.session-card-infos {
	font-size: .82rem;
	color: var(--text2);
}
.session-card-infos strong {
	font-family: var(--mono);
	color: var(--text1);
}
.session-card-date {
	font-size: .75rem;
	color: var(--text3, var(--text2));
	white-space: nowrap;
}

/* ===== ADMIN BADGE & SETTINGS ===== */

.admin-badge {
	font-size: .8rem;
	color: var(--text2);
	padding: .25rem .6rem;
	background: rgba(76,159,112,.1);
	border-radius: 1rem;
	white-space: nowrap;
}
.badge-super {
	background: linear-gradient(135deg, rgba(234,179,8,.2), rgba(245,158,11,.15));
	color: #eab308;
	padding: .15rem .5rem;
	border-radius: 1rem;
	font-size: .7rem;
	font-weight: 700;
}

.settings-section { text-align: left; }
.settings-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.settings-section-header h4 { margin: 0; }

.settings-form { text-align: left; max-width: 420px; margin: 0 auto; }
.settings-form h4 { margin-bottom: 1rem; }
.settings-form .form-group { margin-bottom: .75rem; }
.settings-form .form-group label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }
.settings-form .form-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

.mono { font-family: var(--mono); font-size: .85rem; }

/* ===== DATA TABLE (settings) ===== */

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
}
.data-table th {
	text-align: left;
	padding: .5rem .75rem;
	border-bottom: 2px solid var(--border);
	font-weight: 700;
	color: var(--text2);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.data-table td {
	padding: .6rem .75rem;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(76,159,112,.04); }

.session-card-author {
	font-size: .75rem;
	color: var(--primary);
	background: rgba(76,159,112,.08);
	padding: .15rem .5rem;
	border-radius: 1rem;
	white-space: nowrap;
}

/* ===== FORM TABS ===== */

.form-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 1.25rem;
	border-bottom: 2px solid var(--border);
}
.form-tab {
	padding: .6rem 1rem;
	border: none;
	background: none;
	cursor: pointer;
	font-size: .85rem;
	font-weight: 600;
	color: var(--text2);
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all .2s;
	white-space: nowrap;
}
.form-tab:hover { color: var(--text); }
.form-tab.active {
	color: var(--primary);
	border-bottom-color: var(--primary);
}
.form-tab-panel { min-height: 200px; }
.form-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 1rem 0;
}
.help-note {
	margin-top: -.25rem;
	margin-bottom: .75rem;
	font-size: .8rem;
	color: var(--text2);
	line-height: 1.4;
}

.btn-link-danger {
	background: none;
	border: none;
	color: var(--text2);
	font-size: .8rem;
	cursor: pointer;
	margin-top: .75rem;
	padding: .25rem .5rem;
	opacity: .6;
	transition: all .2s;
}
.btn-link-danger:hover { color: #ef4444; opacity: 1; }

/* ===== PARTICIPANT COUNTER & DOTS ===== */

.session-participants-counter {
	font-size: .85rem;
	color: var(--text2);
	margin-top: .25rem;
}
.session-participants-counter strong {
	color: var(--text);
}
.online-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 4px rgba(34,197,94,.5);
	vertical-align: middle;
	margin-right: 2px;
}
.offline-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text2);
	opacity: .3;
	vertical-align: middle;
	margin-right: 2px;
}

/* ===== ICON PICKER ===== */

.icon-picker {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: .75rem;
}
.icon-preview {
	width: 64px;
	height: 64px;
	border-radius: .75rem;
	border: 2px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	background: var(--bg);
	flex-shrink: 0;
	overflow: hidden;
}
.icon-options { flex: 1; }
.emoji-grid {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-bottom: .5rem;
}
.emoji-btn {
	width: 36px;
	height: 36px;
	border: 2px solid transparent;
	background: var(--bg);
	border-radius: .5rem;
	font-size: 1.3rem;
	cursor: pointer;
	transition: all .15s;
	line-height: 1;
	padding: 0;
}
.emoji-btn:hover { border-color: var(--primary); transform: scale(1.15); }
.emoji-btn.active { border-color: var(--primary); background: rgba(76,159,112,.15); }

.session-card-icon {
	width: 36px;
	height: 36px;
	border-radius: .5rem;
	object-fit: contain;
	flex-shrink: 0;
}
.session-card-icon-emoji {
	font-size: 1.6rem;
	line-height: 1;
	flex-shrink: 0;
}

/* ===== TOASTS ===== */

#toast-container {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	pointer-events: none;
	max-width: 400px;
}
.toast {
	padding: .75rem 1rem;
	border-radius: .75rem;
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.4;
	pointer-events: auto;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0,0,0,.15);
	animation: toastIn .3s ease;
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	word-break: break-word;
}
.toast.toast-out { animation: toastOut .25s ease forwards; }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.3; }
.toast-msg { flex: 1; }

.toast-success { background: #065f46; color: #d1fae5; border: 1px solid #10b981; }
.toast-error { background: #7f1d1d; color: #fecaca; border: 1px solid #ef4444; }
.toast-info { background: #1e3a5f; color: #bfdbfe; border: 1px solid #3b82f6; }
.toast-warning { background: #713f12; color: #fef3c7; border: 1px solid #f59e0b; }

[data-theme="light"] .toast-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
[data-theme="light"] .toast-error { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; }
[data-theme="light"] .toast-info { background: #eff6ff; color: #1e3a5f; border-color: #bfdbfe; }
[data-theme="light"] .toast-warning { background: #fffbeb; color: #713f12; border-color: #fde68a; }

@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

/* ===== SECTION DIVIDERS ===== */

.section-divider {
	padding: .5rem 0;
	margin: .5rem 0 .25rem;
	position: relative;
}
.section-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0; right: 0;
	height: 1px;
	background: var(--primary);
	opacity: .25;
}
.section-divider-label {
	position: relative;
	background: var(--bg);
	padding: .2rem .75rem;
	font-size: .8rem;
	font-weight: 700;
	color: var(--primary);
	border-radius: 1rem;
	border: 1px solid rgba(76,159,112,.2);
}

/* ===== SECTION INTERSTITIAL (PLAYER) ===== */

.section-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 1.5rem;
	display: flex;
	padding: 2rem 1rem;
	text-align: center;
	width: 100%;
}
.section-interstitial {}
.section-interstitial .section-icon {
	font-size: 3rem;
	margin-bottom: .5rem;
}
.section-interstitial h2 {
	font-size: 1.5rem;
	margin-bottom: .5rem;
	color: var(--primary);
}
.section-interstitial .section-sub {
	color: var(--text2);
	font-size: .9rem;
}

/* ===== SECTION CARDS (ADMIN) ===== */

.section-card {
	background: linear-gradient(135deg, rgba(76,159,112,.08), rgba(56,130,106,.05));
	border: 2px dashed rgba(76,159,112,.3) !important;
	border-radius: .75rem;
}
.section-card .card-main {
	gap: .75rem;
}
.section-card-icon {
	font-size: 1.5rem;
	line-height: 1;
}
.section-card-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--primary);
	margin: 0;
}
.icon-picker-inline {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin-bottom: .75rem;
}
.section-icon-preview {
	font-size: 2rem;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	border: 2px solid var(--border);
	border-radius: .5rem;
	flex-shrink: 0;
}

/* Section indicator on player/projection question */
.q-section-indicator {
	font-size: .8rem;
	color: var(--text2);
	text-align: center;
	margin-bottom: .25rem;
}
.q-section-indicator .section-badge {
	background: rgba(76,159,112,.1);
	color: var(--primary);
	padding: .15rem .6rem;
	border-radius: 1rem;
	font-weight: 600;
	font-size: .75rem;
}


/* Emoji management grid in settings */
.emoji-manage-grid {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.emoji-manage-item {
	display: flex;
	align-items: center;
	gap: .15rem;
	background: var(--surface2);
	border: 1px solid var(--border);
	border-radius: .5rem;
	padding: .25rem .4rem;
	transition: border-color .15s;
}
.emoji-manage-item:hover {
	border-color: var(--danger);
}
.emoji-manage-icon {
	font-size: 1.4rem;
	line-height: 1;
}
.emoji-manage-del {
	background: none;
	border: none;
	color: var(--text2);
	font-size: 1rem;
	cursor: pointer;
	padding: 0 .15rem;
	line-height: 1;
	opacity: .4;
	transition: opacity .15s, color .15s;
}
.emoji-manage-del:hover {
	opacity: 1;
	color: var(--danger);
}


/* Draft waiting auto-retry */
.draft-waiting {
	text-align: center;
	padding: 1.5rem 1rem;
	animation: draftPulse 2s ease-in-out infinite;
}
.draft-waiting .pulse-icon {
	font-size: 2.5rem;
	margin-bottom: .5rem;
	display: block;
}
.draft-waiting p {
	margin: .25rem 0;
}
@keyframes draftPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .6; }
}


/* Generate teams preview */
.gen-preview {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	padding: .75rem;
	background: var(--bg2);
	border-radius: var(--radius-sm);
	min-height: 2.5rem;
}
.gen-preview-tag {
	padding: .25rem .6rem;
	background: var(--surface2);
	border-radius: .3rem;
	font-size: .85rem;
	font-weight: 500;
}


/* Live section interlude */
.live-section-interlude {
	text-align: center;
	padding: 3rem 2rem;
}
.live-section-icon {
	font-size: 4rem;
	display: block;
	margin-bottom: 1rem;
	line-height: 1;
}
.live-section-interlude h2 {
	font-size: 2rem;
	font-weight: 800;
	margin: 0;
}


/* ===== UNIVERSE PICKER ===== */
.universe-picker { text-align:center; padding:3rem 1rem; max-width:700px; margin:0 auto; }
.universe-picker h2 { font-size:1.8rem; margin-bottom:.5rem; }
.universe-subtitle { color:var(--text2); font-size:1.1rem; margin-bottom:2rem; }
.universe-cards { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
.universe-card { background:var(--surface); border:2px solid var(--border); border-radius:1rem; padding:2rem 1.5rem; width:280px; cursor:pointer; transition:all .2s; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.universe-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:0 8px 24px rgba(76,159,112,.15); }
.universe-card .universe-icon { font-size:3rem; }
.universe-card h3 { font-size:1.2rem; margin:0; color:var(--text); }
.universe-card p { font-size:.9rem; color:var(--text2); margin:0; line-height:1.4; }

/* Section description in admin list */
.section-card-desc { font-size:.85rem; color:var(--text2); margin:.25rem 0 0; line-height:1.4; }

/* ===== EVENT STATUS BADGES ===== */
.badge-open { background:rgba(34,197,94,.15); color:#16a34a; }
.badge-closed { background:rgba(239,68,68,.15); color:var(--danger); }
.badge-archived { background:rgba(107,114,128,.15); color:#6b7280; }

/* Stats box */
.stat-box { background:var(--surface); border:1px solid var(--border); border-radius:.75rem; padding:1rem 1.5rem; text-align:center; min-width:100px; }
.stat-box strong { font-size:1.5rem; display:block; color:var(--primary); }
.proj-ctrl-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.15);border-radius:.5rem;margin:.75rem 0;flex-wrap:wrap}
.proj-ctrl-label{font-size:.8rem;font-weight:600;color:var(--primary);margin-right:.25rem;white-space:nowrap}
.proj-ctrl-btn{font-size:.75rem;padding:.3rem .6rem;border-radius:.4rem;border:1px solid var(--border);background:var(--bg);cursor:pointer;transition:all .15s;white-space:nowrap;color:var(--text2)}
.proj-ctrl-btn:hover{border-color:var(--primary);color:var(--primary)}
.proj-ctrl-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Events: thumbnails + bulk selection */
.evt-card-row{display:flex;align-items:center;gap:.6rem;width:100%}
.evt-cb{width:18px;height:18px;cursor:pointer;flex-shrink:0;accent-color:var(--primary)}
.evt-thumb-wrap{flex-shrink:0;width:56px;height:56px;border-radius:.4rem;overflow:hidden;cursor:pointer}
.evt-thumb{width:100%;height:100%;object-fit:cover;display:block}
.evt-card-body{flex:1;min-width:0;cursor:pointer}
.session-card.evt-selected{outline:2px solid var(--primary);outline-offset:-2px;background:rgba(76,159,112,.06)}
.evt-bulk-bar{display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem;background:rgba(76,159,112,.08);border:1px solid rgba(76,159,112,.2);border-radius:.5rem;margin-bottom:.75rem;flex-wrap:wrap;position:sticky;top:0;z-index:10}
.evt-bulk-count{font-weight:600;font-size:.85rem;color:var(--primary);min-width:90px}
.evt-bulk-sep{color:var(--border);margin:0 .15rem}
.evt-bulk-label{font-size:.8rem;color:var(--text2);font-weight:500}