/* ==========================================
   Skins — visual look overrides (DUS-105)

   Each skin bundles typography, borders, radii, shadows, casing, blur,
   AND a coordinated color palette. The palette shift is necessary
   because the mockups explicitly show cream/ivory backgrounds for
   editorial/paper; a "skin without colors" ends up dark and identical
   to terminal. The accent color still comes from the active theme so
   amber/synthwave/dracula compose visibly on top.

   Loads AFTER components.css so the overrides beat components' shorthand
   `border: 1px dashed X` rules (which would otherwise re-set border-style).

   Spec: docs/plans/2026-08-06-skins.md
   ========================================== */

/* ─── Editorial — Neo-Swiss ─── */
body[data-skin="editorial"] {
  /* Type + surfaces */
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:         'Fraunces', Georgia, 'Times New Roman', serif;
  --font-weight-body:     400;
  --font-weight-display:  500;
  --radius:               0;
  --border-style:         solid;
  --border-width:         1px;
  --shadow-panel:         none;
  --shadow-tile:          none;
  --case-headings:        none;
  --tracking-headings:    -0.01em;
  --panel-blur:           0px;
  --body-backdrop:        none;

  /* Color palette — ivory paper on ink black */
  --bg-deep:              #fafaf7;
  --bg-panel:             #ffffff;
  --bg-surface:           #ffffff;
  --bg-raised:            #f4f2ea;
  --bg-hot:               rgba(212, 169, 58, 0.10);
  --fg:                   #2a2a2a;
  --fg-dim:               #6b6b6b;
  --fg-bright:            #111111;
  --fg-max:               #000000;
  --line-dim:             #e0dcd2;
  --line:                 #cfcabd;
  --line-bright:          #1a1a1a;
  color-scheme: light;
}

/* ─── Paper — Notion-esque ─── */
body[data-skin="paper"] {
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-body:     400;
  --font-weight-display:  600;
  --radius:               10px;
  --border-style:         solid;
  --border-width:         1px;
  --shadow-panel:         0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-tile:          0 1px 2px rgba(0, 0, 0, 0.05);
  --case-headings:        none;
  --tracking-headings:    -0.005em;
  --panel-blur:           0px;
  --body-backdrop:        none;

  --bg-deep:              #faf7f0;
  --bg-panel:             #fffcf5;
  --bg-surface:           #fffcf5;
  --bg-raised:            #f2ede0;
  --bg-hot:               rgba(212, 169, 58, 0.12);
  --fg:                   #37352f;
  --fg-dim:               #91918c;
  --fg-bright:            #191817;
  --fg-max:               #000000;
  --line-dim:             #ebe6d9;
  --line:                 #d8d3c3;
  --line-bright:          #b7b0a0;
  color-scheme: light;
}

