/* ================= Minu ESTRAADIO: launcher ================= */
.feat .my-btn { grid-column: 1 / -1; }
.my-btn {
  background:
    radial-gradient(90% 180% at 0% 50%, rgba(255,120,190,.32), transparent 60%),
    radial-gradient(60% 160% at 100% 50%, rgba(255,200,90,.22), transparent 70%),
    linear-gradient(140deg, rgba(56,18,70,.88), rgba(14,12,34,.88));
  border-color: rgba(255,140,200,.32);
}
.my-btn .feat-ic {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 9px 7px;
  background: radial-gradient(circle at 30% 25%, #ff7ac0, #6a1d74 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 14px rgba(255,110,190,.35);
}
.my-btn .feat-ic i { width: 3px; height: 40%; border-radius: 2px; background: linear-gradient(#fff6c8, #ffc35c); animation: myEq 1.1s ease-in-out infinite; }
.my-btn .feat-ic i:nth-child(2) { animation-delay: -.3s; }
.my-btn .feat-ic i:nth-child(3) { animation-delay: -.65s; }
.my-btn .feat-ic i:nth-child(4) { animation-delay: -.15s; }
.my-btn .feat-ic i:nth-child(5) { animation-delay: -.5s; }
@keyframes myEq { 0%, 100% { height: 25%; } 50% { height: 95%; } }
.my-btn .feat-tx { flex: 1; }
.my-al-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; color: #1b1030;
  background: linear-gradient(180deg, #ffe08a, #ffb347); box-shadow: 0 4px 14px rgba(255,180,70,.4);
}
.my-al-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7a1d3a; box-shadow: 0 0 0 2px rgba(122,29,58,.25); }
.my-al-pill[hidden] { display: none; }

/* ================= overlay ================= */
.ovl.my {
  background:
    radial-gradient(80% 45% at 100% 0%, rgba(255,90,170,.22), transparent 70%),
    radial-gradient(70% 40% at 0% 30%, rgba(80,120,255,.2), transparent 70%),
    radial-gradient(80% 40% at 50% 100%, rgba(255,190,90,.1), transparent 70%),
    linear-gradient(180deg, #0c0a24, #040714 70%);
}
.my-share svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.my-body {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start;
  /* rows must always fit their content — cards clip overflow, so auto rows could otherwise collapse inside this fixed-height scroller */
  grid-auto-rows: max-content;
}
.my-body > * { min-height: max-content; }
.my-card {
  position: relative; min-width: 0; padding: 14px; border-radius: 20px; overflow: visible; overflow: clip; /* clip, not hidden: hidden let cards collapse to strips */
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.my-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.my-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; min-width: 0; }
.my-foot { margin: 0 4px 6px; font-size: 13px; color: var(--mute); text-align: center; }

/* ---------- alarm card ---------- */
.al-card { background:
  radial-gradient(120% 90% at 100% 0%, rgba(255,170,80,.16), transparent 60%),
  linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); }
.al-card.on { border-color: rgba(255,200,100,.45); box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(255,200,100,.15), inset 0 1px 0 rgba(255,255,255,.1); }
.al-head { display: flex; align-items: center; gap: 12px; min-width: 0; user-select: none; -webkit-user-select: none; }
.al-ic { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(160deg, #ffcf6b, #ff7a59); box-shadow: 0 6px 16px rgba(255,140,80,.4); }
.al-ic svg { width: 24px; height: 24px; fill: none; stroke: #2a0f12; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.al-card.on .al-ic svg { animation: alWig 3s ease-in-out infinite; }
@keyframes alWig { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-12deg); } 92% { transform: rotate(12deg); } 95% { transform: rotate(-8deg); } }
.al-ht { flex: 1; min-width: 0; }
.al-ht h3 { margin: 0; }
.al-ht p { margin: 2px 0 0; font-size: 14px; color: var(--mute); line-height: 1.3; }
.al-card.on .al-ht p { color: #ffd98a; }
.al-sw { flex: none; position: relative; width: 64px; height: 44px; border: 0; background: none; padding: 0; border-radius: 22px; }
.al-sw::before { content: ""; position: absolute; left: 4px; right: 4px; top: 6px; bottom: 6px; border-radius: 999px; background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); transition: background .2s; }
.al-sw i { position: absolute; left: 8px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .2s; }
.al-sw[aria-checked="true"]::before { background: linear-gradient(90deg, #ffb347, #ff6f91); }
.al-sw[aria-checked="true"] i { transform: translateX(24px); }
.al-sw:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }

.al-grid { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 6px; min-width: 0; }
.al-time { display: block; min-width: 0; }
.al-time input {
  display: block; width: 100%; min-height: 64px; padding: 2px 12px; border-radius: 18px; text-align: center;
  font: 900 clamp(44px, 15vw, 64px)/1.1 -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: #fff; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); border: 1px solid var(--line);
  color-scheme: dark; -webkit-appearance: none; appearance: none;
}
.al-card.on .al-time input { color: #ffe3a3; text-shadow: 0 0 18px rgba(255,190,90,.45); }
.al-time input:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.al-time input::-webkit-date-and-time-value { text-align: center; }
.al-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-width: 0; user-select: none; -webkit-user-select: none; }
.al-day { min-width: 0; min-height: 44px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  font-size: 16px; font-weight: 800; color: var(--mute); transition: background .15s, transform .12s, color .15s; }
.al-day:active { transform: scale(.92); }
.al-day[aria-pressed="true"] { color: #2a1020; background: linear-gradient(180deg, #ffd27a, #ff9a62); border-color: transparent; box-shadow: 0 4px 12px rgba(255,150,80,.35); }
.al-day:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }

.al-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; min-width: 0; }
.al-field > span:first-child { font-size: 14px; font-weight: 700; color: var(--mute); }
.al-field select {
  width: 100%; min-height: 48px; padding: 0 40px 0 14px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(0,0,0,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23a9b6cc' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 20px;
  color: var(--ink); font: 700 16px/1.2 -apple-system, system-ui, sans-serif; -webkit-appearance: none; appearance: none; color-scheme: dark;
}
.al-field select:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.al-fade { display: flex; width: 100%; user-select: none; -webkit-user-select: none; }
.al-fade button { flex: 1; min-width: 0; min-height: 44px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-fade button[aria-pressed="true"] { background: rgba(255,170,90,.3); box-shadow: inset 0 0 0 1px rgba(255,190,110,.6); }
.al-volrow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.al-volrow b { flex: none; width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.al-volrow input[type=range] {
  flex: 1; min-width: 0; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; --p: 67%;
}
.al-volrow input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, #ffb347, #ff6f91) 0 / var(--p) 100% no-repeat, rgba(255,255,255,.14); }
.al-volrow input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); }
.al-volrow input[type=range]::-moz-range-progress { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #ffb347, #ff6f91); }
.al-volrow input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.al-volrow input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.al-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.al-act .pill-btn { flex: 1 1 140px; gap: 8px; }
.al-act .pill-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#alNight { background: linear-gradient(180deg, #5b4bff, #2c1d9c); box-shadow: 0 6px 16px rgba(90,70,255,.4); }
.al-tip { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--mute); }

/* ---------- stats hero ---------- */
.my-hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.my-hd h3 { margin: 0; }
.my-per { max-width: 100%; user-select: none; -webkit-user-select: none; }
.my-per button { min-height: 40px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
.my-hero { background:
  radial-gradient(90% 70% at 50% 30%, rgba(80,120,255,.18), transparent 70%),
  linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); }
.my-hero-in { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.my-clockbox { width: min(100%, 320px, 52vh); }
.my-clockbox canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.my-persona { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 10px 12px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(255,120,190,.16), rgba(90,120,255,.14)); border: 1px solid rgba(255,255,255,.1); }
.my-emb { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #8fa8ff, #2a2f8a); box-shadow: 0 0 18px rgba(120,140,255,.4), inset 0 0 0 1px rgba(255,255,255,.25); }
.my-emb[data-k="morn"] { background: radial-gradient(circle at 30% 25%, #ffd98a, #ff7a59); box-shadow: 0 0 18px rgba(255,150,80,.45), inset 0 0 0 1px rgba(255,255,255,.3); }
.my-emb[data-k="day"] { background: radial-gradient(circle at 30% 25%, #9ff3ff, #1d8fd0); box-shadow: 0 0 18px rgba(80,200,255,.45), inset 0 0 0 1px rgba(255,255,255,.3); }
.my-emb[data-k="eve"] { background: radial-gradient(circle at 30% 25%, #ff9ad0, #9a2a8a); box-shadow: 0 0 18px rgba(255,110,190,.45), inset 0 0 0 1px rgba(255,255,255,.3); }
.my-emb svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.my-ptx { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.my-ptx b { font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.my-ptx small { font-size: 14px; color: #c9d4ea; }
.my-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.my-tile { min-width: 0; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); position: relative; overflow: hidden; }
.my-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, #5ff0ff); box-shadow: 0 0 10px var(--c, #5ff0ff); }
.my-tile b { display: block; font-size: clamp(16px, 4.6vw, 20px); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-tile span { display: block; font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-tile.c1 { --c: #5ff0ff; } .my-tile.c2 { --c: #8fa8ff; } .my-tile.c3 { --c: #5fffc0; }
.my-tile.c4 { --c: #ff8ad0; } .my-tile.c5 { --c: #ffd166; } .my-tile.c6 { --c: #ff9a62; }
.my-bars { display: block; width: 100%; height: clamp(130px, 24vh, 190px); }

/* ---------- top lists ---------- */
.my-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.my-rank li { min-width: 0; }
.my-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 8px; border-radius: 14px; text-align: left;
  border: 1px solid transparent; background: rgba(255,255,255,.04); }
button.my-row { transition: transform .12s, background .2s; }
button.my-row:active { transform: scale(.98); background: rgba(255,255,255,.1); }
button.my-row:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.my-rn { flex: none; width: 22px; text-align: center; font-weight: 900; font-size: 16px; color: #ffd166; }
.my-rank li:nth-child(n+4) .my-rn { color: var(--mute); }
.my-row .logo { width: 42px; height: 42px; }
.my-vin { border-radius: 50%; }
.my-rtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.my-rtx b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-rtx small { font-size: 13px; color: var(--mute); }
.my-rbar { display: block; height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.my-rbar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, #3ea0ff, #5ff0ff); }
.my-rbar.ar::after { background: linear-gradient(90deg, #ff6f91, #ffb347); }
.my-empty { padding: 10px 4px; font-size: 15px; color: var(--mute); }

@media (orientation: landscape) and (min-width: 600px), (min-width: 820px) {
  .my-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-body > .my-two, .my-body > .my-foot { grid-column: 1 / -1; }
  .al-card { grid-row: span 2; }
  .my-hero-in { flex-direction: row; align-items: center; }
  .my-clockbox { width: min(46%, 260px, 46vh); flex: none; }
  .my-persona { flex: 1; }
}
@media (min-width: 1000px) {
  .my-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ================= bedside clock / ringing alarm ================= */
.al-ring {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; background: #030716; color: #fff; user-select: none; -webkit-user-select: none;
  padding: calc(var(--sat) + 64px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);
  opacity: 0; transition: opacity .35s;
}
.al-ring[hidden] { display: none; }
.al-ring.in { opacity: 1; }
#arSky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-x { position: absolute; z-index: 2; top: calc(var(--sat) + 12px); right: calc(var(--sar) + 14px); background: rgba(0,0,0,.25); }
.ar-x svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ar-mid { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  max-width: 100%; transition: transform 1.5s ease; }
.ar-kick { margin: 0; font-size: clamp(17px, 4.6vw, 24px); font-weight: 800; letter-spacing: .02em; }
.ar-time { font-size: min(26vw, 34vh); font-weight: 200; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ar-date { margin: 4px 0 0; font-size: clamp(16px, 4.4vw, 22px); font-weight: 600; text-transform: capitalize; }
.ar-info { margin: 14px 0 0; max-width: 34em; font-size: 16px; line-height: 1.4; padding: 0 8px; }
.ar-act { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; width: min(100%, 560px); }
.ar-btn { flex: 1 1 200px; min-height: 64px; border-radius: 22px; border: 1px solid rgba(255,255,255,.3); font-size: 19px; font-weight: 900;
  transition: transform .12s, filter .2s; }
.ar-btn:active { transform: scale(.96); filter: brightness(1.15); }
.ar-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ar-btn.snooze { background: rgba(10,16,40,.55); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ar-btn.up { background: linear-gradient(180deg, #fff3c8, #ffb347); color: #3a1a08; border-color: transparent; box-shadow: 0 10px 30px rgba(255,170,70,.5); }

/* night: dim, calm, nothing to press but the close button */
.al-ring.night .ar-act { display: none; }
.al-ring.night .ar-kick { color: rgba(150,170,220,.6); }
.al-ring.night .ar-time { color: rgba(160,180,230,.55); }
.al-ring.night .ar-date { color: rgba(150,170,220,.5); }
.al-ring.night .ar-info { color: rgba(150,170,220,.5); font-size: 15px; }
.al-ring.night .ar-x { color: rgba(170,190,240,.6); }
/* ringing: bright sunrise */
.al-ring.ringing .ar-time { font-weight: 300; text-shadow: 0 4px 40px rgba(255,180,90,.6); }
.al-ring.ringing .ar-kick { color: #fff6d8; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.al-ring.ringing .ar-date, .al-ring.ringing .ar-info { text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.al-ring.need .ar-info { font-weight: 800; font-size: 18px; padding: 10px 16px; border-radius: 999px; background: rgba(0,0,0,.35); animation: arPulse 1.6s ease-in-out infinite; }
@keyframes arPulse { 50% { transform: scale(1.05); } }

@media (orientation: landscape) and (max-height: 500px) {
  .al-ring { padding-top: calc(var(--sat) + 12px); }
  .ar-time { font-size: min(18vw, 40vh); }
  .ar-info { margin-top: 6px; }
  .ar-btn { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .my-btn .feat-ic i, .al-card.on .al-ic svg, .al-ring.need .ar-info { animation: none; }
  .ar-mid { transition: none; }
}