/* ═══════════════════════════════════════════════════════
   QUILLWRIGHT — RETRO SKIN
   New file, loads after quillwright.css and qw-os.css.
   Restyles the EDITOR CHROME only — every class here is
   presentation-only (colour, shape, border, shadow). Nothing
   in quillwright.js depends on how these classes look, only
   that they exist, so this carries none of the structural
   risk the window-manager work did.

   Explicitly NOT touched — this is the newspaper OUTPUT your
   users build, not editor chrome, and it must keep rendering
   exactly as today: .newspaper, .news-*, .mh-*, .art-*,
   .notice-*, .np-divider, .np-section-header, .qr-*,
   .stamp-overlay-item / .stamp-red|black|green|blue|gold|purple,
   .wax-seal-*, and every .newspaper.t-* theme rule. Those use
   a separate --np-* token family already, set per-theme by
   quillwright.js, untouched by anything below.
   ═══════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────
   TOKENS — same palette family as the OS shell (qw-os.css),
   defined globally so the dark-mode toggle reskins the whole
   app, not just the windows.
   ─────────────────────────────────────────────────────── */
:root{
  --w-face:#c0c0c0; --w-face-pressed:#bcbcbc; --w-face-2:#d8d8d8; --w-face-well:#a8a8a8;
  --w-light:#ffffff; --w-shadow:#808080; --w-dark-shadow:#000000; --w-light-inner:#dfdfdf;
  --w-text:#000000; --w-text-dim:#4a4a4a;
  --w-input-bg:#ffffff; --w-input-text:#000000;
  --w-title-active-1:#00008b; --w-title-active-2:#1084d0; --w-title-text:#ffffff;
  --w-title-inactive-1:#7f7f7f; --w-title-inactive-2:#a4a4a4; --w-title-inactive-text:#e2e2e2;
  --w-desktop-1:#0a7a7b; --w-desktop-2:#014647; --w-desktop-base:#04595a; --w-desktop-hatch:rgba(201,162,74,.05);
  --w-danger:#7a1f1f; --w-success:#1f5c2e; --w-warning:#8a5a1f; --w-info:#1f3f7a;
  --font-os:Tahoma,'Segoe UI',var(--font-ui-base);
}
:root.qw-dark{
  --w-face:#3a3a3a; --w-face-pressed:#2e2e2e; --w-face-2:#333333; --w-face-well:#242424;
  --w-light:#5c5c5c; --w-shadow:#1a1a1a; --w-dark-shadow:#000000; --w-light-inner:#4a4a4a;
  --w-text:#e8e4da; --w-text-dim:#a7a29a;
  --w-input-bg:#242424; --w-input-text:#e8e4da;
  --w-title-active-1:#151538; --w-title-active-2:#1f3f63; --w-title-text:#ffffff;
  --w-title-inactive-1:#333333; --w-title-inactive-2:#454545; --w-title-inactive-text:#a8a8a8;
  --w-desktop-1:#0a2426; --w-desktop-2:#010c0d; --w-desktop-base:#041313; --w-desktop-hatch:rgba(201,162,74,.06);
  --w-danger:#c4615f; --w-success:#5ea86e; --w-warning:#c99a4e; --w-info:#6fa8dc;
}

/* Remap the app's OWN tokens onto the retro system. Everything in
   quillwright.css and every inline style in index.html that reads
   var(--ui-*) picks this up automatically — no other file touched. */
:root{
  --font-ui-base:'Source Sans 3',system-ui,sans-serif; /* the original value, kept for fallback chains */
  --ui-bg:var(--w-face-well); --ui-bg2:var(--w-face); --ui-bg3:var(--w-face-2);
  --ui-border:var(--w-shadow); --ui-text:var(--w-text); --ui-dim:var(--w-text-dim);
  --ui-accent:var(--w-title-active-2); --ui-accent2:var(--w-title-active-1);
  --ui-danger:var(--w-danger); --ui-success:var(--w-success); --ui-warning:var(--w-warning);
  --ui-radius:2px; --ui-radius-sm:1px;
  --font-ui:var(--font-os);
}

