:root {
  color-scheme: dark;
  --ink: #f8edda;
  --muted: #a99783;
  --night: #130b07;
  --panel: #26160d;
  --line: rgba(255, 234, 198, 0.13);
  --day-accent: #ff9d2e;
  --night-accent: #9b9de1;
  --saffron: var(--day-accent);
  --gold: #ffd68b;
  --indigo: #6668b9;
  --page-glow: rgba(196, 103, 37, 0.16);
  --page-start: #21130b;
  --page-mid: #100906;
  --page-end: #151019;
  --control-bg: rgba(255,255,255,0.025);
  --dial-start: #3c2517;
  --dial-mid: #21130c;
  --dial-end: #130b07;
  --dial-stroke: rgba(230,158,91,0.25);
  --ring-outer: #7e4929;
  --ring-inner: rgba(166,98,52,0.52);
  --spoke: #a86638;
  --spoke-shaft: rgba(175,104,55,0.2);
  --spoke-minor: rgba(195,121,65,0.44);
  --medallion-fill: #3a2113;
  --medallion-stroke: #c27d48;
  --tick: rgba(255,238,212,0.33);
  --tick-major: rgba(255,238,212,0.75);
  --inner-tick: rgba(231,166,103,0.28);
  --inner-major: rgba(255,238,212,0.7);
  --inner-label: rgba(255,245,229,0.68);
  --pin-fill: #e9b66f;
  --pin-stroke: #583015;
  --hub-fill: #2b180e;
  --hub-stroke: #ad6b3b;
  --card-border: rgba(211,135,70,0.3);
  --card-start: rgba(62,35,20,0.92);
  --card-end: rgba(25,15,10,0.96);
  --card-shadow: rgba(0,0,0,0.36);
  --info-bg: rgba(35,21,13,0.97);
  --note: #806f61;
  --relief-filter: saturate(0.68) brightness(0.62) contrast(1.05);
  --relief-active-filter: saturate(1.02) brightness(0.96) contrast(1.06);
  --relief-opacity: 0.28;
  --relief-active-opacity: 0.88;
  --arc-day-1: hsl(34 92% 57%);
  --arc-day-2: hsl(41 92% 60%);
  --arc-day-3: hsl(48 92% 63%);
  --arc-day-4: hsl(55 92% 66%);
  --arc-night-1: hsl(244 34% 43%);
  --arc-night-2: hsl(236 34% 46%);
  --arc-night-3: hsl(228 34% 49%);
  --arc-night-4: hsl(220 34% 52%);
  --burn-x: 0px;
  --burn-y: 0px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #30251b;
  --muted: #746352;
  --night: #f4ecdf;
  --panel: #fffaf2;
  --line: rgba(86,58,34,0.16);
  --day-accent: #d86616;
  --night-accent: #6865a8;
  --gold: #9a5926;
  --indigo: #6865a8;
  --page-glow: rgba(225,139,68,0.2);
  --page-start: #fffaf1;
  --page-mid: #f3eadc;
  --page-end: #e9e1d8;
  --control-bg: rgba(255,255,255,0.62);
  --dial-start: #efd6b3;
  --dial-mid: #d8ad7b;
  --dial-end: #a56d3e;
  --dial-stroke: rgba(102,63,29,0.36);
  --ring-outer: #8c542f;
  --ring-inner: rgba(111,70,36,0.62);
  --spoke: #87502c;
  --spoke-shaft: rgba(100,61,32,0.35);
  --spoke-minor: rgba(104,67,38,0.5);
  --medallion-fill: #f0cf9f;
  --medallion-stroke: #7d4828;
  --tick: rgba(65,43,25,0.38);
  --tick-major: rgba(48,32,19,0.76);
  --inner-tick: rgba(84,51,27,0.36);
  --inner-major: rgba(45,30,18,0.72);
  --inner-label: rgba(46,31,20,0.76);
  --pin-fill: #f2bd70;
  --pin-stroke: #74401f;
  --hub-fill: #e7bd85;
  --hub-stroke: #824a27;
  --card-border: rgba(151,91,39,0.24);
  --card-start: rgba(255,252,246,0.97);
  --card-end: rgba(242,229,210,0.97);
  --card-shadow: rgba(80,52,28,0.16);
  --info-bg: rgba(255,250,241,0.98);
  --note: #897665;
  --relief-filter: sepia(0.25) saturate(0.72) brightness(1.06) contrast(0.9);
  --relief-active-filter: sepia(0.18) saturate(1.02) brightness(1.13) contrast(0.98);
  --relief-opacity: 0.3;
  --relief-active-opacity: 0.82;
  --arc-day-1: #e47423; --arc-day-2: #e9932f; --arc-day-3: #d6a840; --arc-day-4: #b9ad4c;
  --arc-night-1: #6d68a5; --arc-night-2: #747bb4; --arc-night-3: #728bae; --arc-night-4: #7198a5;
}

