/* ---------- v6 UI pass: Bliss Dusk, XP Luna glass, aurora glow ---------- */
html { background:#071a2e; }
html, body { min-height:100%; }
body { position:relative; min-height:100vh; font-family:'Ubuntu','Fira Sans','Segoe UI',system-ui,-apple-system,Roboto,sans-serif; color:#eef6ff;
  background:linear-gradient(180deg,#071a2e 0%,#0b2a46 30%,#0f3a5c 55%,#123f63 75%,#0d2c4c 100%); overflow-x:hidden; }
body > * { position:relative; z-index:1; }
.bg-stars, .aurora { position:absolute !important; z-index:0 !important; pointer-events:none; }
.bg-stars { inset:0; opacity:.8; background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,#cfe,transparent),radial-gradient(1.5px 1.5px at 300px 50px,#fff,transparent),radial-gradient(1px 1px at 220px 140px,#fff,transparent),radial-gradient(1px 1px at 350px 120px,#dff,transparent),radial-gradient(1px 1px at 60px 160px,#fff,transparent); background-size:400px 420px; }
.aurora { left:0; right:0; bottom:0; height:320px; overflow:hidden; }
.aurora:before, .aurora:after { content:""; position:absolute; inset:0; }
.aurora:before { background:radial-gradient(60% 55% at 18% 108%,rgba(70,255,150,.55),transparent 70%),radial-gradient(55% 60% at 50% 110%,rgba(170,90,255,.5),transparent 72%),radial-gradient(55% 55% at 85% 108%,rgba(255,100,200,.45),transparent 70%); filter:blur(14px); }
.aurora:after { background:linear-gradient(100deg,transparent 5%,rgba(90,255,170,.28) 22%,transparent 38%,rgba(190,110,255,.3) 55%,transparent 68%,rgba(255,120,210,.28) 82%,transparent 95%); -webkit-mask-image:linear-gradient(transparent,#000 85%); mask-image:linear-gradient(transparent,#000 85%); filter:blur(10px); transform:skewY(-6deg); transform-origin:bottom; }

header { padding:16px 16px 4px; }
h1 { font-weight:500; letter-spacing:.3px; font-size:clamp(22px,6.4vw,30px); color:#fff; text-shadow:0 0 14px rgba(140,220,255,.55); display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
h1 .logo { width:30px; height:30px; filter:drop-shadow(0 0 6px rgba(140,220,255,.5)); }
.tag { font-size:10px; padding:2px 8px; border-radius:10px; letter-spacing:0; border:1px solid rgba(200,255,140,.6); color:#d8ffa8; background:rgba(160,230,90,.15); }

/* glass base for controls */
select, input, button { color:#eaf6ff; border-radius:18px; border:1px solid rgba(255,255,255,.32);
  background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.06) 50%,rgba(255,255,255,.02) 51%,rgba(255,255,255,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
select option { background:#0b2a46; color:#eaf6ff; }
input[type=datetime-local], input[type=date], input[type=time] { color-scheme:dark; }
button.ghost:hover, select:hover { border-color:#bfe8ff; }
button.primary { position:relative; overflow:hidden; color:#173d00; font-weight:700; border:1px solid #f5ffe0; border-radius:24px;
  background:linear-gradient(#f2ffd8 0%,#b8ef62 48%,#86d22a 52%,#a8e656 100%); box-shadow:0 0 16px rgba(180,255,100,.45); text-shadow:0 1px 0 rgba(255,255,255,.5); }
button.primary:before { content:''; position:absolute; left:10%; right:10%; top:2px; height:40%; border-radius:20px; background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,0)); pointer-events:none; }

/* tabs: Luna pills */
.tabs { display:flex; gap:8px; padding:8px 0 0; max-width:520px; margin:8px auto 2px; }
.tab { flex:1; height:36px; padding:0 6px; border-radius:18px; font-size:13px; color:#d6ecff; white-space:nowrap;
  background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.04) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.25); box-shadow:none; }
.tab.active { color:#06324a; font-weight:700; background:linear-gradient(#e9fbff 0%,#9fe2ff 48%,#5cc6f5 52%,#8fdcff 100%); border-color:#fff; box-shadow:0 0 12px rgba(120,210,255,.6); }

/* Sky tab */
#tab-sky { max-width:560px; margin:0 auto; padding:0 16px; }
.tagline { text-align:center; font-weight:700; font-size:15px; line-height:1.4; color:#fff; letter-spacing:.2px; margin:12px 0 0; text-shadow:0 0 12px rgba(140,220,255,.45); }
.zen { color:#c9c4ef; }
#tab-sky .zenq { font-family:'Noto Serif','DejaVu Serif',Georgia,serif; font-style:italic; font-size:12.5px; line-height:1.5; color:#d9c9ff; opacity:.92; margin:10px 14px 0; padding-top:8px; position:relative; max-width:none; }
#tab-sky .zenq:before { content:""; position:absolute; left:34%; right:34%; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(190,160,255,.7),transparent); }
#tab-sky .controls { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 6px; align-items:center; }
#tab-sky .controls #city { flex:0 1 auto; height:36px; padding:0 8px; max-width:36%; font-size:13px; }
#tab-sky .controls #when { flex:1 1 0; min-width:0; height:36px; padding:0 8px; font-size:12.5px; }
#tab-sky .controls #now { flex:0 0 auto; height:36px; padding:0 14px; }
.placenote { flex:1 1 100%; text-align:left; font-size:11px; color:#a9c6e4; opacity:.8; margin:-3px 0 2px 12px; }
.soundbox { flex:1 1 100%; text-align:center; margin-top:2px; }
.sblabel { font-size:14px; font-weight:700; color:#d8ffa8; margin-bottom:7px; text-shadow:0 0 10px rgba(180,255,110,.45); }
.seg.big { display:flex; width:100%; gap:10px; border:0; background:none; overflow:visible; border-radius:0; }
.seg.big button, .form .seg.big button { flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:56px; padding:0 16px; border-radius:30px; position:relative; overflow:hidden; color:#e4f3ff;
  background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.06) 50%,rgba(255,255,255,.01) 51%,rgba(255,255,255,.12)); border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 12px rgba(0,10,30,.35); }
.seg.big button:before { content:''; position:absolute; left:10%; right:10%; top:2px; height:40%; border-radius:20px; background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0)); pointer-events:none; }
.seg.big button.on { color:#fff; background:linear-gradient(rgba(150,215,255,.75) 0%,rgba(40,140,230,.75) 50%,rgba(20,110,210,.8) 51%,rgba(70,170,250,.8) 100%); border-color:#d8f2ff; box-shadow:inset 0 1px 0 #fff,0 0 16px rgba(90,190,255,.55); }
.seg.big .orb { width:20px; height:20px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.1); position:relative; }
.seg.big button.on .orb { background:radial-gradient(circle at 35% 30%,#fff,#d8ffa8 30%,#7fcf2a 70%,#3a8a08); border-color:#fff; box-shadow:0 0 8px #c8ff6a; }
.seg.big .tx { position:relative; display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; text-shadow:0 1px 2px rgba(0,30,60,.5); }
.seg.big .tx b { font-size:17px; } .seg.big .tx small { font-size:11px; opacity:.85; white-space:nowrap; }
.playrow { flex:1 1 100%; display:flex; gap:10px; margin-top:2px; }
.playrow #play { flex:1.1; height:46px; font-size:18px; min-width:0; }
.playrow #share { flex:1; height:46px; border-radius:24px; min-width:0; }
.vol { display:flex; align-items:center; gap:10px; flex:1 1 100%; padding:4px 6px 0; font-size:12px; color:#cfe8ff; }
.vol .vicon { font-size:16px; width:22px; text-align:center; }
.vol .vval { width:36px; text-align:right; opacity:.75; font-variant-numeric:tabular-nums; }
input.volrange { -webkit-appearance:none; appearance:none; flex:1; height:8px; padding:0; border-radius:6px; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  background:linear-gradient(90deg,#86d22a 0%,#b8ef62 var(--p,80%),rgba(255,255,255,.12) var(--p,80%)); }
input.volrange::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; border:1px solid #fff; background:radial-gradient(circle at 35% 30%,#fff,#bfe8ff 35%,#3a9be8 80%); box-shadow:0 0 8px rgba(120,210,255,.7); cursor:pointer; }
input.volrange::-moz-range-thumb { width:22px; height:22px; border-radius:50%; border:1px solid #fff; background:radial-gradient(circle at 35% 30%,#fff,#bfe8ff 35%,#3a9be8 80%); box-shadow:0 0 8px rgba(120,210,255,.7); cursor:pointer; }
#tab-mix .vol { padding:10px 2px 2px; }
#sound-hint { color:#bfe8ff; }
#info { color:#a9c6e4; }
#audio-status { color:#cfe8ff; }
#audio-status[data-state=running] { color:#d8ffa8; }
main { padding:6px 0; }
.skywrap { border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.3); background:linear-gradient(#04101f,#0a2540); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(0,0,0,.4); }
.skywrap canvas { border-radius:0; }
footer { color:#a9c6e4; }

/* Mix + Astrology: glassy cards, consistent with Sky */
.card { background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.22); border-radius:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 14px rgba(0,10,30,.3); }
.seg:not(.big) { border:1px solid rgba(255,255,255,.3); background:rgba(0,20,40,.35); box-shadow:none; }
.seg:not(.big) button { box-shadow:none; }
.seg:not(.big) button.on { color:#fff; background:linear-gradient(rgba(150,215,255,.75),rgba(40,140,230,.75) 50%,rgba(20,110,210,.8) 51%,rgba(70,170,250,.8)); }
.sub, .fine, .form label, h2 { color:#b9d2ea; }
.mixcanvas canvas { border:1px solid rgba(255,255,255,.3); border-radius:18px; }

/* Ko-fi footer */
.kofi-foot { text-align:center; padding:40px 20px 24px; color:#e8f6ff; font-size:13px; }
.kofi { display:inline-flex; align-items:center; height:42px; padding:0 24px; border-radius:22px; font-weight:700; font-size:14.5px; color:#fff; text-decoration:none; position:relative; overflow:hidden;
  background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.12) 50%,rgba(255,255,255,.02) 51%,rgba(255,255,255,.18)); border:1px solid rgba(255,255,255,.75); box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(0,10,30,.4); text-shadow:0 1px 2px rgba(0,20,50,.6); }
.kofi:hover { box-shadow:inset 0 1px 0 #fff,0 0 16px rgba(255,160,220,.5); }
.kofi-foot .url { font-size:10.5px; color:#cfe8ff; opacity:.7; margin-top:4px; }
.kofi-foot .love { font-size:12px; margin:6px auto 0; line-height:1.35; color:#dcefff; max-width:340px; }