/* =============================================
   RUIZEN WIRE ADMIN PANEL - GLOBAL STYLES
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary:   #0a0a0a;
  --bg-card:      #111111;
  --bg-card2:     #161616;
  --bg-input:     #1a1a1a;
  --border:       #2a2a2a;

  /* ---- accent palette sampled from the RUIZEN WIRE mark ---- */
  --accent:        #fffd28;   /* wire yellow  (logo tip)    */
  --accent-dark:   #e0b400;   /* shaded gold                */
  --accent-deep:   #6b5800;   /* shadowed gold              */
  --accent-light:  #ffff8f;   /* pale yellow highlight      */
  --accent-glow:   rgba(255, 253, 40, 0.26);
  --accent-rgb:        255, 253, 40;

  --violet:        #851ee2;   /* wire purple  (logo body)   */
  --violet-light:  #b15cff;   /* violet that reads on black */
  --violet-deep:   #3a0a7a;   /* shadowed violet            */
  --violet-rgb:        133, 30, 226;
  --violet-light-rgb:  177, 92, 255;
  --violet-deep-rgb:    58, 10, 122;

  --ink:           #0b0a04;   /* label colour on yellow     */
  --brand-grad:    linear-gradient(135deg, var(--accent-light), var(--accent) 32%, var(--violet) 82%);

  --text-primary: #ffffff;
  --text-sec:     #aaaaaa;
  --text-muted:   #666666;
  --danger:       var(--violet-light);   /* destructive = violet, yellow stays the brand signal */
  --success:      #22c55e;
  --shadow:       0 4px 24px rgba(0,0,0,0.6);
  --radius:       8px;
  --nav-h:        64px;
  --shell-max:    430px;
  --header-h:     62px;

  /* ---- legacy aliases (older rules still reference these names) ---- */
  --gold:        var(--accent);
  --gold-dark:   var(--accent-dark);
  --gold-light:  var(--accent-light);
  --border-gold: var(--accent);
  --purple:      var(--violet);
}

html, body {
  height: 100%;
  overflow: hidden;              /* the app shell owns every scroll */
  overscroll-behavior: none;     /* no pull-to-refresh / rubber-band leak */
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter','Noto Sans Thai',sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  height: 100vh;
  height: 100dvh;                /* tracks iOS/Android browser chrome */
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  background: var(--bg-primary);
}

/* =============================================
   PHONE WRAPPER  (header + nav pinned, body scrolls)
   ============================================= */
.phone-wrap {
  width: 100%;
  max-width: var(--shell-max);
  height: 100%;
  min-height: 0;
  position: relative;
  background: var(--bg-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* =============================================
   LOGIN PAGE
   ============================================= */
.login-page {
  width: 100%;
  max-width: var(--shell-max);
  height: 100%;
  margin: 0 auto;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(255,255,255,0.018) 28px, rgba(255,255,255,0.018) 29px),
    repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(255,255,255,0.018) 28px, rgba(255,255,255,0.018) 29px),
    #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px calc(24px + env(safe-area-inset-bottom, 0px));
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.login-lang {
  align-self: flex-end;
  flex-shrink: 0;
  margin: 16px 0 0;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 6px 12px;
  color: #ccc;
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 600;
  transition: border-color .2s;
}
.login-lang:hover { border-color: var(--gold); }
.login-lang svg { width: 14px; height: 14px; }

.login-logo-wrap {
  flex: 1 1 auto;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0 20px;
}

.login-logo-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(var(--accent-rgb),0.28)) drop-shadow(0 0 64px rgba(var(--violet-rgb),0.45));
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.login-brand {
  margin-top: 16px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  /* wordmark carries the brand ramp: pale gold → yellow → purple */
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.22));
}
.lang-th .login-brand { letter-spacing: 0.16em; }

.login-form {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.login-form label {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #777;
  display: block;
  margin-bottom: 6px;
}

.login-form input {
  width: 100%;
  background: #181818;
  border: 1.5px solid #2a2a2a;
  border-radius: var(--radius);
  padding: 14px 16px;
  color: #fff;
  font-size: 15px;
  font-family: 'Inter','Noto Sans Thai',sans-serif;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.login-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.13);
}

.btn-signin {
  width: 100%;
  margin-top: 8px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius);
  padding: 16px;
  color: #666;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.25em;
  cursor: pointer;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.btn-signin:hover,
