@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;600;700&display=swap");

@font-face{
  font-family: "LotusCustom";
  src: url("Lotus-woJJ9.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "MatrixCustom";
  src: url("Matrix-MZ4P.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "WindsorProUltHv";
  src: url("WindsorProUltHv.TTF") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "LinotypeUniversBasicLight";
  src: url("LinotypeUnivers BasicLight Regular.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Theme tokens are applied via data-theme on body.
   These override CSS variables declared in styles.css.
*/

body[data-theme="mint"]{
  --bg: #0b1412;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.08);
  --text: #e9fbf5;
  --muted: rgba(220,245,236,0.72);
  --line: rgba(220,245,236,0.18);
  --chip: rgba(220,245,236,0.10);
  --chipOn: rgba(220,245,236,0.20);
  --accent: #8ef3c1;
  --shadow: 0 14px 40px rgba(0,0,0,0.35);
  --radius: 18px;
  --blur: 16px;
}

body[data-theme="compact"]{
  --bg:#081018;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.08);
  --text:#e8edf7;
  --muted: rgba(232,237,247,0.70);
  --line: rgba(232,237,247,0.15);
  --chip: rgba(232,237,247,0.10);
  --chipOn: rgba(232,237,247,0.18);
  --accent:#7dd3fc;
  --shadow: 0 12px 34px rgba(0,0,0,0.35);
  --radius: 14px;
  --blur: 12px;
}

body[data-theme="budapest"]{
  --bg: #f6efd9;
  --panel: #f6efd9;
  --panel2: #f6efd9;
  --text: #6f1d3a;
  --muted: rgba(111,29,58,0.72);
  --line: rgba(111,29,58,0.26);
  --chip: rgba(111,29,58,0.08);
  --chipOn: rgba(111,29,58,0.14);
  --accent: #9b2c55;
  --shadow: 0 16px 36px rgba(0,0,0,0.18);
  --radius: 18px;
  --blur: 0px;
}

body[data-theme="encom"]{
  --bg: #05090b;
  --panel: rgba(5,16,20,0.82);
  --panel2: rgba(8,20,26,0.88);
  --text: #d8f8ff;
  --muted: rgba(184,230,240,0.72);
  --line: rgba(64,214,232,0.28);
  --chip: rgba(40,150,170,0.16);
  --chipOn: rgba(55,224,250,0.28);
  --accent: #38f0ff;
  --shadow: 0 18px 50px rgba(0,0,0,0.55);
  --radius: 14px;
  --blur: 10px;
  font-family: "Rajdhani", "Orbitron", "Segoe UI", sans-serif;
}

body[data-theme="inception"]{
  --bg: #0e0b12;
  --panel: rgba(18,14,24,0.78);
  --panel2: rgba(20,16,28,0.84);
  --text: #efe9ff;
  --muted: rgba(220,208,245,0.68);
  --line: rgba(198,172,255,0.22);
  --chip: rgba(154,118,255,0.18);
  --chipOn: rgba(196,160,255,0.30);
  --accent: #c7a9ff;
  --shadow: 0 18px 42px rgba(0,0,0,0.45);
  --radius: 18px;
  --blur: 14px;
  font-family: "Playfair Display", "Georgia", serif;
}

body[data-theme="lotus"]{
  --bg: #0b0b0b;
  --panel: rgba(10,10,10,0.9);
  --panel2: rgba(16,16,16,0.9);
  --text: #f8d24a;
  --muted: rgba(248,210,74,0.70);
  --line: rgba(248,210,74,0.28);
  --chip: rgba(248,210,74,0.12);
  --chipOn: rgba(248,210,74,0.26);
  --accent: #f8d24a;
  --shadow: 0 18px 44px rgba(0,0,0,0.6);
  --radius: 16px;
  --blur: 10px;
  font-family: "Oswald", "Segoe UI", sans-serif;
}

body[data-theme="neon"]{
  --bg: #07040f;
  --panel: rgba(10,6,20,0.85);
  --panel2: rgba(14,8,26,0.9);
  --text: #f8f3ff;
  --muted: rgba(200,180,255,0.7);
  --line: rgba(0,255,255,0.25);
  --chip: rgba(0,255,255,0.12);
  --chipOn: rgba(255,0,199,0.22);
  --accent: #00f6ff;
  --shadow: 0 18px 46px rgba(0,0,0,0.6);
  --radius: 16px;
  --blur: 14px;
  font-family: "Zen Kaku Gothic New", "Segoe UI", sans-serif;
}

body[data-theme="neonflow"]{
  --bg: #05030b;
  --panel: rgba(8,6,18,0.86);
  --panel2: rgba(12,8,22,0.9);
  --text: #f5f0ff;
  --muted: rgba(190,175,255,0.72);
  --line: rgba(0,255,255,0.22);
  --chip: rgba(0,255,255,0.12);
  --chipOn: rgba(255,0,199,0.24);
  --accent: #7df9ff;
  --shadow: 0 18px 46px rgba(0,0,0,0.6);
  --radius: 16px;
  --blur: 14px;
  font-family: "Zen Kaku Gothic New", "Segoe UI", sans-serif;
}

body[data-theme="matrix"]{
  --bg: #010701;
  --panel: rgba(2,8,2,0.9);
  --panel2: rgba(4,12,4,0.9);
  --text: #b9ffc9;
  --muted: rgba(120,255,170,0.7);
  --line: rgba(0,255,112,0.25);
  --chip: rgba(0,255,112,0.12);
  --chipOn: rgba(0,255,112,0.26);
  --accent: #00ff75;
  --shadow: 0 18px 46px rgba(0,0,0,0.6);
  --radius: 16px;
  --blur: 10px;
  font-family: "Courier New", Courier, monospace;
}

body[data-theme="glass"]{
  --bg: #040604;
  --panel: rgba(5,8,5,0.82);
  --panel2: rgba(6,10,6,0.9);
  --text: #9fd66b;
  --muted: rgba(140,200,95,0.7);
  --line: rgba(120,190,80,0.35);
  --chip: rgba(120,190,80,0.12);
  --chipOn: rgba(120,190,80,0.28);
  --accent: #9fd66b;
  --shadow: 0 16px 36px rgba(0,0,0,0.6);
  --radius: 18px;
  --blur: 10px;
  font-family: "Rajdhani", "Segoe UI", sans-serif;
}

body[data-theme="chrome"]{
  --bg: #f2f3f5;
  --panel: rgba(255,255,255,0.92);
  --panel2: rgba(255,255,255,0.96);
  --text: #202124;
  --muted: rgba(32,33,36,0.68);
  --line: rgba(60,64,67,0.18);
  --chip: rgba(66,133,244,0.12);
  --chipOn: rgba(66,133,244,0.20);
  --accent: #4285f4;
  --shadow: 0 14px 34px rgba(0,0,0,0.12);
  --radius: 18px;
  --blur: 8px;
  font-family: "LinotypeUniversBasicLight", "Segoe UI", sans-serif;
}
/* Body background per theme */
body[data-theme="mint"]{
  background: radial-gradient(1200px 700px at 40% -10%, rgba(142,243,193,0.18), transparent 60%),
              radial-gradient(900px 600px at 110% 10%, rgba(90,220,200,0.18), transparent 55%),
              linear-gradient(180deg, #070f0d 0%, #0b1412 55%, #060d0b 100%);
}

/* Mint: varied tones */
body[data-theme="mint"] .brand,
body[data-theme="mint"] .sideTitle,
body[data-theme="mint"] .newsTitle{
  color: #8ef3c1; /* mint green */
}

body[data-theme="mint"] .desc,
body[data-theme="mint"] .dayMeta,
body[data-theme="mint"] .updated,
body[data-theme="mint"] .sideHint,
body[data-theme="mint"] .newsTimestamp{
  color: #7fd6ff; /* mint blue */
}

body[data-theme="mint"] .place,
body[data-theme="mint"] .bigTemp,
body[data-theme="mint"] .stat .v{
  color: #c7f7d4; /* soft mint */
}

body[data-theme="mint"] .stat .k,
body[data-theme="mint"] .dayName,
body[data-theme="mint"] .newsItem{
  color: #f6e7a6; /* mint yellow */
}

body[data-theme="mint"] .btn,
body[data-theme="mint"] .chip{
  color: #89f0d0;
  border-color: rgba(137,240,208,0.45);
  background: rgba(137,240,208,0.12);
}

body[data-theme="mint"] .chip.on{
  color: #0c1c17;
  background: rgba(142,243,193,0.85);
  border-color: rgba(142,243,193,0.95);
}

body[data-theme="compact"]{
  background: linear-gradient(180deg, #050912 0%, #081018 55%, #040812 100%);
}

body[data-theme="budapest"]{
  background: linear-gradient(180deg, #f6efd9 0%, #f6efd9 100%);
}

body[data-theme="encom"]{
  background:
    radial-gradient(900px 600px at 20% -20%, rgba(56,240,255,0.18), transparent 55%),
    radial-gradient(800px 500px at 120% 10%, rgba(38,120,140,0.25), transparent 55%),
    linear-gradient(145deg, #020608 0%, #060c12 55%, #040709 100%);
  background-attachment: fixed;
}

body[data-theme="inception"]{
  background:
    radial-gradient(900px 600px at 20% -15%, rgba(210,180,255,0.16), transparent 55%),
    radial-gradient(700px 500px at 110% 20%, rgba(140,110,220,0.22), transparent 55%),
    linear-gradient(160deg, #0b0a12 0%, #12101c 45%, #0a0a10 100%);
  background-attachment: fixed;
}

body[data-theme="lotus"]{
  background:
    linear-gradient(180deg, #0b0b0b 0%, #0a0a0a 50%, #050505 100%);
  background-attachment: fixed;
}

body[data-theme="neon"]{
  background:
    radial-gradient(900px 600px at 20% -15%, rgba(0,255,255,0.18), transparent 55%),
    radial-gradient(700px 500px at 110% 20%, rgba(255,0,199,0.18), transparent 55%),
    linear-gradient(160deg, #05020a 0%, #0a0716 45%, #04020a 100%);
  background-attachment: fixed;
}

body[data-theme="neonflow"]{
  background:
    radial-gradient(900px 600px at 20% -15%, rgba(0,255,255,0.16), transparent 55%),
    radial-gradient(700px 500px at 110% 20%, rgba(255,0,199,0.16), transparent 55%),
    linear-gradient(160deg, #04020a 0%, #090615 45%, #04020a 100%);
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: fluxBgShift 12s ease-in-out infinite;
}

body[data-theme="matrix"]{
  background:
    radial-gradient(900px 600px at 20% -15%, rgba(0,255,112,0.16), transparent 55%),
    radial-gradient(700px 500px at 110% 20%, rgba(0,180,80,0.16), transparent 55%),
    linear-gradient(160deg, #010401 0%, #020a03 45%, #010401 100%);
  background-attachment: fixed;
}

body[data-theme="glass"]{
  background: linear-gradient(180deg, #050805 0%, #040704 100%) !important;
  background-attachment: fixed;
}

body[data-theme="chrome"]{
  background: linear-gradient(180deg, #f4f5f7 0%, #eef0f3 100%);
  background-attachment: fixed;
}

body[data-theme="chrome"][data-weather]{
  background: linear-gradient(180deg, #f4f5f7 0%, #eef0f3 100%) !important;
}
/* Keep Glass background from being overridden by weather mood */
body[data-theme="glass"][data-weather]{
  background: linear-gradient(180deg, #050805 0%, #040704 100%) !important;
}

body[data-theme="glass"]::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(120,190,80,0.06) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(120,190,80,0.05) 0 1px, transparent 1px 18px);
  opacity: 0.35;
  z-index: 0;
}
body[data-theme="neonflow"]::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,255,255,0.08) 0%, transparent 18%),
    linear-gradient(270deg, rgba(255,0,199,0.08) 0%, transparent 18%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 18px);
  opacity: 0.4;
  z-index: 0;
}
body[data-theme="neon"]::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,255,255,0.08) 0%, transparent 18%),
    linear-gradient(270deg, rgba(255,0,199,0.08) 0%, transparent 18%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 16px);
  opacity: 0.4;
  z-index: 0;
}
body[data-theme="lotus"]::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 380px at 15% -10%, rgba(248,210,74,0.22), transparent 60%),
    radial-gradient(600px 380px at 85% -10%, rgba(248,210,74,0.20), transparent 60%),
    repeating-linear-gradient(135deg, rgba(248,210,74,0.12) 0 2px, transparent 2px 20px);
  opacity: 0.55;
  z-index: 0;
}
body[data-theme="inception"]::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(199,169,255,0.14) 0%, transparent 35%),
    linear-gradient(300deg, rgba(110,90,180,0.10) 0%, transparent 40%);
  opacity: 0.6;
  z-index: 0;
}

body[data-theme="inception"]::after{
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(199,169,255,0.08) 0%, transparent 45%),
    linear-gradient(315deg, rgba(120,96,190,0.10) 0%, transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 26px);
  transform: perspective(1200px) rotateX(55deg) rotateZ(20deg);
  transform-origin: center;
  opacity: 0.6;
  z-index: 0;
}
body[data-theme="encom"]::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(transparent 24px, rgba(70,220,238,0.16) 25px),
    linear-gradient(90deg, transparent 24px, rgba(70,220,238,0.16) 25px);
  background-size: 26px 26px;
  opacity: 0.32;
  z-index: 0;
}

body[data-theme="encom"]::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(56,240,255,0.08), transparent 30%),
    linear-gradient(0deg, rgba(56,240,255,0.06), transparent 40%);
  opacity: 0.5;
  z-index: 0;
}

/* Budapest: flat, continuous surface */
body[data-theme="budapest"] .shell{
  background: #f6efd9;
  border-color: rgba(111,29,58,0.30);
  box-shadow: none;
  border-radius: 22px;
}

body[data-theme="budapest"] .shellClip{
  border-radius: 0 0 22px 22px;
}

body[data-theme="budapest"] .topbar{
  background: #f6efd9;
  border-bottom-color: rgba(111,29,58,0.22);
  border-radius: 22px 22px 0 0;
}

body[data-theme="budapest"] .content{
  background: #f6efd9;
}

body[data-theme="budapest"] .card,
body[data-theme="budapest"] .day,
body[data-theme="budapest"] .stat{
  background: rgba(255,255,255,0.00);
  border-color: rgba(111,29,58,0.22);
}

/* Encom: boardroom glow and sharp edges */
body[data-theme="encom"] .shell,
body[data-theme="encom"] .sideCard,
body[data-theme="encom"] .newsWidget{
  background: linear-gradient(180deg, rgba(6,18,22,0.92) 0%, rgba(4,12,16,0.86) 100%);
  border-color: var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(64,214,232,0.12);
}

body[data-theme="encom"] .topbar{
  background: rgba(4,14,18,0.92);
  border-bottom-color: rgba(64,214,232,0.34);
  border-radius: 22px 22px 0 0;
}

body[data-theme="encom"] .brand{
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--accent);
}

