@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ============================================================
   AC PROGRAM — MEMBER PORTAL
   ไฟล์นี้แทนที่ /member/css/style.css เดิมได้ทั้งไฟล์
   ไม่ต้องแก้ index.html หรือ app.js
   ============================================================ */

:root {
  --bg: #171716;
  --card: #212120;
  --card2: #2a2a28;
  --line: rgba(255, 255, 255, .10);
  --line2: rgba(255, 255, 255, .18);
  --tx: #f3f2ee;
  --mut: #9b9a92;
  --acc: #5b9bff;
  --accsoft: rgba(91, 155, 255, .16);
  --ok: #4ade80;
  --oksoft: rgba(74, 222, 128, .16);
  --warn: #f5a524;
  --warnsoft: rgba(245, 165, 36, .16);
  --danger: #f87171;
  --dangersoft: rgba(248, 113, 113, .16);
  --shadow: 0 20px 50px rgba(0, 0, 0, .40);
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --r-xl: 22px;
  --sans: "IBM Plex Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sidebar: 248px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f4f0;
    --card: #ffffff;
    --card2: #eceae4;
    --line: rgba(28, 28, 27, .12);
    --line2: rgba(28, 28, 27, .22);
    --tx: #1c1c1b;
    --mut: #6f6e68;
    --acc: #2f6fd0;
    --accsoft: rgba(47, 111, 208, .10);
    --ok: #1f9254;
    --oksoft: rgba(31, 146, 84, .12);
    --warn: #b06d05;
    --warnsoft: rgba(176, 109, 5, .12);
    --danger: #c8443c;
    --dangersoft: rgba(200, 68, 60, .12);
    --shadow: 0 18px 40px rgba(28, 28, 27, .12);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--tx); }

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.eyebrow,
.request-kicker,
.renew-eyebrow {
  display: block;
  font: 500 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mut);
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   NOTICE
   ============================================================ */
.notice {
  display: none;
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--tx);
  font: 400 13px/1.6 var(--sans);
}
.notice:not(:empty) { display: block; }
.notice.error   { border-color: var(--danger); background: var(--dangersoft); color: var(--danger); }
.notice.success { border-color: var(--ok); background: var(--oksoft); color: var(--ok); }

/* ============================================================
   LOGIN
   ============================================================ */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 20px 48px;
  background: var(--bg);
}

.login-artboard {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  box-shadow: var(--shadow);
  animation: riseIn .3s ease both;
}
.login-artboard[hidden] { display: none; }

.login-brand { display: flex; align-items: center; gap: 13px; }
.login-brand img { width: 36px; height: 36px; object-fit: contain; }
.login-brand div { display: flex; flex-direction: column; gap: 4px; }
.login-brand strong { font: 500 14px/1 var(--sans); color: var(--tx); }
.login-brand span { font: 400 9px/1 var(--mono); letter-spacing: .18em; color: var(--mut); }

.login-copy { display: flex; flex-direction: column; gap: 10px; }
.login-copy h1 { font-size: 24px; line-height: 1.35; color: var(--tx); }
.login-copy p { font: 300 13px/1.7 var(--sans); color: var(--mut); }

.login-primary,
.art-click,
.request-submit,
.store-buy-button,
.renew-plan-hit,
.payment-qr-open,
.payment-qr-done,
.slip-upload-form button[type="submit"],
.cart-summary button {
  min-height: 50px;
  border: 0;
  border-radius: var(--r-m);
  background: var(--acc);
  color: #fff;
  font: 500 14px/1 var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  transition: filter .15s ease, transform .15s ease;
}
.login-primary:hover,
.art-click:hover,
.request-submit:hover,
.store-buy-button:hover,
.renew-plan-hit:hover,
.payment-qr-open:hover,
.cart-summary button:hover,
.slip-upload-form button[type="submit"]:hover { filter: brightness(1.08); }
.login-primary:active, .art-click:active, .request-submit:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }

.login-help,
.login-privacy {
  font: 300 12px/1.6 var(--sans);
  color: var(--mut);
  text-align: center;
}

.login-back {
  position: absolute;
  top: 20px; right: 20px;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card2);
  color: var(--tx);
  font-size: 15px;
  cursor: pointer;
}
.login-back:hover { border-color: var(--acc); color: var(--acc); }

