/* ==========================================================================
   GIG Kuwait Design System — component library (PRD Appendix A.6 / A.7)

   Load order (A.8): tokens/fonts, colors, typography, spacing, shape, base,
   then this file, then /assets/js/_ds_bundle.js. Page CSS references tokens
   only via var(--*).

   Two class families live here:
     1. The platform's existing component contract (.button, .ulabel, .card,
        .form-*, .global-table, .stat-tile, .t-header, .t-timer, .toast,
        .auth-*, utilities). Kept name-for-name so every screen re-skins
        without markup changes; every rule below is GIG styling.
     2. GIG-native components (.gig-*) for the trader site, lot room, live
        control and TV: StatusBadge, Countdown, KpiTile, SectionHeading,
        SubNavTabs, LotCard, BidPanel, BidHistory, Toast, Modal.
   ========================================================================== */

/* === Layout ============================================================ */

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
}
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-fluid { width: 100%; padding-inline: var(--gutter); }

/* === Header (glass, 80px) ============================================== */

.t-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: var(--gig-glass-header);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-block-end: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  gap: var(--space-4);
}
.t-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 22px;
  letter-spacing: var(--tracking-display);
  color: var(--text-structure);
}
.t-header__sub { color: var(--text-body); font-size: var(--text-sm); }
.t-header__spacer { flex: 1; }
.t-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-strong);
}
.t-header__nav {
  display: flex;
  gap: var(--space-2);
}
.t-header__link {
  position: relative;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-structure);
}
.t-header__link.is-active::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-end: 4px;
  width: 32px;
  height: 4px;
  background: var(--gig-copper);
  border-radius: 2px;
}
.t-header__lang {
  font-family: var(--font-arabic);
  font-weight: var(--weight-eyebrow);
  color: var(--gig-copper);
  font-size: 16px;
  padding: var(--space-2) var(--space-3);
}

/* === Sub-nav tabs (indigo band, white pill with drop radius) =========== */

.gig-subnav {
  background: var(--gig-indigo);
  height: var(--subnav-h);
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  padding-inline: var(--gutter);
  overflow-x: auto;
}
.gig-subnav__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  color: var(--text-on-dark-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius-drop);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.gig-subnav__tab:hover { color: var(--text-on-dark); text-decoration: none; }
.gig-subnav__tab.is-active {
  background: var(--surface-card);
  color: var(--text-structure);
}
[dir="rtl"] .gig-subnav__tab { border-radius: 0 38px; }

/* === Project strip (context bar on sand) =============================== */

.project-strip {
  background: var(--surface-band);
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.project-strip__title {
  background: var(--gig-indigo-a08);
  color: var(--text-structure);
  font-weight: var(--weight-strong);
  padding: var(--space-4) var(--space-6);
  display: block;
  font-size: 17px;
  border-radius: var(--radius-md);
}

/* === Section heading (copper eyebrow + rule, indigo title) ============= */

.gig-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-heading);
  margin: 0 0 var(--space-2);
}
.gig-eyebrow::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--text-heading);
  margin-block-start: var(--space-2);
}
.gig-section-heading { margin-block-end: var(--space-6); }
.gig-section-heading h2, .gig-section-heading h3 { margin-block-end: var(--space-2); }
.gig-section-heading .lead { font-size: var(--text-lead); color: var(--text-body); max-width: 66ch; }

/* === Buttons (pill, 40–48px) =========================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-body);
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease);
}
.button:hover:not(:disabled) { text-decoration: none; filter: brightness(0.92); box-shadow: var(--shadow-sm); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.button:focus-visible { outline: 2px solid var(--gig-indigo); outline-offset: 2px; box-shadow: none; }

/* Primary: mint fill, white text, indigo backing on light surfaces */
.button--primary,
.button--success {
  background: var(--action-primary);
  color: var(--text-on-dark);
  border-color: var(--action-primary);
  box-shadow: inset 0 0 0 1px var(--gig-indigo-a12);
}
.button--primary:hover:not(:disabled),
.button--success:hover:not(:disabled) { background: var(--action-primary-hover); border-color: var(--action-primary-hover); filter: none; }

