/* ============================================================
   GROK PREDICTOR — components, part 1
   Buttons and forms. Every legacy button/form class name is
   kept (JS depends on them) and reskinned to the new system.
   ============================================================ */

/* ── BUTTONS ──
   Primary: signal green, used for the one main action.
   Secondary: outlined chalk. Ghost: text only.
   Destructive: danger red outline -> fill. */
.btn,.sbtn,.btn-primary,.btn-solid,.btn-approve{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:12px 22px;
  background:var(--primary);color:var(--primary-ink);
  border:1px solid var(--primary);border-radius:var(--r-md);
  font-weight:700;font-size:var(--text-sm);line-height:1.2;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),box-shadow var(--dur-fast);
}
.btn:hover,.sbtn:hover,.btn-primary:hover,.btn-solid:hover,.btn-approve:hover{
  transform:translateY(-1px);box-shadow:var(--sh-1);
}
.btn:active,.sbtn:active,.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn:disabled,.sbtn:disabled,.btn-primary:disabled,.btn-solid:disabled{
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;
}
.btn .material-symbols-outlined,.sbtn .material-symbols-outlined,.btn-primary .material-symbols-outlined{font-size:1.1em}

.btn-secondary,.btn-outline,.btn-ghost,.btn--ghost,.gbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:11px 20px;
  background:transparent;color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  font-weight:600;font-size:var(--text-sm);
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.btn-secondary:hover,.btn-outline:hover,.btn-ghost:hover,.btn--ghost:hover,.gbtn:hover{
  background:var(--surface-2);border-color:var(--text-3);
}
.btn-danger,.btn-reject{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:10px 18px;
  background:transparent;color:var(--danger);
  border:1px solid var(--danger);border-radius:var(--r-md);
  font-weight:700;font-size:var(--text-sm);
  transition:background var(--dur-fast),color var(--dur-fast);
}
.btn-danger:hover,.btn-reject:hover{background:var(--danger);color:var(--danger-ink)}

/* small legacy variants */
.btn-outline-sm,.btn-red-sm,.btn-copy,.btn-export,.btn-view,.btn-act,.btn-create{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:8px 16px;border-radius:var(--r-full);
  font-weight:700;font-size:var(--text-xs);white-space:nowrap;
  border:1px solid var(--border-strong);color:var(--text);background:transparent;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.btn-outline-sm:hover,.btn-red-sm:hover{border-color:var(--text-3);background:var(--surface-2)}
.btn-red-sm{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn-red-sm:hover{background:var(--primary);filter:brightness(1.08)}
.btn-red-sm .material-symbols-outlined{font-size:1rem}
.btn-copy{background:var(--surface-2)}
.btn-copy:hover{border-color:var(--primary);color:var(--primary)}
.btn-copy.copied{border-color:var(--primary);color:var(--primary)}
.btn-export:hover,.btn-view:hover{border-color:var(--text-3);background:var(--surface-2)}
.btn-create{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn-create:hover{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn-text{
  padding:8px 10px;min-height:44px;color:var(--text-2);font-weight:600;
  font-size:var(--text-sm);text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-text:hover{color:var(--text)}
.pw-copy-btn,.copy-referral{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-sm);
  border:1px solid var(--border);color:var(--text-2);
}
.pw-copy-btn:hover,.copy-referral:hover{border-color:var(--primary);color:var(--primary)}
.pw-copy-btn .material-symbols-outlined,.copy-referral .material-symbols-outlined{font-size:1rem}
.copy-icon{display:inline-block;width:1em;height:1em;flex:0 0 auto;fill:currentColor;vertical-align:middle}
.pw-copy-btn .copy-icon,.copy-referral .copy-icon,.gbtn .copy-icon{width:1rem;height:1rem}

/* row action buttons inside tables */
.btn-action,.btn-act{
  padding:8px 12px;min-height:36px;background:transparent;
  border:1px solid var(--border);color:var(--text-2);border-radius:var(--r-sm);
  font-weight:600;font-size:var(--text-xs);white-space:nowrap;
}
.btn-action:hover,.btn-act:hover{border-color:var(--text-3);color:var(--text);background:var(--surface-2)}
.btn-action.deactivate{border-color:var(--danger);color:var(--danger)}
.btn-action.deactivate:hover{background:var(--danger);color:var(--danger-ink)}
.btn-action.activate{border-color:var(--primary);color:var(--primary)}
.btn-action.activate:hover{background:var(--primary);color:var(--primary-ink)}
.action-buttons,.action-btns,.action-row{display:flex;gap:var(--s2);flex-wrap:wrap}

/* pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s4);flex-wrap:wrap}
.btn-page{
  min-width:40px;min-height:40px;padding:8px 12px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text-2);font-weight:600;font-size:var(--text-sm);
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-page:hover:not(:disabled){border-color:var(--text-3);color:var(--text)}
.btn-page.active{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn-page:disabled{opacity:.4;cursor:not-allowed}

/* hero buttons (landing + console CTAs) */
.btn-hero-primary{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:52px;padding:14px 28px;
  background:var(--primary);color:var(--primary-ink);
  border-radius:var(--r-md);font-weight:800;font-size:var(--text-base);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast);
}
.btn-hero-primary:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-hero-primary .material-symbols-outlined{font-size:1.2em}
.btn-hero-ghost{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:52px;padding:14px 26px;
  border:1px solid var(--border-strong);color:var(--text);
  border-radius:var(--r-md);font-weight:700;font-size:var(--text-base);
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.btn-hero-ghost:hover{background:var(--surface-2);border-color:var(--text-3)}
.btn-hero-ghost .material-symbols-outlined{font-size:1.1em}

/* ── FORMS ── */
.field,.form-group{margin-bottom:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.field label,.form-label,.filter-label{
  font-size:var(--text-sm);font-weight:700;color:var(--text);
  letter-spacing:.01em;
}
.field__hint{font-size:var(--text-xs);color:var(--text-3);font-weight:400}
.field input,.field select,.field textarea,
.form-input,.form-select,.filter-input,.filter-select{
  width:100%;min-height:48px;padding:13px 16px;
  background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:14px;color:var(--text);
  font-size:var(--text-sm);outline:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.field input::placeholder,.form-input::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus,
.form-input:focus,.form-select:focus,.filter-input:focus,.filter-select:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--tint-primary);
}
.field select,.form-select,.filter-select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px;background-repeat:no-repeat;
  padding-right:38px;
}
.form-input-wrapper,.field__wrap{position:relative}
.form-input-icon,.field__icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--text-3);pointer-events:none;font-size:1.15rem;
}
.form-input-wrapper .form-input,.field__wrap .field{padding-left:44px}
.full-width,.full{width:100%}

/* checkboxes / radios / toggles */
.checkbox-row,.radio-row{display:flex;align-items:flex-start;gap:var(--s3);min-height:44px;padding:var(--s2) 0;cursor:pointer}
input[type="checkbox"],input[type="radio"]{
  width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--primary);cursor:pointer;
}
.plan-radio{position:absolute;opacity:0;pointer-events:none}

