/* V5-only navigation and personal appearance. No production state is involved. */
:root{--secondary:#5c73d9;--highlight:#d5cdff;--wallpaper-shade:.65}
body{background:var(--bg);transition:background-color 1.25s ease}
.atmosphere:before{background:radial-gradient(ellipse at 25% 35%,color-mix(in srgb,var(--secondary) 13%,transparent),transparent 45%),radial-gradient(ellipse at 78% 70%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 40%)}
.atmosphere:after{background:radial-gradient(ellipse at 68% 24%,color-mix(in srgb,var(--highlight) 8%,transparent),transparent 40%)}
.topbar{height:82px;flex-wrap:nowrap;border:0;padding-inline:5%;background:transparent}
.topbar .brand{gap:9px;color:var(--text);font-weight:550}
.brand .brand-logo-mark{display:block;width:65px;height:39px;stroke:none;fill:initial;overflow:visible;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 25%,transparent));opacity:.96}
.brand .brand-logo-mark path{stroke:none}
.topbar .beta{display:none}
.hero h1 em{color:var(--highlight)}
.primary{background:linear-gradient(140deg,var(--accent),var(--secondary));border-color:color-mix(in srgb,var(--highlight) 50%,transparent);box-shadow:inset 0 1px #fff4,0 4px 0 color-mix(in srgb,var(--secondary) 30%,#080b12),0 10px 32px color-mix(in srgb,var(--accent) 20%,transparent)}
.composer,.preferences .group{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent),0 20px 70px #0004}
#wallpaper-layer{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
#wallpaper-layer[hidden]{display:none}
#wallpaper-layer picture,#wallpaper-layer img{display:block;width:100%;height:100%}
#wallpaper-layer img{object-fit:cover;object-position:center}
#wallpaper-layer:after{content:"";position:absolute;inset:0;background:rgba(3,6,13,var(--wallpaper-shade));transition:background-color .35s}
[data-wallpaper=on] .hero h1,[data-wallpaper=on] .hero>.eyebrow{text-shadow:0 3px 24px #0008}
#studio-navigation{position:fixed;z-index:36;left:0;top:50%;transform:translateY(-50%);width:38px;height:76px}
#navigation-toggle{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:76px;padding:0;border-radius:0 18px 18px 0;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:color-mix(in srgb,var(--highlight) 22%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 12%,transparent);color:var(--highlight)}
#navigation-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .7s ease}
#navigation-toggle span{display:none}
#studio-navigation[data-open=true] #navigation-toggle svg{transform:rotate(180deg)}
.nav-panel{position:absolute;left:34px;top:50%;width:218px;padding:16px 12px;transform:translate(-18px,-50%) scale(.965);transform-origin:left center;opacity:0;visibility:hidden;pointer-events:none;background:color-mix(in srgb,var(--bg) 86%,transparent);border:1px solid var(--line);border-radius:24px;backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px);box-shadow:0 18px 64px #0006,inset 0 1px #ffffff0c;transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .4s,visibility .65s}
#studio-navigation[data-open=true] .nav-panel{transform:translate(0,-50%) scale(1);opacity:1;visibility:visible;pointer-events:auto}
.nav-heading{display:flex;align-items:center;justify-content:space-between;padding:0 10px 8px;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.nav-close{width:36px;min-height:36px;padding:0;background:transparent;border:0;font-size:22px;color:var(--muted)}
.nav-panel nav{display:flex;flex-direction:column;gap:5px;font-size:13px}
.nav-panel nav a{display:flex;align-items:center;gap:15px;padding:14px 17px;min-height:52px;border-radius:15px;border:1px solid transparent;transition:background-color .35s,color .35s,transform .6s cubic-bezier(.2,.7,.2,1)}
.nav-panel nav a svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nav-panel nav a:hover,.nav-panel nav a:focus-visible{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--text);transform:translateX(3px)}
.nav-panel nav a[aria-current=page]{color:var(--highlight);background:color-mix(in srgb,var(--accent) 13%,transparent);border-color:color-mix(in srgb,var(--accent) 18%,transparent)}
.appearance-settings .theme-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}
.theme-choices button{display:flex;flex-direction:column;gap:11px;align-items:flex-start;padding:10px 10px 13px;background:transparent;font-size:12px;transition:border-color .5s,transform .6s}
.theme-choices button[aria-pressed=true]{border-color:var(--highlight);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.theme-choices button:hover{transform:translateY(-3px)}
.theme-swatch{display:block;width:100%;height:68px;border-radius:8px;border:1px solid #ffffff10}
.swatch-obsidian{background:radial-gradient(ellipse at 30% 15%,#8b82ff99,transparent 72%),#070a12}
.swatch-aurora{background:radial-gradient(ellipse at 30% 15%,#59c5bb99,transparent 72%),#061313}
.swatch-amethyst{background:radial-gradient(ellipse at 30% 15%,#b891e999,transparent 72%),#100a17}
.swatch-ember{background:radial-gradient(ellipse at 30% 15%,#dba77e99,transparent 72%),#140e0d}
.custom-theme{border-bottom:1px solid var(--line);padding-bottom:14px}
.theme-colours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:8px 0}
.theme-colours label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.theme-colours input{padding:3px;width:44px;min-width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer}
.wallpaper-choices{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0 16px}
.wallpaper-choice{min-width:0}.wallpaper-choice label{display:block;font-size:13px;margin-bottom:12px}
.wallpaper-choice input{width:100%;font-size:12px;color:var(--muted);padding:8px 0;min-height:44px}
.wallpaper-choice input::file-selector-button{font:inherit;color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid var(--line);padding:10px 12px;border-radius:10px;margin-right:10px;cursor:pointer}
.wallpaper-choice button{font-size:12px;background:transparent;padding:10px 12px}
.wallpaper-dimming{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;font-size:13px}
.wallpaper-dimming input{flex:1;min-width:100px;accent-color:var(--accent);height:44px}.wallpaper-dimming output{min-width:38px;color:var(--muted)}
#appearance-status{min-height:20px}
@media(max-width:760px){
 .topbar{height:72px;padding:0 20px}.brand .brand-logo-mark{width:57px;height:35px}.topbar .brand{font-size:21px}.topbar .motion-toggle{margin-left:auto}
 #studio-navigation{left:50%;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);height:38px;width:86px}
 #navigation-toggle{width:86px;height:38px;min-height:38px;border-radius:22px;gap:5px;font-size:11px;left:0}
 #navigation-toggle span{display:inline}#navigation-toggle svg{transform:rotate(-90deg);width:15px;height:15px}
 #studio-navigation[data-open=true] #navigation-toggle svg{transform:rotate(90deg)}
 .nav-panel{left:50%;top:auto;bottom:50px;width:calc(100vw - 28px);max-width:540px;padding:10px 8px 12px;border-radius:24px;transform:translate(-50%,20px) scale(.97);transform-origin:center bottom}
 #studio-navigation[data-open=true] .nav-panel{transform:translate(-50%,0) scale(1)}
 .nav-heading{padding:0 10px 4px;font-size:10px}.nav-close{min-height:32px;height:32px}
 .nav-panel nav{flex-direction:row;gap:3px}.nav-panel nav a{min-width:0;flex:1;flex-direction:column;gap:9px;padding:12px 3px 10px;font-size:11px;min-height:66px}
 .nav-panel nav a:hover,.nav-panel nav a:focus-visible{transform:translateY(-2px)}
 .keyboard-active #studio-navigation,.manager-open #studio-navigation{display:none}
 .appearance-settings .theme-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-colours{grid-template-columns:1fr 1fr}.wallpaper-choices{grid-template-columns:1fr;gap:20px}
 footer{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.nav-panel,#navigation-toggle svg,.theme-choices button,body{transition:none}}
[data-motion=off] .nav-panel,[data-motion=off] #navigation-toggle svg{transition:none}

/* Admin forms remain readable and reachable on narrow screens. */
.admin-page{max-width:960px;margin:30px auto;min-width:0;padding-bottom:calc(48px + env(safe-area-inset-bottom))}
.admin-page .section-head{margin:0 0 28px}.admin-page h1{font-size:clamp(32px,5vw,52px);font-weight:450;line-height:1.1;letter-spacing:-.035em;margin-bottom:16px}
.admin-page .eyebrow{margin-bottom:14px}.admin-page .group{padding:24px;margin-top:20px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.admin-page h2{font-size:20px;font-weight:550;line-height:1.3;margin-bottom:14px}.admin-page p{font-size:14px;line-height:1.65;margin:10px 0;color:var(--muted)}
.admin-page p,.admin-page li,.admin-page label,.admin-page button{overflow-wrap:anywhere}.admin-page ul{padding-left:20px}.admin-page li{font-size:14px;line-height:1.7;margin:10px 0}
.admin-page label{display:grid;gap:10px;font-size:14px;line-height:1.5;min-width:0}.admin-page input,.admin-page select{width:100%;max-width:100%;min-width:0;min-height:48px;font-size:16px;touch-action:manipulation;scroll-margin-block:100px}
.admin-page button{min-height:48px;line-height:1.4}.admin-page button:disabled{cursor:default}.admin-page select:focus-visible{outline:2px solid var(--highlight);outline-offset:3px}
.admin-page .provider-key-form{padding:22px 0 4px}.admin-page .provider-key-row{align-items:stretch}.admin-page .provider-key-row input{width:0;flex:1}.admin-page .provider-key-result{min-height:1.65em}
.admin-page #intelligence-version{display:block;margin:12px 0 22px;text-overflow:ellipsis}.admin-page #intelligence-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}.admin-page #intelligence-controls>p{grid-column:1/-1;margin:0}
@media(max-width:600px){.admin-page{margin:12px auto}.admin-page .group{padding:20px 16px;border-radius:18px}.admin-page .section-head{margin-bottom:24px}.admin-page .provider-key-row{flex-direction:column;gap:12px}.admin-page .provider-key-row input{width:100%;flex:auto}.admin-page button{width:100%;font-size:14px;padding:14px 12px}.admin-page #intelligence-controls{grid-template-columns:minmax(0,1fr);gap:20px}.admin-page h2{font-size:19px}}

#wallpaper-generate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}#wallpaper-generate .wallpaper-direction{grid-column:1/-1}#wallpaper-generate select,#wallpaper-generate textarea{font:inherit;font-size:16px;color:var(--text);background:#111626;border:1px solid var(--line);border-radius:12px;padding:12px;min-height:48px;width:100%;min-width:0}#wallpaper-generate textarea{min-height:120px;line-height:1.6}.wallpaper-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}.wallpaper-preview-grid article{min-width:0}.wallpaper-preview{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:14px;background:#070a12}.wallpaper-preview.portrait{aspect-ratio:2/3;max-height:360px}.wallpaper-preview img{width:100%;height:100%;object-fit:cover;opacity:.4}.wallpaper-preview-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:15px;text-align:center}.wallpaper-preview-copy strong{font-size:clamp(17px,2vw,24px);font-weight:450}.wallpaper-preview-copy span{background:#0a1023d9;padding:12px;border:1px solid #ffffff30;border-radius:10px;font-size:10px;width:90%}.wallpaper-reset{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}@media(max-width:600px){#wallpaper-generate,.wallpaper-preview-grid{grid-template-columns:minmax(0,1fr)}}

/* Mobile density: vertical spacing 80%, text 90%; retain widths, geometry and media proportions. */
@media(max-width:760px){
.topbar .brand{row-gap:7.2px}
#navigation-toggle{padding-top:0;padding-bottom:0}
.nav-panel{padding-top:12.8px;padding-bottom:12.8px}
.nav-heading{padding-top:0;padding-bottom:6.4px;font-size:9.9px}
.nav-close{padding-top:0;padding-bottom:0;font-size:19.8px}
.nav-panel nav{row-gap:4px;font-size:11.7px}
.nav-panel nav a{row-gap:12px;padding-top:11.2px;padding-bottom:11.2px}
.appearance-settings .theme-choices{row-gap:9.6px;margin-top:19.2px;margin-bottom:19.2px}
.theme-choices button{row-gap:8.8px;padding-top:8px;padding-bottom:10.4px;font-size:10.8px}
.custom-theme{padding-bottom:11.2px}
.theme-colours{row-gap:12.8px;padding-top:6.4px;padding-bottom:6.4px}
.theme-colours label{row-gap:6.4px;font-size:10.8px}
.theme-colours input{padding-top:2.4px;padding-bottom:2.4px}
.wallpaper-choices{row-gap:19.2px;margin-top:19.2px;margin-bottom:12.8px}
.wallpaper-choice label{font-size:11.7px;margin-bottom:9.6px}
.wallpaper-choice input{font-size:10.8px;padding-top:6.4px;padding-bottom:6.4px}
.wallpaper-choice input::file-selector-button{padding-top:8px;padding-bottom:8px}
.wallpaper-choice button{font-size:10.8px;padding-top:8px;padding-bottom:8px}
.wallpaper-dimming{row-gap:12.8px;margin-top:20.8px;font-size:11.7px}
@media(max-width:760px){.topbar{padding-top:0;padding-bottom:0}
.topbar .brand{font-size:18.9px}
#navigation-toggle{row-gap:4px;font-size:9.9px}
.nav-panel{padding-top:8px;padding-bottom:9.6px}
.nav-heading{padding-top:0;padding-bottom:3.2px;font-size:9px}
.nav-panel nav{row-gap:2.4px}
.nav-panel nav a{row-gap:7.2px;padding-top:9.6px;padding-bottom:8px;font-size:9.9px}
.wallpaper-choices{row-gap:16px}
footer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}}
.admin-page{margin-top:24px;margin-bottom:24px;padding-bottom:calc(38.4px + env(safe-area-inset-bottom))}
.admin-page .section-head{margin-top:0;margin-bottom:22.4px}
.admin-page h1{font-size:clamp(28.8px,4.5vw,46.8px);margin-bottom:12.8px}
.admin-page .eyebrow{margin-bottom:11.2px}
.admin-page .group{padding-top:19.2px;padding-bottom:19.2px;margin-top:16px}
.admin-page h2{font-size:18px;margin-bottom:11.2px}
.admin-page p{font-size:12.6px;margin-top:8px;margin-bottom:8px}
.admin-page li{font-size:12.6px;margin-top:8px;margin-bottom:8px}
.admin-page label{row-gap:8px;font-size:12.6px}
.admin-page input,.admin-page select{font-size:14.4px}
.admin-page .provider-key-form{padding-top:17.6px;padding-bottom:3.2px}
.admin-page #intelligence-version{margin-top:9.6px;margin-bottom:17.6px}
.admin-page #intelligence-controls{row-gap:16px;margin-top:19.2px}
.admin-page #intelligence-controls>p{margin-top:0;margin-bottom:0}
@media(max-width:600px){.admin-page{margin-top:9.6px;margin-bottom:9.6px}
.admin-page .group{padding-top:16px;padding-bottom:16px}
.admin-page .section-head{margin-bottom:19.2px}
.admin-page .provider-key-row{row-gap:9.6px}
.admin-page button{font-size:12.6px;padding-top:11.2px;padding-bottom:11.2px}
.admin-page #intelligence-controls{row-gap:16px}
.admin-page h2{font-size:17.1px}}
#wallpaper-generate{row-gap:16px;margin-top:19.2px}
#wallpaper-generate select,#wallpaper-generate textarea{font-size:14.4px;padding-top:9.6px;padding-bottom:9.6px}
.wallpaper-preview-grid{row-gap:16px;margin-top:16px}
.wallpaper-preview-copy{row-gap:11.2px;padding-top:12px;padding-bottom:12px}
.wallpaper-preview-copy strong{font-size:clamp(15.3px,1.8vw,21.6px)}
.wallpaper-preview-copy span{padding-top:9.6px;padding-bottom:9.6px;font-size:9px}
.wallpaper-reset{row-gap:9.6px;margin-top:16px}
:root{font-size:90%}
input:not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px!important}
button,summary,a.button{min-height:44px!important}
}