.qw-bevel-out-lg{ box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner); }
.qw-bevel-in-lg{ box-shadow:inset 1px 1px 0 var(--w-dark-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-shadow), inset -2px -2px 0 var(--w-light-inner); }

/* ───────────────────────────────────────────────────────
   BASE
   ─────────────────────────────────────────────────────── */
body{ font-family:var(--font-os); }
::-webkit-scrollbar{ width:16px; height:16px; }
::-webkit-scrollbar-track{ background:var(--w-face); }
::-webkit-scrollbar-thumb{ background:var(--w-face); border-radius:0;
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner); }
::-webkit-scrollbar-thumb:hover{ background:var(--w-face-2); }
::-webkit-scrollbar-corner{ background:var(--w-face); }

/* ───────────────────────────────────────────────────────
   TOOLBAR & BUTTONS
   ─────────────────────────────────────────────────────── */
.toolbar{ background:var(--w-face); border-bottom:1px solid var(--w-dark-shadow);
  box-shadow:inset 0 1px 0 var(--w-light), inset 0 -1px 0 var(--w-shadow); }
.tab-group{ background:transparent; border:none; border-radius:0; gap:2px; }
.tab-btn{ color:var(--w-text); font-weight:700; border-radius:1px;
  background:var(--w-face); box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner); }
.tab-btn:hover{ color:var(--w-text); background:var(--w-face-2); }
.tab-btn.active{ color:var(--w-text); background:var(--w-face-pressed);
  box-shadow:inset 1px 1px 0 var(--w-dark-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-shadow), inset -2px -2px 0 var(--w-light-inner); }
.tab-btn.active::after{ display:none; }
.toolbar-sep{ background:var(--w-shadow); box-shadow:1px 0 0 var(--w-light); width:2px; }

.t-btn{ color:var(--w-text); font-weight:700; border-radius:1px; border:none; background:var(--w-face); padding:6px 14px; min-height:30px;
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner); }
.t-btn:hover{ color:var(--w-text); background:var(--w-face-2); }
.t-btn:active,.t-btn.active{ color:var(--w-text); background:var(--w-face-pressed);
  box-shadow:inset 1px 1px 0 var(--w-dark-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-shadow), inset -2px -2px 0 var(--w-light-inner); }
.t-btn.success{ color:var(--w-success); } .t-btn.success:hover{ background:var(--w-face-2); }
.t-btn.info{ color:var(--w-info); } .t-btn.info:hover{ background:var(--w-face-2); }
.t-btn.warn{ color:var(--w-warning); } .t-btn.warn:hover{ background:var(--w-face-2); }
.sound-btn{ border-radius:1px; }
.sound-btn:hover{ background:var(--w-face-2); }
.sound-btn .qw-icon-on{ display:none; }
.sound-btn.on .qw-icon-mute{ display:none; }
.sound-btn.on .qw-icon-on{ display:inline-block; }

.spacer{ flex:1 }
.zoom-controls input[type=range]{ accent-color:var(--w-title-active-2); }
.zoom-controls span{ font-family:'Share Tech Mono',monospace; }

/* ───────────────────────────────────────────────────────
   TOAST / EXPORT OVERLAY
   ─────────────────────────────────────────────────────── */
.toast{ border-radius:1px; color:var(--w-text); font-weight:700;
  background:var(--w-face) !important; box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner), 3px 3px 8px rgba(0,0,0,.3); }
.toast.success{ border-left:4px solid var(--w-success); }
.toast.info{ border-left:4px solid var(--w-info); }
.toast.warn{ border-left:4px solid var(--w-warning); }
.toast.error{ border-left:4px solid var(--w-danger); }

.export-overlay{ background:rgba(0,0,0,.55); backdrop-filter:none; }
.export-spinner{ border-radius:0; border:none; width:34px; height:34px;
  background:conic-gradient(var(--w-title-active-2) 0 90deg, var(--w-face) 90deg 360deg); }
