/* OpalSketch 2026 look: frosted glass surfaces over a soft pink aurora, pink kept as the one accent, charcoal text.
   Loaded after kitchen-app.css and only restyles surfaces: nothing moves and no feature is hidden. Partner skins (html.has-skin)
   keep their own colors: the pink here applies to the OpalSketch brand only. Reduced transparency or no backdrop-filter: opaque fallbacks. */
:root {
  --gl-pink: #f7769c;
  --gl-rose: #c93b6a;
  --gl-ink: #2b3137;
  --gl-ink-soft: #5b636b;
  --gl-blur: blur(18px) saturate(1.5);
  --gl-glass: rgba(255,255,255,.64);
  --gl-glass-strong: rgba(255,255,255,.8);
  --gl-edge: rgba(255,255,255,.75);
  --gl-line: rgba(43,49,55,.09);
  --gl-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -22px rgba(72,30,46,.35), 0 2px 6px -2px rgba(72,30,46,.08);
  --gl-shadow-float: 0 1px 0 rgba(255,255,255,.8) inset, 0 24px 60px -24px rgba(72,30,46,.45), 0 4px 12px -6px rgba(72,30,46,.12);
  --gl-accent: linear-gradient(135deg, #f7769c 0%, #d94d7e 55%, #c93b6a 100%);
  --gl-glow: 0 8px 22px -8px rgba(226,73,122,.75);
  --gl-r: 18px;
  --gl-r-lg: 24px;
}

/* ---- the aurora behind everything (the shell and the plan page) ---- */
html.kda-page, html.kda-page body, .cd.cd--app { background: #f6f2f4; }
.cd.cd--app::before { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 38% at 12% 8%, rgba(247,118,156,.34) 0%, rgba(247,118,156,0) 70%),
    radial-gradient(38% 34% at 88% 18%, rgba(255,196,214,.5) 0%, rgba(255,196,214,0) 70%),
    radial-gradient(44% 40% at 70% 92%, rgba(201,59,106,.16) 0%, rgba(201,59,106,0) 70%),
    radial-gradient(36% 32% at 20% 90%, rgba(255,232,238,.9) 0%, rgba(255,232,238,0) 70%);
  filter: blur(10px); }
.cd.cd--app > .cd__main { position: relative; z-index: 1; }   /* only the shell rows: the overlays keep their own positioning */

/* ---- top bar: frosted white like the rest of the shell, charcoal text, a thin pink line along the top; the price pill is the one pink thing ---- */
html:not(.has-skin) .kda-top { background: rgba(255,255,255,.72) !important; color: var(--gl-ink); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border-bottom: 1px solid var(--gl-line); box-shadow: 0 10px 30px -22px rgba(72,30,46,.35) !important; border-top: 3px solid transparent; border-image: linear-gradient(90deg, #f7769c 0%, #d94d7e 50%, #c93b6a 100%) 1; }
html:not(.has-skin) .kda-top { border-image-slice: 1; border-image-width: 3px 0 0 0; border-left: 0; border-right: 0; }
html:not(.has-skin) .kda-top .kda-ico, html:not(.has-skin) .kda-top .kda-hbtn { color: var(--gl-ink-soft); border-radius: 12px; }
html:not(.has-skin) .kda-top .kda-ico:hover, html:not(.has-skin) .kda-top .kda-hbtn:hover { background: rgba(247,118,156,.12); color: var(--gl-ink); }
html:not(.has-skin) .kda-top .kda-ico:disabled { opacity: .3; }
html:not(.has-skin) .kda-brand { color: var(--gl-ink); border-right: 1px solid var(--gl-line); }
html:not(.has-skin) .kda-brand small { color: var(--gl-ink-soft); }
html:not(.has-skin) .kda-brand img, html:not(.has-skin) .kda-brand .kda-brand__mark { border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
html:not(.has-skin) .kda-beta { background: rgba(247,118,156,.14); color: #c93b6a; border: 1px solid rgba(247,118,156,.4); }
html:not(.has-skin) .kda-top__name input { background: rgba(255,255,255,.55); border: 1px solid var(--gl-line); color: var(--gl-ink); border-radius: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html:not(.has-skin) .kda-top__name input::placeholder { color: var(--gl-ink-soft); }
html:not(.has-skin) .kda-top__name input:hover { border-color: rgba(247,118,156,.5); }
html:not(.has-skin) .kda-top__name input:focus { background: #fff; border-color: #d94d7e; box-shadow: 0 0 0 3px rgba(247,118,156,.22); }
html:not(.has-skin) .kda-top .kda-saved { color: var(--gl-ink-soft); }
html:not(.has-skin) .kda-present { color: var(--gl-ink); border-color: var(--gl-line); background: rgba(255,255,255,.55); }
html:not(.has-skin) .kda-present:hover { background: #fff; border-color: rgba(247,118,156,.6); }
html:not(.has-skin) .kda-pill { background: linear-gradient(135deg, #f7769c 0%, #d94d7e 55%, #c93b6a 100%); color: #fff; border-radius: 14px; border: 0; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -10px rgba(226,73,122,.7); }
html:not(.has-skin) .kda-pill small { opacity: .9; }
html:not(.has-skin) .kda-pill:hover { background: linear-gradient(135deg, #f7769c 0%, #d94d7e 55%, #c93b6a 100%); filter: brightness(1.06); }


/* ---- the rail: a frosted column; the active tool glows pink ---- */
.kda-rail { background: var(--gl-glass); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); border-right: 1px solid var(--gl-line); }
.kda-rail button, .kda-railmore { border-radius: 14px; color: var(--gl-ink-soft); transition: background .15s, color .15s, transform .15s; }
.kda-rail button:hover, .kda-railmore:hover, .kda-railmore[aria-expanded="true"] { background: rgba(255,255,255,.7); color: var(--gl-ink); }
html:not(.has-skin) .kda-rail button.is-on, html:not(.has-skin) .kda-rail button[data-open="price"].is-on { background: var(--gl-accent); color: #fff; box-shadow: var(--gl-glow); }
.kda-rail button.is-on::before { display: none; }

/* ---- side panel: frosted sheet ---- */
.kda-panel { background: var(--gl-glass); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); border-right: 1px solid var(--gl-line); }
.kda-sec__head { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gl-line); }
.kda-sec__head h2 { color: var(--gl-ink); }
.kda-sec__x:hover { background: rgba(255,255,255,.8); }
.kda-fold { border-top: 1px solid var(--gl-line); }
.kda-fold > summary::after { color: var(--gl-rose); }

/* fields and chips inside panels */
.kda-sec input[type="number"], .kda-sec input[type="text"], .kda-sec input[type="search"], .kda-sec select, .cd--app .kda-block input[type="number"], .cd--app .kda-block select, .kda-lib__q, .kda-st__tone {
  background: rgba(255,255,255,.7); border: 1px solid var(--gl-line); border-radius: 12px; color: var(--gl-ink); }
.kda-sec input:hover, .kda-sec select:hover { border-color: rgba(43,49,55,.22); }
html:not(.has-skin) .kda-sec input:focus, html:not(.has-skin) .kda-sec select:focus { border-color: var(--gl-rose); box-shadow: 0 0 0 3px rgba(247,118,156,.22); background: #fff; }
.kda-pb__cats button, .kda-pb__w button, .k3__pop button { background: rgba(255,255,255,.66); border: 1px solid var(--gl-line); color: var(--gl-ink-soft); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kda-pb__cats button:hover, .kda-pb__w button:hover, .k3__pop button:hover { background: #fff; color: var(--gl-ink); border-color: rgba(43,49,55,.2); }
.kda-pb__cats button.is-on, .kda-pb__cats--logos button.is-on, .kda-pb__w button.is-on, .k3__pop button.is-on { background: var(--gl-ink); border-color: var(--gl-ink); color: #fff; }

/* cards: product, tile, library, cabinet rows */
.kda-pc, .kda-tile, .kda-lc, .cq__row, .kda-hello__tpl, .kda-dfm__card, .kda-way, .kda-generic, .kda-import, .kda-pb__empty, .kda-about, .kda-st__sel, .cq__sum, .kda-finish, .kda-qv__mini {
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 20px -14px rgba(72,30,46,.3) !important; border-radius: var(--gl-r); }
.kda-pc:hover, .kda-tile:hover, .kda-lc:hover, .cq__row:hover, .kda-hello__tpl:hover { background: rgba(255,255,255,.86); border-color: rgba(247,118,156,.6); box-shadow: 0 1px 0 #fff inset, 0 16px 34px -18px rgba(201,59,106,.45) !important; transform: translateY(-2px); }
.kda-tile:hover, .kda-pc:hover { border-color: rgba(247,118,156,.6); }

/* primary actions: one pink gradient pill */
html:not(.has-skin) .kda-hello__dfm { background: var(--gl-accent) !important; border-radius: 999px; box-shadow: var(--gl-glow) !important; }
html:not(.has-skin) .kda-hello__dfm svg { color: #fff; }
html:not(.has-skin) .kda-hello__dfm:hover { filter: brightness(1.06); }
html:not(.has-skin) .btn--primary, html:not(.has-skin) .kda-pc__go, html:not(.has-skin) .kda-sec .cd__mini--go, html:not(.has-skin) .kda-sec #cdSetRoom, html:not(.has-skin) .btn--ember {
  background: var(--gl-accent); border: 0; color: #fff; border-radius: 999px; box-shadow: var(--gl-glow); }
html:not(.has-skin) .btn--primary:hover, html:not(.has-skin) .kda-pc__go:hover, html:not(.has-skin) .btn--ember:hover { background: var(--gl-accent); color: #fff; filter: brightness(1.06); box-shadow: 0 12px 28px -10px rgba(226,73,122,.9); }
.btn--outline { background: rgba(255,255,255,.6); border: 1px solid var(--gl-line); color: var(--gl-ink); border-radius: 999px; }
html:not(.has-skin) .btn--outline:hover { background: #fff; color: var(--gl-rose); border-color: rgba(247,118,156,.7); }
html:not(.has-skin) .kda-link { color: var(--gl-rose); }

/* ---- the stage: a glass card with the aurora around it, floating glass controls over the canvas ---- */
.cd--app .cd__stage { margin: 8px 10px 10px 0; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 20px 50px -30px rgba(72,30,46,.4); }
.cd--app .cd__main { background: transparent; }
.cd--app .kda-panel + .cd__stage, .cd--app .kda-rail + .cd__stage { margin-left: 10px; }
.cd--app .cd__views { background: var(--gl-glass-strong); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--gl-shadow-float); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.cd--app .cd__views button { color: var(--gl-ink-soft); }
html:not(.has-skin) .cd--app .cd__views button.is-on { background: var(--gl-accent); color: #fff; box-shadow: var(--gl-glow); }
.cd--app .k3__bar, .cd--app .k3__actions, .kda-zoom, .cd--app .cd__sel, .k3__pop, .kda-menu, .kda-rmenu, .kda-cmenu, .kda-cam, .kda-nav, .kda-hist, .kda-help__card, .kda-hello__card, .kda-modal__card, .kda-fin, .kda-dfm__card {
  background: var(--gl-glass-strong); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--gl-shadow-float); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.cd--app .k3__bar, .cd--app .k3__actions { border-radius: var(--gl-r); }
.kda-zoom { border-radius: 14px; overflow: hidden; }
.kda-zoom .kda-ico + .kda-ico { border-top: 1px solid var(--gl-line); }
.kda-zoom .kda-ico:hover { background: rgba(255,255,255,.9); }
.cd--app .k3__bar .cd__mini, .cd--app .k3__actions .cd__mini { color: var(--gl-ink); }
html:not(.has-skin) .cd--app .k3__bar .cd__mini:hover, html:not(.has-skin) .cd--app .k3__actions .cd__mini:hover { background: rgba(247,118,156,.14); color: var(--gl-rose); }
html:not(.has-skin) .cd--app .k3__bar .cd__mini.is-on, html:not(.has-skin) .cd--app .k3__grid.is-on, html:not(.has-skin) .cd--app .k3__photos.is-on, html:not(.has-skin) .cd--app .k3__mood, html:not(.has-skin) .cd--app .k3__tour { background: var(--gl-accent) !important; color: #fff !important; box-shadow: var(--gl-glow); }
.cd--app .k3__seg { background: rgba(43,49,55,.07); }
.cd--app .k3__seg button.is-on { background: #fff; }
.kda-help__card, .kda-hello__card, .kda-modal__card { border-radius: var(--gl-r-lg); }
.kda-modal { background: rgba(72,30,46,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kda-toast { background: rgba(43,49,55,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
.kda-hello__card { background: rgba(255,255,255,.82); }
.kda-menu, .kda-rmenu, .kda-cmenu, .k3__pop { border-radius: 20px; }
.kda-menu > *:hover, .kda-rmenu button:hover { background: rgba(247,118,156,.12) !important; color: var(--gl-ink); }
html:not(.has-skin) .kda-rmenu button.is-on { background: var(--gl-accent); color: #fff; }
.kda-hist button:hover { background: rgba(247,118,156,.12); }
.kda-hist button.is-on { background: rgba(247,118,156,.22); }
.k3__gl { background: radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 58%, rgba(244,230,236,.75) 100%) !important; }
.cd--app .k3__cv, .cd--app .k3__gl { border-top: 0 !important; }

/* ---- phones: the bottom bar and the sheet are glass too ---- */
@media (max-width: 899px) {
  .cd--app .cd__stage, .cd--app .kda-panel + .cd__stage, .cd--app .kda-rail + .cd__stage { margin: 0; border-radius: 0; border: 0; box-shadow: none; }
  .kda-rail { border-top: 1px solid var(--gl-line); border-right: 0; background: rgba(255,255,255,.82); }
  .kda-panel, .kda--panel .kda-panel, .kda--wide .kda-panel { background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.9); border-bottom: 0; border-radius: var(--gl-r-lg) var(--gl-r-lg) 0 0; box-shadow: 0 -20px 50px -24px rgba(72,30,46,.5); }
  .kda-sec__head::before { background: rgba(43,49,55,.18); }
  html:not(.has-skin) .kda-rail button.is-on { box-shadow: none; }
}

/* ---- fallbacks: no blur support, reduced transparency or motion ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kda-rail, .kda-panel, .cd--app .cd__views, .cd--app .k3__bar, .cd--app .k3__actions, .kda-zoom, .cd--app .cd__sel, .k3__pop, .kda-menu, .kda-rmenu, .kda-cmenu, .kda-help__card, .kda-hello__card, .kda-modal__card, .kda-sec__head { background: rgba(255,255,255,.96); }
  html:not(.has-skin) .kda-top { background: rgba(255,255,255,.97) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .kda-rail, .kda-panel, .cd--app .cd__views, .cd--app .k3__bar, .cd--app .k3__actions, .kda-zoom, .cd--app .cd__sel, .k3__pop, .kda-menu, .kda-rmenu, .kda-cmenu, .kda-help__card, .kda-hello__card, .kda-modal__card, .kda-sec__head, .kda-pc, .kda-tile, .kda-lc, .cq__row { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cd.cd--app::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kda-pc:hover, .kda-tile:hover, .kda-lc:hover, .cq__row:hover, .kda-hello__tpl:hover { transform: none; } }