body[data-theme="encom"] .btn,
body[data-theme="encom"] .chip{
  border-color: rgba(64,214,232,0.4);
  color: var(--text);
  background: rgba(6,20,26,0.6);
}

body[data-theme="encom"] .chip.on{
  background: rgba(56,240,255,0.24);
  border-color: rgba(56,240,255,0.6);
  color: #f0feff;
}

body[data-theme="encom"] .themeButton{
  background: rgba(8,22,28,0.75);
  border-color: rgba(64,214,232,0.5);
}

body[data-theme="encom"] .day,
body[data-theme="encom"] .stat{
  background: rgba(10,30,36,0.35);
  border-color: rgba(64,214,232,0.25);
}

body[data-theme="encom"] .newsItem{
  border-bottom-color: rgba(64,214,232,0.22);
}

/* Inception: cinematic contrast and soft vignette */
body[data-theme="inception"] .shell,
body[data-theme="inception"] .sideCard,
body[data-theme="inception"] .newsWidget{
  background: linear-gradient(180deg, rgba(20,16,30,0.92) 0%, rgba(12,10,20,0.86) 100%);
  border-color: var(--line);
  box-shadow: 0 18px 46px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(199,169,255,0.10);
}

body[data-theme="inception"] .topbar{
  background: rgba(16,12,24,0.94);
  border-bottom-color: rgba(199,169,255,0.28);
  border-radius: 22px 22px 0 0;
}