.login-step {
  font: 400 10px/1 var(--mono);
  letter-spacing: .18em;
  color: var(--mut);
  text-transform: uppercase;
}

.login-form-heading { display: flex; flex-direction: column; gap: 9px; }
.login-form-heading h1 { font-size: 21px; line-height: 1.35; }
.login-form-heading p { font: 300 13px/1.6 var(--sans); color: var(--mut); }
.login-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--accsoft);
  color: var(--acc);
  display: grid; place-items: center;
  font: 500 15px/1 var(--mono);
}

.login-field-label,
.request-card label,
.slip-file-label {
  font: 400 12px/1 var(--sans);
  color: var(--mut);
}

.art-license-input,
.request-card input,
.request-card select,
.request-card textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card2);
  color: var(--tx);
  padding: 14px 15px;
  font: 400 14px/1.5 var(--sans);
  outline: none;
  transition: border-color .15s ease;
}
.art-license-input::placeholder,
.request-card input::placeholder,
.request-card textarea::placeholder { color: var(--mut); }
.art-license-input:focus,
.request-card input:focus,
.request-card select:focus,
.request-card textarea:focus { border-color: var(--acc); }
.request-card textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.request-card select { appearance: none; cursor: pointer; padding-right: 40px; }

.license-placeholder { display: none; }

.otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.otp-box {
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card2);
  color: var(--tx);
  text-align: center;
  font: 500 20px/1 var(--mono);
  outline: none;
  transition: border-color .15s ease;
}
.otp-box:focus { border-color: var(--acc); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app.member-portal {
  min-height: 100vh;
  padding: 30px 34px 40px calc(var(--sidebar) + 34px);
  background: var(--bg);
}

.topbar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar);
  z-index: 40;
  border-right: 1px solid var(--line);
  background: var(--card);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: auto;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px; }
.member-logo-img { width: 32px; height: 32px; object-fit: contain; }
.member-logo-text {
  display: flex; flex-direction: column; gap: 3px;
  font: 500 13px/1 var(--sans); color: var(--tx);
}
.member-logo-text small {
  font: 400 9px/1 var(--mono);
  letter-spacing: .16em;
  color: var(--mut);
}

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav button {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--mut);
  font: 400 13px/1 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nav button:hover { background: var(--card2); color: var(--tx); }
.nav button.active { background: var(--accsoft); color: var(--acc); }
.nav-icon {
  width: 20px;
  flex-shrink: 0;
  font: 400 14px/1 var(--mono);
  text-align: center;
}
.cart-nav-count { color: var(--acc); font: 500 12px/1 var(--mono); margin-left: 4px; }
.notification-nav { position: relative; }
.notification-badge {
  margin-left: auto;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  display: grid; place-items: center;
  font: 500 10px/1 var(--mono);
}

.member-logout {
  margin-top: auto;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card2);
  color: var(--mut);
  font: 400 13px/1 var(--sans);
  cursor: pointer;
}
.member-logout:hover { border-color: var(--danger); color: var(--danger); }

.view { display: none; }
.view.active { display: block; animation: riseIn .28s ease both; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.member-dashboard,
.store-page,
.payment-page,
.request-shell,
.notification-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.member-dashboard { display: flex; flex-direction: column; gap: 20px; }

.dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard-heading h1 { margin: 10px 0 6px; font-size: 26px; line-height: 1.25; }
.dashboard-heading p { font: 300 13px/1.6 var(--sans); color: var(--mut); }

.member-account-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}
.member-account-summary label { font: 400 10px/1 var(--mono); letter-spacing: .16em; color: var(--mut); text-transform: uppercase; }
.member-account-summary > span { font: 400 11px/1 var(--mono); color: var(--mut); }