/* ─── Glass — macOS-flavored translucent ─── */
body[data-skin="glass"] {
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-body:     400;
  --font-weight-display:  600;
  --radius:               16px;
  --border-style:         solid;
  --border-width:         1px;
  --shadow-panel:         0 20px 60px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-tile:          0 6px 24px rgba(0, 0, 0, 0.35);
  --case-headings:        none;
  --tracking-headings:    -0.01em;
  --panel-blur:           40px;

  /* Dark-tinted frost surfaces. Second readability pass (DUS-follow-up to
     DUS-105): the earlier ≥0.55 floor still let the amber gradient bleed
     through text-bearing surfaces in the top-left hot zone, and chips
     nested inside cards inherited the same fill so they dissolved into
     the card. New floors:
       - --bg-panel  ≥0.78  (text-holding cards)
       - --bg-surface ≥0.82 (tiles / list rows on cards)
       - --bg-raised  ≥0.88 (pressed / hover)
     Backdrop gradient opacities are dropped in parallel so the "over
     vibrant backdrop" character survives while the composite text
     background stays flat enough to hit 4.5:1 across the viewport.
     Modals / drawer get an even harder floor further down (≥0.96)
     because dialog copy must fully block. */
  --bg-deep:              #060418;
  --bg-panel:             rgba(22, 18, 48, 0.78);
  --bg-surface:           rgba(30, 25, 62, 0.82);
  --bg-raised:            rgba(42, 35, 80, 0.88);
  --bg-hot:               rgba(167, 139, 250, 0.28);
  --fg:                   rgba(245, 245, 247, 0.95);
  --fg-dim:               rgba(245, 245, 247, 0.82);
  --fg-bright:            #f5f5f7;
  --fg-max:               #ffffff;
  --line-dim:             rgba(255, 255, 255, 0.10);
  --line:                 rgba(255, 255, 255, 0.14);
  --line-bright:          rgba(255, 255, 255, 0.30);
  /* Violet accent — pairs with the deep navy backdrop far better than
     the terminal amber. Overrides the theme's --amber tokens only for
     this skin so any theme (amber / synthwave / dracula) still composes. */
  --amber:                #a78bfa;
  --amber-bright:         #c4b5fd;
  /* Three-tone backdrop — amber warmth top-left, magenta pull bottom-right,
     cyan glow center-right for depth. Opacities tuned down alongside the
     panel-alpha bump so panels sitting on the hot zone don't shift color. */
  --body-backdrop:
    radial-gradient(1400px 900px at 10% -10%, rgba(255, 180, 90, 0.18), transparent 55%),
    radial-gradient(1100px 700px at 95% 105%, rgba(200, 100, 220, 0.14), transparent 55%),
    radial-gradient(900px 700px at 100% 50%, rgba(80, 180, 255, 0.08), transparent 60%);
}

/* ─── Broad component overrides ─── */
/* Scanlines belong to terminal only. */
body[data-skin]:not([data-skin="terminal"]).scanlines::before {
  display: none;
}

/* Dashed borders in components.css now use `var(--border-style)` in their
   shorthand so they respond to skin swaps without needing a universal
   override — which was setting `border-style: solid` on every span,
   giving the browser's default `medium` (~3px) width where none was set
   and painting phantom boxes around clock digits, badges, etc. */

/* Reset uppercase small-caps hierarchy on non-terminal skins across every
   class that hardcodes it in components.css. Broad list intentionally so
   we don't have to touch each rule. */
body[data-skin]:not([data-skin="terminal"]) .section-h,
body[data-skin]:not([data-skin="terminal"]) .card-title,
body[data-skin]:not([data-skin="terminal"]) .card-hint,
body[data-skin]:not([data-skin="terminal"]) .panel-head,
body[data-skin]:not([data-skin="terminal"]) .panel-title,
body[data-skin]:not([data-skin="terminal"]) .chat-head-title,
body[data-skin]:not([data-skin="terminal"]) .kbd-hint,
body[data-skin]:not([data-skin="terminal"]) .chip,
body[data-skin]:not([data-skin="terminal"]) .chip .chip-key,
body[data-skin]:not([data-skin="terminal"]) .form-hint,
body[data-skin]:not([data-skin="terminal"]) .notes-detail-badge,
body[data-skin]:not([data-skin="terminal"]) .notes-list-badge,
body[data-skin]:not([data-skin="terminal"]) .notes-edit-label,
body[data-skin]:not([data-skin="terminal"]) .notes-detail-source,
body[data-skin]:not([data-skin="terminal"]) .notes-list-group-head,
body[data-skin]:not([data-skin="terminal"]) .today-head,
body[data-skin]:not([data-skin="terminal"]) .settings-toc-heading,
body[data-skin]:not([data-skin="terminal"]) .chat-foot-status,
body[data-skin]:not([data-skin="terminal"]) label {
  text-transform: var(--case-headings);
  letter-spacing: var(--tracking-headings);
}