.btn-signin:active {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.btn-signin:active { transform: scale(0.98); }

.login-error {
  color: var(--danger);
  font-size: 12px;
  text-align: center;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  letter-spacing: 0.05em;
  min-height: 18px;
}

/* =============================================
   SHARED HEADER
   ============================================= */
.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-height: var(--header-h);
  padding: 12px 18px;
  background: var(--bg-primary);
  position: relative;
  z-index: 12;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.top-bar-title {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s;
  color: #aaa;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }

.balance-pill {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}

.lang-badge {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}

/* =============================================
   MAIN CONTENT — the only scroll container
   ============================================= */
.page-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 14px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-content::-webkit-scrollbar { width: 4px; }
.page-content::-webkit-scrollbar-track { background: transparent; }
.page-content::-webkit-scrollbar-thumb { background: #242424; border-radius: 4px; }
.page-content::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }

/* =============================================
   CARDS
   ============================================= */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.card-label {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.badge-running-low {
  background: var(--accent);
  color: var(--ink);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.badge-ok {
  background: var(--success);
  color: #000;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.credit-amount {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.credit-sub {
  font-size: 12px;
  color: var(--text-sec);
  margin-top: 4px;
  margin-bottom: 12px;
}
.credit-warn {
  color: var(--accent-light);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 3px;
}
.credit-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}
.key-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  cursor: pointer;
}
.key-cost-detail {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.key-cost-detail.open { display: flex; }
.key-cost-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-sec);
}
.key-cost-item span:last-child { color: var(--gold); font-weight: 600; }

/* =============================================
   ACTION BUTTONS ROW
   ============================================= */
.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.btn-primary {
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s;
}
.btn-primary:hover { background: var(--accent-light); color: var(--ink); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }

.btn-full {
  grid-column: 1 / -1;
  width: 100%;
}

/* =============================================
   STAT GRID
   ============================================= */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.stat-label {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.stat-value {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.stat-value.sm { font-size: 24px; }
.stat-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* =============================================
   BOTTOM NAV
   ============================================= */
.bottom-nav {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #0d0d0d;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  z-index: 20;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color .2s;
  border-top: 2px solid transparent;
  position: relative;
}
.nav-item.active {
  color: var(--gold);
  border-top-color: var(--gold);
}
.nav-item:hover { color: var(--text-primary); }
.nav-item svg { width: 20px; height: 20px; }

/* =============================================
   SECTION HEADER
   ============================================= */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.section-title {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--brand-grad);
  border-radius: 2px;
}
.see-all {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  cursor: pointer;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .2s;
}
.see-all:hover { color: var(--gold); }

/* =============================================
   TABLE / LIST ITEMS
   ============================================= */
.list-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.list-item:last-child { border-bottom: none; padding-bottom: 0; }
.list-item:first-child { padding-top: 0; }

.item-icon {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.item-info { flex: 1; min-width: 0; }
.item-name {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.item-value {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: right;
  flex-shrink: 0;
}
.item-value.accent { color: var(--accent); }
.item-value.green { color: var(--success); }
.item-value.red { color: var(--danger); }

/* =============================================
   MODAL / OVERLAY
   ============================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  /* --kb is how much of the screen a soft keyboard ate (see trackViewport): the
     sheet is a bottom sheet, so it has to be lifted by exactly that much or the
     MAKE KEY button hides under the keyboard and the browser pans the page */
  padding-bottom: var(--kb, 0px);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal-sheet {
  background: #111;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 430px;
  --sheet-pad-t: 24px;
  --sheet-pad-x: 20px;
  --sheet-pad-b: 40px;
  /* the top space belongs to the sticky bar, never to the sheet: padding here
     leaves a band that the title scrolls through above the bar */
  padding: 0 var(--sheet-pad-x) var(--sheet-pad-b);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,0,.67,0);
  display: flex;
  flex-direction: column;
  /* a bottom sheet never scrolls as a whole - that is what pushed the header
     under the top edge and hid the MAKE button. the bar and the action foot
     stay put, only .sheet-body moves between them. */
  max-height: calc(min(var(--vvh, 100vh), 100dvh) - var(--kb, 0px) - var(--sheet-safe-top, 0px));
  overflow: hidden;
  overscroll-behavior: contain;
}
/* an engine without dvh support still gets a bounded sheet */
@supports not (height: 100dvh) {
  .modal-sheet { max-height: calc(var(--vvh, 100vh) - var(--kb, 0px) - var(--sheet-safe-top, 0px)); }
}
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  /* the scroll has to breathe past the field edges, not under the bars */
  margin: 0 calc(var(--sheet-pad-x) * -1);
  padding: 2px var(--sheet-pad-x) 14px;
}
.sheet-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.modal-overlay.open .modal-sheet {
  transform: translateY(0);
}
.modal-title {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.modal-close {
  /* it lives inside the sticky sheet bar now, so it can never scroll out of reach */
  margin-left: auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 50%;
  cursor: pointer;
  color: #777;
}
.modal-sheet { position: relative; }
/* nothing inside the scroll body may be squashed to make it fit */
.sheet-body > * { flex-shrink: 0; }

/* ---------- sticky sheet bar ----------
   the sheet scrolls inside itself, so the two ways out have to stay pinned.
   nobody should ever have to hunt for the close button after misclicking a plan. */
.sheet-bar {
  position: -webkit-sticky;
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  margin: 0 calc(var(--sheet-pad-x) * -1);
  padding: calc(var(--sheet-pad-t) - 2px + var(--sheet-safe-top, 0px)) var(--sheet-pad-x) 12px;
  background: #151515;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 12px 14px -14px rgba(0,0,0,.95);
}
.sheet-back {
  display: inline-flex; align-items: center; gap: 5px;
  background: #1d1d1d;
  border: 1px solid #2e2e2e;
  border-radius: 999px;
  color: var(--text-sec);
  cursor: pointer;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 13px 7px 9px;
  transition: color .18s, border-color .18s, background .18s;
}
.sheet-back:active { background: #232323; color: #fff; border-color: var(--accent); }
.sheet-back svg { width: 15px; height: 15px; }

/* the action bar is solid: content must never look like it is sliding into it */
.sheet-foot {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 9px;
  margin: 0 calc(var(--sheet-pad-x) * -1) calc(var(--sheet-pad-b) * -1);
  padding: 14px var(--sheet-pad-x) var(--sheet-pad-b);
  background: #0e0e0e;
  border-top: 1px solid var(--border);
}

/* ---------- sheet headings ---------- */
.mk-head { display: flex; align-items: flex-start; gap: 11px; }
.mk-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.09); border: 1px solid rgba(var(--accent-rgb),.26);
  color: var(--accent);
}
.mk-ico svg { width: 18px; height: 18px; }
.mk-ico.ok { background: rgba(34,197,94,.09); border-color: rgba(34,197,94,.26); color: var(--success); }
.mk-txt { min-width: 0; }
.mk-txt .modal-title { margin-bottom: 3px; }
.mk-sub {
  font-size: 11px; line-height: 1.5; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* numbered step row: 01 DURATION ———— 1 Hour */
.mk-step {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-muted);
}
.mk-step i {
  font-style: normal; font-size: 9.5px; letter-spacing: .04em; color: var(--accent-light);
  padding: 2px 5px; border-radius: 4px;
  background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.20);
}
.mk-step .ms-line { flex: 1; height: 1px; min-width: 12px; background: linear-gradient(90deg, var(--border), transparent); }
.mk-step b { color: var(--text-sec); letter-spacing: .08em; font-weight: 700; }

/* ---------- duration rail ----------
   twelve plans read as a keypad, not as twelve identical bricks */
.dur-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dur-btn {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 46px; padding: 7px 2px;
  background: #161616; border: 1px solid #262626; border-radius: 9px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .1s;
}
.dur-btn:active { transform: scale(.965); }
.dur-btn:hover { background: #1a1a1a; border-color: #343434; }
.dur-code {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-primary);
}
.dur-price { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dur-btn.selected {
  background: rgba(var(--accent-rgb),.06); border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.22), 0 8px 20px -16px rgba(var(--accent-rgb),.85);
}
.dur-btn.selected .dur-code { color: var(--accent-light); }
.dur-btn.selected .dur-price { color: var(--accent); }
.dur-btn.selected::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px rgba(var(--accent-rgb),.85);
}

