@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Playfair+Display:wght@700;900&display=swap');

/* ═══════════════════════════════════════════
   AZURE GLASS — Global Brand Identity
   Deep Navy · Signature Blue · Editorial (matches the portfolio)
═══════════════════════════════════════════ */

:root {
  --bg:          #09090f;
  --bg-2:        #0f0f1a;
  --surface:     rgba(255,255,255,0.030);
  --surface-2:   rgba(255,255,255,0.055);
  --surface-3:   rgba(255,255,255,0.085);
  --border:      rgba(255,255,255,0.085);
  --border-2:    rgba(255,255,255,0.15);

  --text:        #e4e4f0;
  --text-2:      #8585ac;
  --muted:       rgba(160,160,200,0.72);

  /* Signature gold */
  --gold:        #4361ee;
  --gold-2:      #6b82f8;
  --gold-3:      #8b9ef9;
  --gold-glow:   rgba(67,97,238,0.30);
  --gold-subtle: rgba(67,97,238,0.10);
  --brand:        var(--gold);
  --brand-2:      var(--gold-2);
  --brand-3:      var(--gold-2);
  --brand-glow:   var(--gold-glow);
  --brand-subtle: var(--gold-subtle);

  /* Semantic */
  --ok:          #22c55e;
  --ok-subtle:   rgba(34,197,94,0.10);
  --bad:         #ef4444;
  --bad-subtle:  rgba(239,68,68,0.10);

  --shadow:    0 4px 32px rgba(0,0,0,.70), 0 1px 8px rgba(0,0,0,.50);
  --shadow-lg: 0 24px 72px rgba(0,0,0,.80), 0 8px 32px rgba(0,0,0,.50);
  --shadow-gold: 0 8px 40px rgba(67,97,238,.30);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --container: 1000px;
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-out:  cubic-bezier(0,0,.2,1);

  --switch-w:     52px;
  --switch-h:     30px;
  --switch-pad:   3px;
  --thumb:        24px;
  --track:        rgba(255,255,255,0.10);
  --track-border: rgba(255,255,255,0.08);
  --thumb-bg:     #e4e4f0;
  --thumb-border: rgba(0,0,0,0.10);
  --glow:         rgba(67,97,238,0.45);
}

html.light-mode {
  --bg:          #f3f4fa;
  --bg-2:        #e9ebf5;
  --surface:     rgba(20,25,70,0.04);
  --surface-2:   rgba(20,25,70,0.066);
  --surface-3:   rgba(20,25,70,0.10);
  --border:      rgba(20,25,70,0.10);
  --border-2:    rgba(20,25,70,0.18);
  --text:        #0d0e1a;
  --text-2:      #5d6280;
  --muted:       rgba(93,98,128,0.85);
  --shadow:      0 4px 32px rgba(20,25,70,0.10), 0 1px 8px rgba(30,20,0,0.06);
  --shadow-lg:   0 24px 72px rgba(20,25,70,0.14), 0 8px 32px rgba(20,25,70,0.08);
  --track:       rgba(0,0,0,0.10);
  --track-border:rgba(0,0,0,0.08);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }

body.bg {
  font-family: 'IBM Plex Arabic', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

/* Slow-breathing gold orbs */
body.bg::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 25%,  rgba(67,97,238,.07) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 75%,  rgba(67,97,238,.05) 0%, transparent 55%),
    radial-gradient(ellipse 80% 35% at 50% 110%,  rgba(67,97,238,.04) 0%, transparent 50%);
  animation: orbBreath 14s ease-in-out infinite alternate;
}

@keyframes orbBreath {
  0%   { transform: scale(1)    translate(0%,   0%); opacity: 1; }
  50%  { transform: scale(1.06) translate(-1%,  2%); opacity: .8; }
  100% { transform: scale(1.03) translate(2%,  -1%); opacity: 1; }
}

/* Subtle noise grain */
body.bg::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

a { color:inherit; text-decoration:none; }
.hidden { display:none !important; }

