:root {
    --primary: #008775;
    --primary-hover: #007060;
    --primary-soft: #e6f3f1;
    --accent: #2f80ed;
    --bg: #f4f7f9;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #1e293b;
    --muted: #64748b;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --danger: #b42318;
    --warning-bg: #fff7df;
    --warning-line: #e9bd4c;
    --success: #087443;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 6px 16px rgba(0, 135, 117, 0.15);
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%23008775' opacity='0.04'%3E%3Cpath d='M380 400 Q370 200 390 0 L400 0 L400 400 Z'/%3E%3Cpath d='M340 400 Q330 250 350 100 L355 100 Q335 250 345 400 Z'/%3E%3Cpath d='M380 300 Q300 280 280 320 Q320 340 380 310 Z'/%3E%3Cpath d='M340 250 Q250 220 220 270 Q270 280 340 260 Z'/%3E%3Cpath d='M370 150 Q280 120 250 180 Q300 190 370 160 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-position: right bottom;
    background-repeat: no-repeat;
    color: var(--text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

.hidden {
    display: none !important;
}

.site-shell {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 0 0 28px;
}

.selected-id-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(760px, calc(100% - 24px));
    padding: 10px 14px;
    border: 1px solid rgba(0, 135, 117, 0.14);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -12px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.selected-id-banner.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.selected-id-banner-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.selected-id-banner strong {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-id-banner-status {
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.selected-id-banner-status.verified {
    background: var(--primary-soft);
    color: var(--primary);
}

.selected-id-banner-status.pending {
    background: #eef2f6;
    color: #4b5563;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 0 24px;
    margin-bottom: 24px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text);
    font-weight: 800;
    letter-spacing: 0;
}

.brand-mark {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--primary);
}

.brand-name {
    color: #0f172a;
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
}

.brand-name span {
    color: var(--primary);
}

.divider {
    width: 1px;
    height: 24px;
    background: var(--line);
}

.bigo-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.15;
}

.bigo-mark small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
}

.topnav {
    display: none;
    align-items: center;
    gap: 28px;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
}

.topnav a {
    position: relative;
    padding: 8px 0;
}

.topnav a.active {
    color: var(--primary);
}

.topnav a.active::after {
    position: absolute;
    right: 0;
    bottom: -24px;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--primary);
    content: "";
}

@media (min-width: 768px) {
    .topnav {
        display: flex;
    }
}

.currency-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.flag-ru {
    display: inline-block;
    width: 20px;
    height: 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: linear-gradient(#fff 0 33.3%, #2458c9 33.3% 66.6%, #d52b1e 66.6%);
}

.content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    padding-bottom: 40px;
}

.main-column,
.side-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.step-block,
.trust-box,
.site-footer,
.terms-card,
.settings-hero,
.settings-panel,
.settings-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.step-block {
    border-color: #f1f5f9;
    padding: 24px;
}

.step-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-top: 2px;
}

.step-title {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.step-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.step-head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(280px, 1.2fr);
    gap: 16px;
    align-items: center;
}

.rate-info {
    position: absolute;
    top: 4px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 13px;
}

.id-panel {
    min-width: 0;
}

.id-input-wrap,
.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.field-icon {
    position: absolute;
    left: 16px;
    color: #9ca3af;
    pointer-events: none;
}

#user-id,
#customer-email,
.mini-field input,
.payment-link-copy input,
.settings-form input,
.owner-filter select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fafafa;
    color: var(--text);
    outline: none;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

#user-id {
    min-height: 58px;
    padding: 0 16px 0 44px;
    font-size: 16px;
    font-weight: 650;
}

#customer-email,
.mini-field input {
    min-height: 46px;
    padding: 0 12px;
    font-size: 16px;
}

#user-id:focus,
#customer-email:focus,
.mini-field input:focus,
.payment-link-copy input:focus,
.settings-form input:focus,
.owner-filter select:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.12);
}

.id-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.history-action-btn {
    overflow-wrap: anywhere;
    white-space: normal;
}

