/* Soft pearl volumes and frosted surfaces, shared across IDEONQ. */
:root {
  --glass-fill: rgba(255,255,255,.68);
  --glass-solid: rgba(255,252,253,.94);
  --glass-edge: rgba(255,255,255,.88);
  --glass-keyline: rgba(153,105,128,.18);
  --glass-light: rgba(255,255,255,.92);
  --glass-shade: rgba(158,99,128,.06);
  --glass-inset: rgba(246,238,242,.76);
  --glass-halo: rgba(211,155,184,.2);
  --glass-fog: rgba(228,184,207,.22);
  --glass-shadow: 0 3px 6px rgba(103,67,90,.035), 0 18px 44px rgba(131,81,109,.09), 0 42px 80px rgba(139,93,124,.035);
  --glass-raised: 0 5px 12px rgba(103,67,90,.045), 0 24px 52px rgba(131,81,109,.13);
  --glass-rim: inset 0 1px 0 var(--glass-light), inset 0 -2px 5px var(--glass-shade);
  --glass-cta: linear-gradient(155deg,#b4516d,#a24260);
  --glass-cta-ink: #fff;
  --glass-cta-shadow: 0 8px 18px rgba(149,56,88,.19), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 3px rgba(80,20,45,.12);
}
html[data-theme="dark"] {
  --glass-fill: rgba(46,37,49,.76);
  --glass-solid: rgba(39,32,43,.97);
  --glass-edge: rgba(240,210,230,.18);
  --glass-keyline: rgba(215,176,203,.2);
  --glass-light: rgba(255,235,250,.13);
  --glass-shade: rgba(0,0,0,.12);
  --glass-inset: rgba(25,20,30,.64);
  --glass-halo: rgba(180,115,157,.1);
  --glass-fog: rgba(119,70,112,.22);
  --glass-shadow: 0 3px 8px rgba(0,0,0,.12), 0 18px 44px rgba(0,0,0,.23), 0 42px 80px rgba(0,0,0,.08);
  --glass-raised: 0 5px 12px rgba(0,0,0,.18), 0 24px 52px rgba(0,0,0,.3);
  --glass-cta: linear-gradient(155deg,#efb0c0,#d792aa);
  --glass-cta-ink: #211821;
  --glass-cta-shadow: 0 8px 22px rgba(16,7,19,.24), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 3px rgba(124,59,89,.12);
}

body[data-page] {
  background: radial-gradient(ellipse 720px 610px at 89% 260px,var(--glass-fog),transparent 73%),
    radial-gradient(ellipse 620px 490px at 7% 690px,var(--glass-halo),transparent 74%),var(--background);
}
.page { background: transparent; }
.nav, html[data-theme="dark"] .nav {
  background: color-mix(in srgb,var(--background) 80%,transparent);
  border-bottom: 1px solid var(--glass-keyline);
  box-shadow: 0 5px 22px var(--glass-shade),inset 0 -1px 0 var(--glass-light);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.foot { background: color-mix(in srgb,var(--background) 70%,transparent); }

:is(.workbench,.feature-card,.card,.product,.mail-workspace,.security-stat,.dns-table) {
  background: radial-gradient(ellipse at 8% 0%,var(--glass-light),transparent 58%),var(--glass-fill);
  border: 1px solid var(--glass-keyline);
  border-top-color: var(--glass-edge);
  border-radius: 30px;
  box-shadow: var(--glass-rim),var(--glass-shadow);
}
/* Blur only the main glass panes, rather than every nested control. */
:is(.workbench,.feature-card,.card) {
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}
.feature-stack { gap: 14px; height: auto; }
.feature-card { padding-right: 64px; isolation: isolate; }
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg,var(--glass-light),transparent 45%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--duration-quick) ease;
}
.feature-card>div { transform: none; }
.round-arrow,.feature-icon {
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim),0 7px 15px var(--glass-halo);
  background: linear-gradient(150deg,var(--glass-light),transparent),var(--accent-soft);
}
.feature-icon { border-radius: 23px; }
.feature-icon.neutral,html[data-theme="dark"] .feature-icon,html[data-theme="dark"] .feature-icon.neutral {
  background: linear-gradient(150deg,var(--glass-light),transparent),var(--accent-soft);
}
.round-arrow { background-color: var(--glass-fill); }

.window-bar {
  background: linear-gradient(180deg,var(--glass-light),transparent),var(--glass-fill);
  border-color: var(--glass-keyline);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
.window-bar span { box-shadow: inset 0 1px 2px rgba(255,255,255,.55),0 2px 3px var(--glass-shade); }
.bench-sidebar,.mail-sidebar { background: color-mix(in srgb,var(--soft) 50%,transparent); border-color: var(--glass-keyline); }
.bench-main::before {
  background: radial-gradient(ellipse at 80% 15%,var(--glass-halo),transparent 75%);
  mask-image: none;
}
.bench-search {
  border-color: var(--glass-keyline);
  background: linear-gradient(165deg,var(--glass-light),transparent 68%),var(--glass-fill);
  box-shadow: inset 0 2px 4px var(--glass-shade),inset 0 -1px 0 var(--glass-light),0 5px 12px var(--glass-shade);
}
.bench-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft),inset 0 2px 4px var(--glass-shade); }
.bench-shortcuts>a,.bench-shortcuts>button,.bench-category.is-selected {
  background: linear-gradient(160deg,var(--glass-light),transparent),var(--glass-fill);
  box-shadow: var(--glass-rim),0 3px 7px var(--glass-shade);
  border: 1px solid var(--glass-keyline);
}
.bench-search button,html[data-theme="dark"] .bench-search button {
  background: var(--glass-cta); color: var(--glass-cta-ink); box-shadow: var(--glass-cta-shadow);
}
.search-panel,.nav .auth-links {
  background: linear-gradient(145deg,var(--glass-light),transparent 50%),var(--glass-solid);
  border-color: var(--glass-keyline);
  border-radius: 20px;
  box-shadow: var(--glass-rim),var(--glass-shadow);
}

