/* SkySaver menu-bar panel (web port of the app's own panel: same dial, same weather control) */
.sp { --ink: #f6f8fd; --sec: #e3e8f1; --track: rgb(255 255 255 / .09); --sel: rgb(255 255 255 / .2);
  position: relative; width: 336px; max-width: calc(100vw - 24px); padding: 16px; border-radius: 26px; color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, rgb(30 66 112 / .62), rgb(52 86 120 / .6)); border: 1px solid rgb(255 255 255 / .16);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); user-select: none; -webkit-user-select: none; }
.sp button { all: unset; box-sizing: border-box; cursor: pointer; }
.sp-head { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 2px; }
.sp-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.sp-icons { display: flex; gap: 2px; }
.sp button.sp-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--ink); transition: background 0.15s; }
.sp-icon:hover { background: rgb(255 255 255 / .12); }
.sp-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-icon span { display: contents; }
.sp-icon .off { display: none; }
.sp-icon[aria-pressed="false"] .on { display: none; }
.sp-icon[aria-pressed="false"] .off { display: contents; }
.sp-wheel { position: relative; width: calc(100% + 32px); height: 164px; margin: 12px -16px 0; touch-action: none; cursor: grab; border-radius: 16px; }
.sp-wheel:active { cursor: grabbing; }
.sp-wheel:focus-visible { outline: 2px solid rgb(255 255 255 / .5); outline-offset: -2px; }
.sp-viewport { height: 152px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 0 82%, transparent 100%); mask-image: linear-gradient(#000 0 82%, transparent 100%); }
.sp-wheel svg { display: block; width: 100%; }
.sp-arc { fill: none; stroke: rgb(227 232 241 / .25); stroke-width: .75; }
.sp-pointer { fill: #f6f8fd; }
.sp-facet { fill: #c7d2e4; }
.sp-phase { stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.sp-q { stroke: var(--sec); stroke-width: .4; opacity: .25; }
.sp-h { stroke: rgb(227 232 241 / .25); stroke-width: .8; }
.sp-t { stroke: rgb(227 232 241 / .25); stroke-width: .65; }
.sp-time { position: absolute; inset: 90px 0 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.sp-time span { font-size: 22px; line-height: 1.3; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.sp-time small { font-size: 12px; color: var(--sec); margin-top: 3px; min-height: 1.5em; }
.sp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; min-height: 44px; margin-top: 4px; }
.sp-seg { position: relative; display: flex; border-radius: 999px; background: var(--track); padding: 3px; }
.sp-seg button { font-size: 14px; font-weight: 600; position: relative; z-index: 1; display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 999px; color: var(--sec); transition: color 0.2s; }
.sp-seg button[aria-pressed="true"] { color: var(--ink); }
.sp-seg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-thumb { position: absolute; top: 3px; left: 0; height: 44px; border-radius: 999px; background: var(--sel); box-shadow: 0 1px 4px #22314212; pointer-events: none; }
.sp-seg[data-ready] .sp-thumb { transition: transform 0.34s cubic-bezier(.3, 1.15, .4, 1), width 0.34s cubic-bezier(.3, 1.15, .4, 1); }

/* Full panel (explainer) */
.sp-city { display: inline-flex !important; align-items: center; gap: 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.sp-city svg { width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp button.sp-switch { position: relative; display: block !important; width: 50px; height: 30px; border-radius: 999px; background: rgb(255 255 255 / .28); transition: background 0.2s; flex: none; }
.sp button.sp-switch i { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform 0.2s; }
.sp button.sp-switch[aria-checked="true"] { background: #0a84ff; }
.sp button.sp-switch[aria-checked="true"] i { transform: translateX(20px); }
.sp-vol { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--sec); }
.sp-vol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-vol input { -webkit-appearance: none; appearance: none; width: 76px; height: 3px; border-radius: 999px; background: rgb(255 255 255 / .22); outline: none; }
.sp-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 14px; border-radius: 3px; background: #fff; }
.sp-vol input::-moz-range-thumb { width: 7px; height: 14px; border: 0; border-radius: 3px; background: #fff; }
.sp-act { display: flex; gap: 6px; margin-top: 14px; }
.sp .sp-start { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 16px; background: rgb(255 255 255 / .13); font-size: 14px; white-space: nowrap; font-weight: 600; color: var(--ink); }
.sp-start i { width: 13px; height: 13px; border: 2px solid #ff453a; border-radius: 3px; }
.sp .sp-sq { display: grid; place-items: center; width: 44px; height: 48px; border-radius: 16px; background: rgb(255 255 255 / .1); color: var(--ink); }
.sp-sq svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-row[data-p] { margin-top: 2px; }
/* Highlight: when a step is set, the rest of the panel steps back */
.sp[data-step] [data-p] { transition: opacity 0.35s ease; }
.sp[data-step] .sp-wheel[data-p], .sp[data-step] .sp-row[data-p], .sp[data-step] .sp-city, .sp[data-step] .sp-act, .sp[data-step] .sp-icon { opacity: .6; }
.sp[data-step="dial"] [data-p="dial"], .sp[data-step="location"] [data-p="location"], .sp[data-step="weather"] [data-p="weather"], .sp[data-step="fireworks"] [data-p="fireworks"],
.sp[data-step="motion"] [data-p="motion"], .sp[data-step="sound"] [data-p="sound"], .sp[data-step="wallpaper"] [data-p="wallpaper"] { opacity: 1; }

/* The control being explained gets a soft plate and a thin ring (layout never shifts: every row keeps the same padding) */
.sp[data-step] .sp-row[data-p] { margin-inline: -10px; padding-inline: 10px; border-radius: 14px; }
.sp[data-step] .sp-act { margin-inline: -4px; padding: 4px; border-radius: 20px; }
.sp[data-step] .sp-city { padding: 6px 10px; margin: -6px -10px; border-radius: 12px; }
.sp[data-step] [data-p] { outline: 1.5px solid transparent; transition: opacity 0.35s ease, background 0.35s ease, outline-color 0.35s ease; }
.sp[data-step="dial"] [data-p="dial"], .sp[data-step="location"] [data-p="location"], .sp[data-step="weather"] [data-p="weather"], .sp[data-step="fireworks"] [data-p="fireworks"],
.sp[data-step="motion"] [data-p="motion"], .sp[data-step="sound"] [data-p="sound"], .sp[data-step="wallpaper"] [data-p="wallpaper"] { background: rgb(255 255 255 / .2); outline-color: rgb(255 255 255 / .75); }

/* Cleaner highlight: a soft plate only, no ring. The dial's plate stays inside the panel padding. */
.sp[data-step] [data-p] { outline: 0 !important; }
.sp[data-step="dial"] [data-p="dial"] { background: transparent !important; }
.sp-wheel { isolation: isolate; }
.sp-wheel[data-p]::before { content: ""; position: absolute; inset: 0 16px; z-index: -1; border-radius: 18px; background: rgb(255 255 255 / .16); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.sp[data-step="dial"] .sp-wheel[data-p="dial"]::before { opacity: 1; }
.sp[data-step="location"] [data-p="location"], .sp[data-step="weather"] [data-p="weather"], .sp[data-step="fireworks"] [data-p="fireworks"], .sp[data-step="motion"] [data-p="motion"],
.sp[data-step="sound"] [data-p="sound"], .sp[data-step="wallpaper"] [data-p="wallpaper"] { background: rgb(255 255 255 / .16); }

/* The dial's plate is as wide as the row plates (6px in from the panel edge) */
.sp-wheel[data-p]::before { inset: 0 6px; }
.sp-vol { transition: opacity 0.25s ease; }
.sp-vol[data-off="true"] { opacity: 0.4; }

/* Start / Stop Wallpaper */
.sp-start span { display: inline-block; }
.sp-start[data-state="stopped"] i { width: 0; height: 0; border: 0; border-radius: 0; border-left: 12px solid #2fae66; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin: 0 2px 0 3px; }
.sp-start[data-state="starting"] i { width: 15px; height: 15px; border: 2.2px solid rgb(15 36 56 / .22); border-top-color: #0f2438; border-radius: 50%; animation: sp-spin 0.8s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Press feedback on every control, and a red Quit */
.sp button { transition: transform 0.22s cubic-bezier(.3, 1.6, .4, 1), background-color 0.18s ease, color 0.18s ease, opacity 0.25s ease; }
.sp button.sp-switch { transition: transform 0.22s cubic-bezier(.3, 1.6, .4, 1), background 0.2s ease; }
.sp-seg button { transition: transform 0.22s cubic-bezier(.3, 1.6, .4, 1), color 0.2s ease; }
.sp button:active { transform: scale(0.93); }
.sp button.sp-switch:active { transform: scale(0.9); }
.sp .sp-sq[aria-label="Quit"]:hover, .sp .sp-sq[aria-label="Quit"]:focus-visible { background: linear-gradient(180deg, #ff7468, #e8453a); color: #fff; }

/* Start Wallpaper is a green button with a soft, rounded play icon */
.sp .sp-start[data-state="stopped"], .sp .sp-start[data-state="starting"] { background: linear-gradient(180deg, #4cd873, #2fb15f); color: #fff; }
.sp .sp-start[data-state="stopped"]:hover { filter: brightness(1.06); }
.sp .sp-start[data-state="stopped"] i { width: 15px; height: 15px; margin: 0; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 4.8v14.4L19 12z' fill='%23fff' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sp .sp-start[data-state="starting"] i { border-color: rgb(255 255 255 / .35); border-top-color: #fff; }

/* No focus box on the dial or the buttons while operating them */
.sp-wheel:focus, .sp-wheel:focus-visible, .sp button:focus, .sp button:focus-visible { outline: none; }