/* ---------- quantity shortcuts ---------- */
.qty-chips { display: flex; gap: 6px; }
.qchip {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 0; cursor: pointer;
  background: #161616; border: 1px solid #262626; border-radius: 7px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-sec);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .16s, color .16s, background .16s;
}
.qchip:active { background: #1e1e1e; }
.qchip.on { border-color: var(--accent); color: var(--accent-light); background: rgba(var(--accent-rgb),.06); }

.field-hint { font-size: 10.5px; line-height: 1.5; color: var(--text-muted); }

/* the money strip: three figures side by side instead of a tall list */
.sum-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: #0f0f0f; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
}
.ss-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-cell span {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-cell b {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 14.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}

.sum-warn {
  font-size: 10.5px; line-height: 1.45; color: var(--danger);
  background: rgba(var(--violet-light-rgb),.08); border: 1px solid rgba(var(--violet-light-rgb),.22);
  border-radius: 5px; padding: 6px 8px;
}
.sum-warn[hidden] { display: none; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.form-group input, .form-group select, .qty-row input {
  background: #1a1a1a;
  border: 1.5px solid #2a2a2a;
  border-radius: var(--radius);
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
  font-family: 'Inter','Noto Sans Thai',sans-serif;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}
.form-group input:focus, .form-group select:focus, .qty-row input:focus {
  border-color: var(--gold);
}
.form-group select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7d7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px 15px;
}

/* =============================================
   KEY BADGE
   ============================================= */
.key-badge {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.key-badge.active { background: rgba(34,197,94,0.15); color: var(--success); border: 1px solid rgba(34,197,94,0.3); }
.key-badge.expired { background: rgba(var(--violet-light-rgb),0.12); color: var(--danger); border: 1px solid rgba(var(--violet-light-rgb),0.25); }
.key-badge.unused { background: rgba(var(--accent-rgb),0.08); color: var(--gold); border: 1px solid rgba(var(--accent-rgb),0.26); }
.key-badge.disabled { background: rgba(var(--violet-rgb),0.16); color: var(--violet-light); border: 1px solid rgba(var(--violet-rgb),0.34); }

/* =============================================
   SELLER API STRIP
   ============================================= */
.up-strip {
  padding: 11px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.up-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.up-head b {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-sec);
}
.up-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #4a4a4a; box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
.up-dot.on { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.13); animation: up-pulse 2.6s ease-in-out infinite; }
.up-dot.off { background: var(--danger); box-shadow: 0 0 0 3px rgba(var(--violet-light-rgb),.15); }
@keyframes up-pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
@media (prefers-reduced-motion: reduce) { .up-dot.on { animation: none } }
.up-age { font-size: 10px; color: var(--text-muted); }
.up-head .mini-btn { margin-left: auto; }
.up-err {
  margin-top: 9px; font-size: 10.5px; line-height: 1.5; color: var(--danger);
  background: rgba(var(--violet-light-rgb),.08); border: 1px solid rgba(var(--violet-light-rgb),.22);
  border-radius: 5px; padding: 6px 8px;
}
.up-nums { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 11px; }
.up-nums span {
  display: flex; align-items: baseline; gap: 5px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.up-nums b {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .03em; color: var(--gold);
}
.up-foot { margin-top: 9px; font-size: 10px; line-height: 1.5; color: #585858; word-break: break-word; }

/* bound devices + seller note on a key row */
.key-meta.devs { flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.km.dev {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #9a9a9a;
  background: #151515; border: 1px solid #242424; border-radius: 4px; padding: 2px 6px;
}
.km.dev.live { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.km.quiet { font-style: italic; text-transform: none; letter-spacing: .02em; }
.key-note { margin-top: 6px; font-size: 10px; line-height: 1.5; color: #6a6a6a; word-break: break-word; }

/* =============================================
   RESELLER TABLE
   ============================================= */
.reseller-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.reseller-row:last-child { border-bottom: none; }
.reseller-avatar {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-dark), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.reseller-info { flex: 1; min-width: 0; }
.reseller-name {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.reseller-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.reseller-bal {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  text-align: right;
}
.reseller-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  justify-content: flex-end;
}
.mini-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 4px 8px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  color: #aaa;
  transition: all .2s;
}
.mini-btn.danger { color: var(--danger); border-color: rgba(var(--violet-light-rgb),0.3); }
.mini-btn.success { color: var(--success); border-color: rgba(34,197,94,0.3); }
.mini-btn:hover { border-color: var(--gold); color: var(--gold); }

/* =============================================
   SETTINGS
   ============================================= */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-label {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.setting-value {
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toggle */
.toggle {
  width: 44px; height: 24px;
  background: #2a2a2a;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.toggle.on { background: var(--gold); }
.toggle::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform .2s;
}
.toggle.on::after { transform: translateX(20px); }

/* =============================================
   UPDATES / NOTIFICATIONS
   ============================================= */
.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 6px;
  flex-shrink: 0;
}
.notif-dot.read { background: var(--text-muted); }
.notif-title {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.notif-body { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 5px; }

/* =============================================
   LEDGER / ACTIVITY
   ============================================= */
.empty-state {
  text-align: center;
  padding: 24px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* =============================================
   MAKE KEYS FORM
   ============================================= */
.key-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.key-type-btn {
  background: #1a1a1a;
  border: 1.5px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
}
.key-type-btn .kt-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.key-type-btn .kt-price {
  font-size: 11px;
  color: var(--gold);
  margin-top: 2px;
}
.key-type-btn.selected, .key-type-btn:hover {
  border-color: var(--gold);
  background: rgba(var(--violet-rgb),0.06);
}

/* =============================================
   TOAST
   ============================================= */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: #1a1a1a;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 8px;
  padding: 10px 20px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  z-index: 999;
  transition: transform .3s cubic-bezier(.32,0,.67,0);
  white-space: nowrap;
  max-width: 90vw;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--danger); color: var(--danger); }

/* =============================================
   SCROLLABLE KEY LIST
   ============================================= */
.key-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.key-row:last-child { border-bottom: none; }
.key-code {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.key-code:hover { color: var(--gold); }
.key-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

/* =============================================
   SHOP PAGE (RESELLER)
   ============================================= */
.shop-package {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color .2s;
}
.shop-package:hover { border-color: var(--gold); }
.pkg-info { min-width: 0; }
.pkg-name {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.pkg-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pkg-price {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--gold);
  white-space: nowrap;
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn .25s ease both; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 600px) {
  #app { background: #050505; }
  .phone-wrap, .login-page {
    border-left: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
  }
}
/* =========================================================
   SECTION 2 — PANEL BUILD (cut frames, scanlines, tabs)
   ========================================================= */

/* ---------- angular corner cuts ---------- */
.cut-br  { border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%); }
.cut-tr  { border-radius: 0 !important; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); }
.cut-tl  { border-radius: 16px 16px 0 0 !important; clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px); }
.cut-card {
  border-radius: 0 !important;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px),
    var(--bg-card);
}
.buy-cut {
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

/* ---------- login extras ---------- */
.login-form input.cut-br { border-radius: 0; }
.login-form input.accent-outline { border-color: rgba(var(--accent-rgb),0.75); box-shadow: 0 0 22px rgba(var(--accent-rgb),0.08) inset; }
.login-form input.is-focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); }
.pass-wrap { position: relative; }
.pass-eye {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  width: 44px; background: transparent; border: none; cursor: pointer;
  color: #555; display: flex; align-items: center; justify-content: center;
  transition: color .2s;
}
.pass-eye:hover { color: var(--gold); }
.pass-eye svg { width: 18px; height: 18px; }
.login-form .pass-wrap input { padding-right: 52px; }
.form-group .pass-wrap input { padding-right: 46px; }

.btn-signin.cut-br { border-radius: 0; letter-spacing: .3em; font-size: 15px; }

.login-hint {
  margin-top: 14px;
  border-top: 1px dashed #1e1e1e;
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.lh-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 11px; letter-spacing: .15em; color: #4d4d4d;
}
.lh-row b { color: #7a7a7a; font-weight: 700; letter-spacing: .05em; cursor: pointer; transition: color .2s; }
.lh-row b:hover { color: var(--gold); }

/* ---------- header extras ---------- */
.bell-btn { position: relative; }
.bell-btn .dot {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--gold); color: #000;
  border-radius: 8px; font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
}
.top-bar-actions .balance-pill { letter-spacing: .04em; }

/* ---------- glitch-ish numerals ---------- */
.glitch { position: relative; text-shadow: 2px 0 rgba(var(--violet-rgb),.55), -2px 0 rgba(var(--accent-rgb),.32); }

/* ---------- dividers & text tones ---------- */
.dash-divider { border: none; border-top: 1px dashed #262626; margin: 12px 0; }
.accent-note { color: var(--gold); opacity: .85; margin-top: 8px; }
.accent-txt { color: var(--gold); }
.red-txt  { color: var(--danger); }
.link { color: var(--text-muted); cursor: pointer; font-size: 10px; letter-spacing: .15em; transition: color .2s; }
.link:hover { color: var(--gold); }
.chev { display: flex; transition: transform .25s; color: var(--text-muted); }
.chev svg { width: 16px; height: 16px; }
.chev.open { transform: rotate(180deg); color: var(--gold); }

.key-cost-item.total { padding-top: 8px; border-top: 1px dashed #262626; color: #fff; font-weight: 600; }

/* ---------- sold breakdown card ---------- */
.sold-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sold-list { display: flex; flex-direction: column; gap: 9px; }
.sold-row { display: grid; grid-template-columns: 62px 1fr 58px 38px; align-items: center; gap: 8px; font-size: 12px; color: var(--text-sec); }
.sr-type { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-weight: 600; letter-spacing: .05em; color: #ddd; }
.sr-bar { height: 4px; background: #1e1e1e; border-radius: 3px; overflow: hidden; }
.sr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); border-radius: 3px; }
.sr-qty { text-align: right; font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-weight: 700; color: #fff; }
.sr-pct { text-align: right; font-size: 11px; color: var(--text-muted); }

/* ---------- layout helpers ---------- */
.row-gap { display: flex; flex-direction: column; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.pad-0 { padding: 0; }
.pad { padding: 12px 16px; }
.card-label .cl-ico { display: flex; align-items: center; gap: 8px; }
.card-label .cl-ico svg { width: 14px; height: 14px; color: var(--text-sec); }

/* ---------- search + filter chips ---------- */
.search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 0 12px; height: 44px;
}
.search-bar svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.search-bar input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-size: 14px; font-family: 'Inter','Noto Sans Thai',sans-serif; height: 100%;
}
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  background: #131313; border: 1px solid var(--border); color: var(--text-muted);
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  padding: 7px 11px; cursor: pointer; transition: all .2s;
}
.chip span { background: #222; color: #888; border-radius: 3px; padding: 0 5px; font-size: 10px; }
.chip:hover { border-color: #444; color: #ccc; }
.chip.on { border-color: var(--gold); color: var(--gold); background: rgba(var(--violet-rgb),0.06); }
.chip.on span { background: var(--accent); color: var(--ink); }

/* ---------- key rows ---------- */
.key-row.pad { border-bottom: 1px solid var(--border); padding: 14px 16px; }
.key-row.pad:last-child { border-bottom: none; }
.key-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.key-code { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.key-code svg { width: 13px; height: 13px; opacity: .45; }
.kt-badge {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #ccc; background: #1c1c1c; border: 1px solid #2b2b2b;
  padding: 2px 7px; border-radius: 4px;
}
.km { font-size: 11px; color: var(--text-muted); }
.key-hwid { margin-top: 6px; font-size: 10px; letter-spacing: .1em; color: #4f4f4f; font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; text-transform: uppercase; }
.row-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mini-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- reseller cards ---------- */
.res-head { display: flex; align-items: center; gap: 12px; }
.reseller-avatar.lg { width: 44px; height: 44px; font-size: 19px; border-radius: 10px; }
.res-bal { text-align: right; }
.rb-label { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 9px; letter-spacing: .2em; color: var(--text-muted); }
.rb-value { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 18px; font-weight: 700; color: var(--gold); }
.res-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 14px 0 12px; padding: 10px 0; border-top: 1px dashed #262626; border-bottom: 1px dashed #262626;
}
.res-stats div { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.res-stats span { display: block; font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 0; }
.res-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- stat card variants ---------- */
.stat-card.sm { padding: 12px; }
.stat-card.sm .stat-value { font-size: 22px; }
.stat-card { border-radius: 0; }

/* ---------- forms ---------- */
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-sec); cursor: pointer; }
.check-row input { accent-color: var(--gold); width: 15px; height: 15px; }
.cost-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cost-row .cr-name { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 13px; font-weight: 600; color: #ddd; }
.cost-row .cr-name em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); }
.cost-row input {
  width: 96px; background: #1a1a1a; border: 1px solid var(--border); color: var(--gold);
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-weight: 700; font-size: 14px;
  padding: 8px 10px; border-radius: 6px; outline: none;
}
.cost-row input:focus { border-color: var(--gold); }
textarea {
  background: #1a1a1a; border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; color: #fff; font-size: 14px; font-family: 'Inter','Noto Sans Thai',sans-serif;
  outline: none; resize: vertical; width: 100%;
}
textarea:focus { border-color: var(--gold); }

/* ---------- modal extras ---------- */
.modal-summary { display: flex; flex-direction: column; gap: 7px; background: #0f0f0f; border: 1px solid var(--border); padding: 12px 14px; border-radius: 8px; }
.modal-summary > div { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-sec); }
.modal-summary b { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 15px; color: #fff; }

/* ---------- the panel that drops the new seller API codes ---------- */
.drop-list {
  display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #0f0f0f; border: 1px solid var(--border); padding: 10px; border-radius: 8px;
}
.drop-row { display: flex; align-items: center; gap: 9px; padding: 3px 2px; }
.drop-n {
  flex: 0 0 auto; width: 20px; text-align: right;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 10px; color: #5a5a5a;
}
.drop-code {
  flex: 1; min-width: 0; cursor: pointer;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .08em; color: var(--accent); word-break: break-all;
}
.drop-code:active { color: var(--accent-light); }
.drop-row .mini-btn { flex: 0 0 auto; }
.qty-row { display: flex; align-items: center; gap: 8px; }
.qty-row input {
  flex: 1; text-align: center; font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 17px; font-weight: 700;
}
.qty-row .mini-btn { min-width: 38px; padding: 9px 0; font-size: 16px; }
.btn-secondary.danger { color: var(--danger); border-color: rgba(var(--violet-light-rgb),0.3); }
.btn-secondary.danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(var(--violet-light-rgb),0.06); }
.danger-btn { background: var(--danger) !important; color: #fff !important; }
.danger-btn:hover { background: #c98cff !important; }

/* ---------- notifications ---------- */
.notif-body-wrap { flex: 1; min-width: 0; }
.notif-title { display: flex; align-items: center; gap: 8px; }
.pin {
  font-size: 9px; letter-spacing: .12em; background: rgba(var(--violet-rgb),.12); color: var(--gold);
  border: 1px solid rgba(var(--violet-rgb),.3); border-radius: 3px; padding: 1px 5px; font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
}
.notif-text { font-size: 12px; color: var(--text-sec); margin-top: 4px; line-height: 1.55; }

/* ---------- reseller home / shop ---------- */
.balance-amount {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 44px; font-weight: 700; color: var(--gold);
  line-height: 1.05; margin-bottom: 14px; letter-spacing: -0.01em;
  text-shadow: 2px 0 rgba(var(--violet-rgb),.55), -2px 0 rgba(var(--accent-rgb),.3);
}
.pkg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pkg-right .mini-btn { padding: 6px 12px; font-size: 11px; }
.steps { display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-sec); line-height: 1.5; }
.step b {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 4px;
  background: rgba(var(--violet-rgb),.1); color: var(--gold); border: 1px solid rgba(var(--violet-rgb),.28);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 11px;
}
.foot-note { text-align: center; font-size: 10.5px; color: #3f3f3f; letter-spacing: .08em; padding: 6px 0 4px; font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; }

.danger-zone { border-color: rgba(var(--violet-light-rgb),0.22); }

/* =========================================================
   SECTION 3 — SHELL POLISH (header brand, analytics, feel)
   ========================================================= */

/* ---------- header brand ---------- */
.brand-thumb {
  width: 34px; height: 34px; flex-shrink: 0;
  object-fit: contain; padding: 3px;
  background: #131313; border: 1px solid #262626; border-radius: 9px;
  cursor: pointer; transition: border-color .2s, transform .2s;
}
.brand-thumb:hover { border-color: var(--accent); transform: translateY(-1px); }
.brand-block { flex: 1; min-width: 0; }
.top-bar-title { font-size: 19px; line-height: 1.15; }
.brand-sub {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.top-bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.5), rgba(var(--violet-rgb),.55), transparent);
}

/* ---------- credit runway ---------- */
.runway { margin-top: 14px; }
.rw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--text-muted); }
.rw-head b { color: var(--accent-light); font-size: 11px; letter-spacing: .12em; }
.rw-bar { height: 6px; background: #1b1b1b; border: 1px solid #262626; border-radius: 4px; overflow: hidden; }
.rw-bar i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-dark) 45%, var(--accent));
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.5); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.rw-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px;
  font-size: 10.5px; letter-spacing: .06em; color: #4f4f4f; }