.hero-symbol { filter: drop-shadow(0 20px 20px var(--glass-halo)); }
.hero-glow {
  width: 78%; height: 78%;
  border-radius: 48% 52% 58% 42% / 48% 48% 52% 52%;
  background: radial-gradient(ellipse at 32% 25%,var(--glass-light),transparent 50%),
    radial-gradient(ellipse at 65% 65%,var(--glass-fog),transparent 74%);
}
.hero-orbit {
  border-color: color-mix(in srgb,var(--accent) 28%,var(--glass-edge));
  background: linear-gradient(155deg,var(--glass-light),transparent 40%);
  box-shadow: inset 0 1px 0 var(--glass-light),0 12px 36px var(--glass-shade);
}
.brand-panel {
  border: 1px solid rgba(255,255,255,.5); border-radius: 30px;
  background: radial-gradient(ellipse at 96% 0%,rgba(236,200,219,.22),transparent 48%),linear-gradient(145deg,#78546e,#705469 56%,#665061);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 8px rgba(45,19,39,.08),var(--glass-shadow);
}
.brand-panel::after { opacity: .28; }
.brand-panel img,.brand-panel p { transform: none; }

.primary-link,.btn:not(.ghost):not(.soft),.nav .nav-actions .nav-start {
  background: var(--glass-cta); color: var(--glass-cta-ink);
  box-shadow: var(--glass-cta-shadow);
}
.nav .theme-toggle,.nav .menu-toggle {
  border: 1px solid var(--glass-keyline);
  border-radius: 15px;
  background: linear-gradient(150deg,var(--glass-light),transparent),var(--glass-fill);
  box-shadow: var(--glass-rim),0 4px 9px var(--glass-shade);
}
.tabs { background: var(--glass-fill); border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim),var(--glass-shadow); }
.tab[aria-pressed="true"] { background: var(--glass-cta); box-shadow: var(--glass-cta-shadow); }
.product .img { background: radial-gradient(ellipse at 30% 10%,var(--glass-light),transparent 65%),var(--glass-inset); box-shadow: inset 0 2px 4px var(--glass-shade),inset 0 -1px 0 var(--glass-light); }
.product .app-icon { box-shadow: inset 0 2px 3px rgba(255,255,255,.6),inset 0 -6px 10px var(--glass-shade),0 14px 22px var(--glass-halo); }
.field input,.field textarea,.mail-search input { border-color: var(--glass-keyline); background: var(--glass-inset); box-shadow: inset 0 2px 4px var(--glass-shade),inset 0 -1px 0 var(--glass-light); }
.field input:focus,.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 2px 4px var(--glass-shade); }
.mail-button { background: var(--glass-fill); border-color: var(--glass-keyline); box-shadow: var(--glass-rim),0 3px 6px var(--glass-shade); border-radius: 12px; }
.security-stat { border-radius: 19px; box-shadow: var(--glass-rim),0 8px 20px var(--glass-shade); }
.dns-table,.legal-table { border-radius: 20px; background: var(--glass-solid); }
.consent-dialog,.mail-dialog { border-radius: 28px; background: linear-gradient(145deg,var(--glass-light),transparent 50%),var(--glass-solid); border-color: var(--glass-keyline); box-shadow: var(--glass-rim),0 30px 90px rgba(26,11,25,.22); }

@media (hover:hover) and (pointer:fine) {
  .feature-card:hover,.product:hover { box-shadow: var(--glass-rim),var(--glass-raised); border-color: color-mix(in srgb,var(--accent) 30%,var(--glass-edge)); }
  .feature-card:hover::after { opacity: .42; }
}
@media(min-width:1281px) {
  .feature-stack { grid-template-rows: 1fr 1fr; min-height: 352px; }
  .workbench,.brand-panel { height: 100%; }
}
@media(max-width:760px) {
  :is(.workbench,.feature-card,.card,.product,.brand-panel) { border-radius: 26px; }
  .feature-stack { gap: 14px; }
  .nav,html[data-theme="dark"] .nav { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  :is(.workbench,.feature-card,.card) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .feature-card { padding-right: 60px; }
  .hero-glow { width: 80%; height: 85%; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :is(.workbench,.feature-card,.card),.nav,html[data-theme="dark"] .nav { background-color: var(--glass-solid); }
}
@media(prefers-reduced-motion:reduce) {
  .feature-card::after { transition: none; }
}
@media(forced-colors:active) {
  :is(.workbench,.feature-card,.card,.product,.mail-workspace,.security-stat,.dns-table,.brand-panel,.tabs,.nav,.nav .auth-links,.consent-dialog,.mail-dialog) { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; backdrop-filter: none; }
  .primary-link,.btn:not(.ghost):not(.soft),.nav .nav-actions .nav-start,.bench-search button { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
}