/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM — Retailer Dashboard v4
   Enterprise SaaS | Professional Polish
   Clean whites, deep teal, precise shadows
   Micro-interactions, smooth transitions, mobile-first
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Surfaces */
  --bg:           #F1F4F8;
  --surface:      #FFFFFF;
  --surface-2:    #F5F7FA;
  --surface-3:    #EDF0F5;
  --border:       #E2E7EF;
  --border-md:    #C8D0DC;

  /* Text */
  --text-1:       #0D1B2A;
  --text-2:       #4A5568;
  --text-3:       #8FA0B4;

  /* Brand Accent — deep teal */
  --accent:       #0D7A5F;
  --accent-hover: #0A6450;
  --accent-light: #EAF6F2;
  --accent-mid:   #52C7A0;
  --accent-dark:  #084F3D;
  --accent-border:rgba(13,122,95,.2);

  /* Secondary */
  --blue:         #2563EB;
  --blue-light:   #EFF6FF;
  --blue-border:  #BFDBFE;
  --blue-dark:    #1D4ED8;

  /* Status */
  --success:      #16A34A;
  --success-bg:   #F0FDF4;
  --success-border:#BBF7D0;
  --warning:      #D97706;
  --warning-bg:   #FFFBEB;
  --danger:       #DC2626;
  --danger-bg:    #FEF2F2;
  --danger-border:#FECACA;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(13,27,42,.04);
  --shadow-sm:    0 1px 4px rgba(13,27,42,.06), 0 1px 2px rgba(13,27,42,.04);
  --shadow-md:    0 4px 12px rgba(13,27,42,.08), 0 2px 4px rgba(13,27,42,.04);
  --shadow-lg:    0 12px 28px rgba(13,27,42,.10), 0 4px 8px rgba(13,27,42,.05);
  --shadow-modal: 0 24px 56px rgba(13,27,42,.16), 0 8px 20px rgba(13,27,42,.08);
  --shadow-card:  0 0 0 1px rgba(13,27,42,.05), 0 2px 8px rgba(13,27,42,.06);
  --shadow-accent:0 4px 14px rgba(13,122,95,.24);

  /* Radii */
  --r-xs: 4px; --r-sm: 7px; --r-md: 11px; --r-lg: 15px; --r-xl: 20px; --r-2xl: 26px;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: 'JetBrains Mono', "SF Mono", "Fira Code", Consolas, monospace;

  /* Easing */
  --ease:     cubic-bezier(.25,.46,.45,.94);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Durations */
  --dur-xs: 100ms; --dur-sm: 180ms; --dur-md: 260ms; --dur-lg: 360ms;

  /* Layout */
  --header-h: 62px;
  --page-max: 580px;
  --page-px:  18px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:15px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.app-header {
  position: sticky; top: 0; z-index: 200;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(13,27,42,.06);
  display: flex; align-items: center;
  padding: 0 var(--page-px); gap: 12px;
}
.header-brand { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.header-logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius: var(--r-md);
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0; box-shadow: var(--shadow-accent);
}
.header-logo svg { width:18px; height:18px; fill:white; }
.header-brand-text { min-width:0; }
.header-campaign {
  font-size: .9rem; font-weight: 700; color: var(--text-1);
  letter-spacing: -.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-sub { font-size: .67rem; color: var(--text-3); font-weight: 500; margin-top: -1px; }
.header-right { display:flex; align-items:center; gap: 10px; flex-shrink:0; }

/* User chip — name not phone */
.header-user {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 12px 4px 5px;
}
.header-user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-mid) 0%, var(--accent) 100%);
  display: flex; align-items:center; justify-content:center;
  font-size: .58rem; font-weight: 700; color: white;
  flex-shrink: 0; letter-spacing: .02em;
  font-family: var(--font);
}
.header-user-name {
  font-size: .76rem; font-weight: 600; color: var(--text-1);
  max-width: 110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.btn-signout {
  display: flex; align-items: center; gap: 5px; padding: 7px 13px;
  border: 1px solid var(--border-md); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2);
  font-family: var(--font); font-size: .75rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm), transform var(--dur-xs), box-shadow var(--dur-sm);
}
.btn-signout svg { width:13px; height:13px; stroke:currentColor; flex-shrink:0; }
.btn-signout:hover {
  background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger);
  box-shadow: 0 2px 8px rgba(220,38,38,.12); transform: translateY(-1px);
}
.btn-signout:active { transform: scale(.97); }