/* ── Layout ── */
.container {
  width: min(var(--container), calc(100% - 32px));
  margin: 32px auto 80px;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Topbar ── */
.topbar {
  width: min(var(--container), calc(100% - 32px));
  margin: 24px auto 0;
  padding: 14px 22px;
  border-radius: 0;
  background: rgba(9,9,15,.85);
  border-bottom: 1px solid rgba(67,97,238,.20);
  border-top: none; border-left: none; border-right: none;
  /* thin gold line at very top */
  box-shadow: 0 -1px 0 0 rgba(67,97,238,.35) inset, var(--shadow);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  position: sticky; top: 0; z-index: 100;
  border-radius: var(--radius-lg);
  animation: topbarIn .6s var(--ease) both;
}

@keyframes topbarIn {
  from { opacity:0; transform: translateY(-12px); }
  to   { opacity:1; transform: translateY(0); }
}

.brand { display:flex; align-items:center; gap:14px; min-width:0; }

  50%      { filter: drop-shadow(0 6px 28px rgba(67,97,238,.55)); }
}

/* ── Wordmark ── */
.brandTitle {
  line-height: 1; display: flex; flex-direction: column; gap: 3px;
}

/* Course label (home page only) */

/* Course number (home page only) */

  50%      { filter: brightness(1.15); }
}

/* Page title (level / chapter pages) */

/* ── Logo dot (decorative accent) ── */
.logoDot {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  box-shadow: 0 4px 16px var(--gold-glow);
  display: grid; place-items: center;
}
.logoDot::after {
  content: "";
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(9,9,15,.88);
}

/* ── Brand title ── */
.brandTitle {
  font-weight: 700; font-size: 16px;
  letter-spacing: .3px; line-height: 1.2;
}

.brandSub {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw;
  letter-spacing: .15px;
}

.dotSep { display:inline-block; margin:0 6px; opacity:.35; }

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 26px;
  position: relative; overflow: hidden;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
  /* staggered entrance */
  opacity: 0;
  animation: cardIn .55s var(--ease) forwards;
}

.card:nth-child(1) { animation-delay: .10s; }
.card:nth-child(2) { animation-delay: .18s; }
.card:nth-child(3) { animation-delay: .26s; }
.card:nth-child(4) { animation-delay: .34s; }

@keyframes cardIn {
  from { opacity:0; transform: translateY(22px); }
  to   { opacity:1; transform: translateY(0); }
}

.card:hover {
  border-color: rgba(67,97,238,.22);
  box-shadow: var(--shadow), 0 0 0 1px rgba(67,97,238,.08);
}

/* Top gold hair-line */
.card::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 40%, var(--gold-2) 60%, transparent 100%);
  opacity: .45;
}

/* Gold shimmer sweep on hover */
.card::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(67,97,238,.04) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s ease;
  pointer-events: none;
}
.card:hover::after { transform: translateX(100%); }

.cardHead {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:14px; margin-bottom:22px;
}

.sectionHeaderRow { display:flex; align-items:center; gap:14px; }

/* Section icon — thin gold border ring */
.sectionIcon {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px; flex: 0 0 auto;
  border: 1px solid rgba(67,97,238,.25);
  background: rgba(67,97,238,.07);
  position: relative;
  transition: border-color .3s, background .3s;
}
.sectionIcon:hover { border-color: rgba(67,97,238,.50); background: rgba(67,97,238,.12); }

/* Keep other color variants but with gold theme */
.sectionIcon.purple,
.sectionIcon.blue,
.sectionIcon.green,
.sectionIcon.amber { background: rgba(67,97,238,.07); border: 1px solid rgba(67,97,238,.20); }

.sectionMeta { display:flex; flex-direction:column; gap:3px; }

.h1 {
  font-size: 15px; font-weight: 700;
  letter-spacing: .5px; line-height: 1.3;
  text-transform: uppercase;
}

.muted { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ── Progress bar ── */
.sectionProgress { margin-top:10px; display:flex; align-items:center; gap:10px; }
.progressBar {
  flex:1; height:2px; border-radius:999px;
  background: rgba(255,255,255,.08); overflow:hidden;
}
.progressFill {
  height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 100%);
  transition: width 1s var(--ease); min-width:4px;
  box-shadow: 0 0 8px var(--gold-glow);
}
.progressLabel { font-size:11px; font-weight:700; color: var(--gold); white-space:nowrap; }