/* Secondary: indigo outline */
.button--primary-bordered {
  background: transparent;
  color: var(--text-structure);
  border-color: var(--gig-indigo);
}
.button--primary-bordered:hover:not(:disabled) { background: var(--gig-indigo-a08); filter: none; }

/* Ghost: indigo text */
.button--no-border,
.button--ghost {
  background: transparent;
  color: var(--text-structure);
  border-color: transparent;
}
.button--ghost { border-color: var(--border-hairline); background: var(--surface-card); }
.button--ghost:hover:not(:disabled), .button--no-border:hover:not(:disabled) { background: var(--gig-indigo-a08); filter: none; box-shadow: none; }

/* Light: canvas fill, body text */
.button--light {
  background: var(--surface-page);
  color: var(--text-body);
  border-color: var(--border-hairline);
}

/* Destructive: coral outline */
.button--danger {
  background: transparent;
  color: var(--gig-coral);
  border-color: var(--gig-coral);
}
.button--danger:hover:not(:disabled) { background: var(--gig-coral); color: var(--text-on-dark); filter: none; }

.button--sm { min-height: 36px; font-size: var(--text-sm); padding: 0 var(--space-4); }
.button--block { width: 100%; }

/* === Status badges (A.3) =============================================== */

.ulabel,
.gig-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-eyebrow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: var(--state-pending-bg);
  color: var(--state-pending-fg);
}
.ulabel--sm { height: 20px; padding: 0 8px; font-size: 10px; }
.ulabel--success, .ulabel--lowest, .gig-badge--live, .gig-badge--sold   { background: var(--state-live-bg); color: var(--text-on-dark); }
.ulabel--warn, .gig-badge--paused                                        { background: var(--state-paused-bg); color: var(--text-on-dark); }
.ulabel--danger, .gig-badge--outbid                                      { background: var(--gig-coral); color: var(--text-on-dark); }
.ulabel--new, .gig-badge--waiting                                        { background: var(--state-waiting-bg); color: var(--text-on-dark); }
.ulabel--border-darkblue, .gig-badge--scheduled {
  background: transparent; color: var(--state-scheduled-fg);
  box-shadow: inset 0 0 0 1.5px var(--gig-indigo);
}
.ulabel--border-white, .gig-badge--ended { background: var(--state-ended-bg); color: var(--state-ended-fg); }
.gig-badge--pending { background: var(--state-pending-bg); color: var(--state-pending-fg); }
.gig-badge--leading { background: var(--surface-success); color: var(--state-leading-fg); }

/* Live variant carries a 6px pulsing dot */
.gig-badge--live::before,
.ulabel--success.is-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: gig-pulse 1.4s ease-in-out infinite;
}
@keyframes gig-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

/* === Cards (24px radius, lift on hover) ================================ */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card--inert:hover, .card--inert { transform: none; box-shadow: var(--shadow-xs); }
.card__title { font-size: var(--text-h3); font-weight: var(--weight-strong); color: var(--text-strong); margin: 0 0 var(--space-2); }
.card__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; color: var(--text-body); font-size: var(--text-sm); }

/* KPI tile: eyebrow label, 40px indigo display number, gray sub-line */
.stat-tile,
.gig-kpi {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-xs);
}
.stat-tile__label, .gig-kpi__label {
  color: var(--text-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.stat-tile__value, .gig-kpi__value {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h2);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--text-structure);
  font-variant-numeric: tabular-nums;
}
.gig-kpi__sub { color: var(--text-muted); font-size: var(--text-sm); }

/* Lot card: image with corner wedge and indigo overlay */
.gig-lot-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gig-lot-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gig-lot-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--gig-indigo-800);
  border-radius: var(--radius-card-mask);
  overflow: hidden;
}
.gig-lot-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-lot-card__media::after { content: ""; position: absolute; inset: 0; background: var(--gig-overlay-photo); pointer-events: none; }
.gig-lot-card__badge { position: absolute; top: var(--space-3); inset-inline-start: var(--space-3); z-index: 1; }
.gig-lot-card__body { padding: var(--space-5) var(--space-6) var(--space-6); display: grid; gap: var(--space-2); }
.gig-lot-card__title { font-size: var(--text-h3); font-weight: var(--weight-strong); color: var(--text-strong); margin: 0; }
.gig-lot-card__meta { color: var(--text-body); font-size: var(--text-sm); }
.gig-lot-card__prices { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-block-start: var(--space-2); }