/* Headings themselves take the display font on non-terminal skins. */
body[data-skin]:not([data-skin="terminal"]) h1,
body[data-skin]:not([data-skin="terminal"]) h2,
body[data-skin]:not([data-skin="terminal"]) h3,
body[data-skin]:not([data-skin="terminal"]) .card-title,
body[data-skin]:not([data-skin="terminal"]) .section-h,
body[data-skin]:not([data-skin="terminal"]) .panel-head,
body[data-skin]:not([data-skin="terminal"]) .chat-head-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
}

/* Rounded corners on the common surfaces. */
body[data-skin]:not([data-skin="terminal"]) .card,
body[data-skin]:not([data-skin="terminal"]) .settings-card,
body[data-skin]:not([data-skin="terminal"]) .panel,
body[data-skin]:not([data-skin="terminal"]) .tile,
body[data-skin]:not([data-skin="terminal"]) .shortcut-tile,
body[data-skin]:not([data-skin="terminal"]) .btn,
body[data-skin]:not([data-skin="terminal"]) .btn-mic,
body[data-skin]:not([data-skin="terminal"]) .chip,
body[data-skin]:not([data-skin="terminal"]) input,
body[data-skin]:not([data-skin="terminal"]) textarea,
body[data-skin]:not([data-skin="terminal"]) select,
body[data-skin]:not([data-skin="terminal"]) .chat-drawer,
body[data-skin]:not([data-skin="terminal"]) .chat-send,
body[data-skin]:not([data-skin="terminal"]) .chat-foot-btn,
body[data-skin]:not([data-skin="terminal"]) .chat-textarea,
body[data-skin]:not([data-skin="terminal"]) .chat-msg,
body[data-skin]:not([data-skin="terminal"]) .chat-msg-body,
body[data-skin]:not([data-skin="terminal"]) .chat-msg-action,
body[data-skin]:not([data-skin="terminal"]) .chat-model-combo-trigger,
body[data-skin]:not([data-skin="terminal"]) .chat-model-combo-popover,
body[data-skin]:not([data-skin="terminal"]) .chat-head-history-trigger,
body[data-skin]:not([data-skin="terminal"]) .chat-history-popover,
body[data-skin]:not([data-skin="terminal"]) .chat-codeblock,
body[data-skin]:not([data-skin="terminal"]) .modal-panel,
body[data-skin]:not([data-skin="terminal"]) .modal-card,
body[data-skin]:not([data-skin="terminal"]) .smart-bar,
body[data-skin]:not([data-skin="terminal"]) .today-item,
body[data-skin]:not([data-skin="terminal"]) .today-add-input,
body[data-skin]:not([data-skin="terminal"]) .notes-list-item,
body[data-skin]:not([data-skin="terminal"]) .notes-preset-btn,
body[data-skin]:not([data-skin="terminal"]) .notes-detail-badge,
body[data-skin]:not([data-skin="terminal"]) .notes-list-badge,
body[data-skin]:not([data-skin="terminal"]) .notes-detail-tag,
body[data-skin]:not([data-skin="terminal"]) .notes-list-tag,
body[data-skin]:not([data-skin="terminal"]) .notes-sort-toggle,
body[data-skin]:not([data-skin="terminal"]) .notes-toc,
body[data-skin]:not([data-skin="terminal"]) .toast {
  border-radius: var(--radius);
}

/* Badges + pills stay small radius / pill-shaped so they don't compete
   with the surface radius. */
body[data-skin]:not([data-skin="terminal"]) .notes-detail-badge,
body[data-skin]:not([data-skin="terminal"]) .notes-list-badge,
body[data-skin]:not([data-skin="terminal"]) .notes-detail-tag,
body[data-skin]:not([data-skin="terminal"]) .notes-list-tag,
body[data-skin]:not([data-skin="terminal"]) .notes-preset-btn {
  border-radius: 999px;
}