body[data-theme="inception"] .brand{
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent);
}

body[data-theme="inception"] .btn,
body[data-theme="inception"] .chip{
  border-color: rgba(199,169,255,0.35);
  color: var(--text);
  background: rgba(24,18,36,0.6);
}

body[data-theme="inception"] .chip.on{
  background: rgba(199,169,255,0.26);
  border-color: rgba(199,169,255,0.65);
  color: #f6f1ff;
}

body[data-theme="inception"] .day,
body[data-theme="inception"] .stat{
  background: rgba(28,20,40,0.35);
  border-color: rgba(199,169,255,0.22);
}

body[data-theme="inception"] .newsItem{
  border-bottom-color: rgba(199,169,255,0.18);
}

/* Lotus: JPS black and gold */
body[data-theme="lotus"] .shell,
body[data-theme="lotus"] .sideCard,
body[data-theme="lotus"] .newsWidget{
  background: linear-gradient(180deg, rgba(10,10,10,0.95) 0%, rgba(6,6,6,0.92) 100%);
  border-color: var(--line);
  box-shadow: 0 18px 46px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(248,210,74,0.12);
}

body[data-theme="lotus"] .topbar{
  background: rgba(8,8,8,0.95);
  border-bottom-color: rgba(248,210,74,0.3);
  border-radius: 22px 22px 0 0;
}