:root[data-theme="modern"] {
  --ink: #eef7f7;
  --muted: #8da1a6;
  --night: #091014;
  --panel: #111c21;
  --line: rgba(156,222,223,0.14);
  --day-accent: #32d6c5;
  --night-accent: #9b8cff;
  --gold: #b9f2ea;
  --indigo: #6577e8;
  --page-glow: rgba(41,205,194,0.13);
  --page-start: #101b20;
  --page-mid: #070c10;
  --page-end: #10131d;
  --control-bg: rgba(139,213,213,0.05);
  --dial-start: #29393e;
  --dial-mid: #17252a;
  --dial-end: #091115;
  --dial-stroke: rgba(102,207,202,0.26);
  --ring-outer: #315c62;
  --ring-inner: rgba(83,163,162,0.5);
  --spoke: #4b9e9b;
  --spoke-shaft: rgba(71,163,159,0.24);
  --spoke-minor: rgba(88,190,184,0.42);
  --medallion-fill: #12282b;
  --medallion-stroke: #52bbb4;
  --tick: rgba(213,248,245,0.28);
  --tick-major: rgba(225,255,252,0.74);
  --inner-tick: rgba(100,206,200,0.3);
  --inner-major: rgba(225,255,252,0.68);
  --inner-label: rgba(226,250,248,0.68);
  --pin-fill: #8ee3da;
  --pin-stroke: #163f40;
  --hub-fill: #122326;
  --hub-stroke: #3a9691;
  --card-border: rgba(74,190,184,0.23);
  --card-start: rgba(20,34,39,0.96);
  --card-end: rgba(9,17,21,0.98);
  --card-shadow: rgba(0,0,0,0.42);
  --info-bg: rgba(13,24,29,0.98);
  --note: #71868a;
  --relief-filter: grayscale(0.48) sepia(0.12) hue-rotate(118deg) saturate(0.82) brightness(0.6) contrast(1.12);
  --relief-active-filter: grayscale(0.25) sepia(0.1) hue-rotate(118deg) saturate(1.1) brightness(0.95) contrast(1.12);
  --arc-day-1: #1fc6ba; --arc-day-2: #38d8c1; --arc-day-3: #55dfb4; --arc-day-4: #78dda6;
  --arc-night-1: #665fd1; --arc-night-2: #696ee0; --arc-night-3: #6681e2; --arc-night-4: #6094dc;
}

:root[data-theme="midnight"] {
  --ink: #f0ecff;
  --muted: #aaa0c7;
  --night: #080616;
  --panel: #15112b;
  --line: rgba(202,186,255,0.14);
  --day-accent: #efb35d;
  --night-accent: #a78cff;
  --gold: #f2cf8c;
  --indigo: #7564dc;
  --page-glow: rgba(110,79,210,0.2);
  --page-start: #18112f;
  --page-mid: #080615;
  --page-end: #101126;
  --control-bg: rgba(203,188,255,0.045);
  --dial-start: #302747;
  --dial-mid: #1a1531;
  --dial-end: #0b091d;
  --dial-stroke: rgba(184,154,235,0.3);
  --ring-outer: #55407d;
  --ring-inner: rgba(147,112,199,0.5);
  --spoke: #8a67b5;
  --spoke-shaft: rgba(138,103,181,0.24);
  --spoke-minor: rgba(170,133,216,0.42);
  --medallion-fill: #211735;
  --medallion-stroke: #b188df;
  --tick: rgba(242,232,255,0.28);
  --tick-major: rgba(248,241,255,0.74);
  --inner-tick: rgba(182,146,224,0.3);
  --inner-major: rgba(247,239,255,0.68);
  --inner-label: rgba(247,239,255,0.7);
  --pin-fill: #d4b4f0;
  --pin-stroke: #3f285e;
  --hub-fill: #1c142d;
  --hub-stroke: #8a62b3;
  --card-border: rgba(168,126,220,0.25);
  --card-start: rgba(31,23,54,0.96);
  --card-end: rgba(12,9,28,0.98);
  --card-shadow: rgba(0,0,0,0.48);
  --info-bg: rgba(20,15,40,0.98);
  --note: #7f7398;
  --relief-filter: sepia(0.22) hue-rotate(205deg) saturate(0.75) brightness(0.58) contrast(1.08);
  --relief-active-filter: sepia(0.18) hue-rotate(205deg) saturate(1.05) brightness(0.94) contrast(1.08);
  --arc-day-1: #d99553; --arc-day-2: #e5aa5b; --arc-day-3: #edc36b; --arc-day-4: #ddcf79;
  --arc-night-1: #6e54be; --arc-night-2: #775fcf; --arc-night-3: #7e70dc; --arc-night-4: #8183dc;
}

