:root {
  --bg: #070b14;
  --bg-soft: #0d1323;
  --panel: rgba(18, 26, 44, .72);
  --panel-strong: rgba(20, 29, 49, .92);
  --text: #f7f9ff;
  --muted: #9ba8c0;
  --border: rgba(255,255,255,.09);
  --shadow: 0 24px 70px rgba(0,0,0,.33);
  --input: rgba(255,255,255,.07);
  --blue: #4d8dff;
  --cyan: #28c9de;
  --green: #39d98a;
  --purple: #9b6cff;
  --red: #ff566b;
}

body.light {
  --bg: #edf3fb;
  --bg-soft: #f7faff;
  --panel: rgba(255,255,255,.72);
  --panel-strong: rgba(255,255,255,.94);
  --text: #111827;
  --muted: #637188;
  --border: rgba(30,52,85,.10);
  --shadow: 0 24px 70px rgba(48,73,112,.14);
  --input: rgba(25,55,95,.06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(77,141,255,.12), transparent 32%),
    radial-gradient(circle at 90% 30%, rgba(155,108,255,.10), transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: background .35s ease, color .35s ease;
  overflow-x: hidden;
}
.startup-screen {
  position: fixed; inset: 0; z-index: 1000; background:#07162c;
  display:grid; place-items:center; overflow:hidden;
  transition:opacity .55s ease, visibility .55s ease;
}
.startup-art {
  position:absolute; inset:0;
  background: #07162c url("izzysoft-startup.png") center center / cover no-repeat;
  animation: startup-arrive 2.2s ease-out both;
}
.startup-progress {
  position:absolute; z-index:1; left:50%; top:79.3%; transform:translateX(-50%);
  width:min(470px, 62vw); height:12px; border-radius:999px; overflow:hidden;
  border:1px solid rgba(132,202,255,.42); background:rgba(14,35,70,.72);
  box-shadow:0 0 16px rgba(25,149,255,.2);
}
.startup-progress span {
  display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,#34dafa,#39adff);
  box-shadow:0 0 16px rgba(43,205,255,.85);
}
.skip-startup {
  position:absolute; right:24px; bottom:24px; z-index:1;
  border:1px solid rgba(160,215,255,.3); border-radius:999px;
  background:rgba(8,24,48,.62); color:#e8f5ff; cursor:pointer;
  padding:10px 16px; backdrop-filter:blur(12px);
}
.skip-startup:hover { background:rgba(36,73,119,.8); }
body.boot-complete .startup-screen { opacity:0; visibility:hidden; pointer-events:none; }
@keyframes startup-arrive {
  from { transform:scale(1.035); filter:brightness(.72); }
  to { transform:scale(1); filter:brightness(1); }
}
@media (prefers-reduced-motion:reduce) {
  .startup-art { animation:none; }
  .startup-screen { transition:none; }
}
button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #6ea0ff; outline-offset: 3px; }

.ambient {
  position: fixed;
  border-radius: 999px;
  filter: blur(80px);
  opacity: .18;
  pointer-events: none;
}
.ambient-a { width: 320px; height: 320px; background: #3679ff; top: -120px; left: -80px; }
.ambient-b { width: 360px; height: 360px; background: #8e59ff; right: -140px; top: 35%; }

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

.glass {
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.topbar {
  border-radius: 22px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 14px;
  z-index: 20;
}

.brand, .top-actions, .player, .radio-header, .radio-tools, .volume-wrap {
  display: flex;
  align-items: center;
}
.brand { gap: 12px; }
.logo-mark {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 800; letter-spacing: -.06em;
  color: white;
  background: linear-gradient(145deg, #5b95ff, #7758ff);
  box-shadow: 0 10px 24px rgba(78,117,255,.28);
}
.brand h1 { margin: 0; font-size: 18px; line-height: 1.05; }
.brand span { color: var(--muted); font-size: 12px; }
.top-actions { gap: 10px; }
.status-pill, .theme-toggle {
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 12px;
}
.status-pill { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #36db8b;
  box-shadow: 0 0 0 5px rgba(54,219,139,.12);
}
.theme-toggle { cursor: pointer; display:flex; gap:8px; align-items:center; }

.hero {
  min-height: 250px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: end;
  padding: 46px 8px 30px;
}
.eyebrow {
  display: inline-block;
  color: #6ea0ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero h2 {
  font-size: clamp(36px, 6vw, 68px);
  line-height: .96;
  letter-spacing: -.055em;
  margin: 10px 0 15px;
}
.hero p { color: var(--muted); max-width: 650px; line-height: 1.65; }
.hero-clock {
  width: 210px;
  border-radius: 22px;
  padding: 20px;
}
.hero-clock span, .hero-clock small { color: var(--muted); }
.hero-clock strong { display:block; font-size: 42px; margin: 6px 0; letter-spacing: -.05em; }

.app-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.app-card {
  min-height: 170px;
  border-radius: 22px;
  padding: 18px;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.app-card:hover { transform: translateY(-4px); }
.app-card::after {
  content: "";
  position:absolute; inset:auto -35px -55px auto;
  width:130px; height:130px; border-radius:50%;
  background: currentColor; opacity:.07; filter:blur(4px);
}
.app-icon {
  width: 45px; height: 45px; border-radius: 14px;
  display:grid; place-items:center;
  font-size: 20px; font-weight: 800;
  background: var(--input);
  margin-bottom: 28px;
}
.app-card h3 { margin: 0 0 6px; font-size: 17px; }
.app-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
.open-arrow { position:absolute; right:16px; top:16px; color:var(--muted); }
.accent-blue { color: var(--blue); }
.accent-cyan { color: var(--cyan); }
.accent-green { color: var(--green); }
.accent-purple { color: var(--purple); }
.accent-red { color: var(--red); }
.app-card h3, .app-card p, .open-arrow { color: var(--text); }
.app-card p, .open-arrow { color: var(--muted); }

.radio-panel {
  margin-top: 18px;
  border-radius: 26px;
  padding: 22px;
}
.radio-header { justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.radio-header h3 { margin: 5px 0 0; font-size: 26px; letter-spacing:-.03em; }
.radio-tools { gap: 8px; }
.radio-tools input {
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text);
  outline:none;
  border-radius:12px;
  padding:10px 12px;
  width:200px;
}
.icon-btn, .round-btn, .play-btn {
  border:1px solid var(--border);
  color:var(--text);
  background:var(--input);
  cursor:pointer;
}
.icon-btn { width:42px; height:42px; border-radius:12px; }
.player {
  border: 1px solid var(--border);
  background: var(--panel-strong);
  border-radius: 20px;
  padding: 16px;
  gap: 16px;
}
.station-art {
  width:72px; height:72px; border-radius:18px;
  display:grid; place-items:center;
  font-size:24px; font-weight:800; color:white;
  background:linear-gradient(145deg,#ff2b56,#7758ff);
}
.track-info { min-width: 180px; flex:1; }
.live-tag { color:#ff5f78; font-size:10px; font-weight:800; letter-spacing:.12em; }
.track-info h4 { margin:5px 0 4px; font-size:20px; }
.track-info p { margin:0; color:var(--muted); font-size:12px; }
.player-controls { display:flex; align-items:center; gap:8px; }
.round-btn { width:38px; height:38px; border-radius:50%; }
.play-btn {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(145deg,#5c94ff,#7758ff);
  color:white; border:none; font-size:18px;
  box-shadow:0 10px 24px rgba(91,115,255,.28);
}
.volume-wrap { gap:8px; min-width:180px; }
.volume-wrap input { width:140px; }

.visualizer {
  height: 56px;
  display:flex;
  align-items:end;
  gap:4px;
  margin:18px 2px 12px;
  overflow:hidden;
}
.visualizer span {
  flex:1;
  min-width:3px;
  border-radius:3px 3px 0 0;
  height:18%;
  background:linear-gradient(to top, #5b95ff, #9b6cff);
  opacity:.65;
  transition:height .12s linear, opacity .12s linear;
}

.price-panel { margin:22px 0; padding:22px; border-radius:23px; }
.price-panel h3 { margin:5px 0; font-size:24px; }
.price-panel p { color:var(--muted); font-size:13px; line-height:1.5; }
.price-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0; }
.price-grid label { font-weight:700; font-size:13px; min-width:0; }
.price-grid input { width:100%; display:block; margin:7px 0; padding:11px; border-radius:10px;
  border:1px solid var(--border); background:var(--input); color:var(--text); font:inherit; }
.price-grid button { width:100%; padding:10px; border:1px solid var(--border); border-radius:10px;
  background:var(--input); color:var(--text); cursor:pointer; }
.price-grid button:hover { border-color:#80aaff; }
@media(max-width:650px) { .price-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.station-list {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
}
.station {
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text);
  border-radius:14px;
  padding:11px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.station.active { outline:2px solid rgba(91,149,255,.6); }
.station small { color:var(--muted); display:block; margin-top:3px; }
.station .fav { color:#ffcc4d; }
.player-message { color:var(--muted); font-size:12px; margin:0 2px 16px; min-height:18px; }

.embedded-app { margin-top:20px; border-radius:24px; padding:16px; }
.embedded-toolbar { display:flex; align-items:center; gap:18px; padding:4px 4px 16px; }
.embedded-toolbar > div { flex:1; }
.embedded-toolbar h2 { margin:3px 0; font-size:23px; }
.embedded-toolbar p { margin:0; font-size:12px; color:var(--muted); }
.embedded-toolbar a, .back-button { color:var(--text); text-decoration:none; background:var(--input);
  border:1px solid var(--border); padding:10px 13px; border-radius:11px; font-size:13px; cursor:pointer; }
.embedded-app iframe { display:block; width:100%; height:calc(100vh - 185px); min-height:550px;
  border:1px solid var(--border); border-radius:15px; background:#fff; }
.embed-hint { margin:10px 4px 0; color:var(--muted); font-size:12px; }

.settings-dialog {
  border-radius:24px; width:min(520px, calc(100% - 24px)); max-height:min(85vh, 800px);
  padding:24px; color:var(--text); overflow:auto;
  background:var(--panel-strong);
}
.settings-dialog::backdrop { background:rgba(3,7,17,.72); backdrop-filter:blur(6px); }
.dialog-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.dialog-heading h3 { margin:5px 0; font-size:26px; }
.settings-dialog p { color:var(--muted); line-height:1.5; font-size:13px; }
.settings-dialog label { display:block; font-size:13px; font-weight:600; margin-top:15px; }
.settings-dialog label input { display:block; width:100%; margin-top:6px; padding:12px;
  color:var(--text); background:var(--input); border:1px solid var(--border); border-radius:11px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.dialog-actions button { cursor:pointer; border:1px solid var(--border); background:var(--input);
  color:var(--text); border-radius:11px; padding:11px 14px; }
.dialog-actions .primary-button { background:#527fff; color:#fff; border-color:transparent; }

footer {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px;
  padding:20px 8px 0;
}

@media (max-width: 1000px) {
  .app-grid { grid-template-columns:repeat(3,1fr); }
  .station-list { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 720px) {
  .startup-art { background-size:auto 100%; }
  .startup-progress { width:min(75vw,400px); top:79.3%; }
  .skip-startup { right:14px; bottom:18px; }
  .embedded-toolbar { flex-wrap:wrap; gap:10px; }
  .embedded-toolbar > div { order:2; flex-basis:100%; }
  .embedded-app iframe { height:calc(100dvh - 220px); min-height:480px; }
  .app-shell { width:min(100% - 18px, 1240px); padding-top:9px; }
  .topbar { top:8px; border-radius:18px; }
  .brand span, .status-pill { display:none; }
  .hero { grid-template-columns:1fr; padding-top:38px; }
  .hero-clock { width:100%; }
  .app-grid { grid-template-columns:repeat(2,1fr); }
  .player { flex-wrap:wrap; }
  .track-info { min-width:calc(100% - 104px); }
  .player-controls { order:3; }
  .volume-wrap { order:4; flex:1; min-width:160px; }
  .station-list { grid-template-columns:repeat(2,1fr); }
  .radio-header { align-items:flex-start; flex-direction:column; }
  .radio-tools, .radio-tools input { width:100%; }
  .radio-tools .icon-btn { flex:0 0 42px; }
}
@media (max-width: 430px) {
  .app-grid { grid-template-columns:1fr; }
  .app-card { min-height:135px; }
  .station-list { grid-template-columns:1fr; }
  .theme-toggle span:last-child { display:none; }
  .top-actions { gap:5px; }
  .topbar { padding:12px; }
  .theme-toggle { padding:9px; }
}