/* filters bar */
.filters-bar,.filter-row,.filters{
  display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s5);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);
}
.filters-bar>*,.filter-row>*,.filters>*{min-width:0}
.filters-bar select,.filter-row select,.filters select{max-width:100%}

/* inline errors — state what happened and how to fix it */
.err-msg,.err,.error-message,.auth-form__error{
  background:var(--tint-danger);border:1px solid var(--danger);color:var(--danger);
  padding:11px 15px;border-radius:var(--r-sm);font-size:var(--text-sm);
  display:none;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s3);
  line-height:1.5;
}
.err-msg.on,.error-message.visible,.auth-form__error:not(:empty){display:flex}
.error-message .material-symbols-outlined{font-size:1.1rem;flex-shrink:0}

/* upload dropzones (payment proof / slip) */
.upload-area,.payment-upload{
  border:1.5px dashed var(--border-strong);border-radius:var(--r-md);
  background:var(--surface-2);padding:var(--s6) var(--s4);
  text-align:center;cursor:pointer;
  transition:border-color var(--dur-fast),background var(--dur-fast);
}
.upload-area:hover,.upload-area:focus-visible,
.payment-upload:hover,.payment-upload:focus-visible,.payment-upload.is-dragging{
  border-color:var(--primary);background:var(--tint-primary);
}
.payment-upload.has-file{border-style:solid;border-color:var(--primary)}
.upload-area__icon,.payment-upload__icon{
  width:44px;height:44px;margin:0 auto var(--s2);
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);
  background:var(--surface-3);color:var(--text-2);font-size:1.4rem;
}
.payment-upload.has-file .payment-upload__icon{background:var(--primary);color:var(--primary-ink)}
.upload-area__label,.payment-upload__title{font-weight:700;font-size:var(--text-sm)}
.payment-upload__hint{font-size:var(--text-xs);color:var(--text-3);margin-top:var(--s1);line-height:1.5}
.upload-area__preview,.payment-upload__preview{
  display:none;max-width:100%;height:126px;margin:var(--s3) auto 0;
  border-radius:var(--r-sm);object-fit:contain;
  border:1px solid var(--border);background:var(--surface);
}
.upload-area__preview.is-visible,.payment-upload__preview.is-visible{display:block}
.payment-upload__status{
  min-height:1rem;margin-top:var(--s2);font-size:var(--text-xs);
  color:var(--text-3);text-align:center;word-break:break-word;
}
.payment-upload__status.is-ready{color:var(--primary);font-weight:700}
.payment-upload__status.is-error{color:var(--danger);font-weight:700}
.payment-upload__change{
  display:none;margin:var(--s2) auto 0;padding:6px 12px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);font-weight:600;font-size:var(--text-xs);cursor:pointer;
}
.payment-upload.has-file .payment-upload__change{display:block}
.payment-upload__input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.upload-help{font-size:var(--text-xs);color:var(--text-3);margin-top:var(--s1)}

/* ============================================================
   components, part 2 — cards, badges, tables
   ============================================================ */

/* ── CARDS ── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s6);
}
.card__title{font-size:var(--text-lg);font-weight:700}
.card__subtitle{color:var(--text-2);font-size:var(--text-sm);margin-top:var(--s1)}
.card__topbar{height:3px;background:var(--primary);border-radius:var(--r-sm) var(--r-sm) 0 0;margin:calc(-1 * var(--s6)) calc(-1 * var(--s6)) var(--s5)}
.card__footer{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
.card__hint{font-size:var(--text-xs);color:var(--text-3);line-height:1.5}
.card__body{display:flex;flex-direction:column;gap:var(--s3)}

/* stat cards (admin + superadmin consoles) */
.stats-grid,.stat-grid,.stats-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s4);margin-bottom:var(--s6);
}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s5);
  display:flex;align-items:flex-start;gap:var(--s3);
}
.stat-icon,.icon-wrap{
  width:44px;height:44px;border-radius:var(--r-md);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--accent);
  border:1px solid var(--border);
}
.stat-icon .material-symbols-outlined,.icon-wrap .material-symbols-outlined{font-size:1.3rem}
.stat-icon.primary{color:var(--primary)}
.stat-icon.success{color:var(--primary)}
.stat-icon.danger{color:var(--danger)}
.stat-icon.warning{color:var(--accent)}
.stat-icon.info{color:var(--info)}
.stat-content,.stat-body{flex:1;min-width:0}
.stat-value,.stat-val,.stat-card__val,.sum-card__val{
  font-family:var(--font-display);font-size:1.7rem;letter-spacing:.3px;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.stat-label,.stat-lbl,.stat-card__lbl,.sum-card__lbl{
  font-size:var(--text-xs);color:var(--text-2);margin-top:var(--s1);font-weight:500;
}
/* Stat values must never outgrow their card on a phone: the value gets the
   full card width (icon stacks above it) and scales with the viewport. */
.stat-value,.stat-val,.stat-card__val,.sum-card__val{overflow-wrap:anywhere}
@media (max-width:760px){
  .stat-card{flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s4)}
  .stat-icon,.icon-wrap{width:34px;height:34px}
  .stat-icon .material-symbols-outlined,.icon-wrap .material-symbols-outlined{font-size:1.05rem}
  .stat-value,.stat-val,.stat-card__val,.sum-card__val{font-size:clamp(1.02rem,4.8vw,1.3rem);letter-spacing:0}
}
@media (max-width:380px){
  .stat-value,.stat-val,.stat-card__val,.sum-card__val{font-size:clamp(.95rem,4.4vw,1.1rem)}
}
.stat-card__val--pending,.sum-card__val--pending{color:var(--accent)}
.stat-card__val--approved,.sum-card__val--approved{color:var(--primary)}
.stat-card__val--rejected,.sum-card__val--rejected{color:var(--danger)}
.sum-card__val--all{color:var(--text)}
.sum-card__val--used{color:var(--info)}
.stat-change{font-size:var(--text-xs);font-weight:700;margin-top:var(--s2);display:flex;align-items:center;gap:4px}
.stat-change.positive{color:var(--primary)}
.stat-change.negative{color:var(--danger)}