.license-dropdown { position: relative; }
.license-dropdown summary {
  list-style: none;
  cursor: pointer;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.license-dropdown summary::-webkit-details-marker { display: none; }
.license-dropdown summary:hover { border-color: var(--acc); }
.license-dropdown-icon { color: var(--ok); font-size: 9px; }
.license-dropdown-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.license-dropdown-text strong { font: 500 13px/1.3 var(--sans); color: var(--tx); }
.license-dropdown-text small { font: 400 10px/1.3 var(--mono); color: var(--mut); }
.license-dropdown-chevron { color: var(--mut); font-size: 13px; }
.license-dropdown-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0; right: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}
.license-dropdown-menu button,
.license-dropdown-menu a {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 12px 14px;
  color: var(--tx);
  font: 400 13px/1.4 var(--sans);
  cursor: pointer;
}
.license-dropdown-menu button:hover { background: var(--card2); }

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.metric-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metric-card span { font: 300 12px/1.4 var(--sans); color: var(--mut); }
.metric-card strong { font: 500 26px/1.2 var(--sans); color: var(--tx); }

.dashboard-status-row { display: flex; gap: 12px; flex-wrap: wrap; }
.status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  padding: 10px 16px;
}
.status-pill span:last-child { display: flex; flex-direction: column; gap: 3px; }
.status-pill small { font: 400 10px/1 var(--mono); letter-spacing: .12em; color: var(--mut); text-transform: uppercase; }
.status-pill strong { font: 500 12px/1 var(--sans); color: var(--tx); }
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mut);
  box-shadow: 0 0 0 4px var(--card2);
}
.status-dot.online, .status-dot.ok, .status-dot.active { background: var(--ok); box-shadow: 0 0 0 4px var(--oksoft); }
.status-dot.warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warnsoft); }
.status-dot.offline, .status-dot.error { background: var(--danger); box-shadow: 0 0 0 4px var(--dangersoft); }

.dashboard-section-label {
  margin-top: 6px;
  font: 500 15px/1 var(--sans);
  color: var(--tx);
}

.status-expire-list { display: flex; flex-direction: column; gap: 10px; }
.status-expire-empty,
.store-empty,
.empty-history {
  border: 1px dashed var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 26px;
  text-align: center;
  font: 300 13px/1.6 var(--sans);
  color: var(--mut);
}

.product-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 15px;
}
.product-card-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--card2);
  color: var(--mut);
  display: grid; place-items: center;
  font: 500 14px/1 var(--mono);
  text-transform: uppercase;
}
.status-expire-product { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.status-expire-product strong { font: 500 15px/1.3 var(--sans); color: var(--tx); }
.status-expire-product small { font: 300 12px/1.5 var(--sans); color: var(--mut); }
.status-expire-date {
  font: 500 13px/1 var(--sans);
  color: var(--tx);
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--card2);
  white-space: nowrap;
}
.status-expire-date.is-soon, .status-expire-date.warn { background: var(--warnsoft); color: var(--warn); }
.status-expire-date.is-expired, .status-expire-date.danger { background: var(--dangersoft); color: var(--danger); }
.status-expire-date.is-active, .status-expire-date.ok { background: var(--oksoft); color: var(--ok); }
.product-card-manage {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card2);
  color: var(--tx);
  font: 400 12px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.product-card-manage:hover { border-color: var(--acc); color: var(--acc); }

.member-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.member-action {
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 15px;
  color: var(--tx);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
.member-action:hover { border-color: var(--acc); }
.action-icon { font: 400 15px/1 var(--mono); color: var(--acc); }
.member-action span:last-child { display: flex; flex-direction: column; gap: 4px; }
.member-action strong { font: 500 13px/1.3 var(--sans); }
.member-action small { font: 300 11px/1.4 var(--sans); color: var(--mut); }

.member-data-cache { display: none; }

.member-update-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 16px;
}
.member-update-card[hidden] { display: none; }
.member-update-card > div { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 220px; }
.member-update-card strong { font: 500 14px/1.3 var(--sans); color: var(--tx); }
.member-update-card p { font: 300 12px/1.5 var(--sans); color: var(--mut); }
.member-update-card small { font: 400 11px/1.4 var(--mono); color: var(--mut); }

