:root {
  --space-bg-0: #05091c;
  --space-bg-1: #081435;
  --space-bg-2: #14134b;
  --space-ink: #f8f9ff;
  --space-soft: #c8cbed;
  --space-dim: #8e96c9;
  --space-line: rgba(212, 220, 255, .20);
  --space-glass: rgba(16, 29, 73, .55);
  --space-glass-strong: rgba(18, 31, 82, .76);
  --space-glass-soft: rgba(255, 255, 255, .075);
  --space-violet: #8f73ff;
  --space-lilac: #b7a6ff;
  --space-blue: #63b8ff;
  --space-cyan: #66e6ff;
  --space-pink: #ff9adf;
  --space-glow: 0 0 0 1px rgba(205, 213, 255, .16), 0 18px 54px rgba(4, 7, 28, .32), inset 0 1px 0 rgba(255,255,255,.20);
  --space-glow-active: 0 0 0 1px rgba(182, 160, 255, .60), 0 0 28px rgba(128, 98, 255, .30), inset 0 1px 0 rgba(255,255,255,.28);
  color-scheme: dark;
}

:root[data-theme="space"],
:root[data-theme="dark"],
:root[data-theme="light"] {
  --bg: #05091c;
  --bg-elevated: #091331;
  --surface: rgba(16, 29, 73, .64);
  --surface-2: rgba(24, 40, 91, .72);
  --surface-3: rgba(37, 52, 105, .72);
  --text: #f8f9ff;
  --text-soft: #c8cbed;
  --text-dim: #8e96c9;
  --line: rgba(212,220,255,.16);
  --accent: #8f73ff;
  --accent-2: #63b8ff;
  --accent-3: #ff9adf;
  --success: #63e3c3;
  --app-top: #0b1640;
  --app-bottom: #05091c;
  --card-top: rgba(24,39,91,.62);
  --card-bottom: rgba(10,20,53,.62);
  --nav-bg: rgba(11, 21, 55, .72);
  --sheet-bg: rgba(8, 16, 43, .96);
  --shadow-card: 0 18px 54px rgba(3,6,26,.28);
}

:root[data-theme="nebula"] {
  --space-bg-1: #25113f;
  --space-bg-2: #5a1f70;
  --space-violet: #d170ff;
  --space-blue: #8f8cff;
  --space-pink: #ff92cf;
  --accent: #d170ff;
  --accent-2: #8f8cff;
}

:root[data-theme="aurora"] {
  --space-bg-1: #071d34;
  --space-bg-2: #103552;
  --space-violet: #68e0d7;
  --space-blue: #64b9ff;
  --space-pink: #a1f3d0;
  --accent: #64dcca;
  --accent-2: #65baff;
}

:root[data-theme="starlight"] {
  --space-bg-1: #080c25;
  --space-bg-2: #18224f;
  --space-violet: #c8cfff;
  --space-blue: #83a8ff;
  --space-pink: #f3d7ff;
  --accent: #aab7ff;
  --accent-2: #88a9ff;
}

html {
  background: #030613;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--space-pink) 22%, transparent), transparent 25%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--space-blue) 19%, transparent), transparent 28%),
    radial-gradient(circle at 40% 105%, color-mix(in srgb, var(--space-violet) 18%, transparent), transparent 34%),
    #030613;
  color: var(--space-ink);
}

.app-frame {
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--space-pink) 26%, transparent), transparent 30%),
    radial-gradient(circle at 92% 23%, color-mix(in srgb, var(--space-blue) 22%, transparent), transparent 29%),
    radial-gradient(circle at 44% 51%, rgba(111, 86, 255, .13), transparent 34%),
    linear-gradient(180deg, var(--space-bg-1) 0%, var(--space-bg-0) 52%, #040716 100%);
}

.app-frame::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -2;
  pointer-events: none;
  opacity: .88;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(151,185,255,.75) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(224,183,255,.68) 0 1.2px, transparent 1.9px),
    radial-gradient(ellipse at 12% 44%, rgba(162,113,255,.16), transparent 22%),
    radial-gradient(ellipse at 84% 72%, rgba(75,153,255,.13), transparent 20%);
  background-size: 71px 71px, 109px 109px, 151px 151px, 100% 100%, 100% 100%;
  background-position: 0 0, 27px 19px, 54px 81px, 0 0, 0 0;
  animation: star-drift 42s linear infinite alternate;
}