/* summary / referral cards */
.referral-card,.card-table,.summary-strip{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s5);margin-bottom:var(--s6);
}
.referral-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.section-title{font-family:var(--font-display);font-size:var(--text-lg);text-transform:uppercase;letter-spacing:.5px}
.referral-title{font-size:var(--text-base);font-weight:700}
.referral-code,.referral-link{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s3);flex-wrap:wrap;
}
.referral-code-value{font-size:var(--text-lg);font-weight:700;letter-spacing:2px;color:var(--primary);font-variant-numeric:tabular-nums}
.referral-link{font-size:var(--text-sm);color:var(--text-2);word-break:break-all}
.referral-link strong{color:var(--text)}

/* action cards */
.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s4)}
.action-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s5);color:inherit;
  display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out);
}
a.action-card:hover,.action-card[href]:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.action-icon{
  width:44px;height:44px;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
}
.action-icon--red,.action-icon.primary{color:var(--danger)}
.action-icon--green,.action-icon.success{color:var(--primary)}
.action-icon--yellow,.action-icon.warning{color:var(--accent)}
.action-icon--teal,.action-icon.info{color:var(--yellow)}
.action-icon--purple{color:var(--yellow)}
.action-icon .material-symbols-outlined{font-size:1.3rem}
.action-title{font-size:var(--text-base);font-weight:700}
.action-desc{color:var(--text-2);font-size:var(--text-sm);line-height:1.6}

/* payment type cards (superadmin dashboard partitions) */
.p-cards{display:none;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.p-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.p-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.p-card__plan{font-family:var(--font-display);font-size:var(--text-base);text-transform:uppercase}
.p-card__email{font-size:var(--text-xs);color:var(--text-2);word-break:break-all}
.p-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.p-card__actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.partition{margin-bottom:var(--s6)}
.partition-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.partition-head__title,.partition-head h3{font-family:var(--font-display);font-size:var(--text-lg);text-transform:uppercase;letter-spacing:.5px}
.partition-count{font-size:var(--text-xs);color:var(--text-2);font-weight:600}
.subtype-bar{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 var(--s2);flex-wrap:wrap}
.subtype-divider{flex:1;height:1px;background:var(--border);min-width:24px}
.subtype-stat{display:flex;align-items:baseline;gap:var(--s1)}
.subtype-stat__lbl{font-size:var(--text-xs);color:var(--text-3)}
.subtype-stat__val,.subtype-stat__cnt{font-weight:700;font-variant-numeric:tabular-nums}

/* hub layout (preview page) */
.hub-shell{max-width:1200px;margin:0 auto;padding:var(--s6) var(--s5) var(--s10)}
.hub-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) 0;margin-bottom:var(--s6);border-bottom:1px solid var(--border)}
.hub-brand{display:inline-flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--text);font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.06em}
.hub-brand span span{color:var(--primary)}
.hub-mark{width:34px;height:34px;display:inline-flex}
.hub-mark img{width:100%;height:100%;display:block}
.hub-hero{display:grid;grid-template-columns:1.4fr .8fr;gap:var(--s6);align-items:start;margin-bottom:var(--s8)}
.hub-hero h1{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.05;margin:0 0 var(--s3)}
.hub-lede{font-size:var(--text-base);color:var(--text-2);max-width:56ch;margin:0}
.hub-note{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4) var(--s5)}
.hub-note strong{display:block;margin-bottom:var(--s1)}
.hub-note p{font-size:var(--text-sm);color:var(--text-2);margin:0}
.hub-section{margin-bottom:var(--s8)}
.hub-section-head{margin-bottom:var(--s4)}
.hub-section-head h2{font-family:var(--font-display);font-size:var(--text-xl);margin:0 0 var(--s1)}
.hub-section-head p{color:var(--text-2);font-size:var(--text-sm);margin:0}
.hub-footer{border-top:1px solid var(--border);padding-top:var(--s5);color:var(--text-3);font-size:var(--text-sm)}
.hub-footer p{margin:0}
@media (max-width:760px){.hub-hero{grid-template-columns:1fr}}

/* hub cards (preview page) */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.hub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.hub-card__top{display:flex;align-items:center;justify-content:flex-start}
.hub-card__icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.hub-card{text-decoration:none;color:inherit;transition:border-color var(--dur-fast),transform var(--dur-fast)}
.hub-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.hub-card h3{font-size:var(--text-base);margin:0}
.hub-card p{font-size:var(--text-sm);color:var(--text-2);margin:0}
.hub-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:700;padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--border-strong);color:var(--text-2)}

