/* Scoped menu styling: leave the player and account layouts unchanged. */
body.public-player { overflow-x:clip; }
body.native-menu-open { overflow: hidden; }
#mainMenu { position:relative;text-align:center; }
#mainMenu>summary { box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;list-style:none;cursor:pointer;min-width:148px;min-height:48px;padding:12px 26px;border:1px solid var(--line-strong);border-radius:25px;background:var(--card,var(--bg2));color:var(--accent);font:600 17px/1.3 var(--font);touch-action:manipulation; }
#mainMenu>summary::-webkit-details-marker { display:none; }
#mainMenu[open] { position:fixed;inset:0;z-index:60;max-width:none;width:auto;height:auto;margin:0;border:0;border-radius:0;background:var(--bg,#100e07);overflow-y:auto;overscroll-behavior:contain;padding:0; }
#mainMenu[open]>summary { display:none; }
#mainMenu>summary .menu-icon { width:22px;height:22px;flex-basis:22px;border:0;border-radius:0;background:none; }
#mainMenu>summary .menu-icon svg { width:22px;height:22px; }
#mainMenu .main-menu-content { box-sizing:border-box;display:flex;flex-direction:column;gap:18px;width:100%;max-width:600px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));border:0;background:transparent;box-shadow:none; }
#mainMenu .native-menu-back { align-self:flex-start;display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:9px 17px 9px 13px;border:1px solid var(--line);border-radius:24px;color:var(--accent);background:var(--card,var(--bg2));font:600 16px var(--font);cursor:pointer;touch-action:manipulation; }
#mainMenu .native-menu-back .menu-icon { width:22px;height:22px;flex-basis:22px;border:0;background:none;border-radius:0; }
#mainMenu .native-menu-back .menu-icon svg { width:22px;height:22px; }
#mainMenu .native-menu-heading { text-align:center;margin:6px 0 2px; }
#mainMenu .native-menu-heading p { margin:0;color:var(--muted);font-size:clamp(11px,3.5vw,16px);line-height:1.5;white-space:nowrap; }
#mainMenu .theme-switch { display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box;padding:14px 10px 12px;border:1px solid var(--line);border-radius:24px;background:var(--card,var(--bg2));margin:0; }
#mainMenu .theme-label { display:block;color:var(--muted);font-size:12px;line-height:1.5;letter-spacing:.12em; }
#mainMenu .theme-dots { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;align-items:center;justify-items:center;width:100%;box-sizing:border-box;padding:2px 4px;border:1px solid var(--line);border-radius:28px;background:var(--bg2);overflow:visible; }
/* Each swatch keeps a generous vertical hit area; its smaller circle cannot clip. */
#mainMenu .theme-dot { position:relative;width:100%;height:44px;min-width:0;flex:none;margin:0;padding:0;border-radius:20px;background:none;border:0;box-shadow:none;overflow:visible;cursor:pointer;touch-action:manipulation;transform:none;filter:none; }
#mainMenu .theme-dot::before { content:"";display:block;position:absolute;left:50%;top:50%;width:clamp(22px,6.1vw,28px);height:clamp(22px,6.1vw,28px);box-sizing:border-box;border:1px solid color-mix(in srgb,var(--dot) 75%,var(--ink));border-radius:50%;background:var(--dot);transform:translate(-50%,-50%);box-shadow:inset 0 1px 1px #fff3; }
#mainMenu .theme-dot::after { content:"";display:none;position:absolute;left:50%;top:50%;width:5px;height:9px;margin-top:-1px;border:solid var(--btn-ink);border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg); }
#mainMenu .theme-dot[aria-checked="true"] { border:0;outline:0;box-shadow:none; }
#mainMenu .theme-dot[aria-checked="true"]::before { box-shadow:0 0 0 3px var(--bg2),0 0 0 5px var(--accent); }
#mainMenu .theme-dot[aria-checked="true"]::after { display:block; }
#mainMenu .main-menu-grid { display:flex;flex-direction:column;gap:12px;width:100%;margin-top:0; }
#mainMenu .menu-tile { min-width:0;margin:0;width:100%; }
#mainMenu .main-menu-grid>.menu-tile:last-child:nth-child(odd) { width:100%; }
#mainMenu .menu-tile>a,#mainMenu .menu-tile>button,#mainMenu .weather-head { box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:15px;min-width:0;min-height:72px;width:100%;margin:0;padding:14px 18px;border:1px solid var(--line);border-radius:24px;background:var(--card,var(--bg2));color:var(--ink);text-align:left;text-decoration:none;font:600 17px/1.3 var(--font);cursor:pointer;transform:none;touch-action:manipulation; }
#mainMenu .menu-tile>a>span:last-child,#mainMenu .menu-tile>button>span:last-child { min-width:0;overflow-wrap:break-word; }
#mainMenu .main-menu-grid>.menu-tile>a::after { content:"";width:6px;height:6px;flex:0 0 6px;margin-left:auto;margin-right:3px;border:solid var(--muted);border-width:1.7px 1.7px 0 0;transform:rotate(45deg);opacity:.7; }
#mainMenu .menu-icon { display:grid;place-items:center;box-sizing:border-box;flex:0 0 42px;width:42px;height:42px;padding:0;border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:14px;background:color-mix(in srgb,var(--accent) 9%,var(--bg2));box-shadow:none;color:var(--accent); }
#mainMenu .menu-icon svg { display:block;width:24px;height:24px;fill:none;stroke:currentColor;overflow:visible; }
#mainMenu .menu-weather-card { margin:0;padding:0;border:0;background:transparent;box-shadow:none;width:100%; }
#mainMenu .weather-head { list-style:none; }
#mainMenu .weather-head::-webkit-details-marker { display:none; }
#mainMenu .weather-head h2 { margin:0;font:inherit;color:inherit; }
#mainMenu .weather-head .weather-chevron { margin-left:auto;margin-right:4px;width:7px;height:7px;border-color:var(--muted); }
#mainMenu .menu-weather-card[open] { padding-bottom:14px;border:1px solid var(--line);border-radius:24px;background:var(--card,var(--bg2)); }
#mainMenu .menu-weather-card[open]>.weather-head { border-color:transparent;background:transparent; }
#mainMenu .weather-status { display:inline-block;max-width:calc(100% - 36px);box-sizing:border-box;white-space:normal; }
#mainMenu .weather-status,#mainMenu .weather-note { margin:12px 18px; }
#mainMenu .weather-days { padding:0 12px; }
#mainMenu .native-menu-app { padding:16px;border:1px solid var(--line);border-radius:24px;background:var(--card,var(--bg2)); }
#mainMenu .native-menu-app h3 { margin:0 0 12px;text-align:center;font-size:14px;font-weight:500;color:var(--muted); }
#mainMenu .menu-install #installHint { display:block;margin:12px 6px 0;color:var(--muted);font-size:13px;line-height:1.5; }
#mainMenu [hidden] { display:none!important; }
#mainMenu :is(a,button,summary):focus-visible { outline:3px solid var(--accent);outline-offset:3px; }
#mainMenu .theme-dot:focus-visible { outline:3px solid var(--accent);outline-offset:1px; }
@media(hover:hover) {
 #mainMenu .menu-tile>a:hover,#mainMenu .menu-tile>button:hover,#mainMenu .weather-head:hover,#mainMenu .native-menu-back:hover { border-color:var(--line-strong);background:color-mix(in srgb,var(--card) 94%,var(--accent));transform:none;filter:none; }
 #mainMenu .theme-dot:hover::before { filter:brightness(1.12); }
}
#mainMenu .menu-tile>a:active,#mainMenu .menu-tile>button:active,#mainMenu .native-menu-back:active { background:color-mix(in srgb,var(--card) 88%,var(--accent)); }
@media(max-width:360px) {
 #mainMenu .main-menu-content { padding-left:14px;padding-right:14px; }
 #mainMenu .menu-tile>a,#mainMenu .menu-tile>button,#mainMenu .weather-head { gap:13px;padding:13px 15px;font-size:16px; }
 #mainMenu .menu-icon { flex-basis:38px;width:38px;height:38px;border-radius:12px; }
 #mainMenu .menu-icon svg { width:23px;height:23px; }
}
@media(prefers-reduced-motion:reduce) { #mainMenu *,#mainMenu *::before,#mainMenu *::after { animation:none!important;transition:none!important; } }


#mainMenu .native-menu-top{display:grid;grid-template-columns:100px minmax(0,1fr) 100px;align-items:center;gap:0;width:100%}
#mainMenu .native-menu-top h1{grid-column:2;margin:0;text-align:center;font-size:24px;line-height:1.3}
#mainMenu .native-menu-top .native-menu-back{padding:9px 8px;gap:3px;justify-self:start;font-size:14px}
#mainMenu .native-menu-top .native-menu-back .menu-icon,#mainMenu .native-menu-top .native-menu-back .menu-icon svg{width:18px;height:18px;flex-basis:18px}
#mainMenu .appearance-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
@media(max-width:540px){
 #mainMenu .native-menu-top{grid-template-columns:minmax(0,1fr);row-gap:14px}
 #mainMenu .native-menu-top .native-menu-back{grid-column:1;grid-row:1}
 #mainMenu .native-menu-top h1{grid-column:1;grid-row:2;font-size:clamp(22px,5vw,24px)}
}