@import url("https://shootcal.com/assets/css/shootcal-ui.css?v=2396302ca601");   /* ONE shared component file (lives in shootcal.com docroot; shootcal.com + app.shootcal.com serve it too). Colored monochrome below. */
:root{
  --bg:#ffffff; --fg:#2b2b2b; --muted:#9a9a9a; --accent:#1c1c1e; --line:#ececec;
  --fav:#c4324a;  /* favorited-heart tint — a deep, rich rose (the one splash of color) */

  /* Map the shared-UI (--sc-*) tokens onto Galleries' monochrome palette.
     Same component SHELLS as ShootCal, colored near-black instead of coral.
     Galleries is light-only, so there are no dark overrides. Its own
     public gallery controls keep their purpose-built styling; the shared .btn
     remains available for opt-in use. */
  --sc-accent:        var(--accent);
  --sc-on-accent:     #fff;
  --sc-ink:           var(--fg);
  --sc-ink-soft:      var(--muted);
  --sc-line:          var(--line);
  --sc-surface:       #fff;
  --sc-surface-2:     #f6f6f4;
  --sc-radius:        10px;
  --sc-radius-lg:     12px;
  --sc-btn2-bg:       var(--glass-bg);        /* frosted light glass */
  --sc-btn2-border:   var(--glass-brd);
  --sc-btn2-bg-hover: rgba(255,255,255,.82);
  --sc-btn2-blur:     var(--glass-blur-lite);
  --sc-btn2-shadow:   var(--glass-shadow);
  --sc-accent-glow:   rgba(20,25,32,.16);
  --sc-focus:         rgba(20,25,32,.28);
  --sc-glass-hi:      var(--glass-hi);         /* stronger specular top edge */
  --sc-glass-blur:    var(--glass-blur);
  --sc-field-ring:    rgba(20,25,32,.14);      /* monochrome focus ring */
  --sc-card-shadow:   var(--shadow-card);
  --sc-menu-bg:       var(--glass-bg);
  --sc-menu-border:   var(--glass-brd);
  --sc-menu-shadow:   var(--glass-shadow);
  --gap:6px; --rh:260px;
  --shadow-card:0 1px 2px rgba(20,25,32,.04),0 6px 18px rgba(20,25,32,.06);
  --shadow-card-hover:0 2px 4px rgba(20,25,32,.05),0 14px 34px rgba(20,25,32,.10);
  --shadow-btn:0 1px 2px rgba(20,25,32,.12);
  /* ── Liquid Glass ─────────────────────────────────────────────────────────
     The app-wide material. Two families: light glass (panels/menus over the
     white grid) and dark glass (chrome that floats over photos — cart pill,
     hero toolbar). Every glass surface = translucent bg + backdrop blur/saturate
     (vibrancy) + hairline border + a soft drop shadow + an inset top "specular"
     highlight so the top edge catches light like real glass. Kept as tokens so
     galleries and the main app can share one vocabulary. */
  --glass-blur:blur(20px) saturate(180%);
  --glass-blur-lite:blur(12px) saturate(150%);
  /* light glass */
  --glass-bg:rgba(255,255,255,.66);
  --glass-brd:rgba(255,255,255,.6);
  --glass-shadow:0 12px 38px rgba(8,10,14,.16);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.7);
  --glass-fg:#1c1c1e;
  /* dark glass (floats over imagery) */
  --glassd-bg:rgba(28,28,32,.5);
  --glassd-brd:rgba(255,255,255,.18);
  --glassd-shadow:0 10px 34px rgba(8,10,14,.3);
  --glassd-hi:inset 0 1px 0 rgba(255,255,255,.2);
  /* triangle-alert (print-resolution warnings) */
  --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5L23 21H1L12 2.5zm-1 7.5v5h2v-5h-2zm0 7v2h2v-2h-2z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}

button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]){cursor:pointer}
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
[role="button"][aria-disabled="true"]{cursor:not-allowed}

body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}


/* Reserve the exact React hero geometry before its module mounts. This neutral
   host prevents the old header or the floating toolbar from flashing at the
   wrong position while the shared MUI runtime loads. */
[data-gallery-hero-host]{display:block;height:95vh;min-height:460px;
  background:linear-gradient(145deg,#24262b 0%,#555961 58%,#858a92 100%)}
[data-gallery-hero-host][data-gallery-hero-height=tall]{height:78vh}
[data-gallery-hero-host][data-gallery-hero-height=standard]{height:60vh}
[data-gallery-hero-host][data-gallery-hero-height=compact]{height:44vh}
[data-gallery-hero-host][data-gallery-hero-cover=none]{height:auto;min-height:clamp(300px,48vh,520px)}


html{scroll-behavior:smooth}

/* React/MUI owns the public media and action controls. Reserve the exact
   sticky overlap before its module mounts so no legacy toolbar can flash. */
[data-gallery-controls-host]{display:block;position:sticky;top:10px;z-index:35;
  min-height:70px;margin-top:-78px;padding:0 12px 8px;box-sizing:border-box}
/* Example galleries keep a fixed, icon-only Back action in the left lane.
   Symmetric space preserves a centered toolbar and prevents either control
   from covering the other at tablet widths. */
[data-gallery-controls-host][data-gallery-controls-example-back=true]{padding-inline:68px}
[data-gallery-controls-host][data-gallery-controls-has-photos=false]{display:none}
[data-gallery-videos-host][hidden],#grid[hidden]{display:none!important}
[data-public-gallery-footer-host]{display:block;min-height:116px}
[data-public-gallery-selections-host]{display:block}
[data-public-gallery-utilities-host]{display:block}

@media(max-width:720px){
  [data-gallery-controls-host]{padding-inline:8px}
  [data-gallery-controls-host][data-gallery-controls-example-back=true]{padding-left:68px;padding-right:8px}
}

.g-header{text-align:center;padding:56px 20px 24px}

/* download.php phone/tablet heads-up: gallery first, ZIP-anyway second */
.g-dl-choice{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:26px}

.g-dl-choice a{display:block;width:min(320px,100%);padding:12px 18px;border-radius:12px;
  font-size:15px;font-weight:500;text-decoration:none;text-align:center}

.g-dl-choice-primary{background:#18181b;color:#fff;box-shadow:var(--shadow-btn)}

.g-dl-choice-ghost{border:1px solid var(--line);color:var(--fg)}

.g-logo{max-height:60px;max-width:240px;margin:0 auto 14px;display:block;object-fit:contain}

.g-studio{letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--muted)}

.g-title{font-weight:300;font-size:34px;margin:.35em 0 .1em}

.g-sub{color:var(--muted);margin:0}


/* proofing modal */
/* glassmorphic dialogs: the backdrop blurs the gallery behind; the card stays
   very white + only lightly glassy since it holds interactive form fields */
.pf-modal{position:fixed;inset:0;background:rgba(12,14,18,.5);
  -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);
  display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}

.pf-modal[hidden]{display:none}

.pf-card{position:relative;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.6);border-radius:16px;
  width:100%;max-width:400px;padding:30px;box-shadow:0 24px 70px rgba(8,10,14,.30)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pf-modal{background:rgba(8,8,9,.7)} .pf-card{background:#fff}
}

.pf-close{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--muted);cursor:pointer}