/* Panels + tiles get the skin's shadow */
body[data-skin]:not([data-skin="terminal"]) .card,
body[data-skin]:not([data-skin="terminal"]) .settings-card,
body[data-skin]:not([data-skin="terminal"]) .panel,
body[data-skin]:not([data-skin="terminal"]) .smart-bar,
body[data-skin]:not([data-skin="terminal"]) .chat-drawer,
body[data-skin]:not([data-skin="terminal"]) .modal-panel,
body[data-skin]:not([data-skin="terminal"]) .modal-card {
  box-shadow: var(--shadow-panel);
}
body[data-skin]:not([data-skin="terminal"]) .tile,
body[data-skin]:not([data-skin="terminal"]) .shortcut-tile {
  box-shadow: var(--shadow-tile);
}

/* ─── Kill inner-nesting borders on non-terminal skins ─── */
/* The terminal look uses 2-3px dashed borders around icon wrappers, badges,
   dot indicators, and inline chip decorations. Those read as "boxes inside
   boxes" once the outer container is solid + rounded, so the whole surface
   looks blocky. Strip them for non-terminal skins. */
body[data-skin]:not([data-skin="terminal"]) .tile-icon,
body[data-skin]:not([data-skin="terminal"]) .shortcut-icon,
body[data-skin]:not([data-skin="terminal"]) .chip-key,
body[data-skin]:not([data-skin="terminal"]) .tile-pin-dot,
body[data-skin]:not([data-skin="terminal"]) .hero-clock-digit,
body[data-skin]:not([data-skin="terminal"]) .kbd {
  border: none !important;
  background: transparent !important;
}

/* Section headings on non-terminal skins should read as titles, not
   full-width dividers. Kill any bottom border + reduce weight. */
body[data-skin]:not([data-skin="terminal"]) .section-h,
body[data-skin]:not([data-skin="terminal"]) .section-head,
body[data-skin]:not([data-skin="terminal"]) .card-head,
body[data-skin]:not([data-skin="terminal"]) .today-head,
body[data-skin]:not([data-skin="terminal"]) .panel-head,
body[data-skin]:not([data-skin="terminal"]) .chat-head {
  border-bottom-color: transparent;
}

/* Give tiles + panels breathing room on paper/glass so they don't cluster
   into a wall. Slightly larger inner padding + gaps. */
body[data-skin="paper"] .shortcut-grid,
body[data-skin="glass"] .shortcut-grid,
body[data-skin="editorial"] .shortcut-grid {
  gap: var(--sp-8);
}
body[data-skin="paper"] .shortcut-tile,
body[data-skin="glass"] .shortcut-tile,
body[data-skin="editorial"] .shortcut-tile {
  padding: var(--sp-6) var(--sp-8);
}
body[data-skin="paper"] .card,
body[data-skin="paper"] .panel,
body[data-skin="glass"] .card,
body[data-skin="glass"] .panel,
body[data-skin="editorial"] .card,
body[data-skin="editorial"] .panel {
  padding: var(--sp-8) var(--sp-10);
}

/* Softer main border on tiles once icons lose theirs — a hairline reads
   modern where the terminal dashed felt utilitarian. */