/* ── PAGE SHELL ── */
.page-body { padding: 22px var(--page-px) 64px; max-width: var(--page-max); margin: 0 auto; }
.page-center {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px var(--page-px); background: var(--bg);
}

/* ── SECTION LABEL ── */
.section-label {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-3);
  margin-bottom: 10px; margin-top: 26px;
  display: flex; align-items: center; gap: 8px;
}
.section-label::after { content:""; flex:1; height:1px; background: var(--border); }
.section-label:first-child { margin-top: 0; }

/* ══════════════════════════════════════
   CARD
══════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur-md), transform var(--dur-md);
}
.card:hover {
  box-shadow: 0 0 0 1px rgba(13,27,42,.07), 0 6px 20px rgba(13,27,42,.09);
  transform: translateY(-1px);
}
.card-body { padding: 20px; }
.card-row { display: flex; align-items: center; justify-content: space-between; }

/* ══════════════════════════════════════
   TARGET SECTIONS
══════════════════════════════════════ */
.target-block { margin-bottom: 18px; }
.target-block:last-child { margin-bottom: 0; }
.target-block-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.target-block-title {
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-2);
  display: flex; align-items: center; gap: 7px;
}
.target-block-title::before {
  content: ""; width: 3px; height: 13px; border-radius: 2px;
  background: var(--accent); flex-shrink: 0;
}
.target-block-title.overall::before { background: var(--blue); }
.target-divider { border:none; border-top:1px solid var(--border); margin:18px 0; }

/* ── KPI TILES ── */
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.kpi-tile {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px;
  position: relative; overflow: hidden;
  transition: border-color var(--dur-sm), box-shadow var(--dur-sm), transform var(--dur-sm);
}
.kpi-tile::before {
  content: ""; position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px; background: var(--border-md);
  border-radius: 0 2px 2px 0;
}
.kpi-tile.accent::before { background: var(--accent); }
.kpi-tile.blue::before   { background: var(--blue); }
.kpi-tile:hover { border-color: var(--border-md); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.kpi-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 7px; }
.kpi-value { font-size: 1.85rem; font-weight: 800; color: var(--text-1); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.kpi-value.accent { color: var(--accent); }
.kpi-value.blue   { color: var(--blue); }

/* ── PROGRESS ── */
.progress-area { margin-top: 0; }
.progress-meta { display:flex; justify-content:space-between; align-items:center; font-size:.72rem; color:var(--text-3); margin-bottom:7px; }
.progress-meta span:last-child { font-weight:700; color:var(--text-2); }
.progress-track { background:var(--surface-3); border-radius:100px; height:6px; overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); border-radius:100px; transition:width .8s var(--ease-out); max-width:100%; }
.progress-fill.warn   { background:var(--warning); }
.progress-fill.blue   { background:var(--blue); }
.progress-fill.success { background:var(--success); }

/* ── EXPAND HINT ── */
.expand-hint {
  display:flex; align-items:center; gap:8px;
  margin-top:16px; padding:10px 13px;
  background:var(--accent-light); border:1px solid var(--accent-border);
  border-radius:var(--r-sm); cursor:pointer;
  transition:all var(--dur-sm) var(--ease); user-select:none;
}
.expand-hint:hover { background:rgba(13,122,95,.09); border-color:rgba(13,122,95,.35); transform:translateY(-1px); box-shadow:var(--shadow-xs); }
.expand-hint:active { transform:translateY(0); }
.expand-hint-icon-wrap { width:24px; height:24px; background:var(--surface); border:1px solid var(--accent-border); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.expand-hint-icon-wrap svg { width:12px; height:12px; stroke:var(--accent); }
.expand-hint-text { font-size:.75rem; font-weight:500; color:var(--accent-dark); flex:1; }
.expand-hint-arrow { width:18px; height:18px; border:1px solid var(--accent-border); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.expand-hint-arrow svg { width:9px; height:9px; stroke:var(--accent); }

/* ══════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════ */
.form-group { margin-bottom: 15px; }
.form-label { display:block; font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-2); margin-bottom:6px; }
.form-input, .form-select {
  width:100%; height:44px; padding:0 13px;
  border:1.5px solid var(--border-md); border-radius:var(--r-md);
  background:var(--surface); color:var(--text-1);
  font-family:var(--font); font-size:.875rem; outline:none;
  transition:border-color var(--dur-sm), box-shadow var(--dur-sm);
  -webkit-appearance:none; appearance:none;
}
.form-input:focus, .form-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(13,122,95,.14); }
.form-input:hover:not(:focus), .form-select:hover:not(:focus) { border-color:var(--border-md); box-shadow:var(--shadow-xs); }
.form-input::placeholder { color:var(--text-3); }
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  padding-right:36px; cursor:pointer;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:44px; padding:0 20px;
  border-radius:var(--r-md); border:1.5px solid transparent;
  font-family:var(--font); font-size:.875rem; font-weight:600;
  cursor:pointer; transition:all var(--dur-sm) var(--ease);
  white-space:nowrap; outline:none; width:100%; letter-spacing:-.01em;
}
.btn svg { width:16px; height:16px; flex-shrink:0; }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; transform:none !important; }