/* ── BADGES ── */
.badge,.status-badge,.admin-badge,.sa-badge,.pred-badge,.tab-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-full);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;
  border:1px solid var(--border-strong);color:var(--text-2);white-space:nowrap;
}
.badge--teal,.status-badge.paid{background:var(--tint-primary);color:var(--primary);border-color:var(--primary)}
.badge--gray,.status-badge.pending{background:var(--surface-2);color:var(--text-2);border-color:var(--border-strong)}
.badge--red,.status-badge.rejected,.status-badge.failed,.status-badge.danger{background:var(--tint-danger);color:var(--danger);border-color:var(--danger)}
.badge--blue{background:var(--tint-info);color:var(--info);border-color:var(--info)}
.badge--purple{background:var(--tint-accent);color:var(--accent);border-color:var(--accent)}
.pred-badge--home{background:var(--tint-primary);color:var(--primary);border-color:var(--primary)}
.pred-badge--away{background:var(--tint-info);color:var(--info);border-color:var(--info)}
.pred-badge--draw{background:var(--tint-accent);color:var(--accent);border-color:var(--accent)}
.plan-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-full);font-size:var(--text-xs);font-weight:700;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-2)}
.live-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;
  padding:5px 12px;border-radius:var(--r-full);
  background:var(--tint-primary);color:var(--primary);border:1px solid var(--primary);
}
.live-badge::before{content:'';width:7px;height:7px;border-radius:var(--r-full);background:var(--primary);animation:blink 1.8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.gc-badge{
  padding:4px 10px;border-radius:var(--r-sm);font-size:var(--text-xs);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--border-strong);
}
.gc-badge--hot{background:var(--danger);border-color:var(--danger);color:var(--danger-ink)}
.gc-badge--new{background:var(--info);border-color:var(--info);color:#08131c}

/* ── TABLES ── */
.table-container,.table-responsive,.table-wrapper,.tbl-wrap,.tbl-scroll,.table-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);overflow-x:auto;-webkit-overflow-scrolling:touch;
}
table,.tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
table thead,.tbl thead{background:var(--surface-2)}
table th,.tbl th{
  text-align:left;padding:12px 16px;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.05em;color:var(--text-2);border-bottom:1px solid var(--border-strong);
  white-space:nowrap;
}
table td,.tbl td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
table tbody tr:last-child td,.tbl tbody tr:last-child td{border-bottom:none}
table tbody tr,.tbl tbody tr{transition:background var(--dur-fast)}
table tbody tr:hover,.tbl tbody tr:hover{background:var(--surface-2)}
.amount,.mono,.cell-mono{font-variant-numeric:tabular-nums}
.amount.positive,.positive{color:var(--primary);font-weight:700}
.user-link,.email-link{color:var(--info);font-weight:600;word-break:break-all}
.user-link:hover,.email-link:hover{text-decoration:underline}
.cell-email{word-break:break-all}
.cell-email,.p-card__email{overflow-wrap:anywhere;min-width:0}
.success{color:var(--primary);font-weight:700}
.danger{color:var(--danger);font-weight:700}
.warning{color:var(--accent);font-weight:700}
.referral-cell{display:flex;align-items:center;gap:var(--s2)}
.screenshot-thumb{width:56px;height:40px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border);cursor:zoom-in}
.tbl-foot{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--text-2);flex-wrap:wrap;gap:var(--s2)}
@media(max-width:760px){
  .tbl-wrap:has(.tbl) .tbl,.table-wrap:has(table) table{min-width:0;width:100%;table-layout:fixed}
  .tbl-wrap:has(.tbl) th,.tbl-wrap:has(.tbl) td{padding:10px 8px}
  .tbl-wrap:has(.tbl) .cell-email{max-width:150px}
  .table-wrap td:first-child{overflow-wrap:anywhere;word-break:break-word;max-width:150px}
  .table-wrap .btn-view,.table-wrap .btn-sm{min-height:44px;touch-action:manipulation}
  .p-cards{display:grid}
  .tbl-wrap:has(.tbl){display:none}
  .p-card__top{align-items:flex-start}
  .p-card__actions{width:100%}
  .p-card__actions .btn-act{flex:1;min-width:120px;touch-action:manipulation}
}

/* receipt detail grid (payout modals) */
.receipt-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);padding:0 0 var(--s4)}
.receipt-field{display:flex;flex-direction:column;gap:4px}
.receipt-label{font-size:var(--text-xs);color:var(--text-3);font-weight:600;letter-spacing:.03em}
.receipt-value{font-size:var(--text-sm);font-weight:600;word-break:break-word}
.receipt-actions{display:flex;justify-content:flex-end;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--border);flex-wrap:wrap}

/* ============================================================
   components, part 3 — modals, tabs, plan cards, payment,
   status rails, slip results, ticker
   ============================================================ */

/* ── MODALS ── */
.modal,.modal-overlay,.auth-overlay{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:var(--s4);
  background:var(--scrim);
  opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease-out);
}
.modal.on,.modal-overlay.active,.modal-overlay.on,.auth-overlay.show{display:flex;opacity:1;pointer-events:auto;z-index:var(--z-modal-open)}
.mbox,.modal-card,.auth-card{
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);width:100%;max-width:480px;
  max-height:calc(100dvh - 48px);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-3);
  transform:translateY(12px) scale(.98);transition:transform var(--dur-med) var(--ease-out);
}
.modal.on .mbox,.modal-overlay.active .modal-card,.modal-overlay.on .modal-card,.auth-overlay.show .auth-card{transform:none}
.modal-overlay > .modal{
  position:relative;inset:auto;z-index:1;opacity:1;pointer-events:auto;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);width:100%;max-width:720px;
  max-height:calc(100dvh - 48px);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-3);transform:translateY(12px) scale(.98);
  transition:transform var(--dur-med) var(--ease-out);
}
.modal-overlay.on > .modal,.modal-overlay.active > .modal{transform:none;pointer-events:auto}
/* V1: a CLOSED overlay's inner dialog must never catch taps — the base rule
   above gives .modal-overlay > .modal pointer-events:auto, which overrides
   the closed parent's pointer-events:none and leaves an invisible dead zone
   in the middle of the screen. */
.modal-overlay:not(.on):not(.active) > .modal{pointer-events:none;visibility:hidden}
.mbox__topbar{height:3px;background:var(--primary);flex-shrink:0}
.mbox-head,.modal-header,.modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);flex-shrink:0;
}
.mbox-head__title,.modal-title,.modal__title{
  font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);
  text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:var(--s2);
}
.mbox-head__title .material-symbols-outlined{color:var(--primary)}
.mbox-close,.modal-close,.modal__close{
  width:36px;height:36px;border-radius:var(--r-full);flex-shrink:0;
  border:1px solid var(--border);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;
}
.mbox-close:hover,.modal-close:hover,.modal__close:hover{background:var(--surface-2);color:var(--text)}
.mbox-close .material-symbols-outlined{font-size:1.1rem}
.mbox-body,.modal__body{padding:var(--s5);overflow-y:auto;flex:1}
.modal-body{padding:var(--s5)}
.modal-actions,.modal__foot{padding:var(--s4) var(--s5);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:var(--s2);flex-wrap:wrap}
.modal-message{padding:0 var(--s5) var(--s4);color:var(--text-2);font-size:var(--text-sm)}
.modal-row{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;padding:var(--s2) 0;font-size:var(--text-sm)}
.modal-bg{position:absolute;inset:0}
.auth-card{padding:var(--s7) var(--s6);text-align:center;align-items:center}
.auth-card__icon{font-size:2.4rem;color:var(--primary);margin-bottom:var(--s3)}
.auth-card__icon--warn{color:var(--accent)}
.auth-card__title{font-family:var(--font-display);font-size:var(--text-2xl);text-transform:uppercase;margin-bottom:var(--s2)}
.auth-card__subtitle{color:var(--text-2);font-size:var(--text-sm);margin-bottom:var(--s5);max-width:36ch}
.auth-form{width:100%;display:flex;flex-direction:column;gap:var(--s3);text-align:left}
.auth-form__label{font-size:var(--text-xs);font-weight:600;color:var(--text-2)}
.auth-form__input{width:100%;min-height:44px;padding:11px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text)}
.auth-form__input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--tint-primary);outline:none}
.auth-form__btn{width:100%;min-height:48px;background:var(--primary);color:var(--primary-ink);border-radius:var(--r-md);font-weight:800;display:flex;align-items:center;justify-content:center;gap:var(--s2)}
.auth-form__btn:disabled{opacity:.5;cursor:not-allowed}
.auth-form__spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite}
.auth-back-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4);color:var(--text-2);font-size:var(--text-sm);font-weight:600}
.auth-back-link:hover{color:var(--text)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:calc(var(--z-modal-open) + 10);background:var(--scrim);display:none;align-items:center;justify-content:center;padding:var(--s6)}
.lightbox.on{display:flex}
.lightbox img{max-width:min(920px,92vw);max-height:86vh;border-radius:var(--r-md);border:1px solid var(--border-strong);box-shadow:var(--sh-3)}

