/* Presentation layer: existing flip, pointer, reveal and scanner effects remain in styles.css. */
:root {
  color-scheme: light;
  --ui-bg: #f3f7fc;
  --ui-surface: #fff;
  --ui-soft: #edf3fa;
  --ui-text: #152c49;
  --ui-muted: #586b83;
  --ui-border: #d6e2ef;
  --ui-accent: #0965c5;
  --ui-shadow: 0 32px 90px #16365d17;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Matches the Save Concept "Cyber Premium" identity used by the admin
     console (app/globals.css): deep black background, electric blue accent. */
  --ui-bg: #050810;
  --ui-surface: #0b1220;
  --ui-soft: #101a2c;
  --ui-text: #f2f6fc;
  --ui-muted: #8ca0be;
  --ui-border: #22314a;
  --ui-accent: #4c8fff;
  --ui-shadow: 0 32px 90px #0007;
  --ink: var(--ui-text);
  --cream: var(--ui-bg);
  --paper: var(--ui-surface);
  --line: var(--ui-border);
  --muted: var(--ui-muted);
}
body, body.admin-page { background: var(--ui-bg); color: var(--ui-text); }
button, input, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--ui-accent); outline-offset: 4px;
}
/* .instructions-button:focus-visible in styles.css sets `outline: none`
   (its :hover styling shares the selector) with no visible replacement,
   which silently defeats the global rule above for this one button —
   loaded after styles.css and matching its selector's specificity
   exactly, so this wins the tie back for keyboard-focus visibility
   without touching styles.css's own (differently-scoped) rules. */