.rw-burn { color: var(--text-muted); }

/* ---------- sparkline ---------- */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.spark i { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(var(--violet-rgb),.85), rgba(var(--violet-deep-rgb),.3));
  transition: filter .2s, transform .2s; }
.spark i:hover { filter: brightness(1.6); }
.spark i.now { background: linear-gradient(180deg, var(--accent-light), var(--accent-dark));
  box-shadow: 0 0 14px rgba(var(--accent-rgb),.45); }
.spark-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--text-muted); }
.spark-now { color: var(--accent-light); }

/* ---------- cards ---------- */
.card { transition: border-color .2s; }
.cut-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.stat-card { position: relative; overflow: hidden; transition: border-color .2s, transform .2s; }
.stat-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), transparent); opacity: .6; }
.stat-card:hover { border-color: #3a3a3a; }
.stat-card:active { transform: scale(.995); }

/* ---------- buttons ---------- */
.btn-primary {
  background: linear-gradient(180deg, var(--accent-light), var(--accent) 42%, var(--accent-dark));
  box-shadow: 0 6px 18px rgba(var(--accent-rgb),.2), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--accent-light), var(--accent) 60%);
  box-shadow: 0 8px 26px rgba(var(--accent-rgb),.34), inset 0 1px 0 rgba(255,255,255,.34); }
