/* ===================================================================== themes.css · Shared appearance system for the exam app + admin --------------------------------------------------------------------- Design tokens (CSS variables) + every theme + the appearance-switcher widget + density. Both index.html and admin.html link this file and keep only their own component styles. Set the theme by putting data-theme="…" (and optionally data-density="compact") on . ===================================================================== */ /* ---- appearance-switcher widget (used on both pages) ---- */ .appearance{padding:12px 15px} .ap-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px} .ap-row{display:flex;flex-wrap:wrap;gap:6px} .ap-chip{font-family:inherit;font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--rule);background:var(--inset);color:var(--ink);cursor:pointer} .ap-chip:hover{border-color:var(--gold)} .ap-chip.on{background:var(--turf);color:var(--on-turf);border-color:var(--turf)} /* ---------- Augusta (default) ---------- */ :root{ --bg-top:#14503a;--turf:#0e3a2a;--turf-deep:#0a2c20;--turf-hi:#155139; --card:#f6f1e3;--card-edge:#e3dac4;--rule:#cfc6ab; --inset:#fbf8ee;--inset-hi:#fffdf4;--inset-2:#f0ead6;--sel-bg:#eef3ec; --right-bg:#e8f3ea;--wrong-bg:#f9e9e6;--track:#e6dcc2;--ghost-hi:#efe9d6; --resume-bg:#fbf3e2;--resume-edge:#d9c285;--rulerow-bg:#fffdf7;--rulerow-hi:#ffffff; --ink:#1d2823;--ink-soft:#5a6a60;--ink-ex:#33402f;--on-turf:#ece5cf; --header-ink:#e9e2cd;--header-soft:#bfd4c4;--header-em:#d8c98f; --acct-bg:rgba(246,241,227,.12);--acct-bg-hi:rgba(246,241,227,.2);--acct-border:rgba(233,226,205,.35); --flag:#b23a2e;--holed:#2e7d4f;--gold:#a87f2c;--gold-hi:#cf9a3e; --shadow-card:0 12px 40px rgba(0,0,0,.4)} /* ---------- Light / parchment ---------- */ html[data-theme="light"]{ --bg-top:#fbf8ef;--turf:#0e3a2a;--turf-deep:#0a2c20;--turf-hi:#155139; --card:#ffffff;--card-edge:#e6e0d2;--rule:#e1dac8; --inset:#f6f3ec;--inset-hi:#fffdf6;--inset-2:#f1ecdd;--sel-bg:#eef3ec; --right-bg:#e8f3ea;--wrong-bg:#f9e9e6;--track:#e8e2d2;--ghost-hi:#efeadd; --resume-bg:#fbf3e2;--resume-edge:#e0cfa0;--rulerow-bg:#faf8f2;--rulerow-hi:#ffffff; --ink:#1d2823;--ink-soft:#556;--ink-ex:#33402f;--on-turf:#f3efe3; --header-ink:#26342b;--header-soft:#5d7064;--header-em:#9a7a2f; --acct-bg:rgba(20,40,33,.06);--acct-bg-hi:rgba(20,40,33,.12);--acct-border:rgba(20,40,33,.18); --flag:#b23a2e;--holed:#2e7d4f;--gold:#a87f2c;--gold-hi:#7e5e1f; --shadow-card:0 8px 26px rgba(80,70,45,.12)} html[data-theme="light"] body{background:#efeadd;background-image:radial-gradient(ellipse at 50% -10%,#fbf8ef 0%,#efeadd 60%,#e7e0cf 100%)} /* ---------- Dark / night ---------- */ html[data-theme="dark"]{ --bg-top:#13211b;--turf:#0c1813;--turf-deep:#070f0b;--turf-hi:#1c3a2c; --card:#16201b;--card-edge:#27332c;--rule:#2f3d35; --inset:#1c2823;--inset-hi:#243029;--inset-2:#222e22;--sel-bg:#1f2e25; --right-bg:#1c3326;--wrong-bg:#3a2420;--track:#2c3a31;--ghost-hi:#23302a; --resume-bg:#24301d;--resume-edge:#3f5230;--rulerow-bg:#1b261f;--rulerow-hi:#22302a; --ink:#e7ead0;--ink-soft:#9fb0a4;--ink-ex:#cdd9c4;--on-turf:#e7ecd6; --header-ink:#e7ecd6;--header-soft:#9fc0a8;--header-em:#d8c98f; --acct-bg:rgba(231,236,214,.10);--acct-bg-hi:rgba(231,236,214,.18);--acct-border:rgba(231,236,214,.25); --flag:#e8867a;--holed:#5ec48a;--gold:#cda64e;--gold-hi:#e0bd6a; --shadow-card:0 12px 40px rgba(0,0,0,.55)} html[data-theme="dark"] body{background:#0c1813;background-image:radial-gradient(ellipse at 50% -10%,#13211b 0%,#0c1813 55%,#070f0b 100%)} /* ---------- High-contrast ---------- */ html[data-theme="contrast"]{ --bg-top:#ffffff;--turf:#08311f;--turf-deep:#062416;--turf-hi:#0c4a2e; --card:#ffffff;--card-edge:#000000;--rule:#000000; --inset:#ffffff;--inset-hi:#f2f2f2;--inset-2:#fff8e6;--sel-bg:#e8f0ff; --right-bg:#e3f6e8;--wrong-bg:#fde7e4;--track:#cccccc;--ghost-hi:#eeeeee; --resume-bg:#fff8e6;--resume-edge:#000000;--rulerow-bg:#ffffff;--rulerow-hi:#f2f2f2; --ink:#000000;--ink-soft:#333333;--ink-ex:#000000;--on-turf:#ffffff; --header-ink:#000000;--header-soft:#222222;--header-em:#7a5a00; --acct-bg:rgba(0,0,0,.06);--acct-bg-hi:rgba(0,0,0,.14);--acct-border:#000000; --flag:#b3261e;--holed:#1d7a43;--gold:#7a5a00;--gold-hi:#5a4300; --shadow-card:none} html[data-theme="contrast"] body{background:#ffffff;background-image:none} html[data-theme="contrast"] .panelbox,html[data-theme="contrast"] .card,html[data-theme="contrast"] .scorecard,html[data-theme="contrast"] .panel,html[data-theme="contrast"] .report{border-width:2px} html[data-theme="contrast"] .opt,html[data-theme="contrast"] .mode,html[data-theme="contrast"] #login input,html[data-theme="contrast"] .flag-reason,html[data-theme="contrast"] input,html[data-theme="contrast"] textarea{border-width:2px} /* ---------- Tropical (with graphics) ---------- */ html[data-theme="tropical"]{ --bg-top:#7fd7e8;--turf:#0d8a8f;--turf-deep:#076b73;--turf-hi:#0fa0a6; --card:#fffaf0;--card-edge:#f0e2c4;--rule:#e7d6ad; --inset:#fff7e6;--inset-hi:#fffdf4;--inset-2:#fdeecb;--sel-bg:#e6f7f5; --right-bg:#e2f6ec;--wrong-bg:#fdeae2;--track:#f0e2c4;--ghost-hi:#f6ecd4; --resume-bg:#fff3d6;--resume-edge:#eccf86;--rulerow-bg:#fffaf0;--rulerow-hi:#ffffff; --ink:#234a4a;--ink-soft:#5b7a78;--ink-ex:#2c4f3a;--on-turf:#ffffff; --header-ink:#06414a;--header-soft:#0c6b6f;--header-em:#f4a23a; --acct-bg:rgba(255,255,255,.30);--acct-bg-hi:rgba(255,255,255,.5);--acct-border:rgba(255,255,255,.7); --flag:#e2603b;--holed:#1fa86a;--gold:#e89b1f;--gold-hi:#c97f0e; --shadow-card:0 12px 36px rgba(10,60,70,.22)} html[data-theme="tropical"] body{background:#86dcef;background-image:linear-gradient(180deg,#86dcef 0%,#a9e7e0 38%,#d9f3df 64%,#f3eccf 100%);background-attachment:fixed} html[data-theme="tropical"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9;background-repeat:no-repeat,no-repeat;background-position:right -34px top -26px,left -28px bottom -16px;background-size:200px 200px,240px 240px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%20200%27%3E%3Ccircle%20cx=%27100%27%20cy=%27100%27%20r=%2772%27%20fill=%27rgba(247,196,90,0.30)%27/%3E%3Ccircle%20cx=%27100%27%20cy=%27100%27%20r=%2748%27%20fill=%27rgb(248,206,108)%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20240%20240%27%3E%3Cpath%20d=%27M64%20232%20C72%20168%2082%20124%20100%2090%27%20stroke=%27rgb(124,88,54)%27%20stroke-width=%279%27%20fill=%27none%27%20stroke-linecap=%27round%27/%3E%3Cg%20fill=%27rgb(32,138,92)%27%3E%3Cellipse%20cx=%27100%27%20cy=%2784%27%20rx=%2756%27%20ry=%2715%27%20transform=%27rotate(-20%20100%2084)%27/%3E%3Cellipse%20cx=%27100%27%20cy=%2784%27%20rx=%2756%27%20ry=%2715%27%20transform=%27rotate(20%20100%2084)%27/%3E%3Cellipse%20cx=%27100%27%20cy=%2782%27%20rx=%2714%27%20ry=%2752%27/%3E%3Cellipse%20cx=%27100%27%20cy=%2784%27%20rx=%2752%27%20ry=%2714%27%20transform=%27rotate(-58%20100%2084)%27/%3E%3Cellipse%20cx=%27100%27%20cy=%2784%27%20rx=%2752%27%20ry=%2714%27%20transform=%27rotate(58%20100%2084)%27/%3E%3C/g%3E%3C/svg%3E")} /* ---------- Pastel ---------- */ html[data-theme="pastel"]{ --bg-top:#f1e7ff;--turf:#8a73b8;--turf-deep:#75619e;--turf-hi:#9a86c4; --card:#fffafe;--card-edge:#ecd9ee;--rule:#e7d6ec; --inset:#fbf2fb;--inset-hi:#fffafe;--inset-2:#eef6f0;--sel-bg:#eef0fb; --right-bg:#e6f6ec;--wrong-bg:#fdeaf0;--track:#ecdcef;--ghost-hi:#f4ecf6; --resume-bg:#fdf3e6;--resume-edge:#e9cfa8;--rulerow-bg:#fffafe;--rulerow-hi:#ffffff; --ink:#3e3550;--ink-soft:#7b7390;--ink-ex:#4a4358;--on-turf:#ffffff; --header-ink:#5b4b78;--header-soft:#8f86a8;--header-em:#c98aa8; --acct-bg:rgba(90,70,120,.07);--acct-bg-hi:rgba(90,70,120,.13);--acct-border:rgba(90,70,120,.18); --flag:#d2738f;--holed:#5bbd8f;--gold:#bd924a;--gold-hi:#9c7836; --shadow-card:0 8px 26px rgba(90,70,120,.12)} html[data-theme="pastel"] body{background:#f1e7ff;background-image:linear-gradient(180deg,#f3e8ff 0%,#eafbf3 50%,#fdeef3 100%)} /* ---------- Early morning (dawn) ---------- */ html[data-theme="morning"]{ --bg-top:#cdd6f0;--turf:#c2674a;--turf-deep:#a8553c;--turf-hi:#d2755a; --card:#fffaf3;--card-edge:#f0e0cf;--rule:#ecdcc8; --inset:#fff6ec;--inset-hi:#fffdf6;--inset-2:#fdeed8;--sel-bg:#fbeee6; --right-bg:#e9f3e6;--wrong-bg:#fce6df;--track:#f0e0cf;--ghost-hi:#f6ead8; --resume-bg:#fff1dd;--resume-edge:#e9cfa8;--rulerow-bg:#fffaf3;--rulerow-hi:#ffffff; --ink:#4a3b34;--ink-soft:#897468;--ink-ex:#534338;--on-turf:#fff7ef; --header-ink:#6b4a3a;--header-soft:#9a7a64;--header-em:#cf8a4a; --acct-bg:rgba(80,50,40,.07);--acct-bg-hi:rgba(80,50,40,.13);--acct-border:rgba(80,50,40,.18); --flag:#cf5f43;--holed:#3f9e6a;--gold:#cf8a3a;--gold-hi:#b0701f; --shadow-card:0 8px 26px rgba(120,70,50,.13)} html[data-theme="morning"] body{background:#cdd6f0;background-image:linear-gradient(180deg,#cdd6f0 0%,#ffd9c2 45%,#ffefd0 100%)} /* ---------- Zen ---------- */ html[data-theme="zen"]{ --bg-top:#e8ece4;--turf:#6b7d6a;--turf-deep:#5a6b59;--turf-hi:#7a8c78; --card:#f7f8f3;--card-edge:#dde1d6;--rule:#d6dccd; --inset:#f1f3ec;--inset-hi:#f9faf5;--inset-2:#eef1e6;--sel-bg:#eaf0e6; --right-bg:#e7f0e6;--wrong-bg:#f1e7e2;--track:#dde1d2;--ghost-hi:#eef1e6; --resume-bg:#f2efe2;--resume-edge:#d8cba6;--rulerow-bg:#f7f8f3;--rulerow-hi:#ffffff; --ink:#3c443a;--ink-soft:#74806f;--ink-ex:#46503f;--on-turf:#f4f6ef; --header-ink:#4a5547;--header-soft:#7d8a78;--header-em:#9a8a5a; --acct-bg:rgba(60,68,58,.06);--acct-bg-hi:rgba(60,68,58,.12);--acct-border:rgba(60,68,58,.16); --flag:#b5705f;--holed:#5e9b6f;--gold:#9a8a5a;--gold-hi:#7e7044; --shadow-card:0 8px 24px rgba(60,68,58,.10)} html[data-theme="zen"] body{background:#e8ece4;background-image:linear-gradient(180deg,#eef1ea 0%,#e6eae1 55%,#dfe4da 100%)} /* ---------- Sepia / paper ---------- */ html[data-theme="sepia"]{ --bg-top:#e7d9bf;--turf:#6b4f2e;--turf-deep:#574025;--turf-hi:#7d5e38; --card:#f6ecd6;--card-edge:#ddc9a0;--rule:#d3bf95; --inset:#f0e4c8;--inset-hi:#faf1da;--inset-2:#eaddbd;--sel-bg:#eee4c8; --right-bg:#e5eccf;--wrong-bg:#eed9c8;--track:#dccba0;--ghost-hi:#ece0c0; --resume-bg:#f3e7c8;--resume-edge:#cbb279;--rulerow-bg:#f6ecd6;--rulerow-hi:#fbf3df; --ink:#3f3322;--ink-soft:#7a6b51;--ink-ex:#473a27;--on-turf:#f6ecd6; --header-ink:#5a4527;--header-soft:#8a7350;--header-em:#9a6f2a; --acct-bg:rgba(70,50,25,.07);--acct-bg-hi:rgba(70,50,25,.13);--acct-border:rgba(70,50,25,.2); --flag:#a8472e;--holed:#5f7d3a;--gold:#9a6f2a;--gold-hi:#7d5a1e; --shadow-card:0 8px 26px rgba(80,60,30,.16)} html[data-theme="sepia"] body{background:#e7d9bf;background-image:linear-gradient(180deg,#f2e7cf 0%,#e9dcc0 55%,#e0d2b2 100%)} /* ---------- Density: compact (exam app) ---------- */ html[data-density="compact"] .panelbox{padding:16px} html[data-density="compact"] .panelbox h2{font-size:17px} html[data-density="compact"] .card-head{padding:12px 16px 0} html[data-density="compact"] .question{font-size:16px;line-height:1.5;padding:10px 16px 12px} html[data-density="compact"] .options{padding:10px 12px 4px} html[data-density="compact"] .opt{padding:9px 12px;margin-bottom:7px;font-size:13.5px} html[data-density="compact"] .verdict{margin:3px 16px 0;font-size:15px} html[data-density="compact"] .explain{margin:8px 16px 14px;padding:11px 13px;font-size:13px} html[data-density="compact"] .nav{padding:0 16px 14px} html[data-density="compact"] .flagrow{padding:0 16px 12px}