:root[data-theme="temple"] {
  --ink: #efe2cc;
  --muted: #9e9880;
  --night: #0d140e;
  --panel: #182018;
  --line: rgba(220,201,159,0.13);
  --day-accent: #d98a3a;
  --night-accent: #72a39a;
  --gold: #d9bd7a;
  --indigo: #5e8178;
  --page-glow: rgba(145,105,48,0.16);
  --page-start: #1c251a;
  --page-mid: #0b100c;
  --page-end: #171711;
  --control-bg: rgba(236,218,177,0.035);
  --dial-start: #3b3a28;
  --dial-mid: #24271b;
  --dial-end: #11160f;
  --dial-stroke: rgba(189,150,88,0.27);
  --ring-outer: #765336;
  --ring-inner: rgba(138,100,60,0.52);
  --spoke: #8e633d;
  --spoke-shaft: rgba(142,99,61,0.23);
  --spoke-minor: rgba(162,119,73,0.42);
  --medallion-fill: #2a2519;
  --medallion-stroke: #a87848;
  --tick: rgba(240,224,191,0.28);
  --tick-major: rgba(246,231,201,0.72);
  --inner-tick: rgba(190,151,91,0.28);
  --inner-major: rgba(244,227,196,0.66);
  --inner-label: rgba(240,226,199,0.68);
  --pin-fill: #d6ac68;
  --pin-stroke: #4f3822;
  --hub-fill: #25251a;
  --hub-stroke: #8c6239;
  --card-border: rgba(159,119,65,0.24);
  --card-start: rgba(34,41,29,0.96);
  --card-end: rgba(15,21,15,0.98);
  --card-shadow: rgba(0,0,0,0.42);
  --info-bg: rgba(22,29,21,0.98);
  --note: #777967;
  --relief-filter: sepia(0.35) saturate(0.68) hue-rotate(355deg) brightness(0.61) contrast(1.08);
  --relief-active-filter: sepia(0.28) saturate(0.96) hue-rotate(355deg) brightness(0.92) contrast(1.08);
  --arc-day-1: #bd6f32; --arc-day-2: #c8893b; --arc-day-3: #c49d48; --arc-day-4: #a8a153;
  --arc-night-1: #426e67; --arc-night-2: #4d7d72; --arc-night-3: #56897b; --arc-night-4: #60958a;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--night); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  background:
    radial-gradient(circle at 30% 36%, var(--page-glow), transparent 34rem),
    linear-gradient(145deg, var(--page-start) 0%, var(--page-mid) 55%, var(--page-end) 100%);
  transition: color 0.25s ease, background 0.35s ease;
}

button, a { font: inherit; }
button { color: inherit; }

.app-shell { width: min(1080px, 100%); margin: 0 auto; padding: 0 32px; }

