/* ================== Mobile App UI v5 ================== */
:root{
  --primary:#e11d48;
  --primary-600:#be123c;
  --primary-50:#fff1f2;
  --primary-100:#ffe4e6;
  --bg:#f3f4f7;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --danger:#dc2626;
  --shadow:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --radius:16px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
[data-theme="dark"]{
  --bg:#0b0d12; --surface:#151821; --text:#f1f5f9; --muted:#94a3b8; --border:#252a36;
  --primary-50:#2a1820;
  --primary-100:#3a2030;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Splash ---------- */
.splash{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:1000;transition:opacity .3s}
.splash.hide{opacity:0;pointer-events:none}
.splash-inner{text-align:center}
.brand-row{display:flex;align-items:center;gap:.5rem;justify-content:center;font-weight:800;font-size:22px;color:var(--primary);letter-spacing:.5px}
.brand-emoji{font-size:32px}
.spinner{margin:18px auto 0;width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- App-bar ---------- */
.appbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;padding:14px 16px;font-weight:700;font-size:17px;
  padding-top:calc(14px + env(safe-area-inset-top, 0px))}
.appbar .back{position:absolute;left:8px;padding:8px;color:var(--primary);background:none;border:0;font-size:24px;cursor:pointer}
.appbar .right{position:absolute;right:8px;display:flex;gap:4px;color:var(--primary)}
.appbar .right button{background:none;border:0;padding:8px;color:var(--primary);cursor:pointer}

/* ---------- View / scrolling ---------- */
.view{padding-bottom:calc(78px + var(--safe-bottom));min-height:100vh}

/* ---------- Bottom nav (frozen / never moves) ----------
   v9: locked on its own compositor layer so route changes
   never cause a "shake" or reflow of the navigation bar. */
.bottomnav{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(5,1fr);z-index:40;padding-bottom:var(--safe-bottom);
  transform:translateZ(0);will-change:transform;backface-visibility:hidden;
  contain:layout paint style;-webkit-transform:translateZ(0)}
.bottomnav,.bottomnav *{animation:none !important;transition:color .15s ease, background-color .15s ease !important}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;color:var(--muted);font-size:11px;font-weight:500}
.nav-item.active{color:var(--primary)}
.nav-item svg{width:22px;height:22px}
.nav-cta .cta-circle{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor;color:var(--text)}
.nav-cta.active .cta-circle{background:var(--primary);border-color:var(--primary);color:#fff}
.nav-cta.active{color:var(--primary)}

/* ---------- Common ---------- */
.section-label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;padding:18px 16px 8px;display:flex;justify-content:space-between;align-items:center}
.section-label .link{color:var(--primary);text-transform:none;font-size:13px}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin:0 12px}
.row-card{padding:16px}
.divider{height:1px;background:var(--border);margin:0 16px}