.instructions-button:focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: 3px;
}
.theme-toggle {
  position: fixed; z-index: 10010; right: 22px; bottom: 24px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 17px; border-radius: 999px;
  border: 1px solid var(--ui-border); color: var(--ui-text); background: var(--ui-surface);
  box-shadow: 0 8px 30px #071f4c20; cursor: pointer;
  font: 700 12px Manrope, sans-serif;
  /* iOS Safari has a long-standing rendering bug where a `position: fixed`
     element that also paints a backdrop-filter/box-shadow (this button has
     both, applied further down in this file) is repainted at its OLD
     position during a touch-scroll gesture and only snaps to the correct
     spot once scrolling stops — visually it looks like the button is
     "dragged along" by the scroll. Forcing the browser to promote it to its
     own GPU compositing layer up front (rather than letting Safari decide
     mid-scroll) keeps it correctly pinned to the viewport throughout the
     gesture. This is unrelated to the earlier body-scroll-lock rules further
     down in this file, which were fixing a different (position) bug. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
.theme-toggle > span:first-child { font-size: 23px; }
.support-fab { bottom: 84px; }
.login-gate, .admin-login-gate {
  background: radial-gradient(ellipse at 8% 20%, #22bfda14, transparent 48%), radial-gradient(ellipse at 90% 85%, #287aff12, transparent 45%), var(--ui-bg);
}
.login-gate { padding: 104px 32px 88px; }
/* Single column: the two-column showcase panel this grid used to pair
   with .login-card was dropped from index.html by the Cyber Premium
   redesign (d26a8d3), leaving .login-card as the grid's only child. With
   grid-template-columns still declaring two tracks, that lone card was
   auto-placed into the first (wider) track instead of the center of the
   screen — this rule centers it directly instead. */
.login-layout {
  display: flex; justify-content: center;
  width: min(460px, 100%);
}
.login-showcase { position: relative; align-self: stretch; display: flex; flex-direction: column; padding: 28px 0; }
.showcase-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ui-accent); font: 800 10px Manrope, sans-serif; letter-spacing: .17em; }
.showcase-eyebrow i { width: 7px; height: 7px; background: #12bba6; border-radius: 50%; box-shadow: 0 0 0 5px #12bba612; }
.login-showcase h2 { font: 800 clamp(32px, 3.8vw, 52px)/1.13 Manrope, sans-serif; letter-spacing: -.055em; margin: 25px 0 16px; color: var(--ui-text); }
.login-showcase h2 em { font-style: normal; color: var(--ui-accent); }
.login-showcase > p { max-width: 310px; color: var(--ui-muted); font-size: 15px; line-height: 1.7; margin: 0; }
.showcase-product { position: relative; display: grid; place-items: center; min-height: 250px; flex: 1; isolation: isolate; }
.showcase-product::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, #29cdd025, transparent 70%); }
.showcase-product img { position: relative; width: 200px; height: 285px; object-fit: contain; filter: drop-shadow(0 22px 18px #07376b25); animation: showcase-float 7s ease-in-out infinite; }
.showcase-orbit { position: absolute; width: 290px; height: 120px; border: 1px solid var(--ui-border); border-radius: 50%; transform: rotate(-20deg); }
.showcase-orbit::after { content: ""; position: absolute; top: 30px; left: 10px; width: 7px; height: 7px; background: #22b8ce; border-radius: 50%; box-shadow: 0 0 20px #22b8ce; }
.showcase-footer { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--ui-border); padding-top: 18px; color: var(--ui-muted); font: 700 9px Manrope, sans-serif; letter-spacing: .13em; }
.login-card, .admin-login-card {
  width: 100%; padding: clamp(25px, 3.4vw, 46px); border-radius: 28px;
  background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow); position: relative;
}
.login-card::before, .admin-login-card::before { content: ""; position: absolute; left: 36px; right: 36px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, #25bace, transparent); }
.login-card h1, .admin-login-card h1 { color: var(--ui-text); font-size: clamp(27px, 2.5vw, 34px); line-height: 1.18; letter-spacing: -.045em; }
.login-card > p, .admin-login-card > p { color: var(--ui-muted); line-height: 1.65; }
.login-card .login-kicker, .admin-login-card > span { color: var(--ui-accent); font-size: 10px; letter-spacing: .16em; }
.login-card .original-only { border-radius: 0 10px 10px 0; border-color: var(--ui-accent); background: var(--ui-soft); color: var(--ui-accent); font-size: 9px; letter-spacing: .04em; }
.login-card .verification-privacy { font-size: 11px; background: var(--ui-soft); color: var(--ui-muted); border-color: var(--ui-border); }
.login-card label, .admin-login-card label { color: var(--ui-text); }
.login-card input, .admin-login-card input { background: var(--ui-soft); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 12px; min-height: 55px; }
.login-card input::placeholder, .admin-login-card input::placeholder { color: var(--ui-muted); }
.login-card small, .login-card .input-wrap > span { color: var(--ui-muted); }
.login-card .primary, .admin-login-card .primary { background: linear-gradient(115deg, #0859b6, #077fa0); color: white; border: 0; border-radius: 12px; min-height: 54px; box-shadow: 0 8px 22px #0874b327; }
.login-card .instructions-button, .login-card .login-scan, .admin-login-card > a { color: var(--ui-accent); }
.login-card .instructions-button:hover, .login-card .login-scan { background: var(--ui-soft); border-color: var(--ui-border); }
.admin-login-card { max-width: 460px; }
:root[data-theme="dark"] :is(.topbar, .admin-topbar, .verify-card, .history, .table-wrap, .generator-card, .admin-register, .customer-dashboard, .admin-summary article, .customer-summary article, .customer-profile-card, .customer-detail-dialog, .scanner-dialog, .qr-dialog, .support-dialog, .consent-dialog, .login-help-popover, .login-tutorial article, .language-switcher, .admin-language, .mobile-nav, .admin-section, .admin-table-wrap, .customer-table-wrap) { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
:root[data-theme="dark"] :is(.hero, .stats, .admin, .admin-shell, .customer-detail-section) { background: var(--ui-bg); color: var(--ui-text); }
:root[data-theme="dark"] :is(input, select, textarea, th, .consent-options label, .customer-profile-metrics span, .customer-detail-summary article, .customer-metadata-grid > div, .privacy-boundary, .serial-tags span, .serial-tags b, .help-icon) { background: var(--ui-soft); color: var(--ui-text); border-color: var(--ui-border); }
:root[data-theme="dark"] :is(.card-heading h2, .section-title h2, .product-copy h1, .login-tutorial strong, .customer-profile-top strong, .customer-profile-metrics strong, .customer-detail-summary strong, .support-grid strong, .scanner-head h2, .admin-summary strong, .customer-summary strong) { color: var(--ui-text); }
:root[data-theme="dark"] :is(.hint, .privacy, .history-note, .product-copy > p, .serial-instruction, .section-title p, .customer-profile-top small, .customer-card-foot small, .support-grid p, .consent-options small, td, footer, .topbar nav a) { color: var(--ui-muted); }
:root[data-theme="dark"] :is(.verify-card, .generator-card, .customer-dashboard)::before { background: linear-gradient(125deg, #ffffff05, transparent 60%, #129cda05); }
:root[data-theme="dark"] :is(.login-help-popover::after, .customer-table-wrap tbody tr:hover, .admin-table-wrap tbody tr:hover) { background: var(--ui-soft); border-color: var(--ui-border); }
:root[data-theme="dark"] :is(.admin-login-card > img) { background: #f4f8ff; border-radius: 12px; padding: 5px; }
:root[data-theme="dark"] .login-error, :root[data-theme="dark"] .admin-login-error { color: #ffaaa2; }
@keyframes showcase-float { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(-2deg); } }
@media (max-width: 900px) {
  .login-showcase { padding: 0 6px; }
  .login-showcase h2 { margin: 15px 0 10px; font-size: 34px; }
  .showcase-product, .showcase-footer { display: none; }
  .login-showcase > p { max-width: 390px; }
}
@media (max-width: 600px) {
  .login-gate { padding: 94px 18px 100px; }
  .login-card { padding: 27px 22px; border-radius: 22px; }
  .theme-toggle { right: 14px; bottom: 86px; min-height: 44px; padding: 0 13px; }
  body:has(.login-gate:not(.hidden)) .theme-toggle, .admin-page .theme-toggle { bottom: 20px; }
  .support-fab { bottom: 145px; }
  .admin-login-gate { padding-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
:root[data-theme="dark"] :is(.product-copy h1 em, .eyebrow, .card-heading > div > span, .invite-button, .section-title > div > span, .serial-instruction::before, .scanner-status, .share-status) { color: var(--ui-accent); }
:root[data-theme="dark"] :is(.user-account-summary, .account-id, .account-status, .header-level, .header-benefits, .user-session, .scan-button, .support-grid article, .upload-qr) { color: var(--ui-text); background: var(--ui-soft); border-color: var(--ui-border); }
:root[data-theme="dark"] :is(.user-account-summary strong, .user-account-summary b, .user-account-summary small, .input-wrap > span, input::placeholder, #serial-help) { color: var(--ui-muted); }
@media (max-width: 600px) {
  body:has(.login-gate:not(.hidden)) .theme-toggle { top: 20px; right: 150px; bottom: auto; min-height: 40px; padding: 0 11px; font-size: 11px; }
}
.activity-filters { display:grid;grid-template-columns:repeat(4,minmax(130px,1fr)) auto;gap:12px;margin:18px 0;align-items:end; }
.activity-filters label {display:grid;gap:7px;font-size:12px;color:var(--ui-muted);}
.activity-filters :is(input,select),.activity-filters button,.activity-pagination button,.activity-detail-button {min-height:42px;padding:9px 12px;border:1px solid var(--ui-border);background:var(--ui-soft);color:var(--ui-text);border-radius:10px;cursor:pointer;}
.activity-pagination {display:flex;justify-content:center;align-items:center;gap:18px;margin:24px;}
.activity-pagination button:disabled {opacity:.45;cursor:default;}
.activity-detail-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:22px;margin:0;}
.activity-detail-grid > div {padding:14px;background:var(--ui-soft);border-radius:12px;overflow-wrap:anywhere;}
.activity-detail-grid dt {font-size:12px;color:var(--ui-muted);margin-bottom:6px;}
.activity-detail-grid dd {margin:0;font-size:14px;color:var(--ui-text);}
.profile-access-summary {padding:18px;background:var(--ui-soft);border:1px solid var(--ui-border);border-radius:12px;color:var(--ui-text);}
.profile-access-summary small {line-height:1.6;color:var(--ui-muted);}
#admin-notice {position:fixed;z-index:11000;top:14px;left:50%;transform:translateX(-50%);padding:14px 24px;background:var(--ui-surface);color:var(--ui-text);border:1px solid #cc7359;border-radius:12px;box-shadow:var(--ui-shadow);max-width:90vw;}
#activity-detail-content > p {margin:0 22px 22px;}
@media(max-width:900px){.activity-filters{grid-template-columns:1fr 1fr;}.activity-filters button{grid-column:1/-1;}}
@media(max-width:600px){.activity-detail-grid{grid-template-columns:1fr;padding:14px;}.activity-pagination{gap:8px;font-size:12px;}}

/* Let the product table scroll inside its card instead of widening mobile pages. */
.admin-grid > *, .activity-filters > * { min-width: 0; }
.activity-filters :is(input, select) { min-width: 0; width: 100%; }
@media (max-width: 900px) {
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
  .activity-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .activity-pagination { margin-inline: 0; flex-wrap: wrap; }
}
.audit-json { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 540px; max-height: 360px; overflow: auto; font-size: 12px; }

/* Save Concept Club: focused ranks, reward cards and on-demand details. */
#bonus { position:relative; background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:28px; padding:32px; overflow:hidden; }
#bonus::before { pointer-events:none; opacity:.16; }
#bonus .bonus-heading { position:relative; align-items:center; gap:20px; margin-bottom:26px; }
#bonus .bonus-heading h2 { font-size:clamp(26px,4vw,38px);letter-spacing:-1.2px;margin:8px 0; }
#bonus .bonus-heading > div > span { color:#168fd4;letter-spacing:2px;font-size:10px;font-weight:800; }
#bonus .bonus-description,#bonus .progress-message,#bonus .rewards-grid article > p,#bonus .wallet-head p,#bonus .wallet-head > div > span { display:none; }
#bonus .level-badge { background:var(--ui-soft);border:1px solid var(--ui-border);box-shadow:none;border-radius:18px;min-width:150px;padding:16px 22px;color:var(--ui-text); }
#bonus .level-badge strong { color:var(--ui-text);font-size:23px; }
#bonus .level-progress-head {font-size:11px;color:var(--ui-muted);margin-bottom:10px;gap:12px;}
#bonus .level-progress-head > span {display:none;}
#bonus .progress-track {height:6px;background:var(--ui-soft);margin-bottom:22px;}
#bonus #bonus-progress {background:linear-gradient(90deg,#0066bf,#20c6ef);box-shadow:0 0 16px #16baff55;}
#bonus .bonus-info { display:inline-grid;place-items:center;flex:0 0 27px;width:27px;min-width:27px;height:27px;min-height:27px;padding:0;border-radius:50%;border:1px solid var(--ui-border);background:transparent;color:var(--ui-muted);font:600 14px Georgia,serif;cursor:pointer; }
#bonus .bonus-info:hover,#bonus .bonus-info:focus-visible {color:#129dda;border-color:#129dda;outline:2px solid #129dda44;outline-offset:3px;}
#bonus .club-info {margin-left:auto;}
#bonus .level-journey {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 30px;}
#bonus .level-journey article {position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:17px 8px;background:transparent;border:1px solid var(--ui-border);border-radius:16px;text-align:center;color:var(--ui-muted);}
#bonus .level-journey article > span {width:30px;height:30px;border-radius:10px;background:var(--ui-soft);color:var(--ui-muted);font-size:12px;}
#bonus .level-journey small {display:none;}
#bonus .level-journey strong {font-size:13px;color:var(--ui-text);}
#bonus .level-journey article > b {font-size:10px;color:var(--ui-muted);margin:0;}
#bonus .level-journey .current {border-color:#169ddd;background:linear-gradient(135deg,#119adc15,#00c2e508);box-shadow:inset 0 0 0 1px #169ddd22;}
#bonus .level-journey .current > span {color:white;background:#087ac5;}
#bonus .level-journey .bonus-info {width:20px;height:20px;min-width:20px;min-height:20px;flex-basis:20px;font-size:11px;}
#bonus .rewards-label {display:flex;justify-content:space-between;gap:12px;font-size:10px;font-weight:800;letter-spacing:1.8px;margin-bottom:14px;}
#bonus .rewards-label span {letter-spacing:0;font-weight:400;color:var(--ui-muted);}
#bonus .rewards-grid {gap:14px;}
#bonus .rewards-grid article {padding:22px;border:1px solid var(--ui-border);border-radius:22px;background:linear-gradient(150deg,var(--ui-soft),var(--ui-surface));color:var(--ui-text);opacity:1;box-shadow:none;transition:transform .2s,border-color .2s;}
#bonus .rewards-grid article:hover {transform:translateY(-3px);border-color:#159ddc;}
#bonus .reward-top {display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
#bonus .reward-symbol {display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#129cdb15;color:#168fd4;font-size:28px;}
#bonus .rewards-grid article > span {font-size:10px;letter-spacing:1.8px;color:var(--ui-muted);}
#bonus .rewards-grid h3 {font-size:23px;letter-spacing:-.7px;margin:10px 0 24px;color:var(--ui-text);}
#bonus .rewards-grid .featured {border-color:#159ddb55;background:linear-gradient(140deg,#159ddd15,var(--ui-surface));}
#bonus .rewards-grid .reward-redeem {width:100%;border-radius:12px;background:var(--ui-soft);color:var(--ui-muted);border:1px solid var(--ui-border);height:42px;}
#bonus .rewards-grid .unlocked .reward-redeem {background:linear-gradient(110deg,#0869bc,#099cd7);border:0;color:white;}
#bonus .rewards-grid .claimed .reward-redeem {background:#139f801f;color:#0d7a63;}
/* Dark mode keeps the original, lighter pair — it already passes WCAG AA
   (~4.67:1) against the dark surface; only the light-theme default above
   failed (~3.44:1), since it's the same literal colors alpha-blended over
   a much lighter page background. */
:root[data-theme="dark"] #bonus .rewards-grid .claimed .reward-redeem {background:#139f8015;color:#159d82;}
#bonus .benefits-wallet {margin-top:24px;padding:20px 0 0;border:0;border-top:1px solid var(--ui-border);background:transparent;box-shadow:none;}
#bonus .wallet-head h3 {font-size:16px;color:var(--ui-text);margin:0;}
#bonus .wallet-head > strong {background:var(--ui-soft);color:var(--ui-muted);font-size:11px;padding:6px 10px;}
#bonus .wallet-empty {border:0;padding:12px 0;color:var(--ui-muted);font-size:12px;background:transparent;}
.bonus-info-dialog {width:min(440px,calc(100% - 32px));padding:28px;border:1px solid var(--ui-border);border-radius:24px;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 30px 100px #0005;}
.bonus-info-dialog::backdrop {background:#04142b99;backdrop-filter:blur(6px);}
.bonus-dialog-head {display:flex;justify-content:space-between;align-items:center;color:#168fd4;font-size:10px;letter-spacing:1.5px;}
.bonus-dialog-head button {border:0;border-radius:50%;width:32px;height:32px;background:var(--ui-soft);color:var(--ui-text);font-size:24px;cursor:pointer;}
.bonus-info-dialog h2 {font-size:26px;letter-spacing:-.7px;}
.bonus-info-dialog p {line-height:1.7;color:var(--ui-muted);font-size:14px;}
@media(max-width:620px){#bonus{padding:22px 16px;border-radius:22px;}#bonus .bonus-heading{flex-wrap:wrap;}#bonus .level-badge{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;}#bonus .level-badge strong{font-size:18px;}#bonus .level-journey{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;}#bonus .level-journey article:last-child{grid-column:auto;}#bonus .level-journey article{padding:12px 2px;}#bonus .level-journey strong{font-size:10px;}#bonus .level-journey article>b{font-size:8px;}#bonus .rewards-label span{display:none;}#bonus .rewards-grid{grid-template-columns:1fr;}#bonus .rewards-grid article{padding:18px;}#bonus .reward-top{margin-bottom:14px;}#bonus .rewards-grid h3{margin-bottom:18px;}}
@media(prefers-reduced-motion:reduce){#bonus .rewards-grid article{transition:none;}#bonus .rewards-grid article:hover{transform:none;}}
/* Three focused administrative workspaces. */
.admin-tabs {display:flex;gap:6px;padding:6px;background:var(--ui-soft);border:1px solid var(--ui-border);border-radius:16px;margin:0 0 24px;}
.admin-tabs button {flex:1;min-height:46px;padding:10px 18px;border:0;border-radius:11px;background:transparent;color:var(--ui-muted);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.admin-tabs button[aria-selected="true"] {background:var(--ui-surface);color:var(--ui-text);box-shadow:0 2px 10px #00000012;}
.admin-tabs button:focus-visible {outline:2px solid #119ddd;outline-offset:2px;}
.admin-standalone [role="tabpanel"][hidden],#customer-card-grid[hidden] {display:none!important;}
.admin-standalone .admin-head {min-height:0;padding:24px 28px;margin-bottom:20px;}
.admin-standalone .admin-head-visual {display:none;}
.admin-standalone .admin-head h1 {font-size:30px;}
#panel-customers .customer-dashboard {margin:0;}
#panel-customers .customer-summary {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
#panel-customers .customer-summary article:nth-child(n+4) {display:none;}
#panel-customers .customer-summary article {padding:14px 18px;min-height:0;}
#panel-customers .customer-summary strong {font-size:24px;}
#panel-customers .customer-table-wrap {display:block;}
#panel-customers th:last-child,#panel-customers td:last-child {display:none;}
#panel-customers td {padding:16px;vertical-align:middle;}
#panel-customers .customer-points {font-size:12px;color:var(--ui-muted);margin-top:6px;}
.customer-manage {display:block;margin-top:8px;min-height:36px;padding:7px 13px;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-soft);color:var(--ui-text);font-weight:600;cursor:pointer;}
#customer-detail-dialog {max-width:860px;}
#customer-detail-dialog details {border:1px solid var(--ui-border);border-radius:14px;padding:16px;margin:14px 0;background:var(--ui-surface);}
#customer-detail-dialog summary {cursor:pointer;font-size:15px;font-weight:700;color:var(--ui-text);}
#customer-detail-dialog details[open] > summary {margin-bottom:18px;}
#customer-detail-dialog .permissions-heading {display:none;}
#customer-detail-dialog .permission-actions {grid-template-columns:1fr;gap:16px;}
#customer-detail-dialog .customer-detail-summary {grid-template-columns:repeat(3,minmax(0,1fr));}
#customer-detail-dialog .customer-detail-summary article {padding:12px;}
#customer-detail-dialog .customer-detail-summary strong {font-size:14px;}
@media(max-width:620px){.admin-tabs button{padding:9px 5px;font-size:12px;}.admin-standalone .admin-head{padding:18px;}#panel-customers .customer-summary{grid-template-columns:1fr;}#customer-detail-dialog .customer-detail-summary{grid-template-columns:1fr 1fr;}}
/* Compact account controls. */
.account-controls {display:flex;align-items:center;gap:8px;position:relative;flex-shrink:0;}
.topbar .user-account-summary {display:block;position:relative;overflow:visible;background:var(--ui-surface);border:1px solid var(--ui-border);box-shadow:none;margin:0;}
.topbar .account-id {display:flex;flex-direction:row;align-items:center;gap:8px;padding:10px 12px;min-height:40px;border:0;cursor:pointer;list-style:none;}
.account-id::-webkit-details-marker {display:none;}
.topbar .account-id strong {color:var(--ui-text);margin:0;}
.topbar .account-id small {color:var(--ui-muted);}
.account-id:focus-visible {outline:2px solid #139dd8;outline-offset:3px;border-radius:10px;}
.account-dropdown {position:absolute;right:0;top:calc(100% + 10px);width:210px;padding:10px;display:grid;gap:6px;border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 15px 45px #0003;z-index:100;}
.topbar .account-dropdown .header-level,.topbar .account-dropdown .header-benefits {display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:10px;border:0;background:var(--ui-soft);border-radius:8px;color:var(--ui-text);}
.topbar .account-dropdown .header-level b,.topbar .account-dropdown small {color:var(--ui-text);}
.topbar .account-dropdown #logout {display:block;width:100%;margin:0;padding:10px;border:0;border-radius:8px;background:var(--ui-soft);color:var(--ui-text);}
.profile-avatar {display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ui-soft);border:1px solid var(--ui-border);color:var(--ui-accent);flex-shrink:0;}
.profile-avatar svg {width:17px;height:17px;}
.profile-menu-list {list-style:none;margin:0;padding:0;display:grid;gap:6px;}

/* Instructional hover tooltip for QR-Code touchpoints — CSS-only, not the
   native title="" tooltip, which is slow (~1s delay) and browser-styled. */
[data-tooltip] {position:relative;}
[data-tooltip]::after {
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(4px);
  width:max-content;
  max-width:220px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid var(--ui-border);
  background:var(--ui-surface);
  color:var(--ui-text);
  box-shadow:0 12px 30px #0006;
  font:600 11.5px/1.45 Manrope, sans-serif;
  text-align:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:70;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
@media (max-width:480px) {
  [data-tooltip]::after {max-width:min(220px, 78vw);}
}
.topbar .account-controls #install-app {display:block;width:auto;min-height:32px;height:32px;padding:0 10px;font-size:11px;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-soft);color:var(--ui-text);box-shadow:none;white-space:nowrap;margin:0;}
.save-footer {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;background:var(--ui-surface);color:var(--ui-muted);border-top:1px solid var(--ui-border);padding:32px clamp(20px,5vw,70px);}
.save-footer-brand {display:flex;align-items:center;gap:12px;}
.save-footer-brand img {width:48px;height:48px;object-fit:contain;}
.save-footer-brand span {display:grid;gap:5px;}
.save-footer-brand strong,.save-footer-notice strong {color:var(--ui-text);font-size:14px;}
.save-footer-brand small {font-size:12px;}
.save-footer-notice p {margin:8px 0 0;font-size:12px;line-height:1.7;max-width:720px;}
@media(max-width:700px){.account-controls{margin-left:auto;}.topbar .account-id{padding:8px;gap:5px;}.topbar .account-controls #install-app{font-size:10px;padding:0 8px;}.save-footer{grid-template-columns:1fr;gap:20px;padding-bottom:100px;}}
body::after {content:'SAVE CONCEPT® · ORIGINAL';position:fixed;right:14px;bottom:8px;font-size:10px;letter-spacing:2px;color:var(--ui-muted);opacity:.28;pointer-events:none;z-index:40;}
#bonus::after {content:'SAVE CONCEPT®';position:absolute;right:22px;top:18px;font-size:12px;letter-spacing:3px;opacity:.12;pointer-events:none;}
.seller-instruction {font-size:13px;line-height:1.7;color:var(--ui-muted);margin:22px 0;}
.rank-code-card {display:grid;gap:10px;padding:18px;border:1px solid var(--ui-border);border-radius:16px;margin-top:12px;background:var(--ui-soft);color:var(--ui-text);}
.rank-code-card code {overflow-wrap:anywhere;user-select:all;}
.rank-code-card small {color:var(--ui-muted);}
.seller-whatsapp {position:fixed;right:20px;bottom:148px;z-index:50;padding:9px 12px;border-radius:20px;background:#16734b;color:white;font-size:12px;text-decoration:none;box-shadow:0 4px 16px #0002;}
.seller-whatsapp[hidden] {display:none!important;}

/* Keep the original transparent S directly on the header/login surface. */
:root .brand-icon-only,
:root .brand-icon-only img,
:root .login-brand,
:root .login-brand img {
 background: transparent;
 border: 0;
 border-radius: 0;
 box-shadow: none;
 padding: 0;
}
.product-dashboard-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 16px;}
.product-dashboard-summary article{display:grid;gap:10px;padding:20px;border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-soft);}
.product-dashboard-summary article>span{font-size:12px;color:var(--ui-muted);}
.product-dashboard-summary strong{font-size:19px;color:var(--ui-text);}
.product-validity-note{font-size:12px;line-height:1.7;color:var(--ui-muted);max-width:820px;margin:16px 0 24px;}
.user-products-dashboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.user-product-card{padding:24px;border-radius:22px;border:1px solid var(--ui-border);background:linear-gradient(145deg,var(--ui-soft),var(--ui-surface));color:var(--ui-text);min-width:0;}
.user-product-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;}
.product-monogram{display:grid;place-items:center;width:38px;height:38px;background:#129ddb15;border-radius:12px;font-size:24px;font-weight:800;color:#139bd8;}
.product-active-badge{font-size:12px;color:#0e7a63;background:#1595781f;padding:6px 10px;border-radius:20px;}
/* Dark mode keeps the original pair (already passes WCAG AA there); only
   the light-theme default failed contrast — see the analogous comment on
   .reward-redeem above. */
:root[data-theme="dark"] .product-active-badge{color:#159578;background:#15957812;}
.user-product-card h3{font-size:22px;letter-spacing:-.5px;margin:0 0 6px;}
.product-maker{color:var(--ui-muted);font-size:12px;margin:0 0 22px;}
.user-product-card dl{display:grid;gap:16px;margin:0;}
.user-product-card dt{font-size:12px;color:var(--ui-muted);margin-bottom:5px;}
.user-product-card dd{font-size:14px;margin:0;overflow-wrap:anywhere;}
.user-product-card code{font-size:18px;font-weight:700;letter-spacing:1px;}
.product-followup{border-top:1px solid var(--ui-border);margin-top:22px;padding-top:18px;display:grid;gap:8px;}
.product-followup>span,.product-followup small{font-size:12px;color:var(--ui-muted);}
.product-followup-track{height:5px;border-radius:5px;background:var(--ui-border);overflow:hidden;margin:5px 0;}
.product-followup-track span{display:block;height:100%;background:linear-gradient(90deg,#137bc6,#20c7db);}
.products-empty{grid-column:1/-1;padding:32px;text-align:center;color:var(--ui-muted);border:1px dashed var(--ui-border);border-radius:18px;}
@media(max-width:1000px){.user-products-dashboard{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.user-products-dashboard,.product-dashboard-summary{grid-template-columns:1fr;}.user-product-card{padding:20px;}.product-dashboard-summary article{padding:16px;}}

/* Save Concept controls: translucent surfaces, crisp edges and restrained depth. */
:root {
 --button-glass:linear-gradient(180deg,#ffffff,#e1edf8);
 --button-edge:#b9d8ed;
 --button-depth:0 4px 0 #a8bfd4,0 9px 15px #103c6824,inset 0 1px 0 #fff;
 --button-hover-depth:0 6px 0 #9eb8cf,0 13px 20px #103c6830,inset 0 1px 0 #fff;
}
:root[data-theme="dark"] {
 --button-glass:linear-gradient(180deg,#345570,#1b324a);
 --button-edge:#81c8ef38;
 --button-depth:0 4px 0 #071524,0 10px 18px #0005,inset 0 1px 0 #c8ecff40;
 --button-hover-depth:0 6px 0 #071524,0 14px 22px #0006,inset 0 1px 0 #c8ecff50;
}
:root :is(.primary,.scan-button,.instructions-button,.invite-button,.activity-detail-button,.customer-manage,.activity-pagination button,.admin-actions button,.permission-actions button,#refresh-customers,#refresh-verifications,#audit-refresh,#activity-export,#download-qr,[data-copy-code]) {
 border:1px solid var(--button-edge);border-radius:13px;background:var(--button-glass);color:var(--ui-text);box-shadow:var(--button-depth);font-weight:650;letter-spacing:.01em;
 transition:box-shadow .18s ease,border-color .18s ease,background-color .18s ease,transform .18s ease;
}
:root :is(.primary,.scan-button,.instructions-button,.invite-button,.customer-manage,#refresh-customers,#refresh-verifications,#audit-refresh,#activity-export,#download-qr,[data-copy-code]) {min-height:42px;}
:root :is(.login-card,.admin-login-card,.verify-card,.generator-card) .primary,
:root #support-open-scanner {
 background:linear-gradient(125deg,#0769b8 0%,#087fbf 58%,#098fae 100%);color:#fff;border:1px solid #51bce788;
 box-shadow:0 7px 20px #087cbc30,0 2px 4px #04366025,inset 0 1px 0 #b3edff66;
}
:root .primary > b {display:inline-grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#ffffff18;border:1px solid #ffffff20;font-size:17px;}
:root :is(.theme-toggle,.support-fab) {background:var(--button-glass);color:var(--ui-text);border:1px solid var(--button-edge);box-shadow:var(--button-depth);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
:root .topbar .account-controls #install-app {background:var(--button-glass);border-color:var(--button-edge);box-shadow:var(--button-depth);font-weight:650;}
:root .account-id {border-radius:12px;transition:background-color .18s ease;}
:root .account-id:hover {background:var(--ui-soft);}
:root #bonus .bonus-info {color:var(--ui-accent);border-color:var(--button-edge);background:var(--button-glass);box-shadow:0 2px 6px #087aba15,inset 0 1px 0 #ffffff22;transition:border-color .18s ease,box-shadow .18s ease;}
:root #bonus .rewards-grid .reward-redeem:disabled {background:var(--ui-soft);border:1px solid var(--ui-border);color:var(--ui-muted);box-shadow:inset 0 1px 0 #ffffff0c;cursor:default;transform:none;}
:root :is(.primary,.scan-button,.instructions-button,.invite-button,.activity-detail-button,.customer-manage,.activity-pagination button,.admin-actions button,.permission-actions button,#refresh-customers,#refresh-verifications,#audit-refresh,#activity-export,#download-qr,[data-copy-code]):disabled {opacity:.55;box-shadow:none;transform:none;cursor:default;}
@media(hover:hover) and (pointer:fine) {
 :root :is(.primary,.scan-button,.instructions-button,.invite-button,.activity-detail-button,.customer-manage,.activity-pagination button,.admin-actions button,.permission-actions button,#refresh-customers,#refresh-verifications,#audit-refresh,#activity-export,#download-qr,[data-copy-code]):not(:disabled):hover {border-color:#159ed4;box-shadow:var(--button-hover-depth);transform:translateY(-1px);}
 :root :is(.login-card,.admin-login-card,.verify-card,.generator-card) .primary:not(:disabled):hover {box-shadow:0 10px 25px #087cbc40,inset 0 1px 0 #b3edff88;filter:brightness(1.06);}
}
:root :is(button,summary,a.seller-whatsapp):focus-visible {outline:2px solid var(--ui-accent);outline-offset:3px;}
:root :is(.primary,.scan-button,.instructions-button,.invite-button,.customer-manage,.activity-detail-button):not(:disabled):active {transform:translateY(1px);box-shadow:inset 0 2px 5px #001c3a20;}
:root .permission-actions .account-state-button.block {color:#b52b36;border-color:#d9556544;background:linear-gradient(145deg,#fff0f0,#fbe8ea);}
:root[data-theme="dark"] .permission-actions .account-state-button.block {color:#ffb0b6;background:linear-gradient(145deg,#522a38,#362330);}
@media(prefers-reduced-motion:reduce) {
 :root :is(.primary,.scan-button,.instructions-button,.invite-button,.activity-detail-button,.customer-manage,.activity-pagination button,.admin-actions button,.permission-actions button,#refresh-customers,#refresh-verifications,#audit-refresh,#activity-export,#download-qr,[data-copy-code]) {transition:none;transform:none!important;}
}

/* Raised controls and one aligned contact dock, above mobile navigation. */
:root .primary:not(:disabled), :root #support-open-scanner {
 background:linear-gradient(180deg,#249ee5,#0871bc);color:#fff;border:1px solid #65b9ed;
 box-shadow:0 4px 0 #054879,0 10px 20px #0864a43d,inset 0 1px 0 #ffffff66;
}
.contact-dock {position:fixed;right:24px;bottom:86px;z-index:90;display:flex;align-items:center;gap:12px;}
:root .contact-dock :is(.support-fab,.seller-whatsapp) {
 position:static;display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:44px;box-sizing:border-box;padding:8px 14px;border-radius:14px;
 font:700 12px Manrope,sans-serif;text-decoration:none;backdrop-filter:none;
 transition:transform .16s ease,box-shadow .16s ease;
}
:root .contact-dock .support-fab {background:var(--button-glass);border:1px solid var(--button-edge);color:var(--ui-text);box-shadow:var(--button-depth);}
:root .contact-dock .support-fab span {width:24px;height:24px;font-size:14px;border-radius:8px;background:var(--ui-soft);color:var(--ui-accent);box-shadow:inset 0 1px 3px #0002;}
:root .contact-dock .support-fab strong {display:block;font-size:12px;}
:root .contact-dock .seller-whatsapp {background:linear-gradient(180deg,#229b65,#137044);color:white;border:1px solid #50b784;box-shadow:0 4px 0 #09482c,0 9px 18px #083e352e,inset 0 1px 0 #ffffff55;}
:root .seller-whatsapp svg {width:20px;height:20px;flex-shrink:0;}
:root .theme-toggle {border-radius:14px;min-height:40px;right:24px;bottom:26px;backdrop-filter:none;box-shadow:var(--button-depth);}
@media(hover:hover) and (pointer:fine) {
 :root .primary:not(:disabled):hover {transform:translateY(-2px);box-shadow:0 6px 0 #054879,0 14px 24px #0864a44d,inset 0 1px 0 #ffffff77;}
 :root .contact-dock :is(.support-fab,.seller-whatsapp):hover {transform:translateY(-2px);filter:brightness(1.06);}
}
:root :is(.primary,.scan-button,.instructions-button,.invite-button,.contact-dock .support-fab,.contact-dock .seller-whatsapp,.theme-toggle):not(:disabled):active {transform:translateY(3px);box-shadow:0 1px 0 #09233b,inset 0 2px 4px #0002;}
@media(max-width:600px) {
 .contact-dock {right:14px;bottom:calc(88px + env(safe-area-inset-bottom,0px));gap:9px;}
 :root .contact-dock :is(.support-fab,.seller-whatsapp) {min-height:44px;padding:8px 11px;}
 :root .theme-toggle {left:14px;right:auto;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:44px;min-height:44px;padding:0;}
 :root .theme-toggle [data-theme-label] {display:none;}
 :root body:has(.login-gate:not(.hidden)) .theme-toggle,:root .admin-page .theme-toggle {bottom:24px;}
 body:has(.login-gate:not(.hidden)) .contact-dock {bottom:24px;}
 .save-footer {padding-bottom:170px;}
}
@media(prefers-reduced-motion:reduce) {
 :root :is(.primary,.contact-dock .support-fab,.contact-dock .seller-whatsapp,.theme-toggle) {transition:none;transform:none!important;}
}

/* Compact language list and seller contact beside the profile. */
:root .language-switcher {padding:0;border:0;background:transparent;box-shadow:none;flex-shrink:0;}
:root .language-select {width:118px;min-height:36px;padding:6px 8px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-surface);color:var(--ui-text);font:600 11px Manrope,sans-serif;cursor:pointer;}
:root .topbar .seller-whatsapp {position:static;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 10px;border-radius:10px;font:700 11px Manrope,sans-serif;white-space:nowrap;background:linear-gradient(180deg,#229b65,#137044);color:#fff;border:1px solid #50b784;box-shadow:0 3px 0 #09482c,0 6px 12px #083e3526,inset 0 1px 0 #ffffff55;transition:transform .15s;}
:root .topbar .seller-whatsapp svg {width:18px;height:18px;}
:root .topbar .seller-whatsapp:active {transform:translateY(2px);box-shadow:0 1px 0 #09482c;}
@media(max-width:700px) {
 :root .topbar .account-controls {flex-wrap:wrap;justify-content:flex-end;gap:8px;}
 :root .language-select {width:100px;min-height:36px;font-size:10px;}
 :root .topbar .seller-whatsapp {width:36px;min-height:36px;padding:0;}
 :root .topbar .seller-whatsapp span {display:none;}
}
@media(prefers-reduced-motion:reduce) {:root .topbar .seller-whatsapp{transition:none;transform:none;}}

.user-product-heading .product-brand-logo {display:block;width:48px;height:48px;object-fit:contain;flex-shrink:0;background:transparent;}

/* Distinct shields shared by the rank journey and customer identity. */
.rank-insignia {--medal:#158dc5;--medal-bg:#d9f2ff;display:inline-grid;place-items:center;flex-shrink:0;color:var(--medal);}
.rank-insignia.rank-2 {--medal:#60778f;--medal-bg:#e6edf5;}
.rank-insignia.rank-3 {--medal:#a56a0b;--medal-bg:#fff0bb;}
.rank-insignia.rank-4 {--medal:#7354b7;--medal-bg:#eee5ff;}
.rank-insignia.rank-5 {--medal:#00877f;--medal-bg:#c5fff4;}
.rank-insignia svg {display:block;width:36px;height:42px;filter:drop-shadow(0 3px 2px #0002);}
.rank-shield {fill:var(--medal-bg);stroke:var(--medal);}
:root #bonus .level-journey article > .rank-insignia {width:48px;height:52px;border-radius:0;background:transparent;color:var(--medal);}
#profile-insignia {display:flex;}
#profile-insignia svg {width:28px;height:34px;}
.topbar .profile-identity {display:grid;gap:3px;text-align:left;}
.topbar .profile-identity strong {font-size:13px;letter-spacing:.04em;}
.topbar .profile-identity small {font-size:10px;}
:root .account-dropdown {width:min(290px,calc(100vw - 32px));padding:16px;gap:12px;border-radius:20px;box-shadow:0 18px 48px #031c3533;}
.profile-menu-title {display:grid;gap:5px;font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--ui-accent);}
.profile-menu-title span {font-size:13px;font-weight:500;letter-spacing:0;color:var(--ui-muted);}
.profile-stats {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.profile-stats > div {display:grid;gap:6px;padding:12px;background:var(--ui-soft);border:1px solid var(--ui-border);border-radius:12px;}
.topbar .profile-stats strong {font-size:20px;color:var(--ui-text);}
.topbar .profile-stats small {font-size:10px;color:var(--ui-muted);}
.profile-progression {display:grid;gap:8px;}
.profile-progression progress {appearance:none;width:100%;height:6px;border:0;border-radius:8px;overflow:hidden;background:var(--ui-soft);}
.profile-progression progress::-webkit-progress-bar {background:var(--ui-soft);}
.profile-progression progress::-webkit-progress-value {background:linear-gradient(90deg,#087bc7,#29c7d2);border-radius:8px;}
.profile-progression progress::-moz-progress-bar {background:#139dd1;}
.topbar .profile-progression small {font-size:11px;line-height:1.5;color:var(--ui-muted);}
@media(max-width:620px){#bonus .rank-insignia svg{width:30px;height:36px;}#profile-insignia svg{width:24px;height:30px;}}

/* Freestanding rank emblems, with a bronze finish for Bronze. */
.rank-insignia.rank-1 {--medal:#995627;--medal-bg:#f2c99c;}
:root #bonus .level-journey article,
:root #bonus .level-journey article.current {background:transparent;border-color:transparent;box-shadow:none;border-radius:0;}
:root #bonus .level-journey article > .rank-insignia,
:root #profile-insignia,
:root #profile-insignia .rank-insignia {background:transparent;border:0;box-shadow:none;border-radius:0;}
:root #bonus .level-journey .current strong {color:var(--ui-accent);}
:root #bonus .level-journey .current .rank-insignia svg {filter:drop-shadow(0 3px 3px #149bc433);}

/* Save Concept finish: consistent surfaces, restrained relief and clear spacing. */
:root {
 --button-depth:0 3px 0 #a8bfd4,0 6px 12px #103c6818,inset 0 1px 0 #fff;
 --button-hover-depth:0 4px 0 #9eb8cf,0 9px 16px #103c6824,inset 0 1px 0 #fff;
}
:root[data-theme="dark"] {
 --button-depth:0 3px 0 #071524,0 6px 12px #0004,inset 0 1px 0 #c8ecff30;
 --button-hover-depth:0 4px 0 #071524,0 9px 16px #0005,inset 0 1px 0 #c8ecff40;
}
:root .topbar {border-bottom:1px solid var(--ui-border);box-shadow:0 4px 24px #061d3610;gap:16px;}
:root .brand-icon-only img {object-fit:contain;flex-shrink:0;}
:root :is(.verify-card,.history,#bonus) {border:1px solid var(--ui-border);box-shadow:0 12px 32px #061d360a;border-radius:24px;}
:root .card-heading {padding-bottom:18px;border-bottom:1px solid var(--ui-border);margin-bottom:22px;}
:root :is(.verify-card,.login-card) input {border-radius:12px;transition:border-color .15s,box-shadow .15s;}
:root :is(.verify-card,.login-card) input:focus {border-color:var(--ui-accent);box-shadow:0 0 0 3px #159dd414;}
:root .primary:not(:disabled),:root #support-open-scanner {border-radius:12px;box-shadow:0 3px 0 #054879,0 7px 14px #0864a429,inset 0 1px 0 #ffffff66;min-height:46px;}
:root .user-product-card {box-shadow:0 5px 18px #061d3608;border-radius:18px;}
:root .product-active-badge {border:1px solid #15957833;font-weight:600;}
:root #bonus .rewards-grid article {border-radius:18px;box-shadow:0 5px 18px #061d3608;}
:root #bonus .rewards-grid h3 {line-height:1.25;}
:root .save-footer {margin-top:32px;}
:root .save-footer-brand img {object-fit:contain;flex-shrink:0;}
@media(hover:hover) and (pointer:fine) {
 :root .primary:not(:disabled):hover {transform:translateY(-1px);box-shadow:0 4px 0 #054879,0 10px 18px #0864a435,inset 0 1px 0 #ffffff77;}
}
:root .primary:not(:disabled):active {transform:translateY(2px);box-shadow:0 1px 0 #054879,inset 0 2px 4px #0002;}
@media(max-width:700px) {
 :root .topbar {gap:10px;}
 :root :is(.verify-card,.history,#bonus) {border-radius:18px;}
 .showcase-product img {animation:none;}
}
@media(prefers-reduced-motion:reduce) {:root .primary{transform:none!important;}}

#privacy-preferences {grid-column:1/-1;justify-self:start;padding:8px 0;border:0;background:transparent;color:var(--ui-muted);font-size:12px;text-decoration:underline;cursor:pointer;}

.operator-management,.operator-workspace{max-width:900px;margin:32px auto;padding:28px;border:1px solid var(--ui-border);border-radius:20px;background:var(--ui-surface);color:var(--ui-text);}.operator-management form,.operator-workspace form{display:grid;gap:16px;margin:24px 0;}.operator-management label,.operator-workspace label{display:grid;gap:8px;}.operator-management input,.operator-workspace input{padding:12px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-soft);color:var(--ui-text);}.operator-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--ui-border);}.admin-locked .operator-management{display:none;}.operator-workspace [hidden]{display:none!important;}

.save-footer-notice h2 {margin:0;color:var(--ui-text);font-size:clamp(26px,3.8vw,52px);font-weight:800;line-height:1.12;letter-spacing:-.035em;text-wrap:balance;}

body::after {content:none;}
:root .save-footer {display:flex;align-items:center;justify-content:center;gap:24px;}
:root .save-footer #privacy-preferences,:root .save-footer .admin-footer-link {display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px;border:0;background:transparent;color:var(--ui-muted);}

/* One centered row, with equal columns for the brand and utility icons. */
:root .save-footer {display:grid;grid-template-columns:repeat(3,48px);justify-content:center;align-items:center;gap:20px;}
:root .save-footer > .save-footer-brand,
:root .save-footer > #privacy-preferences,
:root .save-footer > .admin-footer-link {grid-column:auto;justify-self:center;display:grid;place-items:center;box-sizing:border-box;width:48px;height:48px;min-width:48px;min-height:48px;margin:0;padding:0;border-radius:12px;}
:root .save-footer .save-footer-brand img {display:block;width:40px;height:40px;object-fit:contain;}
:root .save-footer svg {display:block;width:22px;height:22px;}
:root .save-footer :is(#privacy-preferences,.admin-footer-link):hover {background:var(--ui-soft);color:var(--ui-accent);}
@media(max-width:600px){:root .save-footer{gap:16px;}}

/* Mobile login screen: dock the theme toggle right next to the language
   flags (top-right, same row) instead of the fixed bottom-left position
   used everywhere else. Earlier mobile rules for .theme-toggle set `top`
   in one place and `bottom` in another for this same login-gate context —
   on a `position: fixed` box with no explicit `height`, having BOTH `top`
   and `bottom` set makes it stretch to fill the gap between them (that
   was the "giant bar on the left edge" bug). Every positioning property
   is pinned here explicitly, including a real `height` (not just
   `min-height`), so this rule can never recombine with another one into
   that stretch again — and appended at the end of the file, after every
   earlier .theme-toggle rule, so it wins ties on source order too. */
@media (max-width: 520px) {
  body:has(.login-gate:not(.hidden)) .theme-toggle {
    position: fixed;
    top: 18px;
    right: 144px;
    left: auto;
    bottom: auto;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }
}

/* .login-gate is `position: fixed; inset: 0` with its OWN `overflow: auto`
   for the card content — but the rest of the page behind it (everything
   the gate is covering) was never stopped from also being scrollable. On
   iOS Safari, having two independently-scrollable regions like that is a
   known trigger for `position: fixed` siblings (the theme toggle, here) to
   visibly drag/follow a touch-scroll gesture instead of staying pinned to
   the viewport. Locking the body's own scroll while the gate is up leaves
   only one scrollable region (the gate's own), which removes the trigger. */
body:has(.login-gate:not(.hidden)) {
  overflow: hidden;
  height: 100dvh;
}

/* .signature-vial's width/height are set independently across three
   separate copies of this rule scattered through styles.css (leftovers
   from more than one visual revision), none matching the vial images'
   real 1024×1536 pixel ratio — the mismatch letterboxes the image inside
   the box (object-fit: contain), and .vial-auth-label's percentage-based
   QR/code overlay (measured against the image itself) drifts with it,
   sometimes past the box's edge. One authoritative rule, loaded after all
   of them, pins the correct ratio so it never has to letterbox — !important
   is deliberate here given how scattered the conflicting sources are. */
.signature-vial {
  aspect-ratio: 1024 / 1536 !important;
  height: auto !important;
}