/* ── TABS ── */
.tab-bar,.tabbar,.tabs,.chart-tabs{
  display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center;
}
.tab-btn,.mp-tab,.chart-tab{
  min-height:40px;padding:8px 16px;border-radius:var(--r-sm);
  font-size:var(--text-sm);font-weight:600;color:var(--text-2);
  border:1px solid transparent;background:transparent;
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
}
.tab-btn:hover,.mp-tab:hover,.chart-tab:hover{color:var(--text);background:var(--surface-2)}
.tab-btn.active,.mp-tab.active,.chart-tab.on{
  color:var(--primary-ink);background:var(--primary);border-color:var(--primary);font-weight:700;
}
.tab-panel,.mp-tabpanel{display:none}
.tab-panel.active,.mp-tabpanel.active{display:block;animation:modalIn var(--dur-med) var(--ease-out)}
.tab-count{font-size:var(--text-xs);font-weight:700;background:var(--surface-3);border-radius:var(--r-full);padding:2px 8px;font-variant-numeric:tabular-nums}
.tab-btn.active .tab-count{background:rgba(0,0,0,.18);color:inherit}

/* ── PLAN / OPTION CARDS (tcard, ncard, plan-option) ── */
.tlist{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.tcard,.ncard,.plan-option{
  background:var(--surface-2);border:2px solid var(--border-strong);
  border-radius:var(--r-md);padding:var(--s4);cursor:pointer;
  display:flex;align-items:center;gap:var(--s3);
  transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast);
  position:relative;text-align:left;width:100%;
}
.tcard:hover,.ncard:hover,.plan-option:hover{border-color:var(--primary)}
.tcard.sel,.ncard.sel,.plan-option.selected,.plan-option.active{
  border-color:var(--primary);background:var(--tint-primary);
  box-shadow:0 0 0 3px rgba(225,6,0,.22),0 10px 28px rgba(0,0,0,.45);
}
/* selected check badge */
.tcard.sel::after,.ncard.sel::after{
  content:'✓';flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--primary);color:#fff;font-weight:800;font-size:.85rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(225,6,0,.55);
}
/* ── COUNTRY FLAG BADGES (emoji-proof: pure CSS, always renders) ── */
.flag-badge{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.8rem;letter-spacing:.06em;color:#fff;
  background:radial-gradient(circle at 30% 25%,#34373d,#141518);
  border:2px solid var(--border-strong);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.flag-badge svg{width:22px;height:22px;display:block}
.tcard.sel .flag-badge,.ncard.sel .flag-badge{
  border-color:var(--primary);box-shadow:0 0 14px rgba(225,6,0,.5);
}
.tcard__icon,.ncard__icon{font-size:1.6rem;flex-shrink:0;color:var(--accent)}
.tcard__body,.ncard__body{flex:1;min-width:0}
.tcard__name,.ncard__name,.plan-name{font-size:var(--text-base);font-weight:700}
.tcard__meta,.ncard__meta,.plan-desc,.plan-info{font-size:var(--text-xs);color:var(--text-2);margin-top:2px}
.tcard__duration{font-size:var(--text-xs);color:var(--text-3)}
.tcard__price{font-family:var(--font-display);font-size:var(--text-lg);color:var(--primary);flex-shrink:0;font-variant-numeric:tabular-nums}
.tcard__best{
  position:absolute;top:-10px;right:12px;
  background:var(--accent);color:var(--accent-ink);
  padding:2px 10px;border-radius:var(--r-sm);
  font-size:var(--text-xs);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
}
.plan-maxmines{font-size:var(--text-xs);color:var(--text-3)}

/* ── PAYMENT SUMMARY BOXES ── */
.pay-box{
  position:relative;overflow:visible;
  background:linear-gradient(135deg,#fff8e8 0%,#fff1d0 48%,#ffe2b5 100%);
  border:2px solid #f59e0b;border-radius:18px;padding:var(--s4);margin-bottom:var(--s4);
  box-shadow:0 12px 28px rgba(180,83,9,.14),inset 0 1px 0 rgba(255,255,255,.8);
  animation:paymentAttention 1.8s ease-in-out infinite;
}
.pay-box::before{content:'PAYMENT DETAILS';position:absolute;top:-13px;right:16px;padding:5px 10px;border-radius:999px;background:#b45309;color:#fff;font-size:.62rem;font-weight:900;letter-spacing:.1em;box-shadow:0 4px 12px rgba(180,83,9,.22)}
.pay-row{display:flex;justify-content:space-between;gap:var(--s3);padding:8px 0;font-size:var(--text-sm);font-variant-numeric:tabular-nums;align-items:center}
.pay-row strong{color:#431407;font-weight:900;text-align:right}
.pay-box .pay-row{border-bottom:1px solid rgba(180,83,9,.16)}
.pay-box .pay-row:last-child{border-bottom:0}
.pay-box .pay-row span{color:#92400e;font-weight:600}
.pay-box .pay-row strong{color:#431407;font-weight:900;overflow-wrap:anywhere;min-width:0}
.pay-box .pw-copy-btn{width:auto;min-width:42px;height:38px;margin-left:8px;background:#fff7ed;border:1px solid #f59e0b;color:#92400e;border-radius:10px;flex-shrink:0}
.pay-box .pw-copy-btn:hover,.pay-box .pw-copy-btn.copied{background:#f59e0b;border-color:#b45309;color:#431407;transform:translateY(-1px)}
.pay-box .copy-btn-label{font-size:.7rem;font-weight:800}
@media (prefers-reduced-motion:reduce){.pay-box{animation:none}}
.pw-box{
  background:var(--tint-accent);border:1px dashed var(--accent);
  border-radius:var(--r-md);padding:var(--s4);margin:var(--s3) 0;text-align:center;position:relative;
}
.pw-box__lbl{font-size:var(--text-sm);font-weight:600;color:var(--text-2);margin-bottom:var(--s2)}
.pw-box__val{font-size:var(--text-base);font-weight:700;color:var(--accent);word-break:break-all;font-variant-numeric:tabular-nums}
.netlist{display:flex;flex-direction:column;gap:var(--s2)}
.country-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.country-section{margin-bottom:var(--s5)}
.country-section__head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.country-section__flag{font-size:1.3rem}
.country-section__label{font-weight:700}
.country-section__total{margin-left:auto;font-size:var(--text-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
.country-flag{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;font-size:.72rem;font-weight:800;letter-spacing:.04em;color:var(--text);background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:.15rem .4rem;margin-right:.5rem}

/* ── STATUS BANNERS / STEP RAILS / TIMERS ── */
.status-banner{
  border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s4);
  font-size:var(--text-sm);font-weight:600;display:flex;gap:var(--s3);align-items:flex-start;
  border:1px solid var(--border-strong);line-height:1.5;
}
.status-banner--ok{background:var(--tint-primary);border-color:var(--primary);color:var(--text)}
.status-banner--pending{background:var(--tint-accent);border-color:var(--accent);color:var(--text)}
.status-banner--fail{background:var(--tint-danger);border-color:var(--danger);color:var(--text)}
.status-rej{
  background:var(--tint-danger);border:1px solid var(--danger);
  color:var(--text);padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  font-size:var(--text-sm);margin-bottom:var(--s3);display:none;line-height:1.5;
}
.status-rej.on{display:block}
.step-rail{display:flex;gap:var(--s2);margin:var(--s5) 0;flex-wrap:wrap}
.session-timer{
  display:flex;align-items:center;gap:var(--s4);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s4) var(--s5);margin-bottom:var(--s5);flex-wrap:wrap;
}
.session-timer__time{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:1px}
.session-timer__label{font-size:var(--text-xs);color:var(--text-2);font-weight:600}
.session-timer__scans{margin-left:auto;font-size:var(--text-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
.waiting-dots{display:flex;gap:5px;justify-content:center;margin:var(--s3) 0}
.wd{width:8px;height:8px;border-radius:var(--r-full);background:var(--primary);animation:wdBounce 1.3s infinite}
.wd:nth-child(2){animation-delay:.18s}.wd:nth-child(3){animation-delay:.36s}
@keyframes wdBounce{0%,80%,100%{transform:scale(.5);opacity:.35}40%{transform:scale(1.2);opacity:1}}

/* ── SLIP SCAN RESULTS ── */
.results-wrap{display:flex;flex-direction:column;gap:var(--s4)}
.slip{
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-md);overflow:hidden;
}
.slip-header{padding:var(--s5);border-bottom:1px dashed var(--border-strong)}
.slip-header__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.slip-header__brand{font-family:var(--font-display);font-size:var(--text-lg);text-transform:uppercase;letter-spacing:.5px}
.slip-header__badge{font-size:var(--text-xs);font-weight:700;padding:4px 10px;border-radius:var(--r-full);background:var(--tint-primary);color:var(--primary);border:1px solid var(--primary)}
.slip-header__stats{display:flex;gap:var(--s4);flex-wrap:wrap}
.slip-stat{display:flex;flex-direction:column;gap:2px}
.slip-stat__val{font-family:var(--font-display);font-size:var(--text-xl);font-variant-numeric:tabular-nums}
.slip-stat__lbl{font-size:var(--text-xs);color:var(--text-2)}
.slip-body{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.slip-tear{border-top:2px dashed var(--border-strong);margin:0;position:relative}
.slip-tear--bottom{margin-top:var(--s2)}
/* ── pick cards (slip scan results): stacked card, not an inline row ── */
.pick-row{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4);margin-bottom:var(--s3);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);
  animation:pickIn .45s var(--ease-out) both;
}
.pick-row:last-child{margin-bottom:0}
@keyframes pickIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pick-row__num{
  font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary);
}
/* full match name duplicates the teams block below — hidden to reduce clutter */
.pick-row__match{display:none}
.pick-teams{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);
}
.pick-team{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick-team--away{align-items:flex-end;text-align:right}
.pick-team__role{font-size:var(--text-xs);color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.pick-team__name{font-weight:800;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pick-team__name--winner{color:var(--primary)}
.pick-team__name--draw{color:var(--accent)}
.pick-vs{color:var(--text-3);font-size:var(--text-xs);font-weight:800}
.pick-reason{font-size:var(--text-xs);color:var(--text-2);line-height:1.5}
.pred-badge-wrap{display:flex;align-items:center;gap:var(--s3)}
.pick-row .pred-badge{
  width:44px;height:44px;flex-shrink:0;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;font-weight:800;padding:0;
}
.pred-info{flex:1;min-width:0}
.slip-pick-chip{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;flex-shrink:0;
  background:var(--surface-3);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:var(--s2) var(--s3);
}
.slip-pick-chip__lbl{font-size:var(--text-xs);color:var(--text-3)}
.slip-pick-chip__val{font-weight:700;font-size:var(--text-sm)}
.slip-footer{padding:var(--s4) var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);background:var(--surface-2);flex-wrap:wrap}
.slip-footer__logo{display:flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--text-sm)}
.slip-footer__note{font-size:var(--text-xs);color:var(--text-3)}
.slip-thumb{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);display:flex;gap:var(--s3);align-items:center}
.slip-thumb__body{flex:1}
.slip-thumb__title{font-weight:700;font-size:var(--text-sm)}
.slip-thumb__sub{font-size:var(--text-xs);color:var(--text-2)}
.slip-thumb{max-width:100%;overflow:hidden}
.slip-thumb img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex:none;display:block}
.slip-thumb>div{flex:1;min-width:0}
.pred-info{display:flex;flex-direction:column;gap:2px}
.pred-info__label{font-size:var(--text-xs);color:var(--text-3)}
.pred-info__outcome{font-weight:800;font-size:var(--text-base)}
.pred-info__winner{font-size:var(--text-sm);color:var(--text-2)}
.pred-info__winner--home{color:var(--primary)}
.pred-info__winner--away{color:var(--info)}
.pred-info__winner--draw{color:var(--accent)}
.acc-wrap{display:flex;flex-direction:column;gap:6px}
.acc-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.acc-label{font-size:var(--text-xs);color:var(--text-2);font-weight:600}
.acc-pct{font-weight:800;font-variant-numeric:tabular-nums}
.acc-bar-track{flex:none;width:100%;height:8px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden}
.acc-bar-fill{height:100%;border-radius:var(--r-full);background:var(--primary);transition:width .8s var(--ease-out)}
.acc-bar-fill--home{background:var(--primary)}
.acc-bar-fill--away{background:var(--info)}
.acc-bar-fill--draw{background:var(--accent)}
.raw-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--s3);font-size:var(--text-xs);color:var(--text-2);overflow-x:auto;white-space:pre-wrap;word-break:break-word}

/* ── RESULTS WIRE TICKER ── */
.wire{
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-md);overflow:hidden;min-height:48px;
  display:flex;align-items:stretch;margin-bottom:var(--s5);
}
.wire__label{
  flex-shrink:0;background:var(--accent);color:var(--accent-ink);
  padding:0 var(--s4);display:flex;align-items:center;gap:6px;
  font-size:var(--text-xs);font-weight:800;
}
.wire__track{flex:1;overflow:hidden;display:flex;align-items:center;
  mask-image:linear-gradient(to right,transparent,black 4%,black 96%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,black 4%,black 96%,transparent);
}
.wire__scroll{display:flex;gap:var(--s7);padding:0 var(--s4);white-space:nowrap;align-items:center;animation:tickScroll 30s linear infinite}
@keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wire__item,.wchip{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-sm);color:var(--text-2)}
.wire__dot,.wchip__dot{width:5px;height:5px;border-radius:var(--r-full);background:var(--text-3);flex-shrink:0}
.wire__item b,.wchip b{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.wire__item i,.wchip i{color:var(--text-3);font-style:normal}

/* ── notification bell ── */
.notif-bell{
  position:fixed;top:14px;right:14px;z-index:var(--z-nav);
  width:44px;height:44px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:var(--text);
  box-shadow:var(--sh-1);
}
.notif-bell__badge{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;
  border-radius:var(--r-full);background:var(--danger);color:var(--danger-ink);
  font-size:var(--text-xs);font-weight:800;display:flex;align-items:center;justify-content:center;
  padding:0 5px;
}

/* ============================================================
   components, part 3 — legacy compatibility
   Runtime-resolved variants (template literals) and admin
   console stat-icon aliases, restyled in the new identity.
   ============================================================ */

/* ── status-driven badge variants (badgeCls(status)) ── */
.badge--paid{background:var(--tint-primary);color:var(--primary)}
.badge--pending{background:var(--tint-accent);color:var(--accent)}
.badge--rejected{background:var(--tint-danger);color:var(--danger)}
.badge--failed{background:var(--tint-danger);color:var(--danger)}
.badge--approved{background:var(--tint-primary);color:var(--primary)}
.badge--awaiting_payment{background:var(--tint-accent);color:var(--accent)}
.badge--used{background:var(--tint-info);color:var(--info)}
.badge--expired{background:var(--surface-2);color:var(--text-3)}

/* ── partition-count chips (superadmin) ── */
.pc--pending{background:var(--tint-accent);color:var(--accent)}
.pc--approved{background:var(--tint-primary);color:var(--primary)}
.pc--rejected{background:var(--tint-danger);color:var(--danger)}
.pc--used{background:var(--tint-info);color:var(--info)}

/* ── stat icon color aliases (stat-icon--${cls}) ── */
.stat-icon--green{background:var(--tint-primary);color:var(--primary)}
.stat-icon--red{background:var(--tint-danger);color:var(--danger)}
.stat-icon--yellow{background:var(--tint-accent);color:var(--accent)}
.stat-icon--blue{background:var(--tint-info);color:var(--info)}
.stat-icon--teal{background:var(--tint-primary);color:var(--primary)}
.stat-icon--purple{background:var(--tint-info);color:var(--info)}

/* ── page head kicker ── */
.page-kicker{font-size:var(--text-sm);color:var(--text-3);margin:0 0 var(--s1)}

/* ── card head row (title + actions) ── */
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.card__head .card__title{margin:0}

/* ── small button ── */
.btn--sm{padding:8px 14px;font-size:var(--text-sm);min-height:36px}

/* ── form grid ── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3)}
.field--full{grid-column:1/-1}
.form-note{margin-top:var(--s3);font-size:var(--text-sm);color:var(--text-2);min-height:1.25rem}

/* ============================================================
   REDLINE v2 signature — black / red / grey identity details.
   Appended 2026-10-01. Sharp, aggressive, no decoration.
   ============================================================ */

/* display type: Chakra Petch wants tight tracking */
h1,h2,h3,.display{letter-spacing:.01em}
.section-title,.partition-head__title,.partition-head h3,
.slip-header__brand,.hub-brand{letter-spacing:.04em}

/* soft pill buttons — glowing red CTA */
.btn,.sbtn,.btn-primary,.btn-solid,.btn-approve{
  box-shadow:0 6px 20px rgba(225,6,0,.35),0 2px 6px rgba(0,0,0,.45);
  border-radius:var(--r-full);
  text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-body);
}
.btn:hover,.sbtn:hover,.btn-primary:hover,.btn-solid:hover,.btn-approve:hover{
  transform:translateY(-2px);box-shadow:0 10px 30px rgba(225,6,0,.5),0 4px 10px rgba(0,0,0,.45);
}
.btn:active,.sbtn:active,.btn-primary:active,.btn-solid:active,.btn-approve:active{
  transform:translateY(0);box-shadow:0 3px 10px rgba(225,6,0,.3);
}
.btn-secondary,.btn-outline,.btn-ghost,.btn--ghost,.gbtn{border-radius:var(--r-full)}

/* redline card — red top edge for featured panels */
.card--redline{position:relative;border-top:3px solid var(--primary)}
.card--redline::after{
  content:'';position:absolute;top:-3px;right:18px;width:44px;height:3px;
  background:var(--text);opacity:.85;
}

/* red kicker for section eyebrows */
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);
}
.kicker::before{content:'';width:22px;height:2px;background:var(--primary)}