.app-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(rgba(0,0,0,var(--ui-dim)), rgba(0,0,0,var(--ui-dim)));
  transition: background .22s ease;
}

.app-root::before,
.app-root::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: .55;
}

.app-root::before {
  width: 210px;
  height: 210px;
  left: -130px;
  top: 28vh;
  background: radial-gradient(circle at 35% 32%, #8e8dff, #28366f 46%, #101730 65%, transparent 68%);
  box-shadow: 0 0 60px rgba(126,102,255,.28);
}

.app-root::after {
  width: 128px;
  height: 128px;
  right: -78px;
  top: 12vh;
  background: radial-gradient(circle at 35% 30%, #f4ccff, #7756c7 43%, #1e2453 67%, transparent 69%);
  box-shadow: 0 0 54px rgba(217,160,255,.24);
}

.screen {
  position: relative;
  padding: max(20px, env(safe-area-inset-top)) 16px calc(106px + env(safe-area-inset-bottom));
}

.control-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 12%, rgba(132,102,255,.13), transparent 18%),
    linear-gradient(132deg, transparent 34%, rgba(255,255,255,.018) 35%, transparent 36%);
}

h1, h2, h3, .home-title, .hero-status, .mini-value, .list-time {
  color: var(--space-ink);
  text-shadow: 0 2px 16px rgba(100, 105, 255, .10);
}

.muted { color: var(--space-soft); }
.eyebrow, .section-title { color: #aeb7ed; }

.card,
.settings-row,
.status-option,
.calendar-card,
.list-row,
.event-row,
.settings-panel,
.display-preview,
.empty-state,
.modal-card,
.sheet-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--space-line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025) 36%, transparent 72%),
    linear-gradient(180deg, rgba(27,44,100,.67), rgba(10,20,55,.66));
  box-shadow: var(--space-glow);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.card::after,
.settings-panel::after,
.calendar-card::after,
.settings-row::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  right: -70px;
  bottom: -95px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 35% 30%, rgba(213,197,255,.38), rgba(102,92,223,.12) 44%, transparent 66%);
  box-shadow: inset -12px -10px 26px rgba(42,56,133,.28);
  opacity: .65;
}

.admin-header,
.page-header,
.subpage-header {
  position: relative;
  z-index: 3;
  margin-bottom: 16px;
}

.cosmic-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 52px;
  margin-bottom: 6px;
}

.cosmic-logo,
.avatar,
.cosmic-profile,
.back-button,
.round-add,
.calendar-month button {
  display: grid;
  place-items: center;
  min-width: 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(221,226,255,.22);
  color: #eef1ff;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 10px 30px rgba(3,7,31,.24);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.cosmic-logo { font-size: 22px; }
.cosmic-profile { font-weight: 700; }
.cosmic-profile::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: -1px;
  bottom: 5px;
  border-radius: 50%;
  background: var(--space-violet);
  box-shadow: 0 0 12px var(--space-violet), 0 0 0 2px #10173c;
}

.cosmic-brand {
  margin: 0;
  text-align: center;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 750;
}

.cosmic-brand::after {
  content: "✦";
  margin-left: 7px;
  color: var(--space-lilac);
  font-size: 13px;
  vertical-align: top;
  text-shadow: 0 0 14px var(--space-violet);
}

.space-hero-visual {
  position: relative;
  height: 250px;
  margin: 2px -2px 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.space-hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% 3% 4%;
  border-radius: 48%;
  background:
    radial-gradient(ellipse at 46% 70%, rgba(137,105,255,.24), transparent 45%),
    radial-gradient(ellipse at 60% 36%, rgba(78,173,255,.16), transparent 38%);
  filter: blur(3px);
}

.space-hero-visual::after {
  content: "";
  position: absolute;
  width: 310px;
  height: 106px;
  border: 1px solid rgba(222,205,255,.38);
  border-radius: 50%;
  transform: rotate(-9deg);
  box-shadow: 0 0 24px rgba(175,128,255,.42), inset 0 0 22px rgba(117,173,255,.16);
  opacity: .62;
}