body[data-theme="lotus"] .brand{
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 800;
  color: var(--accent);
  font-family: "LotusCustom", "Oswald", "Segoe UI", sans-serif;
}

body[data-theme="lotus"] .btn,
body[data-theme="lotus"] .chip{
  border-color: rgba(248,210,74,0.45);
  color: var(--text);
  background: rgba(12,12,12,0.8);
}

body[data-theme="lotus"] .chip.on{
  background: rgba(248,210,74,0.28);
  border-color: rgba(248,210,74,0.7);
  color: #fff2bf;
}

body[data-theme="lotus"] .day,
body[data-theme="lotus"] .stat{
  background: rgba(16,16,16,0.7);
  border-color: rgba(248,210,74,0.25);
}

body[data-theme="lotus"] .newsItem{
  border-bottom-color: rgba(248,210,74,0.22);
}

/* Neon Tokyo */
body[data-theme="neon"] .shell,
body[data-theme="neon"] .sideCard,
body[data-theme="neon"] .newsWidget{
  background: linear-gradient(180deg, rgba(12,6,24,0.94) 0%, rgba(6,3,12,0.92) 100%);
  border-color: var(--line);
  box-shadow: 0 20px 50px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(0,255,255,0.12);
}

body[data-theme="neon"] .topbar{
  background: rgba(8,4,16,0.95);
  border-bottom-color: rgba(0,255,255,0.3);
  border-radius: 22px 22px 0 0;
}