.export-spinner::before{ content:''; position:absolute; inset:5px; background:var(--w-face); }
.export-overlay-text{ font-family:var(--font-os); font-weight:700; }

/* ───────────────────────────────────────────────────────
   PANELS & CARDS
   ─────────────────────────────────────────────────────── */
.main-wrap{ background:var(--w-face-well); }
.panel{ background:transparent; }

.ed-card{ background:var(--w-face); border:none; border-radius:1px;
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner); }
.ed-card:hover{ border-color:transparent; }
.ed-card.dragging{ opacity:.6; }
.ed-card.drag-over{ box-shadow:0 0 0 2px var(--w-title-active-2), inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light); }
.ed-card-icon{ border-radius:1px; background:var(--w-face-2); border:1px solid var(--w-shadow); }
.ed-card-label{ color:var(--w-text-dim); font-weight:700; }
.ed-card-type{ color:var(--w-title-active-2); }
.ed-card-actions button{ border-radius:1px; border:none; background:var(--w-face-2);
  box-shadow:inset -1px -1px 0 var(--w-shadow), inset 1px 1px 0 var(--w-light); }
.ed-card-actions button:hover{ background:var(--w-face); color:var(--w-title-active-2); }
.ed-card-actions .btn-remove:hover{ color:var(--w-danger); }
.ed-card-actions .btn-dup:hover{ color:var(--w-success); }

.ed-label{ color:var(--w-text-dim); font-weight:700; }
.ed-input,.ed-textarea,.ed-select{ background:var(--w-input-bg); color:var(--w-input-text); border:none; border-radius:0;
  box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-dark-shadow), inset -2px -2px 0 var(--w-light-inner); }
.ed-input:focus,.ed-textarea:focus,.ed-select:focus{ box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-dark-shadow), inset -2px -2px 0 var(--w-light-inner), 0 0 0 2px var(--w-title-active-2); }
.ed-toggle{ border:none; border-radius:1px; background:var(--w-face);
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner); }
.ed-toggle.on{ background:var(--w-face-pressed); color:var(--w-text);
  box-shadow:inset 1px 1px 0 var(--w-dark-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-shadow), inset -2px -2px 0 var(--w-light-inner); }
.toggle-dot{ border-radius:1px; background:var(--w-input-bg); box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light); }
.toggle-dot::after{ border-radius:0; background:var(--w-text-dim); }
.ed-toggle.on .toggle-dot::after{ background:var(--w-title-active-2); }
.ed-file-btn{ border-radius:1px; border:1px dashed var(--w-shadow); background:var(--w-input-bg); color:var(--w-text-dim); }
.ed-file-btn:hover{ border-color:var(--w-title-active-2); color:var(--w-title-active-2); }
.ed-thumb{ border-radius:0; border:1px solid var(--w-shadow); }

.add-btn{ border-radius:1px; border:1px dashed var(--w-shadow); color:var(--w-text-dim); background:var(--w-face-2); }
.add-btn:hover{ border-color:var(--w-title-active-2); color:var(--w-title-active-2); background:var(--w-face); transform:none; border-style:dashed; }
.add-section-title{ color:var(--w-text-dim); font-weight:700; }

/* ───────────────────────────────────────────────────────
   DESIGN PANEL
   ─────────────────────────────────────────────────────── */
.design-section{ background:var(--w-face); border:none; border-radius:1px;
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner); }
.design-section-header:hover{ background:var(--w-face-2); }
.design-section-header h3{ color:var(--w-text); }
.design-section-body{ background:var(--w-face-2); }

.theme-card{ border-radius:1px; border:none; background:var(--w-face-2);
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner); }
.theme-card:hover{ transform:none; background:var(--w-face); }
.theme-card.selected{ box-shadow:inset 1px 1px 0 var(--w-dark-shadow), inset -1px -1px 0 var(--w-light), 0 0 0 2px var(--w-title-active-2); }
.theme-card .tc-name{ color:var(--w-text); }
.theme-card .tc-desc{ color:var(--w-text-dim); }
/* swatches keep their real theme colours — only the circle frame gets restyled */
.theme-card .swatch span{ border-radius:0; border:1px solid var(--w-dark-shadow); }