.btn-primary:active { transform: translateY(1px) scale(.995); }
.btn-secondary { background: linear-gradient(180deg, #171717, #101010); }
.btn-secondary:hover { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.3), 0 6px 18px rgba(0,0,0,.5); }

/* ---------- chips / search / rows ---------- */
.chip { border-radius: 999px; padding: 6px 12px; }
.chip.on { background: linear-gradient(180deg, rgba(var(--violet-rgb),.2), rgba(var(--violet-rgb),.05)); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.42); }
.search-bar { border-radius: 8px; transition: border-color .2s, box-shadow .2s; }
.search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.11); }
.key-row.pad:hover, .list-item:hover { background: rgba(255,255,255,.016); }
.list-item { transition: background .18s; }
@keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.badge-running-low { animation: softPulse 2.6s ease-in-out infinite; }

/* ---------- bottom nav ---------- */
.nav-item { border-top: none; gap: 3px; transition: color .2s, background .25s; }
.nav-item::before { content: ''; position: absolute; top: 0; left: 50%; width: 28px; height: 2px;
  border-radius: 0 0 3px 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
  transform: translateX(-50%) scaleX(0); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.nav-item.active { color: var(--accent); background: linear-gradient(180deg, rgba(var(--violet-rgb),.1), transparent 72%); }
.nav-item.active::before { transform: translateX(-50%) scaleX(1); }
.nav-item svg { transition: transform .18s; }
.nav-item:active svg { transform: scale(.86); }

/* ---------- modal / toast ---------- */
.modal-overlay { background: rgba(0,0,0,.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-sheet { background: linear-gradient(180deg, #151515, #0e0e0e); box-shadow: 0 -18px 50px rgba(0,0,0,.75); }
/* the grabber is gone on purpose: the sheet no longer scrolls as a whole and a
   BACK button reads better on a phone than a grey pill nobody can tap */
.modal-sheet::before { display: none; }
.toast { background: rgba(18,18,18,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--violet-rgb),.16); }

/* ---------- login atmosphere ---------- */
.login-page::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(62% 42% at 50% 30%, rgba(var(--violet-rgb),.1), transparent 72%); }

/* ---------- a11y ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* =========================================================
   SECTION 4 — ICON SCALE + COMPACT PRO PASS
   (final layer: keeps every element tight and predictable)
   ========================================================= */

/* ---------- icon scale (no icon may exceed its box) ---------- */
svg { flex-shrink: 0; }
.phone-wrap svg, .login-page svg { display: block; }
.icon-btn svg            { width: 17px; height: 17px; }
.lang-badge svg,
.login-lang svg          { width: 12px; height: 12px; }
.btn-primary svg,
.btn-secondary svg       { width: 15px; height: 15px; }
.mini-btn svg            { width: 11px; height: 11px; }
.see-all svg,
.link svg                { width: 12px; height: 12px; }
.chev svg                { width: 15px; height: 15px; }
.modal-close svg         { width: 13px; height: 13px; }
.item-icon svg           { width: 15px; height: 15px; }
.key-code svg            { width: 12px; height: 12px; }
.search-bar svg          { width: 15px; height: 15px; }
.card-label .cl-ico svg  { width: 13px; height: 13px; }
.pass-eye svg            { width: 16px; height: 16px; }
.nav-item svg            { width: 18px; height: 18px; }

/* ---------- shell metrics ---------- */
:root { --nav-h: 58px; --header-h: 56px; }
.top-bar { padding: 9px 14px; }
.top-bar-title { font-size: 17px; }
.brand-thumb { width: 30px; height: 30px; border-radius: 8px; }
.brand-sub { font-size: 9px; letter-spacing: .16em; }
.icon-btn { width: 32px; height: 32px; border-radius: 7px; }
.lang-badge { padding: 5px 8px; font-size: 10.5px; }
.balance-pill { padding: 5px 10px; font-size: 13px; }
.page-content { padding: 12px 12px 18px; gap: 10px; }
.row-gap { gap: 10px; }
.stack { gap: 10px; }
.nav-item { font-size: 9px; letter-spacing: .09em; }

/* ---------- cards & typography ---------- */
.card { padding: 14px; }
.card-label { font-size: 10px; letter-spacing: .18em; margin-bottom: 8px; }
.section-title { font-size: 10px; }
.see-all { font-size: 10px; }
.credit-amount { font-size: 36px; }
.credit-sub { font-size: 11.5px; margin-bottom: 10px; }
.credit-warn { font-size: 12.5px; }
.credit-note { font-size: 11.5px; }
.divider, .dash-divider { margin: 10px 0; }
.empty-state { font-size: 12px; padding: 20px 0; }
.foot-note { font-size: 9.5px; }

/* ---------- stat cards ---------- */
.stat-grid, .action-row { gap: 10px; }
.stat-card { padding: 12px; }
.stat-label { font-size: 9.5px; letter-spacing: .18em; margin-bottom: 5px; }
.stat-value { font-size: 26px; }
.stat-value.sm { font-size: 20px; }
.stat-card.sm { padding: 10px 12px; }
.stat-card.sm .stat-value { font-size: 19px; }
.stat-sub { font-size: 10.5px; margin-top: 2px; }

/* ---------- buttons ---------- */
.btn-primary, .btn-secondary { padding: 12px 14px; font-size: 12.5px; letter-spacing: .1em; }
.mini-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 25px; padding: 4px 9px; font-size: 9.5px; letter-spacing: .08em; }
.row-actions, .res-actions { gap: 5px; margin-top: 9px; }
.res-actions { margin-top: 0; }

/* ---------- forms ---------- */
.form-group { gap: 5px; }
.form-group label { font-size: 9.5px; letter-spacing: .16em; }
.form-group input, .form-group select, textarea { padding: 10px 12px; font-size: 13px; }
textarea { line-height: 1.5; }
.check-row { font-size: 12px; }
.check-row input { width: 14px; height: 14px; }
.search-bar { height: 40px; padding: 0 11px; }
.search-bar input { font-size: 13px; }
.chip { font-size: 10px; padding: 5px 10px; }
.chip span { font-size: 9.5px; padding: 0 4px; }
.cost-row .cr-name { font-size: 12px; }
.cost-row .cr-name em { font-size: 10.5px; }
.cost-row input { width: 82px; padding: 6px 9px; font-size: 13px; }
.setting-row { padding: 11px 0; }
.setting-label { font-size: 12.5px; }
.setting-value { font-size: 12px; }
.toggle { width: 40px; height: 22px; }
.toggle::after { width: 16px; height: 16px; }
.toggle.on::after { transform: translateX(18px); }

/* ---------- lists / rows ---------- */
.list-item { padding: 10px 0; gap: 10px; }
.item-icon { width: 32px; height: 32px; border-radius: 7px; }
.item-name, .reseller-name { font-size: 13px; }
.item-sub, .reseller-meta { font-size: 10.5px; }
.item-value { font-size: 13px; }
.key-row.pad { padding: 11px 13px; }
.key-code { font-size: 12.5px; }
.kt-badge { font-size: 9.5px; padding: 2px 6px; }
.km { font-size: 10.5px; }
.key-hwid { font-size: 9.5px; }
.reseller-avatar { width: 34px; height: 34px; font-size: 14px; border-radius: 7px; }
.reseller-avatar.lg { width: 38px; height: 38px; font-size: 16px; border-radius: 8px; }
.res-bal .rb-label { font-size: 8.5px; }
.rb-value { font-size: 15px; }
.res-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 11px 0 10px; padding: 9px 0; }
.res-stats div { font-size: 8.5px; }
.res-stats span { font-size: 15px; }

/* ---------- notifications ---------- */
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; }
.notif-dot { margin-top: 5px; width: 7px; height: 7px; }
.notif-title { font-size: 12.5px; gap: 6px; }
.notif-text { font-size: 11.5px; margin-top: 3px; }
.notif-time { font-size: 10px; margin-top: 4px; }
.notif-item .mini-btn { margin-top: 1px; }
.pin { font-size: 8px; padding: 1px 4px; }