.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 2px 8px rgba(13,122,95,.22); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:0 4px 16px rgba(13,122,95,.32); transform:translateY(-1px); }
.btn-primary:focus { box-shadow:0 0 0 3px rgba(13,122,95,.25), 0 2px 8px rgba(13,122,95,.22); }
.btn-primary:active { transform:scale(.98); box-shadow:none; }

.btn-secondary { background:var(--surface); color:var(--text-1); border-color:var(--border-md); box-shadow:var(--shadow-xs); }
.btn-secondary:hover { background:var(--surface-2); border-color:var(--accent); color:var(--accent-dark); transform:translateY(-1px); }

.btn-ghost { background:transparent; color:var(--accent); border-color:transparent; }
.btn-ghost:hover { background:var(--accent-light); }

.btn-sm { height:34px; padding:0 13px; font-size:.78rem; width:auto; }

/* ── METHOD TOGGLE ── */
.method-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.method-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:15px 10px;
  border:1.5px solid var(--border-md); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer;
  font-family:var(--font); font-size:.78rem; font-weight:500; color:var(--text-2);
  transition:all var(--dur-sm) var(--ease); width:100%;
}
.method-btn svg { width:20px; height:20px; stroke:var(--text-3); transition:stroke var(--dur-sm); }
.method-btn:hover { border-color:var(--accent); background:var(--accent-light); color:var(--accent-dark); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.method-btn:hover svg { stroke:var(--accent); }
.method-btn.active { border-color:var(--accent); background:var(--accent-light); color:var(--accent-dark); box-shadow:0 0 0 2px rgba(13,122,95,.15); }
.method-btn.active svg { stroke:var(--accent); }
.method-btn:active { transform:scale(.98); }
.method-panel { display:none; animation:slideDown var(--dur-md) var(--ease-out); }
.method-panel.visible { display:block; }

/* ── INVOICE UPLOAD ── */
.invoice-file {
  padding: 8px 13px;
  height: auto;
}
.invoice-file::file-selector-button {
  margin-right: 12px;
  padding: 7px 12px;
  border: 1px solid var(--border-md);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-1);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm);
}
.invoice-file::file-selector-button:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.upload-note {
  font-size: .78rem;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 12px;
}
.upload-hint {
  margin-top: 8px;
  font-size: .7rem;
  color: var(--text-3);
}