/* ---------- Home: balance ---------- */
.balance-card{display:flex;align-items:center;justify-content:space-between;padding:18px;margin:12px}
.balance-amount{font-size:22px;font-weight:800;color:var(--text)}
.balance-sub{font-size:13px;color:var(--muted);margin-top:2px}
.btn-primary{background:var(--primary);color:#fff;border:0;border-radius:999px;padding:12px 22px;font-weight:700;font-size:14px;cursor:pointer}
.btn-primary:active{background:var(--primary-600)}
.btn-block{display:block;width:100%;text-align:center}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Totals tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px}
.tile{background:var(--surface);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.tile .icon{width:32px;height:32px;border-radius:8px;background:var(--primary-50);color:var(--primary);display:grid;place-items:center;margin-bottom:12px}
.tile .label{font-size:14px;color:var(--text)}
.tile .value{font-size:18px;font-weight:700;margin-top:8px;color:var(--text)}

/* ---------- Search ---------- */
.search{display:flex;align-items:center;gap:8px;background:#eef0f4;border-radius:14px;padding:12px 14px;margin:12px}
[data-theme="dark"] .search{background:#1f2330}
.search input{flex:1;background:none;border:0;outline:none;font-size:15px}
.search svg{color:var(--muted)}

/* ---------- Categories list ---------- */
.cat-sticky{position:sticky;top:0;background:var(--bg);z-index:10;padding:14px 16px 8px;font-weight:700;font-size:14px;color:var(--text);
  display:flex;align-items:center;gap:10px;border-bottom:1px solid transparent}
.cat-sticky.is-stuck{box-shadow:0 4px 12px -8px rgba(0,0,0,.15);background:var(--surface);border-bottom-color:var(--border)}
.cat-sticky .cat-ico{
  width:32px;height:32px;border-radius:50%;
  border:2px solid var(--primary);
  background:var(--surface);
  color:var(--primary);
  display:grid;place-items:center;flex-shrink:0;overflow:hidden;font-size:16px
}
.cat-sticky .cat-ico img{width:18px;height:18px;border-radius:4px;object-fit:cover}
.cat-sticky .cat-ico .cat-fallback{font-size:14px}
.cat-list-ico{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--primary);background:var(--surface);
  color:var(--primary);display:grid;place-items:center;overflow:hidden
}
.cat-list-ico img{width:20px;height:20px;border-radius:4px;object-fit:cover}

/* ---------- Service card ---------- */
.svc{background:var(--surface);border-radius:var(--radius);padding:14px;margin:8px 12px;box-shadow:var(--shadow)}
.svc-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.svc-id{font-size:12px;color:var(--muted)}
.svc-name{font-weight:600;margin:6px 0 10px;line-height:1.35}
.svc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.svc-meta .m-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.svc-meta .m-value{font-size:13px;font-weight:600;margin-top:2px}
.svc-actions{display:flex;gap:8px}
.btn-outline{flex:1;background:none;border:1px solid var(--border);border-radius:999px;padding:10px;font-weight:600;font-size:13px;color:var(--text);cursor:pointer}
.btn-fill{flex:1;background:var(--primary);color:#fff;border:0;border-radius:999px;padding:10px;font-weight:700;font-size:13px;cursor:pointer}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:18px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:10px 0;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}

.chips{display:flex;gap:8px;padding:12px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:600;white-space:nowrap;color:var(--text);cursor:pointer}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---------- Order card ---------- */
.order{background:var(--surface);border-radius:var(--radius);margin:10px 12px;padding:14px;box-shadow:var(--shadow)}
.order-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.order-status{font-weight:600}
.order-status.completed{color:#059669}
.order-status.pending{color:#d97706}
.order-status.partial{color:#2563eb}
.order-status.canceled,.order-status.cancelled{color:#dc2626}
.order-status.in_progress,.order-status.processing{color:#0891b2}
.order-name{font-weight:500;margin:8px 0 12px;line-height:1.35}
.order-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.order-grid .lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-size:10px}
.order-grid .val{font-weight:600;font-size:13px;margin-top:2px;color:var(--text)}
.order-meta{margin-top:8px;font-size:11px;color:var(--muted)}
.order-link{margin-top:6px;color:var(--primary);font-size:13px;word-break:break-all}

/* ---------- Sheet (modal) ---------- */
.sheet{position:fixed;inset:0;z-index:60;visibility:hidden;opacity:0;transition:opacity .2s}
.sheet[aria-hidden="false"]{visibility:visible;opacity:1}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:20px 20px 0 0;
  max-height:92vh;overflow-y:auto;transform:translateY(100%);transition:transform .25s ease;
  padding-bottom:calc(20px + var(--safe-bottom))}
.sheet[aria-hidden="false"] .sheet-panel{transform:translateY(0)}
.sheet-handle{width:40px;height:4px;border-radius:4px;background:var(--border);margin:10px auto}

.field{padding:0 16px 14px}
.field label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-weight:600}
.field input,.field textarea,.field select{width:100%;padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);background:var(--surface)}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px}

.detail-list{margin:0 16px;background:var(--bg);border-radius:14px;overflow:hidden}
[data-theme="dark"] .detail-list{background:#1c2030}
.detail-list .dl-row{display:flex;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);font-size:14px}
.detail-list .dl-row:last-child{border-bottom:0}
.detail-list .dl-label{color:var(--muted)}
.detail-list .dl-value{font-weight:600}

.sticky-cta{position:sticky;bottom:0;background:linear-gradient(to top, var(--surface) 70%, transparent);padding:12px 16px;}
.sticky-cta .btn-primary.btn-block{width:100%}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:60px 24px;color:var(--muted)}
.empty .icon{font-size:48px;margin-bottom:12px}
.empty .title{font-weight:700;color:var(--text);margin-bottom:6px;font-size:16px}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;z-index:90;box-shadow:0 10px 25px rgba(0,0,0,.3);animation:fadeUp .3s;max-width:90vw;text-align:center}
.toast.error{background:#dc2626}
.toast.success{background:#059669}
@keyframes fadeUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Profile / Account ---------- */
.profile-card{display:flex;gap:14px;align-items:center;padding:16px;margin:12px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--primary-50);color:var(--primary);display:grid;place-items:center}
.profile-card .name{font-weight:700}
.profile-card .email{color:var(--muted);font-size:13px;margin-top:2px}

.list-card{background:var(--surface);border-radius:var(--radius);margin:12px;box-shadow:var(--shadow);overflow:hidden}
.list-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text);background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;cursor:pointer;font-size:15px}
.list-row:last-child{border-bottom:0}
.list-row .ico{width:36px;height:36px;border-radius:8px;background:var(--primary-50);color:var(--primary);display:grid;place-items:center;flex-shrink:0}
.list-row .label{flex:1;font-weight:500}
.list-row .label-block{flex:1;display:flex;flex-direction:column;gap:2px}
.list-row .label-block .label{font-weight:500}
.list-row .label-block .sub{font-size:12px;color:var(--muted);font-weight:400}
.list-row .value{color:var(--muted);font-size:14px}
.list-row .chev{color:var(--muted);font-size:18px;line-height:1}
.list-row .label.danger{color:var(--danger)}