/* === Prices ============================================================ */

.gig-price, .price {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  white-space: nowrap;
}
.gig-price__cur { font-size: 0.7em; font-weight: var(--weight-medium); color: var(--text-body); margin-inline-end: 0.25em; }
.gig-price--lg { font-size: 32px; }
.gig-price--leading { color: var(--state-leading-fg); }

/* === Forms (pill inputs, 48px) ========================================= */

.form-group { display: block; margin-block-end: var(--space-4); }
.form-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin-block-end: 6px; }
.form-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea.form-input { height: auto; min-height: 96px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); resize: vertical; }
select.form-input { padding-inline-end: var(--space-8); }
.form-input:focus { outline: none; border-color: var(--gig-indigo); box-shadow: 0 0 0 3px var(--gig-indigo-a18); }
.form-input--lg { height: 56px; font-size: var(--text-lead); }
.form-input::placeholder { color: var(--text-muted); }
.form-input:disabled { background: var(--gig-gray-100); color: var(--text-muted); }
.form-input.is-error { border-color: var(--gig-coral); box-shadow: 0 0 0 3px var(--gig-coral-a12); }
.form-input--bid {
  font-size: 20px;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: start;
}
.form-help  { font-size: var(--text-sm); color: var(--text-muted); margin-block-start: 6px; }
.form-error { font-size: var(--text-sm); color: var(--gig-coral); margin-block-start: 6px; }

/* Increment chips (+1 / +2 / +5) */
.gig-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--gig-indigo);
  background: transparent; color: var(--text-structure);
  font-size: var(--text-sm); font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.gig-chip:hover, .gig-chip.is-active { background: var(--gig-indigo-a08); }

/* === Data tables (indigo header, 13px cells) =========================== */

.global-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  background: var(--surface-card);
}
.global-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gig-indigo);
  color: var(--text-on-dark);
  font-weight: var(--weight-strong);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  text-align: start;
  border: none;
}
.global-table thead th:first-child { border-start-start-radius: var(--radius-md); }
.global-table thead th:last-child  { border-start-end-radius: var(--radius-md); }
.global-table tbody td {
  padding: var(--space-3) var(--space-4);
  color: var(--text-strong);
  border-block-start: 1px solid var(--gig-gray-100);
  vertical-align: middle;
}
.global-table tbody tr:nth-child(odd) td { background: transparent; }
.global-table tbody tr:hover td { background: var(--surface-page); }
.global-table tbody tr.is-lowest td,
.global-table tbody tr.is-leading td { background: var(--surface-success); }
.global-table tbody tr.is-mine td { font-weight: var(--weight-medium); }
.global-table td.num, .global-table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.table-responsive { overflow-x: auto; border-radius: var(--radius-md); }

.global-table tbody tr.today-day-sep td,
.global-table tbody tr.today-day-sep:nth-child(odd) td {
  background: var(--surface-band);
  border-block-start: 1px solid var(--border-hairline);
  border-inline-start: 4px solid var(--gig-copper);
  padding: var(--space-3) var(--space-4);
  color: var(--text-structure);
  font-weight: var(--weight-eyebrow);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.global-table tbody tr.today-day-sep + tr td { border-block-start: 1px solid var(--border-hairline); }
.today-day-sep__count {
  display: inline-flex; align-items: center;
  background: var(--gig-indigo); color: var(--text-on-dark);
  font-weight: var(--weight-strong); font-size: var(--text-xs);
  padding: 2px 8px; border-radius: var(--radius-pill);
  margin-inline-start: 10px; letter-spacing: 0; text-transform: none;
}

/* === Countdown ========================================================= */

/* GIG Countdown: display face, tabular, indigo; coral in the final 60 s;
   mint flash on extension. Sizes: row 24 / rail 40 / TV 96. */
.gig-countdown {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-structure);
  line-height: 1;
  direction: ltr;
  transition: color var(--dur-fast) var(--ease);
}
.gig-countdown--row  { font-size: 24px; }
.gig-countdown--rail { font-size: 40px; }
.gig-countdown--tv   { font-size: 96px; }
.gig-countdown.is-urgent { color: var(--state-urgent-fg); }
.gig-countdown.is-paused { color: var(--gig-copper); }
.gig-countdown.is-ended  { color: var(--text-muted); }
.gig-countdown.is-extended { animation: gig-flash-mint 300ms var(--ease); }
@keyframes gig-flash-mint {
  0%   { color: var(--gig-mint); }
  100% { color: inherit; }
}

