:root { --hud-frame-width: 6px; --hud-line-width: 1px; --hud-line-inset: -3.5px; --hud-radius: 10px; --hud-stripe-radius: 7.5px; --hud-content-radius: 4px; --hud-divider-width: 1px; }
.neura-hud { zoom:var(--hud-scale, 1); display: flex; gap:0; width:calc(640px + var(--nav-width,80px)); background:var(--hud-background); border: 0; border-radius: 0; isolation: isolate; }
.neura-hud::before { content: none; }

.neura-brand { position: absolute; top: var(--brand-top, 6px); left: var(--brand-left, 8px); width: 68px; display: flex; align-items: center; flex-direction: column; gap: 3px; z-index: 1; color: var(--brand-color, var(--nav-ink)); }
.neura-emblem { position: relative; display: block; width: var(--brand-size, 46px); height: var(--brand-size, 46px); }
.neura-ring { width: 100%; height: 100%; object-fit: contain; }
.neura-crystal { position: absolute; width: var(--brand-crystal, 56%); height: var(--brand-crystal, 56%); object-fit: contain; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.neura-name { font: 700 var(--brand-name-size, 10px)/1.2 "Segoe UI", sans-serif; letter-spacing: 1.5px; }
body { padding:20px; min-width:calc((640px + var(--nav-width,80px)) * var(--hud-scale,1) + 40px); }
.neura-nav { flex-shrink: 0; border:0; border-radius: 0; }
.hud-content { background:var(--hud-background); border-radius:0; flex: 1; min-width: 0; overflow: hidden; height: 100%; }
/* Anchor Settings; compact only the five rows above it. */
.neura-nav { gap:max(4px, calc(var(--nav-gap) - 4px)); justify-content: flex-end; padding-bottom: calc(225px - 3 * var(--nav-row-height) - 2.5 * var(--nav-gap) - var(--nav-offset)); }
.neura-nav button { transform: none; }
.neura-nav button:not([data-page="settings"]) { flex-basis: calc(var(--nav-row-height) - var(--nav-lower-shift, 80px) / 8); padding-top: 0; padding-bottom: 0; }
.cdf-clock { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 9px; color: var(--clock-color, var(--nav-ink)); font: 500 var(--clock-size, 12px)/1.2 "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdf-clock [data-cdf-day] { font-size: .8em; letter-spacing: .2px; }



.profile-panel { position:absolute; inset:0; } .profile-panel[hidden] { display:none; } .profile-panel iframe { display:block; width:100%; height:100%; border:0; background:transparent; }

/* Picture-led settings use bounded pages instead of a scrolling form. */
.settings-panel { height:100%; display:flex; flex-direction:column; padding:12px; box-sizing:border-box; color:var(--settings-ink); --settings-ink:#213957; --settings-surface:#edf4ff; --settings-line:#b6cde6; font:12px/1.4 "Segoe UI",sans-serif; background:radial-gradient(ellipse at 95% 8%,#6677db20,transparent 55%),repeating-linear-gradient(135deg,transparent 0 75px,#438bca0c 76px 77px); }
:root[data-theme="dark"] .settings-panel { --settings-ink:#e8f1ff; --settings-surface:#1c2b42; --settings-line:#46607e; }
.settings-panel[hidden] { display:none; }
.settings-header { display:flex; justify-content:space-between; align-items:center; flex:none; height:58px; }
.settings-header h1 { font-size:20px; margin:0; }
.settings-header p { margin:3px 0 0; }
.settings-spark { font-size:48px; line-height:1; color:#638fee; filter:drop-shadow(0 0 7px #39cfff80); }
.settings-workspace { display:grid; grid-template-columns:148px minmax(0,1fr); gap:12px; flex:1; min-height:0; }
.settings-panel button { cursor:pointer; font:600 12px/1.2 "Segoe UI",sans-serif; color:var(--settings-ink); border:1px solid var(--settings-line); background:var(--settings-surface); border-radius:9px; min-height:32px; padding:6px 9px; }
.settings-panel button:focus-visible,.settings-panel input:focus-visible { outline:2px solid #18baff; outline-offset:2px; }
.settings-panel button:hover:not(:disabled) { filter:brightness(1.12); }
.settings-panel button:disabled { opacity:.35; cursor:default; }
.settings-tabs { display:flex; flex-direction:column; gap:8px; justify-content:center; }
.settings-tabs button { display:flex; align-items:center; text-align:left; gap:8px; min-height:51px; border-color:color-mix(in srgb,var(--category) 55%,var(--settings-line)); }
.settings-tabs svg { width:28px; height:28px; flex:none; color:var(--category); filter:drop-shadow(0 0 4px color-mix(in srgb,var(--category) 35%,transparent)); }
.settings-tabs b { margin-left:auto; }
.settings-tabs button[aria-current="true"] { background:linear-gradient(120deg,#1679c9,#6144a7); color:white; border-color:#92d6ff; box-shadow:inset 3px 0 #47d5ff,0 2px 8px #164c6c30; }
.settings-tabs button[aria-current="true"] svg { color:#d7f5ff; }
.settings-scroll { min-width:0; display:flex; flex-direction:column; border:1px solid var(--settings-line); border-radius:14px; background:color-mix(in srgb,var(--settings-surface) 90%,transparent); padding:12px; }
.settings-guide { display:flex; align-items:center; gap:12px; min-height:94px; }
.settings-guide h2 { font-size:17px; margin:3px 0; }
.settings-guide small { text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:9px; }
.settings-guide p { font-size:12px; margin:0; }
.settings-illustration { width:64px; height:64px; flex:none; display:grid; place-items:center; border-radius:22px 14px 22px 14px; border:1px solid color-mix(in srgb,var(--category) 65%,white); background:radial-gradient(circle at 30% 20%,#ffffff70,transparent 70%),color-mix(in srgb,var(--category) 20%,var(--settings-surface)); box-shadow:0 0 0 5px color-mix(in srgb,var(--category) 8%,transparent),inset 0 0 16px #39bfff20; }
.settings-illustration svg { width:42px; height:42px; color:var(--category); }
:root[data-theme="dark"] .settings-illustration svg { color:color-mix(in srgb,var(--category) 55%,white); }
.settings-controls { flex:1; display:flex; flex-direction:column; justify-content:center; gap:5px; min-height:0; }
.settings-field { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:37px; border-bottom:1px solid color-mix(in srgb,var(--settings-line) 40%,transparent); }
.settings-stepper,.color-controls { display:flex; align-items:center; gap:4px; flex:none; }
.settings-panel input { color:var(--settings-ink); background:var(--settings-surface); border:1px solid var(--settings-line); border-radius:6px; font:inherit; }
.settings-panel input[type="number"] { width:43px; height:28px; text-align:center; appearance:textfield; }
.settings-panel input::-webkit-inner-spin-button { appearance:none; }
.settings-panel input[type="color"] { width:46px; height:29px; padding:2px; cursor:pointer; }
.settings-panel input[type="checkbox"] { width:22px; height:22px; accent-color:#537cea; }
.settings-panel .settings-stepper button { width:28px; min-height:28px; padding:2px; font-size:18px; }
.settings-panel .color-controls button { font-size:11px; min-height:28px; }
.settings-theme-choices { display:flex; gap:10px; }
.settings-theme-choices button { flex:1; height:100px; }
.settings-theme-choices span { display:block; font-size:36px; margin-bottom:8px; }
.settings-theme-choices button[aria-pressed="true"] { box-shadow:0 0 0 2px #469cff; background:linear-gradient(130deg,#2068b7,#6250ab); color:white; }
.settings-pagination { display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.settings-footer { flex:none; padding-top:8px; }
.settings-footer [role="status"] { display:block; font-size:11px; margin-bottom:6px; }
.settings-actions { display:flex; gap:6px; justify-content:flex-end; }
.settings-panel .save-settings,.settings-pagination button { background:linear-gradient(120deg,#1679bd,#6246ab); color:white; border-color:#8fc6ef; box-shadow:inset 0 1px #ffffff35; }

/* Short, illustrated footer actions stay readable in either theme. */
.settings-actions { gap:8px; }
.settings-actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:35px; padding:7px 12px; font-size:13px; font-weight:700; color:#fff; border-color:#91b5df; background:linear-gradient(135deg,#3b648e,#354d79); box-shadow:inset 0 1px 0 #ffffff35,0 2px 5px #102e4920; }
.settings-actions svg { width:17px; height:17px; flex:none; }
.settings-actions [data-action="reset-all"] { background:linear-gradient(135deg,#826027,#6d481d); border-color:#d5b175; }
.settings-actions [data-action="discard"] { background:linear-gradient(135deg,#526596,#504879); }
.settings-actions .save-settings { background:linear-gradient(135deg,#087f92,#3065ad); border-color:#75d6e3; }

/* One large crystal-and-circuit artwork unifies the Settings space. */
.settings-panel { background-image:url("settings-backdrop.svg?v=2"),radial-gradient(ellipse at 95% 8%,#6677db20,transparent 65%); background-size:100% 100%; background-repeat:no-repeat; }
.settings-scroll { background:color-mix(in srgb,var(--settings-surface) 88%,transparent); }
.settings-illustration { width:80px; height:80px; border:0; border-radius:0; background:none; box-shadow:none; }
.settings-illustration img { display:block; width:80px; height:80px; filter:drop-shadow(0 4px 5px #29529a40); }
.settings-guide { gap:10px; }
.settings-tabs button { box-shadow:inset 0 1px 0 #ffffff30,0 2px 7px #214a6d15; }