/* ── OnlineSurvey ── Quick & Dirty Mentimeter-like CSS ───────────────────── */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    min-height: 100vh;
    color: #e0e0e0;
}

.container { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.card h1, .card h2, .card h3 { margin-bottom: 1rem; }
.card h1 { font-size: 2.2rem; }
.card h2 { font-size: 1.6rem; }
.card h3 { font-size: 1.2rem; color: #c0c0ff; }

.subtitle { color: #a0a0c0; font-size: 1.1rem; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; color: #b0b0d0; }
.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}
.form-group input:focus { border-color: #7c6cf0; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 0.4rem 1rem; font-size: 0.85rem; }
.btn-primary { background: #7c6cf0; color: #fff; }
.btn-secondary { background: rgba(255,255,255,0.12); color: #e0e0ff; border: 1px solid rgba(255,255,255,0.15); }
.btn-success { background: #2ecc71; color: #fff; }
.btn-warning { background: #f39c12; color: #fff; }
.btn-danger { background: #e74c3c; color: #fff; }

.btn-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Table ─────────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.table th, .table td { padding: 0.75rem 0.5rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); }
.table th { color: #a0a0c0; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.table td { font-size: 0.95rem; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-created { background: #7c6cf0; color: #fff; }
.badge-lobby { background: #3498db; color: #fff; }
.badge-active { background: #2ecc71; color: #fff; }
.badge-finished { background: #95a5a6; color: #fff; }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.alert { padding: 0.7rem 1rem; border-radius: 10px; margin-bottom: 0.5rem; font-size: 0.9rem; }
.alert-error { background: rgba(231, 76, 60, 0.2); border: 1px solid #e74c3c; color: #ff6b6b; }
.alert-success { background: rgba(46, 204, 113, 0.2); border: 1px solid #2ecc71; color: #6bffa0; }

/* ── Question Items (leader view) ──────────────────────────────────────────── */
.question-item {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.8rem;
}
.q-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.q-num {
    background: #7c6cf0;
    color: #fff;
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.q-text { flex: 1; font-weight: 500; }
.q-timer { color: #f39c12; font-size: 0.85rem; flex-shrink: 0; }

.q-options { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.opt-tag {
    background: rgba(124, 108, 240, 0.2);
    color: #c0b8ff;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

/* ── Result Bars ───────────────────────────────────────────────────────────── */
.result-bar-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.result-label { width: 120px; font-size: 0.9rem; flex-shrink: 0; text-align: right; }
.result-bar-bg { flex: 1; height: 24px; background: rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; }
.result-bar { height: 100%; background: linear-gradient(90deg, #7c6cf0, #5dade2); border-radius: 12px; transition: width 0.5s ease; }
.result-count { width: 70px; font-size: 0.85rem; color: #b0b0d0; flex-shrink: 0; }

.results-chart { margin-top: 0.8rem; padding: 0.8rem; background: rgba(0,0,0,0.2); border-radius: 10px; }
.results-chart h4 { margin-bottom: 0.8rem; color: #a0a0ff; }

/* ── Participant Badges (lobby) ────────────────────────────────────────────── */
.participant-badge {
    display: inline-block;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #6bffa0;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    margin: 0.3rem;
    font-size: 0.9rem;
}

.empty { color: #666; font-style: italic; text-align: center; padding: 1rem; }

/* ── Options Grid (participant view) ───────────────────────────────────────── */
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem;
    margin-top: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.option-btn {
    padding: 1.2rem 1.5rem;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.option-btn:hover {
    background: rgba(124, 108, 240, 0.3);
    border-color: #7c6cf0;
    transform: scale(1.03);
}
.option-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.option-btn:disabled:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    transform: none;
}

/* ── Timer ─────────────────────────────────────────────────────────────────── */
.timer {
    font-size: 2rem;
    font-weight: 700;
    color: #f39c12;
    margin-bottom: 1rem;
}

/* ── Spinner ───────────────────────────────────────────────────────────────── */
.spinner {
    width: 50px; height: 50px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: #7c6cf0;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

.lobby-animation { padding: 2rem 0; }
.lobby-animation h3 { color: #e0e0ff; }

/* ── code / inline ─────────────────────────────────────────────────────────── */
code {
    background: rgba(0,0,0,0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: "SF Mono", "Fira Code", monospace;
}

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .container { padding: 1rem 0.5rem; }
    .card { padding: 1rem; }
    .options-grid { grid-template-columns: 1fr; }
    .q-header { flex-wrap: wrap; }
}