.color-row label,.font-select-wrap label,.settings-row label{ color:var(--w-text-dim); font-weight:700; }
.color-input-wrap input[type=color]{ border-radius:0; border:none; background:var(--w-face);
  box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light); }
.color-input-wrap input[type=text]{ border-radius:0; border:none; background:var(--w-input-bg); color:var(--w-input-text);
  box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-dark-shadow); }
.font-select-wrap select{ border-radius:0; border:none; background:var(--w-input-bg); color:var(--w-input-text);
  box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-dark-shadow); }

.bg-option{ border-radius:1px; border:none; box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow); }
.bg-option:hover{ transform:none; }
.bg-option.selected{ box-shadow:inset 1px 1px 0 var(--w-dark-shadow), inset -1px -1px 0 var(--w-light), 0 0 0 2px var(--w-title-active-2); }

/* ───────────────────────────────────────────────────────
   MODALS
   ─────────────────────────────────────────────────────── */
.modal-overlay{ background:rgba(0,0,0,.45); }
.modal{ background:var(--w-face); border:1px solid var(--w-dark-shadow); border-radius:2px; animation:none;
  box-shadow:2px 2px 0 rgba(0,0,0,.4), inset 0 1px 0 var(--w-light); }
.modal h2{ font-size:14px; font-weight:700; margin:-28px -28px 16px; padding:6px 8px 6px 12px;
  background:linear-gradient(90deg,var(--w-title-active-1),var(--w-title-active-2)); color:var(--w-title-text); }
.modal .close-modal{ color:var(--w-title-text); border-radius:0; background:var(--w-face);
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light); width:20px; height:18px; padding:0; font-size:12px; }
.modal .close-modal:hover{ background:var(--w-face-2); color:var(--w-text); }
.shortcut-row{ border-bottom:1px solid var(--w-shadow); color:var(--w-text); }
.shortcut-key kbd{ background:var(--w-face-2); border:none; border-radius:1px; color:var(--w-text);
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light); }

/* ───────────────────────────────────────────────────────
   AUTH / ACCOUNT / UPGRADE
   ─────────────────────────────────────────────────────── */
.auth-tabs{ border-radius:0; border:none; background:var(--w-face-well); padding:2px; gap:2px; }
.auth-tab{ border-radius:1px; background:var(--w-face); color:var(--w-text-dim); font-weight:700; }
.auth-tab.active{ color:var(--w-text); background:var(--w-face-pressed);
  box-shadow:inset 1px 1px 0 var(--w-dark-shadow), inset -1px -1px 0 var(--w-light); }
.auth-submit{ background:var(--w-title-active-2); color:#fff; border-radius:1px;
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 rgba(255,255,255,.4); }
.auth-link-btn{ background:transparent; box-shadow:none; color:var(--w-title-active-2); }
.auth-msg{ border-radius:1px; }
.auth-msg-error{ color:#fff; background:var(--w-danger); border:none; }
.auth-msg-success{ color:#fff; background:var(--w-success); border:none; }

.account-avatar-circle{ display:flex; align-items:center; justify-content:center; }
.account-avatar-circle .qw-icon{ width:34px; height:34px; color:var(--w-text-dim); }
.account-email-text{ color:var(--w-text); }
.qw-wax-dot{ display:inline-block; width:16px; height:16px; border-radius:50%; box-shadow:inset -2px -2px 3px rgba(0,0,0,.35), inset 1px 1px 2px rgba(255,255,255,.3); }
.plan-badge{ border-radius:1px; }
.plan-badge-free{ background:var(--w-face-2); color:var(--w-text-dim); border:1px solid var(--w-shadow); }
.plan-badge-pro{ background:var(--w-title-active-2); color:#fff; box-shadow:none; }
.plan-badge-lifetime{ background:var(--w-warning); color:#fff; box-shadow:none; }
.pro-badge-inline{ border-radius:1px; background:var(--w-title-active-2); }

.upgrade-feature{ background:var(--w-face-2); border-radius:1px; border:none;
  box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light); color:var(--w-text); }
.upgrade-plan{ border-radius:1px; border:none; background:var(--w-face-2);
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow); }
.upgrade-plan:hover{ transform:none; box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), 0 0 0 2px var(--w-title-active-2); }
.upgrade-plan-featured{ background:var(--w-face); box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), 0 0 0 2px var(--w-title-active-2); }
.upgrade-plan-badge{ border-radius:1px; background:var(--w-title-active-2); }
.upgrade-plan-name{ color:var(--w-text-dim); }
.upgrade-plan-price{ color:var(--w-title-active-2); }