/* Legacy timer pill */
.timer-pill {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  background: var(--gig-indigo); color: var(--text-on-dark);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-display);
  font-size: 22px;
  direction: ltr;
}
.timer-pill .timer-label { font-size: var(--text-xs); font-weight: var(--weight-body); color: var(--text-on-dark-muted); margin-inline-start: 4px; }
.timer-pill.is-warn   { background: var(--gig-copper); }
.timer-pill.is-urgent { background: var(--gig-coral); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Unified countdown card (.t-timer): indigo card, state bar in brand colours */
.t-timer {
  --tt-card-bg: var(--gig-indigo);
  --tt-card-fg: var(--text-on-dark);
  --tt-bar-bg: var(--gig-mint);
  --tt-bar-fg: var(--text-on-dark);
  --tt-pill-bg: rgba(255, 255, 255, 0.18);
  --tt-pill-fg: var(--text-on-dark);
  --tt-icon-bg: rgba(255, 255, 255, 0.12);
  --tt-label-fg: rgba(255, 255, 255, 0.6);
  --tt-sep-fg: rgba(255, 255, 255, 0.45);
  --tt-radius: var(--radius-md);
  --tt-bar-pad-y: 6px; --tt-bar-pad-x: 14px; --tt-bar-font: 12px; --tt-pill-font: 10px;
  --tt-face-pad-y: 14px; --tt-face-pad-x: 18px;
  --tt-digit-size: 36px; --tt-label-size: 10px; --tt-sep-size: 28px;
  --tt-icon-size: 32px; --tt-icon-glyph: 18px; --tt-gap: 14px;

  display: inline-flex;
  flex-direction: column;
  background: var(--tt-card-bg);
  color: var(--tt-card-fg);
  border-radius: var(--tt-radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-width: 0;
}
.t-timer__bar {
  background: var(--tt-bar-bg); color: var(--tt-bar-fg);
  padding: var(--tt-bar-pad-y) var(--tt-bar-pad-x);
  display: flex; align-items: center; gap: 8px;
  font-size: var(--tt-bar-font); font-weight: var(--weight-strong);
  direction: rtl;
}
.t-timer__bar-pill {
  background: var(--tt-pill-bg); color: var(--tt-pill-fg);
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--tt-pill-font); font-weight: var(--weight-eyebrow);
  letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap;
}
.t-timer__bar-text { font-weight: var(--weight-medium); opacity: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-timer__face { display: flex; align-items: center; gap: var(--tt-gap); padding: var(--tt-face-pad-y) var(--tt-face-pad-x); direction: ltr; }
.t-timer__icon { width: var(--tt-icon-size); height: var(--tt-icon-size); border-radius: 50%; background: var(--tt-icon-bg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.t-timer__icon svg { width: var(--tt-icon-glyph); height: var(--tt-icon-glyph); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t-timer__digits { display: flex; align-items: flex-start; gap: 8px; flex: 1; justify-content: center; }
.t-timer__group { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: calc(var(--tt-digit-size) * 1.2); }
.t-timer__digit {
  font-family: var(--font-display);
  font-size: var(--tt-digit-size);
  font-weight: var(--weight-display);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--tt-card-fg);
}
.t-timer__sub { font-size: var(--tt-label-size); color: var(--tt-label-fg); font-weight: var(--weight-medium); letter-spacing: 0.4px; text-transform: uppercase; }
.t-timer__sep { font-family: var(--font-display); font-size: var(--tt-sep-size); color: var(--tt-sep-fg); font-weight: var(--weight-display); line-height: 1; margin-top: calc((var(--tt-digit-size) - var(--tt-sep-size)) / 2 - 2px); animation: t-timer-blink 1s steps(2, start) infinite; }
@keyframes t-timer-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.t-timer--sm { --tt-radius: 10px; --tt-bar-pad-y: 4px; --tt-bar-pad-x: 10px; --tt-bar-font: 10px; --tt-pill-font: 8px; --tt-face-pad-y: 8px; --tt-face-pad-x: 10px; --tt-digit-size: 24px; --tt-label-size: 8px; --tt-sep-size: 18px; --tt-icon-size: 22px; --tt-icon-glyph: 13px; --tt-gap: 8px; }
.t-timer--md { --tt-radius: var(--radius-md); --tt-face-pad-y: 10px; --tt-face-pad-x: 16px; --tt-digit-size: 64px; --tt-label-size: 12px; --tt-sep-size: 46px; --tt-icon-size: 40px; --tt-icon-glyph: 22px; --tt-gap: 14px; }
.t-timer--lg {
  --tt-radius: clamp(12px, 1.6vmin, 24px);
  --tt-bar-pad-y: clamp(6px, 0.9vmin, 12px); --tt-bar-pad-x: clamp(14px, 2vmin, 24px);
  --tt-bar-font: clamp(13px, 1.6vmin, 22px); --tt-pill-font: clamp(10px, 1.2vmin, 16px);
  --tt-face-pad-y: clamp(18px, 2.6vmin, 36px); --tt-face-pad-x: clamp(22px, 3vmin, 42px);
  --tt-digit-size: clamp(60px, 10vmin, 140px); --tt-label-size: clamp(11px, 1.3vmin, 18px);
  --tt-sep-size: clamp(44px, 7vmin, 100px); --tt-icon-size: clamp(48px, 6vmin, 88px);
  --tt-icon-glyph: clamp(26px, 3.4vmin, 50px); --tt-gap: clamp(14px, 2vmin, 32px);
}
.t-timer.is-warn   { --tt-bar-bg: var(--gig-copper); }
.t-timer.is-urgent { --tt-bar-bg: var(--gig-coral); animation: t-timer-pulse 1.2s ease-in-out infinite; }
.t-timer.is-paused { --tt-bar-bg: var(--gig-copper); --tt-card-bg: var(--gig-indigo-800); }
.t-timer.is-paused .t-timer__sep { animation: none; opacity: 0.5; }
.t-timer.is-ended  { --tt-bar-bg: var(--gig-gray-400); --tt-card-bg: var(--gig-gray-700); }
.t-timer.is-ended .t-timer__sep { animation: none; opacity: 0.4; }
@keyframes t-timer-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(234, 122, 108, 0.25); }
  50%      { box-shadow: 0 8px 28px rgba(234, 122, 108, 0.55); }
}
.t-timer--block { display: flex; width: 100%; }
.t-timer--block .t-timer__digits { flex: 1; }

/* === Bid panel and history (lot room rail) ============================= */

.gig-bid-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
}
.gig-bid-panel__high { display: grid; gap: 2px; }
.gig-bid-panel__leader { font-size: var(--text-sm); color: var(--text-body); }
.gig-bid-panel__leader.is-leading { color: var(--state-leading-fg); font-weight: var(--weight-strong); }
.gig-bid-panel__leader.is-outbid  { color: var(--state-outbid-fg);  font-weight: var(--weight-strong); }
.gig-bid-panel__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.gig-bid-history { list-style: none; margin: 0; padding: 0; display: grid; }
.gig-bid-history__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-block-start: 1px solid var(--gig-gray-100);
  font-size: var(--text-sm);
}
.gig-bid-history__row:first-child { border-block-start: 0; }
.gig-bid-history__row.is-mine .gig-bid-history__who::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gig-copper); margin-inline-end: 8px; vertical-align: middle;
}
.gig-bid-history__row.is-cancelled { color: var(--text-muted); text-decoration: line-through; }
.gig-bid-history__amt { font-variant-numeric: tabular-nums; font-weight: var(--weight-strong); color: var(--text-strong); direction: ltr; }
.gig-bid-history__time { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Live control card (indigo-800, 96px timer) */
.gig-control {
  background: var(--gig-indigo-800);
  color: var(--text-on-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-4);
}
.gig-control .gig-countdown { color: var(--text-on-dark); }
.gig-control .gig-countdown.is-urgent { color: var(--gig-coral); }
.gig-control__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* === Legacy live-screen pieces ========================================= */

.live-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 1024px) { .live-grid { grid-template-columns: 2fr 1fr; } }

