/* Shared surfaces for our dashboard dialogs and custom account/remote pages. */
:root {
  --ui-ambient-image:url("/ui/ambient-waves-1920.webp");
  --ui-tile-fill-rgb:5,7,12; --ui-idle-glass-alpha:.06;
  --ui-idle-backdrop-blur:32px; --ui-glass-saturate:1.3; --ui-settings-dim-alpha:0;
  --ui-ink:#e3ebf7; --ui-muted:#a5b1c2; --ui-accent:#d0a64a;
  --ui-border:rgba(218,229,245,.22); --ui-control:rgba(255,255,255,.055);
  --ui-surface-filter:blur(var(--ui-idle-backdrop-blur)) saturate(var(--ui-glass-saturate));
  --ui-surface:rgba(var(--ui-tile-fill-rgb),var(--ui-idle-glass-alpha));
}
body.phylogix-custom {
  color:var(--ui-ink); background:#030711; min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --dash-ink:var(--ui-ink); --dash-muted:var(--ui-muted); --dash-gold:var(--ui-accent);
  --dash-gold-strong:var(--ui-accent); --gold-soft:var(--ui-accent); --silver:var(--ui-ink);
}
body.phylogix-custom::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(2,4,13,.04),rgba(2,4,13,.34)),var(--ui-shared-wallpaper,var(--ui-ambient-image)) center/cover;
}
body.phylogix-custom { isolation:isolate; }
#ui-wallpaper-video { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; pointer-events:none; }
body.phylogix-custom .register-shell { background:none; border:0; box-shadow:none; backdrop-filter:none; padding:0; }
.settings-dialog > .settings-panel, .logout-dialog > .logout-panel,
body.phylogix-custom .card, body.phylogix-custom .remote-install-card, body.phylogix-custom .remote-release-card,
body.phylogix-custom.phylogix-landing :is(.hero,.signal-card,.panel,.metrics article,.project-detail,.strip) {
  background:var(--ui-surface); color:var(--ui-ink); border:1px solid var(--ui-border);
  border-radius:30px; padding:20px; box-shadow:0 24px 70px rgba(0,0,0,.28);
  backdrop-filter:var(--ui-surface-filter);
  -webkit-backdrop-filter:var(--ui-surface-filter);
}
.logout-dialog, .settings-dialog { background:rgba(0,0,0,var(--ui-settings-dim-alpha)); }
.logout-dialog .logout-panel { width:min(520px,100%); grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; text-align:center; }
.logout-dialog .logout-panel h2, body.phylogix-custom :is(h1,h2,h3) {
  color:var(--ui-accent); background:none; -webkit-text-fill-color:currentColor;
  font-weight:650; letter-spacing:-.025em; text-shadow:none;
}
body.phylogix-custom h1 { font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.15; }
body.phylogix-custom :is(.muted,.lede,.panel-copy,.profile-links) { color:var(--ui-muted); }
body.phylogix-custom a:not(.button) { color:var(--ui-accent); }
.settings-panel :is(.settings-action,.settings-close), .logout-panel :is(.logout-confirm,.logout-cancel),
body.phylogix-custom :is(button,.button) {
  background:var(--ui-control); color:var(--ui-ink); border:1px solid var(--ui-border);
  border-radius:14px; box-shadow:none; font:inherit; font-weight:600; text-shadow:none;
  transition:background-color .12s,border-color .12s; text-decoration:none;
}
.logout-panel > div { grid-column:1 / -1; }
.logout-panel :is(.logout-confirm,.logout-cancel) { align-self:stretch; }
.logout-panel .logout-confirm { width:100%; min-height:46px; height:auto; padding:10px 12px; display:inline-flex; align-items:center; justify-content:center; gap:8px; justify-self:stretch; box-sizing:border-box; }
.logout-panel .logout-confirm svg { width:20px; height:20px; }
.logout-panel .logout-cancel { grid-column:2; justify-self:stretch; min-height:46px; padding:10px 12px; }
body.phylogix-custom :is(button,.button):hover, .settings-panel :is(.settings-action,.settings-close):hover,
.logout-panel :is(.logout-confirm,.logout-cancel):hover { background:rgba(255,255,255,.10); border-color:rgba(var(--ui-accent-rgb),.65); }
body.phylogix-custom button.danger { color:#ffc0c0; border-color:rgba(220,90,90,.5); }
body.phylogix-custom :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) {
  background:rgba(0,0,0,.22); border:1px solid var(--ui-border); color:var(--ui-ink); border-radius:12px; box-shadow:none; font:inherit;
}
body.phylogix-custom :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }
body.phylogix-custom .settings-nav span { color:var(--ui-accent); }
body.phylogix-custom table { background:transparent; }
body.phylogix-custom :is(th,td) { border-color:var(--ui-border); }
.remote-panel .remote-step { border-color:var(--ui-border); background:rgba(255,255,255,.025); }
body.phylogix-custom .remote-install-qr-frame { width:min(100%,340px); padding:12px; border:0; border-radius:16px; background:white; box-shadow:none; }
body.phylogix-custom .remote-install-qr-frame img { display:block; width:100%; aspect-ratio:1; height:auto; }
body.phylogix-custom .remote-install-qr-frame:hover { transform:none; box-shadow:none; }
body.phylogix-custom::before { opacity:1; mix-blend-mode:normal; }
body.phylogix-custom.profile-page .settings-nav button { background:var(--ui-control); color:var(--ui-ink); border-radius:14px; box-shadow:none; }
body.phylogix-custom .register-shell { -webkit-backdrop-filter:none; }
/* Profile uses the dashboard's actual dialog; only the form is loaded. */
.profile-panel { width:min(760px,100%); }
.profile-panel .profile-shell { width:100%; display:grid; gap:12px; }
.profile-panel .profile-shell > h1, .profile-panel .profile-links { display:none; }
.profile-panel .profile-card { padding:0; border:0; background:none; box-shadow:none; }
.profile-panel .lede { color:var(--ui-muted); font-size:.9rem; line-height:1.45; text-align:center; }
.profile-panel .profile-top { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:start; }
.profile-panel .profile-avatar-column { display:grid; gap:8px; justify-items:center; }
.profile-panel .profile-fields-stack { display:grid; gap:10px; }
.profile-panel .profile-inline-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.profile-panel .profile-inline-row > div { min-width:0; }
.profile-panel .profile-avatar-label { position:relative; display:grid; place-items:center; cursor:pointer; }
.profile-panel .profile-avatar { position:relative; display:grid; place-items:center; width:112px; height:112px; border-radius:50%; overflow:hidden; }
.profile-panel .profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile-panel .avatar-upload { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.profile-panel .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.profile-panel .settings-nav { display:grid; grid-template-columns:44px 1fr 44px; gap:12px; align-items:center; margin-bottom:12px; }
.profile-panel .settings-nav button { height:40px; font-size:1.4rem; }
.profile-panel .settings-nav span { text-align:center; color:var(--ui-accent); font-weight:600; }
.profile-panel .settings-dots { display:flex; justify-content:center; gap:7px; margin:0 0 18px; }
.profile-panel .settings-dots span { width:7px; height:7px; border-radius:50%; background:var(--ui-border); }
.profile-panel .settings-dots .is-active { background:var(--ui-accent); }
.profile-panel .profile-tab { display:none; }
.profile-panel .profile-tab.is-active { display:block; }
.profile-panel input:not([type=checkbox]):not([type=file]) { width:100%; min-width:0; padding:10px 12px; font:inherit; }
.profile-panel input:focus-visible, .profile-panel button:focus-visible, .profile-panel .profile-avatar-label:focus-within { outline:2px solid var(--ui-accent); outline-offset:3px; }
.profile-panel .password-row { display:grid; gap:10px; }
.profile-panel .password-row label { display:grid; gap:6px; }
.profile-panel .notification-list { display:grid; gap:10px; }
.profile-panel .notification-toggle { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; padding:12px; border:1px solid var(--ui-border); border-radius:14px; }
.profile-panel .notification-toggle input { width:20px; height:20px; accent-color:var(--ui-accent); }
.profile-panel .notification-toggle strong, .profile-panel .notification-toggle small { display:block; }
.profile-panel .notification-toggle small, .profile-panel .panel-copy { color:var(--ui-muted); line-height:1.4; }
.profile-panel .panel-copy { margin-bottom:12px; }
.profile-panel button[type=submit] { width:100%; margin-top:18px; padding:10px 14px; }
.profile-panel button { font:inherit; cursor:pointer; }
.profile-panel button:disabled { opacity:.5; cursor:wait; }
.profile-panel .field-error-text { color:#ffb8b8; display:block; margin-top:6px; font-size:.85rem; }
.profile-panel .field-error { border-color:#dc7777 !important; }
.profile-panel :is(.notice,.error) { padding:12px; border:1px solid var(--ui-border); border-radius:14px; }
.profile-panel .error { color:#ffb8b8; }
.profile-panel .notice { color:#b8edc7; }
.profile-panel #profile-status:empty { display:none; }
.profile-panel button, body.phylogix-custom.profile-page button {
  color:var(--ui-ink); background:var(--ui-control); border:1px solid var(--ui-border); border-radius:14px; box-shadow:none;
}
.profile-panel input:not([type=checkbox]):not([type=file]), body.phylogix-custom.profile-page input:not([type=checkbox]):not([type=file]) {
  background:rgba(0,0,0,.22); color:var(--ui-ink); border:1px solid var(--ui-border); border-radius:12px;
}
.profile-panel .profile-avatar, body.phylogix-custom.profile-page .profile-avatar {
  background:var(--ui-control); border:1px solid var(--ui-border); color:var(--ui-accent); box-shadow:none; font-size:1.8rem; font-weight:600;
}
@media(max-width:600px) {
  .profile-panel .profile-top, .profile-panel .profile-inline-row { grid-template-columns:1fr; }
}

/* Shared controls for every custom surface. */
.settings-panel select { min-width:0; color:var(--ui-ink); background:var(--ui-control); border:1px solid var(--ui-border); border-radius:12px; padding:9px 12px; font:inherit; max-width:100%; }
.settings-panel option { background:#10151e; color:var(--ui-ink); }



.dashboard-greeting { font-size:clamp(1.35rem,3.5vw,3.4rem); line-height:1.15; letter-spacing:-.035em; white-space:normal; overflow-wrap:anywhere; }
.account-avatar-face, .account-tile-logout { background:var(--ui-surface); border:1px solid var(--ui-border); color:var(--ui-accent); box-shadow:none; }
.remote-status:empty { display:none; }
body.phylogix-custom main { position:relative; }


body.phylogix-landing .hero::before, body.phylogix-landing .hero::after { display:none; }
body.phylogix-landing::before { mask-image:none; }


/* One accent palette. Material highlights change luminance, not the gold hue. */
:root, body.phylogix-custom {
  --ui-accent:#d0a64a; --ui-accent-rgb:208,166,74;
  --gold:var(--ui-accent); --gold-soft:var(--ui-accent); --gold-hi:var(--ui-accent); --gold-deep:var(--ui-accent);
  --dash-gold:var(--ui-accent); --dash-gold-strong:var(--ui-accent);
  --gold-title-shadow:none; --gold-text:linear-gradient(var(--ui-accent),var(--ui-accent));
  --line-gold:rgba(var(--ui-accent-rgb),.28);
}
/* Surfaces. The shared sheet (.dashboard-glass-layer) carries each material's
   base: colour, tint, blur, texture for panels. Every app tile lights itself
   (.service-surface background): one light, set in Settings (direction and
   height; ui.js turns it into --ui-lx/--ui-ly, --ui-light-* and per-edge
   factors), so each tile has its own lit side, bevel and highlight, and they
   ride with the tile wherever an intro moves it. The tile's lighting sits under
   the layouts' own inset rings (box-shadow) and under its text. */
:root {
  --ui-surface:rgba(var(--ui-tile-fill-rgb),var(--ui-idle-glass-alpha));
  --ui-metal-base:color-mix(in srgb,rgb(var(--ui-tile-fill-rgb)) 52%,#757c86);
  --ui-plastic-base:color-mix(in srgb,rgb(var(--ui-tile-fill-rgb)) 74%,#5a616c);
  --ui-wood-image:url("/ui/walnut-v2.webp?v=20261106");
  --ui-wood-size:680px 680px;
  --ui-wood-stain:rgba(13,8,5,.30);
}
@media(min-width:2400px) { :root { --ui-wood-size:1034px 1034px; } }
:root[data-ui-material="glass"][data-ui-finish="frosted"] { --ui-surface:color-mix(in srgb,rgba(var(--ui-tile-fill-rgb),var(--ui-idle-glass-alpha)) 85%,rgba(190,205,225,var(--ui-idle-glass-alpha))); }
:root[data-ui-material="metal"] { --ui-surface-filter:none; --ui-surface:url("/ui/brushed-v1.webp?v=20261106") 0 0 / 1024px 256px repeat,linear-gradient(var(--ui-metal-base),var(--ui-metal-base)); }
:root[data-ui-material="metal"][data-ui-finish="satin"] { --ui-metal-base:color-mix(in srgb,rgb(var(--ui-tile-fill-rgb)) 50%,#80868f); --ui-surface:linear-gradient(var(--ui-metal-base),var(--ui-metal-base)); }
:root[data-ui-material="metal"][data-ui-finish="anodized"] { --ui-metal-base:color-mix(in srgb,rgb(var(--ui-tile-fill-rgb)) 62%,#4d5560); --ui-surface:linear-gradient(var(--ui-metal-base),var(--ui-metal-base)); }
:root[data-ui-material="wood"] { --ui-surface-filter:none; --ui-surface:linear-gradient(var(--ui-wood-stain),var(--ui-wood-stain)),var(--ui-wood-image) 0 0 / var(--ui-wood-size) repeat; }
:root[data-ui-material="wood"][data-ui-finish="oak"] { --ui-wood-stain:rgba(167,114,62,.10); }
:root[data-ui-material="wood"][data-ui-finish="ebonized"] { --ui-wood-stain:rgba(5,7,8,.64); }
:root[data-ui-material="plastic"] { --ui-surface-filter:none; --ui-surface:linear-gradient(var(--ui-plastic-base),var(--ui-plastic-base)); }
.dashboard-glass-layer { background:var(--ui-surface); backdrop-filter:var(--ui-surface-filter); -webkit-backdrop-filter:var(--ui-surface-filter); }
:root:not([data-ui-material="glass"]) .service-surface::after { display:none; }

/* Per-tile light. --bw: bevel width; --bhi/--blo: lit / shaded bevel strength;
   --spec: highlight; --shade/--lit: the face's falloff away from / towards the light. */
:root:root .service:not(.utility-tile) > .service-surface {
  --bw:2px; --bhi:.28; --blo:.20; --bsharp:0%; --spec:.09; --shade:.06; --lit:.06;
  --edge:linear-gradient(to bottom,rgb(var(--ui-edge-t-rgb) / calc(var(--ui-edge-t-lit) * var(--bhi) + var(--ui-edge-t-dark) * var(--blo))) var(--bsharp),transparent),
    linear-gradient(to left,rgb(var(--ui-edge-r-rgb) / calc(var(--ui-edge-r-lit) * var(--bhi) + var(--ui-edge-r-dark) * var(--blo))) var(--bsharp),transparent),
    linear-gradient(to top,rgb(var(--ui-edge-b-rgb) / calc(var(--ui-edge-b-lit) * var(--bhi) + var(--ui-edge-b-dark) * var(--blo))) var(--bsharp),transparent),
    linear-gradient(to right,rgb(var(--ui-edge-l-rgb) / calc(var(--ui-edge-l-lit) * var(--bhi) + var(--ui-edge-l-dark) * var(--blo))) var(--bsharp),transparent);
  --edge-size:100% var(--bw),var(--bw) 100%,100% var(--bw),var(--bw) 100%;
  --edge-pos:0 0,100% 0,0 100%,0 0;
  --glint:radial-gradient(ellipse 75% 130% at var(--ui-light-px) var(--ui-light-py),rgba(255,255,255,calc(var(--spec) * (.45 + .55 * var(--ui-light-graze)))),transparent 62%);
  --face:linear-gradient(var(--ui-light-angle),rgba(0,0,0,var(--shade)),transparent 50%,rgba(255,255,255,var(--lit)));
  --seed:calc(var(--tile-seed-x,0) * -1px) calc(var(--tile-seed-y,0) * -1px);
  background-image:var(--edge),var(--glint),var(--face);
  background-size:var(--edge-size),100% 100%,100% 100%;
  background-position:var(--edge-pos),0 0,0 0;
  background-repeat:no-repeat;
}
/* Glass: etched (frosted) glass scatters: softer, wider, dimmer highlights. */
:root[data-ui-material="glass"][data-ui-finish="frosted"] .service:not(.utility-tile) > .service-surface { --bhi:.13; --blo:.10; --bw:2.5px; --spec:.05; --lit:.04; }
/* Stained glass: pieces of tinted glass held by dark lead cames, a came round
   the panel; each tile shows its own part of the pattern (--tile-seed). */
:root[data-ui-material="glass"][data-ui-finish="stained"] .service:not(.utility-tile) > .service-surface {
  --bw:5px; --bhi:.22; --blo:.30; --bsharp:30%;
  --came:linear-gradient(rgba(21,18,15,.9),rgba(21,18,15,.9));
  background-image:var(--edge),var(--glint),var(--face),var(--came),var(--came),var(--came),var(--came),url("/ui/stained-v1.svg?v=20261106");
  background-size:var(--edge-size),100% 100%,100% 100%,100% 4px,4px 100%,100% 4px,4px 100%,200% auto;
  background-position:var(--edge-pos),0 0,0 0,0 0,100% 0,0 100%,0 0,var(--seed);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
}
/* Metal: machined chamfer; brushed metal reflects the light as a streak across
   the brushing (anisotropic), satin as a soft wide lobe, anodized barely. */
:root[data-ui-material="metal"] .service:not(.utility-tile) > .service-surface {
  --bw:2px; --bhi:.42; --blo:.48; --bsharp:45%; --shade:.20; --lit:.10;
  --streak:radial-gradient(ellipse 24% 180% at var(--ui-light-px) 50%,rgba(255,255,255,calc(.10 + .08 * var(--ui-light-graze))),rgba(255,255,255,.04) 50%,transparent 78%);
  background-image:var(--edge),var(--streak),var(--face),url("/ui/brushed-v1.webp?v=20261106"),linear-gradient(var(--ui-metal-base),var(--ui-metal-base));
  background-size:var(--edge-size),100% 100%,100% 100%,1024px 256px,100% 100%;
  background-position:var(--edge-pos),0 0,0 0,var(--seed),0 0;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,no-repeat;
}
:root[data-ui-material="metal"][data-ui-finish="satin"] .service:not(.utility-tile) > .service-surface {
  --bhi:.30; --blo:.36; --bsharp:20%; --bw:2.5px; --shade:.16; --lit:.08;
  --streak:radial-gradient(ellipse 55% 150% at var(--ui-light-px) var(--ui-light-py),rgba(255,255,255,calc(.10 + .08 * var(--ui-light-graze))),transparent 70%);
  background-image:var(--edge),var(--streak),var(--face),linear-gradient(var(--ui-metal-base),var(--ui-metal-base));
  background-size:var(--edge-size),100% 100%,100% 100%,100% 100%;
  background-position:var(--edge-pos),0 0,0 0,0 0;
  background-repeat:no-repeat;
}
:root[data-ui-material="metal"][data-ui-finish="anodized"] .service:not(.utility-tile) > .service-surface {
  --bhi:.24; --blo:.34; --bsharp:30%; --shade:.14; --lit:.05;
  --streak:radial-gradient(ellipse 80% 140% at var(--ui-light-px) var(--ui-light-py),rgba(255,255,255,.05),transparent 70%);
  background-image:var(--edge),var(--streak),var(--face),linear-gradient(var(--ui-metal-base),var(--ui-metal-base));
  background-size:var(--edge-size),100% 100%,100% 100%,100% 100%;
  background-position:var(--edge-pos),0 0,0 0,0 0;
  background-repeat:no-repeat;
}
/* Wood: each tile is its own piece cut from the board (its own part of the
   grain), with an eased edge that catches the light and an oiled sheen that
   runs across the grain. */
:root[data-ui-material="wood"] .service:not(.utility-tile) > .service-surface {
  --bw:3px; --bhi:.20; --blo:.42; --bsharp:25%; --shade:.18; --lit:.07;
  --sheen:radial-gradient(ellipse 22% 150% at var(--ui-light-px) 50%,rgba(255,232,200,calc(.05 + .05 * var(--ui-light-graze))),transparent 70%);
  background-image:var(--edge),var(--sheen),var(--face),linear-gradient(var(--ui-wood-stain),var(--ui-wood-stain)),var(--ui-wood-image);
  background-size:var(--edge-size),100% 100%,100% 100%,100% 100%,var(--ui-wood-size);
  background-position:var(--edge-pos),0 0,0 0,0 0,var(--seed);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
}
:root[data-ui-material="wood"][data-ui-finish="ebonized"] .service:not(.utility-tile) > .service-surface { --bhi:.14; --blo:.40; }
/* Plastic: moulded, softly rounded edges; matte scatters the light, satin
   shows a soft highlight, gloss a sharp one under a clear coat. */
:root[data-ui-material="plastic"] .service:not(.utility-tile) > .service-surface {
  --bw:5px; --bhi:.12; --blo:.28; --shade:.16; --lit:.09; --spec:.045;
  --glint:radial-gradient(ellipse 95% 150% at var(--ui-light-px) var(--ui-light-py),rgba(255,255,255,var(--spec)),transparent 70%);
  background-image:var(--edge),var(--glint),var(--face),linear-gradient(var(--ui-plastic-base),var(--ui-plastic-base));
  background-size:var(--edge-size),100% 100%,100% 100%,100% 100%;
  background-position:var(--edge-pos),0 0,0 0,0 0;
  background-repeat:no-repeat;
}
:root[data-ui-material="plastic"][data-ui-finish="satin"] .service:not(.utility-tile) > .service-surface {
  --bw:4px; --bhi:.14; --spec:.09;
  --glint:radial-gradient(ellipse 55% 95% at var(--ui-light-px) var(--ui-light-py),rgba(255,255,255,var(--spec)),transparent 72%);
}
:root[data-ui-material="plastic"][data-ui-finish="gloss"] .service:not(.utility-tile) > .service-surface {
  --bw:3px; --bhi:.30; --bsharp:35%; --blo:.30; --shade:.16; --lit:.05;
  --glint:radial-gradient(ellipse 18% 32% at var(--ui-light-px) var(--ui-light-py),rgba(255,255,255,.30),rgba(255,255,255,.07) 45%,transparent 62%),
    linear-gradient(calc(var(--ui-light-angle) + 90deg),transparent 26%,rgba(255,255,255,.03) 33% 43%,transparent 50%);
  background-image:var(--edge),var(--glint),var(--face),linear-gradient(var(--ui-plastic-base),var(--ui-plastic-base));
  background-size:var(--edge-size),100% 100%,100% 100%,100% 100%,100% 100%;
  background-position:var(--edge-pos),0 0,0 0,0 0,0 0;
}
/* An unavailable app keeps its red wash over any material (after the material rules). */
:root:root .service.is-unavailable:not(.utility-tile) > .service-surface { background-image:linear-gradient(145deg,rgba(95,22,22,.28),rgba(3,5,9,.48)); background-size:100% 100%; background-position:0 0; background-repeat:no-repeat; }
.settings-option[hidden] { display:none; }
/* Remove the bloom at its source when a dark overlay compresses the gradients. */
.ui-dimmed :is(.settings-panel,.logout-panel) { box-shadow:none; }
.ui-dimmed :is(h1,h2,.setting-value,.settings-action) { text-shadow:none; }
.description-text { display:block; }
.service-description { mask-image:linear-gradient(transparent,#000 3px,#000 calc(100% - 3px),transparent); }
@media(prefers-reduced-motion:reduce) { .service-description { overflow-y:auto; pointer-events:auto; scrollbar-width:thin; } }
.greeting-reveal { animation:greetingReveal .24s cubic-bezier(.16,1,.3,1) both; }
@keyframes greetingReveal { from {opacity:0;transform:translateY(8px);clip-path:inset(0 0 100% 0);} to {opacity:1;transform:none;clip-path:inset(0);} }
@media(prefers-reduced-motion:reduce) { .greeting-reveal { animation:none; } }
.remote-qr img { image-rendering:pixelated; }
body.phylogix-custom :is(th,.section-header h2,.account-display,.remote-download-copy strong) { color:var(--ui-accent); }
body.phylogix-custom :is(.notice,.error,.toggle,.group-badge,.group-pill,.avatar,.invite-preset,.password-dots) { border-color:var(--ui-border); }
body.phylogix-custom :is(.toggle,.avatar) { background:var(--ui-control);color:var(--ui-ink); }
body.phylogix-custom :is(.notice,.error) { padding:10px 12px;border:1px solid var(--ui-border);border-radius:14px; }
body.phylogix-custom .error { color:#ffb8b8;border-color:rgba(220,90,90,.5); }
body.phylogix-custom .notice { color:#b8edc7; }
body.phylogix-custom :is(.status-badge.active,.group-pill:has(input:checked)) { color:#b8edc7;background:rgba(50,130,70,.16);border-color:rgba(100,190,120,.4); }
body.phylogix-custom :is(.status-badge.inactive,.status-badge.expired) { color:#ffb8b8;background:rgba(150,50,50,.15); }
body.phylogix-custom .switch span { background:var(--ui-control);border-color:var(--ui-border); }
body.phylogix-custom .switch span::before { background:var(--ui-muted); }
body.phylogix-custom .switch input:checked + span { background:rgba(var(--ui-accent-rgb),.20);border-color:var(--ui-accent); }
body.phylogix-custom .switch input:checked + span::before { background:var(--ui-accent); }
body.phylogix-custom :is(h1,h2,h3) { text-shadow:none; }
body.phylogix-custom :is(button,.button):hover { box-shadow:none; }

.dashboard-greeting:not([data-revealed]) { visibility:hidden; }


.remote-step[hidden], #remote-sign-in[hidden] { display:none; }
.remote-steps:has(#remote-pair-step[hidden]) { grid-template-columns:minmax(0,1fr); width:min(100%,420px); justify-self:center; }
#remote-sign-in { justify-self:center; }
/* Optional greeting settles into its real header position; no extra blur layer. */

/* Quiet backgrounds and visible keyboard affordances while a panel is open. */
main[inert] .service.is-expanded .logo-pulse-layer{animation-play-state:paused}
.media-source-pill:has(input[type=file]:focus-visible){outline:2px solid var(--ui-accent);outline-offset:3px}

/* Surface ink adapts to pale tints; the wallpaper and accent palette stay independent. */
:root[data-ui-surface-tone=light] :is(.service,.app-preview),
:root[data-ui-panel-tone=light] :is(.settings-panel,.logout-panel),
:root[data-ui-surface-tone=light][data-ui-layout=horizon] .services-section,
:root[data-ui-surface-tone=light] body.phylogix-custom :is(.card,.remote-install-card,.remote-release-card,.hero,.signal-card,.panel,.metrics article,.project-detail,.strip){
  --ui-ink:#182333;--ui-muted:#455365;--ui-border:rgba(24,35,51,.25);--ui-control:rgba(24,35,51,.055);
  --silver:var(--ui-ink);--muted:var(--ui-muted);--dash-ink:var(--ui-ink);--dash-muted:var(--ui-muted);--line:var(--ui-border);
  color:var(--ui-ink);color-scheme:light;
}
:root[data-ui-surface-tone=light] .service strong,
:root[data-ui-surface-tone=light] .app-preview :is(h2,h3,strong,label),
:root[data-ui-panel-tone=light] :is(.settings-panel,.logout-panel) :is(h2,h3,strong,label){color:var(--ui-ink)}
:root[data-ui-surface-tone=light] .service :is(em,.service-description),
:root[data-ui-surface-tone=light] :is(.preview-description,.preview-kicker),
:root[data-ui-panel-tone=light] :is(.settings-option>span>span,.settings-panel p){color:var(--ui-muted)}
:root[data-ui-surface-tone=light] .service[data-logo-monochrome=true] :is(.logo-contour-image,.service-logo),
:root[data-ui-surface-tone=light] .preview-art[data-logo-monochrome=true] img{filter:brightness(0)}
:root[data-ui-panel-tone=light] .settings-panel :is(.media-name,.setting-value){color:var(--ui-ink)!important}

/* Native option palettes and readable feedback only inside pale surfaces. */
:root[data-ui-panel-tone=light] .settings-panel option {
  background:Canvas;
  color:CanvasText;
}
:root[data-ui-panel-tone=light] .profile-panel :is(.error,.field-error-text),
:root[data-ui-surface-tone=light] body.phylogix-custom :is(.card,.remote-install-card,.remote-release-card,.hero,.signal-card,.panel,.metrics article,.project-detail,.strip) .error {
  color:#9d2736;
}
:root[data-ui-panel-tone=light] .profile-panel .notice,
:root[data-ui-surface-tone=light] body.phylogix-custom :is(.card,.remote-install-card,.remote-release-card,.hero,.signal-card,.panel,.metrics article,.project-detail,.strip) .notice {
  color:#23613c;
}
/* Panels follow the dashboard type scale instead of an abrupt 4K enlargement. */
@media(min-width:2000px){
 .settings-panel{width:min(860px,86vw);max-height:84vh;padding:24px;gap:14px;font-size:18px;border-radius:32px}
 .settings-panel h2{font-size:1.65rem}
 .settings-category{gap:12px;padding:16px;border-radius:24px}
 .settings-category h3{font-size:.9rem}
 .settings-option{grid-template-columns:minmax(0,1fr) minmax(260px,300px);gap:16px;padding:11px 2px}
 .settings-option strong{font-size:1.1rem;line-height:1.25}
 .settings-option span span{font-size:.95rem;line-height:1.35;margin-top:4px}
 .settings-panel select{padding:10px 14px;font-size:1.1rem}
 .settings-option :is(.setting-range,.setting-color-control,.media-source-control,.settings-status){width:100%}
 .setting-value{font-size:1.05rem}
 .settings-panel :is(.settings-action,.settings-close,.logout-cancel){font-size:1rem;padding:10px 16px}
 .settings-panel .media-source-control,.settings-panel .media-source-pill{height:2.75rem}
 .settings-panel .media-name{font-size:.9rem}
 .settings-option input[type=range]{height:28px}
 .remote-panel{width:min(1080px,86vw)}
 .remote-qr{width:min(100%,360px)}
 .remote-step{padding:20px;gap:16px}
 .remote-step h3{font-size:1.3rem}
 .logout-panel{width:min(640px,86vw)}
}

.settings-category,.settings-option{min-width:0}
@media(max-width:420px){.settings-dialog,.logout-dialog{padding:12px}.settings-dialog>.settings-panel,.logout-dialog>.logout-panel{padding:16px}.settings-category{padding:10px}.settings-option>span{overflow-wrap:anywhere}}

@media(min-width:1921px),(min-width:1000px) and (min-resolution:1.5dppx){:root{--ui-ambient-image:url("/ui/ambient-waves.webp")}}

.settings-panel :is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}

.settings-panel{overscroll-behavior:contain}

/* ---- Themed select popups (customizable select). Other browsers keep the native select. ---- */
@supports (appearance: base-select) {
  :is(.settings-panel, body.phylogix-custom) select,
  :is(.settings-panel, body.phylogix-custom) select::picker(select) { appearance: base-select; }
  :is(.settings-panel, body.phylogix-custom) select {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    box-sizing: border-box; cursor: pointer; line-height: normal;
  }
  :is(.settings-panel, body.phylogix-custom) select:disabled { cursor: default; }
  :is(.settings-panel, body.phylogix-custom) select > button { display: none; }
  :is(.settings-panel, body.phylogix-custom) select selectedcontent { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
  :is(.settings-panel, body.phylogix-custom) select::picker-icon {
    content: ""; flex: none; width: .5em; height: .5em; margin-inline-start: auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-.15em) rotate(45deg); opacity: .8; transition: transform .14s ease;
  }
  :is(.settings-panel, body.phylogix-custom) select:open::picker-icon { transform: translateY(.1em) rotate(225deg); }

  :is(.settings-panel, body.phylogix-custom) select::picker(select) {
    box-sizing: border-box; margin: 6px 0; padding: 6px;
    min-inline-size: anchor-size(inline); max-block-size: min(60vh, 22rem);
    background: var(--ui-surface); color: var(--ui-ink);
    border: 1px solid var(--ui-border); border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    backdrop-filter: var(--ui-surface-filter); -webkit-backdrop-filter: var(--ui-surface-filter);
    overflow: auto; overscroll-behavior: contain;
    opacity: 0; transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, overlay .14s allow-discrete, display .14s allow-discrete;
  }
  :is(.settings-panel, body.phylogix-custom) select:open::picker(select) { opacity: 1; transform: none; }
  @starting-style {
    :is(.settings-panel, body.phylogix-custom) select:open::picker(select) { opacity: 0; transform: translateY(-4px); }
  }
  :is(.settings-panel, body.phylogix-custom) select option {
    display: flex; align-items: center; gap: 10px; min-height: 2.5rem; box-sizing: border-box;
    padding: 8px 12px; border-radius: 12px; background: transparent; color: var(--ui-ink);
    font: inherit; cursor: pointer;
  }
  :is(.settings-panel, body.phylogix-custom) select option::checkmark {
    order: 1; margin-inline-start: auto; color: var(--ui-accent); font-weight: 700;
  }
  :is(.settings-panel, body.phylogix-custom) select option:hover,
  :is(.settings-panel, body.phylogix-custom) select option:focus-visible {
    background: var(--ui-control); outline: 0; box-shadow: inset 0 0 0 1px rgba(var(--ui-accent-rgb),.55);
  }
  :is(.settings-panel, body.phylogix-custom) select option:checked { color: var(--ui-accent); font-weight: 650; }
  :is(.settings-panel, body.phylogix-custom) select option:disabled { opacity: .5; cursor: default; }
  :root[data-ui-panel-tone=light] .settings-panel select option { background: transparent; color: var(--ui-ink); }
  :root[data-ui-panel-tone=light] .settings-panel select option:checked { color: var(--ui-ink); }
  @media (prefers-reduced-motion: reduce) {
    :is(.settings-panel, body.phylogix-custom) select::picker(select),
    :is(.settings-panel, body.phylogix-custom) select::picker-icon { transition: none; transform: none; }
  }
}