/* ───────────────────────────────────────────────────────
   PRO-GATE / LOCKED STATES
   ─────────────────────────────────────────────────────── */
.pro-lock-badge{ border-radius:1px; background:var(--w-title-active-2); backdrop-filter:none; }
.pro-gate-overlay{ background:rgba(0,0,0,.75); border-radius:1px; backdrop-filter:none; }
.pro-gate-title{ color:var(--w-title-text); }
.pro-gate-btn{ border-radius:1px; border:none; background:var(--w-title-active-2);
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 rgba(255,255,255,.4); }
.pro-section-tag{ border-radius:1px; background:var(--w-title-active-2); }
.article-limit-warning{ background:var(--w-face-2); border:1px solid var(--w-warning); border-radius:1px; color:var(--w-warning); }
.article-limit-warning button{ border-radius:1px; border:1px solid var(--w-warning); }
.pro-custom-bg-lock{ background:var(--w-face-2); border:1px dashed var(--w-shadow); border-radius:1px; }
.pro-custom-bg-lock:hover{ border-color:var(--w-title-active-2); color:var(--w-title-active-2); }

/* ───────────────────────────────────────────────────────
   CREST DESIGNER
   ─────────────────────────────────────────────────────── */
.crest-preview{ background:var(--w-input-bg); border:none; border-radius:0;
  box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-dark-shadow); }
.crest-sym{ border:none; border-radius:1px; background:var(--w-face);
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light); }
.crest-sym:hover{ background:var(--w-face-2); }
.crest-sym.selected{ background:var(--w-face-pressed);
  box-shadow:inset 1px 1px 0 var(--w-dark-shadow), inset -1px -1px 0 var(--w-light), 0 0 0 2px var(--w-title-active-2); }

/* ───────────────────────────────────────────────────────
   FONT PICKER
   ─────────────────────────────────────────────────────── */
.font-picker{ border:none; border-radius:1px; box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-dark-shadow); }
.font-search-input{ border-bottom:1px solid var(--w-shadow); }
.font-category-tabs{ border-bottom:1px solid var(--w-shadow); background:var(--w-face-2); }
.font-category-tabs button{ color:var(--w-text-dim); }
.font-category-tabs button.active,.font-category-tabs button:hover{ color:var(--w-title-active-2); background:var(--w-face); }
.font-list{ background:var(--w-input-bg); }
.font-list-item{ color:var(--w-input-text); }
.font-list-item:hover{ background:var(--w-face-2); }
.font-list-item.selected{ background:var(--w-title-active-2); color:#fff; }
.font-preview-large{ color:var(--w-text); }

/* ───────────────────────────────────────────────────────
   WEATHERING
   ─────────────────────────────────────────────────────── */
.weather-row label{ color:var(--w-text-dim); font-weight:700; }
.weather-row input[type=range]{ accent-color:var(--w-title-active-2); }
.weather-val{ font-family:'Share Tech Mono',monospace; }

/* ───────────────────────────────────────────────────────
   STAMP PALETTE (chrome only — the coloured stamp buttons
   keep their meaningful red/black/green/blue/gold/purple,
   which are the same colours the stamp will render in)
   ─────────────────────────────────────────────────────── */
.stamp-palette{ background:var(--w-face); border-bottom:1px solid var(--w-shadow); }
.stamp-pick-btn{ border-radius:1px; background:var(--w-input-bg); }
.stamp-pick-btn:hover{ transform:none; opacity:1; filter:brightness(1.15); }

/* ───────────────────────────────────────────────────────
   MASTHEAD PRESETS
   ─────────────────────────────────────────────────────── */
.masthead-presets{ background:var(--w-face); border:none; border-radius:1px;
  box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow); }