.id-suggestions {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    max-height: 260px;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-sm);
}

.id-suggestions-title {
    padding: 10px 12px 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.id-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    text-align: left;
}

.id-suggestion:hover,
.id-suggestion.active {
    background: var(--primary-soft);
}

.id-suggestion-value {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 700;
}

.id-suggestion-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.id-suggestion-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef2f6;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.verify-btn,
.custom-pay-btn,
.payment-link-copy button,
.settings-form button,
.inline-settings-form button,
.owner-filter button,
.owner-inline-form button,
.legal-action,
.legal-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: var(--radius);
    font-weight: 800;
    text-align: center;
}

.verify-btn,
.custom-pay-btn,
.payment-link-copy button,
.settings-form button,
.inline-settings-form button,
.owner-filter button,
.owner-inline-form button,
.legal-action {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
}

.verify-btn,
.payment-link-copy button,
.settings-form button,
.owner-filter button {
    padding: 0 18px;
}

.verify-btn:hover,
.custom-pay-btn.enabled:hover,
.payment-link-copy button:hover,
.settings-form button:hover,
.owner-filter button:hover,
.owner-inline-form button:hover,
.legal-action:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.verify-btn:disabled,
.custom-pay-btn:disabled {
    opacity: 0.7;
}

.verify-hint {
    flex: 1 1 100%;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
}

.repeat-last-order-meta {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.email-field {
    margin-top: 14px;
}

.email-field label,
.mini-field label,
.payment-link-label,
.settings-form label,
.owner-filter label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.arrow-divider {
    display: flex;
    justify-content: center;
    color: var(--line-strong);
}

.account-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    min-height: 104px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: #fafafa;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='100' viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23008775' stroke-width='1.5' fill='none' opacity='0.08'%3E%3Cpath d='M60 10V20M45 20C45 20 60 15 75 20M50 20V35M70 20V35M35 35C35 35 60 25 85 35M40 35V55M80 35V55M25 55C25 55 60 45 95 55M35 55V80M85 55V80M10 80C10 80 60 65 110 80M30 80V100M90 80V100' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
    background-position: right 10px bottom;
    background-repeat: no-repeat;
}

.avatar-ring {
    position: relative;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    padding: 2px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: #fff;
}

.account-avatar,
.avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.account-avatar {
    display: block;
    object-fit: cover;
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
}

.bigo-badge {
    position: absolute;
    right: -9px;
    bottom: -3px;
    padding: 2px 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
}

.account-meta {
    min-width: 0;
    z-index: 1;
}

.account-name {
    overflow: hidden;
    margin-bottom: 2px;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-country {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
}

.account-status {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-bottom: 8px;
    padding: 2px 8px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
}

.secondary-link-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
}

.secondary-link-btn:hover {
    background: var(--primary-soft);
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 188px;
    padding: 24px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    text-align: center;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.package-card:disabled {
    opacity: 0.58;
}

.package-card:not(:disabled):hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.package-card.featured {
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-sm);
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.featured-badge::before {
    content: "★";
}

.check-circle {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.package-head {
    min-height: 20px;
    margin-bottom: 16px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}

.package-card.featured .package-head {
    color: var(--primary);
}

.package-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.package-diamonds {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
}

.package-diamonds svg {
    flex: 0 0 auto;
    color: var(--accent);
    width: 32px;
    height: 32px;
}

.package-sub {
    color: var(--muted);
    font-size: 13px;
}

.package-price {
    width: 80%;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--primary);
    font-size: 18px;
    font-weight: 600;
}

.package-card:not(.featured) .package-price {
    color: var(--text);
}

.pay-chip {
    display: none;
}

.calculator-card {
    min-width: 0;
}

.calculator-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
}

.mini-field {
    flex: 1;
    min-width: 140px;
}

.input-group span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.diamonds-input input {
    padding-right: 80px;
}

.diamonds-input span {
    position: absolute;
    right: 12px;
}

.currency-symbol {
    position: absolute;
    left: 12px;
}

.input-group .currency-symbol + input {
    padding-left: 32px;
}