/* scoreboard numerals — tabular, never mono */
.num,.tcard__price,.slip-stat__val,.stat__val,.kpi__val{font-variant-numeric:tabular-nums}

/* live dot — hot red pulse */
.dot--live,.live-dot{background:var(--primary-hot);box-shadow:0 0 0 0 rgba(255,46,31,.55);animation:livePing 1.6s infinite}
@keyframes livePing{
  0%{box-shadow:0 0 0 0 rgba(255,46,31,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,46,31,0)}
  100%{box-shadow:0 0 0 0 rgba(255,46,31,0)}
}
@media (prefers-reduced-motion:reduce){
  .dot--live,.live-dot{animation:none}
}

/* red focus for destructive */
.btn-danger:focus-visible,.btn-reject:focus-visible{outline-color:var(--danger)}

/* table head — grey caps, red sort hint */
th{letter-spacing:.08em}
tbody tr:hover{background:rgba(225,6,0,.05)}

/* sidebar active — red bar */
.nav-link.active,.sb-item.active{box-shadow:inset 3px 0 0 var(--primary)}

/* inputs — sharp, red focus edge */
input,select,textarea{border-radius:var(--r-sm)}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}

/* auth cards — redline top */
.auth-card{border-top:3px solid var(--primary)}

/* ticket / slip — red perforation edge */
.slip,.ticket{border-top:3px solid var(--primary)}