.masthead-presets-title{ color:var(--w-text-dim); font-weight:700; }
.masthead-preset-item{ border-bottom:1px solid var(--w-shadow); }
.preset-name{ color:var(--w-text); }

/* ───────────────────────────────────────────────────────
   ACCOUNT WINDOW — the modal's own header is redundant once
   it's living inside real window chrome with its own title bar
   and close button, so it's hidden rather than showing two X's.
   ─────────────────────────────────────────────────────── */
.qw-window .modal h2{ display:none; }

/* ───────────────────────────────────────────────────────
   RETRO BRAND MARK (toolbar wordmark)
   ─────────────────────────────────────────────────────── */
.qw-toolbar-brand{ display:flex; align-items:center; gap:8px; margin-right:10px; user-select:none; }
.qw-toolbar-brand .qw-brand-seal{ width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, #e6b0ac, #7a1f1f 55%, #5e1414);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; }
.qw-toolbar-brand .qw-brand-seal::before{ content:'Q'; font-family:Georgia,serif; font-style:italic; font-weight:700; font-size:12px; color:#f3e6d8; line-height:1; }
.qw-toolbar-brand .qw-brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.qw-toolbar-brand .qw-brand-name{ font-family:var(--font-os); font-size:14px; font-weight:700; letter-spacing:.5px; color:var(--w-text); }
.qw-toolbar-brand .qw-brand-sub{ font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--w-text-dim); letter-spacing:1.5px; text-transform:uppercase; }

/* ───────────────────────────────────────────────────────
   ICONS (replacing emoji throughout the editor chrome)
   ─────────────────────────────────────────────────────── */
.qw-icon{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-2px; flex-shrink:0; }
.modal h2 .qw-icon{ width:16px; height:16px; vertical-align:-3px; margin-right:2px; }
.ed-card-icon .qw-icon{ width:18px; height:18px; }
.add-icon .qw-icon{ width:15px; height:15px; }
.account-avatar-circle .qw-icon{ width:34px; height:34px; }

/* ───────────────────────────────────────────────────────
   HARDENED DARK-MODE TEXT COLOUR — belt-and-suspenders.
   These elements already inherit colour dynamically via
   var(--w-text)/var(--ui-*), but interactive controls (button,
   select) get an explicit dark-mode override too, since some
   engines cache a resolved colour on form controls and don't
   always re-resolve var() through several inherited layers.
   Harmless if redundant; guarantees correctness either way.
   ─────────────────────────────────────────────────────── */
:root.qw-dark .tab-btn,
:root.qw-dark .t-btn,
:root.qw-dark .sound-btn,
:root.qw-dark .auth-tab,
:root.qw-dark .font-category-tabs button,
:root.qw-dark .qw-winbtn,
:root.qw-dark .close-modal,
:root.qw-dark .ed-toggle,
:root.qw-dark .add-btn,
:root.qw-dark .font-list-item{
  color:#e8e4da;
}
:root.qw-dark .t-btn.success{ color:#5ea86e; }
:root.qw-dark .t-btn.info{ color:#6fa8dc; }
:root.qw-dark .t-btn.warn{ color:#c99a4e; }
:root.qw-dark .ed-input,
:root.qw-dark .ed-textarea,
:root.qw-dark .ed-select,
:root.qw-dark .color-input-wrap input[type=text],
:root.qw-dark .font-select-wrap select,
:root.qw-dark .font-list{
  color:#e8e4da;
}

@media (prefers-reduced-motion:reduce){
  .theme-card,.upgrade-plan,.bg-option{ transition:none !important }
}