/* ── SCAN VIEWPORT ── */
.scan-viewport { background:var(--surface-3); border:1.5px solid var(--border); border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; position:relative; margin-bottom:12px; }
#scannerVideo { width:100%; height:100%; object-fit:cover; display:block; }
.scan-reticle { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.scan-corners { width:42%; aspect-ratio:1; position:relative; }
.scan-corners::before, .scan-corners::after, .scan-corner-bl, .scan-corner-br { content:""; position:absolute; width:18px; height:18px; border-color:var(--accent); border-style:solid; }
.scan-corners::before  { top:0; left:0;  border-width:2.5px 0 0 2.5px; border-radius:2px 0 0 0; }
.scan-corners::after   { top:0; right:0; border-width:2.5px 2.5px 0 0; border-radius:0 2px 0 0; }
.scan-corner-bl { bottom:0; left:0;  border-width:0 0 2.5px 2.5px; border-radius:0 0 0 2px; }
.scan-corner-br { bottom:0; right:0; border-width:0 2.5px 2.5px 0; border-radius:0 0 2px 0; }
.scan-tip { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background:rgba(13,27,42,.62); color:white; font-size:.7rem; padding:4px 12px; border-radius:100px; white-space:nowrap; }
.scan-controls { display:flex; gap:8px; margin-bottom:10px; }

/* ── CODE PREVIEW ── */
.code-preview { display:flex; align-items:center; gap:9px; padding:10px 13px; background:var(--accent-light); border:1px solid var(--accent-border); border-radius:var(--r-sm); margin-top:8px; animation:slideDown var(--dur-sm) var(--ease-out); }
.code-preview-icon { width:16px; height:16px; stroke:var(--accent); flex-shrink:0; }
.code-preview-val  { font-size:.82rem; font-weight:600; color:var(--accent-dark); font-family:var(--mono); flex:1; letter-spacing:.04em; }

/* ── BADGE ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:100px; font-size:.68rem; font-weight:700; line-height:1; letter-spacing:.02em; }
.badge-accent { background:var(--accent-light); color:var(--accent-dark); border:1px solid var(--accent-border); }
.badge-green  { background:var(--success-bg);   color:var(--success);    border:1px solid var(--success-border); }
.badge-blue   { background:var(--blue-light);   color:var(--blue);       border:1px solid var(--blue-border); }
.badge-gray   { background:var(--surface-2);    color:var(--text-2);     border:1px solid var(--border); }

/* ── DIVIDER ── */
.divider { border:none; border-top:1px solid var(--border); margin:16px 0; }

/* ── ALERT ── */
.alert { padding:10px 14px; border-radius:var(--r-md); border:1px solid; font-size:.8rem; line-height:1.5; animation:slideDown var(--dur-md) var(--ease-out); }
.alert-error   { background:var(--danger-bg);  border-color:var(--danger-border); color:var(--danger); }
.alert-success { background:var(--success-bg); border-color:var(--success-border); color:var(--success); }
.alert-info    { background:var(--blue-light);  border-color:var(--blue-border); color:var(--blue); }

/* ══════════════════════════════════════
   MODAL BOTTOM SHEET
══════════════════════════════════════ */
.modal-backdrop {
  position:fixed; inset:0; z-index:300;
  background:rgba(13,27,42,.48);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity var(--dur-md) var(--ease);
}
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal-sheet {
  background:var(--surface); border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  width:100%; max-width:var(--page-max);
  max-height:86vh; overflow-y:auto;
  box-shadow:var(--shadow-modal);
  transform:translateY(32px); transition:transform var(--dur-md) var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom, 8px);
  -webkit-overflow-scrolling:touch;
}
.modal-backdrop.open .modal-sheet { transform:translateY(0); }
.modal-handle { width:38px; height:4px; background:var(--border-md); border-radius:100px; margin:13px auto 6px; }
.modal-header { padding:8px 20px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:1.05rem; font-weight:700; color:var(--text-1); letter-spacing:-.01em; }
.modal-close { width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--dur-sm); }
.modal-close svg { width:12px; height:12px; stroke:var(--text-2); }
.modal-close:hover { background:var(--danger-bg); border-color:var(--danger-border); }
.modal-close:hover svg { stroke:var(--danger); }
.modal-body { padding:18px 20px 24px; }

/* ── TARGET TABLE ── */
.target-table { width:100%; border-collapse:collapse; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); }
.target-table th { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); text-align:left; }
.target-table td { padding:12px 14px; font-size:.84rem; color:var(--text-1); border-bottom:1px solid var(--border); }
.target-table tr:last-child td { border-bottom:none; }
.target-table td:not(:first-child), .target-table th:not(:first-child) { text-align:right; }
.target-table .val { font-weight:700; font-variant-numeric:tabular-nums; }
.target-table .ach { color:var(--accent); font-weight:700; }
.target-table tr.row-highlight td { background:var(--accent-light); }
.target-table tr.row-highlight td:first-child { border-left:3px solid var(--accent); }

/* ══════════════════════════════════════
   LOADER
══════════════════════════════════════ */
.loader-overlay { position:fixed; inset:0; z-index:9999; background:rgba(255,255,255,.78); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; }
.loader-overlay.active { display:flex !important; }
.spinner { width:28px; height:28px; border:2.5px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .65s linear infinite; }

/* ══════════════════════════════════════
   SPIN PAGE
══════════════════════════════════════ */
.spin-page { min-height:100vh; display:flex; flex-direction:column; background:var(--bg); }
.spin-main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px var(--page-px) 40px; gap:24px; }
.spin-info-card { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:14px 20px; display:flex; }
.spin-info-item { flex:1; text-align:center; }
.spin-info-item + .spin-info-item { border-left:1px solid var(--border); }
.spin-info-label { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-bottom:4px; }
.spin-info-value { font-size:.85rem; font-weight:600; color:var(--text-1); font-family:var(--mono); }

