/* OpalSketch portal, 2026 look: frosted glass sidebar, cards and dialogs over a soft pink aurora; pink stays the one accent.
   Loaded after portal.css and only restyles surfaces: the layout, light and dark modes and every screen stay as they are. */
:root {
  --pg-blur: blur(18px) saturate(1.5);
  --pg-glass: rgba(255,255,255,.66);
  --pg-card: rgba(255,255,255,.72);
  --pg-edge: rgba(255,255,255,.9);
  --pg-line: rgba(43,49,55,.09);
  --pg-accent: linear-gradient(135deg, #f7769c 0%, #d94d7e 55%, #c93b6a 100%);
  --pg-glow: 0 8px 22px -8px rgba(226,73,122,.7);
  --pg-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 14px 34px -22px rgba(72,30,46,.35);
  --pg-aurora:
    radial-gradient(40% 36% at 10% 6%, rgba(247,118,156,.3) 0%, rgba(247,118,156,0) 70%),
    radial-gradient(36% 32% at 92% 14%, rgba(255,196,214,.5) 0%, rgba(255,196,214,0) 70%),
    radial-gradient(44% 40% at 72% 96%, rgba(201,59,106,.14) 0%, rgba(201,59,106,0) 70%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --pg-glass: rgba(29,32,36,.66); --pg-card: rgba(29,32,36,.72); --pg-edge: rgba(255,255,255,.1); --pg-line: rgba(255,255,255,.08);
  --pg-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 34px -22px rgba(0,0,0,.7);
  --pg-aurora: radial-gradient(40% 36% at 10% 6%, rgba(247,118,156,.18) 0%, rgba(247,118,156,0) 70%), radial-gradient(36% 32% at 92% 14%, rgba(201,59,106,.16) 0%, rgba(201,59,106,0) 70%), radial-gradient(44% 40% at 72% 96%, rgba(255,143,179,.1) 0%, rgba(255,143,179,0) 70%);
} }
:root[data-theme="dark"] {
  --pg-glass: rgba(29,32,36,.66); --pg-card: rgba(29,32,36,.72); --pg-edge: rgba(255,255,255,.1); --pg-line: rgba(255,255,255,.08);
  --pg-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 34px -22px rgba(0,0,0,.7);
  --pg-aurora: radial-gradient(40% 36% at 10% 6%, rgba(247,118,156,.18) 0%, rgba(247,118,156,0) 70%), radial-gradient(36% 32% at 92% 14%, rgba(201,59,106,.16) 0%, rgba(201,59,106,0) 70%), radial-gradient(44% 40% at 72% 96%, rgba(255,143,179,.1) 0%, rgba(255,143,179,0) 70%);
}

body { background: var(--bg); }
body::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none; background: var(--pg-aurora); filter: blur(12px); }

/* sidebar */
.pt-side { background: var(--pg-glass); -webkit-backdrop-filter: var(--pg-blur); backdrop-filter: var(--pg-blur); border-right: 1px solid var(--pg-line); }
.pt-nav a { border-radius: 12px; }
.pt-nav a.on { background: var(--pg-accent); color: #fff; box-shadow: var(--pg-glow); }
.pt-nav a:hover:not(.on) { background: rgba(255,255,255,.55); }
:root[data-theme="dark"] .pt-nav a:hover:not(.on) { background: rgba(255,255,255,.07); }
.pt-cta, .pt-search { background: var(--pg-card); border: 1px solid var(--pg-edge); box-shadow: var(--pg-shadow); border-radius: 14px; }

/* cards, tabs, dialogs, fields */
.card, .pt-plan, .dash > * { background: var(--pg-card); border: 1px solid var(--pg-edge); box-shadow: var(--pg-shadow); border-radius: 18px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tabs { background: var(--pg-glass); border: 1px solid var(--pg-edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tabs a.on { background: var(--surface); box-shadow: 0 2px 8px -3px rgba(72,30,46,.35); }
.pt-modal { background: rgba(72,30,46,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pt-modal .card { background: var(--surface); border-radius: 22px; }
select, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], textarea { background: var(--pg-card); border-color: var(--pg-line); border-radius: 12px; }
select:focus, input:focus, textarea:focus { border-color: #d94d7e; box-shadow: 0 0 0 3px rgba(247,118,156,.22); }

/* buttons: the primary one is the pink gradient, the rest are glass */
.btn:not(.ghost):not(.danger) { background: var(--pg-accent); border: 0; box-shadow: var(--pg-glow); }
.btn:not(.ghost):not(.danger):hover { background: var(--pg-accent); filter: brightness(1.06); }
.btn.ghost, .btn.danger { background: var(--pg-card); border-color: var(--pg-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn.ghost:hover { background: var(--surface); border-color: rgba(247,118,156,.6); }

/* phones: the sidebar becomes the top strip it already is, keep it frosted */
@media (max-width: 860px) { .pt-side { border-right: 0; border-bottom: 1px solid var(--pg-line); } }

/* fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pt-side, .card, .tabs, .pt-cta, .pt-search, .pt-plan, .dash > * { background: var(--surface); } }
@media (prefers-reduced-transparency: reduce) { .pt-side, .card, .tabs, .pt-cta, .pt-search, .pt-plan, .dash > *, .btn.ghost, .btn.danger { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } body::before { display: none; } }