/* CDO visual contract: smoke-blue thin glass, 2026-10-19.
 * Integration owner: CTO. Load after the existing workspace/account theme.
 * Geometry, responsive rules, authentication and data behavior stay in their sources.
 * Only localized surfaces blur; no ancestor opacity, full-screen blur or nested blur.
 */
body.desk-monitor,
body.desk-account,
#personal-portal {
  --glass-ink: #edf2fa;
  --glass-muted: #c5d1e0;
  --glass-edge: rgba(222, 235, 251, .17);
  --glass-edge-light: rgba(235, 244, 255, .36);
  --glass-edge-dark: rgba(192, 213, 238, .09);
  --glass-shadow: 0 18px 50px rgba(2, 9, 19, .19),
    0 3px 12px rgba(2, 9, 19, .10),
    inset 0 1px 0 rgba(246, 250, 255, .08);
  color: var(--glass-ink);
}

/* One quiet sky, a lighter veil, and the existing sparse meteor scene. */
.desk-monitor .sky-shade,
.desk-account .sky-shade {
  background: linear-gradient(110deg, rgba(5, 15, 29, .34), rgba(5, 15, 29, .13) 58%, rgba(5, 15, 29, .26)),
    linear-gradient(180deg, rgba(5, 15, 29, .07), rgba(5, 15, 29, .33));
}

/* The reflection is a background gradient, not another blurred layer. */
.desk-monitor .panel,
.desk-account .card,
.desk-login .verification-dialog,
.desk-monitor dialog,
#personal-portal .portal-login {
  background:
    linear-gradient(132deg, rgba(218, 234, 255, .105), rgba(218, 234, 255, .025) 38%, rgba(218, 234, 255, 0) 70%),
    rgba(12, 27, 46, .32);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-light);
  border-bottom-color: var(--glass-edge-dark);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  color: var(--glass-ink);
}

/* Smaller information cards retain their existing18px radius. */
.desk-account .card,
.desk-login .verification-dialog,
.desk-monitor dialog,
#personal-portal .portal-login {
  border-radius: 22px;
}
.desk-account .card,
#personal-portal .portal-login {
  background:
    linear-gradient(132deg, rgba(224, 238, 255, .10), rgba(224, 238, 255, .015) 45%, transparent 75%),
    rgba(12, 27, 46, .20);
}
.desk-login .verification-dialog,
.desk-monitor dialog {
  /* Dialog content remains legible above a second surface. */
  background:
    linear-gradient(132deg, rgba(224, 238, 255, .10), transparent 60%),
    rgba(12, 27, 46, .52);
}

/* Nested account sections use a tint and a hairline, never another backdrop blur. */
.desk-account .device,
.desk-account .new-account {
  background: linear-gradient(130deg, rgba(213, 232, 254, .035), rgba(7, 19, 35, .12));
  border-color: rgba(218, 235, 255, .15);
  box-shadow: inset 0 1px 0 rgba(244, 249, 255, .035);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.desk-monitor aside {
  background: linear-gradient(120deg, rgba(211, 232, 255, .035), transparent 60%), rgba(9, 22, 39, .43);
  border-right-color: rgba(218, 235, 255, .13);
  box-shadow: 12px 0 35px rgba(2, 9, 19, .10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.desk-monitor .subnav {
  /* Scrolling text needs a quieter surface than a standalone card. */
  background: rgba(12, 26, 44, .79);
  border-bottom-color: rgba(218, 235, 255, .15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.desk-monitor th {
  background: rgba(7, 18, 32, .24);
}
.desk-monitor td,
.desk-monitor th {
  border-bottom-color: rgba(218, 235, 255, .12);
}
.desk-monitor .table-scroll,
.desk-monitor table,
.desk-monitor .chart {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Fine controls keep a visible boundary without thick decorative outlines. */
.desk-monitor button,
.desk-monitor input,
.desk-monitor select,
.desk-account input:not([type=checkbox]),
#personal-portal .portal-login input:not([type=checkbox]) {
  background: rgba(8, 22, 40, .25);
  border-color: rgba(218, 235, 255, .23);
  box-shadow: inset 0 1px 2px rgba(2, 9, 19, .10);
}
.desk-monitor select option,
.desk-account select option {
  background: #15243a;
  color: #edf2fa;
}
.desk-monitor button[aria-pressed=true] {
  border-color: rgba(223, 198, 151, .70);
  background: rgba(223, 198, 151, .10);
  color: #f0dfbd;
  font-weight: 600;
}
.desk-monitor #navigation a[aria-current] {
  background: linear-gradient(115deg, rgba(221, 198, 155, .105), rgba(193, 215, 241, .025));
  box-shadow: inset 2px 0 rgba(223, 198, 151, .80);
}
.desk-monitor .muted,
.desk-monitor small,
.desk-account .hint,
.desk-account .lead {
  color: var(--glass-muted);
}

@media(max-width:780px) {
  .desk-monitor .panel,
  .desk-account .card,
  .desk-login .verification-dialog,
  .desk-monitor dialog,
  #personal-portal .portal-login {
    backdrop-filter: blur(6px) saturate(110%);
    -webkit-backdrop-filter: blur(6px) saturate(110%);
  }
  .desk-monitor .panel {
    background: linear-gradient(132deg, rgba(218, 234, 255, .08), transparent 62%), rgba(12, 27, 46, .40);
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .desk-monitor .panel,
  .desk-account .card,
  .desk-login .verification-dialog,
  .desk-monitor dialog,
  #personal-portal .portal-login {
    background: rgba(16, 31, 50, .94);
  }
}
/* Preserve the existing constrained-device path despite the ID-scoped rules. */
.portal-lite #personal-portal .portal-login {
  background: linear-gradient(132deg, rgba(218, 234, 255, .045), transparent 65%), rgba(12, 27, 46, .62);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media print {
  .desk-monitor .panel,
  .desk-account .card {
    background: white;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: black;
  }
}