/* EasyVit — design from prototype easyvit-gold v6 (palette, type, shapes) + compatibility layer for the ledger markup */

  :root {
    --cream: #F4EBDD;
    --cream-light: #FCF8F1;
    --leaf: #647F5D;
    --leaf-text: #4F6848;
    --navy: #022152;
    --sage: #AFC492;
    --soft-leaf: #DDE5D4;
    --line: #D8CEBE;
    --shadow: 0 8px 24px rgba(2, 33, 82, 0.12);
    --shadow-soft: 0 4px 14px rgba(2, 33, 82, 0.09);
  }

  * {
    box-sizing: border-box;
  }

  html, body {
    margin: 0;
    padding: 0;
    overflow-x: clip;
    background: var(--cream);
    color: var(--navy);
    font-family: "Noto Sans Thai", sans-serif;
    font-weight: 400;
    font-size: 17.5px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 104px;
  }

  strong, b {
    font-weight: 700;
  }

  .proto-strip {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--navy);
    color: var(--cream);
    font-size: 0.85rem;
    padding: 6px 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-bar {
    background: var(--cream);
    border-bottom: 1.5px solid var(--line);
    border-radius: 0 0 28px 28px;
    box-shadow: var(--shadow-soft);
    padding: 10px 18px 12px;
  }

  .top-bar-inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .logo-wrap {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px 4px 0;
  }

  .logo-wrap svg {
    width: 120px;
    height: auto;
    display: block;
  }

  .top-user-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .user-name-label {
    font-size: 0.9rem;
    color: var(--navy);
    background: var(--soft-leaf);
    border-radius: 18px;
    padding: 4px 14px;
    max-width: 230px;
    line-height: 1.35;
    text-align: right;
  }

  .btn-text-logout {
    min-height: 44px;
    padding: 6px 12px;
    background: transparent;
    color: var(--navy);
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: underline;
  }

  .app-main {
    flex: 1;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 16px 28px;
  }

  .page-heading {
    margin: 0 0 14px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy);
    position: relative;
    padding-bottom: 12px;
  }

  .page-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 6px;
    border-radius: 999px;
    background: var(--sage);
  }

  .card {
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 28px 8px 28px 8px;
    box-shadow: var(--shadow-soft);
    padding: 16px;
    margin-bottom: 14px;
  }

  .card:nth-of-type(even),
  .card-leafcut:nth-of-type(even) {
    border-radius: 8px 28px 8px 28px;
  }

  .card-leafcut {
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 28px 8px 28px 8px;
    box-shadow: var(--shadow-soft);
    padding: 18px 16px;
    margin-bottom: 14px;
  }

  .card-tint {
    background: var(--soft-leaf);
  }

  .hero-leaf {
    background:
      radial-gradient(circle at 100% 0%, rgba(175, 196, 146, 0.30) 0, rgba(175, 196, 146, 0) 46%),
      linear-gradient(135deg, var(--leaf-text) 0%, var(--navy) 100%);
    color: var(--cream-light);
    border: 1.5px solid var(--navy);
    border-radius: 40px 12px 40px 12px;
    box-shadow: var(--shadow);
    padding: 20px 18px;
    margin-bottom: 16px;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .metric-label {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }

  .big-number-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }

  .big-num {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
  }

  .big-unit {
    font-size: 0.98rem;
    font-weight: 400;
  }

  .progress-line {
    font-size: 0.95rem;
    margin-bottom: 8px;
  }

  .progress-track {
    width: 100%;
    height: 12px;
    background: rgba(252, 248, 241, 0.22);
    border-radius: 999px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: var(--sage);
    border-radius: 999px;
  }

  .action-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }

  button,
  .btn {
    min-height: 46px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 999px;
    border: 1.5px solid var(--navy);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    background: var(--cream-light);
    color: var(--navy);
  }

  .btn-primary {
    background: var(--navy);
    color: var(--cream);
    border-color: var(--navy);
    font-weight: 700;
    box-shadow: var(--shadow-soft);
  }

  .btn-secondary {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
  }

  button:disabled,
  .btn:disabled {
    background: var(--soft-leaf);
    color: var(--leaf-text);
    border-color: var(--line);
    box-shadow: none;
    cursor: not-allowed;
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
  }

  .btn-block {
    width: 100%;
  }

  .chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 14px;
    border-radius: 999px;
    background: var(--soft-leaf);
    color: var(--navy);
    border: 1.5px solid var(--line);
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .pill {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--navy);
    border: 1.5px solid transparent;
    max-width: 100%;
  }

  .pill-wait {
    background: var(--soft-leaf);
    border-color: var(--line);
  }

  .pill-ok {
    background: var(--sage);
    border-color: var(--sage);
    font-weight: 700;
  }

  .pill-back {
    background: var(--cream);
    border-color: var(--navy);
  }

  .section-sub {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-sub::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sage);
  }

  .helper-line {
    font-size: 0.92rem;
    color: var(--leaf-text);
    margin: 4px 0 8px;
  }

  .plain-list {
    border-top: 1.5px solid var(--line);
  }

  .plain-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1.5px solid var(--line);
    font-size: 0.95rem;
    flex-wrap: wrap;
  }

  .plain-row:last-child {
    border-bottom: none;
  }

  .status-word {
    color: var(--leaf-text);
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .ev-no {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .small-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--navy);
    text-decoration: underline;
    font-size: 0.95rem;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 999px;
    padding: 0;
    font-family: inherit;
  }

  .form-group {
    margin-bottom: 14px;
  }

  .form-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.95rem;
    color: var(--navy);
  }

  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  select {
    width: 100%;
    min-height: 46px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--navy);
    background: var(--cream-light);
    border: 1.5px solid var(--line);
    border-radius: 16px;
  }

  input[readonly] {
    background: var(--soft-leaf);
    color: var(--navy);
  }

  .pin-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }

  .pin-row input {
    flex: 1;
    min-width: 0;
  }

  .pin-toggle {
    min-height: 46px;
    padding: 6px 16px;
    font-size: 0.92rem;
  }

  .file-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .file-pick-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .file-pick {
    cursor: pointer;
    min-height: 46px;
  }

  .file-hidden:focus-visible + .file-pick {
    outline: 3px solid var(--leaf);
    outline-offset: 2px;
  }

  .file-name {
    font-size: 0.92rem;
    color: var(--leaf-text);
  }

  input::placeholder {
    color: var(--leaf-text);
    opacity: 1;
  }

  .nw {
    white-space: nowrap;
  }

  .notice-box {
    background: var(--soft-leaf);
    color: var(--navy);
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 10px 16px;
    margin-bottom: 14px;
    font-size: 0.95rem;
  }

  .inline-note {
    display: inline-block;
    background: var(--soft-leaf);
    color: var(--navy);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 0.88rem;
  }

  .photo-preview-box {
    margin-top: 8px;
    max-width: 220px;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--cream-light);
  }

  .photo-preview-box img {
    width: 100%;
    height: auto;
    display: block;
  }

  .bill-thumb-btn {
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--cream-light);
    cursor: pointer;
    max-width: 220px;
    width: 100%;
    display: block;
    min-height: 44px;
  }

  .bill-thumb-btn img {
    width: 100%;
    height: auto;
    display: block;
  }

  .redeem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
  }

  .redeem-grid .card-leafcut {
    margin-bottom: 0;
  }

  .card-visual {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 6px;
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid var(--line);
  }

  .card-visual img {
    width: 100%;
    height: auto;
    display: block;
  }

  .mock-caption {
    font-size: 0.85rem;
    color: var(--leaf-text);
    text-align: center;
    margin-bottom: 8px;
  }

  .seg-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    margin-bottom: 14px;
    background: var(--soft-leaf);
  }

  .seg-btn {
    flex: 1;
    min-height: 44px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--navy);
    font-size: 0.95rem;
    padding: 6px 8px;
    cursor: pointer;
  }

  .seg-btn.active {
    background: var(--navy);
    color: var(--cream);
    font-weight: 700;
  }

  .range-row-btn {
    width: 100%;
    min-height: 48px;
    text-align: left;
    justify-content: space-between;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 10px 16px;
    margin-bottom: 8px;
    font-size: 0.96rem;
    color: var(--navy);
  }

  .ticket-graphics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    margin-bottom: 8px;
    background: var(--soft-leaf);
    border-radius: 22px;
  }

  .ticket-card-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .ticket-svg-holder {
    width: 100%;
    filter: drop-shadow(0 6px 10px rgba(2, 33, 82, 0.12));
  }

  .ticket-svg-holder svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .home-latest-tickets-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .range-expanded-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 6px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--soft-leaf);
    border-radius: 18px;
  }

  .range-ticket-item {
    font-size: 0.9rem;
    padding: 4px 8px;
    background: var(--cream-light);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
  }

  .demo-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }

  .demo-chip-btn {
    min-height: 44px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--soft-leaf);
    color: var(--navy);
    border: 1.5px solid var(--line);
    font-size: 0.92rem;
    cursor: pointer;
  }

  .footnote-tbc {
    font-size: 0.85rem;
    color: var(--leaf-text);
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1.5px solid var(--line);
  }

  .role-nav {
    position: fixed;
    bottom: 12px;
    left: 10px;
    right: 10px;
    z-index: 900;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-around;
    gap: 2px;
    padding: 5px;
  }

  .role-nav-btn {
    flex: 1;
    min-height: 48px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--navy);
    font-size: 0.84rem;
    padding: 6px 2px;
    cursor: pointer;
    white-space: nowrap;
  }

  .role-nav-btn.active {
    background: var(--navy);
    color: var(--cream);
    font-weight: 700;
  }

  .app-footer {
    background: var(--cream);
    border-top: 1.5px solid var(--line);
    color: var(--leaf-text);
    text-align: center;
    padding: 14px 12px;
    font-size: 0.85rem;
    margin-top: auto;
  }

  .hidden {
    display: none !important;
  }

  .inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .acc-bill-card {
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 28px 8px 28px 8px;
    box-shadow: var(--shadow-soft);
    padding: 16px;
    margin-bottom: 14px;
  }

  .acc-approve-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .acc-approve-actions button {
    min-height: 48px;
  }

  .cust-row {
    padding: 12px 0;
    border-bottom: 1.5px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .cust-row:last-child {
    border-bottom: none;
  }

  .cust-main {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 0.95rem;
  }

  .cust-sub {
    font-size: 0.88rem;
    color: var(--leaf-text);
  }

  .cust-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 14px;
  }

  .lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .lightbox-inner {
    width: 100%;
    max-width: 640px;
    background: var(--cream);
    border: 1.5px solid var(--navy);
    border-radius: 28px 8px 28px 8px;
    box-shadow: var(--shadow);
    padding: 16px;
  }

  .lightbox-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .lightbox-close-btn {
    min-height: 46px;
    padding: 8px 20px;
  }

  .lightbox-body img {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
    border: 1.5px solid var(--line);
    border-radius: 16px;
  }

  @media (min-width: 768px) {
    body {
      padding-bottom: 0;
    }
    .role-nav {
      position: static;
      width: calc(100% - 32px);
      max-width: 948px;
      margin: 14px auto 0;
      padding: 5px;
    }
    .role-nav-btn {
      font-size: 0.95rem;
    }
    .redeem-grid {
      grid-template-columns: 1fr 1fr;
    }
    .ticket-graphics-grid {
      grid-template-columns: 1fr 1fr;
    }
    .home-latest-tickets-grid {
      grid-template-columns: 1fr 1fr;
    }
    .cust-form-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 1024px) {
    .ticket-graphics-grid {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  .campaign-name {
    display: inline-block;
    background: var(--soft-leaf);
    color: var(--navy);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 2px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .hero-eyebrow {
    display: inline-block;
    background: rgba(175, 196, 146, 0.25);
    color: var(--cream-light);
    border-radius: 999px;
    padding: 2px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .prize-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1.5px solid var(--line);
    font-size: 0.95rem;
  }

  .prize-pill {
    flex: none;
    min-width: 108px;
    text-align: center;
    background: var(--sage);
    color: var(--navy);
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 0.86rem;
    font-weight: 700;
  }

/* ===== compatibility layer: existing markup (tables, tabs, kpis, tags...) in the v6 look ===== */
main{flex:1;width:100%;max-width:980px;margin:0 auto;padding:18px 16px 28px}
h1{margin:0 0 14px;font-size:1.4rem;font-weight:700;color:var(--navy);position:relative;padding-bottom:12px}
h1::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:6px;border-radius:999px;background:var(--sage)}
h2{font-size:1.02rem;font-weight:700;margin:0 0 10px;color:var(--navy);display:flex;align-items:center;gap:8px}
h2::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--sage)}
.s{color:var(--leaf-text);margin:0 0 12px;font-size:.92rem}
.banner{background:var(--soft-leaf);color:var(--navy);border:1.5px solid var(--line);border-radius:18px;padding:10px 16px;margin-bottom:14px;font-size:.92rem}
.banner input,.banner select{width:auto;min-height:38px;padding:4px 12px}
.top{display:block}
.tabs,.top nav{position:fixed;bottom:12px;left:10px;right:10px;z-index:900;background:var(--cream);border:1.5px solid var(--line);border-radius:28px;box-shadow:var(--shadow);display:flex;justify-content:space-around;gap:2px;padding:5px}
.tabs button{flex:1;min-height:48px;border:none;border-radius:999px;background:transparent;color:var(--navy);font-size:.84rem;padding:6px 2px;font-weight:400;box-shadow:none;white-space:nowrap}
@media(min-width:768px){.tabs,.top nav{position:static;width:100%;margin:0 0 14px}.tabs button{font-size:.95rem}}
.tabs button[aria-selected=true]{background:var(--navy);color:var(--cream);font-weight:700}
.row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;align-items:center}.row>*{flex:1 1 150px}.row>button{flex:0 0 auto}
input:not([type=checkbox]):not([type=radio]),textarea{width:100%;min-height:46px;padding:8px 16px;font-family:inherit;font-size:1rem;color:var(--navy);background:var(--cream-light);border:1.5px solid var(--line);border-radius:16px}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--navy)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:9px 8px;border-bottom:1.5px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--leaf-text);font-weight:700;white-space:nowrap;font-size:.86rem}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
button.g{background:transparent;color:var(--navy);border:1.5px solid var(--navy);box-shadow:none}
button.bad{background:#8E3B2E;color:var(--cream-light);border-color:#8E3B2E}
button:not(.g):not(.bad):not(.lnk):not([role=tab]):not(.seg-btn):not(.role-nav-btn):not(.small-link){background:var(--navy);color:var(--cream);font-weight:700;box-shadow:var(--shadow-soft)}
button.lnk{min-height:0;padding:0;border:0;background:none;color:var(--navy);text-decoration:underline;box-shadow:none;font-weight:400}
button:disabled{background:var(--soft-leaf)!important;color:var(--leaf-text)!important;border-color:var(--line)!important;box-shadow:none!important}
a{color:var(--navy)}
.tag{display:inline-block;font-size:.8rem;padding:1px 12px;border-radius:999px;border:1.5px solid var(--line);color:var(--navy);background:var(--soft-leaf);white-space:nowrap}
.tag.ok{background:var(--sage);border-color:var(--sage);font-weight:700}
.tag.no{background:var(--cream);border-color:var(--navy)}
.tag.wait{background:var(--soft-leaf);border-color:var(--line)}
.warn{color:#8E3B2E}.ok{color:var(--leaf-text)}
#msg{min-height:24px;margin:4px 0 10px;font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:8px 0}
.kpi{background:var(--soft-leaf);border:1.5px solid var(--line);border-radius:18px;padding:10px 14px}.kpi b{display:block;font-size:1.6rem;line-height:1.2}.kpi span{font-size:.85rem;color:var(--leaf-text)}
.bar{height:12px;background:var(--soft-leaf);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:var(--leaf)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;word-break:break-all}
details>summary{cursor:pointer;font-weight:700}
.hero-leaf .metric-label,.hero-leaf .progress-line{color:var(--cream-light)}
.hero-leaf .chip{background:rgba(252,248,241,.16);color:var(--cream-light);border-color:rgba(252,248,241,.35)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.home-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
.home-grid .card-leafcut{margin-bottom:0}
.home-grid a.btn{margin-top:10px}
.app-footer{margin-top:20px}
@media(min-width:768px){.home-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.opt{display:none}.why{display:block}th{white-space:normal}td:first-child{overflow-wrap:anywhere;word-break:break-all;min-width:64px;max-width:92px}main{padding:14px 12px 24px}th,td{padding:7px 5px;font-size:.85rem}.top-bar{padding:8px 12px 10px}}
.admin-main .scroll table{min-width:640px}
.admin-main td:first-child{min-width:110px;max-width:none;overflow-wrap:normal;word-break:normal}
a.role-nav-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center}
a.role-nav-btn.active{color:var(--cream)}

/* ===== v2 (2026-11-01): login, customer tickets, confirm dialog, bigger touch targets on phones ===== */
.login-main{display:flex;align-items:flex-start;justify-content:center;padding-top:6vh}
.login-card{width:100%;max-width:420px;text-align:center;padding:26px 22px}
.login-logo{display:block;margin:0 auto 6px;max-width:70%;height:auto}
.login-title{font-size:1.9rem;margin:0 0 18px;padding-bottom:0}
.login-title::after{display:none}
.login-card form{text-align:left}
.login-card label{display:block;margin:12px 0 4px;font-weight:700;color:var(--navy)}
.login-card input{font-size:1.15rem;min-height:54px}
.login-card #p{letter-spacing:.4em;text-align:center;font-size:1.4rem}
.login-card .btn{margin-top:18px;min-height:54px;font-size:1.1rem}
.login-card #msg{margin-top:12px;text-align:center}
.campaign-title{font-size:1.7rem}
.cust-hero .shop-name{font-size:1.35rem;font-weight:700;margin:2px 0 10px;color:var(--cream-light)}
.tk-tools{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.ticket-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin:10px 0}
.tk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:58px;padding:4px 2px;border-radius:14px 4px 14px 4px;border:1.5px dashed var(--leaf);background:var(--cream-light);color:var(--navy);font-family:inherit;cursor:pointer;box-shadow:none}
.tk b{font-size:1.05rem;line-height:1.1}.tk small{font-size:.72rem;color:var(--leaf-text);line-height:1.2}
button.tk:not(.g):not(.bad):not(.lnk){background:var(--cream-light);color:var(--navy);font-weight:400;box-shadow:none}
button.tk.sel:not(.g):not(.bad):not(.lnk),.tk.sel{background:var(--navy);color:var(--cream);border:1.5px solid var(--navy)}
.tk.sel small{color:var(--sage);font-weight:700}
.tk.used{background:var(--soft-leaf);border-style:solid;border-color:var(--line);color:var(--leaf-text);cursor:default}
.tk.pending{background:#fff4d6;border-color:#d8b65b;color:#6b541b}
.tk.void{background:#eeeae2;border-color:#c9c2b6;color:#77716a}
.tk:disabled{opacity:.55}
.sel-bar{position:sticky;bottom:8px;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;background:var(--cream);border:1.5px solid var(--navy);border-radius:22px;box-shadow:var(--shadow)}
.sel-text{flex:1 1 140px}.sel-count{font-weight:700;font-size:1.1rem}
.gold-mini{width:88px;height:auto;border-radius:10px;border:1.5px solid var(--line);display:block}
.gold-mini[hidden]{display:none}
.steps{display:flex;gap:6px;margin:6px 0}
.step{flex:1;text-align:center;padding:8px 4px;border-radius:14px;background:var(--soft-leaf);color:var(--leaf-text);font-size:.9rem;line-height:1.3;border:1.5px solid var(--line)}
.step small{font-size:.8rem}
.step.done{background:var(--sage);color:var(--navy);font-weight:700;border-color:var(--sage)}
.step.no{background:var(--cream);color:#8E3B2E;border-color:#8E3B2E;font-weight:700}
.red-item{padding:10px 0;border-bottom:1.5px solid var(--line)}.red-item:last-child{border-bottom:none}.red-head{margin-bottom:4px}
dialog.confirm{border:1.5px solid var(--navy);border-radius:28px 8px 28px 8px;background:var(--cream-light);color:var(--navy);width:calc(100% - 32px);max-width:420px;padding:20px;box-shadow:var(--shadow)}
dialog.confirm::backdrop{background:rgba(2,33,82,.45)}
dialog.confirm h2{margin-top:0}
.dlg-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.dlg-actions button{flex:1 1 140px}
.rules{margin:0;padding-left:1.2em}.rules li{margin:8px 0}
.small-link.active{font-weight:700;text-decoration:underline}
.btn-text-logout{cursor:pointer}
.cust-bills td:first-child{word-break:normal;overflow-wrap:anywhere}
.user-name-label:empty{display:none}
@media(max-width:560px){
  html,body{font-size:19px}
  main{padding:14px 14px 28px}
  h1{font-size:1.5rem}
  h2{font-size:1.12rem}
  button,.btn,select{min-height:54px;font-size:1.05rem}
  .small-link{min-height:44px;font-size:1.02rem}
  .top-bar-inner{flex-wrap:wrap;row-gap:4px}
  .top-user-area{width:100%;justify-content:space-between;gap:10px}
  .btn-text-logout{min-height:44px;font-size:1rem}
  input:not([type=checkbox]):not([type=radio]){min-height:54px;font-size:1.1rem}
  th,td{font-size:1rem;padding:9px 5px}
  .cust-bills td:first-child{max-width:none;min-width:0}
  .ticket-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  .tk{min-height:64px}.tk b{font-size:1.15rem}.tk small{font-size:.78rem}
  .gold-mini{width:72px}
  .step{font-size:.95rem}
}
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.login-logo{margin-bottom:18px}

.customer-section,#gold-exchange{scroll-margin-top:96px}

#msg.warn,#req_msg.warn{background:#fbe9e5;border:1.5px solid #8E3B2E;border-radius:12px;padding:8px 12px}
.cust-titlebar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:14px}
.cust-titlebar .campaign-title{margin:0}
.promo-badge{background:#e7f3c9;color:var(--leaf-text);border-radius:999px;padding:4px 14px;font-size:.9rem;font-weight:700}
.cust-actions{display:flex;gap:10px;margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:54px;padding:0 22px;border-radius:999px;border:1.5px solid var(--leaf-text);background:var(--cream-light);color:var(--navy);font-family:inherit;font-size:1.05rem;font-weight:700;cursor:pointer}
.pill.pill-gold{background:var(--navy);color:var(--cream-light);border-color:var(--navy)}
.cust-hero{position:relative;overflow:hidden;border-radius:30px;padding-right:200px;min-height:150px}
.cust-hero .hero-grid{grid-template-columns:auto auto;justify-content:start;gap:12px 40px}
.hero-art{position:absolute;right:14px;bottom:8px;width:190px;height:auto}
.tk-empty{text-align:center;padding:26px 12px 18px}.tk-empty p{font-size:1.4rem;font-weight:700;margin:8px 0 4px}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(74,154,60,.7)}100%{box-shadow:0 0 0 18px rgba(74,154,60,0)}}
.flash{animation:flash .9s ease-out 1}
@media(max-width:560px){.cust-hero{padding-right:18px;padding-bottom:84px}.hero-art{width:130px}.cust-actions{margin-left:0;width:100%}.pill{flex:1;justify-content:center}}

.cust-hero{background:linear-gradient(90deg,#0e5a44 0,#0e5a44 36%,rgba(14,90,68,0) 62%),url(/static/assets/hero-gold.jpg) right bottom 30%/auto 190% no-repeat,#0e5a44;min-height:190px;padding-right:18px}
@media(max-width:560px){.cust-hero{background:linear-gradient(90deg,#0e5a44 0,#0e5a44 30%,rgba(14,90,68,0) 55%),linear-gradient(180deg,#0e5a44 0,#0e5a44 45%,rgba(14,90,68,0) 75%),url(/static/assets/hero-gold.jpg) right -20px bottom -10px/auto 62% no-repeat,#0e5a44;padding-bottom:130px}}
#req_msg{min-height:24px;margin:8px 0;font-weight:700}

.redeem-balance{font-size:1.15rem;margin:0 0 12px}
.prize-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:12px 0 24px}
.prize{background:var(--cream-light);border:1.5px solid var(--line);border-radius:24px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.prize img{width:100%;max-width:320px;height:auto;border-radius:16px;display:block;margin:0 auto 10px}
.prize h2{margin:6px 0 2px;font-size:1.3rem}
.prize-cost{font-size:1.4rem;margin:10px 0 12px;color:var(--leaf-text)}.prize-cost b{font-size:2rem;color:var(--navy)}

/* customer phones: the header nav becomes one row of equal pills, PIN / sign-out sit small underneath */
.nav-row{display:contents}
@media(max-width:560px){
  .nav-row{display:flex;gap:6px;width:100%;order:1}
  .nav-main{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;min-height:48px;padding:0 4px;border:1.5px solid var(--leaf-text);border-radius:999px;text-decoration:none;font-weight:700;font-size:.95rem;background:var(--cream-light)}
  .nav-main.active{background:var(--navy);color:var(--cream-light);border-color:var(--navy);text-decoration:none}
  .nav-aux{order:2;flex:1 1 40%;text-align:center;font-size:.95rem;min-height:40px;background:none;color:var(--leaf-text);box-shadow:none;font-weight:400}
  .hide-sm{display:none}
  .tag{padding:3px 12px;min-height:28px}
  .s,.kpi span,th{font-size:.92rem}
  .ticket-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .tk{min-height:56px}
  .prize-grid{grid-template-columns:1fr}
}
.prize{display:flex;flex-direction:column}.prize .btn{margin-top:auto}.prize h2,.prize p{text-align:center}
.tk-sum{font-size:1.05rem;margin:6px 0}

/* sale on phones: a shop is one tappable row (number, name, remaining, open); form fields stack full width */
@media(max-width:560px){
  .shop-list td:first-child{max-width:none;min-width:0;word-break:normal;overflow-wrap:normal;white-space:nowrap}
  .shop-list .open-btn{min-height:44px;min-width:56px;padding:0 10px;border:1.5px solid var(--navy);border-radius:999px;background:var(--cream-light);color:var(--navy);font-weight:700;text-decoration:none}
  body[data-page=sale] .row>input,body[data-page=sale] .row>label,body[data-page=sale] .row>span{flex:1 1 100%}
  body[data-page=sale] .row>button{flex:1 1 100%;min-height:50px}
  body[data-page=sale] .tabs{display:none}
}
details>summary{min-height:32px}
@media(max-width:560px){.shop-list td:first-child .tag{display:block;width:fit-content;margin-top:2px}.shop-list td:first-child{white-space:normal}}

/* customer tickets page: stacked panels, centred empty state */
.tk-hero,#sum{margin-bottom:16px}
.tk-panel{background:var(--cream-light);border:1.5px solid var(--line);border-radius:22px;padding:18px 20px;margin:0 0 16px}
.tk-panel[hidden]{display:none}
.tk-h{font-size:1.1rem;margin:0 0 8px}
.tk-left{margin:6px 0 0;font-size:1.05rem}
.tk-how{background:var(--soft-leaf);border-color:transparent}.tk-how .s{margin:0;color:var(--navy)}
.tk-legend{margin:0 0 4px}
.tk-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.tk-empty[hidden]{display:none}
.tk-empty-ico{font-size:2.4rem;line-height:1}
@media(max-width:560px){.tk-panel{padding:16px 16px;border-radius:18px}}

/* customer ticket graphic: a real ticket (stub, perforation, notches); no serial numbers shown to customers */
#tg.ticket-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
#tg .tk{--tkc:#2f6b4f;--tkc2:#4a9a3c;position:relative;flex-direction:row;align-items:stretch;justify-content:stretch;min-height:76px;padding:0;border:0;border-radius:12px;cursor:default;color:#fff;
  background:radial-gradient(circle at 70% 0,var(--cream-light) 8px,#0000 8.5px),radial-gradient(circle at 70% 100%,var(--cream-light) 8px,#0000 8.5px),linear-gradient(135deg,var(--tkc),var(--tkc2));
  box-shadow:0 2px 6px rgba(14,48,36,.18)}
#tg .tk .tk-main{flex:0 0 70%;display:flex;flex-direction:column;justify-content:center;padding:8px 6px 8px 14px;text-align:left}
#tg .tk .tk-main small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
#tg .tk .tk-main b{font-size:1.05rem;line-height:1.2;color:#fff}
#tg .tk .tk-stub{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 6px;border-left:2px dashed rgba(255,255,255,.65);font-size:.8rem;font-weight:700;line-height:1.2;color:#fff}
#tg .tk.used{--tkc:#8a948a;--tkc2:#aab3a8;color:#fff}
#tg .tk.pending{--tkc:#b8892a;--tkc2:#d8b65b}
@media(max-width:560px){#tg.ticket-grid{grid-template-columns:repeat(2,1fr);gap:10px}#tg .tk{min-height:72px}#tg .tk .tk-main b{font-size:.98rem}}

body[data-page="customer"]{background:var(--cream) url(/static/assets/bg-lifestyle-faint.jpg) right bottom/cover fixed no-repeat}