:root {
    --bg: #FAF6EF;
    --panel: #FFFFFF;
    --panel-edge: #F0D9D5;
    --red: #C8102E;
    --red-deep: #8C0F24;
    --gold: #C9971F;
    --ink: #241B1A;
    --muted: #93807C;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    background-image:
      radial-gradient(ellipse at top, rgba(200,16,46,0.05), transparent 55%);
    color: var(--ink);
    font-family: 'Be Vietnam Pro', sans-serif;
    min-height: 100vh;
  }

  .wrap { max-width: 960px; margin: 0 auto; padding: 48px 24px 96px; }

  header { margin-bottom: 40px; }
  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  header h1 {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--red);
  }
  #header-auth-status {
    font-size: 14px;
    color: var(--muted);
  }
  #header-auth-status a, #header-auth-status button.link {
    color: var(--gold);
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 14px;
    padding: 0;
    text-decoration: none;
  }
  #header-auth-status a:hover, #header-auth-status button.link:hover { text-decoration: underline; }

  /* Region tabs styled like a ticket stub row with perforation */
  .region-pills {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    background: var(--bg);
    border: 1px solid var(--panel-edge);
    border-radius: 999px;
    padding: 4px;
    width: fit-content;
  }
  .region-pill {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    background: none;
    border: none;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
  }
  .region-pill[aria-selected="true"] { background: var(--red); color: #FFFFFF; }

  .region-tabs {
    display: flex;
    gap: 0;
    margin: 32px 0 24px;
    border-bottom: 1px dashed var(--panel-edge);
  }
  .region-tab {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--muted);
    background: none;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
  }
  .region-tab:hover { color: var(--ink); }
  .region-tab[aria-selected="true"] { color: var(--red); }
  .region-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: -1px;
    height: 2px;
    background: var(--red);
  }

  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 32px;
  }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
  }
  select, input[type="date"] {
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    color: var(--ink);
    border-radius: 6px;
    padding: 9px 12px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    color-scheme: light;
  }
  select:focus, input:focus, button:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 1px;
  }
  button.primary {
    background: var(--red);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: filter 0.15s ease;
  }
  button.primary:hover { filter: brightness(1.12); background: var(--red-deep); }

  #status { color: var(--muted); font-size: 14px; margin-bottom: 16px; min-height: 20px; }

  .checker-disclaimer {
    font-size: 13px;
    color: var(--muted);
    background: rgba(200,16,46,0.04);
    border: 1px dashed var(--panel-edge);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 20px;
  }

  .match-card {
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
  }
  .match-card.win {
    border-color: var(--gold);
    background: rgba(201,151,31,0.08);
  }
  .match-card .headline {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
  }
  .match-card.win .headline { color: var(--gold); }
  .match-card .detail { font-size: 13px; color: var(--muted); }

  .section-divider {
    border: none;
    border-top: 1px dashed var(--panel-edge);
    margin: 32px 0;
  }
  .section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--red);
    margin: 0 0 12px;
  }

  .fav-summary {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--panel-edge);
  }
  .fav-summary-line {
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .fav-summary-line strong { color: var(--red); }

  .ritual-result-card {
    background: var(--panel);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
  }
  .ritual-result-card .ritual-day-label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .ritual-result-card .ritual-number {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 48px;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 12px;
  }
  .ritual-reveal-layer {
    text-align: left;
    font-size: 14px;
    color: var(--ink);
    padding: 8px 0;
    border-top: 1px dashed var(--panel-edge);
  }
  .ritual-reveal-layer strong { color: var(--red); }

  .journal-list { list-style: none; padding: 0; margin: 0; }
  .journal-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(200,16,46,0.06);
    font-size: 14px;
  }
  .journal-list li:last-child { border-bottom: none; }
  .journal-list .journal-number {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: var(--red);
  }

  #login-error, #register-error, #verify-error {
    color: var(--red);
    font-size: 13px;
    margin-top: 8px;
    min-height: 18px;
  }

  .schedule-table th, .schedule-table td { text-align: left; }
  .schedule-table tr.today-row { background: rgba(201,151,31,0.12); }
  .schedule-table tr.today-row td.tier-label { color: var(--gold); font-weight: 700; }
  .today-badge {
    display: inline-block;
    background: var(--gold);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
  }
  .sched-summary-card {
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
  }
  .sched-summary-card.is-today { border-color: var(--gold); background: rgba(201,151,31,0.08); }
  .sched-summary-card .sched-line { font-size: 14px; margin-bottom: 6px; }
  .sched-summary-card .sched-line strong { color: var(--red); }

  .popular-number-row.is-your-number { background: rgba(201,151,31,0.12); border-radius: 8px; padding: 6px 8px; }

  .popular-number-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }
  .popular-number-row .pn-num {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: var(--red);
    font-size: 16px;
    width: 50px;
  }
  .popular-number-row .pn-bar-track {
    flex: 1;
    height: 10px;
    background: var(--panel-edge);
    border-radius: 999px;
    overflow: hidden;
  }
  .popular-number-row .pn-bar-fill {
    height: 100%;
    background: var(--gold);
  }
  .popular-number-row .pn-count { font-size: 12px; color: var(--muted); width: 70px; text-align: right; }

  .story-card {
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
  }
  .story-card .story-num {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: var(--red);
    margin-right: 10px;
  }
  .story-card .story-text { color: var(--ink); font-size: 14px; }

  .saved-number-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 999px;
    padding: 8px 10px 8px 16px;
    margin: 0 8px 8px 0;
  }
  .saved-number-chip .mn-num {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: var(--red);
    font-size: 16px;
  }
  .saved-number-chip .mn-story { font-size: 12px; color: var(--muted); }
  .saved-number-chip .mn-remove {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
  }
  .saved-number-chip .mn-remove:hover { color: var(--red); }

  .nh-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .nh-row .nh-num { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--ink); font-size: 16px; }
  .nh-row .nh-stats { font-size: 13px; color: var(--muted); }
  .nh-row .nh-stats strong { color: var(--gold); }

  .admin-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0;
  }
  .admin-alert.updating { background: rgba(201,151,31,0.15); color: var(--gold); border: 1px solid var(--gold); }
  .admin-alert.official { background: rgba(200,16,46,0.08); color: var(--red-deep); border: 1px solid var(--red-deep); }

  .admin-numbers-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
  }
  .admin-numbers-table td {
    padding: 6px 8px 6px 0;
    vertical-align: middle;
  }
  .admin-numbers-table td.admin-num-label {
    width: 60px;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
  }
  .admin-numbers-table input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 16px; /* 16px minimum prevents iOS Safari auto-zoom on focus */
    font-family: 'Space Mono', monospace;
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
  }
  .admin-numbers-table input:focus {
    outline: 2px solid var(--red);
    outline-offset: 1px;
  }

  @keyframes live-pulse {
    0%, 100% { background: var(--red); box-shadow: 0 0 0 0 rgba(200,16,46,0.5); }
    50% { background: var(--red-deep); box-shadow: 0 0 0 8px rgba(200,16,46,0); }
  }
  #live-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 700;
  }
  #live-banner.state-live {
    cursor: pointer;
    animation: live-pulse 1.6s ease-in-out infinite;
  }
  #live-banner.state-countdown {
    background: var(--gold);
    cursor: default;
    /* Calm, no pulse - this is informational ("starts in X"), not an
       urgent "something is happening right now" signal like the live state. */
  }
  #live-banner .live-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #FFFFFF;
    margin-right: 8px;
    animation: live-pulse-dot 1s ease-in-out infinite;
  }
  @keyframes live-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
  #live-banner .live-arrow { font-size: 18px; }
  #live-banner .countdown-clock {
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    font-weight: 700;
  }

  .live-badge {
    display: inline-block;
    background: var(--red);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    animation: live-pulse-dot 1.2s ease-in-out infinite;
  }
  .released-badge {
    display: inline-block;
    background: rgba(34,139,34,0.12);
    color: #1e7a1e;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    /* No pulse animation - this is a settled/confirmed state, not "happening now" */
  }

  .vl-num-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
  }
  .vl-num-row input {
    width: 56px;
    box-sizing: border-box;
    padding: 12px 0;
    font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
    font-family: 'Space Mono', monospace;
    text-align: center;
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
  }
  .vl-num-row input:focus { outline: 2px solid var(--red); outline-offset: 1px; }

  .vietlott-game-picker {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
  }
  .vietlott-game-pill {
    flex: 1;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    background: var(--panel);
    border: 2px solid var(--panel-edge);
    padding: 16px 20px;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
  }
  .vietlott-game-pill[aria-selected="true"] {
    background: var(--red);
    color: #FFFFFF;
    border-color: var(--red);
  }

  .vl-draw-card {
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
  }
  .vl-draw-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .vl-kyve { font-size: 12px; color: var(--muted); }
  .vl-numbers { display: flex; gap: 8px; flex-wrap: wrap; }
  .vl-ball {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--red);
    color: #FFFFFF;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 14px;
  }
  .vl-ball.vl-power { background: var(--gold); }

  .points-card {
    background: linear-gradient(135deg, rgba(201,151,31,0.12), rgba(200,16,46,0.06));
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .points-card .points-value {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 36px;
    color: var(--gold);
    line-height: 1;
  }
  .points-card .points-label { font-size: 13px; color: var(--muted); margin-top: 4px; }

  .badge-shelf { display: flex; flex-wrap: wrap; gap: 10px; }
  .badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    padding: 10px 6px;
    border-radius: 10px;
    text-align: center;
    font-size: 11px;
  }
  .badge-item.earned { background: var(--panel); border: 1px solid var(--gold); }
  .badge-item.locked { background: var(--panel); border: 1px solid var(--panel-edge); opacity: 0.4; }
  .badge-item .badge-icon { font-size: 26px; margin-bottom: 4px; }
  .badge-item .badge-name { color: var(--ink); font-weight: 600; }

  .ticket-card {
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
  }
  .ticket-card.win { border-color: var(--gold); background: rgba(201,151,31,0.08); }
  .ticket-card .tk-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .ticket-card .tk-number {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
  }
  .tk-status {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
  }
  .tk-status.pending { background: rgba(147,128,124,0.15); color: var(--muted); }
  .tk-status.no-prize { background: rgba(147,128,124,0.15); color: var(--muted); }
  .tk-status.win { background: var(--gold); color: #FFFFFF; }
  .ticket-card .tk-detail { font-size: 13px; color: var(--muted); }
  .ticket-card .tk-matches { margin-top: 8px; font-size: 13px; color: var(--gold); font-weight: 600; }

  .region-checkboxes {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .region-checkboxes label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--ink);
    font-weight: normal;
    cursor: pointer;
  }
  #fav-province {
    width: 100%;
    max-width: 320px;
  }

  .fav-history-table th, .fav-history-table td {
    text-align: left;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px;
  }
  .fav-history-table .fav-number-cell {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: var(--red);
    text-align: right;
  }

  .lucky-numbers {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .lucky-numbers span {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
    padding: 10px 18px;
    color: var(--red);
  }

  /* One row per date — province tickets sit side by side within it */
  .date-group { margin-bottom: 24px; }
  .date-group-label {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--red);
    font-size: 15px;
    letter-spacing: 0.02em;
    padding: 5px 14px;
    border-radius: 999px;
    margin: 0 0 12px 0;
  }
  .pending-cell {
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
  }
  .pending-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    margin-right: 6px;
    animation: live-pulse-dot 1.2s ease-in-out infinite;
  }

  .table-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden; /* prevents this wrapper from also becoming an ambiguous vertical scroll context */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* stops the swipe gesture from "escaping" to the page once it hits the table's edge */
    border-radius: 10px;
  }
  .table-scroll-wrapper table {
    width: max-content;
    min-width: 100%;
  }
  .swipe-hint {
    display: none;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin: -8px 0 8px;
  }
  @media (max-width: 700px) {
    .swipe-hint { display: block; }
  }

  .result-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    font-size: 14px;
  }
  .result-table th, .result-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(200,16,46,0.06);
    vertical-align: middle;
    white-space: nowrap;
  }
  .result-table thead th {
    background: rgba(200,16,46,0.07);
    color: var(--red);
    font-weight: 700;
    font-size: 14px;
  }
  .result-table th.tier-col { background: var(--panel); width: 110px; }
  .result-table td.tier-label {
    text-align: left;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    font-size: 13px;
  }
  .result-table td:not(.tier-label) {
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.02em;
    font-size: 17px;
    font-weight: 600;
    color: #000000;
  }
  .result-table td.multi > div { line-height: 1.6; }
  .result-table tbody tr:nth-child(even) { background: rgba(200,16,46,0.02); }
  .result-table tr:last-child td { border-bottom: none; }
  .result-table tr.lowest-row td:not(.tier-label) {
    font-weight: 700; font-size: 20px; color: var(--red);
  }
  .result-table tr.dac-biet-row td:not(.tier-label) {
    font-weight: 700; font-size: 20px; color: var(--red-deep);
  }

  .empty {
    color: var(--muted);
    font-size: 14px;
    padding: 32px 0;
    text-align: center;
    border: 1px dashed var(--panel-edge);
    border-radius: 10px;
  }

  footer {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px dashed var(--panel-edge);
    font-size: 12px;
    color: var(--muted);
  }