:root { --primary:#5b45d6; --bg:#f4f5fb; --card:#fff; --text:#252438; --muted:#6b687d; --ok:#18794e; --bad:#b42318; --option-bg:#f7f6fb; }
        :root[data-theme="dark"] {
            --primary:#9b8cff; --bg:#171622; --card:#242232; --text:#f4f2ff;
            --muted:#b7b2c8; --ok:#66d6a1; --bad:#ff928a; --option-bg:#302e42;
        }
        * { box-sizing:border-box; }
        body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,sans-serif; }
        main { width:min(920px,92%); margin:36px auto; }
        .panel, .question-card { background:var(--card); border:0; border-radius:14px; padding:24px; box-shadow:0 5px 22px #31266b14; }
        .panel { margin-bottom:18px; }
        .topbar, .row, .room-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
        .app-header { position:relative; padding-left:86px; }
        .brand { display:flex; align-items:center; gap:14px; }
        .brand h1 { display:flex; align-items:center; gap:10px; margin:0; line-height:1.2; }
        .brand-isotipo { width:58px; height:auto; object-fit:contain; }
        .brand-logotipo { display:block; width:220px; max-width:100%; height:auto; object-fit:contain; }
        .account-menu { position:absolute; top:24px; left:24px; z-index:20; }
        .menu-toggle { width:44px; height:44px; padding:10px; display:grid; align-content:center; gap:5px; }
        .menu-toggle span { display:block; height:3px; border-radius:3px; background:white; }
        .account-dropdown {
            position:absolute; top:52px; left:0; width:230px; padding:16px;
            background:var(--card); border:1px solid #e2e0ed; border-radius:12px;
            box-shadow:0 12px 32px #31266b2e;
        }
        .account-dropdown[hidden] { display:none; }
        .account-dropdown strong { display:block; margin:4px 0 14px; overflow-wrap:anywhere; }
        .menu-quota { margin:0 0 8px; padding:10px 0; border-top:1px solid #e2e0ed; border-bottom:1px solid #e2e0ed; }
        .menu-quota strong { margin:4px 0 0; color:var(--primary); }
        .account-dropdown a { display:block; padding-top:12px; border:0; }
        .account-dropdown .friends-menu-link { display:flex; align-items:center; justify-content:space-between; gap:10px; }
        .account-dropdown .upgrade-menu-link {
            display:flex; align-items:center; gap:8px; margin-top:10px; padding:10px 12px;
            border-radius:8px; background:#bfe8d2; color:#185c43;
        }
        .account-dropdown .upgrade-icon {
            color:#0d4d34; font-family:Arial,sans-serif; font-size:18px; line-height:1;
        }
        :root[data-theme="dark"] .account-dropdown .upgrade-menu-link {
            background:#82c7a4; color:#153f2f;
        }
        .menu-badge { min-width:20px; padding:2px 6px; border-radius:999px; background:var(--primary); color:#fff; font-size:11px; text-align:center; }
        .beta { display:inline-block; flex:0 0 auto; margin:0; padding:4px 8px; border-radius:999px; background:#ece9ff; color:var(--primary); font-size:12px; vertical-align:middle; }
        h1,h2 { margin-top:0; }
        input,select { width:100%; padding:13px; border:1px solid #cbc9d8; border-radius:8px; font-size:16px; background:var(--card); color:var(--text); }
        button { border:0; border-radius:8px; padding:13px 18px; color:white; background:var(--primary); font-weight:bold; cursor:pointer; }
        button:disabled { opacity:.55; cursor:wait; }
        .secondary { background:#ece9ff; color:var(--primary); }
        .danger { color:var(--bad); }
        .muted { color:var(--muted); }
        .hidden { display:none !important; }
        html.room-loading #home { display:none !important; }
        .grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
        .daily-quiz-button {
            grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between;
            gap:14px; padding:17px 20px; border-radius:12px; background:#6fae9b;
            color:#fff; box-shadow:0 5px 22px #315f5128;
        }
        .daily-quiz-button span { font-size:14px; font-weight:normal; opacity:.9; }
        .my-rooms-panel { grid-column:1 / -1; }
        .room-list-heading {
            display:flex; align-items:center; justify-content:space-between; gap:12px;
        }
        .room-list-heading h2 { margin:0; }
        .my-rooms-list {
            display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:12px; margin-top:18px;
        }
        .my-room {
            display:flex; align-items:center; justify-content:space-between;
            gap:12px; padding:14px; border-radius:10px; background:var(--option-bg);
        }
        .my-room strong,.my-room small { display:block; }
        .my-room small { margin-top:4px; color:var(--muted); }
        .my-room a {
            flex:0 0 auto; padding:9px 12px; border-radius:8px;
            background:var(--primary); color:#fff;
        }
        .my-room-actions { display:flex; align-items:center; gap:8px; }
        .cancel-listed-room {
            padding:9px 12px; background:var(--bad); color:#fff;
        }
        .stack { display:grid; align-content:start; gap:12px; }
        .host-mode { display:flex; align-items:flex-start; gap:10px; padding:11px; border-radius:8px; background:var(--option-bg); cursor:pointer; }
        .host-mode input { width:auto; flex:0 0 auto; margin:3px 0 0; accent-color:var(--primary); }
        .host-mode span,.host-mode strong,.host-mode small { display:block; }
        .host-mode small { margin-top:4px; color:var(--muted); line-height:1.35; }
        .pro-quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .pro-quiz-options label { display:grid; gap:6px; color:var(--muted); }
        .question-editor { margin:22px 0; padding-top:20px; border-top:1px solid #eceaf2; }
        .editor-question { display:grid; gap:9px; margin:14px 0; padding:15px; border-radius:10px; background:var(--option-bg); }
        .editor-question textarea {
            width:100%; box-sizing:border-box; resize:vertical; padding:12px;
            border:1px solid #cbc9d8; border-radius:8px;
            background:var(--card); color:var(--text); font:inherit;
        }
        .editor-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .editor-correct { display:flex; align-items:center; gap:8px; }
        .editor-correct select { width:auto; }
        .code { font-size:32px; letter-spacing:5px; font-weight:bold; color:var(--primary); }
        .lobby-actions {
            display:flex; align-items:center; justify-content:flex-end;
            flex-wrap:wrap; gap:9px;
        }
        #cancel-room { background:var(--bad); color:#fff; }
        #lobby .room-head + h2 { margin-top:20px; }
        .room-share { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:22px; padding-top:20px; border-top:1px solid #eceaf2; }
        .room-share p { max-width:440px; margin:6px 0 12px; }
        #room-qr { flex:0 0 auto; padding:10px; border-radius:10px; background:#fff; }
        #room-qr img,#room-qr canvas { display:block; width:150px; height:150px; }
        .timer { font:700 30px monospace; }
        .timer.limit { color:var(--bad); }
        .game-actions { display:flex; align-items:center; gap:12px; }
        .spectator-dashboard { margin-top:18px; }
        .host-room-switcher { margin-bottom:18px; }
        .host-room-switcher > strong { display:block; margin-bottom:10px; }
        #host-room-links { display:flex; flex-wrap:wrap; gap:9px; }
        .host-room-link {
            padding:9px 12px; border:1px solid var(--primary);
            border-radius:999px; color:var(--primary);
        }
        .host-room-link.current { background:var(--primary); color:#fff; }
        .spectator-player { margin-top:13px; padding:13px; border-radius:9px; background:var(--option-bg); }
        .spectator-player-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
        .spectator-player .progress-track { margin:0; }
        #leave-game { padding:10px 14px; background:var(--bad); color:#fff; }
        .question-card { margin:16px 0; }
        .question-title {
            margin:0 0 18px; font-size:18px; line-height:1.4;
            overflow-wrap:anywhere;
        }
        label.option {
            display:flex; align-items:center; gap:10px; margin:9px 0; padding:11px;
            background:var(--option-bg); color:var(--text); border-radius:8px; cursor:pointer;
        }
        label.option input[type="radio"] {
            width:auto; flex:0 0 auto; margin:0; accent-color:var(--primary);
        }
        .question-progress { margin:18px 0 8px; color:var(--muted); font-weight:bold; }
        .progress-track { height:8px; margin-top:9px; overflow:hidden; border-radius:999px; background:#e6e3f4; }
        .progress-value { height:100%; border-radius:inherit; background:var(--primary); transition:width .2s ease; }
        .question-navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; }
        .question-navigation button { min-width:130px; }
        .question-navigation button:disabled { cursor:not-allowed; }
        #question-message { min-height:22px; }
        table { width:100%; border-collapse:collapse; }
        th,td { text-align:left; padding:11px; border-bottom:1px solid #eceaf2; }
        #message { min-height:22px; }
        .guest-register {
            margin:20px 0 0;
            padding:14px;
            border-radius:9px;
            background:#ece9ff;
            color:#252438;
            text-align:center;
        }
        a { color:var(--primary); font-weight:bold; text-decoration:none; }
        @media(max-width:700px) {
            .grid { grid-template-columns:1fr; }
            .daily-quiz-button { align-items:flex-start; flex-direction:column; }
            .row,.room-head { align-items:stretch; flex-direction:column; }
            .lobby-actions { justify-content:flex-start; }
            .app-header {
                padding:18px;
                justify-content:flex-start;
                gap:14px;
            }
            .brand { min-width:0; gap:9px; }
            .brand-isotipo { width:42px; flex:0 0 auto; }
            .brand h1 { min-width:0; gap:6px; }
            .brand-logotipo { width:min(160px,42vw); }
            .account-menu { position:relative; top:auto; left:auto; flex:0 0 auto; }
            .question-navigation button { min-width:0; flex:1; }
            .room-share { align-items:flex-start; flex-direction:column; }
            .pro-quiz-options,.editor-options { grid-template-columns:1fr; }
            .my-room { align-items:flex-start; flex-direction:column; }
            .my-room-actions { width:100%; }
        }