/* ── Levels Grid ── */
.levelsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px; margin: 4px 0;
}

/* ── Level Button ── */
.levelBtn {
  padding: 16px 14px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  cursor: pointer; font-weight: 600; font-size: 13.5px;
  font-family: inherit; text-align: center;
  position: relative; overflow: hidden; line-height: 1.4;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: transform .2s var(--ease), border-color .3s, box-shadow .3s;
}

/* Shimmer sweep */
.levelBtn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(67,97,238,.13) 50%, transparent 65%);
  transform: translateX(-150%);
  transition: transform .55s ease;
}
.levelBtn:hover::before { transform: translateX(150%); }
.levelBtn:hover {
  transform: translateY(-2px);
  border-color: rgba(67,97,238,.35);
  box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(67,97,238,.10);
}
.levelBtn:active { transform: translateY(0) scale(.97); }

.levelBtn .lvlStatus {
  display:none; font-size:10px; font-weight:700;
  padding:2px 9px; border-radius:999px;
  align-items:center; gap:4px;
}

.levelBtn.isDone {
  background: rgba(67,97,238,.09) !important;
  border-color: rgba(67,97,238,.35) !important;
  color: var(--gold-2) !important;
}
.levelBtn.isDone .lvlStatus {
  display:inline-flex;
  background: rgba(67,97,238,.15); color: var(--gold-2);
  border: 1px solid rgba(67,97,238,.25);
}

.levelBtn.isInProgress {
  border-color: rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.06) !important;
}
.levelBtn.isInProgress .lvlStatus {
  display:inline-flex;
  background: rgba(255,255,255,.08); color: #cbd5e1;
  border: 1px solid rgba(255,255,255,.15);
}

/* ── Note ── */
.note {
  border-radius: var(--radius); background: var(--surface-2);
  border: 1px solid var(--border); padding:16px;
  border-inline-end: 2px solid var(--gold);
}
.noteTitle { font-weight:700; margin-bottom:6px; font-size:14px; color: var(--gold-2); text-transform:uppercase; letter-spacing:.4px; }
.noteBody  { color: var(--muted); line-height:1.75; font-size:13px; }

/* ── Theme Switch ── */
.themeSwitch { display:inline-flex; align-items:center; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.themeSwitch input { position:absolute; opacity:0; pointer-events:none; }
.switchTrack {
  width:var(--switch-w); height:var(--switch-h); padding:var(--switch-pad);
  border-radius:999px; display:inline-flex; align-items:center;
  background:var(--track); border:1px solid var(--track-border);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.30);
  transition: background-color .3s var(--ease), transform .15s ease;
}
.switchThumb {
  width:var(--thumb); height:var(--thumb); border-radius:999px;
  background:var(--thumb-bg); border:1px solid var(--thumb-border);
  display:grid; place-items:center;
  transform:translateX(0);
  transition: transform .42s cubic-bezier(.2,.95,.2,1), box-shadow .4s var(--ease);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
html.light-mode .switchThumb { transform:translateX(calc(var(--switch-w) - var(--thumb) - var(--switch-pad)*2)); }
.themeSwitch:hover .switchTrack { transform:translateY(-1px); }
.themeSwitch:active .switchTrack { transform:scale(.97); }
.themeSwitch input:focus-visible + .switchTrack { box-shadow:inset 0 2px 5px rgba(0,0,0,.3), 0 0 0 3px var(--glow); }
.switchIcon { width:12px; height:12px; border-radius:50%; background:rgba(0,0,0,.4); position:relative; display:inline-block; }
.switchIcon::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--thumb-bg); transform:translate(3px,-3px); }
html.light-mode .switchIcon { background:rgba(67,97,238,.9); box-shadow:0 0 0 2px rgba(67,97,238,.25); }
html.light-mode .switchIcon::after { opacity:0; }

/* ── Workspace ── */
.workspace {
  width: min(var(--container), calc(100% - 32px));
  margin: 20px auto 60px;
  display: grid; grid-template-columns: 300px 1fr 340px;
  gap: 12px; position: relative; z-index: 1;
}
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow);
  overflow: hidden; min-height: 300px;
}
.panelHeader {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background: rgba(67,97,238,.04);
}
.panelTitle { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color: var(--gold-2); }
.panelBody { padding:14px; }
.editorBody { display:flex; flex-direction:column; gap:10px; }