.payment-order-link {
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--r-s);
  background: var(--acc);
  color: #fff;
  font: 500 13px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.payment-order-link:hover { color: #fff; filter: brightness(1.08); }
.payment-order-link[hidden] { display: none; }

/* ============================================================
   STORE
   ============================================================ */
.store-page { display: flex; flex-direction: column; gap: 22px; }

.store-heading,
.payment-page-heading,
.notification-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.store-heading h1,
.payment-page-heading h1,
.notification-heading h1 { margin: 10px 0 6px; font-size: 26px; line-height: 1.25; }
.store-heading p,
.payment-page-heading p { font: 300 13px/1.6 var(--sans); color: var(--mut); max-width: 620px; }

.store-owned-summary {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}
.store-owned-summary small { font: 300 11px/1.4 var(--sans); color: var(--mut); }
.store-owned-summary strong { font: 500 26px/1.1 var(--sans); color: var(--tx); }

.owned-products-section { display: flex; flex-direction: column; gap: 14px; }
.store-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.store-section-heading h2 { margin-top: 8px; font-size: 18px; }
.store-section-heading p { font: 300 12px/1.6 var(--sans); color: var(--mut); }
.store-market-heading { margin-top: 8px; }

.owned-products-grid,
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.owned-product-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.owned-product-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--card2);
  object-fit: cover;
  display: grid; place-items: center;
  font: 500 13px/1 var(--mono);
  color: var(--mut);
  overflow: hidden;
}
.owned-product-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.owned-product-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.owned-product-title span {
  font: 400 10px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--mut);
  text-transform: uppercase;
}
.owned-product-title h3 { margin-top: 7px; font-size: 17px; line-height: 1.3; }
.owned-product-title b {
  flex-shrink: 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: .1em;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--card2);
  color: var(--mut);
}
.owned-product-title b.is-active { background: var(--oksoft); color: var(--ok); }
.owned-product-title b.is-update { background: var(--warnsoft); color: var(--warn); }
.owned-product-description,
.owned-product-content p { font: 300 12px/1.6 var(--sans); color: var(--mut); }
.owned-product-content small { font: 400 11px/1.5 var(--mono); color: var(--mut); }

.owned-card-actions {
  margin-top: 3px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.owned-download-button {
  flex: 1;
  min-width: 150px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--r-s);
  background: var(--acc);
  color: #fff;
  font: 500 13px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.owned-download-button:hover { color: #fff; filter: brightness(1.08); }
.owned-download-button.is-disabled {
  background: var(--card2);
  color: var(--mut);
  cursor: not-allowed;
}

.machine-add-control {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card2);
  padding: 5px;
}
.machine-add-control button {
  width: 34px; height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--card);
  color: var(--tx);
  font-size: 15px;
  cursor: pointer;
}
.machine-add-control button:hover { color: var(--acc); }
.machine-add-control span {
  min-width: 22px;
  text-align: center;
  font: 500 13px/1 var(--mono);
  color: var(--tx);
}

.store-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.store-product-image {
  width: 100%;
  height: 132px;
  border-radius: var(--r-m);
  background: var(--card2);
  object-fit: cover;
  display: grid; place-items: center;
  color: var(--mut);
  overflow: hidden;
}
.store-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.store-product-code {
  font: 400 10px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--mut);
  text-transform: uppercase;
}
.store-owned-badge {
  font: 400 10px/1 var(--mono);
  letter-spacing: .08em;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--card2);
  color: var(--mut);
}
.store-card h2 { font-size: 19px; line-height: 1.3; }
.store-card p { font: 300 12px/1.6 var(--sans); color: var(--mut); }
.store-product-meta { font: 400 11px/1.5 var(--mono); color: var(--mut); }
.store-price { margin-top: auto; display: flex; align-items: baseline; gap: 7px; }
.store-price strong { font: 600 22px/1.1 var(--sans); color: var(--tx); }
.store-price span { font: 300 12px/1 var(--sans); color: var(--mut); }
.store-buy-button { width: 100%; min-height: 46px; }

.store-cart-hint {
  font: 300 12px/1.7 var(--sans);
  color: var(--mut);
  text-align: center;
}
.store-cart-hint button {
  border: 0;
  background: none;
  color: var(--acc);
  font: 500 12px/1 var(--sans);
  cursor: pointer;
  padding: 0;
}

/* ============================================================
   PAYMENT
   ============================================================ */
.payment-page { display: flex; flex-direction: column; gap: 20px; }

.payment-mode-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: var(--r-m);
  background: var(--card2);
  max-width: 520px;
}
.payment-mode-tabs button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--mut);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}
.payment-mode-tabs button.active { background: var(--card); color: var(--tx); }
#cartTabCount { color: var(--acc); font-family: var(--mono); }