/* ============================================================
   MOBILE SCAN RESULT REFINEMENT
   Quiet hierarchy, no numbered prediction bubbles, clear AI signal.
   ============================================================ */
@media (max-width:640px){
  .results-wrap{gap:12px}
  .slip{border-radius:20px;border-color:var(--gp-line-strong);box-shadow:0 12px 30px rgba(0,0,0,.28)}
  .slip-header{padding:18px 16px 16px;background:linear-gradient(135deg,rgba(225,6,0,.12),transparent 58%),var(--surface)}
  .slip-header__top{align-items:flex-start;margin-bottom:18px}
  .slip-header__brand{gap:8px;font-family:var(--font-body);font-size:.82rem;font-weight:900;letter-spacing:.11em}
  .slip-header__brand .material-symbols-outlined{color:var(--primary)}
  .slip-header__badge{padding:5px 9px;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
  .slip-header__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .slip-stat{padding:10px 8px;background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:12px;min-width:0}
  .slip-stat__val{font-size:1.35rem;line-height:1.05}
  .slip-stat__lbl{font-size:.62rem;line-height:1.25;margin-top:4px}
  .slip-body{padding:12px;background:var(--gp-ink);gap:10px}
  .pick-row{gap:12px;padding:15px 13px;margin:0;border-radius:16px;background:var(--surface);border-color:var(--border-strong);box-shadow:0 7px 18px rgba(0,0,0,.2)}
  .pick-row__num{display:none}
  .pick-row__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
  .pick-row__eyebrow{font-size:.61rem;font-weight:900;letter-spacing:.14em;color:var(--primary)}
  .pick-row__match{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3);font-size:.68rem;text-align:right}
  .pick-teams{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:7px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .pick-team{gap:5px}
  .pick-team--away{align-items:flex-end;text-align:right}
  .pick-team__role{font-size:.59rem;letter-spacing:.12em}
  .pick-team__name{font-size:.93rem;line-height:1.2;white-space:normal;overflow:visible;text-overflow:clip}
  .pick-vs{font-size:.62rem;padding-top:13px}
  .pred-badge{display:none!important}
  .pred-badge-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
  .pred-info{gap:3px;min-width:0}
  .pred-info__label{font-size:.61rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}
  .pred-info__winner{font-size:1.02rem;line-height:1.2;overflow-wrap:anywhere}
  .pred-info__outcome{display:inline-flex;width:max-content;margin-top:2px;padding:4px 8px;border-radius:999px;background:var(--tint-primary);color:var(--primary);font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .pred-info__winner--away{color:var(--info)}
  .pred-info__winner--draw{color:var(--accent)}
  .slip-pick-chip{max-width:110px;padding:8px 9px;border-radius:10px;align-items:flex-end}
  .slip-pick-chip__lbl{font-size:.57rem;text-transform:uppercase;letter-spacing:.06em}
  .slip-pick-chip__val{font-size:.75rem;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acc-wrap{gap:7px}
  .acc-label{font-size:.66rem}
  .acc-pct{font-size:.76rem;font-weight:900}
  .acc-bar-track{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}
  .acc-bar-fill{border-radius:999px}
  .pick-reason{padding-top:2px;color:var(--text-2);font-size:.72rem;line-height:1.55}
  .slip-footer{padding:14px 16px;align-items:flex-start}
  .slip-footer__note{font-size:.62rem;line-height:1.45}
  .slip-footer__logo{font-size:.68rem;letter-spacing:.04em}
}

/* Premium AI response hero */
.result-hero{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(225,6,0,.18),rgba(225,6,0,.035) 54%,var(--surface));border:1px solid rgba(225,6,0,.36);border-radius:20px;padding:18px 16px 15px;box-shadow:0 14px 32px rgba(0,0,0,.3)}
.result-hero::after{content:'';position:absolute;width:150px;height:150px;right:-68px;top:-74px;border:1px solid rgba(255,255,255,.11);border-radius:50%;box-shadow:0 0 0 18px rgba(255,255,255,.025),0 0 0 38px rgba(255,255,255,.018);pointer-events:none}
.result-hero__topline,.result-hero__meter-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.result-hero__topline{margin-bottom:15px;font-size:.59rem;font-weight:900;letter-spacing:.13em}
.result-hero__live{display:inline-flex;align-items:center;gap:6px;color:var(--primary)}
.result-hero__live i{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(225,6,0,.16);animation:blink 1.8s infinite}
.result-hero__scan{color:var(--text-3)}
.result-hero__content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px}
.result-hero__title{max-width:245px;margin:0 0 6px;font-family:var(--font-display);font-size:1.42rem;line-height:1.05;letter-spacing:.01em}
.result-hero__copy{max-width:265px;margin:0;color:var(--text-2);font-size:.7rem;line-height:1.5}
.result-hero__orb{display:flex;align-items:center;justify-content:center;width:50px;height:50px;flex:0 0 50px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(6,6,7,.42);color:var(--primary);transform:rotate(-8deg)}
.result-hero__orb .material-symbols-outlined{font-size:1.55rem;transform:rotate(8deg)}
.result-hero__meter{position:relative;z-index:1;height:6px;margin:18px 0 9px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.result-hero__meter span{display:block;height:100%;min-width:8px;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary-hot));box-shadow:0 0 12px rgba(225,6,0,.7);transition:width .7s var(--ease-out)}
.result-hero__meter-row{position:relative;z-index:1;color:var(--text-3);font-size:.62rem;font-weight:700;letter-spacing:.03em}
.result-hero__meter-row strong{color:var(--text);font-size:.72rem;letter-spacing:.08em}
@media (min-width:641px){
  .result-hero{display:none}
}
@media (max-width:640px){
  .results-wrap>.slip-header{border-radius:0 0 0 0;border-top:0}
  .results-wrap>.slip-tear{display:none}
  .results-wrap>.slip-footer{border-radius:0 0 18px 18px}
  .results-wrap>.slip-body{border-left:1px solid var(--border-strong);border-right:1px solid var(--border-strong)}
}