/* ==========================================================================
   Webnerd.ai Theme Layer
   - Global "playful" polish shared by every theme
   - Retro classics: Mac OS 9, Mac OS X Aqua, BeOS, Android, Green Screen
   - Soft palettes (data-theme-style="soft")
   - Overlay textures (data-texture)
   - Theme gallery UI used in the Display & Appearance modal
   Loaded after styles.css so theme selectors win on equal specificity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Shared tokens & browser UI theming
   -------------------------------------------------------------------------- */
:root {
  --accent-light: color-mix(in srgb, var(--accent) 14%, transparent);
  --logo-bg: var(--accent);
  --tex-ink: #000;
  --tex-opacity: 0.06;
  --desktop: var(--bg-primary);
  color-scheme: dark;
  accent-color: var(--accent);
  scrollbar-color: color-mix(in srgb, var(--text-muted) 55%, transparent) transparent;
}

[data-theme="google-light"], [data-theme="light"], [data-theme="sepia"],
[data-theme="macos9"], [data-theme="aqua"], [data-theme="beos"], [data-theme="android"],
[data-theme="lavender"], [data-theme="mint"], [data-theme="peach"], [data-theme="sky"],
[data-theme="rose"], [data-theme="butter"], [data-theme="matcha"] {
  color-scheme: light;
}

[data-theme="dark"], [data-theme="oled"], [data-theme="dusk"], [data-theme="fjord"], [data-theme="crt"] {
  --tex-ink: #fff;
  --tex-opacity: 0.05;
}

::selection {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: inherit;
}

body {
  font-family: var(--font-ui, var(--font-sans));
  transition: background-color 0.35s ease, color 0.35s ease;
}

.logo-icon {
  background: var(--logo-bg);
  transition: transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1), background 0.3s ease;
}
.logo-badge:hover .logo-icon { transform: rotate(-12deg) scale(1.08); }

.articles-scroll-area { background: var(--desktop); transition: background 0.35s ease; }
.articles-list { background: var(--bg-primary); min-height: 100%; }

/* Keep chrome tidy when retro fonts/bevels make controls wider */
.btn { white-space: nowrap; }
.toolbar-right { flex-shrink: 0; }
.sidebar-footer .btn-icon { padding: 5px 7px; }
.sidebar-footer { gap: 8px; }
.sidebar-footer > div:first-child { flex: 1; min-width: 0; font-size: 0.82rem; line-height: 1.2; }
.view-title { flex-shrink: 0; max-width: 260px; }
.search-box { flex: 0 1 260px; min-width: 120px; width: auto; }

/* --------------------------------------------------------------------------
   1. Playful motion (applies to every theme)
   -------------------------------------------------------------------------- */
