:root {
  --bg: #0a0714;
  --bg-2: #130d22;
  --panel: rgba(24, 18, 45, 0.88);
  --panel-2: rgba(31, 23, 58, 0.94);
  --line: rgba(130, 255, 188, 0.12);
  --line-strong: rgba(139, 92, 246, 0.22);
  --text: #f4f3ff;
  --muted: #b0adc8;
  --green: #35e39a;
  --green-2: #86f6c2;
  --purple: #8b5cf6;
  --purple-2: #b28cff;
  --success: #35e39a;
  --danger: #ff6b90;
  --shadow: 0 18px 54px rgba(3, 2, 10, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(53, 227, 154, 0.14), transparent 34%),
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.16), transparent 36%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 42%, #07050d 100%);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
.page-shell { width: min(1180px, calc(100% - 24px)); margin: 0 auto; }
.site-header, .site-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img {
  width: 54px; height: 54px; border-radius: 16px; object-fit: cover;
  background: linear-gradient(135deg, rgba(53,227,154,0.15), rgba(139,92,246,0.15));
  padding: 4px; border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.brand strong { display: block; font-size: 18px; }
.brand span { color: var(--muted); font-size: 13px; }
.top-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.top-nav a, .site-footer a { color: var(--muted); }
.top-nav a:hover, .site-footer a:hover { color: var(--text); }
main { padding-bottom: 40px; }
.hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
  align-items: stretch; padding: 28px 0 12px;
}
.hero-copy h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.02; margin: 0 0 16px; letter-spacing: -0.03em; }
.hero-copy p { color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 680px; }
.eyebrow {
  display: inline-block; color: var(--green); margin-bottom: 12px;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.glow-card { box-shadow: 0 0 0 1px rgba(139,92,246,.12), 0 20px 64px rgba(53,227,154,.12); }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 18px; border-radius: 14px;
  font-weight: 700; border: 1px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary {
  background: linear-gradient(135deg, var(--green), var(--purple));
  color: #0a0814;
  box-shadow: 0 10px 26px rgba(139,92,246,.24);
}
.button-secondary {
  background: rgba(255,255,255,0.02);
  border-color: var(--line-strong);
  color: var(--text);
}
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.tariff-grid { display: grid; gap: 16px; }
.tariff-card {
  border: 1px solid rgba(139,92,246,.16);
  border-radius: 18px; padding: 18px;
  background: linear-gradient(180deg, rgba(53,227,154,0.04), rgba(139,92,246,0.05));
}
.tariff-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.price { font-size: 28px; font-weight: 800; }
.price span { font-size: 14px; color: var(--muted); }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.badge {
  display: inline-flex; padding: 8px 12px; border-radius: 999px;
  background: rgba(53, 227, 154, 0.1); color: #dcffee; font-size: 14px;
  border: 1px solid rgba(53, 227, 154, 0.12);
}
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stat {
  padding: 18px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(139,92,246,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(139,92,246,0.16);
}
.stat strong { display: block; font-size: 28px; margin-bottom: 4px; }
.stat span { color: var(--muted); }
.bullet-list { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.8; }
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stack-form { display: grid; gap: 14px; }
label span { display: block; margin-bottom: 8px; color: var(--muted); }
input {
  width: 100%; border: 1px solid rgba(139,92,246,0.2); border-radius: 14px; min-height: 50px;
  padding: 0 16px; background: rgba(4,4,10,0.3); color: var(--text);
}
input:focus {
  outline: none; border-color: rgba(53,227,154,0.38);
  box-shadow: 0 0 0 4px rgba(53,227,154,0.08);
}
.alert {
  border-radius: 16px; padding: 14px 16px; margin: 0 0 16px;
  border: 1px solid transparent;
}
.alert-success { background: rgba(53,227,154,.12); border-color: rgba(53,227,154,.25); }
.alert-error { background: rgba(255,107,144,.12); border-color: rgba(255,107,144,.25); }
.cabinet-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 20px; }
.cabinet-head h1 { margin: 0 0 6px; }
.cabinet-head p { margin: 0; color: var(--muted); }
.meta-list { display: grid; gap: 12px; }
.meta-list > div {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.meta-list span { color: var(--muted); }
.link-code-box {
  margin-top: 18px; padding: 18px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(53,227,154,0.1), rgba(139,92,246,0.1));
  border: 1px solid rgba(53,227,154,0.18);
}
.link-code { font-size: 34px; font-weight: 900; letter-spacing: 4px; margin-bottom: 10px; }
.subscription-url {
  padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--line); word-break: break-all; color: #e2dcff;
}
.traffic-main strong { display: block; font-size: 38px; }
.traffic-main span { color: var(--muted); }
.progress {
  height: 12px; background: rgba(255,255,255,0.06); border-radius: 999px;
  overflow: hidden; margin: 16px 0 10px;
}
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--green), var(--purple)); }
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 8px; }
.compact-meta > div { padding: 10px 0; }
.section-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.section-title-row h3, .section-title-row h2 { margin: 0; }
.action-section + .action-section { margin-top: 18px; }
.action-grid, .pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.action-form-card {
  display: grid; gap: 10px; padding: 16px; border-radius: 18px;
  border: 1px solid rgba(139,92,246,0.16);
  background: rgba(255,255,255,0.025);
}
.action-form-card strong { font-size: 16px; }
.action-form-card span { color: var(--muted); }
.pack-card strong { font-size: 22px; }
.pack-card-recommended {
  border-color: rgba(53,227,154,0.34);
  background: linear-gradient(180deg, rgba(53,227,154,0.08), rgba(139,92,246,0.05));
}
.recommended-badge {
  display: inline-flex; width: fit-content; padding: 6px 10px; border-radius: 999px;
  font-style: normal; font-size: 12px; font-weight: 800;
  color: #0b0a14; background: linear-gradient(135deg, var(--green-2), var(--purple-2));
}
.pill {
  display: inline-flex; align-items: center; padding: 8px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 700;
}
.pill-muted { background: rgba(255,255,255,0.06); color: var(--muted); }
.pill-brand {
  background: linear-gradient(135deg, rgba(53,227,154,0.16), rgba(139,92,246,0.16));
  border: 1px solid rgba(139,92,246,0.18); color: var(--text);
}
.muted-block {
  border-radius: 16px; padding: 14px 16px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--line); color: var(--muted); line-height: 1.6;
}
.open-order-box {
  border-radius: 18px; padding: 18px;
  background: linear-gradient(180deg, rgba(53,227,154,0.08), rgba(139,92,246,0.06));
  border: 1px solid rgba(53,227,154,0.18);
}
.plain-list { padding-left: 18px; margin: 0; }
.plain-list li + li { margin-top: 8px; }
.form-hint { margin: -4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.manual-note { margin-top: 12px; }
.orders-table { display: grid; gap: 14px; }
.order-card {
  padding: 16px; border-radius: 18px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.order-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.order-card-head span, .order-card-meta span { display: block; color: var(--muted); margin-top: 4px; }
.order-card-body { margin-top: 14px; display: grid; gap: 10px; }
.order-card-body > div {
  display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1px solid var(--line);
}
.order-card-body span { color: var(--muted); }
.inline-proof-form { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
input[type="file"] { padding: 12px 14px; min-height: auto; line-height: 1.4; }
.hint-box {
  margin-bottom: 14px; padding: 16px; border-radius: 18px;
  border: 1px solid rgba(53,227,154,0.18);
  background: linear-gradient(180deg, rgba(53,227,154,0.07), rgba(139,92,246,0.05));
}
.hint-box h4 { margin: 0 0 12px; }
.hint-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 12px;
}
.hint-grid > div {
  padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(139,92,246,0.12);
}
.hint-grid span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.hint-recommendation { margin: 0 0 8px; line-height: 1.6; }
.site-footer { color: var(--muted); border-top: 1px solid rgba(255,255,255,0.04); margin-top: 30px; }

@media (max-width: 900px) {
  .hero, .grid-two, .auth-layout, .action-grid, .pack-grid, .hint-grid { grid-template-columns: 1fr; }
  .site-header, .site-footer, .cabinet-head, .order-card-head, .order-card-body > div, .inline-proof-form {
    flex-direction: column; align-items: flex-start;
  }
}

.hero-simple { grid-template-columns: 1.2fr .8fr; }
.hero-main-card { padding: 28px; }
.hero-side-card h2 { margin-top: 0; }
.head-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.code-box {
  margin: 0; padding: 16px; border-radius: 16px; overflow-x: auto;
  background: rgba(8, 10, 20, 0.72); border: 1px solid var(--line);
  color: #e9e3ff; white-space: pre-wrap; word-break: break-word;
}
textarea {
  width: 100%; border: 1px solid rgba(139,92,246,0.2); border-radius: 14px; min-height: 120px;
  padding: 12px 16px; background: rgba(4,4,10,0.3); color: var(--text); resize: vertical;
}
textarea:focus {
  outline: none; border-color: rgba(53,227,154,0.38); box-shadow: 0 0 0 4px rgba(53,227,154,0.08);
}
.button-danger {
  background: rgba(255,107,144,.12); border-color: rgba(255,107,144,.28); color: #ffd7e2;
}
.stats-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 24px;
}
.stat-card {
  padding: 18px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(53,227,154,0.08), rgba(139,92,246,0.08));
  border: 1px solid rgba(139,92,246,.16);
}
.stat-card strong { display: block; font-size: 30px; margin-bottom: 4px; }
.stat-card span { color: var(--muted); }
.admin-layout { align-items: start; }
.admin-note-card { margin-bottom: 24px; }
.search-form {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 18px;
}
.admin-client-list { display: grid; gap: 16px; }
.client-card {
  padding: 18px; border-radius: 20px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.025); display: grid; gap: 14px;
}
.client-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.client-card-head span { display: block; color: var(--muted); margin-top: 4px; }
.admin-meta-list > div { padding: 8px 0; }
.inline-action-form { display: flex; flex-wrap: wrap; gap: 12px; }
.admin-vless-form { margin-top: 4px; }
.small-block { font-size: 14px; }
.compact-form label span { margin-bottom: 6px; }
.compact-form input[type="text"] { min-height: 44px; }

