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

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

:root {
  --bg-primary:   #0a0a0c;
  --bg-card:      #111114;
  --bg-card2:     #151518;
  --bg-input:     #18181c;
  --border:       #26262c;

  /* ---- one brand accent taken from the LEGEND WIRE lion, used sparingly ---- */
  --accent:        #d946ef;   /* fuchsia  (lion mane)       */
  --accent-dark:   #c026d3;   /* button fill, white text    */
  --accent-deep:   #701a75;
  --accent-light:  #f0abfc;
  --accent-glow:   rgba(217, 70, 239, 0.18);
  --accent-rgb:        217, 70, 239;

  --violet:        #8b5cf6;
  --violet-light:  #a78bfa;
  --violet-deep:   #2e1065;
  --violet-rgb:        139, 92, 246;
  --violet-light-rgb:  167, 139, 250;
  --violet-deep-rgb:    46, 16, 101;

  --ink:           #ffffff;   /* label colour on the accent fill */
  --brand-grad:    linear-gradient(90deg, #ffffff, #f0abfc);

  --text-primary: #ededf0;
  --text-sec:     #a1a1aa;
  --text-muted:   #71717a;
  --danger:       #f43f5e;               /* destructive = rose, fuchsia stays the brand signal */
  --danger-rgb:   244, 63, 94;
  --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),
    #0a0a0c;
  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: #18181c;
  border: 1px solid #2a2a30;
  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: 'Inter','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: 'Inter','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: 'Inter','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: #17171b;
  border: 1.5px solid #2a2a30;
  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: #18181c;
  border: 1px solid #2a2a30;
  border-radius: var(--radius);
  padding: 16px;
  color: #666;
  font-family: 'Inter','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: 'Inter','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: 'Inter','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: #18181c;
  border: 1px solid #2a2a30;
  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: #18181c;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Inter','Kanit','Noto Sans Thai',sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}

.lang-badge {
  background: #18181c;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: 'Inter','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: #24242a; 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: 'Inter','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: 'Inter','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: 'Inter','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: 'Inter','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: 'Inter','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: 'Inter','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: 'Inter','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: #0d0d10;
  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: 'Inter','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: 'Inter','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: 'Inter','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: #18181c;
  border: 1px solid #2a2a30;
  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: 'Inter','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: 'Inter','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: #111114;
  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: 'Inter','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: #18181c;
  border: 1px solid #2a2a30;
  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: #141417;
  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: #1c1c21;
  border: 1px solid #2f2f36;
  border-radius: 999px;
  color: var(--text-sec);
  cursor: pointer;
  font-family: 'Inter','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: #0e0e11;
  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: 'Inter','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: #151518; border: 1px solid #27272d; 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: #18181c; border-color: #36363e; }
.dur-code {
  font-family: 'Inter','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: #151518; border: 1px solid #27272d; border-radius: 7px;
  font-family: 'Inter','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: #1d1d22; }
.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: #0f0f12; 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: 'Inter','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: 'Inter','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(--danger-rgb),.08); border: 1px solid rgba(var(--danger-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: 'Inter','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: #18181c;
  border: 1.5px solid #2a2a30;
  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: 'Inter','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(--danger-rgb),0.12); color: var(--danger); border: 1px solid rgba(var(--danger-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: 'Inter','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(--danger-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(--danger-rgb),.08); border: 1px solid rgba(var(--danger-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: 'Inter','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: 'Inter','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: 'Inter','Kanit','Noto Sans Thai',sans-serif;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #9a9a9a;
  background: #141417; border: 1px solid #24242a; 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: 'Inter','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: 'Inter','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: 'Inter','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: #18181c;
  border: 1px solid #2a2a30;
  border-radius: 4px;
  padding: 4px 8px;
  font-family: 'Inter','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(--danger-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: 'Inter','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: #2a2a30;
  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: 'Inter','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: #18181c;
  border: 1.5px solid #2a2a30;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Inter','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: #18181c;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 8px;
  padding: 10px 20px;
  font-family: 'Inter','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: 'Inter','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: 'Inter','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: 'Inter','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: #060608; }
  .phone-wrap, .login-page {
    border-left: 1px solid #18181c;
    border-right: 1px solid #18181c;
  }
}
/* =========================================================
   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 #1d1d22;
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.lh-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Inter','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: 'Inter','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 #27272d; 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 #27272d; 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: 'Inter','Kanit','Noto Sans Thai',sans-serif; font-weight: 600; letter-spacing: .05em; color: #ddd; }
.sr-bar { height: 4px; background: #1d1d22; 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: 'Inter','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: #131316; border: 1px solid var(--border); color: var(--text-muted);
  font-family: 'Inter','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: #232329; 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: 'Inter','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: 'Inter','Kanit','Noto Sans Thai',sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #ccc; background: #1b1b20; border: 1px solid #2c2c33;
  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: 'Inter','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: 'Inter','Kanit','Noto Sans Thai',sans-serif; font-size: 9px; letter-spacing: .2em; color: var(--text-muted); }
.rb-value { font-family: 'Inter','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 #27272d; border-bottom: 1px dashed #27272d;
}
.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: 'Inter','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: 'Inter','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: #18181c; border: 1px solid var(--border); color: var(--gold);
  font-family: 'Inter','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: #18181c; 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: #0f0f12; 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: 'Inter','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: #0f0f12; 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: 'Inter','Kanit','Noto Sans Thai',sans-serif; font-size: 10px; color: #5a5a5a;
}
.drop-code {
  flex: 1; min-width: 0; cursor: pointer;
  font-family: 'Inter','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: 'Inter','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(--danger-rgb),0.3); }
.btn-secondary.danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(var(--danger-rgb),0.06); }
.danger-btn { background: var(--danger) !important; color: #fff !important; }
.danger-btn:hover { background: #ff7a93 !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: 'Inter','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: 'Inter','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: 'Inter','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: 'Inter','Kanit','Noto Sans Thai',sans-serif; }

.danger-zone { border-color: rgba(var(--danger-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: #131316; border: 1px solid #27272d; 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: 'Inter','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: 'Inter','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: #1a1a1f; border: 1px solid #27272d; 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: 'Inter','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, #18181c, #101013); }
.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, #141417, #0e0e11); 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: 'Inter','Kanit','Noto Sans Thai',sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #ececec; white-space: nowrap; }
.sb-role { font-family: 'Inter','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: 'Inter','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: 'Inter','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: #131316; 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 #1a1a1f; padding-top: 12px; }
.sb-user { display: flex; align-items: center; gap: 9px; }
.sb-user-txt { flex: 1; min-width: 0; }
.sb-uname { font-family: 'Inter','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 #151518; border-right: 1px solid #151518;
    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 #1a1a1f; 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: 'Inter','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: #0e0e11; }
  .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 #151518;
    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%), #0a0a0c;
  }
  .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: 'Inter','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: #131316; 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','Inter','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: 'Inter','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: 'Inter','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; }
}



/* ============================================================
   SECTION 11 — LEGEND WIRE ADDITIONS
   plan & price editor, shop banners, owner controls
   ============================================================ */
button.toggle { border: none; padding: 0; flex: 0 0 auto; font: inherit; }
button.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle.on { box-shadow: 0 0 12px rgba(var(--accent-rgb), .35); }

.login-tag {
  margin-top: 6px; font-family: 'Inter','Kanit','Noto Sans Thai',sans-serif;
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-muted);
}
.login-brand { font-size: 15px; }

.dur-code { font-size: 12px; text-align: center; line-height: 1.15; padding: 0 2px; }
.dur-btn.off { opacity: .5; }
.dur-btn.off::before {
  content: 'OFF'; position: absolute; top: 4px; left: 6px; font-size: 7.5px; letter-spacing: .1em;
  color: var(--text-muted); font-family: 'Inter','Kanit','Noto Sans Thai',sans-serif; font-weight: 700;
}

.key-cost-item.head { color: var(--text-muted); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.key-cost-item.head span:last-child { color: var(--text-muted); font-weight: 600; }
.key-cost-item.off { opacity: .45; }
.key-cost-item b { color: var(--accent-light); }

/* plan & price editor - one row per plan */
.plan-grid {
  display: grid; align-items: center; gap: 6px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, .6fr) minmax(0, .9fr) 34px;
}
.plan-head span {
  font-family: 'Inter','Kanit','Noto Sans Thai',sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.plan-row { padding: 6px 0; border-top: 1px dashed #27272d; transition: opacity .2s; }
.plan-row.off { opacity: .55; }
.plan-row input:not([type="checkbox"]) {
  width: 100%; min-width: 0; background: #18181c; border: 1px solid var(--border); color: #fff;
  font-family: 'Inter','Noto Sans Thai',sans-serif; font-size: 12.5px; padding: 7px 8px; border-radius: 6px; outline: none;
}
.plan-row input[name="cost"], .plan-row input[name="price"] { color: var(--accent-light); font-weight: 600; }
.plan-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .12); }
.plan-dur { font-size: 11.5px; color: var(--text-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-on { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11.5px; color: var(--text-sec); }
.plan-on input { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.plan-row .mini-btn { padding: 6px; min-height: 30px; }
.plan-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.dur-pick { display: flex; gap: 6px; }
.dur-pick input { flex: 1 1 60px; min-width: 0; }
.dur-pick select { flex: 1 1 90px; min-width: 0; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-hint { font-size: 10.5px; color: var(--text-muted); }

.pf { display: block; min-width: 0; }
.pf em { display: none; }
@media (max-width: 899px) {
  .plan-head { display: none; }
  .plan-grid { grid-template-columns: 1fr 1fr 1fr; }
  .plan-row { padding: 12px 0; row-gap: 8px; }
  .pf em {
    display: block; font-style: normal; margin-bottom: 4px; font-family: 'Inter','Kanit','Noto Sans Thai',sans-serif;
    font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8d7f99;
  }
  .plan-row .pf-name { grid-column: 1 / 3; }
  .plan-row .plan-dur { align-self: end; padding-bottom: 9px; }
  .plan-row .plan-dur { text-align: right; }
  .plan-row input[name="cost"]::placeholder, .plan-row input[name="price"]::placeholder { color: var(--text-muted); }
  .plan-row .plan-on { grid-column: 1 / 3; }
  .plan-row .mini-btn { justify-self: end; }
}

/* reseller shop banners */
.banner-stack { display: flex; flex-direction: column; gap: 8px; }
.shop-banner {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px;
  background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .28);
  color: #f6dcff; font-size: 12.5px; line-height: 1.45;
}
.shop-banner svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent); }
.shop-banner.soft { background: rgba(var(--violet-rgb), .07); border-color: rgba(var(--violet-rgb), .26); color: var(--text-sec); }
.shop-banner.soft b { color: #fff; }
.shop-banner.closed { background: rgba(var(--danger-rgb), .08); border-color: rgba(var(--danger-rgb), .3); color: #ffd0d9; }
.shop-banner.closed svg { color: var(--danger); }

.notif-acts { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.res-head + .key-note { margin-top: 8px; }

/* ============================================================
   SECTION 12 — PROFESSIONAL LAYER  (LEGEND WIRE v4)
   neutral surfaces, hairline borders, one fuchsia accent.
   no glows, no gradients behind content. sits last so it wins.
   ============================================================ */
:root {
  --line:   rgba(255,255,255,.075);
  --line-2: rgba(255,255,255,.12);
  --surface:   #111114;
  --surface-2: #16161a;
  --surface-3: #1c1c21;
  --r-lg: 14px; --r-md: 10px; --r-sm: 8px;
  --pos: #22c55e; --neg: #f43f5e; --warn: #f59e0b;
}
::selection { background: rgba(var(--accent-rgb), .35); color: #fff; }
:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .7); outline-offset: 2px; }
html, body { background: #09090b; font-family: 'Inter','Noto Sans Thai',sans-serif; letter-spacing: -.003em; }

/* ---------- background: flat near-black, a faint engineering grid fading out at the top ---------- */
#app { position: relative; background: #09090b !important; }
/* one calm surface - no grid, no lines, no glows behind content */
.page-content, .sidebar, .login-page { background-image: none !important; }
#app::before, #app::after, .login-page::before { display: none !important; content: none !important; }
.phone-wrap, .login-page { position: relative; z-index: 1; background: transparent !important; }
.phone-wrap::before { display: none !important; }

/* ---------- retire the angular frames and scanlines ---------- */
.cut-br, .cut-tr, .buy-cut { clip-path: none !important; border-radius: var(--r-md) !important; }
.cut-card { clip-path: none !important; border-radius: var(--r-lg) !important; background: var(--surface) !important; }
.cut-tl { clip-path: none !important; border-radius: 18px 18px 0 0 !important; }
.glitch { text-shadow: none !important; }

/* ---------- surfaces ---------- */
.card, .stat-card, .shop-package, .up-strip {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important; box-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
}
.card { padding: 18px 20px; }
.card.pad-0 { padding: 0; overflow: hidden; }
.stat-card::before { display: none !important; }
.card:hover, .stat-card:hover { border-color: var(--line-2) !important; transform: none !important; }
.card-label, .section-title, .stat-label, .rb-label, .tbl-head, .form-group label, .sb-cap {
  font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 600 !important;
  letter-spacing: .06em !important; color: var(--text-muted) !important;
}
.section-title::after { display: none !important; }
.stat-value, .credit-amount, .balance-amount, .rb-value, .pkg-price {
  font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 700 !important;
  letter-spacing: -.025em !important; color: #fff !important; text-shadow: none !important;
  -webkit-text-fill-color: currentColor; background: none !important; filter: none !important;
}
.balance-amount { border: none !important; padding-left: 0 !important; }
.dash-divider { border-top: 1px solid var(--line) !important; }
.credit-note, .stat-sub, .item-sub, .reseller-meta { color: var(--text-sec) !important; }
.accent-note { color: var(--accent-light) !important; opacity: 1 !important; }
.empty-state { color: var(--text-muted) !important; }

/* ---------- chrome ---------- */
.top-bar {
  background: rgba(10,10,12,.82) !important; border-bottom: 1px solid var(--line) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.top-bar::after { display: none !important; }
.top-bar-title { font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 700 !important; letter-spacing: -.01em !important; text-transform: none; }
.brand-sub { color: var(--text-muted) !important; letter-spacing: .02em !important; }
.brand-thumb { border-radius: 9px !important; background: #17171b; box-shadow: 0 0 0 1px var(--line-2) !important; padding: 2px; object-fit: contain; filter: none !important; }
.icon-btn, .lang-badge, .login-lang {
  background: var(--surface) !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-sm) !important; color: var(--text-sec) !important;
}
.icon-btn:hover, .lang-badge:hover, .login-lang:hover { color: #fff !important; border-color: rgba(255,255,255,.22) !important; }
.bell-btn .dot { background: var(--accent-dark) !important; color: #fff !important; box-shadow: 0 0 0 2px #0a0a0c; }
.balance-pill { background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: #fff !important; border-radius: 999px !important; }

.sidebar { background: #0c0c0f !important; border-right: 1px solid var(--line) !important; }
.sb-name {
  font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-size: 13.5px !important; font-weight: 800 !important;
  letter-spacing: .12em !important; color: #fff !important; overflow: hidden; text-overflow: ellipsis;
}
.sb-role { color: var(--text-muted) !important; letter-spacing: .08em !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important; }
.sb-item {
  border-radius: var(--r-sm) !important; color: var(--text-sec) !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important;
  font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; border: 1px solid transparent;
}
.sb-item svg { color: var(--text-muted); }
.sb-item:hover { background: rgba(255,255,255,.04) !important; color: #fff !important; }
.sb-item.active { background: rgba(255,255,255,.06) !important; color: #fff !important; border-color: var(--line) !important; box-shadow: none !important; }
.sb-item.active svg { color: var(--accent); }
.sb-item.active::before { background: var(--accent) !important; box-shadow: none !important; left: -16px !important; }
.sb-item em { background: var(--accent-dark) !important; color: #fff !important; }
.sb-foot { border-top: 1px solid var(--line) !important; }
.sb-uname { color: #fff !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important; }
.sb-usub { color: var(--text-muted) !important; }
.bottom-nav { background: rgba(12,12,15,.94) !important; border-top: 1px solid var(--line) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav-item { color: var(--text-muted) !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important; letter-spacing: .02em !important; }
.nav-item.active { color: #fff !important; background: none !important; }
.nav-item.active svg { color: var(--accent); }
.nav-item::before { background: var(--accent) !important; box-shadow: none !important; }

/* ---------- buttons ---------- */
.btn-primary, .btn-signin {
  background: var(--accent-dark) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14) !important;
  font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 600 !important; letter-spacing: .01em !important;
  text-transform: none; text-shadow: none !important; filter: none !important;
}
.btn-primary:hover, .btn-signin:hover { background: #a21caf !important; transform: none !important; }
.btn-primary:active { transform: translateY(1px) !important; }
.btn-secondary {
  background: var(--surface-2) !important; border: 1px solid var(--line-2) !important; color: #ededf0 !important;
  border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
  font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 600 !important; letter-spacing: .01em !important;
}
.btn-secondary:hover { background: var(--surface-3) !important; border-color: rgba(255,255,255,.2) !important; }
.btn-secondary.danger { color: #fb7185 !important; border-color: rgba(var(--danger-rgb), .35) !important; }
.btn-secondary.danger:hover { background: rgba(var(--danger-rgb), .08) !important; }
.danger-btn { background: #e11d48 !important; }
.danger-btn:hover { background: #be123c !important; }
.btn-secondary.sm, .btn-primary.sm { padding: 7px 11px !important; font-size: 12px !important; }
.mini-btn {
  border-radius: 7px !important; background: var(--surface-2) !important; border: 1px solid var(--line-2) !important;
  color: #d4d4d8 !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 600 !important; letter-spacing: .03em !important;
}
.mini-btn:hover:not(:disabled) { background: var(--surface-3) !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important; }
.mini-btn.success { color: #4ade80 !important; border-color: rgba(34,197,94,.3) !important; }
.mini-btn.danger { color: #fb7185 !important; border-color: rgba(var(--danger-rgb), .3) !important; }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-sec) !important; font-weight: 600; font-size: 12px; cursor: pointer; letter-spacing: .01em; }
.link:hover { color: #fff !important; }
.link svg { width: 13px; height: 13px; }

/* ---------- inputs ---------- */
.form-group input, .form-group select, .qty-row input, textarea, .search-bar, .login-form input, .plan-row input:not([type="checkbox"]) {
  background: #0d0d10 !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-sm) !important;
  color: #fff !important; box-shadow: none !important;
}
.form-group input:focus, .form-group select:focus, .qty-row input:focus, textarea:focus, .search-bar:focus-within,
.login-form input:focus, .login-form input.is-focus, .plan-row input:focus {
  border-color: rgba(var(--accent-rgb), .75) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15) !important; outline: none;
}
.search-bar input { background: transparent !important; border: none !important; box-shadow: none !important; }
.toggle { background: #2a2a30 !important; box-shadow: none !important; }
.toggle.on { background: var(--accent-dark) !important; box-shadow: none !important; }
.plan-row input[name="cost"], .plan-row input[name="price"] { color: #fff !important; }

/* ---------- chips, segmented controls, badges ---------- */
.chip {
  border-radius: 999px !important; background: transparent !important; border: 1px solid var(--line-2) !important;
  color: var(--text-sec) !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 600 !important; letter-spacing: .02em !important;
}
.chip:hover { color: #fff !important; }
.chip.on { background: rgba(255,255,255,.08) !important; color: #fff !important; border-color: rgba(255,255,255,.22) !important; box-shadow: none !important; }
.chip.on span { background: var(--accent-dark) !important; color: #fff !important; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: #0d0d10; border: 1px solid var(--line); border-radius: 9px; max-width: 100%; overflow-x: auto; }
.seg::-webkit-scrollbar { display: none; }
.seg-btn {
  border: none; background: transparent; color: var(--text-muted); font: 600 12px 'Inter','Noto Sans Thai',sans-serif;
  padding: 6px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: color .15s, background .15s;
}
.seg-btn:hover { color: #fff; }
.seg-btn.on { background: var(--surface-3); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px var(--line-2); }
.key-badge, .kt-badge, .pin, .badge-ok, .badge-running-low {
  border-radius: 999px !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 600 !important;
  letter-spacing: .03em !important; box-shadow: none !important;
}
.kt-badge { background: rgba(255,255,255,.05) !important; border: 1px solid var(--line-2) !important; color: #d4d4d8 !important; }
.badge-ok { background: rgba(34,197,94,.1) !important; color: #4ade80 !important; border: 1px solid rgba(34,197,94,.25) !important; padding: 2px 9px !important; }
.badge-running-low { background: rgba(var(--danger-rgb), .1) !important; color: #fb7185 !important; border: 1px solid rgba(var(--danger-rgb), .3) !important; padding: 2px 9px !important; }
.key-badge.unused { background: rgba(var(--accent-rgb), .1) !important; color: var(--accent-light) !important; border-color: rgba(var(--accent-rgb), .28) !important; }
.reseller-name .key-badge { margin-left: 6px; }
.reseller-avatar {
  background: #23232a !important; color: #fff !important; border-radius: 9px !important; box-shadow: inset 0 0 0 1px var(--line-2) !important;
  font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 700 !important;
}
.item-icon { border-radius: 9px !important; background: var(--surface-2) !important; color: var(--text-sec) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-sec); white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #52525b; }
.status.ok { color: #4ade80; } .status.ok i { background: var(--pos); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.status.bad { color: #fb7185; } .status.bad i { background: var(--neg); box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .18); }
.status.idle i { background: #71717a; }

/* ---------- keys, codes, tables ---------- */
.key-code span, .drop-code, .api-row code, .key-note, .km.dev, .mono {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace !important; letter-spacing: 0 !important;
}
.key-code span { color: #fff; font-weight: 600; }
.key-row.pad { border-bottom: 1px solid var(--line); }
.key-row.pad:last-child { border-bottom: none; }
.key-row.pad:hover, .list-item:hover { background: rgba(255,255,255,.025) !important; }
.km { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 6px !important; color: var(--text-sec) !important; }
.api-row { border-top: 1px solid var(--line) !important; color: var(--text-sec) !important; flex-wrap: wrap; }
.api-row code { background: #0d0d10 !important; border-color: var(--line-2) !important; flex: 0 1 auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-row b { color: #d4d4d8 !important; background: var(--surface-2) !important; border-color: var(--line-2) !important; }
.res-stats { border-color: var(--line) !important; border-style: solid !important; }
.up-err { border-radius: var(--r-sm) !important; }
.notif-dot { background: var(--accent) !important; box-shadow: none !important; }
.notif-dot.read { background: #3f3f46 !important; }
.pin { background: rgba(var(--accent-rgb), .12) !important; color: var(--accent-light) !important; border-color: rgba(var(--accent-rgb), .3) !important; }

/* ---------- shop ---------- */
.shop-package { padding: 16px 18px !important; }
.shop-package:hover { border-color: rgba(var(--accent-rgb), .35) !important; }
.pkg-name { font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.pkg-price { font-size: 19px !important; }
.shop-banner { border-radius: var(--r-md) !important; color: #e4e4e7 !important; background: var(--surface) !important; border: 1px solid var(--line-2) !important; }
.shop-banner svg { color: var(--accent) !important; }
.shop-banner.closed { background: rgba(var(--danger-rgb), .08) !important; border-color: rgba(var(--danger-rgb), .3) !important; }
.shop-banner.closed svg { color: #fb7185 !important; }

/* ---------- modal sheets ---------- */
.modal-overlay { background: rgba(0,0,0,.6) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; }
.modal-sheet { background: #111114 !important; border: 1px solid var(--line-2) !important; box-shadow: 0 24px 64px rgba(0,0,0,.7) !important; }
.sheet-bar { background: #111114 !important; }
.sheet-foot { background: #111114 !important; border-top: 1px solid var(--line) !important; }
.sheet-back, .modal-close { border-radius: var(--r-sm) !important; background: var(--surface-2) !important; border: 1px solid var(--line-2) !important; }
.modal-title { font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
.mk-ico { border-radius: 10px !important; background: var(--surface-2) !important; border: 1px solid var(--line-2) !important; color: var(--accent) !important; }
.mk-step i { background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--line-2) !important; border-radius: 6px !important; font-style: normal; }
.mk-step span { color: var(--text-sec) !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 600 !important; letter-spacing: .05em !important; }
.mk-step .ms-line { background: var(--line) !important; }
.mk-step b { color: #fff !important; }
/* plan picker: a calm list of tiles, selection = accent outline, no glow */
.dur-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
@media (min-width: 900px) { .dur-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.dur-btn, .qchip, .key-type-btn {
  border-radius: var(--r-sm) !important; background: #0d0d10 !important; border: 1px solid var(--line-2) !important; box-shadow: none !important;
  min-height: 52px !important; align-items: flex-start !important; padding: 8px 11px !important;
}
.qchip { min-height: 34px !important; align-items: center !important; justify-content: center; padding: 6px !important; color: var(--text-sec) !important; font-weight: 600; }
.dur-code { font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; color: #e4e4e7 !important; text-align: left !important; letter-spacing: 0 !important; }
.dur-price { font-size: 11.5px !important; color: var(--text-muted) !important; font-variant-numeric: tabular-nums; }
.dur-btn:hover, .qchip:hover, .key-type-btn:hover { border-color: rgba(255,255,255,.22) !important; background: #131317 !important; }
.dur-btn.selected, .qchip.on, .key-type-btn.selected {
  border-color: var(--accent) !important; background: rgba(var(--accent-rgb), .08) !important; box-shadow: inset 0 0 0 1px var(--accent) !important;
}
.dur-btn.selected .dur-code, .qchip.on { color: #fff !important; }
.dur-btn.selected .dur-price { color: var(--accent-light) !important; }
.dur-btn.selected::after { display: none !important; }
.dur-btn.off { opacity: .45; }
.sum-strip, .modal-summary { border-radius: var(--r-md) !important; background: #0d0d10 !important; border: 1px solid var(--line) !important; }
.sum-strip b { font-family: 'Inter','Noto Sans Thai',sans-serif !important; }

/* ---------- toast ---------- */
.toast {
  border-radius: var(--r-md) !important; background: #18181c !important; border: 1px solid var(--line-2) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.6) !important; white-space: normal !important; text-align: center;
  width: max-content; max-width: min(90vw, 440px); line-height: 1.45;
}
.toast:not(.show) { transform: translateX(-50%) translateY(calc(-100% - 30px)) !important; }
.toast.error { border-color: rgba(var(--danger-rgb), .45) !important; }

/* ---------- login ---------- */
.login-logo-img { filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)) !important; animation: none !important; }
.login-brand {
  font-family: 'Inter','Noto Sans Thai',sans-serif !important; font-weight: 800 !important; font-size: 20px !important; letter-spacing: .28em !important;
  background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; filter: none !important;
}
.login-tag { font-family: 'Inter','Noto Sans Thai',sans-serif !important; letter-spacing: .14em !important; color: var(--text-muted) !important; }
.login-form {
  background: var(--surface) !important; border: 1px solid var(--line-2) !important; border-radius: 16px !important;
  padding: 26px 24px 22px !important; box-shadow: 0 24px 64px rgba(0,0,0,.55) !important;
}
.login-form label { color: var(--text-sec) !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important; letter-spacing: .04em !important; }
.login-hint { border-top: 1px solid var(--line) !important; }
.lh-row { color: var(--text-muted) !important; font-family: 'Inter','Noto Sans Thai',sans-serif !important; letter-spacing: .04em !important; }
@media (min-width: 900px) {
  .login-page { max-width: 960px !important; border: none !important; background: transparent !important; }
  .login-logo-img { width: 168px !important; height: 168px !important; }
  .login-form { flex: 0 0 380px !important; width: 380px !important; }
}

/* ---------- console layout ---------- */
@media (min-width: 900px) {
  .phone-wrap { max-width: 1480px !important; border: none !important; box-shadow: none !important; }
  .sidebar { width: 252px !important; flex: 0 0 252px !important; padding: 20px 16px !important; }
  .page-content { padding: 24px 28px 44px !important; gap: 16px !important; }
  .page-content > .span-2 { grid-column: span 2; }
}
.page-content > .stat-grid { align-self: start; }
.brk-tabs .chips { flex-wrap: wrap; overflow: visible; row-gap: 6px; }

/* ============ dashboard ============ */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 2px 2px 4px; }
.dash-eyebrow { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.dash-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #fff; margin-top: 2px; line-height: 1.25; }
.dash-sub { font-size: 13px; color: var(--text-sec); margin-top: 2px; }
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-actions .btn-primary, .dash-actions .btn-secondary { padding: 9px 14px !important; font-size: 13px !important; width: auto; }
.alert {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-md);
  background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .28); color: #fcd34d; font-size: 13px;
}
.alert svg { width: 16px; height: 16px; flex: 0 0 auto; }
.alert .link { margin-left: auto; color: #fcd34d !important; }

.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.kpi:hover { border-color: var(--line-2); }
.kpi-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kpi-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-sec); flex: 0 0 auto; }
.kpi-ico svg { width: 14px; height: 14px; }
.kpi-label { font-size: 12.5px; font-weight: 600; color: var(--text-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-top > :last-child:not(.kpi-label) { margin-left: auto; }
.kpi-value { font-size: 27px; font-weight: 700; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 26px; }
.kpi-sub { font-size: 12px; color: var(--text-muted); }
.spark { width: 84px; height: 26px; color: var(--accent); flex: 0 0 auto; opacity: .9; }
.delta { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta.up { color: #4ade80; background: rgba(34,197,94,.1); }
.delta.down { color: #fb7185; background: rgba(var(--danger-rgb), .1); }
.delta.flat { color: var(--text-muted); background: rgba(255,255,255,.05); }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-title { font-size: 14.5px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.card-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.chart-card .seg-wide { margin-bottom: 14px; }
.chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--text-muted);
  text-align: right; font-variant-numeric: tabular-nums; padding: 2px 0 6px; min-width: 38px; height: 210px; }
.chart-plot { position: relative; height: 210px; }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ch-grid { stroke: rgba(255,255,255,.07); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.ch-grid.base { stroke: rgba(255,255,255,.14); stroke-dasharray: none; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ch-cursor { stroke: rgba(255,255,255,.22); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }
.ch-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); pointer-events: none; }
.ch-hit { position: absolute; inset: 0; display: flex; }
.ch-hit button { flex: 1 1 0; border: none; background: transparent; cursor: crosshair; padding: 0; }
.ch-hit button:hover { background: linear-gradient(180deg, transparent, rgba(255,255,255,.03)); }
.chart-x { position: relative; height: 18px; margin: 6px 0 0 48px; font-size: 11px; color: var(--text-muted); }
.chart-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.chart-x span:first-child { transform: none; }
.chart-x span:last-child:not(:first-child) { transform: translateX(-100%); }
.chart-read { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-sec); font-variant-numeric: tabular-nums; }
.chart-read b { color: #fff; font-weight: 700; }
.chart-read span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.lg.rev { background: var(--accent); } .lg.spd { background: #a1a1aa; }

.api-card .mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.mini-stats > div { background: #0d0d10; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.mini-stats b { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mini-stats span { font-size: 11.5px; color: var(--text-muted); }
.api-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.api-foot .mono { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.api-card .up-err { margin-top: 12px; }

.mix { display: flex; flex-direction: column; gap: 12px; }
.mix-row { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(0, 1.4fr) 34px 38px; align-items: center; gap: 10px; font-size: 12.5px; }
.mix-name { color: #e4e4e7; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.mix-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.mix-qty { text-align: right; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.mix-pct { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.dtable { display: flex; flex-direction: column; }
.dt-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, .9fr)) minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 4px; border-top: 1px solid var(--line); font-size: 13px; color: #e4e4e7; }
.dt-head { border-top: none; padding-top: 0; font-size: 11.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .03em; }
.dt-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.dt-head span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.dt-row .muted { color: var(--text-muted); font-size: 12px; text-align: right; }
.dt-head span:last-child { text-align: right; }
.dt-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dt-who .reseller-avatar { width: 30px !important; height: 30px !important; font-style: normal; font-size: 12px; flex: 0 0 auto; display: grid; place-items: center; }
.dt-who span { display: flex; flex-direction: column; min-width: 0; }
.dt-who b { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-who em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.dt-row:not(.dt-head):hover { background: rgba(255,255,255,.02); }

@media (max-width: 1179px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .kpi-row { gap: 10px; }
  .kpi { padding: 13px 14px 12px; gap: 8px; }
  .kpi-value { font-size: 22px; }
  .spark { width: 60px; }
  .dash-title { font-size: 20px; }
  .dash-actions { width: 100%; }
  .dash-actions > * { flex: 1 1 0; }
  .chart-plot, .chart-y { height: 170px; }
  .dt-row { grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)); }
  .dt-row > :nth-child(4), .dt-row > :nth-child(5) { display: none; }
  .card { padding: 15px 16px; }
  /* narrow KPI tiles: the badge sits above the label so neither is clipped */
  .kpi-ico { display: none; }
}

/* thin neutral scrollbars */
* { scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2f2f36; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
/* ============================================================
   SECTION 13 — PAGE COMPONENTS (tables, toolbars, pricing)
   ============================================================ */
.page-head { padding-bottom: 2px; }
.page-head .dash-title { font-size: 22px; }
.key-badge, .kt-badge { text-transform: capitalize !important; letter-spacing: .01em !important; font-size: 11px !important; padding: 2px 9px !important; }
.key-badge + .key-badge { margin-left: 4px; }
.key-badge.active { background: rgba(34,197,94,.1) !important; color: #4ade80 !important; border: 1px solid rgba(34,197,94,.25) !important; }
.key-badge.expired { background: rgba(255,255,255,.05) !important; color: #a1a1aa !important; border: 1px solid var(--line-2) !important; }
.key-badge.disabled { background: rgba(245,158,11,.1) !important; color: #fbbf24 !important; border: 1px solid rgba(245,158,11,.28) !important; }

/* toolbar: search + segmented filter */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .search-bar { flex: 1 1 260px; min-width: 0; height: 38px; }
.seg-btn em { font-style: normal; margin-left: 6px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.seg-btn.on em { color: var(--accent-light); }

/* small square icon actions */
.ib {
  width: 30px; height: 30px; display: inline-grid; place-items: center; flex: 0 0 auto; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 7px; color: var(--text-sec);
  transition: color .15s, background .15s, border-color .15s;
}
.ib svg { width: 14px; height: 14px; }
.ib:hover { color: #fff; background: var(--surface-3); border-color: rgba(255,255,255,.2); }
.ib.ok:hover { color: #4ade80; border-color: rgba(34,197,94,.4); }
.ib.warn:hover { color: #fbbf24; border-color: rgba(245,158,11,.45); }
.ib.bad:hover { color: #fb7185; border-color: rgba(var(--danger-rgb), .45); background: rgba(var(--danger-rgb), .08); }
.ib.ok { color: #4ade80; }

/* copyable key code */
.code-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; cursor: pointer; color: #fff; max-width: 100%; }
.code-btn svg { width: 13px; height: 13px; color: var(--text-muted); flex: 0 0 auto; transition: color .15s; }
.code-btn .mono { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-btn:hover svg { color: var(--accent); }
.dev-cell { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; color: #e4e4e7; font-size: 12.5px; cursor: default; }
.dev-cell i { width: 7px; height: 7px; border-radius: 50%; background: #52525b; }
.dev-cell i.on { background: var(--pos); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }

/* keys table */
.kt { display: grid; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12.5px;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, .9fr) auto; }
.kt.adm { grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, .7fr) minmax(0, .9fr) auto; }
.kt-head { border-top: none; padding-top: 12px; padding-bottom: 10px; background: #0f0f12; font-size: 11.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .03em; }
.kt:not(.kt-head):hover, .rt:not(.rt-head):hover { background: rgba(255,255,255,.02); }
.kt-code { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kt-code em { font-style: normal; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-c { min-width: 0; }
.kt-own { color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-act { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.kt .muted, .rt .muted { color: var(--text-muted); }
.kt-head .r, .rt-head .r { text-align: right; }

/* resellers table */
.rt { display: grid; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .8fr) auto; }
.rt-head { border-top: none; background: #0f0f12; font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding-top: 12px; padding-bottom: 10px; letter-spacing: .03em; }
.rt .num { text-align: right; font-variant-numeric: tabular-nums; }
.rt .num b { color: #fff; font-weight: 700; }
.rt .num em { font-style: normal; color: var(--text-muted); }
.rt .dt-who em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt .kt-act .btn-secondary.sm { padding: 6px 10px !important; }

/* phones: tables become stacked cards with inline labels */
@media (max-width: 899px) {
  .kt-head, .rt-head { display: none; }
  .kt, .kt.adm, .rt { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px 16px; }
  .kt-code, .rt .dt-who { grid-column: 1 / -1; }
  .kt-c[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; letter-spacing: .03em; }
  .rt .num { text-align: left; }
  .kt-act { grid-column: 1 / -1; justify-content: flex-start; padding-top: 2px; }
  .toolbar .seg { width: 100%; }
  .toolbar .seg-btn { flex: 1 1 auto; padding: 6px 8px; }
}

/* compact seller API status bar */
.api-bar { display: flex !important; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px !important; }
.api-nums { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.api-nums b { color: #fff; font-weight: 700; margin-right: 5px; font-variant-numeric: tabular-nums; }
.api-age { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.api-bar .up-err { flex: 1 1 100%; }

/* reseller dashboard: quick buy tiles */
.qb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qb {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; text-align: left; cursor: pointer;
  background: #0d0d10; border: 1px solid var(--line-2); border-radius: var(--r-md); color: inherit; font: inherit;
  transition: border-color .15s, background .15s;
}
.qb:hover:not(:disabled) { border-color: var(--accent); background: rgba(var(--accent-rgb), .05); }
.qb:disabled { opacity: .5; cursor: not-allowed; }
.qb-name { font-size: 12.5px; font-weight: 600; color: var(--text-sec); }
.qb-price { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qb-sub { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--accent-light); }
.qb-sub svg { width: 12px; height: 12px; }
.qb:disabled .qb-sub { color: var(--text-muted); }
.support-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-sec); }
.support-line svg { width: 14px; height: 14px; color: var(--accent); }
.support-line b { color: #fff; }
.dt-row.lk { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.dt-row.lk .muted { text-align: right; }
.dt-head.lk span:last-child { text-align: right; }
.balance-pill { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.balance-pill svg { width: 13px; height: 13px; color: var(--accent); }

/* shop pricing cards */
.bal-chip { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 13px; color: var(--text-sec); }
.bal-chip b { color: #fff; margin-left: 4px; font-variant-numeric: tabular-nums; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.price-card {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.4); transition: border-color .15s;
}
.price-card:hover { border-color: rgba(var(--accent-rgb), .45); }
.pc-name { font-size: 14px; font-weight: 700; color: #fff; }
.pc-price { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.pc-price span { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 4px; letter-spacing: 0; }
.pc-feat { list-style: none; display: flex; flex-direction: column; gap: 7px; padding: 12px 0 2px; border-top: 1px solid var(--line); flex: 1 1 auto; }
.pc-feat li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-sec); }
.pc-feat svg { width: 13px; height: 13px; color: var(--accent); flex: 0 0 auto; }
.price-card .btn-full { width: 100%; justify-content: center; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.steps3 > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-sec); line-height: 1.5; }
.steps3 b { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line-2); color: #fff; font-size: 12px; }

/* account page */
.profile { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.reseller-avatar.xl { width: 52px !important; height: 52px !important; font-size: 20px !important; display: grid; place-items: center; border-radius: 12px !important; }
.pf-name { font-size: 17px; font-weight: 700; color: #fff; }
.pf-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mini-stats.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.notif-acts.row { flex-direction: row; gap: 6px; }
.btn-secondary.wide { justify-self: start; width: auto; }

@media (max-width: 899px) {
  .qb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps3 { grid-template-columns: 1fr; }
  .dt-row.lk { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .dt-row.lk > :nth-child(3), .dt-row.lk > :nth-child(4) { display: none; }
  .price-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .price-card { padding: 16px; }
  .pc-price { font-size: 24px; }
  .api-age { margin-left: 0; }
}
@media (max-width: 420px) { .price-grid { grid-template-columns: 1fr; } }
.dt-head.lk span { text-align: left !important; }
.dt-head.lk span:last-child { text-align: right !important; }
@media (min-width: 900px) { .page-content[data-cols="2f"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* every row is its own grid, so the actions column needs a fixed width or headers drift */
@media (min-width: 900px) {
  .kt     { grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, .9fr) 106px; }
  .kt.adm { grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .9fr) 216px; }
  .rt     { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .8fr) 236px; }
  .kt-act { flex-wrap: nowrap; }
}
.card-head > div:first-child { flex: 1 1 auto; min-width: 0; }/* top bar = quiet breadcrumb; the page itself carries the big title */
.top-bar-title.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; min-width: 0; }
.crumb-brand { color: var(--text-muted); font-weight: 700; letter-spacing: .08em; font-size: 12px; white-space: nowrap; }
.crumb-sep { color: #3f3f46; }
.crumb-page { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) {
  .crumb-sep, .crumb-page { display: none; }
  .crumb-brand { color: #fff; font-size: 13.5px; letter-spacing: .12em; font-weight: 800; }
}.api-card .mini-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.api-card .mini-stats b { font-size: 17px; }

/* ============================================================
   SECTION 14 — DESIGN REVIEW FIXES
   retire every leftover uppercase/tracked rule, calmer chrome,
   readable contrast, consistent sheets and mobile layout
   ============================================================ */
:root { color-scheme: dark; --text-muted: #8a8a93; }
/* sentence case everywhere: the old layers set text-transform on these */
.form-group label, .plan-head span, .pf em, .brand-sub, .sb-role, .nav-item, .sheet-back, .login-tag, .lh-row,
.mk-step, .mk-step span, .ss-cell span, .card-label, .stat-label, .section-title, .tbl-head, .setting-label, .chip, .see-all, .link {
  text-transform: none !important; letter-spacing: 0 !important;
}
.form-group label { font-size: 12.5px !important; font-weight: 500 !important; color: var(--text-sec) !important; }
.form-group { gap: 6px !important; }
.brand-sub { font-size: 12px !important; font-weight: 500 !important; }
.sb-role { font-size: 11.5px !important; }
.sb-name { letter-spacing: .02em !important; font-weight: 700 !important; font-size: 14px !important; }
.sb-cap { font-size: 11px !important; letter-spacing: .04em !important; font-weight: 500 !important; padding: 6px 10px 4px !important; }
.sb-item.active::before { display: none !important; }
.nav-item { font-size: 11px !important; font-weight: 500 !important; gap: 3px; }
.nav-item.active { font-weight: 600 !important; }
.nav-item svg { width: 19px; height: 19px; }
.sheet-back { font-size: 13px !important; font-weight: 500 !important; }
.login-tag { font-size: 13px !important; color: var(--text-sec) !important; }
.login-brand { letter-spacing: .12em !important; font-size: 19px !important; }
.lh-row { font-size: 12px !important; }
.pin { font-size: 11px !important; padding: 1px 8px !important; }
.foot-note { font-size: 12px !important; color: var(--text-muted) !important; }
.field-hint, .sum-warn, .up-err { font-size: 12px !important; line-height: 1.5; }
.sum-warn, .up-err { border-radius: var(--r-sm) !important; padding: 8px 10px !important; }
.drop-code { color: #fff !important; font-size: 13px !important; }
.dash-sub::first-letter, .card-hint::first-letter { text-transform: uppercase; }
.check-row input[type="checkbox"], .plan-on input { accent-color: var(--accent-dark); width: 16px; height: 16px; }

/* calmer chrome: no duplicate calls to action, no repeated identity */
.sb-quick { flex-direction: row !important; gap: 6px !important; }
.sb-quick > * { flex: 1 1 0; padding: 8px 10px !important; font-size: 12.5px !important; }
.sb-quick .btn-primary { background: var(--surface-2) !important; color: #ededf0 !important; border: 1px solid var(--line-2) !important; box-shadow: none !important; }
.sb-quick .btn-primary svg { color: var(--accent); }
@media (min-width: 900px) {
  .top-bar .brand-thumb, .top-bar .brand-sub { display: none !important; }
  .top-bar { padding: 0 28px !important; min-height: 52px; }
  .top-bar-title.crumbs { font-size: 13px !important; }
  .card .stack > button[type="submit"], .card .stack > .btn-primary, .card .stack > .btn-secondary { align-self: flex-start; width: auto; padding: 8px 16px !important; font-size: 13px !important; }
  .card-head { flex-wrap: nowrap; }
  .card-head > div:first-child { flex: 1 1 0 !important; min-width: 0; }
  .card-head > :not(:first-child) { flex: 0 0 auto; }
  .rt > :nth-child(6) { padding-left: 24px; }
  .page-content > .btn-secondary.danger.wide { display: none; }
}
.page-content > .card { align-self: start; }
.page-content > .chart-card, .page-content > .api-card { align-self: stretch; }

/* tables: quiet row actions that wake up on hover; plan as text, not a second pill */
.kt .ib, .rt .ib { background: transparent; border-color: transparent; color: var(--text-muted); }
.kt:hover .ib, .rt:hover .ib { border-color: var(--line-2); color: var(--text-sec); }
.kt .ib:hover, .rt .ib:hover { background: var(--surface-3); color: #fff; }
.kt .ib.ok:not(:hover) { color: var(--text-muted); }
.kt .kt-badge, .dt-row .kt-badge { background: none !important; border: none !important; padding: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; color: #e4e4e7 !important; }
.key-badge.unused { background: rgba(56,189,248,.1) !important; color: #7dd3fc !important; border-color: rgba(56,189,248,.28) !important; }
@media (min-width: 900px) {
  .kt     { grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, .9fr) 72px; }
  .kt.adm { grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .9fr) 180px; }
}
.dev-cell { cursor: pointer; }
.dev-cell:hover { color: #fff; }
.list-item .item-value.red { color: #e4e4e7 !important; }

/* phones: one-row filters, roomy key actions, readable KPI tiles */
@media (max-width: 899px) {
  .toolbar .seg { flex-wrap: nowrap !important; overflow-x: auto !important; width: 100%; }
  .toolbar .seg-btn { flex: 1 0 auto; padding: 6px 7px; }
  .toolbar .seg-btn:not(.on) em { display: none; }
  .seg-wide { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .seg-wide .seg-btn { text-align: center; padding: 7px 6px; }
  .kt-act { gap: 8px; border-top: 1px solid var(--line); padding-top: 10px !important; margin-top: 2px; }
  .kt-act .ib { width: 38px; height: 38px; border-radius: 8px; border-color: var(--line-2); color: var(--text-sec); }
  .kt-act .ib svg { width: 16px; height: 16px; }
  .kt-act .ib.bad { margin-left: auto; }
  .kpi-top { flex-direction: row !important; align-items: center; justify-content: space-between; }
  .kpi-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .kpi-top > :last-child:not(.kpi-label) { margin-left: auto; }
  .kpi-foot { flex-direction: column; align-items: stretch; gap: 6px; }
  .kpi .spark { width: 100%; height: 20px; }
  .kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .api-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .api-nums span { display: flex; flex-direction: column; gap: 1px; font-size: 11px; }
  .api-nums b { font-size: 16px; margin: 0 !important; }
  .api-bar .btn-secondary.sm { margin-left: auto; }
  .crumb-brand { letter-spacing: .02em !important; font-size: 15px !important; font-weight: 700 !important; }
  .modal-close { display: none !important; }
  .sheet-bar { box-shadow: none !important; border-bottom: 1px solid var(--line); }
}

/* sheets: one close control on desktop, plain section captions, emphasised total */
@media (min-width: 900px) {
  .modal-sheet .sheet-back { display: none !important; }
  .modal-sheet .sheet-bar { position: absolute !important; top: 16px; right: 16px; margin: 0; padding: 0; background: transparent !important; box-shadow: none !important; z-index: 4; border: none !important; }
  .modal-sheet .sheet-body { padding-top: 22px; }
  .mk-head, .sheet-body > .modal-title:first-child { padding-right: 44px; }
}
.mk-step { font-size: 13px !important; font-weight: 600 !important; color: #fff !important; margin-top: 8px; justify-content: space-between; }
.mk-step i, .mk-step .ms-line { display: none !important; }
.mk-step span { color: #fff !important; }
.mk-step b { margin-left: auto; font-size: 12.5px; font-weight: 500 !important; color: var(--text-sec) !important; }
.mk-sub { white-space: normal !important; font-size: 12.5px !important; color: var(--text-sec) !important; letter-spacing: 0 !important; text-transform: none !important; }
.ss-cell span { font-size: 12px !important; font-weight: 500 !important; }
.sum-strip { padding: 12px 14px !important; gap: 12px !important; }
.ss-cell b { font-size: 15px !important; }
.ss-cell:nth-child(2) b { font-size: 18px !important; }
.dur-btn.off::before { content: none !important; }
.dur-btn.off .dur-price::after { content: ' · off'; }

/* settings cards */
.setting-row { border-bottom: 1px solid var(--line) !important; padding: 12px 0 !important; gap: 16px; }
.setting-row:last-child { border-bottom: none !important; }
.setting-label { font-size: 13px !important; font-weight: 500 !important; color: #e4e4e7 !important; }
.plan-head span { font-size: 11.5px !important; font-weight: 600 !important; color: var(--text-muted) !important; }
.plan-row { border-top: 1px solid var(--line) !important; padding: 8px 0 !important; }
.plan-head { padding-bottom: 6px; margin-top: 8px; }
.plan-on { font-variant-numeric: tabular-nums; color: #e4e4e7 !important; }
.api-row { display: grid !important; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 12px; padding: 10px 0 !important; font-size: 12.5px !important; align-items: start; }
.api-row b { background: none !important; border: none !important; padding: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--text-muted) !important; }
.api-row code { justify-self: start; max-width: 100%; font-size: 12px !important; padding: 2px 7px !important; border-radius: 6px !important; }
.api-row span { grid-column: 2; margin-left: 0 !important; text-align: left !important; font-size: 12px !important; color: var(--text-muted) !important; }
.card.danger-zone { border-color: rgba(var(--danger-rgb), .3) !important; }
.card.danger-zone .card-title { color: #fb7185; }
.action-row-3 .btn-secondary, .danger-acts .btn-secondary { font-size: 13px !important; padding: 9px 14px !important; }
.danger-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* api card fills its column next to the chart */
.api-card { display: flex !important; flex-direction: column; }
.api-card .mini-stats { flex: 1 1 auto; grid-auto-rows: 1fr; }
.api-card .mini-stats > div { justify-content: center; }

/* shop: quiet cards, the accent wakes up on the hovered plan only */
@media (min-width: 1180px) { .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1179px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc-price { font-size: 24px !important; font-weight: 700 !important; }
.price-card { gap: 10px !important; padding: 18px !important; }
.pc-feat svg { color: var(--text-muted) !important; }
.price-card:hover .btn-secondary:not(:disabled) { background: var(--accent-dark) !important; border-color: rgba(255,255,255,.12) !important; color: #fff !important; }

/* key details sheet */
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.info-grid > div { background: #0d0d10; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.info-grid span { font-size: 11.5px; color: var(--text-muted); }
.info-grid b { font-size: 13.5px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.dev-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.dev-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #0d0d10; }
.dev-row + .dev-row { border-top: 1px solid var(--line); }
.dev-row > i { width: 8px; height: 8px; border-radius: 50%; background: #52525b; flex: 0 0 auto; }
.dev-row > i.on { background: var(--pos); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dev-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dev-txt b { font-size: 12.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-txt em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.mk-sub .key-badge { vertical-align: middle; }.api-scope { color: var(--text-muted); font-size: 11.5px; align-self: center; }
.fund-seg { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
.fund-seg .seg-btn { text-align: center; }
.drop-code { font-size: 13px !important; }