.payment-mode { display: none; }
.payment-mode.active {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr);
  gap: 16px;
  align-items: start;
  animation: riseIn .26s ease both;
}

.cart-panel,
.payment-order-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.cart-panel-heading h2 { font-size: 17px; }
.cart-panel-heading p { margin-top: 5px; font: 300 12px/1.6 var(--sans); color: var(--mut); }
.cart-clear {
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card2);
  color: var(--mut);
  font: 400 12px/1 var(--sans);
  cursor: pointer;
}
.cart-clear:hover { border-color: var(--danger); color: var(--danger); }

.cart-items { display: flex; flex-direction: column; }
.cart-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.cart-item:first-child { border-top: 0; }
.cart-item-image {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--card2);
  object-fit: cover;
}
.cart-item-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-item-copy strong { font: 500 13px/1.4 var(--sans); color: var(--tx); }
.cart-item-copy small { font: 300 11px/1.4 var(--sans); color: var(--mut); }
.cart-stepper { display: flex; align-items: center; gap: 6px; }
.cart-stepper button {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card2);
  color: var(--tx);
  cursor: pointer;
}
.cart-stepper button:hover { border-color: var(--acc); color: var(--acc); }
.cart-stepper span { min-width: 20px; text-align: center; font: 500 13px/1 var(--mono); }
.cart-item-total { min-width: 68px; text-align: right; font: 500 13px/1 var(--sans); color: var(--tx); }
.cart-remove {
  width: 30px; height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--mut);
  font-size: 16px;
  cursor: pointer;
}
.cart-remove:hover { background: var(--dangersoft); color: var(--danger); }

.cart-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cart-summary > span { font: 300 13px/1 var(--sans); color: var(--mut); }
.cart-summary > strong { font: 600 22px/1 var(--sans); color: var(--tx); }
.cart-summary button { margin-left: auto; min-height: 48px; }

.payment-order-title { font: 500 15px/1.4 var(--sans); color: var(--tx); }
.payment-order-detail { margin-top: 5px; font: 300 12px/1.6 var(--sans); color: var(--mut); }
.payment-qr-open { width: 100%; min-height: 48px; }
.payment-qr-open[hidden] { display: none; }

.slip-upload-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.slip-upload-form[hidden] { display: none; }
.slip-upload-copy { display: flex; flex-direction: column; gap: 4px; }
.slip-upload-copy strong { font: 500 13px/1.4 var(--sans); color: var(--tx); }
.slip-upload-copy small { font: 300 11px/1.5 var(--sans); color: var(--mut); }
.slip-file-label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px dashed var(--line);
  border-radius: var(--r-m);
  background: var(--card2);
  padding: 15px;
  cursor: pointer;
  color: var(--tx);
  font: 400 13px/1.4 var(--sans);
}
.slip-file-label:hover { border-color: var(--acc); }
.slip-file-label input { font: 400 12px/1.4 var(--sans); color: var(--mut); }
.slip-upload-status { font: 300 11px/1.6 var(--sans); color: var(--mut); }

/* renewal */
.renew-page { display: flex; flex-direction: column; gap: 16px; }
.renew-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 16px;
  align-items: start;
}
.renew-intro {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.renew-intro h1 { font-size: 26px; line-height: 1.3; }
.renew-intro p { font: 300 13px/1.7 var(--sans); color: var(--mut); }
.renew-trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.renew-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  font: 400 12px/1 var(--sans);
  color: var(--mut);
}
.renew-trust-row i { color: var(--ok); font-style: normal; }