@media (max-width: 900px) {
  .stats-strip, .hero-simple, .search-form { grid-template-columns: 1fr; }
}

select {
  width: 100%; border: 1px solid rgba(139,92,246,0.2); border-radius: 14px; min-height: 50px;
  padding: 0 16px; background: rgba(4,4,10,0.3); color: var(--text);
}
select:focus {
  outline: none; border-color: rgba(53,227,154,0.38); box-shadow: 0 0 0 4px rgba(53,227,154,0.08);
}
.search-form, .inline-select-form, .admin-order-actions {
  display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
}
.search-form input { flex: 1; }
.inline-select-form select { min-width: 260px; flex: 1; }
.compact-gap { gap: 12px; }
.admin-layout-wide { grid-template-columns: 1.1fr .9fr; }
.admin-detail-layout { margin-top: 24px; }
.client-card-linkable { display: grid; gap: 12px; }
.small-block { font-size: 14px; }
.period-admin-list { display: grid; gap: 16px; }
.period-admin-card {
  padding: 18px; border-radius: 20px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.period-admin-head {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px;
}
.period-admin-head span { color: var(--muted); display: block; margin-top: 4px; }
.period-meta-grid { margin-bottom: 14px; }
.period-action-grid { display: grid; gap: 12px; }
.admin-order-actions { margin-top: 14px; }
.compact-form { gap: 10px; }
.compact-form input { min-width: 240px; }
.stat-card {
  padding: 18px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(139,92,246,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(139,92,246,0.16);
}
.stat-card strong { display: block; font-size: 26px; margin-bottom: 4px; }
.stat-card span { color: var(--muted); }
.stats-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px;
}
@media (max-width: 1100px) {
  .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .search-form, .inline-select-form, .admin-order-actions, .period-admin-head { flex-direction: column; align-items: stretch; }
  .admin-layout-wide, .admin-detail-layout { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr; }
}

.connection-list { display: grid; gap: 12px; margin-top: 14px; }
.connection-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
}
.connection-item strong { display: block; margin-bottom: 4px; }
.button-copy { min-width: 148px; }
.button-copy-done { border-color: rgba(53,227,154,.35); color: #dfffee; }
.action-form-card-featured {
  border-color: rgba(53,227,154,0.32);
  background: linear-gradient(180deg, rgba(53,227,154,0.10), rgba(139,92,246,0.08));
  box-shadow: 0 0 0 1px rgba(53,227,154,0.10) inset;
}
.action-form-card-secondary { opacity: .72; }
@media (max-width: 900px) {
  .connection-item { flex-direction: column; align-items: flex-start; }
  .button-copy { width: 100%; }
}

.grid-one { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
.compact-card { padding: 20px; }
.section-title-row-tight { margin-bottom: 16px; }
.section-title-row h2,
.section-title-row h3 { display: flex; align-items: center; gap: 10px; }
.icon-chip {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: linear-gradient(135deg, rgba(53,227,154,0.16), rgba(139,92,246,0.16));
  border: 1px solid rgba(139,92,246,0.16); font-size: 18px;
}
.mini-icon { margin-right: 6px; }
.overview-card { display: grid; gap: 16px; }
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mini-card {
  padding: 16px; border-radius: 18px; background: rgba(255,255,255,0.025);
  border: 1px solid var(--line); display: grid; gap: 8px;
}
.mini-card strong { font-size: 18px; line-height: 1.3; }
.mini-label { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; }
.mini-note { color: var(--muted); font-size: 13px; }
.overview-progress-wrap { padding: 4px 2px 0; }
.compact-progress { margin: 10px 0 8px; height: 10px; }
.section-subline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.section-subline span { display: inline-flex; align-items: center; color: var(--text); font-weight: 700; }
.subpanel {
  padding: 16px; border-radius: 18px; background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
}
.accent-subpanel {
  background: linear-gradient(180deg, rgba(53,227,154,0.07), rgba(139,92,246,0.06));
  border-color: rgba(53,227,154,0.18);
}
.no-divider-meta > div:last-child,
.no-divider-meta > div { border-bottom: none; }
.no-divider-meta > div { padding: 8px 0; }
.subscription-link-box {
  display: block; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.03); word-break: break-all; color: #e6e0ff;
}
.subscription-link-box:hover { border-color: rgba(53,227,154,0.25); }
.inline-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.compact-inline-actions { justify-content: flex-end; }
.button-small { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.compact-link-code-box { margin-top: 12px; }
.compact-link-code-box .link-code { font-size: 28px; }
.panel-source-label { color: var(--muted); font-size: 13px; }
.compact-connection-list { gap: 10px; }
.compact-connection-item { padding: 12px 14px; }
.compact-action-grid, .compact-pack-grid { gap: 10px; }
.compact-action-card { padding: 14px; gap: 8px; }
.compact-action-card strong { font-size: 15px; }
.compact-hint-box { margin-bottom: 12px; padding: 14px; }
.compact-hint-grid { gap: 10px; margin-bottom: 10px; }
.compact-hint-grid > div { padding: 10px 12px; }
.compact-open-order-box { padding: 16px; }
.payment-summary-grid { display: grid; gap: 10px; }
.payment-line {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.payment-line:last-child { border-bottom: none; padding-bottom: 0; }
.payment-line span { color: var(--muted); }
.payment-line-copy strong { white-space: nowrap; }
.compact-muted-block { margin-top: 14px; }
.compact-orders-table { gap: 12px; }
.compact-order-card { padding: 14px; }
.compact-order-body { gap: 8px; }
.compact-inline-proof-form { margin-top: 12px; }
.button-copy { min-width: 132px; }

@media (max-width: 1100px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .page-shell { width: min(1180px, calc(100% - 12px)); }
  .site-header, .site-footer { padding: 14px 0; }
  .overview-grid,
  .grid-one,
  .payment-summary-grid,
  .compact-inline-actions { grid-template-columns: 1fr; }
  .card { padding: 16px; border-radius: 22px; }
  .compact-card { padding: 14px; }
  .subpanel,
  .open-order-box,
  .order-card,
  .compact-order-card,
  .compact-open-order-box { padding: 14px; }
  .overview-grid { gap: 12px; }
  .mini-card { padding: 18px 16px; border-radius: 20px; }
  .payment-line,
  .order-card-body > div { align-items: flex-start; }
  .section-subline,
  .payment-line,
  .inline-actions { flex-direction: column; align-items: flex-start; }
  .mini-card strong { font-size: 17px; }
}

@media (max-width: 560px) {
  .page-shell { width: calc(100% - 8px); }
  .card { padding: 14px; border-radius: 20px; }
  .compact-card { padding: 12px; }
  .overview-card { gap: 14px; }
  .overview-grid { gap: 10px; }
  .mini-card { padding: 18px 14px; }
  .subpanel,
  .open-order-box,
  .order-card,
  .compact-order-card,
  .compact-open-order-box { padding: 12px; }
  .section-title-row { gap: 10px; }
}


/* v14 mobile parity with desktop */
.payment-summary-grid,
.order-card-body {
  gap: 0;
}
.payment-line,
.order-card-body > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.payment-line span,
.order-card-body > div span {
  min-width: 0;
}
.payment-line strong,
.order-card-body > div strong {
  min-width: 0;
  text-align: right;
}
.payment-line-copy .button-copy {
  width: auto;
  min-width: 156px;
  margin-left: auto;
}
.subscription-actions-row {
  margin-bottom: 0;
}
.subscription-actions-only {
  width: auto;
}
.subscription-actions-only .button {
  min-width: 0;
}
@media (max-width: 900px) {
  .section-subline.subscription-actions-row,
  .payment-line,
  .order-card-body > div,
  .inline-actions.subscription-actions-only {
    flex-direction: unset;
  }
  .payment-line,
  .order-card-body > div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .payment-line strong,
  .order-card-body > div strong {
    text-align: right;
  }
  .payment-line-copy .button-copy {
    width: auto;
    min-width: 148px;
  }
  .section-subline.subscription-actions-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .inline-actions.subscription-actions-only {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
}
@media (max-width: 560px) {
  .page-shell {
    width: calc(100% - 4px);
  }
  .card {
    padding: 12px;
  }
  .compact-card {
    padding: 10px;
  }
  .subpanel,
  .open-order-box,
  .order-card,
  .compact-order-card,
  .compact-open-order-box {
    padding: 10px;
  }
  .overview-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mini-card {
    padding: 14px 12px;
  }
  .payment-line,
  .order-card-body > div {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .payment-line-copy .button-copy {
    min-width: 132px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .section-title-row.section-title-row-tight {
    align-items: flex-start;
  }
  .section-title-row h2,
  .section-title-row h3 {
    line-height: 1.2;
  }
  .section-subline.subscription-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
  .inline-actions.subscription-actions-only {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .inline-actions.subscription-actions-only .button {
    width: 100%;
    justify-content: center;
  }
}


/* v15 relaxed mobile payment layout */
.payment-card-shell {
  padding: 22px;
}
.payment-card-box {
  padding: 18px;
}
.payment-summary-grid {
  gap: 0;
}
.payment-line {
  padding: 12px 0;
}
.payment-line span {
  font-size: 15px;
  line-height: 1.45;
}
.payment-line strong {
  font-size: 16px;
  line-height: 1.45;
}
.upload-proof-title {
  margin: 0 0 10px;
}
.upload-proof-form {
  gap: 14px;
}
.upload-proof-form label span {
  margin-bottom: 10px;
}
.payment-status-pill {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .page-shell {
    width: calc(100% - 2px);
  }
  .payment-card-shell {
    padding: 18px;
  }
  .payment-card-box {
    padding: 16px;
  }
  .payment-line {
    gap: 18px;
  }
  .payment-line-copy {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (max-width: 560px) {
  .page-shell {
    width: 100%;
  }
  .card,
  .compact-card {
    border-radius: 18px;
  }
  .payment-card-shell {
    padding: 16px 14px;
  }
  .payment-card-box {
    padding: 14px 12px;
    border-radius: 16px;
  }
  .section-title-row.mobile-roomy-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
  }
  .section-title-row.mobile-roomy-header h2 {
    width: 100%;
  }
  .section-title-row.mobile-roomy-header .payment-status-pill {
    justify-self: start;
  }
  .payment-line {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    padding: 13px 0;
  }
  .payment-line span {
    font-size: 14px;
  }
  .payment-line strong {
    font-size: 15px;
  }
  .payment-line-copy {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
  .payment-line-copy .button-copy {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .upload-proof-form {
    gap: 12px;
  }
  .upload-proof-form input[type="file"] {
    padding: 10px 12px;
  }
  .upload-proof-title {
    margin-bottom: 8px;
  }
}


/* v16 mobile payment block: more usable width */
@media (max-width: 560px) {
  .payment-card-shell {
    padding: 14px 10px;
  }
  .payment-card-box {
    margin-top: 2px;
    padding: 6px 0 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .payment-summary-grid {
    gap: 0;
  }
  .payment-line {
    grid-template-columns: minmax(112px, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
    padding: 11px 0;
  }
  .payment-line strong {
    font-size: 15px;
    line-height: 1.35;
    text-align: right;
  }
  .payment-line span {
    font-size: 14px;
    line-height: 1.35;
  }
  .payment-line-copy {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .payment-line-copy .button-copy {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .upload-proof-title {
    margin-top: 2px;
  }
  .upload-proof-form label span,
  .upload-proof-form .form-hint {
    font-size: 14px;
  }
  .upload-proof-form input[type="file"] {
    min-height: 48px;
    padding: 10px 12px;
  }
}

.subscription-sync-panel {
  border: 1px solid rgba(139, 92, 246, 0.18);
}
.subscription-sync-form {
  margin-top: 12px;
}
.subscription-preview-box {
  margin-top: 14px;
}
.subscription-sync-confirm {
  margin-top: 14px;
}