/* demo.css — extracted verbatim from the original single-file index.html.
   Source lines: 477-555
   No rules were edited; only relocated. */
/* ── DEMO ACCESS SYSTEM ──────────────────────────────────────────────────── */
/* Reserve a top band for the centered demo timer across every screen */
/* Demo timer lives in a dedicated full-width sticky header band (never floats over content) */
body.demo-active{padding-top:60px}
body.demo-active .top-bar,body.demo-active .admin-top-bar{top:60px}
#demo-topbar{position:fixed;top:0;left:0;right:0;height:60px;z-index:95;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(10,10,20,.9);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-bottom:1px solid rgba(255,45,120,.22);box-shadow:0 4px 20px rgba(0,0,0,.4);pointer-events:none}
#demo-timer{grid-column:2;justify-self:center;pointer-events:auto;display:flex;align-items:center;gap:11px;background:rgba(20,20,36,.7);border:1px solid rgba(255,45,120,.4);border-radius:14px;padding:6px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);font-family:'Montserrat',sans-serif;transition:border-color .25s,box-shadow .25s}
#demo-timer .demo-timer-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;flex:none;animation:demoPulse 1.6s ease-in-out infinite}
#demo-timer .demo-timer-txt{display:flex;flex-direction:column;line-height:1}
#demo-timer .demo-timer-label{font-size:8.5px;font-weight:800;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
#demo-timer #demo-timer-clock{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:22px;line-height:1.1;color:#fff;letter-spacing:.02em}
#demo-timer .demo-timer-sub{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#demo-timer.demo-warn{border-color:rgba(251,191,36,.7)}
#demo-timer.demo-warn .demo-timer-dot{background:#fbbf24;box-shadow:0 0 8px #fbbf24}
#demo-timer.demo-warn #demo-timer-clock{color:#fbbf24}
#demo-timer.demo-danger{border-color:rgba(237,31,81,.85);box-shadow:0 0 0 1px rgba(237,31,81,.4),inset 0 1px 0 rgba(255,255,255,.1);animation:demoDanger 1.1s ease-in-out infinite}
#demo-timer.demo-danger .demo-timer-dot{background:var(--g1);box-shadow:0 0 8px var(--g1)}
#demo-timer.demo-danger #demo-timer-clock{color:#ff6b8b}
/* Custom branded dropdown (duration) */
.bx-select{position:relative;font-family:'Montserrat',sans-serif;width:100%}
.bx-select-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .18s,background .18s}
.bx-select-btn:hover{border-color:rgba(255,45,120,.4)}
.bx-select.open .bx-select-btn{border-color:rgba(255,45,120,.6);background:rgba(255,45,120,.08)}
.bx-select-chev{transition:transform .2s;color:var(--g3);flex:none}
.bx-select.open .bx-select-chev{transform:rotate(180deg)}
/* Menu is portalled to <body> and positioned with fixed coords (never clipped, never expands the card) */
.bx-select-menu{position:fixed;z-index:200;min-width:150px;background:rgba(18,18,32,.98);border:1px solid rgba(255,45,120,.28);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);max-height:300px;overflow-y:auto;padding:6px;display:none;animation:bxIn .14s ease}
.bx-select-menu::-webkit-scrollbar{width:8px}.bx-select-menu::-webkit-scrollbar-thumb{background:rgba(255,45,120,.35);border-radius:8px}.bx-select-menu::-webkit-scrollbar-track{background:transparent}
/* Generator form: clean 3-col grid so Duration never jams the screen edge */
.demo-gen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
.demo-gen-grid .demo-gen-btn-cell{display:flex;align-items:flex-end}
@media(max-width:820px){.demo-gen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.demo-gen-grid{grid-template-columns:1fr}}
.bx-select-menu.bx-open{display:block}
@keyframes bxIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.bx-opt{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:600;color:rgba(255,255,255,.82);cursor:pointer;transition:background .12s}
.bx-opt:hover,.bx-opt.bx-active{background:rgba(255,45,120,.14);color:#fff}
.bx-opt .bx-check{color:var(--g1);font-weight:800;opacity:0}
.bx-opt.bx-sel .bx-check{opacity:1}
.bx-opt.bx-sel{color:#fff}
@keyframes demoPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes demoDanger{0%,100%{box-shadow:0 0 0 1px rgba(237,31,81,.4),0 8px 28px rgba(237,31,81,.35)}50%{box-shadow:0 0 0 3px rgba(237,31,81,.55),0 8px 34px rgba(237,31,81,.5)}}
.demo-lock-screen{position:fixed;inset:0;z-index:100000;background:radial-gradient(1200px 600px at 50% -10%,rgba(255,45,120,.14),transparent 60%),#0d0d1c;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;overflow:auto}
.demo-lock-card{max-width:520px;width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:36px 28px;box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center}
.demo-cta{display:inline-block;text-decoration:none;padding:11px 20px;border-radius:12px;font-size:13px;font-weight:700;font-family:'Montserrat',sans-serif;cursor:pointer}
.demo-cta-brand{background:var(--grad);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 6px 18px rgba(255,45,120,.35)}
.demo-cta-ghost{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.16)}
.demo-spin{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--g1);animation:spin .8s linear infinite}
/* Toast — top-right desktop, top-center mobile; clears the timer band */
#demo-toast-wrap{position:fixed;top:72px;right:18px;z-index:1100;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.demo-toast{background:rgba(13,13,28,.97);border:1px solid rgba(34,197,94,.4);color:#fff;font-size:13px;font-weight:600;font-family:'Montserrat',sans-serif;padding:11px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transform:translateX(20px);transition:opacity .28s,transform .28s;pointer-events:auto;max-width:320px}
.demo-toast.show{opacity:1;transform:translateX(0)}
.demo-toast.demo-toast-error{border-color:rgba(237,31,81,.5)}
.demo-toast.demo-toast-info{border-color:rgba(255,45,120,.4)}
/* Branded confirm modal */
.demo-modal-ov{position:fixed;inset:0;z-index:1000;background:rgba(6,6,14,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s}
.demo-modal-ov.show{opacity:1}
.demo-modal{z-index:1001;width:100%;max-width:420px;background:rgba(18,18,32,.98);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:26px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);font-family:'Montserrat',sans-serif;transform:scale(.94);transition:transform .2s}
.demo-modal-ov.show .demo-modal{transform:scale(1)}
.demo-modal h3{font-size:18px;font-weight:800;color:#fff;margin-bottom:8px}
.demo-modal p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.7);margin-bottom:20px}
.demo-modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.demo-mbtn{padding:10px 18px;border-radius:11px;font-size:13px;font-weight:700;font-family:'Montserrat',sans-serif;cursor:pointer;border:1px solid transparent;transition:all .15s}
.demo-mbtn-cancel{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.16)}
.demo-mbtn-cancel:hover{background:rgba(255,255,255,.12)}
.demo-mbtn-danger{background:linear-gradient(135deg,#ef1f51,#ff2d78);color:#fff;box-shadow:0 6px 18px rgba(237,31,81,.4)}
.demo-mbtn-danger:hover{filter:brightness(1.08)}
.demo-mbtn-warn{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;box-shadow:0 6px 18px rgba(217,119,6,.35)}
/* Demo Links table polish */
.demo-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.demo-tbl th{text-align:left;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.demo-tbl td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.055);vertical-align:middle}
.demo-tbl tbody tr:hover{background:rgba(255,255,255,.02)}
.demo-tbl tbody tr:last-child td{border-bottom:none}
.demo-abtn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:9px;font-size:11px;font-weight:700;font-family:'Montserrat',sans-serif;cursor:pointer;border:1px solid;transition:all .15s;margin-right:6px}
.demo-abtn-revoke{background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.demo-abtn-revoke:hover{background:rgba(245,158,11,.2)}
.demo-abtn-delete{background:rgba(237,31,81,.1);color:#ff6b8b;border-color:rgba(237,31,81,.28)}
.demo-abtn-delete:hover{background:rgba(237,31,81,.18)}
/* Branded alert / confirm (uiAlert / uiConfirm) */
.ui-dlg{z-index:10060}
.ui-dlg-box{max-width:400px}
.ui-dlg-box p{white-space:pre-line}
.ui-dlg-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;border:1px solid}
.ui-dlg-ic.t-info{color:#93c5fd;background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3)}
.ui-dlg-ic.t-danger{color:#fb7185;background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.32)}
.ui-dlg-ic.t-ok{color:#4ade80;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3)}
.ui-dlg-ic.t-error{color:#fb7185;background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.32)}
.ui-mbtn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(237,31,81,.32)}
.ui-mbtn-primary:hover{filter:brightness(1.08)}
.demo-mbtn:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}