body[data-theme="neon"] .brand{
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(0,255,255,0.45);
}

body[data-theme="neon"] .btn,
body[data-theme="neon"] .chip{
  border-color: rgba(0,255,255,0.45);
  color: var(--text);
  background: rgba(12,8,24,0.8);
}

body[data-theme="neon"] .chip.on{
  background: rgba(255,0,199,0.28);
  border-color: rgba(255,0,199,0.7);
  color: #ffe8fb;
}

body[data-theme="neon"] .day,
body[data-theme="neon"] .stat{
  background: rgba(12,8,20,0.7);
  border-color: rgba(0,255,255,0.25);
}

body[data-theme="neon"] .newsItem{
  border-bottom-color: rgba(0,255,255,0.2);
}

/* Neon Flux (animated text color flow) */
body[data-theme="neonflow"] .shell,
body[data-theme="neonflow"] .sideCard,
body[data-theme="neonflow"] .newsWidget{
  background: linear-gradient(180deg, rgba(10,6,20,0.55) 0%, rgba(6,3,12,0.45) 100%);
  border-color: rgba(0,255,255,0.18);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,255,255,0.08);
  backdrop-filter: blur(18px) saturate(140%);
}

body[data-theme="neonflow"] .topbar{
  background: rgba(8,4,16,0.95);
  border-bottom-color: rgba(0,255,255,0.28);
  border-radius: 22px 22px 0 0;
}