.planet-mascot {
  --planet-a: #a89eff;
  --planet-b: #735bdf;
  --planet-c: #57bfff;
  position: relative;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  z-index: 2;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.95) 0 2%, rgba(255,255,255,.34) 6%, transparent 17%),
    radial-gradient(circle at 31% 29%, var(--planet-c), transparent 36%),
    radial-gradient(circle at 72% 75%, var(--planet-b), transparent 47%),
    linear-gradient(145deg, #c4bcff, var(--planet-a) 40%, #546ee5 100%);
  box-shadow:
    inset 14px 10px 30px rgba(255,255,255,.26),
    inset -24px -30px 42px rgba(25,29,99,.34),
    0 0 38px rgba(130,108,255,.48),
    0 30px 52px rgba(5,9,36,.44);
  animation: planet-float 5.8s ease-in-out infinite;
}

:root[data-theme="nebula"] .planet-mascot { --planet-a:#d28cff; --planet-b:#8a3ca8; --planet-c:#ff9adf; }
:root[data-theme="aurora"] .planet-mascot { --planet-a:#7ee8dd; --planet-b:#2f80ac; --planet-c:#abffd1; }
:root[data-theme="starlight"] .planet-mascot { --planet-a:#d6dcff; --planet-b:#667fe0; --planet-c:#b2c4ff; }

.planet-mascot.character-nova { --planet-a:#e197ff; --planet-b:#9c4ed0; --planet-c:#ff9fda; }
.planet-mascot.character-luna { --planet-a:#9bd5ff; --planet-b:#5678d6; --planet-c:#d0e7ff; }
.planet-mascot.character-cloud { border-radius: 45% 55% 48% 52%; --planet-a:#dce8ff; --planet-b:#8fa7da; --planet-c:#eff8ff; }
.planet-mascot.character-aqua { --planet-a:#79e4f8; --planet-b:#4478cf; --planet-c:#b6fbff; }

.planet-mascot .ring {
  position: absolute;
  width: 238px;
  height: 58px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) rotate(-10deg);
  border: 6px solid rgba(236,218,255,.70);
  border-left-color: rgba(126,166,255,.35);
  border-right-color: rgba(255,176,230,.68);
  border-radius: 50%;
  filter: drop-shadow(0 0 11px rgba(175,134,255,.78));
  animation: ring-pulse 5s ease-in-out infinite;
}

.planet-mascot .face {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 74px;
  height: 44px;
  transform: translate(-50%,-50%);
}

.planet-mascot .eye {
  position: absolute;
  top: 4px;
  width: 14px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 25%, #fff 0 9%, #20233b 11% 36%, #050612 56%);
  box-shadow: 0 1px 2px rgba(255,255,255,.32);
}
.planet-mascot .eye.left { left: 7px; }
.planet-mascot .eye.right { right: 7px; }
.planet-mascot .mouth {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 25px;
  height: 12px;
  transform: translateX(-50%);
  border-bottom: 3px solid #14162d;
  border-radius: 0 0 50% 50%;
}
.planet-mascot .cheek {
  position: absolute;
  top: 25px;
  width: 18px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,143,203,.46);
  filter: blur(2px);
}
.planet-mascot .cheek.left { left: -1px; }
.planet-mascot .cheek.right { right: -1px; }

.space-satellite {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  opacity: .9;
  box-shadow: inset 4px 3px 9px rgba(255,255,255,.35), 0 0 17px rgba(130,121,255,.45);
}
.space-satellite.one { width: 30px; height: 30px; left: 14%; top: 35%; background: linear-gradient(145deg,#9edcff,#6968d8); animation: satellite-one 9s ease-in-out infinite; }
.space-satellite.two { width: 24px; height: 24px; right: 14%; bottom: 26%; background: linear-gradient(145deg,#f3aee8,#6e66d6); animation: satellite-two 7s ease-in-out infinite; }
.space-spark { position:absolute; color:#d9d6ff; text-shadow:0 0 14px currentColor; animation: twinkle 2.8s ease-in-out infinite; }
.space-spark.s1 { left:21%; top:18%; font-size:12px; }
.space-spark.s2 { right:18%; top:26%; font-size:16px; animation-delay:.8s; }
.space-spark.s3 { left:30%; bottom:15%; font-size:9px; animation-delay:1.4s; }

.home-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cosmic-info-card { min-height: 148px; padding: 18px; border-radius: 26px; }
.cosmic-info-card .eyebrow { margin-bottom: 18px; }
.cosmic-info-card .big-copy { margin: 0 0 5px; font-size: 29px; line-height: 1; font-weight: 730; letter-spacing: -.04em; }
.cosmic-info-card .accent-copy { color: var(--space-lilac); font-size: 29px; font-weight: 760; line-height: 1; text-shadow: 0 0 20px rgba(156,126,255,.34); }
.cosmic-info-card .small-copy { margin: 8px 0 0; color: var(--space-soft); font-size: 13px; line-height: 1.35; }
.cosmic-info-card.status-card::before,
.cosmic-info-card.next-card::before {
  content:"";
  position:absolute;
  width:96px;
  height:96px;
  right:-28px;
  bottom:-24px;
  border-radius:50%;
  opacity:.65;
  background: radial-gradient(circle at 35% 30%, rgba(221,198,255,.60), rgba(95,93,208,.22) 44%, transparent 68%);
}

.focus-card {
  margin-top: 12px;
  min-height: 108px;
  padding: 16px;
  border-radius: 26px;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  gap: 12px;
  align-items: center;
}
.focus-ring {
  width: 60px;
  height: 60px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: conic-gradient(var(--space-lilac) 0 72%, rgba(255,255,255,.10) 72% 100%);
  box-shadow: 0 0 22px rgba(143,115,255,.25);
}
.focus-ring::after { content:""; width:47px; height:47px; position:absolute; border-radius:50%; background:#111d4b; border:1px solid rgba(255,255,255,.13); }
.focus-ring span { position:relative; z-index:1; font-size:15px; font-weight:750; }
.focus-copy strong { display:block; font-size:17px; }
.focus-copy small { color:var(--space-soft); }
.waveform { height:38px; display:flex; align-items:center; gap:3px; }
.waveform i { display:block; width:3px; border-radius:4px; background:linear-gradient(var(--space-blue),var(--space-violet)); animation: wave 1.4s ease-in-out infinite; box-shadow:0 0 8px rgba(111,113,255,.35); }
.waveform i:nth-child(1){height:9px}.waveform i:nth-child(2){height:19px;animation-delay:.08s}.waveform i:nth-child(3){height:30px;animation-delay:.16s}.waveform i:nth-child(4){height:18px;animation-delay:.24s}.waveform i:nth-child(5){height:34px;animation-delay:.32s}.waveform i:nth-child(6){height:14px;animation-delay:.4s}.waveform i:nth-child(7){height:24px;animation-delay:.48s}

.section-title {
  margin: 20px 4px 10px;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.quick-status-scroll {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
  overflow: visible;
}

.status-chip {
  min-width: 0;
  min-height: 72px;
  padding: 9px 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border-radius: 19px;
  border: 1px solid rgba(213,219,255,.16);
  color: #dce0ff;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  font-size: 11px;
  font-weight: 650;
}
.status-chip::before { content:"✦"; font-size:17px; color:#aeb5ef; text-shadow:0 0 12px rgba(160,144,255,.55); }
.status-chip[data-status-select="working"]::before { content:"⌨"; }
.status-chip[data-status-select="break"]::before { content:"☕"; }
.status-chip[data-status-select="lunch"]::before { content:"♨"; }
.status-chip[data-status-select="meeting"]::before { content:"◉"; }
.status-chip[data-status-select="away"]::before { content:"➤"; }
.status-chip.active {
  color:#fff;
  border-color:rgba(181,158,255,.78);
  background:linear-gradient(155deg, rgba(140,104,255,.30), rgba(86,126,255,.12));
  box-shadow:var(--space-glow-active);
}

.home-lower-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; align-items:stretch; }
.home-reminders { min-height:148px; padding:14px; border-radius:25px; }
.home-reminders-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.home-reminders-head strong { font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#aeb7ed; }
.home-reminder-row { display:grid; grid-template-columns:8px 1fr auto; gap:9px; align-items:center; padding:10px 3px; border-top:1px solid rgba(255,255,255,.07); }
.home-reminder-row:first-of-type { border-top:0; }
.home-reminder-row .dot { width:7px; height:7px; border-radius:50%; background:var(--space-violet); box-shadow:0 0 11px var(--space-violet); }
.home-reminder-row strong { display:block; font-size:12px; }
.home-reminder-row small { color:var(--space-soft); font-size:10px; }
.home-reminder-row .bell { color:#bcc5f6; }
.home-empty { padding:16px 2px; color:var(--space-soft); font-size:12px; }

.device-cosmic-card {
  min-height:148px;
  padding:15px 12px;
  border-radius:25px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:4px;
}
.device-cosmic-card .lock-orb { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; margin-bottom:5px; border:1px solid rgba(220,225,255,.22); background:rgba(255,255,255,.07); box-shadow:0 0 20px rgba(139,116,255,.20); }
.device-cosmic-card strong { font-size:14px; }
.device-cosmic-card small { color:var(--space-soft); font-size:10px; }
.device-cosmic-card .restricted { margin-top:8px; padding:6px 10px; border:1px solid rgba(221,225,255,.16); border-radius:999px; color:#d6dbff; font-size:10px; background:rgba(255,255,255,.055); }

.bottom-nav {
  position: fixed;
  left: max(12px, calc((100vw - var(--content-max)) / 2 + 12px));
  right: max(12px, calc((100vw - var(--content-max)) / 2 + 12px));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 20;
  height: 76px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 3px;
  border: 1px solid rgba(214,220,255,.18);
  border-radius: 27px;
  background: linear-gradient(180deg, rgba(27,41,91,.74), rgba(7,15,43,.82));
  box-shadow: 0 22px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  backdrop-filter: blur(28px) saturate(155%);
}
.nav-item { min-width:0; border-radius:20px; color:#aeb5dc; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:transform .26s var(--ease-out), background .26s ease, color .26s ease; }
.nav-item svg { width:21px; height:21px; stroke-width:1.7; }
.nav-item span { font-size:9px; font-weight:650; }
.nav-item.active { color:#fff; background:linear-gradient(145deg, rgba(125,91,255,.23), rgba(79,123,255,.10)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px rgba(110,87,255,.13); }
.nav-item:nth-child(3) { position:relative; }
.nav-item:nth-child(3)::before { content:""; position:absolute; width:49px; height:49px; border-radius:50%; background:radial-gradient(circle at 35% 25%, #dcd9ff, #7664e8 38%, #3155af 70%); box-shadow:inset 7px 6px 16px rgba(255,255,255,.24), 0 0 24px rgba(127,105,255,.42); opacity:.18; transition:opacity .25s ease, transform .25s ease; }
.nav-item:nth-child(3).active::before { opacity:.72; transform:scale(1.03); }
.nav-item:nth-child(3) svg,.nav-item:nth-child(3) span { position:relative; z-index:1; }

.page-header h1,
.subpage-header h1 { font-size:32px; margin-bottom:4px; }
.page-header .muted { font-size:13px; }
.round-add { font-size:25px; color:#fff; background:radial-gradient(circle at 34% 28%, #d6d3ff, #735fff 45%, #456ed1 78%); box-shadow:inset 4px 4px 12px rgba(255,255,255,.27), 0 0 25px rgba(118,92,255,.38); }

.date-strip {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
  padding:9px;
  margin-bottom:12px;
  border:1px solid rgba(215,220,255,.16);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.022));
  box-shadow:var(--space-glow);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
}
.date-pill { min-width:0; min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:17px; color:#aeb5dc; font-size:10px; }
.date-pill strong { font-size:17px; color:#dce2ff; }
.date-pill.today { color:#c8bcff; border:1px solid rgba(183,161,255,.54); background:rgba(132,104,255,.16); box-shadow:0 0 18px rgba(131,101,255,.18), inset 0 1px 0 rgba(255,255,255,.14); }

.schedule-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:14px; border:1px solid rgba(214,221,255,.14); border-radius:22px; background:rgba(255,255,255,.035); }
.schedule-tabs span { min-height:42px; display:grid; place-items:center; border-radius:18px; font-size:13px; color:#aeb5dc; }
.schedule-tabs .active { color:#fff; background:linear-gradient(145deg,rgba(153,123,255,.26),rgba(87,126,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }

.schedule-list { position:relative; gap:10px; padding-left:58px; }
.schedule-list::before { content:""; position:absolute; left:43px; top:18px; bottom:18px; width:1px; background:linear-gradient(transparent,rgba(158,144,255,.72) 8%,rgba(91,149,255,.52) 90%,transparent); box-shadow:0 0 8px rgba(132,112,255,.28); }
.schedule-list .list-row { min-height:104px; border-radius:24px; overflow:visible; }
.schedule-list .list-row::before { content:""; position:absolute; left:-23px; top:50%; width:10px; height:10px; transform:translate(-50%,-50%); border-radius:50%; background:#8f76ff; border:2px solid #c9c4ff; box-shadow:0 0 14px #8069ff; }
.schedule-list .list-row-main { display:grid; grid-template-columns:58px 1fr; gap:13px; width:100%; align-items:center; text-align:left; padding:15px 82px 15px 14px; }
.schedule-list .list-time { position:absolute; left:-74px; top:50%; transform:translateY(-50%); color:#a996ff; font-size:15px; font-weight:680; }
.schedule-list .list-copy strong { font-size:18px; }
.schedule-list .list-copy small { color:var(--space-soft); }
.schedule-list .list-copy::before { content:"✦"; float:left; width:44px; height:44px; margin-right:11px; display:grid; place-items:center; border-radius:50%; color:#c8c5ff; background:rgba(255,255,255,.06); border:1px solid rgba(215,222,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.11); }
.schedule-list .list-row::after { width:120px; height:80px; right:6px; bottom:9px; border-radius:45% 55% 50% 50%; background:radial-gradient(circle at 38% 31%,rgba(218,201,255,.52),rgba(96,81,205,.28) 38%,rgba(54,83,163,.10) 63%,transparent 66%); box-shadow:0 0 22px rgba(128,98,255,.18); }
.schedule-list .switch { position:absolute; right:46px; bottom:12px; transform:scale(.76); z-index:3; }
.schedule-list .icon-delete { position:absolute; right:13px; bottom:18px; z-index:3; }

.calendar-card { padding:14px; border-radius:28px; }
.calendar-month { margin-bottom:10px; }
.calendar-month strong { font-size:18px; }
.calendar-month button { width:34px; height:34px; min-width:34px; }
.calendar-week { color:#929ac6; }
.calendar-day { border-radius:50%; color:#eaf0ff; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; }
.calendar-day.today:not(.selected) { box-shadow:inset 0 0 0 1px rgba(157,139,255,.52); }
.calendar-day.selected { background:radial-gradient(circle at 38% 30%,#d5caff,#8e70ff 42%,#5262ce 72%); color:#fff; box-shadow:inset 5px 4px 10px rgba(255,255,255,.22),0 0 20px rgba(129,105,255,.42); transform:scale(1.05); }
.calendar-day .event-dot { background:#9b82ff; box-shadow:0 0 7px #8068ff; }
.calendar-events .event-row { border-radius:22px; }
.event-row .event-time { color:#b7a7ff; }

.calendar-orbit-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0 4px; }
.orbit-summary-card { min-height:92px; padding:12px; border-radius:20px; border:1px solid rgba(215,221,255,.15); background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.022)); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); }
.orbit-summary-card strong { display:block; font-size:19px; }
.orbit-summary-card small { color:var(--space-soft); font-size:10px; }
.orbit-summary-card .mini-planet { width:28px; height:28px; margin-top:8px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f6e8ff,#8e73ed 44%,#3d5ca5 72%); box-shadow:inset 3px 2px 7px rgba(255,255,255,.28),0 0 13px rgba(135,108,255,.27); }

.status-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.status-option { min-height:150px; padding:18px; border-radius:26px; text-align:left; }
.status-option.active { border-color:rgba(181,158,255,.68); box-shadow:var(--space-glow-active); }
.status-orb { width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 34% 28%,#e4d8ff,#8b72ed 42%,#445eae 73%); box-shadow:inset 5px 4px 10px rgba(255,255,255,.25),0 0 21px rgba(133,105,255,.25); }
.status-working .status-orb { background:radial-gradient(circle at 34% 28%,#d7e7ff,#7294f0 43%,#3e54ad 72%); }
.status-break .status-orb { background:radial-gradient(circle at 34% 28%,#ffe5f8,#c37de1 43%,#694f9f 72%); }
.status-lunch .status-orb { background:radial-gradient(circle at 34% 28%,#fff2cc,#e5ad6c 43%,#865a75 72%); }
.status-meeting .status-orb { background:radial-gradient(circle at 34% 28%,#dedbff,#8879ee 43%,#4c5cb9 72%); }
.status-away .status-orb { background:radial-gradient(circle at 34% 28%,#d6fff5,#6fcabc 43%,#3d7598 72%); }
.status-option-copy strong { font-size:18px; }
.status-option-copy small { color:#b8abff; }

.settings-group { gap:10px; }
.settings-row { min-height:84px; border-radius:23px; }
.settings-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:#d7d9ff; background:radial-gradient(circle at 35% 30%,rgba(202,197,255,.35),rgba(105,91,220,.16)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.settings-copy small { color:var(--space-soft); }
.chevron { color:#aab1dc; }

.display-theme-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.theme-tile { min-height:110px; padding:8px 5px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; border-radius:20px; border:1px solid rgba(215,221,255,.15); color:#d5d9f8; background:rgba(255,255,255,.035); }
.theme-tile.active { border-color:rgba(182,160,255,.72); box-shadow:var(--space-glow-active); color:#fff; }
.theme-preview { position:relative; width:58px; height:58px; border-radius:18px; overflow:hidden; background:radial-gradient(circle at 32% 30%,#cfc7ff,#705ad4 42%,#172f71 75%); box-shadow:inset 5px 4px 12px rgba(255,255,255,.25); }
.theme-preview::after { content:""; position:absolute; width:72px; height:21px; border:2px solid rgba(239,221,255,.72); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-14deg); box-shadow:0 0 7px rgba(193,159,255,.42); }
.theme-tile[data-display-theme="nebula"] .theme-preview { background:radial-gradient(circle at 28% 32%,#ffd2f4,#b65bde 35%,#4b246e 68%,#15122c); }
.theme-tile[data-display-theme="aurora"] .theme-preview { background:radial-gradient(circle at 28% 32%,#cafff0,#4ed9cf 35%,#3378a5 68%,#0b2546); }
.theme-tile[data-display-theme="starlight"] .theme-preview { background:radial-gradient(circle at 28% 32%,#f8f6ff,#aeb9ff 32%,#5364b9 68%,#101b46); }
.theme-tile small { font-size:10px; }

.settings-panel.cosmic-settings { padding:12px; border-radius:28px; }
.cosmic-setting-row { padding:14px 6px; border-bottom:1px solid rgba(255,255,255,.07); }
.cosmic-setting-row:last-child { border-bottom:0; }
.cosmic-setting-row .label-stack strong { display:block; font-size:14px; }
.cosmic-setting-row .label-stack small { color:var(--space-soft); }
.range { accent-color:var(--space-violet); }
.segmented { background:rgba(255,255,255,.035); }
.segmented button.active { background:linear-gradient(145deg,rgba(143,112,255,.42),rgba(75,113,225,.22)); box-shadow:0 0 15px rgba(119,96,255,.18); }
.switch { background:rgba(255,255,255,.10); }
.switch.on { background:linear-gradient(90deg,#6c65ef,#8e71ff); box-shadow:0 0 15px rgba(117,92,255,.25); }

.motion-style-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:10px; }
.motion-style-grid button { min-height:38px; border:1px solid rgba(214,221,255,.14); border-radius:16px; color:#bfc5eb; background:rgba(255,255,255,.035); }
.motion-style-grid button.active { color:#fff; border-color:rgba(183,160,255,.64); background:rgba(128,100,255,.18); box-shadow:0 0 16px rgba(125,98,255,.18); }
.character-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px; }
.character-choice { aspect-ratio:1; border-radius:50%; border:1px solid rgba(215,222,255,.14); background:rgba(255,255,255,.035); display:grid; place-items:center; }
.character-choice.active { border-color:rgba(183,160,255,.70); box-shadow:var(--space-glow-active); }
.character-choice span { width:35px; height:35px; border-radius:50%; background:radial-gradient(circle at 34% 28%,#ddd4ff,#8067df 44%,#405ab2 75%); box-shadow:inset 3px 2px 7px rgba(255,255,255,.28); }
.character-choice[data-display-character="nova"] span { background:radial-gradient(circle at 34% 28%,#ffd9f5,#d17ae9 44%,#7c4ba8 75%); }
.character-choice[data-display-character="luna"] span { background:radial-gradient(circle at 34% 28%,#e7f4ff,#82b5ef 44%,#4b68ba 75%); }
.character-choice[data-display-character="cloud"] span { background:radial-gradient(circle at 34% 28%,#fff,#bfcae8 44%,#7184af 75%); border-radius:45% 55% 48% 52%; }
.character-choice[data-display-character="aqua"] span { background:radial-gradient(circle at 34% 28%,#d3ffff,#63d7e7 44%,#3877b7 75%); }

.locked-setting-card { margin-top:12px; padding:18px; border-radius:26px; display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center; text-align:left; }
.locked-setting-card .lock-orb { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(221,211,255,.24),rgba(90,84,202,.12)); border:1px solid rgba(218,224,255,.17); }
.locked-setting-card small { display:block; color:var(--space-soft); margin-top:4px; }
.locked-setting-card .restricted { padding:7px 10px; border-radius:999px; border:1px solid rgba(215,221,255,.15); color:#d8dcff; font-size:10px; }

.list-row, .event-row { transition:transform .24s var(--ease-out), border-color .24s ease, box-shadow .24s ease; }
.list-row:active, .event-row:active, .settings-row:active, .status-option:active, .status-chip:active, .nav-item:active { transform:scale(.975); }

.overlay,
.modal-backdrop,
.sheet-backdrop { background:rgba(3,6,20,.66)!important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.modal-card,
.sheet-card { color:var(--space-ink); border-color:rgba(218,224,255,.20); background:linear-gradient(180deg,rgba(19,34,78,.96),rgba(7,16,43,.98)); }
input, select { color:var(--space-ink); background:rgba(255,255,255,.06); border-color:rgba(215,222,255,.15); }

@keyframes star-drift { from { transform:translate3d(-1.5%,-1%,0) scale(1.03); } to { transform:translate3d(1.5%,1%,0) scale(1.06); } }
@keyframes planet-float { 0%,100% { transform:translate3d(0,3px,0) rotate(-1deg); } 50% { transform:translate3d(0,-10px,0) rotate(1.2deg); } }
@keyframes ring-pulse { 0%,100% { opacity:.72; filter:drop-shadow(0 0 8px rgba(175,134,255,.54)); } 50% { opacity:1; filter:drop-shadow(0 0 17px rgba(188,154,255,.94)); } }
@keyframes satellite-one { 0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-9px)} }
@keyframes satellite-two { 0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,8px)} }
@keyframes twinkle { 0%,100%{opacity:.32;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(16deg)} }
@keyframes wave { 0%,100%{transform:scaleY(.52);opacity:.68}50%{transform:scaleY(1);opacity:1} }

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after { animation:none!important; transition-duration:.01ms!important; }

:root[data-motion-style="bouncy"] .planet-mascot { animation-timing-function:cubic-bezier(.2,1.6,.35,1); animation-duration:4.4s; }
:root[data-motion-style="floaty"] .planet-mascot { animation-duration:8.2s; }
:root[data-motion-style="floaty"] .app-frame::before { animation-duration:58s; }

@media (hover:hover) and (pointer:fine) {
  .card:hover, .settings-row:hover, .status-option:hover { border-color:rgba(213,205,255,.30); box-shadow:0 20px 60px rgba(4,7,31,.34),0 0 22px rgba(111,88,255,.09),inset 0 1px 0 rgba(255,255,255,.20); }
  .nav-item:hover { color:#fff; transform:translateY(-2px); }
}

@media (max-width:380px) {
  .screen { padding-left:12px; padding-right:12px; }
  .space-hero-visual { height:220px; }
  .planet-mascot { width:136px; height:136px; }
  .planet-mascot .ring { width:208px; }
  .home-card-grid { gap:8px; }
  .cosmic-info-card { padding:14px; min-height:138px; }
  .cosmic-info-card .big-copy,.cosmic-info-card .accent-copy{font-size:25px}
  .status-chip { min-height:66px; font-size:9px; }
  .home-lower-grid { grid-template-columns:1fr; }
  .device-cosmic-card { min-height:112px; }
  .display-theme-grid { grid-template-columns:repeat(2,1fr); }
}

@media (min-width:620px) {
  body { padding:24px 0; }
  .app-frame { box-shadow:0 34px 110px rgba(1,4,22,.72),0 0 0 1px rgba(199,207,255,.13); }
  .bottom-nav { bottom:34px; }
}

@media (prefers-reduced-motion:reduce) {
  .app-frame::before,.planet-mascot,.planet-mascot .ring,.space-satellite,.space-spark,.waveform i { animation:none!important; }
}