:root {
  --blue: #155eef;
  --blue-dark: #0b47c7;
  --cyan: #0ea5e9;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e5eaf2;
  --bg: #f5f7fb;
  --green: #10b981;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 9px; padding: 10px 18px; font-weight: 700;
  font-size: 14px; cursor: pointer; transition: .2s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost { background: #fff; color: #334155; border: 1px solid var(--line); }
.btn-ghost:hover { background: #f8fafc; }
.btn-soft { background: #eff4ff; color: var(--blue); }
.btn-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.input {
  width: 100%; border: 1px solid #d7deea; border-radius: 9px;
  padding: 10px 12px; font-size: 14px; background: #fff; outline: none;
}
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,94,239,.12); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 20px rgba(15,23,42,.04); }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; }
.badge-green { background: #ecfdf5; color: #047857; }
.badge-blue { background: #eff6ff; color: #1d4ed8; }
.badge-amber { background: #fffbeb; color: #b45309; }
.muted { color: var(--muted); }

/* landing */
.site-header { height: 72px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid #eef2f7; position: sticky; top: 0; z-index: 40; }
.site-header .inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display:flex; align-items:center; gap:8px; }
.brand img { width:84px; height:auto; object-fit:contain; display:block; }
.brand-word { font-size:50px; font-weight:800; letter-spacing:.04em; line-height:1; margin-left:0; transform:translateY(9px); background:linear-gradient(135deg,#0b6cff 0%,#0ea5e9 45%,#22c55e 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.nav-links { display: flex; gap: 26px; align-items: center; font-size: 14px; color: #475569; font-weight: 600; }
.nav-links a:hover { color: var(--blue); }
.header-actions { display: flex; gap: 10px; align-items: center; }
.hero { background: radial-gradient(1000px 500px at 80% 10%, #dbeafe 0%, transparent 60%), linear-gradient(180deg, #f8fbff 0%, #fff 100%); padding: 70px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero h1 { font-size: 46px; line-height: 1.15; margin: 0 0 18px; letter-spacing: -.02em; }
.hero h1 span { color: var(--blue); }
.hero p { font-size: 16px; line-height: 1.9; color: var(--muted); margin: 0 0 26px; max-width: 560px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; margin-top: 34px; }
.hero-stats b { display: block; font-size: 22px; }
.hero-stats span { font-size: 12px; color: var(--muted); }
.hero-visual { position: relative; }
.hero-card { background: #fff; border: 1px solid #e5eaf2; border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px rgba(21,94,239,.12); }
.hero-map { height: 130px; border-radius: 12px; background: linear-gradient(135deg,#e0f2fe,#dbeafe 55%,#ede9fe); position: relative; overflow: hidden; }
.hero-map:after { content:""; position:absolute; inset:0; background-image: radial-gradient(#93c5fd 1px, transparent 1px); background-size: 18px 18px; opacity:.5; }
.hero-node { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(21,94,239,.14); }
.hero-node.n1 { left: 18%; top: 32%; } .hero-node.n2 { left: 46%; top: 58%; } .hero-node.n3 { left: 72%; top: 26%; } .hero-node.n4 { left: 84%; top: 66%; }
.hero-card-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px 4px; font-size: 13px; color: var(--muted); }
.hero-card-row b { color: var(--ink); }
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 50px 0; }
.feature { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; }
.feature i { color: var(--blue); font-size: 20px; margin-bottom: 12px; }
.feature h3 { margin:0 0 6px; font-size: 15px; }
.feature p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; }
.section-head h2 { font-size: 28px; margin:0 0 6px; }
.section-head p { margin:0; color:var(--muted); font-size:14px; }
.product-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; padding-bottom:56px; }
.product-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; transition:.2s; }
.product-card:hover { transform: translateY(-3px); box-shadow:0 16px 34px rgba(15,23,42,.08); border-color:#c7d7fe; }
.product-flag { font-size:24px; margin-bottom:10px; }
.product-card h3 { font-size:15px; margin:0 0 6px; }
.product-card .region { font-size:12px; color:var(--muted); margin-bottom:14px; }
.product-price { font-size:24px; font-weight:800; color:var(--blue); }
.product-price small { font-size:12px; color:var(--muted); font-weight:500; }
.product-meta { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin:12px 0 16px; }
.footer { background:#0b1220; color:#94a3b8; padding:40px 0; font-size:13px; }
.footer .inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* modal */
.modal-mask { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.4); backdrop-filter:blur(5px); }
.modal-mask.hidden { display:none; }
.modal-box { width:100%; max-width:420px; background:#fff; border-radius:18px; padding:26px; box-shadow:0 30px 80px rgba(15,23,42,.25); position:relative; max-height:92vh; overflow:auto; }
.modal-close { position:absolute; right:14px; top:12px; border:0; background:#f1f5f9; color:#64748b; width:30px; height:30px; border-radius:50%; font-size:18px; cursor:pointer; }
.modal-title { font-size:20px; font-weight:800; margin:0 0 6px; }
.modal-sub { color:var(--muted); font-size:13px; margin:0 0 18px; }
.field { display:flex; align-items:center; gap:10px; height:46px; border:1px solid #d7deea; border-radius:9px; padding:0 12px; margin-bottom:12px; background:#fff; }
.field i { color:#94a3b8; width:16px; text-align:center; font-size:13px; }
.field input { border:0; outline:0; flex:1; min-width:0; font-size:14px; height:100%; background:transparent; }
.field:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,94,239,.12); }
.captcha-row { display:flex; gap:8px; margin-bottom:12px; }
.captcha-row .field { flex:1; margin-bottom:0; }
.captcha-row img { width:126px; height:46px; border-radius:9px; border:1px solid #e2e8f0; cursor:pointer; }
.tabs { display:flex; border-bottom:1px solid #e5eaf2; margin-bottom:18px; }
.tab { flex:1; background:none; border:0; padding:0 0 12px; font-size:14px; font-weight:700; color:#94a3b8; border-bottom:2px solid transparent; cursor:pointer; }
.tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.form-error { display:none; background:#fef2f2; color:#dc2626; border-radius:8px; padding:8px 10px; font-size:12px; margin-bottom:10px; }
.form-error.show { display:block; }
.modal-note { text-align:center; color:#94a3b8; font-size:11px; margin-top:14px; }

/* dashboard */
.dash-shell { display:flex; min-height:100vh; background:#f5f7fb; }
.sidebar { width:276px; background:#fff; border-right:1px solid #e9eef5; padding:26px 18px; position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; z-index:30; }
.sidebar .brand { padding:0 8px 30px; }
.sidebar .brand img { width:78px; height:auto; object-fit:contain; }
.sidebar .brand-word { font-size:38px; }
.side-nav { display:flex; flex-direction:column; gap:9px; }
.side-item { display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:11px; color:#475569; font-size:15.5px; font-weight:600; cursor:pointer; line-height:1.25; }
.side-item i { width:22px; text-align:center; color:#94a3b8; font-size:16px; }
.side-item:hover { background:#f5f8ff; color:var(--blue); }
.side-item.active { background:#eff4ff; color:var(--blue); }
.side-item.active i { color:var(--blue); }
.sidebar-bottom { margin-top:auto; border-top:1px solid #eef2f7; padding-top:18px; }
.dash-main { margin-left:276px; flex:1; min-width:0; }
.dash-top { height:72px; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); border-bottom:1px solid #eef2f7; display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:20; }
.dash-top h1 { font-size:18px; margin:0; }
.dash-top .right { display:flex; align-items:center; gap:16px; font-size:13px; color:#475569; }
.balance-pill { background:#eff4ff; color:var(--blue); border-radius:999px; padding:7px 13px; font-weight:800; }
.dash-content { padding:26px 28px 50px; }
.dash-section { display:none; }
.dash-section.active { display:block; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; }
.stat-card .label { color:var(--muted); font-size:12px; margin-bottom:8px; }
.stat-card .value { font-size:25px; font-weight:800; }
.stat-card .sub { color:#94a3b8; font-size:11px; margin-top:6px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:18px; }
.panel h2 { font-size:16px; margin:0 0 14px; }
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th { text-align:left; color:#64748b; font-weight:600; padding:9px 8px; border-bottom:1px solid #eef2f7; background:#fbfcfe; }
.table td { padding:10px 8px; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.empty { text-align:center; color:#94a3b8; padding:34px 0; font-size:13px; }
.copy-btn { border:1px solid #e2e8f0; background:#fff; color:#0369a1; border-radius:5px; padding:3px 7px; font-size:11px; cursor:pointer; }
.copy-btn:hover { background:#f0f9ff; }
.ip-line { font-family: Consolas, monospace; font-size:12px; color:#334155; background:#f8fafc; border:1px solid #eef2f7; border-radius:6px; padding:4px 6px; display:inline-block; }
.product-list { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.plan-card { border:1px solid var(--line); border-radius:14px; padding:18px; background:#fff; }
.plan-card h3 { margin:0 0 4px; font-size:15px; }
.plan-card .region { color:var(--muted); font-size:12px; margin-bottom:12px; }
.plan-card .price { font-size:24px; font-weight:800; color:var(--blue); }
.plan-card .price small { font-size:12px; color:var(--muted); font-weight:500; }
.plan-card .stock { font-size:12px; color:var(--muted); margin:8px 0 14px; }
.apikey-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:12px; padding:13px; margin-bottom:10px; }
.apikey-row code { font-size:12px; background:#f8fafc; padding:3px 6px; border-radius:5px; }
.apikey-actions { display:flex; gap:6px; flex-wrap:wrap; }
.apikey-actions button { font-size:11px; padding:5px 9px; border-radius:6px; border:1px solid #dbe4f0; background:#fff; color:#334155; cursor:pointer; }
.apikey-actions button:hover { background:#f8fafc; }
.code-block { background:#0b1220; color:#e2e8f0; border-radius:10px; padding:14px; font-family:Consolas, monospace; font-size:12px; overflow:auto; white-space:pre-wrap; }
.mobile-toggle { display:none; }
@media(max-width:1000px) {
  .hero-grid { grid-template-columns:1fr; }
  .feature-grid, .product-grid { grid-template-columns:1fr 1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .product-list { grid-template-columns:1fr 1fr; }
}
@media(max-width:760px) {
  .nav-links { display:none; }
  .hero h1 { font-size:34px; }
  .feature-grid, .product-grid, .stat-grid, .product-list { grid-template-columns:1fr; }
  .sidebar { transform:translateX(-100%); transition:.25s; }
  .sidebar.open { transform:none; }
  .dash-main { margin-left:0; }
  .dash-top { padding:0 16px; }
  .dash-content { padding:18px 14px 40px; }
  .mobile-toggle { display:inline-flex; border:1px solid var(--line); background:#fff; border-radius:8px; width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer; }
}

/* richer landing */
.topbar { background:#071326; color:#cbd5e1; font-size:12px; text-align:center; padding:8px 14px; letter-spacing:.02em; }
.topbar b { color:#67e8f9; }
.hero { background:
  radial-gradient(900px 480px at 82% 12%, rgba(37,99,235,.55) 0%, transparent 62%),
  radial-gradient(700px 420px at 12% 90%, rgba(14,165,233,.28) 0%, transparent 60%),
  #071326; color:#fff; padding:78px 0 66px; position:relative; overflow:hidden; }
.hero:before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px); background-size:46px 46px; mask-image:linear-gradient(180deg,#000 0%,transparent 85%); }
.hero .container { position:relative; z-index:1; }
.hero h1 { color:#fff; }
.hero h1 span { background:linear-gradient(90deg,#60a5fa,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:#94a3b8; }
.hero-stats b { color:#fff; }
.hero-stats span { color:#94a3b8; }
.hero-card { background:rgba(15,27,48,.72); border-color:rgba(148,163,184,.18); box-shadow:0 30px 80px rgba(2,6,23,.4); backdrop-filter:blur(12px); }
.hero-map { background:radial-gradient(circle at 30% 35%, rgba(37,99,235,.55), transparent 45%), linear-gradient(135deg,#0b1e3a,#0b1220); }
.hero-map:after { background-image:radial-gradient(#38bdf8 1px, transparent 1px); opacity:.35; }
.hero-card-row { color:#94a3b8; border-top:1px solid rgba(148,163,184,.12); margin-top:8px; padding-top:10px; }
.hero-card-row b { color:#e2e8f0; }
.trust-strip { background:#0b1220; border-top:1px solid rgba(148,163,184,.12); color:#94a3b8; }
.trust-inner { display:flex; gap:28px; justify-content:space-between; align-items:center; padding:18px 0; flex-wrap:wrap; font-size:12px; }
.trust-inner b { color:#e2e8f0; font-size:15px; display:block; margin-bottom:2px; }
.section { padding:66px 0; }
.section.alt { background:#fff; border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7; }
.section-label { display:inline-flex; align-items:center; gap:6px; color:#155eef; background:#eff4ff; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; margin-bottom:12px; }
.section h2 { font-size:32px; margin:0 0 10px; letter-spacing:-.02em; }
.section .lead { color:#64748b; font-size:14px; line-height:1.8; max-width:620px; margin:0 0 30px; }
.coverage-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.country-card { border:1px solid #e5eaf2; border-radius:12px; padding:14px; background:#fff; transition:.2s; }
.country-card:hover { border-color:#bfdbfe; box-shadow:0 10px 24px rgba(21,94,239,.08); transform:translateY(-2px); }
.country-card .flag { font-size:24px; margin-bottom:8px; }
.country-card b { font-size:13px; display:block; }
.country-card span { font-size:11px; color:#94a3b8; }
.usecase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.usecase { padding:22px; border:1px solid #e5eaf2; border-radius:14px; background:#fff; }
.usecase .icon { width:38px; height:38px; border-radius:10px; background:#eff4ff; color:#155eef; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.usecase h3 { margin:0 0 6px; font-size:16px; }
.usecase p { margin:0; color:#64748b; font-size:13px; line-height:1.8; }
.faq-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.faq-item { background:#fff; border:1px solid #e5eaf2; border-radius:12px; padding:18px; }
.faq-item h3 { margin:0 0 6px; font-size:14px; }
.faq-item p { margin:0; color:#64748b; font-size:13px; line-height:1.8; }
.cta-band { background:linear-gradient(120deg,#0b1e3a,#12306b 55%,#155eef); color:#fff; border-radius:20px; padding:36px 34px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.cta-band h2 { color:#fff; margin:0 0 6px; font-size:26px; }
.cta-band p { color:#bfdbfe; margin:0; font-size:13px; }
.product-card { position:relative; overflow:hidden; }
.product-card:before { content:""; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg,#155eef,#22d3ee); opacity:0; transition:.2s; }
.product-card:hover:before { opacity:1; }
.popular-tag { position:absolute; right:12px; top:12px; background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:3px 8px; font-size:10px; font-weight:700; }
/* dashboard extras */
.welcome { background:linear-gradient(120deg,#0b1e3a,#12306b 58%,#155eef); border-radius:16px; padding:24px; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.welcome h2 { color:#fff; margin:0 0 6px; font-size:20px; }
.welcome p { color:#bfdbfe; margin:0; font-size:13px; }
.welcome .quick { display:flex; gap:8px; flex-wrap:wrap; }
.welcome .quick a { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:8px; padding:8px 12px; font-size:12px; }
.stat-card .ico { width:30px; height:30px; border-radius:8px; background:#eff4ff; color:#155eef; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.region-chips { display:flex; gap:8px; flex-wrap:wrap; }
.region-chip { background:#f8fafc; border:1px solid #eef2f7; border-radius:999px; padding:5px 10px; font-size:12px; color:#475569; }
@media(max-width:1000px){ .coverage-grid{grid-template-columns:repeat(3,1fr)} .usecase-grid{grid-template-columns:1fr 1fr} .faq-list{grid-template-columns:1fr} }
@media(max-width:640px){ .coverage-grid{grid-template-columns:1fr 1fr} .usecase-grid{grid-template-columns:1fr} .section{padding:44px 0} .section h2{font-size:26px} .topbar{font-size:11px} }

/* purchase page */
.purchase-hero { background:linear-gradient(120deg,#071326,#0b2a5b 55%,#155eef); color:#fff; padding:38px 0 30px; }
.purchase-hero h1 { margin:0 0 8px; font-size:30px; }
.purchase-hero p { margin:0; color:#bfdbfe; font-size:14px; }
.purchase-layout { display:grid; grid-template-columns:1fr 330px; gap:20px; align-items:start; padding:24px 0 56px; }
.filter-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px; }
.filter-card h2 { font-size:15px; margin:0 0 12px; }
.biz-chips { display:flex; gap:8px; flex-wrap:wrap; }
.biz-chip { border:1px solid #e5eaf2; background:#fff; border-radius:8px; padding:8px 12px; font-size:12px; color:#475569; cursor:pointer; }
.biz-chip.active { border-color:#155eef; color:#155eef; background:#eff4ff; }
.type-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.type-card { border:1px solid #e5eaf2; border-radius:10px; padding:12px; cursor:pointer; }
.type-card.active { border-color:#155eef; background:#eff4ff; }
.type-card b { font-size:13px; display:block; margin-bottom:3px; }
.type-card span { font-size:11px; color:#94a3b8; }
.region-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.region-tab { border:0; background:#f1f5f9; color:#475569; border-radius:6px; padding:6px 11px; font-size:12px; cursor:pointer; }
.region-tab.active { background:#155eef; color:#fff; }
.city-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:520px; overflow:auto; padding-right:4px; }
.city-card { border:1px solid #e5eaf2; border-radius:10px; padding:12px; cursor:pointer; transition:.15s; background:#fff; }
.city-card:hover { border-color:#bfdbfe; }
.city-card.selected { border-color:#155eef; background:#eff4ff; box-shadow:0 0 0 2px rgba(21,94,239,.08); }
.city-card .flag { font-size:20px; margin-bottom:5px; }
.city-card b { display:block; font-size:12px; margin-bottom:3px; }
.city-card span { font-size:11px; color:#94a3b8; }
.order-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; position:sticky; top:86px; }
.order-card h2 { font-size:16px; margin:0 0 12px; }
.order-product { background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; padding:12px; margin-bottom:12px; }
.order-product b { font-size:13px; display:block; }
.order-product span { font-size:11px; color:#94a3b8; }
.qty-row { display:flex; align-items:center; justify-content:space-between; margin:12px 0; font-size:13px; }
.qty { display:flex; align-items:center; border:1px solid #dbe4f0; border-radius:7px; overflow:hidden; }
.qty button { width:30px; height:30px; border:0; background:#f8fafc; cursor:pointer; font-size:16px; }
.qty span { width:38px; text-align:center; font-weight:700; }
.summary-row { display:flex; justify-content:space-between; font-size:13px; color:#64748b; margin:7px 0; }
.summary-row.total { color:#0f172a; font-weight:800; font-size:16px; border-top:1px solid #eef2f7; padding-top:10px; margin-top:10px; }
.pay-option { display:flex; align-items:center; justify-content:space-between; border:1px solid #e5eaf2; border-radius:8px; padding:10px; margin-top:8px; font-size:12px; }
.pay-option.active { border-color:#155eef; background:#eff4ff; }
.pay-option.disabled { opacity:.55; }
.coupon-row { display:flex; gap:6px; margin:12px 0; }
.coupon-row input { flex:1; }
@media(max-width:1000px){ .purchase-layout{grid-template-columns:1fr} .order-card{position:static} .city-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .city-grid{grid-template-columns:1fr} .type-grid{grid-template-columns:1fr} }

.flag-img{width:22px;height:15px;object-fit:cover;border-radius:2px;display:inline-block;vertical-align:middle;box-shadow:0 0 0 1px rgba(15,23,42,.08)}.city-card .flag-img{width:20px;height:14px}

/* standalone auth pages */
.auth-page { min-height:100vh; background:#fff; color:#0f172a; }
.auth-header { height:78px; display:flex; align-items:center; border-bottom:1px solid #f1f5f9; }
.auth-header .inner { width:min(1240px,calc(100% - 48px)); margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.auth-header img { width:100px; height:auto; object-fit:contain; }
.auth-header .brand-word { font-size:42px; }
.auth-lang { color:#64748b; font-size:13px; }
.auth-main { width:min(1120px,calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns:1fr 400px; gap:70px; align-items:center; min-height:calc(100vh - 78px); padding:40px 0 60px; }
.auth-left .kicker { display:inline-flex; align-items:center; gap:8px; color:#155eef; font-size:13px; font-weight:700; margin-bottom:12px; }
.auth-left h1 { font-size:46px; line-height:1.18; margin:0 0 22px; letter-spacing:-.03em; }
.auth-left h1 span { color:#155eef; }
.auth-checks { display:grid; gap:12px; margin:0 0 38px; }
.auth-checks div { display:flex; align-items:center; gap:9px; color:#334155; font-size:14px; }
.auth-checks i { color:#155eef; font-size:12px; }
.auth-partners { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; color:#94a3b8; font-size:12px; }
.auth-partners span { display:flex; align-items:center; gap:6px; }
.auth-card { border:1px solid #e5eaf2; border-radius:14px; padding:28px; box-shadow:0 18px 50px rgba(15,23,42,.06); background:#fff; }
.auth-card .tabs { margin-bottom:20px; }
.auth-card .tab { font-size:14px; }
.auth-card .field { height:48px; border-radius:8px; }
.auth-card .btn { height:46px; border-radius:8px; }
.auth-google { width:100%; height:46px; border:1px solid #e5eaf2; border-radius:8px; background:#f8fafc; color:#334155; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; cursor:not-allowed; opacity:.7; }
.auth-sep { display:flex; align-items:center; gap:10px; color:#cbd5e1; font-size:11px; margin:16px 0; }
.auth-sep:before,.auth-sep:after { content:""; height:1px; background:#eef2f7; flex:1; }
.auth-bottom { text-align:center; font-size:13px; color:#64748b; margin-top:18px; }
.auth-bottom a { color:#155eef; font-weight:700; }
.auth-note { font-size:11px; color:#94a3b8; line-height:1.8; text-align:center; margin-top:14px; }
.phone-soon { background:#f8fafc; border:1px solid #eef2f7; color:#64748b; border-radius:8px; padding:22px; text-align:center; font-size:13px; }
@media(max-width:900px){ .auth-main{grid-template-columns:1fr;gap:26px;padding:26px 0} .auth-left h1{font-size:34px} .auth-left{order:2} .auth-card{order:1} .auth-partners{grid-template-columns:1fr 1fr} }

/* card bounce on hover */
@keyframes cardBounce {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-6px) scale(1.012); }
  55% { transform: translateY(-2px) scale(1.004); }
  75% { transform: translateY(-4px) scale(1.008); }
  100% { transform: translateY(-3px) scale(1.006); }
}
.product-card:hover,
.plan-card:hover,
.city-card:hover,
.stat-card:hover,
.feature:hover,
.usecase:hover,
.country-card:hover,
.faq-item:hover,
.panel:hover,
.filter-card:hover,
.order-card:hover,
.apikey-row:hover,
.auth-card:hover {
  animation: cardBounce .42s ease;
  box-shadow: 0 16px 36px rgba(15,23,42,.10);
}
.city-card { transform-origin: center bottom; }
@media (prefers-reduced-motion: reduce) {
  .product-card:hover,.plan-card:hover,.city-card:hover,.stat-card:hover,
  .feature:hover,.usecase:hover,.country-card:hover,.faq-item:hover,
  .panel:hover,.filter-card:hover,.order-card:hover,.apikey-row:hover,.auth-card:hover {
    animation: none;
  }
}

/* monthly category tabs */
.category-tabs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:#f8fafc; border:1px solid #eef2f7; border-radius:9px; padding:4px; }
.category-tab { border:0; background:transparent; color:#64748b; border-radius:7px; padding:7px 13px; font-size:12px; font-weight:600; cursor:pointer; transition:.15s; }
.category-tab:hover { background:#fff; color:#155eef; }
.category-tab.active { background:#155eef; color:#fff; box-shadow:0 3px 8px rgba(21,94,239,.22); }
@media(max-width:640px){ .category-tabs{width:100%;justify-content:space-between} .category-tab{flex:1;text-align:center;padding:7px 6px} }

/* captcha responsive */
.captcha-row .field { min-width: 0; flex: 1 1 0; }
.captcha-row img { flex: 0 0 112px; width: 112px; height: 46px; object-fit: cover; }
@media (max-width: 420px) {
  .captcha-row img { flex-basis: 94px; width: 94px; height: 44px; }
  .modal-box { padding: 20px; }
}


@media (max-width: 760px) { .brand img { width: 84px; } .auth-header img { width: 84px; } }

/* remove browser autofill / input background */
.field input,
.field input:hover,
.field input:focus {
  background: transparent !important;
  background-color: transparent !important;
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a;
  transition: background-color 9999s ease-out 0s;
}

.site-header .inner { justify-content:flex-start; gap:28px; }
.site-header .nav-links { margin-left:auto; }
.site-header .brand { margin:0; }

/* header layout: logo left, larger menu, auth far right */
.site-header .inner {
  width: 100%;
  max-width: 2400px;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: border-box;
  justify-content: space-between;
  gap: 28px;
}
.site-header .nav-links {
  margin-left: 0;
  gap: 46px;
  font-size: 18px;
}
.site-header .header-actions { margin-left: 0; }
@media (max-width: 760px) {
  .site-header .inner { padding: 0 18px; }
  .site-header .nav-links { gap: 0; }
}

.brand-vv { width:58px; height:auto; object-fit:contain; display:block; margin-left:-2px; }
.sidebar .brand-vv { width:44px; }
.auth-header .brand-vv { width:48px; }
@media (max-width: 760px) { .brand-vv { width:48px; } }

/* place the colourful VV lower, inside the marked badge area */
.site-header .brand-vv { width:50px; transform: translateY(8px); }
@media (max-width: 760px) {
  .site-header .brand-vv { width:42px; transform: translateY(6px); }
}

/* keep mark and VV on one line inside the sidebar/auth header */
.sidebar .brand a,
.auth-header .inner > a {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* alipay recharge front-end */
.amount-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-bottom:14px; }
.amount-chip { border:1px solid #dbe4f0; background:#fff; color:#334155; border-radius:9px; padding:12px 8px; font-size:15px; font-weight:700; cursor:pointer; transition:.15s; }
.amount-chip:hover { border-color:#93b4ff; background:#f8fbff; }
.amount-chip.active { border-color:#155eef; background:#eff4ff; color:#155eef; box-shadow:0 0 0 2px rgba(21,94,239,.08); }
.alipay-custom { display:flex; align-items:center; gap:9px; max-width:430px; font-size:13px; color:#64748b; }
.alipay-custom .input { flex:1; }
.alipay-summary { display:flex; justify-content:space-between; align-items:center; max-width:430px; margin:14px 0; padding:12px 14px; border-radius:9px; background:#f8fafc; border:1px solid #eef2f7; font-size:13px; color:#64748b; }
.alipay-summary b { font-size:20px; color:#155eef; }
#alipayRechargeBtn { min-width:210px; }
@media (max-width:640px) { .amount-grid { grid-template-columns:repeat(3,1fr); } }

.ip-line, .order-ip-code { word-break: break-all; white-space: pre-wrap; max-width: 100%; }

#orderList code { white-space: pre-wrap; word-break: break-all; }


/* auth button bounce + personal center menu */
@keyframes authBounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  55% { transform: translateY(-2px); }
  75% { transform: translateY(-4px); }
  100% { transform: translateY(-3px); }
}
#loginBtn:hover,
.auth-card .auth-google:hover {
  animation: authBounce .42s ease;
}
.sidebar-bottom { position: relative; }
.user-menu-toggle { justify-content: space-between; }
.user-menu-toggle .chev { transition: transform .2s; font-size: 11px; color:#94a3b8; }
.user-menu-toggle.open .chev { transform: rotate(180deg); }
.user-menu {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  background: #fff;
  border: 1px solid #e5eaf2;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15,23,42,.14);
  padding: 6px;
  z-index: 60;
}
.user-menu.hidden { display: none; }
.user-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
}
.user-menu a:hover { background: #f5f8ff; color: #155eef; }
.user-menu a i { width: 16px; text-align: center; color: #94a3b8; }

/* dashboard overview + orders table (IPIPD-like) */
.ov-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.ov-head h2 { font-size:26px; margin:0 0 5px; letter-spacing:-.4px; }
.ov-head p { margin:0; color:#64748b; font-size:13px; }
.ov-cards { display:grid; grid-template-columns:1.05fr .8fr 1.35fr; gap:16px; margin-bottom:16px; }
.ov-card { background:#fff; border:1px solid #e8eef7; border-radius:14px; padding:18px 20px; box-shadow:0 4px 16px rgba(15,23,42,.04); }
.ov-balance { background:linear-gradient(135deg,#eef3ff 0%,#f5f0ff 100%); border-color:#dbe6ff; }
.ov-label { font-size:13px; font-weight:700; color:#334155; margin-bottom:8px; }
.ov-amount { font-size:34px; font-weight:800; color:#0f172a; line-height:1.15; letter-spacing:-.8px; }
.ov-sub { display:flex; align-items:center; gap:6px; color:#64748b; font-size:12px; margin-top:4px; }
.dot-ok { width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; }
.ov-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#155eef; text-decoration:none; margin-top:12px; font-weight:600; }
.ov-proxy .ov-amount { color:#155eef; }
.inst-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px; }
.inst-box { border-radius:10px; padding:12px 10px; background:#f8fafc; border:1px solid #eef2f7; }
.inst-box span { display:block; font-size:11px; color:#64748b; margin-bottom:6px; }
.inst-box b { font-size:24px; color:#0f172a; }
.inst-green { background:#f0fdf4; border-color:#dcfce7; }
.inst-green b { color:#16a34a; }
.inst-amber { background:#fffbeb; border-color:#fef3c7; }
.inst-amber b { color:#d97706; }
.inst-red { background:#fef2f2; border-color:#fee2e2; }
.inst-red b { color:#dc2626; }
.ov-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.ov-side { display:grid; gap:16px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px; }
.panel-head a { color:#155eef; font-size:12px; text-decoration:none; font-weight:600; }
.guide { list-style:none; margin:0; padding:0; counter-reset:g; }
.guide li { position:relative; padding:0 0 14px 34px; counter-increment:g; }
.guide li::before { content:counter(g,decimal-leading-zero); position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:#eff4ff; color:#155eef; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.guide b { display:block; font-size:13px; color:#0f172a; margin-bottom:2px; }
.guide span { display:block; font-size:11px; color:#94a3b8; line-height:1.5; }
.res-table th, .res-table td { padding:11px 8px; }
.orders-card { background:#fff; border:1px solid #e8eef7; border-radius:14px; padding:18px; }
.orders-tabs { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid #eef2f7; padding-bottom:12px; }
.orders-tab { border:1px solid #e5eaf2; background:#fff; color:#475569; border-radius:999px; padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer; }
.orders-tab.active { background:#eff4ff; border-color:#bfd3ff; color:#155eef; }
.orders-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 0; }
.orders-search { display:flex; align-items:center; gap:8px; border:1px solid #e2e8f0; border-radius:8px; padding:0 10px; height:36px; min-width:240px; flex:1; max-width:360px; background:#fff; }
.orders-search i { color:#94a3b8; font-size:12px; }
.orders-search input { border:0; outline:0; font-size:12px; width:100%; background:transparent; }
.orders-tools .input { height:36px; font-size:12px; }
.table-scroll { overflow-x:auto; }
.orders-table th { background:#f8fafc; color:#475569; font-size:12px; white-space:nowrap; }
.orders-table td { font-size:12px; white-space:nowrap; padding:13px 9px; }
.order-no { color:#155eef; font-weight:700; text-decoration:none; }
.order-actions { display:flex; gap:5px; flex-wrap:wrap; min-width:180px; }
.order-actions .copy-btn { white-space:nowrap; }
@media (max-width:1100px) { .ov-cards { grid-template-columns:1fr 1fr; } .ov-grid { grid-template-columns:1fr; } }
@media (max-width:680px) { .ov-cards { grid-template-columns:1fr; } .inst-grid { grid-template-columns:1fr 1fr; } .ov-head h2 { font-size:21px; } }

/* center the sidebar logo above the menu */
.sidebar .brand { justify-content: center; }
.sidebar .brand a { justify-content: center; }


/* bounce for sidebar menu and purchase buttons */
@keyframes menuJump {
  0% { transform: translateY(0); }
  35% { transform: translateY(-4px); }
  60% { transform: translateY(-1px); }
  80% { transform: translateY(-3px); }
  100% { transform: translateY(-2px); }
}
.side-item:hover,
.ov-head .btn-primary:hover,
.btn-primary:hover {
  animation: menuJump .35s ease;
  will-change: transform;
}

/* purchase page: region project + right order panel */
.region-panel { padding:20px; }
.region-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.region-panel-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.region-panel-tools .orders-search { min-width:210px; max-width:300px; flex:1; }
.region-panel .city-grid { grid-template-columns:repeat(4,1fr); max-height:none; overflow:visible; }
.region-panel .city-card { padding:13px 12px; border-radius:10px; }
.city-top { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.city-top .flag { margin:0; font-size:16px; line-height:1; }
.city-top .flag-img { width:20px; height:14px; }
.city-top b { font-size:12px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.city-stock { display:block; font-size:11px; color:#64748b; }
.city-price { display:block; font-size:10px; color:#94a3b8; margin-top:3px; }
.qty-control { display:flex; align-items:center; border:1px solid #dbe4f0; border-radius:8px; overflow:hidden; }
.qty-control button { width:34px; height:34px; border:0; background:#f8fafc; color:#334155; font-size:17px; cursor:pointer; }
.qty-control button:hover { background:#eff4ff; color:#155eef; }
.qty-control input { width:52px !important; height:34px; border:0 !important; text-align:center; padding:0 !important; font-size:13px; }
.qty-row { display:flex; justify-content:space-between; align-items:center; margin:14px 0 10px; font-size:13px; }
.order-product { background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; padding:12px; margin-bottom:12px; }
.order-product b { display:block; font-size:13px; margin:2px 0 3px; }
.order-product span { display:block; font-size:11px; color:#64748b; }
@media(max-width:1180px){ .region-panel .city-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:760px){ .region-panel .city-grid{grid-template-columns:repeat(2,1fr)} .region-panel-head{align-items:flex-start} }
@media(max-width:460px){ .region-panel .city-grid{grid-template-columns:1fr} }

/* dashboard purchase layout: region projects + order panel */
.dash-shop-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start; }
.dash-shop-main { min-width:0; }
.dash-shop-layout .filter-card { margin-bottom:0; }
.dash-shop-layout .order-card { top:84px; }
.dash-shop-layout .city-grid { grid-template-columns:repeat(4,1fr); }
.qty-control button:disabled { opacity:.45; cursor:not-allowed; }
@media(max-width:1180px){ .dash-shop-layout{grid-template-columns:1fr} .dash-shop-layout .order-card{position:static} .dash-shop-layout .city-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:900px){ .dash-shop-layout .city-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:700px){ .dash-shop-layout .city-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .dash-shop-layout .city-grid{grid-template-columns:1fr} }

/* wider order panel, matching the reference */
.purchase-layout { grid-template-columns:minmax(0,1fr) 420px; }
.dash-shop-layout { grid-template-columns:minmax(0,1fr) 440px; }
.order-card { padding:24px; }
@media(max-width:1180px){ .dash-shop-layout { grid-template-columns:1fr; } .dash-shop-layout .order-card { position:static; } }
@media(max-width:1000px){ .purchase-layout { grid-template-columns:1fr; } .order-card { position:static; } }

/* make the order panel fill the viewport height */
.order-card {
  min-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
}
.order-card #orderForm {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.order-card > .btn-primary,
.order-card #orderForm > .btn-primary {
  margin-top: auto;
}
@media(max-width:760px) {
  .order-card { min-height: calc(100vh - 80px); }
}

/* cleaner order panel */
.order-card {
  min-height: 720px;
  padding: 26px;
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(15,23,42,.07);
}
.order-card h2 { font-size: 18px; letter-spacing: -.2px; margin-bottom: 8px; }
.order-card .order-product {
  background: linear-gradient(180deg,#f7faff 0%,#ffffff 100%);
  border: 1px solid #e3ebf7;
  border-radius: 12px;
  padding: 15px 16px;
}
.order-card .order-product b { font-size: 15px; }
.order-card .order-product span { font-size: 12px; }
.order-card .summary-row {
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.order-card .summary-row:last-of-type { border-bottom: 0; }
.order-card .summary-row.total {
  margin-top: 8px;
  padding: 14px 0 12px;
  border-top: 1px solid #dfe8f4;
  border-bottom: 0;
  font-size: 16px;
}
.order-card .summary-row.total span:last-child { font-size: 24px; color: #0f172a; letter-spacing: -.5px; }
.order-card .pay-option {
  border: 1px solid #e8eef7;
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 8px;
  background: #fff;
}
.order-card .pay-option.active { border-color: #155eef; background: #f4f8ff; }
.order-card > .btn-primary,
.order-card #orderForm > .btn-primary {
  margin-top: 16px;
  height: 48px;
  font-size: 15px;
  border-radius: 10px;
}
.order-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.order-trust span { font-size: 11px; color: #94a3b8; }
.order-trust i { color: #22c55e; margin-right: 4px; }
@media(max-width:1000px) {
  .order-card { min-height: 0; }
}

/* order panel: stretch to full viewport height and keep footer at bottom */
.order-card {
  min-height: calc(100vh - 40px);
  margin-left: auto;
  margin-right: auto;
}
.order-card .order-trust {
  margin-top: auto;
}
@media(max-width:1000px) {
  .order-card { min-height: calc(100vh - 40px); }
}

/* vertically center the order content inside the full-height card */
.order-card {
  justify-content: center;
}
.order-card .order-trust {
  margin-top: 16px;
}

/* order card follows the full height of the left region area */
.purchase-layout,
.dash-shop-layout {
  align-items: stretch;
}
.order-card {
  height: 100%;
  min-height: calc(100vh - 40px);
}

/* center the whole order form group vertically */
.order-card #orderForm {
  flex: 0 0 auto;
}

/* match the marked order-card size: wider right column */
.purchase-layout { grid-template-columns:minmax(0,1fr) 560px; }
.dash-shop-layout { grid-template-columns:minmax(0,1fr) 560px; }
@media(max-width:1180px){ .dash-shop-layout { grid-template-columns:1fr; } }
@media(max-width:1000px){ .purchase-layout { grid-template-columns:1fr; } }

/* keep content starting at the top; footer stays at the bottom */
.order-card {
  justify-content: flex-start;
}
.order-card .order-trust {
  margin-top: auto;
}

.order-help { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e5eaf2; }
.order-help b { display: block; font-size: 12px; color: #475569; margin-bottom: 5px; }
.order-help p { margin: 3px 0; font-size: 11px; color: #94a3b8; line-height: 1.65; }

/* rollback: keep the cleaner 420/440 order panel, no forced full height */
.purchase-layout { grid-template-columns:minmax(0,1fr) 420px; }
.dash-shop-layout { grid-template-columns:minmax(0,1fr) 440px; }
.order-card {
  min-height: 720px;
  height: auto;
  justify-content: flex-start;
}
.order-card .order-trust { margin-top: 16px; }
.order-help { display: none; }
@media(max-width:1000px) { .order-card { min-height: 0; } }

/* final balance: wider order panel, natural height, responsive region grid */
.purchase-layout { grid-template-columns:minmax(0,1fr) 560px; }
.dash-shop-layout { grid-template-columns:minmax(0,1fr) 560px; }
.order-card {
  min-height: 0;
  height: auto;
  justify-content: flex-start;
}
.order-card .order-trust { margin-top: 16px; }
.order-help { display: none; }
.region-panel .city-grid,
.dash-shop-layout .city-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}
@media(max-width:1180px) { .dash-shop-layout { grid-template-columns:1fr; } }
@media(max-width:1000px) { .purchase-layout { grid-template-columns:1fr; } }

.purchase-layout > .order-card,
.dash-shop-layout > .order-card {
  width: 560px;
  max-width: 100%;
}
@media(max-width:1000px) {
  .purchase-layout > .order-card,
  .dash-shop-layout > .order-card { width: 100%; }
}

/* responsive balance: order column scales with viewport, cards auto-fit */
.purchase-layout,
.dash-shop-layout {
  grid-template-columns: minmax(0,1fr) clamp(380px, 34vw, 560px);
  gap: 18px;
}
.purchase-layout > .order-card,
.dash-shop-layout > .order-card {
  width: 100%;
  max-width: 560px;
}
.region-panel .city-grid,
.dash-shop-layout .city-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
@media(max-width:1300px) {
  .dash-shop-layout { grid-template-columns: 1fr; }
  .dash-shop-layout > .order-card { max-width: 100%; }
}
@media(max-width:1100px) {
  .purchase-layout { grid-template-columns: 1fr; }
  .purchase-layout > .order-card { max-width: 100%; }
}
@media(max-width:760px) {
  .region-panel .city-grid,
  .dash-shop-layout .city-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}
@media(max-width:420px) {
  .region-panel .city-grid,
  .dash-shop-layout .city-grid { grid-template-columns: 1fr; }
}

/* small screens: show the order panel first, then regions */
@media(max-width:1300px) {
  .dash-shop-layout > .order-card { order: -1; }
}
@media(max-width:1100px) {
  .purchase-layout > .order-card { order: -1; }
}

/* keep the order panel compact */
.purchase-layout,
.dash-shop-layout {
  grid-template-columns: minmax(0,1fr) clamp(340px, 30vw, 420px);
}
.purchase-layout > .order-card,
.dash-shop-layout > .order-card {
  max-width: 420px;
}
@media(max-width:1100px) {
  .purchase-layout > .order-card,
  .dash-shop-layout > .order-card { max-width: 100%; }
}

/* lock the order panel while scrolling */
.purchase-layout > .order-card,
.dash-shop-layout > .order-card {
  position: sticky !important;
  align-self: start;
  z-index: 15;
  background: #fff;
}
.purchase-layout > .order-card { top: 20px; }
.dash-shop-layout > .order-card { top: 86px; }
@media(max-width:1300px) {
  .dash-shop-layout > .order-card { top: 12px; }
}
@media(max-width:1100px) {
  .purchase-layout > .order-card { top: 12px; }
}

/* slightly narrower and taller order panel */
.purchase-layout,
.dash-shop-layout {
  grid-template-columns: minmax(0,1fr) clamp(320px, 28vw, 380px);
}
.purchase-layout > .order-card,
.dash-shop-layout > .order-card {
  max-width: 380px;
  min-height: 860px;
}
@media(max-width:1100px) {
  .purchase-layout > .order-card,
  .dash-shop-layout > .order-card { max-width: 100%; }
}

/* only small cards/buttons bounce; large containers stay still */
.panel:hover,
.filter-card:hover,
.order-card:hover,
.auth-card:hover {
  animation: none;
}

/* even spacing between sidebar / center / right */
.dash-content { padding: 22px 20px 46px; }
.dash-top { padding-left: 20px; padding-right: 20px; }
.dash-shop-layout { gap: 20px; }
.purchase-layout { gap: 20px; }
@media(max-width:760px) {
  .dash-content { padding: 16px 14px 36px; }
  .dash-top { padding-left: 14px; padding-right: 14px; }
}

/* contact support button at the bottom of the order card */
.order-support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #dbe7ff;
  border-radius: 10px;
  background: #f8fbff;
  color: #155eef;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.order-support:hover { background: #eff4ff; border-color: #bcd4ff; color: #0b4fd6; }

/* mobile layout fixes */
@media(max-width:760px) {
  .site-header .inner { width: calc(100% - 24px); padding: 0 12px; }
  .site-header .brand img { width: 62px; }
  .site-header .brand-word { font-size: 34px; }
  .hero { padding: 40px 0 34px; }
  .hero h1 { font-size: 30px; line-height: 1.2; }
  .hero p { font-size: 14px; line-height: 1.75; max-width: 100%; }
  .hero-grid { gap: 24px; }
  .hero-grid > * { min-width: 0; }
  .purchase-hero { padding: 26px 0 22px; }
  .purchase-hero h1 { font-size: 24px; }
  .purchase-hero p { font-size: 12px; line-height: 1.7; }
}
@media(max-width:600px) {
  .auth-header { height: 64px; }
  .auth-header .inner { width: calc(100% - 28px); }
  .auth-header img { width: 70px; }
  .auth-header .brand-word { font-size: 30px; }
  .auth-lang { display: none; }
  .auth-main { width: calc(100% - 24px); padding: 18px 0 36px; min-height: 0; gap: 18px; }
  .auth-card { padding: 18px; max-width: 100%; overflow: hidden; }
  .auth-card .tab { font-size: 13px; }
  .auth-card input, .auth-card .field { min-width: 0; }
  .captcha-row img { flex: 0 0 82px; width: 82px; height: 42px; }
  .auth-left h1 { font-size: 28px; }
}
@media(max-width:1100px) {
  .purchase-layout { grid-template-columns: 1fr !important; gap: 16px; }
  .purchase-layout > .order-card {
    width: 100% !important;
    max-width: 100% !important;
    order: -1;
    position: static !important;
    min-height: 0;
  }
}
@media(max-width:1300px) {
  .dash-shop-layout { grid-template-columns: 1fr !important; gap: 16px; }
  .dash-shop-layout > .order-card {
    width: 100% !important;
    max-width: 100% !important;
    order: -1;
    position: static !important;
    min-height: 0;
  }
}

/* mobile header and form containment */
@media(max-width:760px) {
  .header-actions .btn-primary { display: none; }
  .header-actions { gap: 6px; }
  .site-header .brand img { width: 58px; }
  .site-header .brand-word { font-size: 32px; }
  .topbar { font-size: 11px; padding: 9px 12px; }
  .purchase-layout > .order-card { min-width: 0; overflow: hidden; }
  .purchase-layout > .order-card * { min-width: 0; }
}
@media(max-width:600px) {
  .auth-main { width: 100%; padding: 14px 12px 32px; }
  .auth-card { width: 100%; max-width: 100%; padding: 16px; overflow: hidden; }
  .auth-card .tabs { display: flex; gap: 4px; }
  .auth-card .tab { flex: 1; white-space: nowrap; font-size: 13px; }
  .auth-card .captcha-row { gap: 6px; }
  .auth-card .captcha-row img { flex: 0 0 72px; width: 72px; height: 42px; }
  .auth-card .field { height: 44px; }
  .auth-card input { min-width: 0; }
  .auth-note { font-size: 10px; }
  .header-actions .muted { display: none; }
}

/* hard mobile containment */
@media(max-width:760px) {
  .purchase-layout > .order-card {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: auto;
    margin-right: auto;
  }
  .dash-shop-layout > .order-card {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto;
    margin-right: auto;
  }
  .purchase-hero p, .hero p { max-width: 100%; overflow-wrap: anywhere; }
}
@media(max-width:600px) {
  .auth-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 14px !important;
  }
  .auth-card .captcha-row img {
    flex: 0 0 68px !important;
    width: 68px !important;
    height: 40px !important;
  }
  .auth-card .field { padding: 0 10px; }
  .auth-note { line-height: 1.6; }
}

/* universal containment for narrow screens */
html, body { max-width: 100%; overflow-x: hidden; }
.order-card, .auth-card { min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
.order-card * { max-width: 100%; }
.order-card .qty-row,
.order-card .summary-row,
.order-card .pay-option,
.auth-card .tabs,
.auth-card .captcha-row {
  flex-wrap: wrap;
}
.order-card .qty-control { max-width: 140px; }
.order-card .qty-control input { width: 46px !important; }
.auth-card .captcha-row .field { flex: 1 1 140px; }
.auth-card .captcha-row img { flex: 0 0 72px; max-width: 72px; }

/* hard fixed width on narrow screens so nothing can overflow */
@media(max-width:600px) {
  .purchase-layout > .order-card,
  .dash-shop-layout > .order-card,
  .auth-card {
    width: 340px !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .purchase-hero .container,
  .site-header .inner,
  .hero .container {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }
}
@media(max-width:360px) {
  .purchase-layout > .order-card,
  .dash-shop-layout > .order-card,
  .auth-card { width: calc(100vw - 24px) !important; }
}

/* keep the whole captcha image visible on phones */
@media(max-width:600px) {
  .auth-card .captcha-row img {
    flex: 0 0 104px !important;
    width: 104px !important;
    height: 38px !important;
    object-fit: fill !important;
  }
  .auth-card .captcha-row .field { flex: 1 1 150px !important; }
}