/* ---------- sold / analytics ---------- */
.sold-head { margin-bottom: 8px; }
.sold-row { grid-template-columns: 54px 1fr 50px 32px; gap: 7px; font-size: 11px; }
.sr-type { font-size: 11px; }
.sr-bar { height: 3px; }
.sr-qty { font-size: 12px; }
.sr-pct { font-size: 10px; }
.spark { height: 54px; gap: 3px; }
.spark-foot { font-size: 9.5px; margin-top: 7px; }
.runway { margin-top: 12px; }
.rw-foot { font-size: 9.5px; }

/* ---------- modal ---------- */
.modal-sheet { --sheet-pad-t: 20px; --sheet-pad-x: 16px; --sheet-pad-b: calc(26px + env(safe-area-inset-bottom, 0px));
  padding: 0 var(--sheet-pad-x) var(--sheet-pad-b); }
.sheet-body { gap: 9px; }
.modal-title { font-size: 16px; }
.modal-close { width: 27px; height: 27px; }
.modal-summary { padding: 10px 12px; gap: 5px; }
.modal-summary > div { font-size: 12px; }
.modal-summary b { font-size: 13px; }
.key-type-grid { gap: 7px; }
.key-type-btn { padding: 9px 8px; }
.key-type-btn .kt-name { font-size: 12.5px; }
.key-type-btn .kt-price { font-size: 10px; }
.qty-row .mini-btn { min-height: 34px; font-size: 14px; }
.qty-row input { padding: 8px 10px; font-size: 15px; }

/* ---------- reseller shop / home ---------- */
.balance-amount { font-size: 34px; margin-bottom: 12px; }
.shop-package { padding: 13px 14px; }
.pkg-name { font-size: 13.5px; }
.pkg-detail { font-size: 11px; }
.pkg-price { font-size: 15px; }
.steps { gap: 8px; }
.step { font-size: 11.5px; gap: 9px; }
.step b { width: 17px; height: 17px; font-size: 9.5px; }

/* ---------- login ---------- */
.login-page { padding: 0 22px calc(22px + env(safe-area-inset-bottom, 0px)); }
.login-logo-img { width: 132px; height: 132px; }
.login-brand { font-size: 11.5px; letter-spacing: .34em; margin-top: 14px; }
.login-form { gap: 13px; }
.login-form label { font-size: 10px; letter-spacing: .2em; margin-bottom: 5px; }
.login-form input { padding: 13px 14px; font-size: 14px; }
.btn-signin { padding: 14px; font-size: 13.5px; }
.lh-row { font-size: 9.5px; }
.login-error { font-size: 11.5px; min-height: 16px; }

/* =========================================================
   SECTION 5 — CONSOLE LAYOUT (sidebar ≥900px) + depth polish
   ========================================================= */

/* ---------- shell structure (mobile first) ---------- */
.app-shell { flex-direction: column; }
.shell-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
.sidebar { display: none; }
.tbl-head { display: none; }
.page-content { position: relative; z-index: 1; }

/* ---------- ambient depth ---------- */
.phone-wrap::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 240px; pointer-events: none;
  background: radial-gradient(78% 100% at 50% 0%, rgba(var(--violet-rgb),.085), transparent 68%);
}