.calc-equal {
    min-height: 48px;
    color: var(--muted);
    font-size: 20px;
    font-weight: 600;
    line-height: 48px;
    text-align: center;
}

.calc-submit-wrap {
    flex: 1.5;
    min-width: 220px;
}

.custom-pay-btn {
    width: 100%;
    height: 48px;
    padding: 0 24px;
    border: 0;
    background: var(--primary);
    font-size: 16px;
    font-weight: 600;
}

.custom-pay-btn.enabled {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: none;
}

.custom-pay-btn::after {
    margin-left: 8px;
    content: "→";
    font-size: 18px;
}

.custom-pay-btn:disabled::after {
    content: "";
}

.secure-note {
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.visually-muted {
    opacity: 0;
    user-select: none;
}

.calc-note {
    display: none;
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
}

.promo-card {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background-color: #f8fafc;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='200' viewBox='0 0 340 200'%3E%3Cg opacity='0.7'%3E%3Cpath d='M20 180 Q40 150 70 170 T130 150 T190 180 T260 160 T320 190 V200 H20 Z' fill='%23E6F3F1'/%3E%3Cpath d='M0 160 Q30 130 80 150 T160 120 T240 160 T340 140 V200 H0 Z' fill='%23D4EBE7'/%3E%3Cpath d='M200 150 L300 150 L310 170 L190 170 Z' fill='%23fff' stroke='%23A7D7CD' stroke-width='2'/%3E%3Cpath d='M210 170 L290 170 L290 185 L210 185 Z' fill='%23fff' stroke='%23A7D7CD' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #f0f9ff 0%, #f8fafc 100%);
    background-position: bottom, center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    padding: 24px;
}

.promo-card h2 {
    position: relative;
    z-index: 1;
    max-width: 245px;
    margin: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1.3;
}

.promo-stat {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    max-width: 150px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.promo-stat svg {
    color: var(--primary);
}

.promo-diamond {
    position: absolute;
    right: 0;
    bottom: 30px;
    width: 130px;
    color: #0ea5e9;
    opacity: 0.95;
}

.trust-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-color: #f1f5f9;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.trust-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--primary-soft);
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
}

.trust-text-wrap h3 {
    margin: 0 0 2px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.trust-text-wrap p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
    padding: 24px;
    border-color: #f1f5f9;
}

.footer-payments {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-payments > span,
.footer-socials,
.footer-meta {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

.payment-brands {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.payment-brands span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #f3f4f6;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.payment-brands span:nth-child(1) {
    color: #1a1f71;
}

.payment-brands span:nth-child(2) {
    color: #eb001b;
}

.payment-brands span:nth-child(3) {
    color: #008c3a;
}

.footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.footer-links a:hover,
.footer-offer-link:hover {
    color: var(--primary);
}

.footer-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: var(--radius);
    background: var(--primary-soft);
}

.footer-offer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
}

.footer-offer-link::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23008775' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
    background-size: cover;
    content: "";
}

.legal-content {
    display: block;
    padding-top: 4px;
}

.wrap {
    width: min(940px, 100%);
    margin: 0 auto;
}

.terms-card {
    padding: 34px 38px;
}

.terms-card h1 {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 34px;
    line-height: 1.15;
}

.terms-card h2 {
    margin: 28px 0 10px;
    color: var(--text);
    font-size: 21px;
    line-height: 1.3;
}

.terms-card p,
.terms-card li {
    font-size: 17px;
    line-height: 1.65;
}

.terms-card p {
    margin: 0 0 14px;
}

.terms-card ul,
.terms-card ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.terms-card a {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.terms-card .note {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.payment-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.payment-detail div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 14px;
}

.payment-detail span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 14px;
}

.payment-detail strong {
    overflow-wrap: anywhere;
    font-size: 17px;
}

.legal-action,
.legal-secondary-action {
    min-height: 44px;
    padding: 0 18px;
    text-decoration: none !important;
}