.renew-offer {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.renew-offer-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.renew-offer-badge {
  font: 400 10px/1 var(--mono);
  letter-spacing: .1em;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--accsoft);
  color: var(--acc);
}
.renew-offer-caption { font: 300 11px/1 var(--sans); color: var(--mut); }
.renew-duration { display: flex; align-items: baseline; gap: 7px; }
.renew-duration strong { font: 600 40px/1 var(--sans); color: var(--tx); }
.renew-duration span { font: 300 14px/1 var(--sans); color: var(--mut); }
.renew-offer-copy { font: 300 12px/1.6 var(--sans); color: var(--mut); }
.renew-price { display: flex; align-items: baseline; gap: 7px; }
.renew-price strong { font: 500 15px/1.2 var(--sans); color: var(--tx); }
.renew-price span { font: 300 12px/1 var(--sans); color: var(--mut); }
.renew-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.renew-total-row span { font: 300 12px/1 var(--sans); color: var(--mut); }
.renew-total-row b { color: var(--tx); font-weight: 500; }
.renew-total-row strong { font: 600 22px/1 var(--sans); color: var(--tx); }
.renew-plan-hit { width: 100%; min-height: 50px; }
.renew-offer small { font: 300 11px/1.6 var(--sans); color: var(--mut); text-align: center; }

.renewal-billing-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card2);
  padding: 14px 16px;
}
.renewal-billing-note strong { font: 500 13px/1.4 var(--sans); color: var(--tx); }
.renewal-billing-note span { font: 300 12px/1.6 var(--sans); color: var(--mut); }

#paymentModeRenewal.active { display: block; }

/* ============================================================
   REQUEST VIEWS (machine change / support)
   ============================================================ */
.request-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 16px;
  align-items: start;
}

.request-card,
.request-history {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.request-card h1 { font-size: 24px; line-height: 1.3; margin-top: 8px; }
.request-lead { margin-bottom: 6px; font: 300 13px/1.7 var(--sans); color: var(--mut); }
.request-card-head { display: flex; align-items: flex-start; gap: 13px; }
.request-card-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accsoft);
  color: var(--acc);
  display: grid; place-items: center;
  font: 500 16px/1 var(--mono);
}
.request-card label { margin-top: 6px; }
.request-submit { margin-top: 10px; width: 100%; }

.category-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.category-chip {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card2);
  color: var(--tx);
  font: 400 13px/1 var(--sans);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.category-chip:hover { border-color: var(--line2); }
.category-chip.active,
.category-chip.is-active,
.category-chip[aria-pressed="true"] {
  border-color: var(--acc);
  background: var(--accsoft);
  color: var(--acc);
}
.category-chip-icon { font: 400 13px/1 var(--mono); }

.request-history h2 { font-size: 17px; margin-bottom: 5px; }
.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-item {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card2);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-item.ticket-item { flex-direction: row; gap: 12px; align-items: flex-start; }
.history-item.is-pending { border-color: var(--warn); }
.ticket-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.history-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.history-item-head strong { font: 500 13px/1.4 var(--sans); color: var(--tx); }
.history-item p { font: 300 12px/1.7 var(--sans); color: var(--mut); }
.history-meta { font: 400 10px/1.5 var(--mono); color: var(--mut); }

.request-status {
  flex-shrink: 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: .08em;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--card);
  color: var(--mut);
  white-space: nowrap;
}
.request-status.status-approved,
.request-status.status-resolved,
.request-status.status-closed,
.request-status.status-answered { background: var(--oksoft); color: var(--ok); }
.request-status.status-pending,
.request-status.status-open,
.request-status.status-reviewing { background: var(--warnsoft); color: var(--warn); }
.request-status.status-rejected,
.request-status.status-failed { background: var(--dangersoft); color: var(--danger); }

.ticket-reply {
  border-left: 2px solid var(--acc);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--card);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ticket-reply strong { font: 500 12px/1.4 var(--sans); color: var(--acc); }
.ticket-reply p { font: 300 12px/1.7 var(--sans); color: var(--tx); }

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notification-shell { display: flex; flex-direction: column; gap: 18px; }
.notification-read-all { width: auto; min-height: 44px; }
.notification-list { display: flex; flex-direction: column; gap: 9px; }
.notification-section-label {
  margin-top: 8px;
  font: 400 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
}
.notification-section { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.notification-item {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  padding: 15px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.notification-item:hover { border-color: var(--acc); }
.notification-item.is-unread { background: var(--accsoft); border-color: var(--acc); }
.notification-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--card2);
  color: var(--acc);
  display: grid; place-items: center;
  font: 400 14px/1 var(--mono);
}
.notification-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.notification-copy-top { display: flex; align-items: center; gap: 8px; }
.notification-copy-top strong { font: 500 13px/1.4 var(--sans); color: var(--tx); }
.notification-count {
  font: 400 10px/1 var(--mono);
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--card2);
  color: var(--mut);
}
.notification-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.notification-copy p { font: 300 12px/1.6 var(--sans); color: var(--mut); }
.notification-time { flex-shrink: 0; font: 400 10px/1.4 var(--mono); color: var(--mut); }