.pf-card h2{font-weight:400;font-size:22px;margin:0 0 6px}

.pf-sub{color:var(--muted);font-size:14px;margin:0 0 20px}

.pf-signin{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:16px}

#pfGoogleBtn{min-height:40px}

.pf-or{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}

.pf-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}

.pf-fields input,.pf-card textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--fg);font:inherit;font-size:14px;box-sizing:border-box}

.pf-card textarea{resize:vertical;margin-bottom:14px}

.pf-signedin{color:var(--muted);font-size:14px;margin-bottom:12px}

.pf-signedin strong{color:var(--fg)}

.pf-err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}

.pf-submit{width:100%;padding:12px;border:0;border-radius:9px;background:#1c1c1e;color:#fff;font-weight:500;cursor:pointer;font-size:15px}

.pf-submit:hover{background:#000}

/* stacked dialog actions: primary + a proper (not bare-text) secondary button */
.pf-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}

.pf-secondary{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:none;
  color:var(--fg);font-weight:500;font-size:14.5px;cursor:pointer;transition:background .12s,border-color .12s}

.pf-secondary:hover{background:#f6f4f1;border-color:#d8d2c8}

.pf-done{text-align:center;padding:14px 0}

.pf-check{width:56px;height:56px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;
  background:rgba(16,185,129,.15);color:#34d399}

.pf-done h2{margin:0 0 8px}

.pf-done p{color:var(--muted);margin:0}


/* justified gallery (uses each photo's aspect ratio --ar) */
/* Keep breathing room above photos even after the viewing tip is dismissed. */
#grid{display:flex;flex-wrap:wrap;gap:var(--gap);padding:var(--gap);padding-top:max(24px,var(--gap));align-content:flex-start}

#grid::after{content:"";flex-grow:99999}
 /* last row keeps natural height */
#grid .g-photo-group{display:contents}

#grid .g-photo{position:relative;height:var(--rh);flex-grow:var(--ar,1.5);flex-basis:calc(var(--ar,1.5) * var(--rh));
  aspect-ratio:auto;overflow:hidden;background:#f0f0f0;color:#fff}

#grid .g-cell{position:absolute;inset:0;display:block;overflow:hidden;background:#f0f0f0;text-decoration:none;color:#fff}

/* Skip rendering + layout of off-screen cells so galleries with thousands of
   photos stay smooth. Desktop only: cells are a uniform row height here, so the
   reserved intrinsic size is accurate and scrolling doesn't jump (mobile cells
   are variable natural heights, where a fixed reserve would cause scroll jank). */
@media(min-width:1201px){#grid .g-photo{content-visibility:auto;contain-intrinsic-size:420px var(--rh)}}

.g-photo .g-heart{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(20,20,26,.30);color:#fff;cursor:pointer;
  opacity:0;transition:opacity .15s;-webkit-backdrop-filter:blur(9px) saturate(140%);backdrop-filter:blur(9px) saturate(140%)}

.g-photo:hover .g-heart{opacity:1}
@media (hover:none){
.g-photo .g-heart{opacity:.85}
}

.g-photo.is-fav .g-heart{opacity:1;color:var(--fav)}

/* keyboard users get the same reveal hover users do (audit 2026-07-10) */
.g-photo .g-heart:focus-visible,.g-photo .g-dl:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px}

.g-photo:focus-within .g-heart,.g-photo:focus-within .g-dl{opacity:1}

/* per-photo download button (top-left) — only rendered when the gallery allows
   downloads; grabs the real web/full image via the cell's data-dl (same URL the
   lightbox download uses). Mirrors the heart's glass style. */
.g-photo .g-dl{position:absolute;top:8px;left:8px;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(20,20,26,.30);color:#fff;cursor:pointer;
  opacity:0;transition:opacity .15s,background .15s;-webkit-backdrop-filter:blur(9px) saturate(140%);backdrop-filter:blur(9px) saturate(140%)}

.g-photo:hover .g-dl{opacity:1}

.g-photo .g-dl:hover{background:rgba(20,20,26,.52)}
@media (hover:none){
.g-photo .g-dl{opacity:.85}
}

/* lightbox filename caption (bottom-center) */
.pswp__scg-caption{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:10;
  max-width:82vw;padding:7px 16px;border-radius:999px;font-size:12.5px;letter-spacing:.03em;color:#fff;
  background:rgba(20,20,26,.6);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 28px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

/* lightbox controls: frosted-glass buttons + counter to match the app glass look */
.pswp__top-bar{background:none !important}

.pswp__top-bar .pswp__button{margin:8px 3px;height:44px;width:44px;border-radius:12px;
  background:rgba(28,28,36,.55);border:1px solid rgba(255,255,255,.2);box-shadow:0 5px 18px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}

.pswp__top-bar .pswp__button:hover{background:rgba(28,28,36,.7)}

.pswp__top-bar .pswp__button .pswp__icn{top:6px;left:6px}

.pswp__counter{display:none}
   /* removed 2026-07-06: top bar was too crowded (Ryan) */
/* prev/next chevrons use PhotoSwipe's vendored defaults — no glass background,
   no custom glyph offset (the +10.5px nudge broke at tablet sizes). */
body.show-favs #grid .g-photo:not(.is-fav){display:none}

[data-public-gallery-browse-host]{display:block}

/* gallery sections (Lightroom collection sets -> named parts of one gallery) */
/* scroll-margin: section-nav anchor clicks land clear of the sticky toolbar */
.g-set-head{flex-basis:100%;margin:34px 6px 6px;font-weight:300;font-size:24px;letter-spacing:.02em;scroll-margin-top:112px}

#grid .g-set-head:first-child{margin-top:10px}

/* photo still processing: shimmer placeholder, filled in by the status poller */
.g-shimmer{position:absolute!important;inset:0;width:100%!important;height:100%!important;transform:none!important}

.g-cell img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}

.g-photo:hover .g-cell img{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  .g-photo:hover .g-cell img{transform:none}
}

@media (forced-colors:active){
  .g-photo .g-heart,.g-photo .g-dl{background:ButtonFace;color:ButtonText;border:1px solid ButtonText;
    -webkit-backdrop-filter:none;backdrop-filter:none;forced-color-adjust:auto}
  .g-photo.is-fav .g-heart{color:Highlight}
}

.g-cell-label{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:15px;font-weight:500;letter-spacing:.01em}

.g-footer{text-align:center;color:var(--muted);font-size:12px;padding:48px 0 64px}

/* ---- Example-gallery hub containment (the studio portfolio is React/MUI) ---- */
.st-wrap{max-width:1400px;margin:0 auto;padding:0 24px}

.st-head{text-align:center;padding:60px 20px 42px}

.st-name{font-weight:300;font-size:clamp(28px,4vw,44px);letter-spacing:.01em;margin:0}

.st-about{color:var(--muted);margin:12px auto 0;max-width:580px;line-height:1.6}

.st-foot{text-align:center;color:var(--muted);font-size:13px;padding:26px 0 52px;border-top:1px solid var(--line)}

@media(max-width:680px){
  .st-head{padding:40px 16px 28px}
}


/* ---- platform landing (Pixieset-style, light) ---- */
body.lp{background:#ffffff;color:#18181b;
  background-image:radial-gradient(1100px 600px at 50% -15%, rgba(0,0,0,.07), transparent)}

.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 6vw;max-width:1200px;margin:0 auto}

.lp-brand{font-weight:600;white-space:nowrap}
.lp-brand span{color:#1c1c1e}

.lp-nav nav{display:flex;align-items:center;gap:20px}

.lp-nav a{color:#52525b;text-decoration:none;font-size:15px;white-space:nowrap}

.lp-nav a:hover{color:#18181b}
@media(max-width:560px){

  .lp-nav{padding:16px 5vw}

  .lp-nav nav{gap:12px}

  .lp-nav a{font-size:14px}

  .lp-nav a[href="/admin/login.php"]{display:none}
 /* Sign in lives on the register page + footer */
  .lp-hero{padding-top:48px}
}
@media(max-width:700px){
.lp-hero h1 br{display:none}
}
 /* let the headline wrap naturally */
.lp-cta{background:#18181b;color:#fff;padding:9px 18px;border-radius:999px;font-weight:500;text-decoration:none;display:inline-block}

.lp-nav a.lp-cta{color:#fff}
 /* .lp-nav a would otherwise win specificity and gray the pill text */
.lp-cta:hover{background:#000;color:#fff}

.lp-cta.lg{padding:15px 32px;font-size:17px}


.lp-hero{text-align:center;padding:80px 6vw 64px;max-width:860px;margin:0 auto}

.lp-eyebrow{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7c3aed;
  border:1px solid rgba(124,58,237,.3);background:rgba(124,58,237,.06);padding:6px 14px;border-radius:999px;margin-bottom:26px}

.lp-hero h1{font-size:clamp(36px,6.2vw,62px);line-height:1.06;font-weight:600;margin:0 0 22px;letter-spacing:-.025em}

.lp-hero p{font-size:19px;color:#52525b;max-width:560px;margin:0 auto 34px;line-height:1.6}

.lp-hero-cta{display:flex;flex-direction:column;align-items:center;gap:16px}

.lp-link{color:#52525b;text-decoration:none;font-size:15px}

.lp-link:hover{color:#18181b}


/* showcase */
.lp-showcase{max-width:1200px;margin:20px auto 90px;padding:0 4vw}

.lp-showcase-head{text-align:center;margin-bottom:34px}

.lp-showcase-head h2{font-size:clamp(26px,4vw,38px);font-weight:600;letter-spacing:-.02em;margin:0 0 10px}

.lp-showcase-head p{color:#6b7280;margin:0;font-size:17px}

.lp-grid{display:flex;flex-wrap:wrap;gap:10px}

.lp-grid::after{content:"";flex-grow:99999}

.lp-tile{position:relative;margin:0;height:300px;flex-grow:var(--ar,1.5);flex-basis:calc(var(--ar,1.5) * 300px);
  border-radius:14px;overflow:hidden;background:#f4f4f5}

.lp-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}

.lp-tile:hover img{transform:scale(1.05)}

.lp-ph{width:100%;height:100%;display:grid;place-items:center}

.lp-ph .ic{color:rgba(0,0,0,.3)}

.lp-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font-size:15px;font-weight:500;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transition:opacity .25s}

.lp-tile:hover figcaption{opacity:1}

.lp-tag{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ddd6fe;margin-bottom:2px}


/* features (4 cards -> balanced 2x2; single column on small screens) */
.lp-features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  max-width:1080px;margin:0 auto 90px;padding:0 6vw}
@media(max-width:700px){
.lp-features{grid-template-columns:1fr}
}

.lp-card{background:#fff;border:1px solid var(--sc-card-border);border-radius:var(--sc-card-radius);padding:var(--sc-card-pad);box-shadow:var(--sc-card-shadow)}

.lp-card h3{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 10px;font-weight:600}

.lp-card h3 .ic{color:#1c1c1e}

.lp-card p{color:#52525b;margin:0;line-height:1.6}

.lp-card em{color:#3f3f46;font-style:normal;background:#f4f4f5;padding:1px 6px;border-radius:5px}


/* feature tabs (landing) */
.lp-inline{color:#7c3aed;text-decoration:none;border-bottom:1px solid rgba(124,58,237,.35)}

.lp-inline:hover{color:#5b21b6}

.lp-tabs{max-width:1150px;margin:0 auto 100px;padding:0 4vw}

.lp-tabbar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:34px}

.lp-tab{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#3f3f46;
  border:1px solid #e4e4e7;border-radius:999px;padding:11px 22px;font-size:15px;font-weight:500;
  cursor:pointer;transition:all .2s}

.lp-tab .ic{color:#1c1c1e}

.lp-tab:hover{border-color:rgba(0,0,0,.45);color:#18181b}

.lp-tab.is-on{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.55);color:#18181b}

.lp-pane{display:none;grid-template-columns:340px 1fr;gap:44px;align-items:center}

.lp-pane.is-on{display:grid}

.lp-pane-copy h3{font-size:clamp(21px,2.6vw,27px);font-weight:600;letter-spacing:-.02em;margin:0 0 14px;line-height:1.25}

.lp-pane-copy p{color:#52525b;line-height:1.65;margin:0;font-size:16px}

.lp-browser{border-radius:14px;overflow:hidden;border:1px solid #e4e4e7;
  background:#fff;box-shadow:0 24px 60px rgba(24,24,27,.12)}

.lp-browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f4f4f5;
  border-bottom:1px solid #e4e4e7}

.lp-browser-bar i{width:10px;height:10px;border-radius:50%;background:#d4d4d8}

.lp-browser-bar em{font-style:normal;font-size:12px;color:#6b7280;background:#fff;border:1px solid #e4e4e7;
  border-radius:6px;padding:3px 12px;margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lp-browser img{display:block;width:100%;height:auto}
@media(max-width:900px){
.lp-pane{grid-template-columns:1fr;gap:24px}
.lp-pane-copy{text-align:center;max-width:560px;margin:0 auto}
}


/* example galleries (homepage #examples section) */
.lp-brand a{color:inherit;text-decoration:none}

.lp-examples{scroll-margin-top:24px}


/* pricing (landing) */
.lp-pricing{max-width:1080px;margin:0 auto 100px;padding:0 4vw;scroll-margin-top:24px}

.lp-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}

.lp-price-card{position:relative;background:#fff;border:1px solid #e4e4e7;border-radius:16px;padding:28px;text-align:center}

.lp-price-hot{border-color:rgba(0,0,0,.5);box-shadow:0 16px 44px rgba(0,0,0,.1)}

.lp-price-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#1c1c1e;color:#fff;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px}

.lp-price-card h3{margin:0 0 6px;font-size:17px}

.lp-price{font-size:38px;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}

.lp-price span{font-size:15px;font-weight:500;color:#71717a}

.lp-price-card ul{list-style:none;margin:0 0 20px;padding:0;color:#52525b;font-size:14.5px;line-height:2}

.lp-price-card .lp-cta{width:100%;box-sizing:border-box}


/* closing CTA band */
.lp-band{text-align:center;padding:70px 6vw;max-width:900px;margin:0 auto;
  border-top:1px solid #ececec}

.lp-band h2{font-size:clamp(24px,3.5vw,34px);font-weight:600;margin:0 0 24px;letter-spacing:-.02em}


.lp-foot{display:flex;justify-content:space-between;align-items:center;max-width:1080px;margin:0 auto;
  padding:28px 6vw 60px;color:#71717a;font-size:14px;border-top:1px solid #ececec}

.lp-foot a{color:#7c3aed;text-decoration:none}
@media(max-width:640px){
.lp-tile{height:210px}
}


/* PhotoSwipe custom buttons — match the built-in UI */
.pswp__button--scg-heart,.pswp__button--scg-dl{display:grid;place-items:center;color:#fff}

.pswp__button--scg-heart svg{pointer-events:none}

.pswp__button--scg-heart.scg-on svg{fill:var(--fav);stroke:var(--fav)}
   /* rose, not --accent: graphite vanished on the dark toolbar */

@media(max-width:640px){
  :root{--rh:170px}
  .g-title{font-size:26px}
}

/* Keep the 800px grid derivative near its intended ~400 CSS-pixel Retina size:
   three natural-aspect columns on wide tablets, two in portrait, one on phones.
   Desktop retains the denser justified-row presentation above. */
@media(max-width:1200px){
  #grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  #grid .g-photo{height:auto;flex:1 1 100%;width:100%;aspect-ratio:var(--ar,1.5)}
  #grid::after{content:none}
  #grid .g-set-head{grid-column:1/-1}
}
@media(max-width:1024px){
  #grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  #grid{grid-template-columns:minmax(0,1fr)}
}


/* ---- admin (sidebar shell) ---- */
body.admin{background:#fafafa;color:#18181b}

.adm-shell{--adm-global-height:64px;min-height:100vh}

/* Compact studio identity/actions header; navigation stays in the sidebar. */
.adm-global{min-height:64px;display:block;position:sticky;top:0;z-index:100}

.adm-js-required{margin:16px 20px;padding:14px 16px;border:1px solid #b91c1c;border-radius:10px;
  background:#fff7f7;color:#7f1d1d;font-weight:650}

.adm-workspace{display:flex;min-height:calc(100vh - var(--adm-global-height))}
.scg-demo-workspace-notice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:12px;border:1px solid #ed6c02;border-radius:8px;background:#fff4e5;color:#663c00;font-size:.875rem}
.scg-demo-workspace-notice__copy{flex:1 1 320px}
.scg-demo-workspace-notice__return{min-height:44px;border:0;border-radius:8px;padding:0 10px;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}

.adm-side{width:280px;flex-shrink:0;display:block;overflow:hidden;
  background:#fff;padding:0;position:sticky;top:64px;height:calc(100vh - 64px);height:calc(100dvh - 64px)}

.adm-main{flex:1;margin:0;padding:32px 36px;min-width:0}

.adm-main-auth{max-width:none;margin:0;padding:0}

/* ===== e-commerce checkout page ===== */
body.ck-open{overflow:hidden}

.ck-page{position:fixed;inset:0;z-index:100002;background:var(--bg,#faf9f7);overflow-y:auto;-webkit-overflow-scrolling:touch}


/* store client flow (picker + cart, layered above PhotoSwipe) */
.st-modal{z-index:100001}

.st-modal .pf-card{max-height:88vh;overflow:auto}

.st-modal-wide .pf-card{max-width:440px}

.stg-scroll{max-height:min(46vh,380px);overflow-y:auto;border:1px solid var(--line);border-radius:10px;margin-bottom:14px}

.stg-table{width:100%;border-collapse:collapse;font-size:13.5px}

.stg-table th{position:sticky;top:0;background:#fff;text-align:left;font-weight:600;color:var(--muted);
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-bottom:1px solid var(--line)}

.stg-table td{padding:7px 12px;border-bottom:1px solid #f2f0ed}

.stg-table tr:last-child td{border-bottom:0}

.stg-table .r{text-align:right;font-weight:600}

.stg-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;background:#f0f2f5;border:1px solid #c8cdd3;border-radius:8px;color:#292e35;font-size:14px;cursor:pointer;padding:8px 12px;margin-bottom:14px;text-decoration:none}

.stg-back:hover{color:#000;background:#e2e6eb;border-color:#7a828c;text-decoration:none}

.st-opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:14px}

.st-opt:has(input:checked){border-color:var(--accent)}

.st-opt em{margin-left:auto;font-style:normal;font-weight:600}

.st-qty{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:14px}

.st-qty span{color:var(--muted)}

.st-qty button{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:16px}

.st-lines{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}

.st-line{display:flex;align-items:center;gap:10px;font-size:14px}

.st-line img{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#f4f4f5}

.st-line em{margin-left:auto;font-style:normal;font-weight:600}

.st-rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:4px}

.st-rm:hover{color:#dc2626}

.st-total{display:flex;justify-content:space-between;font-size:15px;margin:4px 0 14px;padding-top:10px;border-top:1px solid var(--line)}

.st-row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}

.st-fine{color:var(--muted);font-size:12px;text-align:center;margin:10px 0 0}


/* ===== full-page print store (?store=1, views/store-page.php) ===== */

.sp-body{margin:0;background:var(--bg)}

/* demo checkout note (example galleries — ordering hard-disabled server-side) */
.ck-demo{background:#f6ecdb;border:1px solid #ecdabb;border-radius:11px;padding:14px 16px;font-size:13.5px;
  line-height:1.55;color:#6b5638;margin-top:4px}

.ck-demo b{color:#4f3f27}

/* framed crop preview: real moulding around the crop box (4 tiled/mitred strips,
   WHCC's own technique). Extends outside the box; casts a soft wall shadow. */
.crp-frame{position:absolute;pointer-events:none;z-index:3;filter:drop-shadow(0 16px 34px rgba(0,0,0,.4))}

.crp-frame b{display:block}

/* Image-wrap crop guides — WHCC's own treatment: a 1px line marks the FACE
   boundary (where the photo folds around the edge), and a small white chip
   labels each 2" wrap band. The photo stays bright throughout (the wrap is
   printed, not discarded). */
.crp-fold{z-index:4}
.crp-node{z-index:4}

.crp-wl{z-index:5;pointer-events:none;white-space:nowrap;user-select:none;text-decoration:none;
  font:600 11px/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',Lato,sans-serif;
  color:#232629;background:rgba(255,255,255,.92);padding:3px 6px;border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.28)}


/* canvas face: WHCC's real weave texture, faint, over the print area */
/* canvas weave: WHCC's texture, contrast-boosted for on-screen visibility (the
   real weave is near-white and only felt in hand). Multiply over the print. */
.crp-weave{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:url(/assets/canvas/canvas_weave.jpg) repeat;background-size:340px;
  opacity:.55;mix-blend-mode:multiply}

/* wood / metal material faces (same overlay element, different tile + blend) */
.crp-weave.crp-tex-wood{background:url(/assets/textures/wood_texture.jpg) repeat;background-size:460px;
  opacity:.5;mix-blend-mode:multiply}

.crp-weave.crp-tex-metal{background:url(/assets/textures/metal_texture.jpg) repeat;background-size:340px;
  opacity:.22;mix-blend-mode:overlay}

/* ===== custom fixed-window crop (no Cropper.js) ===== */
/* The WINDOW is a transparent print-shaped rectangle; its box-shadow (set inline
   in JS) dims everything outside it. The photo is a sibling BEHIND the window,
   dragged/zoomed. Do NOT clip the window — the frame/mat overlays are its
   children and extend outside it. */
.crp-win{pointer-events:none}
/* rule-of-thirds guides (flat prints only; framed shows the frame instead) */
.crp-thirds{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.9)),
    linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.9)),
    linear-gradient(0deg,rgba(255,255,255,.9),rgba(255,255,255,.9)),
    linear-gradient(0deg,rgba(255,255,255,.9),rgba(255,255,255,.9));
  background-size:1px 100%,1px 100%,100% 1px,100% 1px;
  background-position:33.33% 0,66.66% 0,0 33.33%,0 66.66%;
  mix-blend-mode:overlay}
.crp-framed .crp-thirds{display:none}
.crp-fullpage .crp-stage{cursor:grab}
.crp-fullpage .crp-stage:active{cursor:grabbing}

.crp-framed .cropper-face{cursor:move}

/* Bigger add-to-cart dialogs (product chooser + size picker) with larger preview */
.st-modal-wide .pf-card{max-width:560px}

.sz-preview{margin:2px 0 14px;border-radius:12px;overflow:hidden;background:#6e6e73;display:flex;align-items:center;justify-content:center;max-height:300px}

.sz-preview img{width:100%;max-height:300px;object-fit:contain}


/* size picker (WHCC-style: aspect glyph + size + our retail price) */
.sz-list{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow-y:auto;margin:6px 0 14px;padding:2px}

.sz-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:10px 14px;cursor:pointer;font-size:14.5px;
  transition:border-color .15s,box-shadow .15s}

.sz-row:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.07)}

.sz-glyph{flex:none;border:1.5px solid #b9b2a8;border-radius:2px;background:#f6f4f1}

.sz-row b{font-weight:600;min-width:56px}

.sz-row small{color:var(--muted);font-size:12px}

.sz-row em{margin-left:auto;font-style:normal;font-weight:700}


/* crop stage — our own editor: Cropper.js + WHCC-style options rail */
.crp-modal .pf-card{max-width:min(1560px,94vw);width:calc(100% - 16px);padding:18px}

/* the crop area sits on the neutral grey stage — hide Cropper's default
   transparency checkerboard so the letterbox around the photo reads as one
   clean surface, not a checkered gap. */
.crp-stage .cropper-bg{background-image:none}

/* crop modal close: the bare muted × sat cramped in the corner and vanished
   against the dark stage — glass circle, bigger tap target, clear of content */
.crp-modal .pf-close{top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  background:rgba(20,20,24,.5);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);z-index:5;transition:background .15s}

.crp-modal .pf-close:hover{background:rgba(20,20,24,.75)}

.crp-wrap{display:flex;gap:20px;align-items:stretch}

/* 58px inner gutter = room for the frame overlay to sit OUTSIDE the crop box
   without overflowing the stage (JS clamps frame thickness to this). */
/* Definite height (not content-hugging) so the image can sit inset from the top
   and bottom edges the same way max-width insets it from the sides — otherwise
   the crop box fills the stage vertically and the wrap frame clips top/bottom. */
.crp-stage{position:relative;flex:1 1 auto;min-width:0;background:#6e6e73;border-radius:12px;display:flex;align-items:center;justify-content:center;
  min-height:340px;height:70vh;overflow:hidden}

/* the max-width/height gutter (not padding — padding offsets Cropper's origin
   and de-centers the crop box) leaves room for the frame overlay around the
   centered crop box. JS clamps frame thickness to ~58px. */
.crp-stage img{display:block;max-width:calc(100% - 134px);max-height:calc(70vh - 150px)}

.crp-rail{flex:0 0 264px;display:flex;flex-direction:column;gap:11px;max-height:74vh;overflow-y:auto}

/* size-list resolution tags (shown before the user even opens the crop) */
.sz-tag{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;white-space:nowrap}

.sz-tag.warn{background:#f7ead6;color:#8a5a1e}

.sz-tag.bad{background:#f7d9d6;color:#a02c22}

.crp-modal .stg-back{margin:2px 0 0}

.st-editcrop{background:none;border:0;padding:0;color:var(--accent);font-size:13px;cursor:pointer;text-decoration:underline}
@media (max-width:760px){

  .crp-wrap{flex-direction:column}

  .crp-rail{flex:1 1 auto;max-height:none;overflow:visible}

  .crp-stage{height:56vh;min-height:300px}

  .crp-stage img{max-width:calc(100% - 62px);max-height:calc(56vh - 84px)}

  .crp-modal .pf-card{padding:14px;max-height:94vh}
}


/* ============ full-page product editor (WHCC-style) ============ */
/* Fills the viewport: a top bar, a large preview stage, and a right options
   rail — with a slide-out size picker. Reuses the crop/preview machinery. */
.crp-fullpage{padding:0;background:rgba(12,14,18,.4)}
.crp-fullpage .pf-card{max-width:100vw;width:100vw;height:100dvh;max-height:100dvh;
  padding:0;border:0;border-radius:0;background:#fff;box-shadow:none;overflow:hidden}
.crp-fullpage .pf-close{display:none}
.ed{display:flex;flex-direction:column;height:100dvh;width:100%}
.ed-main{flex:1 1 auto;display:flex;min-height:0;position:relative}
.crp-fullpage .crp-stage{flex:1 1 auto;border-radius:0;height:auto;min-width:0;background:#ececeb}
.crp-fullpage .crp-stage img{max-width:calc(100% - 120px);max-height:calc(100dvh - 200px)}
.ed-rail{flex:0 0 340px;max-width:340px;border-left:1px solid rgba(0,0,0,.08);background:#fff;
  display:flex;flex-direction:column;gap:15px;max-height:none;overflow-y:auto;padding:20px}
/* realistic frame gets a deeper cast shadow on the big stage */
.crp-fullpage .crp-frame{filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))}

@media (max-width:820px){
  .ed-main{flex-direction:column;overflow-y:auto}
  .crp-fullpage .crp-stage{flex:0 0 auto;height:52vh;min-height:280px}
  .crp-fullpage .crp-stage img{max-width:calc(100% - 70px);max-height:calc(52vh - 96px)}
  .ed-rail{flex:1 1 auto;max-width:none;border-left:0;border-top:1px solid rgba(0,0,0,.08)}
}

/* store checkout pages (thank-you / errors) */
.st-page{min-height:100vh;display:grid;place-items:center;background:#fafafa;padding:20px}

.st-card{background:#fff;border:1px solid #e4e4e7;border-radius:16px;padding:36px;max-width:460px;text-align:center}

.st-card h1{font-size:22px;margin:0 0 10px}

.st-card p{color:#52525b;line-height:1.6}

.st-btn{display:inline-block;margin-top:8px;padding:11px 22px;background:#1c1c1e;color:#fff;border-radius:9px;text-decoration:none}

.st-btn-ghost{background:none;color:var(--fg);border:1px solid var(--line)}

/* order-status page (store-checkout ?done) */
.os-meta{color:var(--muted);font-size:13.5px;margin-top:-6px}

.os-steps{display:flex;flex-direction:column;gap:9px;margin:18px 0 6px}

.os-step{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}

.os-step i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;box-sizing:border-box}

.os-step.on{color:var(--fg);font-weight:500}

.os-step.on i{border:0;background:#1a9948 var(--i-check,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>")) center/11px no-repeat}

.os-step em{font-style:normal;color:var(--muted);font-weight:400;margin-left:4px}

.os-track{margin:6px 0;font-size:14px}

.os-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0 12px}

.os-line{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:4px 0}

.os-line.os-sub{color:var(--muted)}

.os-line.os-total{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-weight:600}

.os-addr{font-size:13.5px;line-height:1.55;color:var(--muted)}

.os-addr strong{color:var(--fg)}

.os-note{font-size:13px;color:var(--muted)}


/* Status flashes. The inline form (no-JS fallback / pre-upgrade paint) sits in
   the page flow; the layout script then lifts every .adm-flash into a fixed
   .adm-toasts stack under the header — success auto-dismisses, errors keep an X. */
.adm-flash{max-width:380px;margin:16px auto;padding:10px 14px;border-radius:8px;font-size:14px}

.adm-toasts{position:fixed;top:calc(var(--adm-global-height,0px) + 12px);left:50%;transform:translateX(-50%);
  z-index:120;display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(460px,calc(100vw - 24px));pointer-events:none}

.adm-toasts .adm-flash{display:flex;align-items:flex-start;gap:10px;width:100%;max-width:none;margin:0;
  padding:12px 12px 12px 16px;border-radius:14px;box-shadow:0 12px 38px rgba(8,10,14,.16);
  pointer-events:auto;animation:adm-toast-in .28s ease}

@keyframes adm-toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.adm-toasts .adm-flash.is-leaving{opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease,transform .3s ease;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .adm-toasts .adm-flash{animation:none}
  .adm-toasts .adm-flash.is-leaving{transition:none;transform:none}
}

.adm-flash-msg{flex:1;min-width:0}

.adm-flash-x{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  margin:-2px -2px 0 0;border:none;border-radius:50%;background:transparent;color:inherit;opacity:.75}

.adm-flash-x:hover{opacity:1;background:rgba(0,0,0,.06)}

.adm-err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}

.adm-ok{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}

.adm-empty{color:#71717a;text-align:center;padding:40px 0}

.ic{display:inline-block;vertical-align:middle}

/* ==========================================================================
   UNIFIED SHOOTCAL APP FINISH
   Match the Calendar/Clients app with a neutral light-first shell: cool glass,
   graphite actions, quieter borders, and no extra brand-color competition.
   Public client galleries keep their studio-controlled presentation.
   ========================================================================== */
body.admin {
  background:
    radial-gradient(900px 640px at 6% 0%, rgba(157,187,219,.13), transparent 58%),
    radial-gradient(800px 620px at 98% 100%, rgba(232,196,170,.08), transparent 60%),
    #f3f5f7;
  color: #242a32;
}

.lp-price-card s,.lp-price-card ul s{color:#b7b0a6;text-decoration:line-through;font-weight:400}


/* download PIN box in the viewer toolbar */
.g-dl .g-pin{width:76px;text-align:center;letter-spacing:.12em;font-variant-numeric:tabular-nums}


.adm-foot{text-align:center;padding:30px 0 22px;color:#a29a8d;font-size:12.5px}

.adm-foot a{color:#a29a8d;text-decoration:none;margin:0 2px}

.adm-foot a:hover{color:#000;text-decoration:underline}

.glx-foot-legal{margin-left:14px}

/* Respect reduced-motion: neutralize decorative animation/transition + auto-scroll */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}


#gallery-settings{scroll-margin-top:16px}

/* iOS Safari zooms focused controls below 16px on both phones and tablets.
   Key this accessibility safeguard to touch input instead of changing tablet
   layout merely because its viewport happens to be narrow. */
@media (hover:none) and (pointer:coarse){
  input:not(.sc-mui-native-input),
  select:not(.sc-mui-native-input),
  textarea:not(.sc-mui-native-input),
  [contenteditable="true"]{
    font-size:16px !important;
  }
}

@media (max-width:360px){
  .adm-main{padding-right:8px;padding-left:8px}
}

/* React/MUI owns the authenticated Galleries chrome. PHP retains only the
   structural header/sidebar hosts so server-rendered page controllers remain
   independent of the shared navigation bundle. */
#rGalleriesAdminChrome{
  width:100%;
  height:100%;
}

#rGalleriesAdminSide{
  width:100%;
  height:100%;
}

@media (max-width:899px){
  .adm-shell{--adm-global-height:64px}
  .adm-workspace{padding-left:0;flex-direction:column;min-height:100vh}
  .adm-side{position:relative;top:auto;width:100%;height:58px;flex:none;z-index:95;padding:7px 12px;box-sizing:border-box;overflow:visible;border-bottom:1px solid #e4e4e7}
  .adm-main{padding:24px}
}
@media (max-width:720px){
  .adm-main{padding:20px 16px}
}

/* Inline code inside a ShootCal Assistant answer (MUI drawer). */
.sc-assistant-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgb(0 0 0 / 7%);
}


/* Appearance belongs to signed-in owner documents. These tokens are available
   before the deferred MUI islands mount; public galleries and Website previews
   never carry the owner marker. Keep the public/photo palette above intact. */
html[data-sc-owner]{
  --sc-owner-canvas:#f3f5f7; --sc-owner-surface:#fff; --sc-owner-soft:#f7f8fa;
  --sc-owner-ink:#242a32; --sc-owner-muted:#5c6169; --sc-owner-line:#e4e4e7;
  --sc-owner-focus:#426f9e;
  --sc-owner-warning-bg:#fdf6ec; --sc-owner-warning-ink:#7a5220; --sc-owner-warning-line:#ecd9b8;
  --sc-owner-error-bg:#fef2f2; --sc-owner-error-ink:#b91c1c; --sc-owner-error-line:#fecaca;
  --sc-owner-success-bg:#f0fdf4; --sc-owner-success-ink:#15803d; --sc-owner-success-line:#bbf7d0;
}
html[data-sc-owner][data-sc-color-scheme="dark"]{
  color-scheme:dark;
  --sc-owner-canvas:#10141b; --sc-owner-surface:#181e27; --sc-owner-soft:#202833;
  --sc-owner-ink:#e7eaf0; --sc-owner-muted:#aeb8c7; --sc-owner-line:#343d4b;
  --sc-owner-focus:#90b4dd;
  --sc-owner-warning-bg:#33281f; --sc-owner-warning-ink:#f0a476; --sc-owner-warning-line:#6b4e33;
  --sc-owner-error-bg:#372329; --sc-owner-error-ink:#f28b82; --sc-owner-error-line:#77433c;
  --sc-owner-success-bg:#20372c; --sc-owner-success-ink:#81c995; --sc-owner-success-line:#355c45;
  --bg:var(--sc-owner-canvas); --fg:var(--sc-owner-ink); --muted:var(--sc-owner-muted); --line:var(--sc-owner-line);
  --accent:#e7eaf0; --sc-accent:#e7eaf0; --sc-on-accent:#10141b;
  --sc-ink:var(--sc-owner-ink); --sc-ink-soft:var(--sc-owner-muted); --sc-line:var(--sc-owner-line);
  --sc-surface:var(--sc-owner-surface); --sc-surface-2:var(--sc-owner-soft);
  --sc-focus:var(--sc-owner-focus); --sc-field-ring:rgba(144,180,221,.25);
  --sc-btn2-bg:#202833; --sc-btn2-border:var(--sc-owner-line); --sc-btn2-bg-hover:#2b3543;
  --sc-menu-bg:var(--sc-owner-surface); --sc-menu-border:var(--sc-owner-line);
  --sc-menu-shadow:0 12px 36px rgba(0,0,0,.35);
}
html[data-sc-owner][data-sc-color-scheme="light"]{color-scheme:light}
html[data-sc-owner] body.admin{color:var(--sc-owner-ink)}
html[data-sc-owner][data-sc-color-scheme="dark"] body.admin{background:var(--sc-owner-canvas)}
html[data-sc-owner] .adm-side{background:var(--sc-owner-surface);border-color:var(--sc-owner-line)}
html[data-sc-owner] .adm-err{background:var(--sc-owner-error-bg);color:var(--sc-owner-error-ink);border-color:var(--sc-owner-error-line)}
html[data-sc-owner] .adm-ok{background:var(--sc-owner-success-bg);color:var(--sc-owner-success-ink);border-color:var(--sc-owner-success-line)}
html[data-sc-owner] .adm-empty,
html[data-sc-owner] .adm-foot,
html[data-sc-owner] .adm-foot a{color:var(--sc-owner-muted)}
html[data-sc-owner] .scg-demo-workspace-notice{background:var(--sc-owner-warning-bg);color:var(--sc-owner-warning-ink);border-color:var(--sc-owner-warning-line)}
html[data-sc-owner] .adm-js-required{background:var(--sc-owner-error-bg);color:var(--sc-owner-error-ink);border-color:var(--sc-owner-error-line)}
html[data-sc-owner] .adm-flash-x:hover{background:var(--sc-owner-soft)}
html[data-sc-owner] .adm-flash-x:focus-visible,
html[data-sc-owner] .scg-demo-workspace-notice__return:focus-visible{outline:3px solid var(--sc-owner-focus);outline-offset:2px}
html[data-sc-owner][data-sc-color-scheme="dark"] .sc-assistant-code{background:rgba(255,255,255,.1)}