.topbar {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { color: var(--saffron); font: 600 30px/1 "Eczar", serif; }
.brand strong, .brand small { display: block; letter-spacing: 0.2em; }
.brand strong { font-size: 15px; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 8px; }

.location-button, .theme-control, footer button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 15px;
  background: var(--control-bg);
  cursor: pointer;
}
.location-button:hover, .theme-control:hover, footer button:hover { border-color: color-mix(in srgb, var(--saffron) 55%, transparent); }
.location-button span:first-child { margin-right: 7px; color: var(--saffron); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.theme-control { display: inline-flex; align-items: center; gap: 7px; padding-block: 8px; color: var(--muted); }
.theme-control > span { color: var(--saffron); font-size: 14px; }
.theme-control select { max-width: 132px; border: 0; outline: 0; color: var(--ink); background: transparent; cursor: pointer; }
.theme-control option { color: var(--ink); background: var(--panel); }

.hero { text-align: center; padding: 42px 0 22px; }
.eyebrow { color: var(--saffron); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; }
.eyebrow span:first-child { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: currentColor; vertical-align: 1px; box-shadow: 0 0 12px currentColor; }
h1, h2 { font-family: "Eczar", Georgia, serif; font-weight: 500; }
h1 { margin: 10px 0 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.1; }
.subtitle { min-height: 24px; margin: 8px 0 0; color: var(--muted); }

.time-stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr); align-items: center; gap: clamp(28px, 4vw, 64px); margin-top: 16px; text-align: left; }
.clock-column { min-width: 0; text-align: center; }
.clock-wrap { width: min(610px, 100%); margin: 0 auto -2px; }
.clock { width: 100%; overflow: visible; }
.dial-base { fill: url(#stoneFace); stroke: var(--dial-stroke); stroke-width: 3; }
.stone-rings circle { fill: none; stroke: rgba(202,126,63,0.25); stroke-width: 2; }
.stone-rings circle:nth-child(1) { stroke: var(--ring-outer); stroke-width: 9; }
.stone-rings circle:nth-child(2) { stroke: var(--ring-inner); stroke-width: 3; }
.pahar-arc { stroke-width: 29; fill: none; opacity: 0.5; }
.pahar-arc.current { stroke-width: 29; opacity: 1; filter: drop-shadow(0 0 9px rgba(255,157,46,0.42)); }
.pahar-spoke { stroke: var(--spoke); stroke-width: 7; stroke-linecap: round; }
.pahar-spoke.shaft { stroke: var(--spoke-shaft); stroke-width: 4; }
.pahar-spoke.minor { stroke: var(--spoke-minor); stroke-width: 2; }
.spoke-medallion { fill: var(--medallion-fill); stroke: var(--medallion-stroke); stroke-width: 2.5; }
.dial-tick { stroke: var(--tick); stroke-width: 1; }
.dial-tick.major { stroke: var(--tick-major); stroke-width: 2; }
.dial-label { fill: var(--muted); font: 500 12px "DM Sans", sans-serif; text-anchor: middle; dominant-baseline: middle; }
.inner-tick { stroke: var(--inner-tick); stroke-width: 1.5; }
.inner-tick.quarter { stroke: var(--inner-major); stroke-width: 3; }
.inner-label { fill: var(--inner-label); font: 500 15px "Eczar", serif; text-anchor: middle; dominant-baseline: middle; }
.day-hand { stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 7; opacity: 0.55; }
.watch-hand { stroke-linecap: round; }
.hour-hand { stroke: var(--ink); stroke-width: 8; }
.minute-hand { stroke: var(--gold); stroke-width: 5; }
.hand-pin { fill: var(--gold); stroke: var(--pin-stroke); stroke-width: 4; }
.hub-ring { fill: var(--hub-fill); stroke: var(--hub-stroke); stroke-width: 4; }
.top-pin { fill: var(--pin-fill); stroke-width: 3; }
.clock-readout { display: flex; align-items: center; justify-content: center; gap: 18px; margin: -2px auto 16px; }
.clock-readout > span:first-child { color: var(--saffron); font-size: 10px; font-weight: 600; letter-spacing: 0.15em; }
.clock-readout > strong { color: var(--ink); font: 500 27px "DM Sans", sans-serif; letter-spacing: 0.04em; }
.clock-readout > span:last-child { display: flex; flex-direction: column; align-items: flex-start; color: var(--gold); }
.clock-readout b { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; }
.clock-readout small { margin-top: 3px; color: var(--muted); font-size: 6px; letter-spacing: 0.16em; }

.pahar-wheel-image { pointer-events: none; opacity: var(--relief-opacity); filter: var(--relief-filter); }
.pahar-wheel-image.active { opacity: var(--relief-active-opacity); filter: var(--relief-active-filter); }
.pahar-sector-glow { pointer-events: none; fill: color-mix(in srgb, var(--saffron) 10%, transparent); }
.activity-card { overflow: hidden; border: 1px solid var(--card-border); border-radius: 26px; background: linear-gradient(160deg, var(--card-start), var(--card-end)); box-shadow: 0 28px 70px var(--card-shadow); }
.activity-body { padding: 24px 25px 22px; }
.activity-kicker { display: flex; align-items: center; gap: 9px; color: var(--saffron); font-size: 9px; font-weight: 600; letter-spacing: 0.19em; }
.activity-kicker > span:first-child { width: 18px; height: 1px; background: currentColor; }
.activity-hindi { margin: 19px 0 4px; color: color-mix(in srgb, var(--saffron) 70%, var(--muted)); font: 500 14px "Eczar", serif; letter-spacing: 0.08em; }
.activity-card h2 { margin: 0; color: var(--ink); font-size: clamp(25px, 3vw, 34px); line-height: 1.05; }
.activity-card h2 + p { margin: 12px 0 19px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.activity-steps { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.activity-step { height: 4px; border-radius: 999px; background: rgba(255,239,215,0.13); }
.activity-step.day { background: rgba(216,143,69,0.22); }
.activity-step.active { background: var(--saffron); box-shadow: 0 0 10px color-mix(in srgb, var(--saffron) 70%, transparent); }
.activity-note { margin: 15px 0 0; color: var(--note); font-size: 9px; line-height: 1.45; }

.progress-copy { display: grid; grid-template-columns: 58px minmax(140px, 310px) 58px; align-items: center; justify-content: center; gap: 12px; font-size: 12px; }
.progress-track { height: 3px; overflow: hidden; background: rgba(255,255,255,0.12); border-radius: 4px; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--saffron), var(--gold)); transition: width 0.5s ease; }
.progress-label { margin: 8px 0 0; color: var(--muted); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }

.solar-cards { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.solar-cards article { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 25px 15px; }
.solar-cards article + article { border-left: 1px solid var(--line); }
.solar-cards small, .solar-cards strong { display: block; text-align: left; }
.solar-cards small { color: var(--muted); font-size: 9px; letter-spacing: 0.15em; }
.solar-cards strong { margin-top: 4px; font: 500 18px "Eczar", serif; }
.solar-icon { color: var(--gold); font-size: 24px; }
.sunrise { color: var(--saffron); }
.sunset { color: color-mix(in srgb, var(--saffron) 70%, #cc5667); }

footer { display: flex; align-items: center; justify-content: space-between; padding: 0 0 30px; color: var(--muted); font-size: 12px; }
footer button { padding: 8px 13px; }
.footer-actions { display: flex; align-items: center; gap: 8px; }
#installButton { color: var(--ink); border-color: color-mix(in srgb, var(--saffron) 42%, transparent); }

.info-panel { position: fixed; z-index: 5; inset: auto 24px 24px auto; width: min(420px, calc(100vw - 48px)); padding: 32px; border: 1px solid color-mix(in srgb, var(--saffron) 30%, transparent); border-radius: 20px; background: var(--info-bg); box-shadow: 0 24px 80px var(--card-shadow); }
.info-panel h2 { margin: 6px 0 12px; font-size: 28px; }
.info-panel p { color: var(--muted); line-height: 1.65; }
.info-panel .eyebrow { color: var(--saffron); }
#closeInfo { position: absolute; top: 12px; right: 15px; border: 0; background: none; color: var(--muted); font-size: 25px; cursor: pointer; }

@media (max-width: 620px) {
  .app-shell { padding: 0 18px; }
  .topbar { min-height: 78px; }
  .brand small { display: none; }
  .topbar-actions { gap: 6px; }
  .theme-control, .location-button { padding: 8px 10px; }
  .theme-control select { width: 78px; }
  .hero { padding-top: 35px; }
  .clock-wrap { width: 98vw; margin-left: calc((100% - 98vw) / 2); }
  .solar-cards article { padding: 18px 6px; gap: 7px; }
  .solar-icon { display: none; }
  .solar-cards strong { font-size: 15px; }
  .progress-copy { grid-template-columns: 50px minmax(120px, 1fr) 50px; }
  footer { align-items: flex-end; gap: 16px; }
  footer p { max-width: 210px; }
  .footer-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 880px) {
  .time-stage { grid-template-columns: 1fr; gap: 28px; }
  .activity-card { width: min(590px, 100%); margin: 0 auto; }
}

@media (max-width: 560px) {
  .activity-card { border-radius: 20px; }
  .activity-body { padding: 21px 20px; }
  .clock-readout { flex-wrap: wrap; gap: 7px 16px; margin-top: -8px; }
  .clock-readout > span:first-child { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) { body, .progress-track span { transition: none; } }

body.ambient-mode {
  overflow: hidden;
  background: #000;
  user-select: none;
}

.ambient-mode .app-shell { width: 100%; height: 100vh; padding: 0 12px; }
.ambient-mode .topbar,
.ambient-mode .hero > .eyebrow,
.ambient-mode .hero > h1,
.ambient-mode .hero > .subtitle,
.ambient-mode .solar-cards,
.ambient-mode .activity-card,
.ambient-mode footer,
.ambient-mode .info-panel { display: none !important; }
.ambient-mode .hero {
  min-height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translate(var(--burn-x), var(--burn-y));
  transition: transform 1.2s ease;
}
.ambient-mode .clock-wrap { width: min(98vw, 78vh); margin: 0 auto -8px; }
.ambient-mode .progress-copy { width: min(86vw, 440px); margin: 0 auto; }
.ambient-mode .progress-label { padding-bottom: 12px; }

@media (orientation: landscape) {
  .ambient-mode .clock-wrap { width: min(76vw, 82vh); }
}