.instructionBox {
  background: var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; line-height:1.80; font-size:14px;
}
.hintsTop { margin-bottom:10px; }
.hintsBox { display:flex; flex-direction:column; gap:8px; }
.hintItem {
  background: var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 14px;
  line-height:1.72; font-size:13px;
  border-inline-end: 2px solid var(--gold);
}

.previewFrame { width:100%; height:380px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; }
.consoleBox, .codeBox {
  width:100%; border:1px solid var(--border); border-radius:var(--radius);
  background: rgba(0,0,0,.55);
  padding:14px; overflow:auto;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:12.5px; line-height:1.7; color:var(--text);
}
.consoleBox { min-height:380px; }
.codeBox    { min-height:220px; white-space:pre; }
.codeBoxTop { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }

/* ── Status ── */
.statusBox {
  border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface-2); padding:10px 14px;
  font-weight:600; font-size:13px;
}
.statusBox.ok  { border-color:rgba(34,197,94,.35); background:var(--ok-subtle); color:#86efac; }
.statusBox.bad { border-color:rgba(239,68,68,.35); background:var(--bad-subtle); color:#fca5a5; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; padding:9px 14px;
  border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface-2); color:var(--text);
  cursor:pointer; font-weight:600; font-size:13.5px;
  font-family:inherit; white-space:nowrap; letter-spacing:.2px;
  position:relative; overflow:hidden;
  transition: transform .16s var(--ease), border-color .25s, box-shadow .2s;
}

/* sweep effect */
.btn::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);
  transform:translateX(-150%); transition:transform .5s ease;
}
.btn:hover::after { transform:translateX(150%); }
.btn:hover  { transform:translateY(-1px); border-color:var(--border-2); box-shadow:0 6px 20px rgba(0,0,0,.35); }
.btn:active { transform:translateY(0) scale(.97); }
.btn.small  { padding:7px 11px; border-radius:var(--radius-sm); font-size:12.5px; }

/* Gold primary button */
.btn.primary {
  background: linear-gradient(135deg, var(--gold) 0%, #a07030 100%);
  border-color:transparent; color:#ffffff; font-weight:700;
  box-shadow: var(--shadow-gold);
}
.btn.primary:hover { box-shadow:0 8px 32px rgba(67,97,238,.45); }
.btn.primary::after { background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.15) 50%, transparent 65%); }

.btn.ghost  { background:transparent; }
.btn.full   { width:100%; }

.rowBtns { display:flex; flex-wrap:wrap; gap:8px; }
.tabs, .smallTabs { display:flex; gap:6px; flex-wrap:wrap; }
.tab {
  border:1px solid var(--border); background:var(--surface-2);
  color:var(--text-2); padding:7px 12px; border-radius:var(--radius-sm);
  font-weight:600; font-size:13px; font-family:inherit; cursor:pointer;
  letter-spacing:.2px;
  transition:background-color .2s, border-color .2s, color .2s;
}
.tab.active {
  background: rgba(67,97,238,.10);
  border-color: rgba(67,97,238,.35);
  color: var(--gold-2);
}

/* ── Modal ── */
.nameModal {
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
  z-index:9999; padding:20px;
}
.nameModal.show { display:grid; animation: modalFadeIn .35s var(--ease); }
@keyframes modalFadeIn { from { opacity:0; } to { opacity:1; } }

.nameCard {
  width:min(440px,100%); border-radius:var(--radius-xl); padding:34px;
  background: #0f0f0f;
  border:1px solid rgba(67,97,238,.22);
  box-shadow:var(--shadow-lg), 0 0 60px rgba(67,97,238,.06);
  color:var(--text); position:relative; overflow:hidden;
  animation: cardIn .4s var(--ease);
}
.nameCard::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--gold) 40%, var(--gold-2) 60%, transparent 100%);
}