/* ---------- typography / state polish ---------- */
.credit-amount, .balance-amount, .stat-value, .item-value, .rb-value,
.pkg-price, .balance-pill, .modal-summary b, .sr-qty, .key-code, .cost-row input {
  font-variant-numeric: tabular-nums;
}
.card { box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.btn-primary:disabled, .btn-secondary:disabled, .mini-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.reseller-avatar { box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.kt-badge, .key-badge { letter-spacing: .09em; }
.item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.key-badge.active { box-shadow: 0 0 0 3px rgba(34,197,94,.07); }
.key-badge.unused { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.07); }

/* ---------- sidebar (visible from 900px up) ---------- */
.sb-brand { display: flex; align-items: center; gap: 10px; }
.sb-brand-txt { min-width: 0; }
.sb-name { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #ececec; white-space: nowrap; }
.sb-role { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #5c5c5c; margin-top: 2px; }
.sb-quick { display: flex; flex-direction: column; gap: 8px; }
.sb-quick .btn-primary, .sb-quick .btn-secondary { width: 100%; padding: 10px 12px; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sb-cap { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .24em; color: #474747; padding: 6px 10px; }
.sb-item {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: #8c8c8c; transition: background .18s, color .18s;
}
.sb-item:hover { background: #131313; color: #ddd; }
.sb-item.active { color: var(--accent); background: linear-gradient(90deg, rgba(var(--violet-rgb),.22), rgba(var(--violet-rgb),.01)); }
.sb-item.active::before { content: ''; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.sb-item em { margin-left: auto; font-style: normal; background: var(--accent); color: var(--ink);
  font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; letter-spacing: 0; }
.sb-foot { border-top: 1px solid #1b1b1b; padding-top: 12px; }
.sb-user { display: flex; align-items: center; gap: 9px; }
.sb-user-txt { flex: 1; min-width: 0; }
.sb-uname { font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 12.5px; font-weight: 700; color: #e8e8e8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-usub { font-size: 10px; color: #5f5f5f; letter-spacing: .06em; }
.sb-foot .icon-btn { width: 28px; height: 28px; }

/* ---------- ≥900px : real admin console ---------- */
@media (min-width: 900px) {
  #app {
    background:
      radial-gradient(52% 38% at 18% 0%, rgba(var(--violet-rgb),.06), transparent 70%),
      repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.011) 34px 35px),
      #070707;
  }
  .phone-wrap {
    max-width: 1260px; width: 100%;
    border-left: 1px solid #161616; border-right: 1px solid #161616;
    box-shadow: 0 0 90px rgba(0,0,0,.7);
  }
  .app-shell { flex-direction: row; }
  .sidebar {
    display: flex; flex-direction: column; gap: 18px;
    width: 250px; flex: 0 0 250px; padding: 18px 14px;
    background: #0b0b0b; border-right: 1px solid #1b1b1b; overflow-y: auto;
  }
  .bottom-nav { display: none; }
  .shell-main { min-width: 0; }
  .top-bar { padding: 12px 22px; }
  .top-bar-title { font-size: 19px; }
  .brand-thumb { width: 34px; height: 34px; }

  .page-content { display: grid; gap: 14px; padding: 18px 22px 34px; align-content: start; }
  .page-content[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
  .page-content[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-content > .wide, .page-content > .row-gap, .page-content > .section-header { grid-column: 1 / -1; }
  .page-content > .stat-grid { grid-column: span 1; }

  /* keys become a real table */
  .tbl-head { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1.3fr) auto; gap: 14px;
    padding: 0 14px 7px; font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 9.5px; font-weight: 700;
    letter-spacing: .18em; color: #585858; text-transform: uppercase; }
  .tbl-head span:last-child { text-align: right; }
  .key-row.pad { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1.3fr) auto;
    grid-template-areas: "code meta act" "devs meta act" "note note act"; align-items: center; gap: 2px 14px; padding: 12px 14px; }
  .key-row.pad .key-top   { grid-area: code; }
  .key-row.pad .key-meta  { grid-area: meta; }
  .key-row.pad .key-meta.devs { grid-area: devs; margin-top: 0; }
  .key-row.pad .key-note  { grid-area: note; margin-top: 0; }
  .key-row.pad .key-hwid  { grid-area: devs; margin-top: 0; }
  .key-row.pad .row-actions { grid-area: act; margin-top: 0; justify-content: flex-end; max-width: 264px; }

  /* reseller cards get breathing room */
  .reseller-row, .list-item { padding: 11px 0; }
  .res-head { gap: 14px; }

  /* modal becomes a centred dialog */
  .modal-overlay { align-items: center; padding: 26px; }
  .modal-overlay .modal-sheet { --sheet-pad-t: 24px; --sheet-pad-x: 22px; --sheet-pad-b: 24px; max-width: 520px; border-radius: 14px;
    border-bottom: 1px solid var(--border); padding: 0 var(--sheet-pad-x) var(--sheet-pad-b); transform: translateY(10px) scale(.985);
    max-height: calc(min(var(--vvh, 100vh), 100dvh) - var(--kb, 0px) - 52px); }
  .sheet-bar { border-radius: 14px 14px 0 0; }
  .sheet-body { gap: 12px; }
  .sheet-foot { background: #0e0e0e; }
  .modal-overlay.open .modal-sheet { transform: none; }
}

/* ---------- ≥1180px : 3-column dashboards ---------- */
@media (min-width: 1180px) {
  .page-content[data-cols="2"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-content[data-cols="2"] .stat-grid { grid-column: span 1; }
}

/* ---------- desktop split login ---------- */
@media (min-width: 900px) {
  .login-page {
    max-width: 900px; flex-direction: row; align-items: center; gap: 40px;
    padding: 48px 52px; border: 1px solid #161616;
    background: radial-gradient(58% 70% at 22% 30%, rgba(var(--violet-rgb),.14), transparent 66%),
                radial-gradient(40% 44% at 84% 78%, rgba(var(--accent-rgb),.05), transparent 70%), #0a0a0a;
  }
  .login-lang { position: absolute; top: 20px; right: 22px; margin: 0; }
  .login-logo-wrap { flex: 1; padding: 0; min-height: 0; }
  .login-logo-img { width: 190px; height: 190px; }
  .login-brand { font-size: 13px; }
  .login-form { flex: 0 0 350px; width: 350px; }
}

/* =========================================================
   SECTION 6 — live server state (busy bar, api rows, 3-up actions)
   ========================================================= */

/* ---------- request in flight ---------- */
body.busy { cursor: progress; }
body.busy button,
body.busy [data-act] { pointer-events: none; }
body.busy .page-content { opacity: .72; transition: opacity .16s; }
body.busy::after {
  content: ''; position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: min(320px, 60vw); height: 2px; z-index: 90;
  background: linear-gradient(90deg, transparent, var(--accent), var(--violet), transparent);
  animation: busyslide 1s linear infinite;
}
@keyframes busyslide { 0% { opacity: .25; } 50% { opacity: 1; } 100% { opacity: .25; } }

/* ---------- server / api rows ---------- */
.api-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 0;
  border-top: 1px solid #191919; font-size: 11px; color: #8f8f8f;
}
.api-row:first-of-type { margin-top: 4px; }
.api-row b {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--accent-light); background: rgba(var(--violet-rgb),.1);
  border: 1px solid rgba(var(--violet-rgb),.24); border-radius: 4px; padding: 2px 6px; flex: 0 0 auto;
}
.api-row code {
  font-family: 'Inter', monospace; font-size: 11px; color: #dcdcdc;
  background: #131313; border: 1px solid #212121; border-radius: 4px; padding: 2px 6px; flex: 0 0 auto;
}
.api-row span { margin-left: auto; text-align: right; font-size: 10.5px; color: #6a6a6a; }

/* ---------- three-up danger row ---------- */
.action-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.action-row-3 .btn-secondary { padding: 11px 8px; font-size: 11.5px; letter-spacing: .1em; }
.action-row-3 .btn-secondary svg { width: 14px; height: 14px; }

@media (min-width: 900px) {
  .action-row-3 { max-width: none; }
}

/* ============================================================
   SECTION 7 — THAI LANGUAGE PASS
   Thai carries tone marks above and below the baseline and does not
   space its words, so the tracked-out uppercase look is dialled back,
   the leading goes up and the tiny label floor is lifted.
   ============================================================ */
.lang-opt { display: flex; gap: 5px; align-items: center; }
.lang-opt .chip { padding: 5px 11px; }

html[lang="th"] body { line-height: 1.65; }

/* Thai glyphs: Kanit for display, Noto Sans Thai for reading */
html[lang="th"] .top-bar-title,
html[lang="th"] .credit-amount,
html[lang="th"] .balance-amount,
html[lang="th"] .stat-value,
html[lang="th"] .modal-title,
html[lang="th"] .pkg-name,
html[lang="th"] .reseller-name,
html[lang="th"] .btn-primary span,
html[lang="th"] .btn-secondary span,
html[lang="th"] .sb-brand-txt .sb-name {
  font-family: 'Kanit','Rajdhani','Noto Sans Thai',sans-serif;
}

/* wide tracking breaks Thai vowel placement — pull it in */
html[lang="th"] .top-bar-title,
html[lang="th"] .section-title,
html[lang="th"] .card-label span,
html[lang="th"] .stat-label,
html[lang="th"] .sb-cap,
html[lang="th"] .nav-item span,
html[lang="th"] .sb-item span,
html[lang="th"] .chip,
html[lang="th"] .mini-btn,
html[lang="th"] .tbl-head span,
html[lang="th"] .rb-label,
html[lang="th"] .badge-running-low,
html[lang="th"] .badge-ok,
html[lang="th"] .foot-note,
html[lang="th"] .lh-row span { letter-spacing: .02em; }

/* stacked marks need vertical room */
html[lang="th"] .item-name,
html[lang="th"] .notif-title,
html[lang="th"] .notif-text,
html[lang="th"] .credit-note,
html[lang="th"] .credit-sub,
html[lang="th"] .credit-warn,
html[lang="th"] .stat-sub,
html[lang="th"] .reseller-meta,
html[lang="th"] .setting-label,
html[lang="th"] .form-group label,
html[lang="th"] .steps .step span { line-height: 1.75; }

/* the 9–10px label floor is unreadable with tone marks */
html[lang="th"] .stat-label,
html[lang="th"] .card-label span,
html[lang="th"] .sb-cap,
html[lang="th"] .km,
html[lang="th"] .item-sub,
html[lang="th"] .notif-time,
html[lang="th"] .foot-note,
html[lang="th"] .api-row span,
html[lang="th"] .key-badge,
html[lang="th"] .kt-badge { font-size: 11px; }

html[lang="th"] .nav-item span { font-size: 10.5px; }
html[lang="th"] .chip { white-space: normal; }
html[lang="th"] .modal-sheet { --sheet-pad-b: 34px; }


/* ============================================================
   SECTION 8 — HOUR / DAY BREAKDOWN
   Twenty-four slim columns have to breathe inside a 430px shell:
   the bars flex, the figures stay tabular, and the per-slot list
   stays folded until it is asked for.
   ============================================================ */
.brk-card .section-header { margin-bottom: 10px; }
.brk-tabs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.brk-metrics .chip { font-size: 9.5px; padding: 4px 9px; letter-spacing: .12em; }

.brk-bars {
  display: flex; align-items: flex-end; gap: 2px;
  height: 74px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
.brk-col {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; align-items: flex-end;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.brk-col i {
  width: 100%; min-height: 3px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(var(--violet-rgb), .75), rgba(var(--violet-deep-rgb), .28));
  transition: height .24s ease, background .18s ease, box-shadow .18s ease;
}
.brk-col:hover i {
  background: linear-gradient(180deg, var(--violet-light), var(--violet-deep));
}
.brk-col.now i {
  background: var(--brand-grad);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.4);
}
.brk-col.on i {
  background: var(--brand-grad);
  box-shadow: 0 0 14px rgba(var(--accent-rgb),.55);
}

.brk-read {
  display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap;
  margin-top: 10px;
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-sec);
}
.brk-read b { color: var(--accent-light); font-size: 13.5px; }
.brk-read span { font-variant-numeric: tabular-nums; }

.brk-detail { display: none; }
.brk-detail.open {
  display: block; margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border);
  max-height: 224px; overflow-y: auto;
  scrollbar-width: thin;
}
.brk-row {
  display: grid; grid-template-columns: 1fr 76px 42px 42px; gap: 8px;
  align-items: center; padding: 5px 4px;
  font-size: 11.5px; color: var(--text-sec);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.brk-row:hover { background: var(--bg-card2); }
.brk-row.on { color: var(--text-primary); background: rgba(var(--violet-rgb), .07); }
.brk-row .bt { color: var(--text-primary); font-weight: 600; }
.brk-row.now .bt { color: var(--accent-light); }
.brk-row .bv, .brk-row .bn { text-align: right; }
.brk-row.head {
  font-family: 'Rajdhani','Kanit','Noto Sans Thai',sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em;
  color: var(--text-muted); cursor: default; padding-bottom: 6px;
}
.brk-row.head:hover { background: none; }
.brk-row.head span:not(.bt) { text-align: right; }
.brk-row.head span:first-child { text-align: left; }
.brk-row.quiet, .brk-row.empty {
  grid-template-columns: 1fr; color: var(--text-muted);
  font-size: 11px; cursor: default;
}
.brk-row.quiet:hover, .brk-row.empty:hover { background: none; }

@media (min-width: 900px) {
  .brk-tabs { flex-direction: row; justify-content: space-between; align-items: center; }
  .brk-bars { height: 98px; gap: 4px; }
  .brk-detail.open { max-height: 320px; }
  .brk-row { font-size: 12.5px; }
}

/* Thai needs room for the tone marks and a readable floor */
html[lang="th"] .brk-read,
html[lang="th"] .brk-row,
html[lang="th"] .brk-metrics .chip { letter-spacing: .02em; }
html[lang="th"] .brk-read { line-height: 1.7; }
html[lang="th"] .brk-metrics .chip,
html[lang="th"] .brk-row.head { font-size: 10.5px; }

/* ============================================================
   SECTION 9 — TOUCH KEYBOARD RULES
   A soft keyboard only exists below the console breakpoint, and
   iOS/Android zoom the entire page the moment a focused control
   is smaller than 16px. That zoom is the "panel jumps up and
   down behind the keyboard" bug, so every field is 16px here.
   ============================================================ */
@media (max-width: 899px) {
  .form-group input,
  .form-group select,
  .form-group textarea,
  .qty-row input,
  .cost-row input,
  .search-bar input,
  .login-form input,
  .modal-sheet input,
  .modal-sheet select,
  .modal-sheet textarea { font-size: 16px; }

  /* an iPhone with a home indicator paints over the bottom of the sheet: the
     action bar owns that inset, the scroll body never slides under it */
  .modal-sheet { --sheet-pad-b: calc(26px + env(safe-area-inset-bottom, 0px)); }

  /* twelve plans read as a keypad. four columns on a 320-390px screen clips
     prices like "$28.00", so a phone gets three comfortable columns */
  .dur-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   SECTION 10 — WEBKIT / iPhone HARDENING
   Safari is the floor of this panel: autofill paints a field
   blue, some builds show number spinners, a notch and a home
   indicator eat height, and a double tap must not zoom.
   ============================================================ */
/* the bar and the foot are flex rows pinned by the sheet, not sticky elements -
   sticky inside a clipped flex box is exactly how Safari loses the BACK button */
.sheet-bar, .sheet-foot { position: relative; }

/* notch / status bar: only while the panel really is the whole screen */
@supports (top: env(safe-area-inset-top)) {
  @media (max-width: 899px) {
    .modal-sheet { --sheet-safe-top: env(safe-area-inset-top, 0px); }
  }
}

.qty-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.qty-row input::-webkit-outer-spin-button,
.qty-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* keep autofilled fields on the dark theme instead of iOS blue */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  box-shadow: none;
  transition: background-color 9999s ease-in-out 0s;
}

.dur-btn, .qchip, .sheet-back, .modal-close, .mini-btn, .btn-primary, .btn-secondary,
.key-type-btn, .nav-item, .icon-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ============================================================
   SECTION 11 — SHORT VIEWPORTS
   An iPhone SE, or any phone in landscape, has less height than
   the sheet wants. the rail tightens and the shortcuts fold so
   the action bar is reachable without scrolling at all.
   ============================================================ */
@media (max-height: 720px) and (max-width: 899px) {
  .modal-sheet { --sheet-pad-t: 14px; --sheet-pad-b: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .dur-grid { gap: 5px; }
  .dur-btn { min-height: 40px; gap: 1px; padding: 5px 2px; }
  .dur-code { font-size: 12.5px; }
  .dur-price { font-size: 9.5px; }
  .qty-chips { display: none; }
  .mk-sub { display: none; }
  .mk-ico { width: 30px; height: 30px; border-radius: 8px; }
  .sheet-foot { padding-top: 10px; }
}