/* 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}}
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)}