/* The big red-circle outline icon style from the screenshot */
.account-list .ico-circle{
  width:38px;height:38px;border-radius:50%;
  background:transparent;
  border:2px solid var(--primary);
  color:var(--primary);
  display:grid;place-items:center;flex-shrink:0;
  font-weight:700;font-size:15px;
}
.account-list .ico-circle svg{width:20px;height:20px;stroke:var(--primary);stroke-width:2}
.account-list .ico-circle.danger{background:var(--primary);border-color:var(--primary);color:#fff}
.account-list .ico-circle.danger svg{stroke:#fff}

/* iOS-style switch */
.toggle-row{cursor:default}
.switch{position:relative;display:inline-block;width:50px;height:28px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s}
.switch .slider::before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:var(--primary)}
.switch input:checked + .slider::before{transform:translateX(22px)}
[data-theme="dark"] .switch .slider{background:#475569}

/* ---------- FAQ ---------- */
.faq{padding:14px 16px;border-bottom:1px solid var(--border)}
.faq:last-child{border-bottom:0}
.faq summary{display:flex;justify-content:space-between;align-items:center;font-weight:600;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"⌄";color:var(--primary);font-size:20px;transition:transform .2s}
.faq[open] summary::after{transform:rotate(180deg)}
.faq p{margin:10px 0 0;color:var(--muted);font-size:14px}

/* ---------- Skeleton ---------- */
.skel{background:linear-gradient(90deg,var(--border) 0%,#f3f4f7 50%,var(--border) 100%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:8px;height:14px}
[data-theme="dark"] .skel{background:linear-gradient(90deg,#1c2030 0%,#252a36 50%,#1c2030 100%);background-size:200% 100%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Search results ---------- */
.search-wrap{position:relative}
.search-clear{background:none;border:0;color:var(--muted);font-size:14px;padding:4px 6px;cursor:pointer}
.search-results{position:absolute;left:12px;right:12px;top:54px;background:var(--surface);border-radius:14px;box-shadow:0 12px 32px -8px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.06);max-height:60vh;overflow-y:auto;z-index:20;border:1px solid var(--border)}
.search-row{display:block;width:100%;text-align:left;background:none;border:0;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text);cursor:pointer}
.search-row:last-child{border-bottom:0}
.search-row:hover,.search-row:active{background:var(--bg)}
.sr-id{font-size:11px;color:var(--muted)}
.sr-name{font-weight:600;margin:2px 0 4px;font-size:14px}
.sr-meta{font-size:12px;color:var(--muted)}
.search-empty{padding:18px;text-align:center;color:var(--muted);font-size:14px}

/* ---------- Announcement (top of dashboard) ---------- */
.ann-top{padding-top:8px}
.announcement-card{
  display:flex;gap:14px;align-items:flex-start;padding:16px;margin:8px 12px 4px;
  background:linear-gradient(135deg, var(--primary-50) 0%, var(--surface) 100%);
  border:1px solid var(--primary-100);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
[data-theme="dark"] .announcement-card{background:linear-gradient(135deg,#2a1820 0%,var(--surface) 100%);border-color:#3a2030}
.announcement-card .ann-icon{
  width:42px;height:42px;border-radius:50%;
  background:var(--primary);color:#fff;display:grid;place-items:center;
  font-size:22px;flex-shrink:0
}
.announcement-card .ann-body-wrap{flex:1;min-width:0}
.ann-title{font-weight:700;font-size:15px;color:var(--text);margin-bottom:6px;line-height:1.3}
.ann-body{color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:12px}
.ann-cta{display:inline-block;padding:9px 18px;font-size:13px}

/* ---------- Sheet headings ---------- */
.sheet-title{text-align:center;font-weight:700;font-size:17px;padding:14px 16px}

/* ---------- API key box ---------- */
.apikey-box{margin:8px 16px 4px;background:var(--bg);border:1px dashed var(--border);border-radius:14px;padding:14px;position:relative}
[data-theme="dark"] .apikey-box{background:#1c2030}
.apikey-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.apikey-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all;color:var(--text);padding-right:54px}
.apikey-copy{position:absolute;top:10px;right:10px;background:var(--primary);color:#fff;border:0;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.apikey-meta{padding:6px 16px 16px;color:var(--muted);font-size:12px;text-align:center}

.method-row{display:flex;align-items:center;gap:14px;padding:14px 16px;color:var(--text);cursor:pointer}

/* ============================================================
   AUTH SCREENS (Login / Register)
   ============================================================ */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:30px 16px 30px;background:var(--bg)}
.auth-brand{text-align:center;margin:24px 0 22px}
.auth-logo{
  width:72px;height:72px;border-radius:22px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%);
  color:#fff;display:grid;place-items:center;margin:0 auto 14px;
  font-size:34px;box-shadow:0 10px 28px -8px rgba(225,29,72,.55)
}
.auth-site{font-weight:800;font-size:22px;color:var(--text);letter-spacing:1px}
.auth-tag{color:var(--muted);font-size:14px;margin-top:6px}

.auth-card{width:100%;max-width:420px;background:var(--surface);border-radius:20px;box-shadow:0 12px 40px -12px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.04);padding:6px 0 20px;margin:0 auto}

.auth-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:8px}
.auth-tab{flex:1;background:none;border:0;padding:16px 0;font-weight:700;color:var(--muted);cursor:pointer;font-size:14px;border-bottom:3px solid transparent;margin-bottom:-1px}
.auth-tab.active{color:var(--primary);border-bottom-color:var(--primary)}

.auth-row{display:flex;align-items:center;gap:8px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--primary)}

.auth-actions{padding:8px 16px 4px}
.auth-actions .btn-primary{padding:14px}
.auth-foot{text-align:center;color:var(--muted);font-size:14px;padding:14px 16px 0}
.auth-foot a{color:var(--primary);font-weight:700}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:14px 16px 4px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border,#e5e7eb)}
.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f2937;border:1px solid #dadce0;border-radius:999px;padding:12px 18px;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:background .15s ease,box-shadow .15s ease}
.btn-google:hover{background:#f8fafc;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.btn-google.btn-block{width:100%}
[data-theme="dark"] .btn-google{background:#fff;color:#1f2937}

/* ============================================================
   ALERTS / FORMS / TABLES / TICKETS — added v8
   ============================================================ */
.alert{padding:12px 14px;border-radius:10px;margin:10px 12px;font-size:14px;line-height:1.45}
.alert-success{background:#e9f7ef;color:#0f5132;border:1px solid #b7ebc6}
.alert-danger{background:#fdecea;color:#842029;border:1px solid #f5c2c7}
body[data-theme="dark"] .alert-success{background:rgba(34,197,94,.12);color:#a7f3d0;border-color:rgba(34,197,94,.3)}
body[data-theme="dark"] .alert-danger{background:rgba(239,68,68,.12);color:#fecaca;border-color:rgba(239,68,68,.35)}

.addfunds-form{padding:14px 16px}
.addfunds-form .field{margin-bottom:14px}
.addfunds-form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.addfunds-form input,.addfunds-form select,.addfunds-form textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:15px;outline:none
}
.addfunds-form input:focus,.addfunds-form select:focus,.addfunds-form textarea:focus{border-color:var(--primary)}
.addfunds-form input[disabled]{background:rgba(0,0,0,.04);color:var(--muted)}

/* Style backend-injected addfunds form-group / control-label / submit button */
.addfunds-form .form-group{margin-bottom:14px}
.addfunds-form .control-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.addfunds-form .form-control{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:15px;outline:none;-webkit-appearance:none
}
.addfunds-form .form-control:focus{border-color:var(--primary)}
.addfunds-form .form-control[disabled]{background:rgba(0,0,0,.04);color:var(--muted)}
.addfunds-form .btn,
.addfunds-form .btn-primary,
.addfunds-form .btn-big-primary,
.addfunds-form .btn-block{
  width:100%;display:inline-block;padding:13px 16px;border-radius:10px;border:0;
  background:var(--primary);color:#fff;font-weight:700;font-size:15px;cursor:pointer;
  margin-top:6px;text-align:center;transition:filter .15s
}
.addfunds-form .btn:hover,.addfunds-form .btn-primary:hover{filter:brightness(.95)}
.addfunds-form .btn:disabled{opacity:.7;cursor:not-allowed}
.addfunds-form .panel-body{font-size:13px;color:var(--muted);line-height:1.5}
.addfunds-form .panel-body p{margin:0 0 6px 0}


/* Compact table for tickets and recent payments */
.mobile-table{width:100%;border-collapse:collapse;font-size:13px}
.mobile-table th,.mobile-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
.mobile-table thead th{background:rgba(0,0,0,.03);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.mobile-table tbody tr:last-child td{border-bottom:0}
.mobile-table .nowrap{white-space:nowrap}
body[data-theme="dark"] .mobile-table thead th{background:rgba(255,255,255,.04)}

.ticket-row{cursor:pointer;transition:background .15s}
.ticket-row:hover{background:rgba(225,29,72,.04)}
body[data-theme="dark"] .ticket-row:hover{background:rgba(225,29,72,.12)}

/* Ticket page (create + history) */
.ticket-page{padding:14px 0 30px}
.ticket-create-card{padding:14px 16px;margin:0 12px}
.ticket-create-card .field{margin-bottom:12px}
.ticket-create-card label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.ticket-create-card select,.ticket-create-card textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:15px;outline:none
}

/* Open ticket detail */
.ticket-detail{padding:14px 0 30px}
.ticket-head{padding:14px 16px;margin:0 12px 12px}
.ticket-head__title{font-weight:700;font-size:17px;color:var(--text)}
.ticket-head__meta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge-closed{background:rgba(239,68,68,.12);color:#dc2626;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}

.ticket-thread{padding:14px;margin:0 12px 12px;display:flex;flex-direction:column;gap:12px}
.ticket-msg{max-width:88%;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.5;word-wrap:break-word}
.ticket-msg__body{white-space:pre-wrap}
.ticket-msg__meta{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:11px;color:var(--muted)}
.ticket-row-user{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.ticket-row-user .ticket-msg__meta{color:rgba(255,255,255,.85)}
.ticket-row-admin{align-self:flex-start;background:rgba(0,0,0,.05);color:var(--text);border-bottom-left-radius:4px}
body[data-theme="dark"] .ticket-row-admin{background:rgba(255,255,255,.06)}

.ticket-reply-box{padding:14px 16px;margin:0 12px}
.ticket-reply-box .field{margin-bottom:12px}
.ticket-reply-box label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.ticket-reply-box textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:15px;outline:none;min-height:110px
}

/* ============================================================
   v7 ADDITIONS – page transitions, loading text, ticket screen,
   logo header, balance bump, success pop animation
   ============================================================ */

/* Brand logo (splash + auth) */
.brand-logo{max-height:48px;max-width:220px;display:block}
.auth-logo--img{background:transparent;width:auto;height:auto;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;padding:8px 0}
.auth-logo--img img{max-height:64px;max-width:240px;display:block}

/* v9: view slide-in animation removed entirely.
   Pages now swap instantly so the bottom navigation
   stays absolutely fixed/frozen on every route change. */
@keyframes viewSlideIn{from{opacity:1;transform:none}to{opacity:1;transform:none}}
.view.view-enter{animation:none}

/* v9: page-loader removed (no top loading message on page switch). */
.page-loader,.page-loader__inner,.page-loader__bar,.page-loader__bar span,.page-loader__text,.page-loader__text span{display:none !important}

/* Inline loading text (used as placeholder while data loads) */
.loading-text{display:inline-flex;gap:1px;font-weight:700;color:var(--muted)}
.loading-text span{display:inline-block;animation:loadHop 1.1s ease-in-out infinite}
.loading-text span:nth-child(1){animation-delay:0s}
.loading-text span:nth-child(2){animation-delay:.08s}
.loading-text span:nth-child(3){animation-delay:.16s}
.loading-text span:nth-child(4){animation-delay:.24s}
.loading-text span:nth-child(5){animation-delay:.32s}
.loading-text span:nth-child(6){animation-delay:.40s}
.loading-text span:nth-child(7){animation-delay:.48s}

/* Tickets screen – matches reference screenshot */
.tickets-screen{padding:0}
.tickets-list-holder{
  min-height:calc(100vh - 220px);
  display:flex;align-items:center;justify-content:center;
}
.tickets-empty{
  width:100%;text-align:center;color:var(--muted);
  padding:60px 24px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.empty-doc-icon{
  position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center;
}
.empty-doc-icon svg{width:84px;height:84px}
.empty-doc-q{
  position:absolute;right:6px;bottom:6px;
  width:32px;height:32px;border-radius:50%;
  background:#9ca3af;color:#fff;
  display:grid;place-items:center;
  font-weight:800;font-size:18px;
}
.empty-msg{font-size:17px;color:#6b7280}

/* Floating bottom CTA above the bottom nav */
.floating-cta{
  position:fixed;left:0;right:0;bottom:calc(70px + var(--safe-bottom));
  padding:10px 16px;
  z-index:35;
  pointer-events:none;
}
.floating-cta .btn-cta{
  pointer-events:auto;
  border-radius:999px;
  padding:16px 22px;
  font-size:16px;
  box-shadow:0 6px 18px -6px color-mix(in oklab, var(--primary) 55%, transparent);
}

/* Push view content so the floating CTA never overlaps real content */
.tickets-screen + .floating-cta ~ * {}
.ticket-page.tickets-screen{padding-bottom:90px}

/* Balance bump animation when add funds succeeds */
@keyframes balanceBump{
  0%  {transform:scale(1);   color:var(--text)}
  30% {transform:scale(1.08);color:#059669}
  100%{transform:scale(1);   color:var(--text)}
}
.balance-bump{animation:balanceBump .9s ease both}

/* Order success pop (used in the order placed sheet) */
@keyframes successPop{
  0%  {transform:scale(.4);opacity:0}
  60% {transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.success-pop{animation:successPop .5s cubic-bezier(.2,.8,.2,1) both}

/* Reduce motion users: keep functionality, drop animations */
@media (prefers-reduced-motion: reduce){
  .view.view-enter,
  .balance-bump,
  .success-pop,
  .page-loader__bar span,
  .page-loader__text span,
  .loading-text span{animation:none}
}

/* v14: announcements + inline install option */
.announce-item{padding:14px 16px;border-bottom:1px solid var(--border,#eee)}
.announce-item:last-child{border-bottom:none}
.announce-title{font-weight:700;font-size:15px;color:var(--text,#111);margin-bottom:4px}
.announce-content{font-size:13px;color:var(--muted,#6b7280);line-height:1.45}
.announce-date{font-size:11px;color:var(--muted,#9ca3af);margin-top:6px}

.install-card{display:flex;align-items:center;gap:14px;margin:10px 12px 12px;padding:16px 14px;background:#000;color:#fff;border-radius:18px;box-shadow:var(--shadow)}
.install-close{width:28px;height:28px;border:0;background:transparent;color:#9ca3af;font-size:30px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;flex-shrink:0}
.install-copy{flex:1;min-width:0}
.install-title{font-size:17px;font-weight:800;line-height:1.2;color:#fff;margin-bottom:4px}
.install-sub{font-size:14px;line-height:1.35;color:#f3f4f6}
.install-btn{border:0;border-radius:999px;background:#f00;color:#fff;font-size:17px;font-weight:700;padding:12px 24px;cursor:pointer;flex-shrink:0}
.install-btn:active{background:#dc2626}