.alt-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--dur-fast) var(--ease);
}
.alt-card.is-lowest, .alt-card.is-leading { border-color: var(--gig-mint-dark); background: var(--surface-success); }
.alt-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.alt-card__title { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--text-strong); }
.alt-card__price { font-size: 22px; font-weight: var(--weight-strong); color: var(--text-strong); font-variant-numeric: tabular-nums; direction: ltr; }
.alt-card__hint { font-size: var(--text-xs); color: var(--text-muted); }
.alt-card__form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }

.lowest-strip {
  background: var(--gig-indigo);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.lowest-strip .lowest-label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-body); opacity: 0.85; }

.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gig-mint); display: inline-block; }
.connection-dot.is-stale   { background: var(--gig-copper); }
.connection-dot.is-offline { background: var(--gig-coral); }

/* === Toast (indigo-800, colour dot, 4.2s) ============================== */

.toast-stack {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 2147483000;
  display: flex; flex-direction: column;
  pointer-events: none;
  font-family: var(--font-body);
}
.toast {
  position: relative;
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  background: var(--gig-indigo-800);
  color: var(--text-on-dark);
  font-size: var(--text-sm);
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  column-gap: var(--space-3);
  pointer-events: auto;
  overflow: hidden;
  transform: translateY(-100%);
  opacity: 0;
  animation: toastSlideIn 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.toast.is-leaving { animation: toastSlideOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards; }
.toast.is-success { --toast-dot: var(--gig-mint); }
.toast.is-error   { --toast-dot: var(--gig-coral); }
.toast.is-warn    { --toast-dot: var(--gig-copper); }
.toast.is-info    { --toast-dot: var(--gig-mint-light); }
.toast::before {
  content: "";
  position: absolute; inset-inline-start: 0; inset-block: 0;
  width: 4px; background: var(--toast-dot, var(--gig-gray-300));
}
.toast__icon { inline-size: 24px; block-size: 24px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--toast-dot, var(--gig-gray-300)); }
.toast__icon svg { inline-size: 20px; block-size: 20px; display: block; }
.toast__msg { font-size: var(--text-sm); font-weight: var(--weight-medium); color: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
.toast__msg b, .toast__msg strong { font-weight: var(--weight-eyebrow); }
.toast__close { inline-size: 24px; block-size: 24px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 4px; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; transition: background var(--dur-fast) var(--ease); }
.toast__close:hover, .toast__close:focus-visible { background: rgba(255, 255, 255, 0.18); outline: none; }
.toast__progress { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; block-size: 3px; background: rgba(255, 255, 255, 0.22); overflow: visible; }
.toast__progress-bar { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 100%; background: var(--toast-dot, var(--gig-gray-300)); transform: scaleX(1); animation: toastProgressBar 4200ms linear forwards; }
[dir="rtl"] .toast__progress-bar { transform-origin: right center; }
:not([dir="rtl"]) .toast__progress-bar, [dir="ltr"] .toast__progress-bar { transform-origin: left center; }
.toast__progress-dot { position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: 6px; block-size: 6px; margin-block-start: -3px; margin-inline-start: -3px; background: var(--text-on-dark); border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); animation: toastProgressDot 4200ms linear forwards; }
.toast.is-paused .toast__progress-bar, .toast.is-paused .toast__progress-dot { animation-play-state: paused; }
@keyframes toastSlideIn  { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastSlideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes toastProgressBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toastProgressDot { from { inset-inline-start: 0%; } to { inset-inline-start: 100%; } }
@media (max-width: 480px) {
  .toast { min-height: 48px; padding: 10px 12px; grid-template-columns: 24px 1fr 24px; column-gap: 10px; }
}

/* === Modal / drawer ==================================================== */

.gig-modal-scrim { position: fixed; inset: 0; background: var(--gig-scrim); z-index: 900; display: grid; place-items: center; padding: var(--gutter); }
.gig-modal {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: min(560px, 100%);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-4);
}
.gig-modal__title { font-size: var(--text-h2-sm); font-weight: var(--weight-strong); color: var(--text-structure); margin: 0; }
.gig-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* === Auth screen (canvas, decorative circles, card radius 32) ========== */

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
  background:
    radial-gradient(circle at 12% 18%, var(--surface-decor) 0 180px, transparent 181px),
    radial-gradient(circle at 88% 82%, var(--gig-sand) 0 140px, transparent 141px),
    var(--surface-page);
}
.auth-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-12) var(--space-8);
  width: 100%;
  max-width: 440px;
}
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  margin-block-end: var(--space-6);
  color: var(--text-structure);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 26px;
  letter-spacing: var(--tracking-display);
}
.auth-title { text-align: center; margin-block-end: var(--space-2); }
.auth-subtitle { text-align: center; color: var(--text-body); font-size: var(--text-sm); margin-block-end: var(--space-6); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--gig-gray-100); border-radius: var(--radius-pill); padding: 4px; margin-block-end: var(--space-6); }
.auth-tab {
  padding: 10px 16px; border: none; background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-strong);
  color: var(--text-body); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.auth-tab.is-active { background: var(--surface-card); color: var(--text-structure); box-shadow: var(--shadow-xs); }