.legal-secondary-action {
    border: 1px solid var(--line-strong);
    background: #fff;
    color: #425160 !important;
}

.error-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.settings-body {
    background: var(--bg);
}

.settings-shell {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
    padding: 36px 0 48px;
}

.settings-hero,
.settings-panel,
.settings-card {
    padding: 22px;
}

.settings-hero {
    margin-bottom: 18px;
}

.settings-kicker {
    margin: 0 0 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.settings-hero h1,
.settings-panel h2,
.settings-card h2 {
    margin: 0;
}

.settings-hero p {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.settings-card dl {
    margin: 16px 0 0;
}

.settings-card dl > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.settings-card dt {
    color: var(--muted);
    font-weight: 700;
}

.settings-card dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.settings-panel {
    margin-bottom: 18px;
}

.settings-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.settings-panel-head span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.settings-table-wrap {
    overflow-x: auto;
}

.settings-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
}

.settings-table th,
.settings-table td {
    padding: 11px 10px;
    border-top: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

.settings-table th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.settings-empty {
    color: var(--muted);
}

.settings-success {
    padding: 12px 14px;
    border: 1px solid #37a36b;
    border-radius: var(--radius);
    background: #e9f8ef;
    color: #17623b;
    font-weight: 800;
}

.settings-note {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.settings-form {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 16px;
}

.settings-form h3 {
    margin: 0 0 14px;
    font-size: 18px;
}

.settings-form input {
    min-height: 42px;
    padding: 0 12px;
    background: var(--surface);
}

.settings-form button {
    margin-top: 14px;
}

.inline-settings-form,
.owner-inline-form {
    margin: 0;
}

.settings-shortcut-link,
.reconciliation-links a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.reconciliation-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reconciliation-links a:hover,
.settings-shortcut-link:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.inline-settings-form button,
.owner-inline-form button {
    min-height: 36px;
    padding: 0 12px;
}

.pricing-rules-table {
    min-width: 900px;
}

.customer-profiles-table {
    min-width: 980px;
}

.profile-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-contact-value {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.profile-contact-type {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.reconciliation-upload-form {
    display: grid;
    gap: 10px;
}

.reconciliation-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.reconciliation-metrics .settings-card {
    margin: 0;
}

.reconciliation-metrics span,
.owner-stat span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.reconciliation-metrics strong,
.owner-stat strong {
    font-size: 20px;
}

.reconciliation-status,
.reconciliation-substatus {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #f8fafc;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.reconciliation-status-reconciled_exact {
    border-color: #2f855a;
    background: #ebf8f1;
    color: #22543d;
}

.reconciliation-status-reconciled_totals_only {
    border-color: #2b6cb0;
    background: #ebf8ff;
    color: #1e4e8c;
}

.reconciliation-status-warning {
    border-color: #b7791f;
    background: #fffaf0;
    color: #975a16;
}

.reconciliation-status-failed {
    border-color: #c53030;
    background: #fff5f5;
    color: #9b2c2c;
}

.reconciliation-substatus {
    margin-left: 8px;
}

.reconciliation-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.reconciliation-next-actions {
    margin: 16px 0 0;
    padding-left: 18px;
}

.reconciliation-json {
    margin: 0;
    padding: 14px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #0f172a;
    color: #e2e8f0;
    font-size: 13px;
}

.reconciliation-issue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.reconciliation-issues-list {
    margin: 14px 0 0;
    padding-left: 18px;
}

.reconciliation-issues-list li + li {
    margin-top: 8px;
}

.owner-toolbar {
    margin-bottom: 18px;
}

.owner-filter {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.owner-filter label {
    width: 100%;
    margin-bottom: -4px;
    text-transform: uppercase;
}

.owner-filter select {
    min-width: 260px;
    min-height: 44px;
    padding: 0 12px;
    background: var(--surface);
}

.owner-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.owner-stat {
    min-height: 112px;
}

.owner-stat span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.owner-stat strong {
    display: block;
    margin-top: 14px;
    font-size: 28px;
}

.owner-revenue {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.owner-revenue strong {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.owner-log-table code,
.owner-site-events-table code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.owner-site-events-table {
    min-width: 1160px;
}

.owner-site-event-level {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px;
    border-radius: var(--radius);
    background: #eef2f6;
    color: #344150;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.owner-site-event-warning {
    background: #fff4cc;
    color: #6a4a00;
}

.owner-site-event-error {
    background: #ffe5e5;
    color: #8d1e1e;
}

.payment-link-shell {
    max-width: 820px;
}

.payment-link-card {
    margin-bottom: 24px;
}

.payment-link-note,
.payment-link-status {
    color: var(--muted);
}

.telegram-payment-form {
    margin: 24px 0 16px;
}

.telegram-payment-form .legal-action[disabled] {
    opacity: 0.7;
    cursor: wait;
}

#telegram-payment-status {
    min-height: 1.5em;
}

.payment-link-warning {
    padding: 12px 14px;
    border: 1px solid var(--warning-line);
    border-radius: var(--radius);
    background: var(--warning-bg);
    color: #5d4700;
    font-weight: 700;
}

.payment-link-label {
    margin-top: 24px;
}

.payment-link-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-bottom: 12px;
}

.payment-link-copy input {
    min-height: 44px;
    padding: 0 12px;
    overflow-wrap: anywhere;
}

.payment-link-fallback {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.payment-link-fallback span {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
}

.payment-link-fallback code {
    display: block;
    overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
    .content {
        grid-template-columns: 1fr;
    }

    .side-column {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 900px) {
    .topbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .topnav {
        order: 3;
        width: 100%;
        gap: 18px;
    }

    .topnav a.active::after {
        bottom: -8px;
    }

    .step-head-grid {
        grid-template-columns: 1fr;
    }

    .arrow-divider {
        display: none;
    }

    .calculator-row {
        grid-template-columns: 1fr;
    }

    .calc-equal {
        display: none;
    }

    .side-column {
        grid-template-columns: 1fr;
    }

    .site-footer {
        grid-template-columns: 1fr;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .settings-grid,
    .settings-form-grid {
        grid-template-columns: 1fr;
    }

    .reconciliation-metrics,
    .reconciliation-issue-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .owner-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .selected-id-banner {
        top: 8px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        justify-items: start;
        gap: 8px;
        padding: 10px 12px;
    }

    .selected-id-banner-label,
    .selected-id-banner strong,
    .selected-id-banner-status {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .site-shell {
        width: min(100% - 20px, 1200px);
        padding-bottom: 18px;
    }

    .topbar {
        padding: 16px 0 18px;
    }

    .brand-name {
        font-size: 21px;
    }

    .divider,
    .bigo-mark {
        display: none;
    }

    .topnav {
        font-size: 14px;
    }

    .step-block,
    .trust-box,
    .site-footer,
    .terms-card {
        padding: 18px;
    }

    .rate-info {
        position: static;
        width: 100%;
        margin-top: 8px;
    }

    .id-actions,
    .account-card,
    .footer-meta {
        align-items: stretch;
        flex-direction: column;
    }

    .verify-btn {
        width: 100%;
    }

    .history-action-btn {
        width: 100%;
    }

    .account-card {
        gap: 12px;
    }

    .packages-grid {
        grid-template-columns: 1fr;
    }

    .promo-card {
        min-height: 168px;
        padding: 20px;
    }

    .promo-diamond {
        width: 112px;
    }

    .terms-card h1 {
        font-size: 28px;
    }

    .terms-card p,
    .terms-card li {
        font-size: 16px;
    }

    .payment-detail,
    .payment-link-copy,
    .owner-stats-grid {
        grid-template-columns: 1fr;
    }

    .reconciliation-metrics,
    .reconciliation-issue-grid {
        grid-template-columns: 1fr;
    }

    .settings-shell {
        width: min(100% - 20px, 1180px);
        padding: 20px 0 32px;
    }

    .settings-hero,
    .settings-panel,
    .settings-card {
        padding: 16px;
    }

    .settings-card dl > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}