body[data-skin]:not([data-skin="terminal"]) .shortcut-tile {
  border-color: var(--line-dim);
}
body[data-skin]:not([data-skin="terminal"]) .shortcut-tile:hover {
  border-color: var(--amber);
  transform: translateY(-1px);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

/* ─── Glass-only surface treatments ─── */
/* Frosted glass on every real surface. Backdrop-filter needs a
   non-opaque background to have anything to blur — the color-palette
   rgba values above supply that. */
body[data-skin="glass"] .card,
body[data-skin="glass"] .settings-card,
body[data-skin="glass"] .panel,
body[data-skin="glass"] .smart-bar,
body[data-skin="glass"] .chip,
body[data-skin="glass"] .chat-drawer,
body[data-skin="glass"] .modal-panel,
body[data-skin="glass"] .modal-card,
body[data-skin="glass"] .shortcut-tile,
body[data-skin="glass"] .today-item,
body[data-skin="glass"] .notes-list-item,
body[data-skin="glass"] .toast {
  backdrop-filter: blur(var(--panel-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(180%);
  background-color: var(--bg-panel);
}

/* Tiles sit ON cards — use the raised tint so the tile/card delta reads
   through the frost (audit: 1% alpha delta was invisible). */
body[data-skin="glass"] .shortcut-tile,
body[data-skin="glass"] .today-item,
body[data-skin="glass"] .notes-list-item {
  background-color: var(--bg-surface);
}

/* Hero date floats on the raw gradient with no panel behind it — a text
   shadow anchors it without introducing a surface. */
body[data-skin="glass"] .hero-date {
  color: var(--fg);
  text-shadow: 0 1px 8px rgba(6, 4, 24, 0.8);
}

/* Inputs live inside cards inside the gradient — triple-stacked
   translucency washed their boundaries out in the amber zone. Give them
   a fixed opaque-enough fill so they read at any position. */
body[data-skin="glass"] input,
body[data-skin="glass"] textarea,
body[data-skin="glass"] select {
  background-color: rgba(10, 7, 28, 0.60);
}

/* Glow-on-hover for shortcut tiles — signature macOS-y interaction. */
body[data-skin="glass"] .shortcut-tile {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
body[data-skin="glass"] .shortcut-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 24px rgba(212, 169, 58, 0.25);
}

/* Header chips → macOS control-strip pills. `.chip--icon` variants stay
   square so the SVG has room; only text chips get the pill treatment. */
body[data-skin="glass"] .chip:not(.chip--icon) {
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body[data-skin="glass"] .chip--icon {
  padding: 6px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body[data-skin="glass"] .chip--icon svg {
  width: 16px;
  height: 16px;
}

/* Slight inner highlight so surfaces read as translucent panes, not
   solid rectangles. Applied to the primary surface classes. */
body[data-skin="glass"] .card,
body[data-skin="glass"] .settings-card,
body[data-skin="glass"] .panel {
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Smart-bar's dropdown (`.smart-results`) is a descendant, so it's
   trapped inside the smart-bar's stacking context — created by the
   backdrop-filter that gives glass its frost. Sibling panels below
   (today, recent notes) also create stacking contexts, and paint on
   top by document order, hiding the dropdown. Bumping the smart-bar's
   own z-index puts its whole context above its siblings. Same fix for
   the chat drawer / model combo popover so nothing else disappears
   under glass panels. */
body[data-skin="glass"] .smart-bar {
  position: relative;
  z-index: 40;
}
body[data-skin="glass"] .chat-drawer {
  z-index: 810; /* preserve existing drawer stacking */
}

/* The results dropdown inherits --bg-panel which is barely-there
   translucent under glass — fine for a whole panel, unreadable for
   dense small text like search results. Give the dropdown its own
   opaque-enough surface + heavier blur so text has real contrast. */
body[data-skin="glass"] .smart-results {
  background: rgba(16, 12, 34, 0.96);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
body[data-skin="glass"] .chat-model-combo-popover,
body[data-skin="glass"] .chat-history-popover,
body[data-skin="glass"] .notes-slash-popover {
  background: rgba(16, 12, 34, 0.96);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Modals + chat drawer must fully block whatever's behind them — dialog
   copy (delete confirmations, error states, unsaved-changes prompts) can't
   share attention with the backdrop gradient. Same near-opaque fill as
   the popovers so the treatment reads as one system. */
body[data-skin="glass"] .modal-panel,
body[data-skin="glass"] .modal-card,
body[data-skin="glass"] .chat-drawer {
  background: rgba(16, 12, 34, 0.96);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* Chips nested inside cards inherited --bg-panel so they dissolved into
   the (now more opaque) card surface. Dark-on-dark reads as a macOS
   control-strip pill and gives visible separation on any panel color. */
body[data-skin="glass"] .card .chip,
body[data-skin="glass"] .panel .chip,
body[data-skin="glass"] .settings-card .chip {
  background: rgba(0, 0, 0, 0.32);
  color: var(--fg-bright);
}

/* ─── Skin picker (Settings → Appearance → Style) ─── */
.skin-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.skin-thumb {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: border-color 120ms, transform 120ms;
}
.skin-thumb:hover { border-color: var(--fg-dim); }
.skin-thumb.is-selected {
  border-color: var(--amber);
  outline: 1px solid var(--amber);
  outline-offset: -2px;
}
.skin-thumb-label {
  font-size: var(--text-sm);
  color: var(--fg-bright);
  font-weight: 500;
}
.skin-thumb-hint {
  font-size: var(--text-xs);
  color: var(--fg-dim);
}

/* Preview: a tiny homepage rendered per-skin so the thumbnail matches
   what the user will get. Uses hard-coded colors (not the current theme)
   so the previews always look the same regardless of active theme. */
.skin-thumb-preview {
  display: grid;
  grid-template-rows: 12px 14px 1fr;
  gap: 4px;
  padding: 6px;
  height: 96px;
  overflow: hidden;
}
.stp-top { display: flex; align-items: center; gap: 4px; }
.stp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d4a93a;
}
.stp-crumbs { flex: 1; height: 4px; background: rgba(199, 184, 154, 0.25); }
.stp-bar { height: 100%; background: rgba(199, 184, 154, 0.10); }
.stp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.stp-tile { background: rgba(199, 184, 154, 0.15); }

.skin-thumb-preview[data-skin="terminal"] {
  background: #0f0f0c;
  border: 1px dashed rgba(199, 184, 154, 0.30);
}
.skin-thumb-preview[data-skin="terminal"] .stp-bar,
.skin-thumb-preview[data-skin="terminal"] .stp-tile {
  border: 1px dashed rgba(199, 184, 154, 0.25);
  background: transparent;
}

.skin-thumb-preview[data-skin="editorial"] {
  background: #fafaf7;
  border: 1px solid #1a1a1a;
}
.skin-thumb-preview[data-skin="editorial"] .stp-dot { background: #b71c1c; }
.skin-thumb-preview[data-skin="editorial"] .stp-crumbs { background: #d8d8d3; }
.skin-thumb-preview[data-skin="editorial"] .stp-bar {
  background: transparent;
  border-bottom: 1px solid #1a1a1a;
}
.skin-thumb-preview[data-skin="editorial"] .stp-tile {
  background: #fff;
  border: 1px solid #d8d8d3;
}

.skin-thumb-preview[data-skin="paper"] {
  background: #faf7f0;
  border-radius: 10px;
  padding: 8px;
}
.skin-thumb-preview[data-skin="paper"] .stp-dot { background: #8fb572; }
.skin-thumb-preview[data-skin="paper"] .stp-crumbs { background: #ebe6d9; border-radius: 3px; }
.skin-thumb-preview[data-skin="paper"] .stp-bar {
  background: #fffcf5; border: 1px solid #ebe6d9; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.skin-thumb-preview[data-skin="paper"] .stp-tile {
  background: #fffcf5; border: 1px solid #ebe6d9; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.skin-thumb-preview[data-skin="glass"] {
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(255,200,100,0.30), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(200,100,200,0.25), transparent 60%),
    linear-gradient(180deg, #0b0918, #1a0c2e);
  border-radius: 8px;
  padding: 8px;
}
.skin-thumb-preview[data-skin="glass"] .stp-dot {
  background: #7cd8ff; box-shadow: 0 0 6px #7cd8ff;
}
.skin-thumb-preview[data-skin="glass"] .stp-crumbs {
  background: rgba(255,255,255,0.10); border-radius: 3px;
}
.skin-thumb-preview[data-skin="glass"] .stp-bar {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
}
.skin-thumb-preview[data-skin="glass"] .stp-tile {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
}