/* ── Wheel — no center circle ── */
.wheel-wrap { display:flex; flex-direction:column; align-items:center; }
.wheel-pointer-top {
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:20px solid var(--text-1);
  margin-bottom:-2px; position:relative; z-index:5;
  filter:drop-shadow(0 2px 4px rgba(13,27,42,.25));
}
.wheel-disc {
  width:270px; height:270px; border-radius:50%;
  border:3px solid var(--border-md);
  background:var(--surface-3) center/cover no-repeat;
  transition:transform 4s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 8px 32px rgba(13,27,42,.14), 0 2px 8px rgba(13,27,42,.08);
  position:relative;
}
/* Center circle completely removed */
.wheel-disc::after { display:none !important; }

.spin-cta { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:420px; }

/* Result */
.result-banner { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:24px; text-align:center; display:none; animation:fadeUp var(--dur-lg) var(--ease-out); }
.result-banner.visible { display:block; }
.result-check { width:48px; height:48px; border-radius:50%; background:var(--success-bg); border:1.5px solid var(--success-border); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.result-check svg { width:22px; height:22px; stroke:var(--success); stroke-width:2.5; }
.result-label { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-bottom:6px; }
.result-val { font-size:1.45rem; font-weight:800; color:var(--text-1); letter-spacing:-.025em; }
.result-sub { font-size:.74rem; color:var(--text-3); margin-top:8px; }

/* ══════════════════════════════════════
   THANK YOU PAGE
══════════════════════════════════════ */
.ty-page { min-height:100vh; display:flex; flex-direction:column; background:var(--bg); }
.ty-main { flex:1; display:flex; align-items:center; justify-content:center; padding:24px var(--page-px); }
.ty-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:36px 28px; text-align:center; max-width:400px; width:100%; animation:fadeUp var(--dur-lg) var(--ease-out); }
.ty-icon-wrap { width:64px; height:64px; border-radius:50%; background:var(--success-bg); border:2px solid var(--success-border); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 4px 16px rgba(22,163,74,.2); }
.ty-icon-wrap svg { width:28px; height:28px; stroke:var(--success); stroke-width:2.5; }
.ty-heading { font-size:1.25rem; font-weight:800; color:var(--text-1); letter-spacing:-.025em; margin-bottom:8px; }
.ty-sub { font-size:.84rem; color:var(--text-2); margin-bottom:24px; line-height:1.55; }
.ty-prize-row { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px; margin-bottom:14px; }
.ty-prize-label { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-bottom:6px; }
.ty-prize-val { font-size:1.3rem; font-weight:800; color:var(--text-1); letter-spacing:-.02em; }
.ty-msg { font-size:.78rem; color:var(--accent-dark); line-height:1.55; margin-bottom:18px; padding:11px 14px; background:var(--accent-light); border-radius:var(--r-sm); border:1px solid var(--accent-border); text-align:left; }
.ty-ref-row { font-size:.7rem; color:var(--text-3); margin-bottom:24px; }
.ty-ref-row span { font-family:var(--mono); letter-spacing:.03em; }
.ty-actions { display:flex; flex-direction:column; gap:10px; }

/* ══════════════════════════════════════
   LOGIN PAGE — Split Layout
══════════════════════════════════════ */
.login-shell { min-height:100vh; display:flex; background:var(--bg); }

.login-brand-panel {
  display:none; width:42%; flex-shrink:0;
  background:linear-gradient(150deg, #0D7A5F 0%, #065F46 55%, #043D2E 100%);
  padding:40px 36px; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.login-brand-panel::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.06) 0%, transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.04) 0%, transparent 50%);
  pointer-events:none;
}
.login-brand-panel::after {
  content:""; position:absolute; top:-80px; right:-80px;
  width:300px; height:300px; border-radius:50%;
  border:1px solid rgba(255,255,255,.07); pointer-events:none;
}

.brand-panel-top {}
.brand-panel-logo {
  width:46px; height:46px;
  background:rgba(255,255,255,.15); border-radius:var(--r-md); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; margin-bottom:36px;
}
.brand-panel-logo svg { width:22px; height:22px; fill:white; }
.brand-panel-headline { font-size:1.75rem; font-weight:800; color:white; letter-spacing:-.03em; line-height:1.2; margin-bottom:12px; }
.brand-panel-sub { font-size:.87rem; color:rgba(255,255,255,.62); line-height:1.6; max-width:280px; }