/* ============================================================
   QR MODAL
   ============================================================ */
.payment-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
}
.payment-qr-modal[hidden] { display: none; }
.payment-qr-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 7, .68);
  backdrop-filter: blur(3px);
}
.payment-qr-dialog {
  position: relative;
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow);
  animation: riseIn .26s ease both;
}
.payment-qr-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card2);
  color: var(--tx);
  font-size: 16px;
  cursor: pointer;
}
.payment-qr-close:hover { border-color: var(--danger); color: var(--danger); }
.payment-qr-heading { display: flex; flex-direction: column; gap: 8px; }
.payment-qr-heading h2 { font-size: 19px; line-height: 1.35; }
.payment-qr-heading p { font: 300 12px/1.6 var(--sans); color: var(--mut); }
.payment-qr-full {
  width: 100%;
  border-radius: var(--r-m);
  background: #fff;
  padding: 12px;
}
.payment-qr-done {
  background: var(--card2);
  color: var(--tx);
  min-height: 46px;
}
.payment-qr-done:hover { filter: none; border: 0; background: var(--line); }

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1080px) {
  .payment-mode.active,
  .renew-stage,
  .request-shell { grid-template-columns: minmax(0, 1fr); }
  .member-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   MOBILE — เมนูล่างแบบแอป, ไม่มีระบบดาวน์โหลด
   ============================================================ */
@media (max-width: 760px) {
  .app.member-portal {
    padding: 18px 16px calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .topbar {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
    border-right: 0;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
  .brand, .member-logout { display: none; }

  .nav {
    flex: 1;
    flex-direction: row;
    gap: 2px;
  }
  .nav button {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
  }
  .nav button > span:not(.nav-icon) {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-icon { width: auto; font-size: 16px; }
  .notification-badge {
    position: absolute;
    top: 6px;
    right: 50%;
    transform: translateX(18px);
    margin: 0;
  }
  .cart-nav-count { display: none; }

  /* ไม่มีระบบดาวน์โหลดในเวอร์ชันมือถือ */
  .owned-download-button,
  #overviewDownloadPanel,
  .owned-products-section .store-section-heading p { display: none !important; }
  .owned-products-section .store-section-heading h2 { font-size: 16px; }

  .dashboard-heading h1,
  .store-heading h1,
  .payment-page-heading h1,
  .notification-heading h1,
  .renew-intro h1 { font-size: 22px; }

  .dashboard-metrics { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .metric-card { padding: 12px; border-radius: var(--r-m); }
  .metric-card strong { font-size: 20px; }
  .metric-card span { font-size: 11px; }

  .member-actions { grid-template-columns: repeat(2, 1fr); }

  .owned-products-grid,
  .store-grid { grid-template-columns: minmax(0, 1fr); }

  .product-card-row { flex-wrap: wrap; }
  .status-expire-product { flex-basis: 55%; }
  .product-card-manage { flex: 1; }

  .owned-product-card { flex-direction: column; }
  .owned-product-icon { width: 100%; height: 96px; border-radius: var(--r-m); }

  .cart-item { flex-wrap: wrap; }
  .cart-item-copy { flex-basis: 60%; }
  .cart-summary button { width: 100%; margin-left: 0; }

  .payment-mode-tabs { max-width: none; }
  .payment-mode-tabs button { font-size: 12px; }

  .store-heading,
  .payment-page-heading,
  .notification-heading,
  .dashboard-heading { flex-direction: column; align-items: stretch; }
  .store-owned-summary { text-align: left; }
  .notification-read-all { width: 100%; }

  .login-shell { padding: 18px 16px 40px; }
  .login-artboard { padding: 24px 20px 26px; }
  .otp-box { height: 52px; font-size: 18px; }
}

@media (max-width: 380px) {
  .nav button { font-size: 9px; }
  .nav-icon { font-size: 15px; }
}