.sidebar, .toolbar, .reader-row, .expanded-card, .modal-box, .nav-item, .btn, .btn-icon,
.unread-badge, .bottom-nav, .search-box input {
  transition-property: background-color, background, color, border-color, box-shadow, transform;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

.btn:active, .btn-icon:active, .entry-action-btn:active, .view-btn:active {
  transform: scale(0.95);
}

.modal-dialog.open .modal-box {
  animation: wn-pop 0.34s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes wn-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.unread-badge.active-badge { animation: wn-badge 0.4s cubic-bezier(0.2, 1.8, 0.4, 1); }
@keyframes wn-badge {
  0% { transform: scale(0.6); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. Overlay textures  (html[data-texture="..."])
   A fixed, click-through layer that sits over everything at low opacity,
   so it works on top of any palette.
   -------------------------------------------------------------------------- */
html[data-texture]:not([data-texture="none"]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
  opacity: var(--tex-opacity);
}

html[data-texture="paper"] body::before {
  --tex-opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[data-texture="linen"] body::before {
  background-image:
    repeating-linear-gradient(0deg, var(--tex-ink) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--tex-ink) 0 1px, transparent 1px 3px);
  --tex-opacity: 0.045;
}

html[data-texture="dots"] body::before {
  background-image: radial-gradient(var(--tex-ink) 1.1px, transparent 1.4px);
  background-size: 16px 16px;
  --tex-opacity: 0.09;
}

html[data-texture="grid"] body::before {
  background-image:
    linear-gradient(var(--tex-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--tex-ink) 1px, transparent 1px);
  background-size: 22px 22px;
  --tex-opacity: 0.05;
}

html[data-texture="pinstripe"] body::before {
  background-image: repeating-linear-gradient(0deg, var(--tex-ink) 0 1px, transparent 1px 4px);
  --tex-opacity: 0.05;
}

html[data-texture="aurora"] body::before {
  background:
    radial-gradient(40vmax 30vmax at 10% 10%, #ff7ab6, transparent 70%),
    radial-gradient(45vmax 35vmax at 90% 20%, #7aa8ff, transparent 70%),
    radial-gradient(50vmax 40vmax at 60% 100%, #6dffcf, transparent 70%);
  --tex-opacity: 0.13;
  filter: blur(20px);
}

html[data-texture="scanlines"] body::before {
  background-image: repeating-linear-gradient(0deg, var(--tex-ink) 0 1px, transparent 1px 3px);
  --tex-opacity: 0.07;
}

/* --------------------------------------------------------------------------
   3. Soft palettes (shared shape language)
   -------------------------------------------------------------------------- */
[data-theme-style="soft"] {
  --font-ui: "Nunito", "Quicksand", var(--font-sans);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 45%, transparent);
  --logo-bg: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
}

[data-theme-style="soft"] .btn { border-radius: 999px; }
[data-theme-style="soft"] .btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
[data-theme-style="soft"] .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
[data-theme-style="soft"] .btn-outline:hover { transform: translateY(-1px); }
[data-theme-style="soft"] .btn-icon { border-radius: 12px; }
[data-theme-style="soft"] .search-box input { border-radius: 999px; }
[data-theme-style="soft"] .view-switcher { border-radius: 999px; padding: 3px; }
[data-theme-style="soft"] .view-btn { border-radius: 999px; }
[data-theme-style="soft"] .nav-item, [data-theme-style="soft"] .folder-header { border-radius: 12px; }
[data-theme-style="soft"] .nav-item:hover { transform: translateX(2px); }
[data-theme-style="soft"] .toolbar {
  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
  backdrop-filter: blur(12px);
}
[data-theme-style="soft"] .expanded-card {
  border-radius: 20px;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.06), 0 12px 30px -18px color-mix(in srgb, var(--accent) 50%, transparent);
}
[data-theme-style="soft"] .expanded-card:hover { transform: translateY(-2px); }
[data-theme-style="soft"] .reader-row.selected { border-left-width: 4px; border-radius: 0 10px 10px 0; }
[data-theme-style="soft"] .entry-action-btn { border-radius: 999px; }
[data-theme-style="soft"] .modal-box { border-radius: 24px; }
[data-theme-style="soft"] .unread-badge.active-badge {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #fff));
}

/* ---- Soft palette color sets ---- */
[data-theme="lavender"] {
  --bg-primary: #fbf9ff; --bg-secondary: #f3effc; --bg-tertiary: #e8e1f8;
  --bg-card: #ffffff; --bg-card-hover: #f6f2ff; --bg-active-row: #ece4ff;
  --border-color: #e2dbf3; --border-subtle: #eee9f9; --border-active: #8b6fe0;
  --text-primary: #2a2340; --text-secondary: #5d5478; --text-muted: #9188ad;
  --accent: #7c5cd6; --accent-hover: #6845c7; --accent-blue: #7c5cd6; --link-color: #6b4fd0; --unread-dot: #7c5cd6;
}
[data-theme="mint"] {
  --bg-primary: #f6fdfa; --bg-secondary: #eaf8f1; --bg-tertiary: #d8f1e5;
  --bg-card: #ffffff; --bg-card-hover: #effbf5; --bg-active-row: #d9f7e8;
  --border-color: #d3ece0; --border-subtle: #e5f5ed; --border-active: #2fb38a;
  --text-primary: #173a2f; --text-secondary: #4b6e62; --text-muted: #86a69b;
  --accent: #1a9a72; --accent-hover: #148261; --accent-blue: #1a9a72; --link-color: #13876a; --unread-dot: #1a9a72;
}
[data-theme="peach"] {
  --bg-primary: #fffaf6; --bg-secondary: #fff0e6; --bg-tertiary: #ffe2d1;
  --bg-card: #ffffff; --bg-card-hover: #fff5ee; --bg-active-row: #ffe7d6;
  --border-color: #f6dccb; --border-subtle: #faeadf; --border-active: #ff8a5b;
  --text-primary: #3d261b; --text-secondary: #7a5646; --text-muted: #b08e7e;
  --accent: #e8643a; --accent-hover: #d2522a; --accent-blue: #e8643a; --link-color: #c9542b; --unread-dot: #e8643a;
}
[data-theme="sky"] {
  --bg-primary: #f7fbff; --bg-secondary: #ebf4fe; --bg-tertiary: #d9eafc;
  --bg-card: #ffffff; --bg-card-hover: #f0f7ff; --bg-active-row: #dcebff;
  --border-color: #d6e5f5; --border-subtle: #e7f0fa; --border-active: #4a90e2;
  --text-primary: #1a2b40; --text-secondary: #4f6580; --text-muted: #8aa0ba;
  --accent: #3d84de; --accent-hover: #2b6fc6; --accent-blue: #3d84de; --link-color: #2a6fc9; --unread-dot: #3d84de;
}
[data-theme="rose"] {
  --bg-primary: #fff8fa; --bg-secondary: #fdeef3; --bg-tertiary: #fadbe5;
  --bg-card: #ffffff; --bg-card-hover: #fff3f7; --bg-active-row: #ffe3ec;
  --border-color: #f3d6e0; --border-subtle: #f8e6ec; --border-active: #e0607e;
  --text-primary: #3d1f2a; --text-secondary: #7a5160; --text-muted: #b38d9b;
  --accent: #d64d78; --accent-hover: #c03b65; --accent-blue: #d64d78; --link-color: #c2406a; --unread-dot: #d64d78;
}
[data-theme="butter"] {
  --bg-primary: #fffdf3; --bg-secondary: #fff8dc; --bg-tertiary: #fdefb8;
  --bg-card: #ffffff; --bg-card-hover: #fffbe8; --bg-active-row: #fff3c4;
  --border-color: #f1e5b5; --border-subtle: #f7efcf; --border-active: #e6b422;
  --text-primary: #3a3014; --text-secondary: #6f6236; --text-muted: #a99c6d;
  --accent: #b98200; --accent-hover: #9e6f00; --accent-blue: #b98200; --link-color: #9a6c00; --unread-dot: #e6a800;
}
[data-theme="matcha"] {
  --bg-primary: #f8f7f0; --bg-secondary: #eeede0; --bg-tertiary: #e1e0cc;
  --bg-card: #fdfdf8; --bg-card-hover: #f3f2e8; --bg-active-row: #e7ebd3;
  --border-color: #dcdac6; --border-subtle: #e8e6d6; --border-active: #7d9a4a;
  --text-primary: #2c2e22; --text-secondary: #5d604c; --text-muted: #95977f;
  --accent: #6a8839; --accent-hover: #57722d; --accent-blue: #6a8839; --link-color: #5c7a2e; --unread-dot: #6a8839;
}
[data-theme="dusk"] {
  --bg-primary: #23212f; --bg-secondary: #1d1b28; --bg-tertiary: #2d2a3d;
  --bg-card: #262433; --bg-card-hover: #2f2c40; --bg-active-row: #36325a;
  --border-color: #393552; --border-subtle: #2c293d; --border-active: #a78bfa;
  --text-primary: #ece9f7; --text-secondary: #b3add0; --text-muted: #7d779c;
  --accent: #9b7cf6; --accent-hover: #8a66f3; --accent-blue: #a78bfa; --link-color: #b9a4ff; --unread-dot: #f0abfc;
}
[data-theme="fjord"] {
  --bg-primary: #2b303b; --bg-secondary: #242933; --bg-tertiary: #353b48;
  --bg-card: #2e3440; --bg-card-hover: #363c4a; --bg-active-row: #3b4558;
  --border-color: #3e4553; --border-subtle: #333947; --border-active: #88c0d0;
  --text-primary: #eceff4; --text-secondary: #c0c8d6; --text-muted: #8590a3;
  --accent: #5e9fc0; --accent-hover: #4c8bab; --accent-blue: #88c0d0; --link-color: #88c0d0; --unread-dot: #88c0d0;
}

/* --------------------------------------------------------------------------
   4. RETRO: Mac OS 9 "Platinum"
   -------------------------------------------------------------------------- */
[data-theme="macos9"] {
  --font-ui: "Charcoal", "Chicago", "ChicagoFLF", Geneva, "Helvetica Neue", Arial, sans-serif;
  --bg-primary: #ffffff; --bg-secondary: #dddddd; --bg-tertiary: #cccccc;
  --bg-card: #ffffff; --bg-card-hover: #eeeeff; --bg-active-row: #ccccff;
  --border-color: #999999; --border-subtle: #bbbbbb; --border-active: #3333aa;
  --text-primary: #000000; --text-secondary: #222222; --text-muted: #555555;
  --accent: #5a5ab4; --accent-hover: #44449c; --accent-blue: #3333aa; --link-color: #0000cc; --unread-dot: #5a5ab4;
  --radius-sm: 3px; --radius-md: 4px; --radius-lg: 0px;
  --shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  --logo-bg: linear-gradient(135deg, #8f8fd8, #5a5ab4);
  --desktop: #66669a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2' fill='%23747fb0'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23747fb0'/%3E%3C/svg%3E");
  --platinum-stripes: repeating-linear-gradient(to bottom, #f4f4f4 0 1px, #b8b8b8 1px 2px, #dddddd 2px 3px);
  scrollbar-color: #9999cc #eeeeee;
}
[data-theme="macos9"] .sidebar {
  background: #dddddd;
  border-right: 1px solid #555;
  box-shadow: inset -1px 0 #fff;
}
[data-theme="macos9"] .sidebar-header,
[data-theme="macos9"] .toolbar {
  background: var(--platinum-stripes);
  border-bottom: 1px solid #555;
}
[data-theme="macos9"] .logo-badge,
[data-theme="macos9"] .view-title {
  background: #dddddd;
  padding: 2px 10px;
  font-weight: 700;
}
[data-theme="macos9"] .btn,
[data-theme="macos9"] .btn-icon,
[data-theme="macos9"] .entry-action-btn,
[data-theme="macos9"] .view-switcher {
  background: linear-gradient(#f7f7f7, #d4d4d4);
  color: #000;
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #999;
}
[data-theme="macos9"] .btn:hover,
[data-theme="macos9"] .btn-icon:hover,
[data-theme="macos9"] .entry-action-btn:hover { background: linear-gradient(#ffffff, #dedede); color: #000; }
[data-theme="macos9"] .btn:active,
[data-theme="macos9"] .btn-icon:active { background: linear-gradient(#9a9a9a, #bdbdbd); box-shadow: inset 1px 1px #666; }
[data-theme="macos9"] .btn-primary {
  /* the default button wears the thick "Return key" ring */
  outline: 2px solid #000;
  outline-offset: 1px;
  font-weight: 700;
}
[data-theme="macos9"] .view-btn.active { background: #ccccff; box-shadow: inset 1px 1px #888; }
[data-theme="macos9"] .search-box input {
  background: #fff; border: 1px solid #555; border-radius: 0;
  box-shadow: inset 1px 1px #999;
}
[data-theme="macos9"] .nav-item.active { background: #ccccff; color: #000; }
[data-theme="macos9"] .unread-badge { background: #fff; color: #000; border: 1px solid #888; }
[data-theme="macos9"] .unread-badge.active-badge { background: #5a5ab4; color: #fff; border-color: #333; }
[data-theme="macos9"] .expanded-card,
[data-theme="macos9"] .modal-box {
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
[data-theme="macos9"] .modal-box {
  background: var(--platinum-stripes) top / 100% 16px no-repeat, #dddddd;
  padding-top: 30px;
}
[data-theme="macos9"] .reader-row.selected { border-left-color: #3333aa !important; }

/* --------------------------------------------------------------------------
   5. RETRO: Mac OS X "Aqua" (Jaguar-era pinstripes & gel)
   -------------------------------------------------------------------------- */
[data-theme="aqua"] {
  --font-ui: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  --bg-primary: #ffffff; --bg-secondary: #ececec; --bg-tertiary: #e0e0e0;
  --bg-card: #ffffff; --bg-card-hover: #eef4fd; --bg-active-row: #cfe2fb;
  --border-color: #c3c3c3; --border-subtle: #dddddd; --border-active: #3875d7;
  --text-primary: #000000; --text-secondary: #3f3f3f; --text-muted: #7d7d7d;
  --accent: #3875d7; --accent-hover: #2a62c0; --accent-blue: #3875d7; --link-color: #1d5bc4; --unread-dot: #3875d7;
  --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  --logo-bg: radial-gradient(circle at 50% 30%, #c5e4ff, #4a9cf4 55%, #1a5fc9);
  --pinstripes: repeating-linear-gradient(to bottom, #f6f6f6 0 2px, #e9e9e9 2px 4px);
  --gel-blue: linear-gradient(to bottom, #cfe8ff 0%, #8cc4fb 45%, #4b9cf2 50%, #8fd0ff 100%);
  --gel-white: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 45%, #dedede 50%, #f7f7f7 100%);
  --desktop: radial-gradient(120% 90% at 20% 0%, #9fd2ff 0%, #3b8de6 35%, #1a56b8 70%, #0b2f73 100%);
  scrollbar-color: #4b9cf2 #f0f0f0;
}
[data-theme="aqua"] .sidebar { background: var(--pinstripes); border-right: 1px solid #9a9a9a; }
[data-theme="aqua"] .sidebar-header { position: relative; padding-top: 30px; }
[data-theme="aqua"] .sidebar-header::before {
  /* traffic lights */
  content: "";
  position: absolute;
  top: 10px; left: 14px;
  width: 52px; height: 12px;
  background:
    radial-gradient(circle at 6px 6px, #ffd0cc 0 1.5px, #ff5f57 2.5px 5.5px, #c9403a 6px, transparent 6.5px),
    radial-gradient(circle at 26px 6px, #fff0c6 0 1.5px, #febc2e 2.5px 5.5px, #c99320 6px, transparent 6.5px),
    radial-gradient(circle at 46px 6px, #d3f5d0 0 1.5px, #28c840 2.5px 5.5px, #1f9a31 6px, transparent 6.5px);
}
[data-theme="aqua"] .toolbar {
  background: linear-gradient(to bottom, #e8e8e8, #c9c9c9);
  border-bottom: 1px solid #8a8a8a;
  box-shadow: inset 0 1px #f8f8f8;
}
[data-theme="aqua"] .view-title { text-shadow: 0 1px #fff; }
[data-theme="aqua"] .btn,
[data-theme="aqua"] .btn-icon,
[data-theme="aqua"] .entry-action-btn {
  background: var(--gel-white);
  color: #000;
  border: 1px solid #8e8e8e;
  border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}
[data-theme="aqua"] .btn-primary {
  background: var(--gel-blue);
  border-color: #2457a8;
  color: #000;
  animation: aqua-pulse 1.8s ease-in-out infinite;
}
@keyframes aqua-pulse {
  /* the famous throbbing default button */
  50% { filter: brightness(1.12) saturate(1.15); }
}
[data-theme="aqua"] .btn:hover, [data-theme="aqua"] .btn-icon:hover, [data-theme="aqua"] .entry-action-btn:hover {
  color: #000; filter: brightness(1.04);
}
[data-theme="aqua"] .view-switcher { border-radius: 999px; background: var(--gel-white); border-color: #8e8e8e; }
[data-theme="aqua"] .view-btn { border-radius: 999px; }
[data-theme="aqua"] .view-btn.active { background: var(--gel-blue); color: #000; }
[data-theme="aqua"] .search-box input {
  border-radius: 999px; background: #fff; border: 1px solid #8e8e8e;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
[data-theme="aqua"] .search-box input:focus { box-shadow: 0 0 0 3px rgba(80, 150, 240, 0.55); }
[data-theme="aqua"] .nav-item.active {
  background: linear-gradient(to bottom, #6fa5ef, #3875d7);
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
}
[data-theme="aqua"] .unread-badge { background: #8c9fbf; color: #fff; border-radius: 999px; }
[data-theme="aqua"] .nav-item.active .unread-badge { background: #fff; color: #3875d7; }
[data-theme="aqua"] .expanded-card { border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
[data-theme="aqua"] .modal-box { background: var(--pinstripes); border-radius: 12px; border-color: #8a8a8a; }
[data-theme="aqua"] .reader-row.selected { background: #cfe2fb !important; }

/* --------------------------------------------------------------------------
   6. RETRO: BeOS (yellow tabs on a blue desktop)
   -------------------------------------------------------------------------- */
[data-theme="beos"] {
  --font-ui: "Swis721 BT", "Noto Sans", Verdana, "DejaVu Sans", sans-serif;
  --bg-primary: #ffffff; --bg-secondary: #d8d8d8; --bg-tertiary: #c6c6c6;
  --bg-card: #ffffff; --bg-card-hover: #fffbe0; --bg-active-row: #fff1a8;
  --border-color: #989898; --border-subtle: #bdbdbd; --border-active: #ffcb00;
  --text-primary: #000000; --text-secondary: #262626; --text-muted: #5e5e5e;
  --accent: #336698; --accent-hover: #24507c; --accent-blue: #336698; --link-color: #003399; --unread-dot: #e0a800;
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 0px;
  --shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  --logo-bg: #336698;
  --be-yellow: linear-gradient(to bottom, #ffe880, #ffcb00);
  --desktop: #336698;
  scrollbar-color: #a8a8a8 #e6e6e6;
}
[data-theme="beos"] .sidebar { background: #d8d8d8; border-right: 1px solid #6e6e6e; box-shadow: inset -1px 0 #fff; }
[data-theme="beos"] .sidebar-header { border-bottom: 1px solid #6e6e6e; padding-top: 0; align-items: flex-end; }
[data-theme="beos"] .logo-badge,
[data-theme="beos"] .view-title,
[data-theme="beos"] .modal-title {
  background: var(--be-yellow);
  color: #000;
  padding: 4px 14px;
  border: 1px solid #a07c00;
  border-bottom: none;
  box-shadow: inset 1px 1px #fff6c4;
  font-weight: 700;
}
[data-theme="beos"] .logo-badge { margin-top: 10px; }
[data-theme="beos"] .modal-title { display: inline-block; align-self: flex-start; }
[data-theme="beos"] .toolbar {
  background: #d8d8d8;
  border-bottom: 1px solid #6e6e6e;
  box-shadow: inset 0 1px #fff;
}
[data-theme="beos"] .btn,
[data-theme="beos"] .btn-icon,
[data-theme="beos"] .entry-action-btn,
[data-theme="beos"] .view-switcher {
  background: linear-gradient(#f2f2f2, #d2d2d2);
  color: #000;
  border: 1px solid #707070;
  border-radius: 3px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #a8a8a8;
}
[data-theme="beos"] .btn-primary { background: var(--be-yellow); border-color: #a07c00; color: #000; }
[data-theme="beos"] .btn:hover, [data-theme="beos"] .btn-icon:hover, [data-theme="beos"] .entry-action-btn:hover { color: #000; filter: brightness(1.05); }
[data-theme="beos"] .view-btn.active { background: var(--be-yellow); color: #000; }
[data-theme="beos"] .search-box input { background: #fff; border: 1px solid #707070; border-radius: 0; box-shadow: inset 1px 1px #9a9a9a; }
[data-theme="beos"] .search-box input:focus { border-color: #336698; box-shadow: 0 0 0 1px #336698; }
[data-theme="beos"] .nav-item.active { background: #fff1a8; color: #000; box-shadow: inset 2px 0 #ffcb00; }
[data-theme="beos"] .unread-badge { background: #fff; color: #000; border: 1px solid #8a8a8a; border-radius: 2px; }
[data-theme="beos"] .unread-badge.active-badge { background: #336698; color: #fff; border-color: #1d3d5e; }
[data-theme="beos"] .expanded-card,
[data-theme="beos"] .modal-box { border: 1px solid #555; border-radius: 0; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); }
[data-theme="beos"] .modal-box { background: #d8d8d8; }

/* --------------------------------------------------------------------------
   7. RETRO: Green Android (bugdroid green + Material shapes)
   -------------------------------------------------------------------------- */
[data-theme="android"] {
  --font-ui: "Google Sans", "Product Sans", "Roboto", var(--font-sans);
  --bg-primary: #fbfdf9; --bg-secondary: #eef6ef; --bg-tertiary: #dcefe1;
  --bg-card: #ffffff; --bg-card-hover: #f1f9f3; --bg-active-row: #d7f5e2;
  --border-color: #cfe3d5; --border-subtle: #e4f0e7; --border-active: #3ddc84;
  --text-primary: #0b1f16; --text-secondary: #3b5247; --text-muted: #6b8276;
  --accent: #1e9e5a; --accent-hover: #178049; --accent-blue: #4285f4; --link-color: #13804a; --unread-dot: #3ddc84;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 28px;
  --shadow: 0 1px 3px rgba(7, 48, 66, 0.12), 0 8px 24px rgba(7, 48, 66, 0.1);
  --logo-bg: #3ddc84;
  --droid-navy: #073042;
  scrollbar-color: #3ddc84 transparent;
}
[data-theme="android"] .toolbar { background: var(--droid-navy); border-bottom: none; box-shadow: 0 2px 8px rgba(7, 48, 66, 0.25); }
[data-theme="android"] .toolbar .view-title { color: #ffffff; }
[data-theme="android"] .toolbar .btn-outline,
[data-theme="android"] .toolbar .btn-icon { color: #d7f5e2; border-color: rgba(255, 255, 255, 0.22); background: transparent; }
[data-theme="android"] .toolbar .btn-outline:hover,
[data-theme="android"] .toolbar .btn-icon:hover { background: rgba(61, 220, 132, 0.16); color: #fff; }
[data-theme="android"] .toolbar .search-box input { background: rgba(255, 255, 255, 0.1); border-color: transparent; color: #fff; }
[data-theme="android"] .toolbar .search-box input::placeholder { color: #9fc2b0; }
[data-theme="android"] .toolbar .view-switcher { background: rgba(255, 255, 255, 0.08); border-color: transparent; }
[data-theme="android"] .toolbar .view-btn { color: #bfe6cf; }
[data-theme="android"] .toolbar .view-btn.active { background: #3ddc84; color: var(--droid-navy); }
[data-theme="android"] .btn { border-radius: 999px; }
[data-theme="android"] .btn-primary {
  background: #3ddc84; color: var(--droid-navy); font-weight: 700;
  box-shadow: 0 3px 10px rgba(61, 220, 132, 0.45);
}
[data-theme="android"] .btn-primary:hover { background: #5fe59b; }
[data-theme="android"] .search-box input,
[data-theme="android"] .view-switcher,
[data-theme="android"] .view-btn,
[data-theme="android"] .entry-action-btn { border-radius: 999px; }
[data-theme="android"] .nav-item { border-radius: 999px; }
[data-theme="android"] .nav-item.active { background: #c4eed0; color: var(--droid-navy); }
[data-theme="android"] .unread-badge.active-badge { background: var(--droid-navy); color: #3ddc84; }
[data-theme="android"] .expanded-card { border-radius: 24px; border: none; box-shadow: var(--shadow); }
[data-theme="android"] .modal-box { border-radius: 28px; border: none; }
[data-theme="android"] .bottom-nav-item.active > span:first-child {
  background: #c4eed0; border-radius: 16px; padding: 2px 18px;
}

/* --------------------------------------------------------------------------
   8. RETRO: Green Screen (phosphor CRT terminal)
   -------------------------------------------------------------------------- */
[data-theme="crt"] {
  --font-ui: "VT323", "IBM Plex Mono", var(--font-mono);
  --font-sans: "VT323", var(--font-mono);
  --font-serif: "VT323", var(--font-mono);
  --bg-primary: #031a0a; --bg-secondary: #021305; --bg-tertiary: #06280f;
  --bg-card: #03200c; --bg-card-hover: #073014; --bg-active-row: #0b4a1e;
  --border-color: #0f5a26; --border-subtle: #0a3d19; --border-active: #33ff66;
  --text-primary: #5dff85; --text-secondary: #3fd665; --text-muted: #239a43;
  --accent: #33ff66; --accent-hover: #7dff9d; --accent-blue: #33ff66; --link-color: #a8ffbf; --unread-dot: #33ff66;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --shadow: 0 0 24px rgba(51, 255, 102, 0.2);
  --logo-bg: #33ff66;
  scrollbar-color: #1f8f3d #021305;
}
[data-theme="crt"] body { font-size: 1.12em; text-shadow: 0 0 4px rgba(51, 255, 102, 0.55); }
[data-theme="crt"] .app-container::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147482000;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
  animation: crt-flicker 6s steps(1) infinite;
}
@keyframes crt-flicker { 0%, 97%, 100% { opacity: 1; } 98% { opacity: 0.85; } }
[data-theme="crt"] .btn-primary,
[data-theme="crt"] .unread-badge.active-badge,
[data-theme="crt"] .view-btn.active { background: #33ff66; color: #021305; text-shadow: none; }
[data-theme="crt"] .btn-outline, [data-theme="crt"] .btn-icon, [data-theme="crt"] .entry-action-btn { border-color: #1f8f3d; color: #5dff85; }
[data-theme="crt"] .nav-item.active { background: #0b4a1e; color: #a8ffbf; }
[data-theme="crt"] .nav-item.active .nav-item-left::before { content: ">"; }
[data-theme="crt"] .reader-row.selected .row-title::after { content: "\2588"; margin-left: 4px; animation: crt-blink 1s steps(1) infinite; }
@keyframes crt-blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   9. Theme gallery (Display & Appearance modal)
   -------------------------------------------------------------------------- */
.appearance-box { max-width: 820px !important; max-height: 88vh; overflow-y: auto; }

.gallery-group-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 14px 0 8px;
}

.theme-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.theme-card {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 6px 8px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  position: relative;
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.theme-card:hover { transform: translateY(-3px) rotate(-0.6deg); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45); }
.theme-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-card.is-active::after {
  content: "✓";
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Mini window preview, colored by inline --p-* custom properties */
.tp {
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  background: var(--p-bg);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.tp-side { width: 30%; background: var(--p-side); display: flex; flex-direction: column; gap: 4px; padding: 14px 5px 0; }
.tp-side i { display: block; height: 4px; border-radius: 2px; background: var(--p-text); opacity: 0.35; }
.tp-side i:first-child { background: var(--p-accent); opacity: 1; }
.tp-main { flex: 1; display: flex; flex-direction: column; }
.tp-bar { height: 14px; background: var(--p-bar); display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; }
.tp-bar b { width: 16px; height: 6px; border-radius: 3px; background: var(--p-accent); }
.tp-rows { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 6px; }
.tp-rows i { display: block; height: 4px; border-radius: 2px; background: var(--p-text); opacity: 0.55; }
.tp-rows i:nth-child(2) { width: 75%; opacity: 0.35; }
.tp-rows i:nth-child(3) { width: 88%; opacity: 0.35; }

.theme-card-name { font-weight: 700; font-size: 0.84rem; color: var(--text-primary); padding: 0 2px; }
.theme-card-desc { font-size: 0.72rem; color: var(--text-muted); padding: 0 2px; line-height: 1.3; }

.texture-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.texture-chip {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), border-color 0.2s ease;
}
.texture-chip:hover { transform: translateY(-2px); }
.texture-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.texture-chip.is-active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.texture-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}