/* 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.
   The accent, glow and aurora are made from the brand tokens (--gfill, --gfill2, --gfill3 and the --os-*-rgb pinks, pink as the
   fallback), so a workspace accent set by brand.js re-skins the buttons, the active nav and the client page too. The gradient starts
   at #c93b6a so white text on it stays above 4.5:1. */
: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-field: #868c92;   /* the outline of a form field: 3:1 against its background (WCAG 1.4.11); --pg-line stays the soft divider */
  --pg-accent: linear-gradient(135deg, var(--gfill, #c93b6a) 0%, var(--gfill2, #b8305c) 45%, var(--gfill3, #a82f5d) 100%);
  --pg-glow: 0 8px 22px -8px rgba(var(--os-hot-rgb, 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(var(--os-pink-rgb, 247,118,156), .3) 0%, rgba(var(--os-pink-rgb, 247,118,156), 0) 70%),
    radial-gradient(36% 32% at 92% 14%, rgba(var(--os-blush-rgb, 255,196,214), .5) 0%, rgba(var(--os-blush-rgb, 255,196,214), 0) 70%),
    radial-gradient(44% 40% at 72% 96%, rgba(var(--os-rose-rgb, 201,59,106), .14) 0%, rgba(var(--os-rose-rgb, 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-field: #8a9299;
  --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(var(--os-pink-rgb, 247,118,156), .18) 0%, rgba(var(--os-pink-rgb, 247,118,156), 0) 70%), radial-gradient(36% 32% at 92% 14%, rgba(var(--os-rose-rgb, 201,59,106), .16) 0%, rgba(var(--os-rose-rgb, 201,59,106), 0) 70%), radial-gradient(44% 40% at 72% 96%, rgba(var(--os-pink-rgb, 255,143,179), .1) 0%, rgba(var(--os-pink-rgb, 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-field: #8a9299;
  --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(var(--os-pink-rgb, 247,118,156), .18) 0%, rgba(var(--os-pink-rgb, 247,118,156), 0) 70%), radial-gradient(36% 32% at 92% 14%, rgba(var(--os-rose-rgb, 201,59,106), .16) 0%, rgba(var(--os-rose-rgb, 201,59,106), 0) 70%), radial-gradient(44% 40% at 72% 96%, rgba(var(--os-pink-rgb, 255,143,179), .1) 0%, rgba(var(--os-pink-rgb, 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], input[type=time], input[type=search], input[type=url], input[type=password], textarea { background: var(--pg-card); border-color: var(--pg-field); border-radius: 12px; }
select:focus, input:focus, textarea:focus { border-color: rgb(var(--os-deep-rgb, 217,77,126)); box-shadow: 0 0 0 3px rgba(var(--os-pink-rgb, 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(var(--os-pink-rgb, 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: 0; border-top: 1px solid var(--pg-line); } .pt-side.is-open { background: var(--surface); } .pt-modal .card { border-radius: 22px 22px 0 0; } }

/* 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; } }