.brand-panel-stats { display:flex; flex-direction:column; gap:12px; margin-top:36px; }
.brand-stat {
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); backdrop-filter:blur(6px);
  transition:background var(--dur-sm);
}
.brand-stat:hover { background:rgba(255,255,255,.12); }
.brand-stat-icon { width:34px; height:34px; border-radius:var(--r-sm); background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-stat-icon svg { width:16px; height:16px; stroke:rgba(255,255,255,.9); }
.brand-stat-label { font-size:.66rem; color:rgba(255,255,255,.52); font-weight:500; letter-spacing:.04em; margin-bottom:2px; }
.brand-stat-val { font-size:.92rem; font-weight:700; color:white; }
.brand-panel-footer { font-size:.7rem; color:rgba(255,255,255,.35); }

.login-form-panel { flex:1; display:flex; align-items:center; justify-content:center; padding:32px var(--page-px); }

.login-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:36px 30px;
  width:100%; max-width:390px;
  box-shadow:var(--shadow-lg); animation:fadeUp var(--dur-lg) var(--ease-out);
}
.login-card-brand { text-align:center; margin-bottom:28px; }
.login-logo {
  width:50px; height:50px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius:var(--r-md);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:14px; box-shadow:var(--shadow-accent);
}
.login-logo svg { width:24px; height:24px; fill:white; }
.login-card-brand h1 { font-size:1.2rem; font-weight:800; letter-spacing:-.025em; color:var(--text-1); }
.login-card-brand p { font-size:.8rem; color:var(--text-3); margin-top:4px; font-weight:500; }
.form-section-title { font-size:.82rem; font-weight:700; color:var(--text-1); margin-bottom:18px; padding-bottom:13px; border-bottom:1px solid var(--border); }
.toggle-foot { text-align:center; margin-top:20px; font-size:.8rem; color:var(--text-3); }
.toggle-foot a { font-weight:700; color:var(--accent); }

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes spin      { to { transform:rotate(360deg); } }
@keyframes fadeUp    { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.page-enter   { animation:fadeUp var(--dur-lg) var(--ease-out) both; }
.page-enter-1 { animation:fadeUp var(--dur-lg) var(--ease-out) 60ms both; }
.page-enter-2 { animation:fadeUp var(--dur-lg) var(--ease-out) 120ms both; }
.page-enter-3 { animation:fadeUp var(--dur-lg) var(--ease-out) 180ms both; }
.page-enter-4 { animation:fadeUp var(--dur-lg) var(--ease-out) 240ms both; }

/* ══════════════════════════════════════
   UTILITIES
══════════════════════════════════════ */
.hidden  { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.mt-8    { margin-top:8px; }
.mt-12   { margin-top:12px; }
.mt-16   { margin-top:16px; }
.mb-8    { margin-bottom:8px; }
.w-full  { width:100%; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (min-width:640px) {
  :root { --page-px:24px; }
  .page-body { padding:28px var(--page-px) 72px; }
  .wheel-disc { width:300px; height:300px; }
  .login-brand-panel { display:flex; }
  .login-form-panel { padding:40px 48px; }
  .login-card { box-shadow:none; border:none; padding:0; }
}
@media (min-width:1024px) {
  .login-brand-panel { width:44%; }
  .login-form-panel { padding:48px 80px; }
  .brand-panel-headline { font-size:2rem; }
}
@media (max-width:360px) {
  html { font-size:14px; }
  .card-body { padding:16px; }
  .kpi-value { font-size:1.6rem; }
  .header-user-name { max-width:75px; }
}

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-md); border-radius:100px; }

/* ══════════════════════════════════════
   ADDITIONAL v4 REFINEMENTS
══════════════════════════════════════ */

/* KPI value loading skeleton */
.kpi-value.loading {
  color: var(--border-md);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }

/* Date badge in target header */
.badge-gray { font-family: var(--mono); }

/* Input field focus ring enhancement */
.form-input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,122,95,.12), 0 1px 4px rgba(13,27,42,.06);
}

/* Sign-out button — icon only on very small screens */
@media (max-width: 380px) {
  .btn-signout span { display: none; }
  .btn-signout { padding: 7px 10px; }
}

/* Smooth section reveal on dashboard */
.section-label, .card { will-change: transform, opacity; }

/* Target block title — slightly better spacing */
.target-block-title {
  padding: 1px 0;
}

/* Overall target badge uses blue styling */
.badge-blue {
  font-variant-numeric: tabular-nums;
}

/* Method button text label */
.method-btn span { pointer-events: none; }

/* Scroll-to-top prevention on redirect */
html.redirecting * { pointer-events: none !important; }