/* === Password reveal ==================================================== */

.field-wrap { position: relative; display: flex; align-items: center; }
.field-wrap.has-toggle > input { padding-inline-end: 48px; }
.pwd-toggle {
  position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; padding: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); min-width: 32px; min-height: 32px; border-radius: 50%;
}
.pwd-toggle:hover { color: var(--text-structure); }
.pwd-toggle:focus-visible { outline: 2px solid var(--gig-indigo); outline-offset: 2px; }

/* === Footer ============================================================ */

.gig-footer {
  background: var(--gig-indigo);
  color: var(--text-on-dark);
  padding: var(--space-12) var(--gutter);
  margin-block-start: auto;
}
.gig-footer a { color: var(--text-on-dark-muted); }
.gig-footer__social { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--text-on-dark-muted); align-items: center; justify-content: center; }

/* === Help FAB (mint, indigo text) ====================================== */

.help-fab {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  background: var(--gig-mint);
  color: var(--gig-indigo-800);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  font-weight: var(--weight-strong);
  font-size: var(--text-sm);
  z-index: 50;
}

/* === Utilities ========================================================= */

.row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.center { display: flex; align-items: center; justify-content: center; }
.muted { color: var(--text-body); }
.text-faint { color: var(--text-muted); }
.text-success { color: var(--state-leading-fg); }
.text-danger { color: var(--gig-coral); }
.text-primary { color: var(--text-structure); }
.text-copper { color: var(--text-heading); }
.tabular { font-variant-numeric: tabular-nums; }
.text-end { text-align: end; }
.text-center { text-align: center; }
.mt-0 { margin-block-start: 0; } .mt-2 { margin-block-start: var(--space-2); } .mt-4 { margin-block-start: var(--space-4); } .mt-6 { margin-block-start: var(--space-6); }
.mb-0 { margin-block-end: 0; }   .mb-2 { margin-block-end: var(--space-2); }   .mb-4 { margin-block-end: var(--space-4); }   .mb-6 { margin-block-end: var(--space-6); }
.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }

/* Decorative sand band and circles behind content */
.gig-band { background: var(--surface-band); }
.gig-decor { position: relative; isolation: isolate; }
.gig-decor::before {
  content: ""; position: absolute; z-index: -1;
  width: 320px; height: 320px; border-radius: 50%;
  background: var(--surface-decor); opacity: 0.6;
  inset-inline-end: -120px; inset-block-start: -80px;
}