:root{
  font-family:Inter,Arial,ui-sans-serif,system-ui,sans-serif;
  color:#071638;
  background:#f4f8ff;
  font-size:16px;
  --blue:#1167f1;
  --blue-2:#2f8cff;
  --navy:#071d3d;
  --navy-2:#092a58;
  --text:#071638;
  --muted:#53658a;
  --line:#dbe6f5;
  --soft:#f6f9fe;
  --green:#16a45f;
  --amber:#c87512;
  --red:#e8313f;
  --purple:#5e63f6;
  --shadow:0 18px 45px rgba(26,64,123,.11);
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(120deg,#f8fbff 0,#eff6ff 100%);color:var(--text);overflow-x:hidden}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.app-shell{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}
.nav-collapsed .app-shell{grid-template-columns:86px minmax(0,1fr)}
.nav-collapsed nav{padding:24px 10px}
.nav-collapsed .brand{justify-content:center;padding:0 0 10px}
.nav-collapsed .brand span:last-child,.nav-collapsed .panel-switch,.nav-collapsed .nav-support,.nav-collapsed .nav-footer{display:none}
.nav-collapsed .nav-links a{justify-content:center;padding:0;font-size:0}
.nav-collapsed .nav-icon{width:32px;height:32px;font-size:.66rem}
nav{
  min-height:100vh;
  position:sticky;
  top:0;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px 14px;
  background:#fff;
  border-right:1px solid var(--line);
  box-shadow:12px 0 32px rgba(30,77,132,.07);
}
.nav-support{
  margin:auto 8px 0;
  padding:18px;
  display:grid;
  gap:8px;
  border:1px solid rgba(37,127,255,.28);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#fff;
}
.nav-support span{color:#c9dbfa;font-size:.86rem}
.nav-support a{
  min-height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(120,174,255,.55);
  border-radius:7px;
  color:#fff;
  font-weight:800;
}
.nav-logout{
  width:100%;
  min-height:38px;
  margin-top:4px;
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(120,174,255,.55);
}
.page-head .head-actions [data-logout]{display:none}
.nav-footer{display:flex;justify-content:space-between;margin:10px 10px 0;color:#c9dbfa;font-size:.82rem}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px 10px;
  color:var(--blue);
  text-decoration:none;
}
.brand-mark{
  width:44px;
  height:44px;
  border-radius:10px 10px 22px 10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue-2),var(--blue));
  color:#fff;
  font-weight:900;
  font-size:1.5rem;
  font-style:italic;
}
.brand strong{
  display:block;
  color:var(--blue);
  font-size:1.72rem;
  line-height:.94;
  font-style:italic;
  letter-spacing:-1px;
}
.brand small{display:block;margin-top:6px;color:#174074;font-size:.73rem;font-weight:700}
.panel-switch{
  margin:0 8px 8px;
  padding:15px 22px;
  border:1px solid #2b7ff3;
  border-radius:999px;
  background:linear-gradient(135deg,#eef6ff,#dcecff);
  color:#0f55bd;
  font-weight:800;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-links{display:grid;gap:8px}
.nav-links a{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 16px;
  border-radius:8px;
  color:#10224a;
  font-size:1rem;
}
.nav-icon{
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:5px;
  background:#dce9ff;
  box-shadow:inset 0 0 0 2px #99bdff;
  color:#0f55bd;
  font-size:.65rem;
  font-weight:900;
  line-height:1;
}
.nav-links a.active{
  background:linear-gradient(135deg,#2b8cff,#0d63ed);
  color:#fff;
  box-shadow:0 12px 24px rgba(17,103,241,.22);
  text-decoration:none;
}
.nav-links a.active .nav-icon{background:#fff;box-shadow:none;color:#0d63ed}
.dashboard-page nav{
  background:linear-gradient(180deg,#2864d4,#2454ba);
  border-right:0;
  box-shadow:14px 0 34px rgba(4,17,39,.18);
}
.dashboard-page .brand strong{color:#fff}
.dashboard-page .brand small{color:#d7e6ff}
.dashboard-page .nav-links a{color:#dbe8ff}
.dashboard-page .nav-icon{background:#cfe0ff;box-shadow:none;color:#0f55bd}
.dashboard-page .nav-links a.active{
  background:linear-gradient(135deg,#2b8cff,#0d63ed);
  color:#fff;
}
.dashboard-page footer{background:transparent}
.owner-page nav{
  background:linear-gradient(180deg,#2864d4,#2454ba);
  border-right:0;
  box-shadow:14px 0 34px rgba(4,17,39,.18);
}
.owner-page .brand strong{color:#fff}
.owner-page .brand small{color:#d7e6ff}
.owner-page .panel-switch{
  background:rgba(28,111,230,.15);
  border-color:#2178ed;
  color:#dbeaff;
}
.owner-page .nav-links a{color:#dbe8ff}
.owner-page .nav-icon{background:#cfe0ff;box-shadow:none;color:#0f55bd}
.owner-page .nav-links a.active{background:linear-gradient(135deg,#2b8cff,#0d63ed);color:#fff}
.owner-page footer{background:transparent}
.workspace{min-width:0;display:grid;grid-template-rows:auto 1fr auto}
.topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 28px;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 18px rgba(28,60,102,.06);
}
.menu-button{
  width:38px;
  height:38px;
  flex:0 0 auto;
  border:1px solid #d9e6f7;
  background:#eef5ff;
  color:var(--blue);
  border-radius:8px;
  font-size:1.05rem;
  font-weight:800;
  cursor:pointer;
}
.search-box{
  width:min(560px,44vw);
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  background:#f5f8fe;
  border:1px solid #edf3fb;
  border-radius:8px;
  color:#4b66a0;
}
.search-box span{font-size:.78rem;font-weight:800;color:var(--blue)}
.search-box input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
}
kbd{
  padding:4px 8px;
  border:1px solid #d8e3f1;
  border-radius:6px;
  background:#fff;
  color:#5d6e91;
  font:inherit;
  font-size:.75rem;
  white-space:nowrap;
}
.profile{margin-left:auto;display:flex;align-items:center;gap:14px;color:#06183d}
.profile small{display:block;color:#24406e}
.bell{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--red);
  font-weight:900;
}
.avatar{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#1d8bff,#095ce3);
}
main{width:100%;padding:30px 28px 34px}
footer{padding:18px 28px;color:#6d7da0;font-size:.82rem}
footer a{margin-right:14px}
.page-head{
  min-height:88px;
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:20px;
  margin-bottom:22px;
}
.page-head h1{margin:0 0 8px;font-size:2.2rem;line-height:1.08}
.page-head p{margin:0;color:#344b78;font-size:1.08rem}
.head-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
h1,h2{color:#071638}
h2{margin:0;font-size:1.18rem}
p{line-height:1.55}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
article,.panel,.metric,.auth{
  min-width:0;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
}
.metric{position:relative;overflow:hidden;padding:22px 22px 20px 116px;min-height:126px}
.metric:after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-42px;
  width:140px;
  height:90px;
  border-radius:50%;
  background:rgba(17,103,241,.08);
}
.metric p{margin:8px 0 12px;color:#13244a;font-weight:800}
.metric h2{font-size:1.85rem;line-height:1.1;margin:0 0 10px}
.metric small{color:#223b69}
.metric.green{background:linear-gradient(135deg,#f1fffb,#faffff)}
.metric.amber{background:linear-gradient(135deg,#fff9ed,#fffdf9)}
.metric.purple{background:linear-gradient(135deg,#f8f7ff,#fff)}
.icon{
  position:absolute;
  left:22px;
  top:22px;
  width:58px;
  height:58px;
  border-radius:13px;
  background:linear-gradient(135deg,#e8f2ff,#cfe3ff);
}
.icon:before,.icon:after{content:"";position:absolute;background:var(--blue);border-radius:3px}
.wallet:before{left:14px;top:18px;width:30px;height:22px}.wallet:after{right:12px;top:25px;width:8px;height:8px;border-radius:50%;background:#fff}
.cart:before{left:14px;top:18px;width:30px;height:24px;background:var(--green);clip-path:polygon(0 0,86% 0,72% 75%,18% 75%)}.cart:after{left:18px;bottom:11px;width:24px;height:5px;background:var(--green)}
.bars:before{left:14px;bottom:14px;width:6px;height:18px;background:var(--amber);box-shadow:10px -8px 0 var(--amber),20px -18px 0 var(--amber),30px -28px 0 var(--amber)}
.arrows:before{left:14px;top:20px;width:32px;height:5px;background:var(--purple)}.arrows:after{left:24px;top:33px;width:24px;height:5px;background:var(--purple)}
.coins:before{left:15px;top:14px;width:28px;height:10px;border-radius:50%;box-shadow:0 8px 0 var(--blue),0 16px 0 var(--blue);background:var(--blue)}
.users:before{left:12px;top:15px;width:14px;height:14px;border-radius:50%;box-shadow:20px 0 0 var(--purple),10px 20px 0 8px rgba(94,99,246,.9);background:var(--purple)}
.trend{color:var(--green)!important;font-weight:800}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,.95fr);gap:18px;margin-bottom:18px}
.owner-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(320px,.85fr);gap:18px;margin-bottom:18px}
.lower{grid-template-columns:minmax(0,1fr) minmax(320px,.52fr)}
.dashboard-page .workspace{
  background:
    radial-gradient(circle at 84% 4%,rgba(47,140,255,.09),transparent 30%),
    linear-gradient(180deg,#f8fbff 0,#eef5ff 100%);
}
.dashboard-page main{padding:28px 30px 34px}
.dashboard-page .topbar{
  position:relative;
  min-height:74px;
  padding:0 30px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
}
.dashboard-page .topbar:before{
  content:"Cari transaksi, merchant, atau laporan...";
  width:min(520px,46vw);
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 18px 0 46px;
  border:1px solid #e6eef8;
  border-radius:8px;
  background:#f5f8fd;
  color:#6b7b9a;
  font-size:.9rem;
}
.dashboard-page .topbar:after{
  content:"⌕";
  position:absolute;
  left:48px;
  top:25px;
  color:#1a376b;
  font-weight:900;
}
.dashboard-page .profile{margin-left:auto}
.dashboard-page .profile:before{
  content:"";
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-right:1px solid #e5edf7;
  padding-right:22px;
  margin-right:4px;
  background:
    radial-gradient(circle at 66% 28%,#ef3042 0 4px,transparent 5px),
    linear-gradient(#10224a,#10224a) center 9px/12px 2px no-repeat,
    linear-gradient(#10224a,#10224a) center 17px/16px 2px no-repeat;
}
.user-dashboard-head{
  min-height:auto;
  align-items:center;
  margin-bottom:20px;
}
.user-dashboard-head h1{font-size:1.72rem}
.user-dashboard-head p{font-size:1rem;color:#40557d}
.date-filter{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border:1px solid #dfe8f5;
  border-radius:8px;
  background:#fff;
  color:#263f6f;
  font-weight:800;
  font-size:.88rem;
  box-shadow:0 8px 20px rgba(23,61,117,.06);
}
.user-metrics{gap:18px;margin-bottom:18px}
.user-metrics .metric{
  min-height:150px;
  padding:24px 20px 20px 94px;
  border-color:#e1e9f4;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(28,68,124,.08);
}
.user-metrics .metric:after{display:none}
.user-metrics .metric p{margin:2px 0 10px;color:#53658a;font-size:.92rem}
.user-metrics .metric h2{font-size:1.65rem;color:#071638}
.user-metrics .metric small{font-weight:700;color:#53658a}
.user-metrics .icon{width:48px;height:48px;left:24px;top:25px;border-radius:9px}
.user-overview{grid-template-columns:minmax(0,1.95fr) minmax(310px,.72fr)}
.user-overview .panel,.insight-grid .panel,.user-lower .panel{
  border-color:#e1e9f4;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(28,68,124,.08);
}
.user-overview .chart-panel{padding:20px}
.user-chart{min-height:290px;margin-bottom:20px}
.ledger-head{margin-top:4px;padding-top:18px;border-top:1px solid #edf2f8}
.balance-summary h2#balance{
  margin:8px 0 2px;
  font-size:2.05rem;
  color:#071638;
}
.balance-label{margin:0;color:#53658a;font-weight:750}
.balance-summary .split-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:20px 0;
}
.settlement-note{
  display:grid;
  gap:6px;
  padding:18px 18px 18px 54px;
  position:relative;
  border-radius:8px;
  background:#eafaf0;
  color:#123c29;
}
.settlement-note:before{
  content:"";
  position:absolute;
  left:18px;
  top:19px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#18b95f;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.24);
}
.settlement-note span{color:#385c4a;font-size:.88rem;line-height:1.45}
.insight-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr 1fr;
  gap:18px;
  margin-bottom:18px;
}
.donut-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.donut{
  width:134px;
  height:134px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:50%;
  background:conic-gradient(#115ff0 0 48%,#2f8cff 48% 76%,#ffc245 76% 88%,#7f4cf2 88% 94%,#dae4f2 94% 100%);
  position:relative;
}
.donut.green{background:conic-gradient(#18b95f 0 86%,#ffc245 86% 94%,#ef3042 94% 100%)}
.donut:before{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:50%;
  background:#fff;
}
.donut b,.donut small{position:relative;z-index:1;text-align:center}
.donut b{font-size:1.32rem;color:#071638}
.donut small{margin-top:-34px;color:#53658a;font-weight:700}
.donut-list{display:grid;gap:12px}
.donut-list p{display:flex;align-items:center;gap:10px;margin:0;color:#344b78;font-size:.9rem}
.donut-list i{
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-radius:50%;
  background:#115ff0;
}
.donut-list p:nth-child(2) i{background:#ffc245}
.donut-list p:nth-child(3) i{background:#ef3042}
.donut-list strong{margin-left:auto;color:#071638}
.trend-panel .line-chart{min-height:120px;margin-top:12px}
.trend-panel h2{font-size:1.55rem}
.trend-panel .badge{background:#f4f8ff;color:#38537c;border:1px solid #dfe8f5}
.user-lower{grid-template-columns:minmax(0,1fr) minmax(320px,.74fr)}
.owner-page .workspace{
  background:
    radial-gradient(circle at 86% 4%,rgba(47,140,255,.08),transparent 30%),
    linear-gradient(180deg,#f8fbff 0,#eef5ff 100%);
}
.owner-page main{padding:28px 30px 34px}
.owner-page .topbar{
  position:relative;
  min-height:74px;
  padding:0 30px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
}
.owner-page .topbar:before{
  content:"Cari transaksi, merchant, atau ID...";
  width:min(560px,45vw);
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 18px 0 46px;
  border:1px solid #e6eef8;
  border-radius:8px;
  background:#f5f8fd;
  color:#6b7b9a;
  font-size:.9rem;
}
.owner-page .topbar:after{
  content:"⌕";
  position:absolute;
  left:48px;
  top:25px;
  color:#1a376b;
  font-weight:900;
}
.owner-page .profile{margin-left:auto}
.owner-dashboard-head{
  min-height:auto;
  align-items:center;
  margin-bottom:20px;
}
.owner-dashboard-head h1{font-size:1.72rem}
.owner-dashboard-head p{font-size:1rem;color:#40557d}
.owner-metrics{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.owner-metrics .metric{
  min-height:150px;
  padding:22px 16px 18px 78px;
  border-color:#e1e9f4;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(28,68,124,.08);
}
.owner-metrics .metric:after{display:none}
.owner-metrics .metric p{margin:1px 0 10px;color:#53658a;font-size:.84rem}
.owner-metrics .metric h2{font-size:1.28rem;color:#071638;overflow-wrap:anywhere}
.owner-metrics .metric small{font-size:.78rem;font-weight:700;color:#53658a}
.owner-metrics .icon{width:44px;height:44px;left:18px;top:23px;border-radius:9px}
.metric.teal{background:linear-gradient(135deg,#f1fffb,#fff)}
.metric.orange{background:linear-gradient(135deg,#fff8f1,#fff)}
.owner-dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(330px,.9fr) minmax(290px,.78fr);
  gap:18px;
  margin-bottom:18px;
}
.owner-dashboard-grid .panel,.owner-insights .panel,.owner-data-grid .panel,.owner-ops-grid .panel,.owner-table{
  border-color:#e1e9f4;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(28,68,124,.08);
}
.owner-chart{min-height:280px}
.owner-revenue-panel .line-chart{min-height:180px;margin-top:12px}
.owner-revenue-panel h2{font-size:1.72rem}
.owner-side{gap:14px}
.system-status p{
  padding:8px 0;
  border-bottom:1px solid #edf2f8;
}
.system-status p:last-child{border-bottom:0}
.system-status strong:before{
  content:"";
  width:9px;
  height:9px;
  display:inline-block;
  margin-right:8px;
  border-radius:50%;
  background:#18b95f;
}
.owner-insights{
  grid-template-columns:1fr 1fr 1fr;
}
.owner-shortcuts{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.shortcut-card{
  display:grid;
  gap:8px;
  min-height:112px;
  align-content:center;
  color:#10224a;
  text-decoration:none;
}
.shortcut-card:hover{text-decoration:none;border-color:#bcd4fb}
.shortcut-card strong{font-size:1.05rem}
.shortcut-card span{color:#53658a;font-weight:700;line-height:1.45}
.notice-list{display:grid;gap:14px}
.notice-list p{
  display:grid;
  grid-template-columns:12px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0;
  color:#344b78;
}
.notice-list i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#115ff0;
}
.notice-list p:nth-child(2) i{background:#18b95f}
.notice-list p:nth-child(3) i{background:#ef3042}
.notice-list strong{color:#071638}
.owner-config-grid,.owner-users-grid{grid-template-columns:1fr 1fr}
.owner-data-grid{grid-template-columns:minmax(0,1.35fr) minmax(360px,.8fr)}
.owner-ops-grid{grid-template-columns:1fr 1fr}
.owner-table{margin-bottom:18px}
.payment-setting-list{display:grid;gap:12px;margin:14px 0 16px}
.payment-setting-list p{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:12px 14px;
  border:1px solid #e3ebf6;
  border-radius:8px;
  background:#f8fbff;
  color:#243b69;
  font-weight:800;
}
.user-action-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0 0 14px;
}
.payment-method-settings{display:grid;gap:12px;margin:12px 0 16px}
.payment-method-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid #e3ebf6;
  border-radius:8px;
  background:#f8fbff;
}
.payment-method-row span{display:grid;gap:4px;color:#10224a}
.payment-method-row small{color:#53658a;font-weight:700}
.danger{color:#c32634;border-color:#f2c0c6}
.muted{color:#53658a}
.panel{padding:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.panel-head a{font-size:.9rem;font-weight:700}
button,.button{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:7px;
  padding:11px 18px;
  background:linear-gradient(135deg,#257fff,#0d62ed);
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(17,103,241,.22);
}
button:hover,.button:hover{filter:brightness(.96);text-decoration:none}
button:disabled{opacity:.55;cursor:wait}
.secondary{background:#fff;color:#0a2452;border:1px solid #d9e4f3;box-shadow:none}
.date-filter{min-width:245px}
.line-chart{
  min-height:260px;
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:
    linear-gradient(to right,rgba(34,103,194,.1) 1px,transparent 1px) 0 0/12.5% 100%,
    linear-gradient(to top,rgba(34,103,194,.12) 1px,transparent 1px) 0 0/100% 25%,
    linear-gradient(180deg,#fff,#f5f9ff);
}
.line-chart:before{
  content:"";
  position:absolute;
  inset:44px 26px 44px;
  background:linear-gradient(180deg,rgba(25,111,239,.28),rgba(25,111,239,.02));
  clip-path:polygon(0 72%,7% 60%,14% 68%,22% 52%,30% 58%,38% 25%,46% 40%,54% 34%,62% 50%,70% 42%,78% 55%,86% 28%,94% 16%,100% 36%,100% 100%,0 100%);
}
.line-chart span{
  position:absolute;
  inset:44px 26px 44px;
  border-top:4px solid var(--blue);
  clip-path:polygon(0 72%,7% 60%,14% 68%,22% 52%,30% 58%,38% 25%,46% 40%,54% 34%,62% 50%,70% 42%,78% 55%,86% 28%,94% 16%,100% 36%);
}
.trade-chart{
  min-height:290px;
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:
    linear-gradient(to right,rgba(34,103,194,.1) 1px,transparent 1px) 0 0/12.5% 100%,
    linear-gradient(to top,rgba(34,103,194,.12) 1px,transparent 1px) 0 0/100% 20%,
    linear-gradient(180deg,#fff,#f4f8ff);
}
.trade-chart:before{
  content:"";
  position:absolute;
  left:7%;
  right:5%;
  bottom:34px;
  height:130px;
  background:linear-gradient(90deg,transparent 0 3%,rgba(47,140,255,.22) 3% 5%,transparent 5% 13%,rgba(47,140,255,.34) 13% 15%,transparent 15% 25%,rgba(47,140,255,.2) 25% 27%,transparent 27% 38%,rgba(47,140,255,.36) 38% 41%,transparent 41% 52%,rgba(47,140,255,.26) 52% 55%,transparent 55% 66%,rgba(47,140,255,.42) 66% 69%,transparent 69% 80%,rgba(47,140,255,.3) 80% 83%,transparent 83% 94%,rgba(47,140,255,.48) 94% 97%,transparent 97%);
}
.trade-chart span{
  position:absolute;
  inset:42px 30px 58px;
  background:linear-gradient(180deg,rgba(17,103,241,.28),rgba(17,103,241,.03));
  clip-path:polygon(0 74%,7% 62%,14% 68%,22% 52%,30% 56%,38% 30%,46% 42%,54% 34%,62% 49%,70% 40%,78% 54%,86% 29%,94% 18%,100% 33%,100% 100%,0 100%);
}
.trade-chart i{
  position:absolute;
  inset:42px 30px 58px;
  border-top:4px solid var(--blue);
  clip-path:polygon(0 74%,7% 62%,14% 68%,22% 52%,30% 56%,38% 30%,46% 42%,54% 34%,62% 49%,70% 40%,78% 54%,86% 29%,94% 18%,100% 33%);
}
.trade-chart b{position:absolute;color:#284674;font-size:.82rem;font-weight:700;font-style:normal}
.trade-chart .y{left:8px}.trade-chart .y1{top:45px}.trade-chart .y2{top:92px}.trade-chart .y3{top:142px}.trade-chart .y4{top:192px}
.trade-chart .x{bottom:10px}.trade-chart .x1{left:8%}.trade-chart .x2{left:32%}.trade-chart .x3{left:60%}.trade-chart .x4{right:4%}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;color:#425b89;font-size:.86rem;font-weight:800}
.chart-legend span:before{content:"";width:9px;height:9px;display:inline-block;margin-right:7px;border-radius:50%;background:var(--blue)}
.chart-legend span:nth-child(2):before{background:#9cc8ff}
.chart-legend span:nth-child(3):before{background:var(--green)}
.bars-chart:after{
  content:"";
  position:absolute;
  left:12%;
  right:8%;
  bottom:44px;
  height:120px;
  background:linear-gradient(90deg,transparent 0 5%,rgba(47,140,255,.28) 5% 7%,transparent 7% 18%,rgba(47,140,255,.28) 18% 20%,transparent 20% 32%,rgba(47,140,255,.28) 32% 34%,transparent 34% 47%,rgba(47,140,255,.28) 47% 50%,transparent 50% 64%,rgba(47,140,255,.28) 64% 67%,transparent 67% 80%,rgba(47,140,255,.28) 80% 83%,transparent 83% 94%,rgba(47,140,255,.28) 94% 97%,transparent 97%);
}
.method{display:grid;grid-template-columns:58px minmax(120px,1fr) minmax(max-content,auto) 42px;gap:8px 14px;align-items:center;margin:16px 0;color:#122851}
.method span{font-weight:800}.method span small{display:block;margin-top:4px;color:#53658a;font-weight:600}.method strong{font-size:.95rem}.method em{font-style:normal;color:#415a88}
.method-icon{width:52px;height:52px;display:grid!important;place-items:center;border-radius:9px;background:#edf5ff;color:var(--blue);font-size:.78rem}
.method i{grid-column:3/5;height:8px;border-radius:999px;background:#dce6f4;position:relative}
.method i:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--blue)}
.side-stack{display:grid;gap:16px}
.compact{padding:18px}
.compact p{display:flex;justify-content:space-between;gap:14px;margin:12px 0;color:#243b69}
.compact .total{padding:12px;border-radius:7px;background:#eaf5ff;font-weight:800}
.badge{padding:6px 10px;border-radius:8px;font-size:.8rem;font-weight:900}
.success{background:#c9f5df;color:#08723d}
.status-list strong{color:var(--green)}
form{display:grid;gap:13px;margin:18px 0 22px}
label{display:grid;gap:7px;color:#1b315f;font-size:.86rem;font-weight:750}
input,select{
  width:100%;
  min-width:0;
  height:43px;
  border:1px solid #d9e4f3;
  border-radius:7px;
  padding:10px 12px;
  background:#fff;
  color:var(--text);
  font:inherit;
}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid rgba(17,103,241,.25);outline-offset:2px}
.inline{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}
.split-actions{display:flex;gap:10px;flex-wrap:wrap}
.quick-actions{display:grid;gap:12px}
.quick-actions .button{width:100%;justify-content:center}
.api-summary{display:grid;gap:10px;margin:8px 0 18px}
.api-summary p{display:grid;gap:6px;margin:0}
.api-summary span{color:#405a89;font-size:.84rem;font-weight:800}
.api-summary code{display:block;padding:10px 12px;border:1px solid #dce6f4;border-radius:7px;background:#f7fbff;color:#102957}
.preview-table table{min-width:0;font-size:.82rem}
.status{display:inline-flex;padding:6px 10px;border-radius:7px;font-size:.75rem;font-weight:900}
.pending{background:#fff1c9;color:#a46100}
.api-fields{display:grid;gap:10px}
.api-fields label{grid-template-columns:100px minmax(0,1fr) auto;align-items:center}
.api-fields span{min-width:0;padding:10px 12px;border:1px solid #dce6f4;border-radius:7px;background:#f7fbff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.api-fields button{min-height:38px;padding:8px 12px}
.support-strip{margin-top:16px;padding:16px;display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;border:1px solid #cfe0ff;border-radius:10px;background:#edf6ff}
.support-strip span{color:#405a89}.support-strip .button{grid-row:1/3;grid-column:2;width:auto}
.vip-payment{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:18px;
  align-items:center;
  margin-bottom:18px;
}
.vip-payment[hidden]{display:none}
.vip-payment p{margin:8px 0;color:#405a89}
.vip-payment code{display:block;width:max-content;max-width:100%;padding:10px 12px;border:1px solid #dce6f4;border-radius:7px;background:#f7fbff;color:#102957}
.vip-payment img{width:180px;height:180px;object-fit:contain;border:1px solid #dce6f4;border-radius:10px;background:#fff;padding:10px}
.auth{max-width:480px;margin:54px auto;padding:30px}
.auth h1{margin:0 0 18px;font-size:2rem}
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr;
  background:linear-gradient(120deg,#f8fbff 0,#eff6ff 100%);
}
.auth-shell main{
  width:100%;
  display:grid;
  place-items:start center;
  padding:34px 16px;
}
.auth-brand{
  width:max-content;
  padding:22px 24px 0;
}
.auth-page .auth{
  width:min(100%,480px);
  margin:0;
}
.google-auth{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  background:#fff;
  color:#12224b;
  border:1px solid #d9e4f3;
  box-shadow:0 8px 20px rgba(20,50,90,.08);
}
.google-auth span{
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  margin-right:10px;
  border-radius:50%;
  color:#fff;
  background:#db4437;
  font-weight:900;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  color:#6c7da0;
  font-size:.84rem;
  font-weight:800;
}
.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:#e2eaf5}
.eyebrow{margin:0 0 10px;color:var(--blue);font-size:.75rem!important;font-weight:900;letter-spacing:1.3px;text-transform:uppercase}
.hero{max-width:860px;margin:48px auto;text-align:center;padding:60px 20px}
.hero h1{font-size:clamp(2.5rem,6vw,4.7rem);line-height:1.03;margin:0}
.hero p:not(.eyebrow){max-width:700px;margin:18px auto;color:#344b78;font-size:1.12rem}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.landing-shell{min-height:100vh;background:linear-gradient(180deg,#fff 0,#eef7ff 45%,#fff 100%);color:#071638}
.landing-shell main{padding:0}
.landing-nav{
  max-width:1180px;
  margin:0 auto;
  min-height:72px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 22px;
}
.landing-brand{padding:0;margin-right:auto}
.landing-brand .brand-mark{width:42px;height:42px}
.landing-brand strong{font-size:1.6rem;color:#071638}
.landing-links{display:flex;align-items:center;gap:28px;font-weight:800;font-size:.92rem}
.landing-links a{color:#10224a}
.landing-actions{display:flex;gap:10px;align-items:center}
.landing-actions .button{min-height:42px}
.landing-hero{
  max-width:1180px;
  min-height:520px;
  margin:0 auto;
  padding:38px 22px 0;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(480px,.95fr);
  gap:28px;
  align-items:center;
  position:relative;
}
.landing-hero:before{
  content:"";
  position:absolute;
  inset:16% 12% 0 43%;
  background:linear-gradient(135deg,rgba(47,140,255,.18),rgba(47,140,255,.02));
  transform:skewX(-16deg);
  border-radius:28px;
}
.hero-copy,.hero-visual{position:relative;z-index:1}
.landing-pill{
  width:max-content;
  max-width:100%;
  margin:0 0 18px;
  padding:8px 14px;
  border-radius:999px;
  background:#e8f2ff;
  color:#0d63ed;
  font-size:.82rem!important;
  font-weight:900;
}
.hero-copy h1{
  margin:0;
  max-width:650px;
  color:#071638;
  font-size:clamp(2.7rem,5.6vw,4.35rem);
  line-height:1.04;
}
.hero-copy h1 span{color:#0d63ed}
.hero-copy p:not(.landing-pill){max-width:610px;color:#42577f;font-size:1.08rem}
.landing-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.hero-checks{display:flex;gap:28px;flex-wrap:wrap;margin-top:20px;color:#233c68;font-weight:800;font-size:.9rem}
.hero-checks span:before{content:"✓";margin-right:8px;color:#0d63ed}
.hero-visual{min-height:500px;display:grid;place-items:center}
.phone-mock{
  width:270px;
  min-height:500px;
  padding:18px;
  border:10px solid #111827;
  border-radius:34px;
  background:#f8fbff;
  box-shadow:0 28px 60px rgba(8,38,82,.24);
  transform:rotate(-1.5deg);
}
.phone-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:#071638}
.phone-balance{padding:18px;border-radius:16px;background:linear-gradient(135deg,#0d63ed,#064bc6);color:#fff}
.phone-balance small,.phone-card small{display:block;opacity:.82}
.phone-balance strong{display:block;margin-top:6px;font-size:1.55rem}
.phone-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0;font-size:.68rem;text-align:center;color:#29456f;font-weight:800}
.phone-actions span{padding:10px 4px;border-radius:10px;background:#eef5ff}
.phone-card{padding:14px;border:1px solid #dfe8f5;border-radius:14px;background:#fff}
.phone-card strong{display:block;margin:4px 0;font-size:1.35rem}
.phone-card i{display:block;height:64px;border-radius:8px;background:linear-gradient(90deg,#dcecff 8%,#2f8cff 8% 12%,#dcecff 12% 22%,#2f8cff 22% 28%,#dcecff 28% 42%,#2f8cff 42% 48%,#dcecff 48% 62%,#2f8cff 62% 70%,#dcecff 70% 82%,#2f8cff 82% 90%,#dcecff 90%)}
.phone-list p{display:flex;justify-content:space-between;gap:10px;margin:10px 0;font-size:.8rem}
.phone-list strong{color:#16a45f}
.method-cloud{
  position:absolute;
  right:0;
  top:70px;
  width:250px;
  padding:22px;
  border:1px solid #d8e6fb;
  border-radius:16px;
  background:rgba(255,255,255,.9);
  box-shadow:0 18px 40px rgba(20,65,123,.12);
}
.method-cloud h2{font-size:1.08rem;margin-bottom:14px}
.method-cloud div{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.method-cloud span{display:grid;place-items:center;min-height:42px;border-radius:9px;background:#fff;color:#0d46a0;font-weight:900;box-shadow:0 8px 20px rgba(20,65,123,.08)}
.landing-benefits,.landing-stats,.landing-features,.merchant-strip,.testimonials,.landing-final,.landing-footer{
  max-width:1180px;
  margin:0 auto;
  padding-left:22px;
  padding-right:22px;
}
.landing-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:26px;padding-bottom:26px}
.landing-benefits article{background:transparent;border:0;box-shadow:none;padding:0 0 0 54px;position:relative}
.landing-benefits article:before{content:"";position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:10px;background:#e8f2ff}
.landing-benefits strong,.landing-benefits span{display:block}.landing-benefits span{margin-top:4px;color:#53658a}
.landing-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:24px;padding-bottom:24px;border:1px solid #dfe9f6;border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(26,64,123,.08)}
.landing-stats article{border:0;box-shadow:none;background:transparent;padding:0 20px}
.landing-stats strong{display:block;font-size:1.8rem}.landing-stats span{color:#53658a;font-weight:800}
.landing-features{display:grid;grid-template-columns:.62fr 1fr;gap:40px;align-items:center;padding-top:46px;padding-bottom:46px}
.landing-features h2,.merchant-strip h2,.testimonials h2,.landing-final h2{margin:0;font-size:2rem;line-height:1.16}
.landing-features p{color:#53658a}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feature-grid article,.testimonials article{padding:20px;border:1px solid #dfe9f6;border-radius:10px;background:#fff;box-shadow:0 12px 28px rgba(26,64,123,.08)}
.feature-grid strong,.feature-grid span{display:block}.feature-grid span{margin-top:8px;color:#53658a}
.merchant-strip,.testimonials{text-align:center;padding-top:42px;padding-bottom:42px}
.merchant-strip div{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:30px;color:#344b78;font-weight:900}
.testimonials>div{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;text-align:left}
.testimonials b{font-size:2.2rem;color:#0d63ed}.testimonials p{color:#344b78}.testimonials span{display:block;color:#53658a}
.landing-final{margin-top:28px;padding-top:34px;padding-bottom:34px;display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:center;border-radius:34px 34px 0 0;background:linear-gradient(135deg,#072552,#0d63ed);color:#fff}
.landing-final h2{color:#fff}.landing-final p{color:#dbeaff}.landing-final .ghost{background:transparent;border:1px solid rgba(255,255,255,.5)}
.landing-final aside{display:grid;gap:12px}.landing-final aside p{margin:0;padding:14px;border-radius:10px;background:rgba(255,255,255,.1)}.landing-final span{display:block;font-size:.84rem}
.landing-footer{display:grid;grid-template-columns:1.3fr repeat(3,.7fr);gap:28px;padding-top:34px;padding-bottom:34px}
.landing-footer p,.landing-footer a{color:#53658a}.landing-footer div{display:grid;align-content:start;gap:8px}.landing-footer .landing-brand{margin:0}
.docs-hero{
  margin:12px 0 26px;
  padding:34px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(135deg,#fff,#edf6ff);
  box-shadow:var(--shadow);
}
.docs-hero h1{max-width:920px;margin:0;font-size:clamp(2.25rem,5vw,4rem);line-height:1.04}
.docs-hero p:not(.eyebrow){max-width:850px;color:#344b78;font-size:1.1rem}
.docs-hero .actions{justify-content:flex-start}
.docs-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
.docs-toc{
  position:sticky;
  top:92px;
  display:grid;
  gap:8px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
}
.docs-toc a{
  padding:10px 12px;
  border-radius:8px;
  color:#18315f;
  font-weight:800;
  font-size:.9rem;
}
.docs-toc a:hover{background:#edf6ff;text-decoration:none;color:var(--blue)}
.docs-content{display:grid;gap:16px}
.doc-section{
  padding:24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
}
.doc-section h2{margin-bottom:12px;font-size:1.35rem}
.doc-section p,.doc-section li{color:#263f70}
.doc-section ol{padding-left:22px}
.doc-section li{margin:8px 0}
.doc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.doc-cards div{
  min-height:110px;
  padding:16px;
  border:1px solid #dfe9f6;
  border-radius:10px;
  background:#f7fbff;
}
.doc-cards strong{display:block;margin-bottom:8px;color:#071638}
.doc-cards span{display:block;color:#3c5482;line-height:1.5}
.table-scroll{overflow:auto;border:1px solid #e4ebf5;border-radius:7px}
table{width:100%;min-width:720px;border-collapse:collapse;background:#fff;font-size:.82rem}
th,td{text-align:left;padding:12px 13px;border-bottom:1px solid #e8eef7;vertical-align:top}
th{background:#f3f7fc;color:#2e426c;font-weight:850;white-space:nowrap}
td{max-width:460px;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}
pre{padding:16px;border-radius:8px;background:#06183d;color:#dceaff;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
#notice{overflow-wrap:anywhere;margin:0 0 18px}
#notice:not(:empty){padding:14px 16px;border:1px solid #b8d3fb;border-radius:8px;background:#eef6ff;color:#0f4fa6}
.error{color:#c32634!important;border-color:#f2c0c6!important;background:#fff5f6!important}
.pager{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
code{overflow-wrap:anywhere;color:#48618e;font-size:.78rem}
@media(max-width:1180px){
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid,.owner-grid,.lower{grid-template-columns:1fr}
  .user-overview,.user-lower{grid-template-columns:1fr}
  .insight-grid{grid-template-columns:1fr}
  .owner-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .owner-dashboard-grid,.owner-config-grid,.owner-users-grid,.owner-data-grid,.owner-ops-grid{grid-template-columns:1fr}
  .app-shell{grid-template-columns:230px minmax(0,1fr)}
  .landing-hero{grid-template-columns:1fr}
  .hero-visual{min-height:430px}
  .method-cloud{right:22px}
  .landing-benefits,.landing-stats{grid-template-columns:repeat(2,1fr)}
  .landing-features,.landing-final{grid-template-columns:1fr}
  .landing-footer{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1100px){
  .app-shell{display:grid;grid-template-columns:86px minmax(0,1fr)}
  body:not(.nav-expanded) .app-shell{grid-template-columns:86px minmax(0,1fr)}
  body.nav-expanded .app-shell{grid-template-columns:240px minmax(0,1fr)}
  nav{position:sticky;top:0;min-height:100vh;padding:16px 10px;gap:12px}
  .brand{padding:0}.brand strong{font-size:1.55rem}.brand small{display:none}
  .panel-switch{margin:0;border-radius:8px}
  .nav-links{grid-template-columns:1fr}
  .nav-links a{min-height:48px;padding:0 12px;font-size:.9rem}
  body:not(.nav-expanded) .brand{justify-content:center}
  body:not(.nav-expanded) .brand span:last-child,
  body:not(.nav-expanded) .panel-switch,
  body:not(.nav-expanded) .nav-support,
  body:not(.nav-expanded) .nav-footer{display:none}
  body:not(.nav-expanded) .nav-links a{justify-content:center;padding:0;font-size:0}
  body:not(.nav-expanded) .nav-icon{width:32px;height:32px}
  .topbar{padding:14px;flex-wrap:wrap}
  .dashboard-page .topbar{padding:14px}
  .dashboard-page .topbar:before{order:3;width:100%;min-height:42px}
  .dashboard-page .topbar:after{left:32px;top:auto;bottom:26px}
  .owner-page .topbar{padding:14px}
  .owner-page .topbar:before{order:3;width:100%;min-height:42px}
  .owner-page .topbar:after{left:32px;top:auto;bottom:26px}
  .search-box{order:3;width:100%}
  .profile{margin-left:0}
  .profile span:nth-child(3){display:none}
  main{padding:22px 14px}
  .page-head{display:block}
  .head-actions{justify-content:stretch;margin-top:16px}
  .head-actions>*{flex:1 1 180px}
  .metric-grid{grid-template-columns:1fr}
  .metric{padding-left:94px}
  .user-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .owner-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel{padding:16px}
  .line-chart{min-height:220px}
  button,.button{width:100%}
  .docs-layout{grid-template-columns:1fr}
  .docs-toc{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc-cards{grid-template-columns:1fr}
  .docs-hero{padding:22px}
  .docs-hero .actions{justify-content:stretch}
  .landing-links{display:none}
  .landing-nav{min-height:66px}
}
@media(max-width:520px){
  .topbar{gap:10px}
  .profile .bell{display:none}
  .metric{padding:86px 16px 18px}
  .user-metrics{grid-template-columns:1fr}
  .user-metrics .metric{min-height:138px;padding:82px 16px 18px}
  .owner-metrics{grid-template-columns:1fr}
  .owner-metrics .metric{min-height:138px;padding:78px 16px 18px}
  .metric .icon{left:16px;top:16px}
  .donut-row{grid-template-columns:1fr;justify-items:start}
  .balance-summary .split-actions{grid-template-columns:1fr}
  .payment-method-row{grid-template-columns:1fr}
  .method{grid-template-columns:52px 1fr auto}
  .method i{grid-column:2/4}
  .method em{grid-column:3}
  .api-fields label{grid-template-columns:1fr}
  .support-strip{grid-template-columns:1fr}
  .support-strip .button{grid-row:auto;grid-column:auto}
  .vip-payment{grid-template-columns:1fr}
  .vip-payment img{width:100%;height:auto;max-height:260px}
}
@media(max-width:760px){
  .app-shell{grid-template-columns:72px minmax(0,1fr)}
  body:not(.nav-expanded) .app-shell{grid-template-columns:72px minmax(0,1fr)}
  body.nav-expanded .app-shell{grid-template-columns:220px minmax(0,1fr)}
  nav{padding:12px 8px}
  .dashboard-page .topbar,.owner-page .topbar,.topbar{
    min-height:58px;
    padding:8px 12px!important;
    flex-wrap:nowrap;
    position:sticky;
    top:0;
    z-index:20;
  }
  .dashboard-page .topbar:before,.owner-page .topbar:before,
  .dashboard-page .topbar:after,.owner-page .topbar:after{display:none}
  .profile{
    margin-left:0;
  }
  .profile span:nth-child(3){display:block}
  .avatar{width:38px;height:38px;border-radius:10px}
  main{padding:18px 12px 22px}
  .dashboard-page main,.owner-page main{padding:18px 12px 22px}
  .page-head h1,.user-dashboard-head h1,.owner-dashboard-head h1{font-size:1.32rem}
  .page-head p,.user-dashboard-head p,.owner-dashboard-head p{font-size:.9rem}
  .head-actions{display:none}
  .user-chart,.owner-chart{min-height:235px}
  table{font-size:.76rem}
  .landing-nav{padding:10px 14px;gap:10px}
  .landing-actions .secondary{display:none}
  .landing-actions .button{padding:10px 12px;font-size:.82rem}
  .landing-brand strong{font-size:1.28rem}
  .landing-brand small{display:none}
  .landing-hero{padding:22px 14px 0;gap:14px}
  .hero-copy h1{font-size:2.35rem}
  .hero-copy p:not(.landing-pill){font-size:.98rem}
  .landing-cta .button{width:100%}
  .hero-checks{gap:10px;font-size:.8rem}
  .phone-mock{width:238px;min-height:430px}
  .method-cloud{position:static;width:100%;margin-top:14px}
  .hero-visual{min-height:auto;align-items:start}
  .landing-benefits,.landing-stats,.feature-grid,.testimonials>div,.landing-footer{grid-template-columns:1fr}
  .landing-benefits,.landing-stats,.landing-features,.merchant-strip,.testimonials,.landing-final,.landing-footer{padding-left:14px;padding-right:14px}
  .landing-stats{border-left:0;border-right:0;border-radius:0}
  .landing-features h2,.merchant-strip h2,.testimonials h2,.landing-final h2{font-size:1.55rem}
  .landing-final{border-radius:24px 24px 0 0}
}

.information-page{max-width:1000px;margin:0 auto;padding:48px 24px;min-height:55vh}
.information-page h1{font-size:2rem}
.information-page article{margin:20px 0;padding:24px}
.information-page p,.information-page address,.information-footer address{line-height:1.8;overflow-wrap:anywhere}
.information-page address,.information-footer address{font-style:normal}
.information-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.information-grid article{margin:0}
.information-page details{border:1px solid #dce5ef;border-radius:12px;padding:18px;margin:12px 0;background:white}
.information-page summary{cursor:pointer;font-weight:600}
.information-footer{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.information-grid,.information-footer{grid-template-columns:1fr}.information-page{padding:28px 14px}}

/* Outline sidebar icons, matching the reference in every menu state. */
.nav-icon svg{display:block;width:22px;height:22px}
.dashboard-page .nav-icon,.owner-page .nav-icon,
.dashboard-page .nav-links a.active .nav-icon,.owner-page .nav-links a.active .nav-icon{
  background:transparent;box-shadow:none;color:inherit;border-radius:0;
}
.dashboard-page .nav-links a,.owner-page .nav-links a{color:#f0f5ff}
.dashboard-page .nav-links a.active,.owner-page .nav-links a.active{
  background:rgba(255,255,255,.18);box-shadow:none;color:#fff;
}
.dashboard-page .nav-links a:hover,.owner-page .nav-links a:hover{
  background:rgba(255,255,255,.12);text-decoration:none;
}
.dashboard-page .nav-links a.active:hover,.owner-page .nav-links a.active:hover{background:rgba(255,255,255,.22)}
.nav-links a:focus-visible,.panel-switch:focus-visible{outline:2px solid #fff;outline-offset:3px}
.owner-page .panel-switch{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}

.contact-card{display:flex;align-items:center;gap:18px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 4px 18px rgba(26,64,123,.05);color:var(--text);transition:background .15s,border-color .15s}
a.contact-card:hover{background:#f0f7ff;border-color:var(--blue);text-decoration:none}
a.contact-card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.contact-icon{display:grid;place-items:center;width:56px;height:56px;flex:0 0 56px;border-radius:16px;background:#eaf2ff;color:#1167f1}
.contact-icon svg{width:30px;height:30px}
.contact-icon.whatsapp{background:#e4f8ee;color:#12834b}
.contact-icon.telegram{background:#e6f5ff;color:#137ab4}
.contact-text{display:grid;gap:6px;min-width:0}
.contact-text strong{font-size:1.1rem}
.contact-text>span{color:var(--muted);overflow-wrap:anywhere}
.contact-unavailable{opacity:.7}
@media(max-width:760px){.contact-card{padding:20px;gap:14px}}

.brand-mark.brand-image{display:block;object-fit:contain;flex-shrink:0;background:none;border-radius:0}

.brand-mark.brand-image{background:#fff;border-radius:10px}

fieldset[data-access-gate]{display:grid;gap:13px;border:0;padding:0;margin:0;min-width:0}
fieldset[data-access-gate]:disabled{opacity:.65}