body[data-theme="neonflow"] .brand,
body[data-theme="neonflow"] .sideTitle,
body[data-theme="neonflow"] .place,
body[data-theme="neonflow"] .bigTemp{
  background: linear-gradient(90deg, #00f6ff, #ff00c7, #a855f7, #00f6ff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: neonFlow 6s linear infinite;
}

body[data-theme="neonflow"] .btn,
body[data-theme="neonflow"] .chip{
  border-color: rgba(0,255,255,0.45);
  color: var(--text);
  background: rgba(12,8,24,0.8);
}

body[data-theme="neonflow"] .chip.on{
  background: rgba(255,0,199,0.28);
  border-color: rgba(255,0,199,0.7);
  color: #ffe8fb;
}

body[data-theme="neonflow"] .day,
body[data-theme="neonflow"] .stat{
  background: rgba(12,8,20,0.7);
  border-color: rgba(0,255,255,0.25);
}

body[data-theme="neonflow"] .newsItem{
  border-bottom-color: rgba(0,255,255,0.2);
}

/* Matrix */
body[data-theme="matrix"] .shell,
body[data-theme="matrix"] .sideCard,
body[data-theme="matrix"] .newsWidget{
  background: linear-gradient(180deg, rgba(2,8,2,0.95) 0%, rgba(1,5,1,0.92) 100%);
  border-color: var(--line);
  box-shadow: 0 20px 50px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(0,255,112,0.12);
}

body[data-theme="matrix"] .topbar{
  background: rgba(2,6,2,0.95);
  border-bottom-color: rgba(0,255,112,0.3);
  border-radius: 22px 22px 0 0;
}

body[data-theme="matrix"] .brand{
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(0,255,112,0.5);
  font-family: "MatrixCustom", "Courier New", Courier, monospace;
}

body[data-theme="matrix"] .btn,
body[data-theme="matrix"] .chip{
  border-color: rgba(0,255,112,0.45);
  color: var(--text);
  background: rgba(3,12,3,0.8);
}

body[data-theme="matrix"] .chip.on{
  background: rgba(0,255,112,0.3);
  border-color: rgba(0,255,112,0.75);
  color: #001b08;
}

body[data-theme="matrix"] .day,
body[data-theme="matrix"] .stat{
  background: rgba(4,12,4,0.7);
  border-color: rgba(0,255,112,0.25);
}

body[data-theme="matrix"] .newsItem{
  border-bottom-color: rgba(0,255,112,0.2);
}

/* Glass: dreamy, soft */
body[data-theme="glass"] .shell,
body[data-theme="glass"] .sideCard,
body[data-theme="glass"] .newsWidget{
  background: linear-gradient(180deg, rgba(6,10,6,0.92) 0%, rgba(4,7,4,0.88) 100%);
  border-color: var(--line);
  box-shadow: 0 18px 38px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(120,190,80,0.18);
  backdrop-filter: blur(8px) saturate(120%);
}

body[data-theme="glass"] .topbar{
  background: rgba(5,8,5,0.95);
  border-bottom-color: rgba(120,190,80,0.35);
  border-radius: 22px 22px 0 0;
}

body[data-theme="glass"] .brand{
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent);
  font-family: "WindsorProUltHv", "LinotypeUniversBasicLight", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

body[data-theme="glass"] .btn,
body[data-theme="glass"] .chip{
  border-color: rgba(120,190,80,0.45);
  color: var(--text);
  background: rgba(6,10,6,0.85);
}

body[data-theme="glass"] .chip.on{
  background: rgba(120,190,80,0.3);
  border-color: rgba(120,190,80,0.75);
  color: #0a1207;
}

body[data-theme="glass"] .day,
body[data-theme="glass"] .stat{
  background: rgba(6,10,6,0.65);
  border-color: rgba(120,190,80,0.25);
}

body[data-theme="glass"] .newsItem{
  border-bottom-color: rgba(120,190,80,0.22);
}

/* Chrome: Google colors */
body[data-theme="chrome"] .shell,
body[data-theme="chrome"] .sideCard,
body[data-theme="chrome"] .newsWidget{
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,251,255,0.95) 100%);
  border-color: var(--line);
  box-shadow: 0 16px 30px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.8);
}

