/* Shared presentation for public demo entry points, scoped away from the workspace. */
.demo-access {
  --demo-surface:#f5f7f3; --demo-inset:#fff; --demo-ink:#18392e;
  --demo-muted:#51665c; --demo-line:#d4dfd7; --demo-accent:#236b55;
  --demo-tint:#e5eee7; --demo-notice:#e8f2ed;
  box-sizing:border-box; color:var(--demo-ink); font:14px/1.5 system-ui,sans-serif;
  border:1px solid var(--demo-line); border-radius:18px; padding:24px;
  background:var(--demo-surface);
}
.shop-frame[data-theme="dark"] .demo-access, :root[data-theme="dark"] .demo-access, :root[data-theme="night-service"] .demo-access {
  --demo-surface:#172a24; --demo-inset:#102019; --demo-ink:#edf5ee;
  --demo-muted:#b0c3b7; --demo-line:#375046; --demo-accent:#a7dfbd;
  --demo-tint:#294539; --demo-notice:#244236;
}
.demo-access *, .demo-access *::before { box-sizing:border-box; }
.demo-access [hidden] { display:none!important; }
.demo-access .demo-access-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.demo-access .demo-eyebrow { display:block; margin-bottom:4px; color:var(--demo-muted); font-size:11px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.demo-access h2 { margin:0; color:var(--demo-ink); font:750 22px/1.2 system-ui,sans-serif; letter-spacing:-.025em; }
.demo-access .demo-access-description { margin:10px 0 20px; color:var(--demo-muted); font-size:14px; }
.demo-access button, .demo-access a, .demo-access summary { font:650 14px/1.4 system-ui,sans-serif; cursor:pointer; }
.demo-access button, .demo-access a { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:11px 15px; border:1px solid var(--demo-line); border-radius:10px; text-decoration:none; color:var(--demo-ink); background:var(--demo-inset); }
.demo-access .demo-primary { background:#236b55; border-color:#236b55; color:#fff; }
.demo-access button:hover, .demo-access a:hover { box-shadow:inset 0 0 0 1px var(--demo-accent); }
.demo-access .demo-primary:hover { background:#18533f; box-shadow:none; }
.demo-access button:disabled { opacity:.6; cursor:wait; }
.demo-access :is(button,a,summary):focus-visible { outline:3px solid var(--demo-accent); outline-offset:3px; }
.demo-access .demo-access-actions { display:flex; flex-wrap:wrap; gap:10px; }
.demo-access .demo-countdown { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:5px 10px; border-radius:999px; background:var(--demo-tint); color:var(--demo-ink); font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.demo-access .demo-countdown::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--demo-accent); }
.demo-access .demo-credentials { margin-top:20px; }
.demo-access .demo-credentials h3 { margin:0 0 9px; color:var(--demo-muted); font:650 12px/1.4 system-ui,sans-serif; }
.demo-access .demo-credentials dl { display:grid; gap:8px; margin:0; }
.demo-access .demo-credentials dl>div { min-width:0; border:1px solid var(--demo-line); border-radius:10px; padding:9px 12px; background:var(--demo-inset); }
.demo-access dt { color:var(--demo-muted); font-size:11px; line-height:1.5; }
.demo-access dd { margin:2px 0 0; }
.demo-access code { color:var(--demo-ink); user-select:all; overflow-wrap:anywhere; font:500 14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.demo-access .demo-access-footer { margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.demo-access .demo-access-footer a { padding-inline:12px; font-size:12px; }
.demo-access .demo-access-note { color:var(--demo-muted); margin:12px 0 0; font-size:12px; }
.demo-access .demo-message { margin:16px 0 0; padding:12px 14px; border:1px solid var(--demo-line); border-radius:10px; color:var(--demo-ink); background:var(--demo-notice); font-size:13px; }
.demo-access .demo-message:empty { display:none; }
.demo-access .demo-access-details { margin-top:18px; padding-top:8px; border-top:1px solid var(--demo-line); }
.demo-access summary { min-height:44px; align-content:center; color:var(--demo-muted); }
.demo-access details .demo-credentials { margin-top:8px; max-width:560px; }
#demo-login-access { width:100%; max-width:460px; margin:0; padding:32px; }
#demo-login-access>.demo-primary { width:100%; justify-content:space-between; }
#demo-shop-access { width:calc(100% - 32px); max-width:1280px; margin:32px auto; }
#demo-shop-access .demo-credentials dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:600px) {
 .demo-access { padding:18px; border-radius:14px; }
 #demo-login-access { padding:20px; }
 #demo-shop-access .demo-access-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 #demo-shop-access .demo-primary { grid-column:1/-1; }
 #demo-shop-access .demo-credentials dl { grid-template-columns:1fr; }
}
/* Keep the public entry alongside the standard form in the existing second panel. */
:root[data-demo="true"] .login-page>aside { padding:112px 32px 48px; }
:root[data-demo="true"] .login-page>aside>.visual { display:none; }
@media (max-width:999px) {
 :root[data-demo="true"] .login-page { display:block; background:var(--canvas); }
 :root[data-demo="true"] .login-page .login-panel { width:min(480px,100%); min-height:0; padding:112px 22px 32px; }
 :root[data-demo="true"] .login-page .heading { margin-top:0; }
 :root[data-demo="true"] .login-page>aside { display:grid; padding:0 22px 40px; background:transparent; }
 :root[data-demo="true"] .login-page>aside>.environment { display:none; }
 #demo-login-access { max-width:436px; }
}