.nameTitle {
  font-weight:700; font-size:22px; letter-spacing:.4px; margin-bottom:8px;
  text-transform:uppercase;
  background: linear-gradient(90deg, var(--text) 40%, var(--gold-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nameSub   { color:var(--muted); font-size:13.5px; line-height:1.65; margin-bottom:24px; }

.nameInput {
  width:100%; margin-top:10px; padding:13px 15px;
  border-radius:var(--radius); border:1px solid rgba(67,97,238,.14);
  outline:none; font-size:14px; font-family:inherit;
  background:rgba(255,255,255,.045); color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.nameInput:focus { border-color:rgba(67,97,238,.45); box-shadow:0 0 0 3px rgba(67,97,238,.12); }
.nameInput::placeholder { color:rgba(136,136,128,.50); }
.nameErr { margin-top:10px; color:#fca5a5; font-size:12px; font-weight:600; }
.nameActions { margin-top:20px; }

.btnPrimary {
  border:0; border-radius:var(--radius);
  padding:13px 22px; font-weight:700; font-size:15px;
  font-family:inherit; cursor:pointer; width:100%;
  letter-spacing:.3px; text-transform:uppercase;
  background:linear-gradient(135deg, var(--gold) 0%, #a07030 100%);
  color:#ffffff;
  box-shadow:var(--shadow-gold);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease);
  position:relative; overflow:hidden;
}
.btnPrimary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform:translateX(-150%); transition:transform .5s ease;
}
.btnPrimary:hover  { transform:translateY(-1px); box-shadow:0 8px 36px rgba(67,97,238,.45); }
.btnPrimary:hover::after { transform:translateX(150%); }
.btnPrimary:active { transform:scale(.97); }

/* ── Badges ── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700;
}
.badge.purple, .badge.amber {
  background:var(--gold-subtle); color:var(--gold-2);
  border:1px solid rgba(67,97,238,.18);
}
.badge.green { background:var(--ok-subtle); color:#86efac; border:1px solid rgba(34,197,94,.18); }
.badge.teal  { background:rgba(20,184,166,.10); color:#5eead4; border:1px solid rgba(94,234,212,.15); }

/* ── Chapter extras ── */
.ch-content {
  background:var(--surface-2); padding:22px;
  border-radius:var(--radius-lg); line-height:1.85;
  margin-bottom:22px; border:1px solid var(--border); font-size:15px;
}
video { max-width:100%; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); }
.video-container { text-align:center; margin-bottom:22px; }

.mark-done-btn {
  width:100%; padding:16px; font-size:15px; font-weight:700;
  font-family:inherit; border-radius:var(--radius); border:none; letter-spacing:.3px;
  background:var(--surface-3); color:var(--muted); cursor:not-allowed;
  transition:.3s var(--ease);
}
.mark-done-btn.ready {
  background:linear-gradient(135deg, var(--gold) 0%, #a07030 100%);
  color:#ffffff; cursor:pointer; font-weight:700; text-transform:uppercase;
  box-shadow:var(--shadow-gold); letter-spacing:.4px;
}
.mark-done-btn.ready:hover { transform:translateY(-1px); box-shadow:0 8px 32px rgba(67,97,238,.45); }

/* Fix brand.brandTitle text-align in new layout */
.topbarText .brandTitle { gap:2px; }

/* ── Responsive ── */
@media (max-width:980px) {
  .workspace { grid-template-columns:1fr; }
  .previewFrame,.consoleBox { min-height:260px; height:260px; }
  /* ── Logo dot (decorative accent) ── */
.logoDot {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  box-shadow: 0 4px 16px var(--gold-glow);
  display: grid; place-items: center;
}
.logoDot::after {
  content: "";
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(9,9,15,.88);
}

/* ── Brand title ── */
.brandTitle {
  font-weight: 700; font-size: 16px;
  letter-spacing: .3px; line-height: 1.2;
}

.brandSub { max-width:72vw; }
  body.bg::before { animation:none; }
}
@media (max-width:600px) {
  .topbar   { padding:11px 14px; border-radius:var(--radius-lg); margin-top:12px; }
  .card     { padding:18px; border-radius:var(--radius-lg); }
  .container{ margin-top:16px; gap:12px; }
  .levelsGrid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .nameCard { padding:22px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}