body[data-theme="chrome"] .topbar{
  background: rgba(255,255,255,0.98);
  border-bottom-color: rgba(60,64,67,0.16);
  border-radius: 22px 22px 0 0;
}

body[data-theme="chrome"] .brand{
  color: #4285f4; /* blue */
  font-weight: 800;
  letter-spacing: 0.16em;
}

body[data-theme="chrome"] .sideTitle,
body[data-theme="chrome"] .newsTitle{
  color: #db4437; /* red */
  font-weight: 900;
}

body[data-theme="chrome"] .albumTitle,
body[data-theme="chrome"] .albumArtist,
body[data-theme="chrome"] .albumTag,
body[data-theme="chrome"] .dayName,
body[data-theme="chrome"] .msTitle,
body[data-theme="chrome"] .msHead,
body[data-theme="chrome"] .place{
  font-weight: 900;
}

body[data-theme="chrome"] .desc,
body[data-theme="chrome"] .updated,
body[data-theme="chrome"] .dayMeta{
  color: #0f9d58; /* green */
}

body[data-theme="chrome"] .stat .k,
body[data-theme="chrome"] .newsTimestamp,
body[data-theme="chrome"] .sideHint{
  color: #f4b400; /* yellow */
}

body[data-theme="chrome"] .btn,
body[data-theme="chrome"] .chip{
  border-color: rgba(66,133,244,0.35);
  color: #202124;
  background: rgba(66,133,244,0.08);
}

body[data-theme="chrome"] .chip.on{
  background: rgba(66,133,244,0.20);
  border-color: rgba(66,133,244,0.6);
  color: #1a1c20;
}

body[data-theme="chrome"] .day,
body[data-theme="chrome"] .stat{
  background: rgba(255,255,255,0.9);
  border-color: rgba(60,64,67,0.14);
}
@keyframes neonFlow{
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fluxBgShift{
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 100% 50%;
    filter: hue-rotate(40deg);
  }
  100% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
}
/* Theme dropdown (solid dark) */
.themeDropdown{
  position: relative;
}

.themeButton{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}

.themeButton .caret{
  opacity: 0.8;
}

.themeMenu{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: #111827;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  overflow:hidden;
  z-index: 60;
  transform-origin: top right;
  transform: scale(0.98);
  opacity: 0;
  pointer-events:none;
  transition: transform .12s ease, opacity .12s ease;
  column-count: 2;
  column-gap: 10px;
  padding: 8px;
}

.themeDropdown.open .themeMenu{
  transform: scale(1);
  opacity: 1;
  pointer-events:auto;
}

.themeMenu .themeOption{
  width: 100%;
  border: 0;
  background: transparent;
  color: #e5e7eb;
  padding: 6px 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-weight: 700;
  font-size: 12px;
  border-radius: 10px;
  break-inside: avoid;
}

.themeMenu .themeOption:hover{
  background: rgba(255,255,255,0.06);
}

.themeMenu .themeOption .tag{
  font-size: 10px;
  opacity: 0.75;
}

/* Hide native select */
.themeSelectHidden{ display:none !important; }

/* Ensure dropdown not clipped */
.topbar{ overflow: visible; }

/* Ensure sideCard follows theme variables */
.sideCard{
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
}