:root{color-scheme:light;--ink:#17202e;--muted:#5d6877;--line:#d9e0e8;--accent:#0f766e;--accent2:#2457a6;--surface:#fff;--soft:#edf4f7;--warn:#8a4b0f;--ok:#116149}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:#f4f7fa;color:var(--ink)}button,a,input,select,textarea{font:inherit}.app-shell{min-height:100vh;width:min(1120px,100%);margin:0 auto;padding:18px 14px 28px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:6px 0 18px}.eyebrow{margin:0 0 6px;color:var(--accent);font-weight:800;letter-spacing:0}h1{margin:0;font-size:36px;line-height:1.02;letter-spacing:0}h2{margin:0;font-size:20px}.small-link{color:var(--accent2);font-weight:800;text-decoration:none;padding:10px 0}.action-grid{display:grid;gap:12px}.primary-action,.action-card{width:100%;min-height:76px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-decoration:none;text-align:left;padding:16px;box-shadow:0 12px 24px rgba(23,32,46,.13),0 2px 5px rgba(23,32,46,.08);cursor:pointer}.primary-action{background:linear-gradient(120deg,#00d2a8 0%,#00a3ff 38%,#6d5dfc 68%,#00d2a8 100%);background-size:260% 260%;border-color:rgba(255,255,255,.55);color:white;min-height:118px;position:relative;overflow:hidden;box-shadow:0 20px 44px rgba(0,132,255,.36),0 8px 18px rgba(0,210,168,.22);outline:1px solid rgba(255,255,255,.55);animation:iosGlow 3.4s ease-in-out infinite}.primary-action span,.action-card span{font-size:19px;font-weight:850}.primary-action span{font-size:25px;line-height:1.12;position:relative;z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.18)}.primary-action small,.action-card small{margin-top:6px;font-size:14px;color:inherit;opacity:.82}.primary-action small{font-size:16px;opacity:.98;position:relative;z-index:2}.primary-action::before{content:"";position:absolute;top:-80%;bottom:-80%;left:-42%;width:42%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.10) 25%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.12) 72%,transparent 100%);transform:skewX(-18deg);animation:iosSheen 2.6s ease-in-out infinite}.primary-action::after{content:"";position:absolute;inset:1px;border-radius:7px;background:radial-gradient(circle at 22% 0%,rgba(255,255,255,.42),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.22),transparent 48%);pointer-events:none}.action-card:hover,.primary-action:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(23,32,46,.17),0 4px 8px rgba(23,32,46,.1)}.action-card:active,.primary-action:active{transform:translateY(1px);box-shadow:0 7px 16px rgba(23,32,46,.14)}@keyframes iosGlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes iosSheen{0%{left:-55%;opacity:0}18%{opacity:1}58%{left:115%;opacity:1}100%{left:115%;opacity:0}}
.messages{min-height:280px;max-height:48vh;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:auto}.message{max-width:92%;padding:12px 13px;border-radius:8px;line-height:1.45;white-space:pre-wrap}.message.user{align-self:flex-end;background:var(--accent);color:white}.message.assistant{align-self:flex-start;background:var(--soft)}.message.notice{align-self:stretch;max-width:none;background:#fff7ed;border:1px solid #fed7aa;color:var(--warn)}.chat-form{display:grid;grid-template-columns:1fr;gap:10px;padding:12px;border-top:1px solid var(--line)}.chat-form input,.admin-input,select,textarea{width:100%;min-height:48px;border:1px solid var(--line);border-radius:8px;padding:0 12px;background:white;color:var(--ink)}textarea{min-height:104px;padding:12px;resize:vertical}.admin-layout{display:grid;gap:14px}.admin-card,.slide-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{background:var(--soft);border-radius:8px;padding:12px}.stat strong{display:block;font-size:26px}.tabs{display:flex;gap:8px;overflow:auto;padding-bottom:4px}.tabs button{white-space:nowrap;border:1px solid var(--line);background:white;border-radius:8px;min-height:42px;padding:0 12px;font-weight:800}.tabs button.active{background:var(--accent);border-color:var(--accent);color:white}.table-wrap{overflow:auto}.orders-table{width:100%;border-collapse:collapse;min-width:720px}.orders-table th,.orders-table td{border-bottom:1px solid var(--line);padding:10px;text-align:left}.filters{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0}.slide-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:16px;gap:12px}.phone-frame{background:#111827;border-radius:28px;padding:12px;display:grid;place-items:center;min-height:360px}.phone-frame img{max-width:100%;max-height:520px;border-radius:18px;background:#e5e7eb}.mock-screen{width:100%;aspect-ratio:9/16;border-radius:18px;background:linear-gradient(180deg,#fff,#dbeafe);display:grid;place-items:center;text-align:center;padding:20px;color:#1e3a8a;font-weight:850}.slide-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}.slide-nav button{min-height:52px;border-radius:8px;border:0;background:var(--accent);color:white;font-weight:850}.slide-nav button.secondary{background:#d9e0e8;color:var(--ink)}@media(min-width:760px){.app-shell{padding:32px}.action-grid{grid-template-columns:repeat(2,1fr)}.primary-action{grid-column:span 2}.chat-form{grid-template-columns:1fr auto}.admin-layout{grid-template-columns:220px 1fr}.filters{grid-template-columns:repeat(4,1fr)}.stats{grid-template-columns:repeat(5,1fr)}h1{font-size:52px}}@media(max-width:420px){.app-shell{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.primary-action span,.action-card span{font-size:18px}.messages{max-height:44vh}}

/* Chat panel layout fix */
.assistant-panel {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(23,32,46,.12);
  display: grid;
  grid-template-rows: auto minmax(150px, 300px) auto;
  min-height: auto;
}
.panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.messages {
  min-height: 150px;
  max-height: 300px;
  padding: 14px 16px;
  overflow: auto;
}
.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.chat-form input {
  min-height: 42px;
  height: 42px;
  padding: 0 14px;
}
.chat-form button {
  min-height: 42px;
  height: 42px;
  padding: 0 16px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .assistant-panel { grid-template-rows: auto minmax(140px, 260px) auto; }
  .messages { max-height: 260px; }
  .chat-form { grid-template-columns: 1fr; }
  .chat-form button { width: 100%; }
}

/* Compact assistant area */
.topbar { margin-top: 2px; }
.topbar .eyebrow { display: none; }
.assistant-panel {
  display: block;
  min-height: 0;
}
.assistant-panel .messages {
  min-height: 0;
  height: auto;
  max-height: 190px;
  padding: 12px 16px;
}
.assistant-panel .message {
  max-width: min(100%, 1120px);
}
.assistant-panel .chat-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
}
.assistant-panel .chat-form input {
  flex: 1 1 auto;
  min-width: 0;
}
.assistant-panel .chat-form button {
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .assistant-panel .messages { max-height: 150px; }
  .assistant-panel .chat-form { display: grid; grid-template-columns: 1fr; }
}

/* GuideViewer */
body.guide-open { overflow: hidden; }
.guide-viewer[aria-hidden="true"] { display: none; }
.guide-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 13, 24, .72);
  display: grid;
  place-items: center;
  padding: 14px;
}
.guide-shell {
  width: min(100%, 760px);
  max-height: calc(100vh - 28px);
  background: #f7fafc;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 24px 70px rgba(0,0,0,.36);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.guide-header {
  position: relative;
  padding: 14px 56px 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.guide-header h2 { margin: 2px 0 6px; font-size: 22px; }
.guide-counter { margin: 0; color: var(--accent2); font-weight: 850; }
.guide-description { margin: 0; color: var(--muted); line-height: 1.38; }
.guide-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: #edf4f7;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.guide-phone-frame {
  overflow: auto;
  padding: 14px;
  display: grid;
  place-items: start center;
  background: linear-gradient(180deg, #eef5f8, #f8fafc);
}
.guide-image-wrap {
  position: relative;
  width: min(100%, 420px);
  border-radius: 28px;
  overflow: hidden;
  background: #0f1724;
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.guide-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.guide-dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.48);
  pointer-events: none;
}
.guide-highlight {
  position: absolute;
  border: 3px solid #22c55e;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.52), 0 0 22px rgba(34,197,94,.9);
  background: rgba(34,197,94,.10);
  pointer-events: none;
}
.guide-tooltip {
  position: absolute;
  max-width: 72%;
  transform: translateY(4px);
  z-index: 2;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.guide-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px 14px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.guide-nav button {
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}
.guide-nav button.secondary { background: #dfe7ef; color: var(--ink); }
.guide-nav button:disabled { opacity: .45; cursor: default; }
@media (max-width: 560px) {
  .guide-viewer { padding: 0; align-items: stretch; }
  .guide-shell { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; }
  .guide-header { padding: 12px 54px 10px 14px; }
  .guide-header h2 { font-size: 20px; }
  .guide-description { font-size: 14px; }
  .guide-phone-frame { padding: 10px 10px 6px; align-items: start; }
  .guide-image-wrap { width: min(100%, 390px); border-radius: 22px; }
  .guide-tooltip { max-width: 84%; font-size: 14px; padding: 8px 10px; }
  .guide-nav { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
  .guide-nav button { min-height: 54px; }
}


/* Top-up flow and swipe GuideViewer */
body.modal-open { overflow: hidden; }
.modal-layer[aria-hidden="true"], .guide-viewer[aria-hidden="true"] { display: none; }
.modal-layer { position: fixed; inset: 0; z-index: 980; display: grid; place-items: center; padding: 16px; background: rgba(8,13,24,.62); }
.topup-shell { position: relative; width: min(100%, 640px); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.modal-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: #edf4f7; color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; }
.modal-kicker { margin: 0 0 5px; color: var(--accent); font-weight: 850; }.topup-shell h2 { margin: 0 48px 8px 0; font-size: 28px; }.topup-lead { margin: 0 0 16px; color: var(--muted); line-height: 1.45; }.topup-actions { display: grid; gap: 10px; }
.topup-card { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); text-align: left; padding: 15px; box-shadow: 0 12px 24px rgba(23,32,46,.12); cursor: pointer; }.topup-card span { display: block; font-size: 19px; font-weight: 850; }.topup-card small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.35; }.topup-card strong { display: inline-block; margin-top: 12px; color: var(--accent2); font-size: 14px; }.topup-card.disabled { opacity: .58; cursor: default; box-shadow: none; }
.guide-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 13, 24, .72); display: grid; place-items: center; padding: 14px; }
.guide-shell { width: min(100%, 620px); max-height: calc(100vh - 28px); background: #f7fafc; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); box-shadow: 0 24px 70px rgba(0,0,0,.36); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.guide-slides { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; background: linear-gradient(180deg, #eef5f8, #f8fafc); scrollbar-width: none; }.guide-slides::-webkit-scrollbar { display: none; }
.guide-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: grid; gap: 10px; justify-items: center; align-content: start; padding: 12px 14px 14px; }
.guide-step-copy { width: min(100%, 480px); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; box-shadow: 0 10px 22px rgba(23,32,46,.08); }.guide-step-copy h3 { margin: 2px 0 5px; font-size: 18px; }.guide-step-copy p { margin: 0; color: var(--muted); line-height: 1.35; }.guide-step-copy .guide-step-count { color: var(--accent2); font-weight: 850; }
.guide-phone-frame { padding: 0; overflow: visible; background: transparent; }.guide-image-wrap { width: min(100%, 360px); border-radius: 24px; }
.guide-dots { display: flex; justify-content: center; gap: 8px; padding: 10px 14px 14px; background: #fff; border-top: 1px solid var(--line); }.guide-dots button { width: 9px; height: 9px; border: 0; border-radius: 999px; background: #c7d2df; padding: 0; cursor: pointer; }.guide-dots button.active { width: 26px; background: var(--accent); }.guide-nav { display: none; }
@media (max-width: 560px) { .modal-layer, .guide-viewer { padding: 0; align-items: stretch; }.topup-shell, .guide-shell { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; }.topup-shell { padding: 18px 14px max(18px, env(safe-area-inset-bottom)); }.topup-shell h2 { font-size: 25px; }.guide-slide { padding: 10px 10px 12px; }.guide-image-wrap { width: min(92vw, 340px); border-radius: 20px; }.guide-step-copy { width: 100%; padding: 10px; }.guide-step-copy h3 { font-size: 17px; }.guide-step-copy p { font-size: 14px; }.guide-dots { padding-bottom: max(14px, env(safe-area-inset-bottom)); } }


/* Compact guide image tuning */
.guide-dim { background: rgba(0,0,0,.24); }
.guide-highlight { box-shadow: 0 0 0 9999px rgba(0,0,0,.22), 0 0 18px rgba(34,197,94,.78); border-color: #16a34a; }
.guide-shell { width: min(100%, 560px); }
.guide-slide { gap: 8px; padding-top: 10px; }
.guide-step-copy { padding: 9px 10px; }
.guide-step-copy h3 { font-size: 16px; margin-bottom: 3px; }
.guide-step-copy p { font-size: 13px; line-height: 1.28; }
.guide-image-wrap { width: min(100%, 300px); border-radius: 20px; }
.guide-tooltip { font-size: 12px; padding: 7px 9px; max-width: 78%; }
@media (max-width: 560px) {
  .guide-header { padding-top: 9px; padding-bottom: 8px; }
  .guide-header h2 { font-size: 18px; }
  .guide-description { font-size: 13px; line-height: 1.25; }
  .guide-image-wrap { width: min(78vw, 285px); }
  .guide-slide { padding: 8px 8px 10px; gap: 7px; }
  .guide-step-copy h3 { font-size: 15px; }
  .guide-step-copy p { font-size: 12px; }
}


/* Mobile guide fit correction */
.guide-dim { background: rgba(0,0,0,.14); }
.guide-highlight { box-shadow: 0 0 0 9999px rgba(0,0,0,.14), 0 0 14px rgba(34,197,94,.7); border-width: 2px; }
.guide-shell { width: min(100%, 520px); }
.guide-step-copy { padding: 8px 10px; }
.guide-step-copy h3 { font-size: 15px; line-height: 1.16; }
.guide-step-copy p { font-size: 12px; line-height: 1.22; }
.guide-tooltip { font-size: 11px; line-height: 1.22; padding: 7px 8px; max-width: 76%; }
@media (max-width: 560px) {
  .guide-viewer { overflow: auto; }
  .guide-shell { min-height: 100dvh; max-height: none; grid-template-rows: auto minmax(0,1fr) auto; }
  .guide-header { padding: 8px 48px 7px 12px; }
  .guide-header h2 { font-size: 16px; line-height: 1.12; }
  .guide-counter { font-size: 13px; }
  .guide-description { display: none; }
  .guide-close { width: 34px; height: 34px; font-size: 27px; top: 8px; right: 10px; }
  .guide-slide { padding: 6px 8px 8px; gap: 6px; }
  .guide-step-copy { padding: 7px 8px; }
  .guide-step-copy h3 { font-size: 14px; }
  .guide-step-copy p { font-size: 11px; }
  .guide-step-copy .guide-step-count { font-size: 12px; }
  .guide-image-wrap { width: min(54vw, 220px); border-radius: 16px; }
  .guide-dots { padding: 8px 12px max(9px, env(safe-area-inset-bottom)); }
  .guide-dots button { width: 8px; height: 8px; }
  .guide-dots button.active { width: 22px; }
}
@media (max-height: 740px) and (max-width: 560px) {
  .guide-image-wrap { width: min(48vw, 198px); }
  .guide-step-copy p { display: none; }
}


/* Keep guide tooltip away from highlighted area */
.guide-tooltip { z-index: 4; }
.guide-highlight { z-index: 3; }

.center-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1200;
  width: min(88vw, 430px);
  transform: translate(-50%, -50%) scale(.96);
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
  text-align: center;
  font-weight: 850;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.center-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}