:root {
    --bg: #f4efe8;
    --surface: #fffdf9;
    --surface-2: #eee5da;
    --border: #ded2c4;
    --text: #2d2925;
    --muted: #7d746b;
    --accent: #8a6748;
    --accent-hover: #735338;
    --accent-soft: #e9ddd0;
    --danger: #b84d43;
    --danger-soft: #f8e8e5;
    --success: #487357;
    --success-soft: #e8f1ea;
    --shadow: 0 12px 34px rgba(80, 58, 39, .08);
}

.support-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 18;
    display: flex; align-items: center; gap: 9px;
    padding: 11px 16px 11px 11px; border-radius: 999px;
    background: var(--accent); color: #fff !important;
    font-size: 13px; font-weight: 800;
    box-shadow: 0 10px 28px rgba(80,58,39,.28);
}
.support-fab:hover { color:#fff !important; background:var(--accent-hover); transform:translateY(-1px); }
.support-fab-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.18); font-size:14px; }
.support-fab-badge { position:absolute; right:-4px; top:-7px; min-width:23px; height:23px; padding:0 6px; display:grid; place-items:center; border-radius:12px; background:#d94b42; color:#fff; border:2px solid var(--bg); font-size:11px; line-height:1; font-weight:900; }
.support-fab-badge[hidden] { display:none; }
.support-fab.has-unread { box-shadow:0 10px 30px rgba(80,58,39,.32),0 0 0 4px rgba(217,75,66,.12); }
.support-fab.is-notifying { animation:support-fab-pulse .65s ease-out; }
@keyframes support-fab-pulse { 0%{transform:scale(1)} 45%{transform:scale(1.08)} 100%{transform:scale(1)} }
.admin-users-head { display:block; margin-bottom:24px; }
.admin-users-title h1 { margin-bottom:0; }
.admin-users-summary { display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }
.admin-users-summary > div { min-width:155px; padding:10px 13px; background:rgba(255,253,249,.75); border:1px solid var(--border); border-radius:12px; }
.admin-users-summary span,.admin-users-summary strong { display:block; }
.admin-users-summary span { color:var(--muted); font-size:11px; margin-bottom:4px; }
.admin-users-summary strong { color:var(--text); font-size:16px; }
.admin-users-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.admin-users-nav .btn { min-width:0; padding:10px 14px; white-space:nowrap; }
.support-admin-layout { height:min(72vh,720px); min-height:560px !important; }
.support-conversation { height:100%; min-height:0; overflow:hidden; }
.admin-chat { min-height:0; overflow:hidden; }
.admin-chat .chat-messages { flex:1; height:auto !important; min-height:0 !important; overflow-y:auto; }
.analytics-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.analytics-head p{margin:0}.analytics-periods{display:flex;gap:7px;overflow-x:auto;padding:4px 0 16px}.analytics-periods a{flex:0 0 auto;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:700}.analytics-periods a.is-active{background:var(--accent);border-color:var(--accent);color:#fff}.analytics-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.analytics-kpi{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow)}.analytics-kpi span,.analytics-kpi small{display:block;color:var(--muted)}.analytics-kpi span{font-size:12px}.analytics-kpi strong{display:block;margin:6px 0 4px;font-size:23px;line-height:1}.analytics-kpi small{font-size:11px}.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.analytics-grid-wide{grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr)}.analytics-card{min-width:0}.analytics-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.chart-legend{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:10px}.chart-legend span:before{content:'';display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:4px}.legend-users:before,.bar-users{background:#8a6748}.legend-topups:before,.bar-topups{background:#4f7f62}.legend-revenue:before,.bar-revenue{background:#c49a54}.analytics-chart{height:260px;display:flex;align-items:stretch;gap:4px;padding-top:16px;overflow-x:auto;border-bottom:1px solid var(--border)}.chart-column{min-width:18px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.chart-bars{width:100%;height:220px;display:flex;align-items:flex-end;justify-content:center;gap:2px}.chart-bars i{display:block;width:28%;min-height:2px;border-radius:3px 3px 0 0}.chart-column>span{height:22px;margin-top:5px;color:var(--muted);font-size:9px;white-space:nowrap}.chart-empty{margin:auto;color:var(--muted)}.funnel-list,.analytics-bars{display:grid;gap:14px;margin-top:20px}.funnel-list>div>div,.analytics-bars>div>div{display:flex;justify-content:space-between;gap:10px;font-size:13px}.funnel-list i,.analytics-bars i{display:block;height:8px;margin-top:6px;border-radius:5px;background:var(--accent)}.analytics-bars i{background:var(--success)}.support-analytics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.support-analytics div{padding:12px 7px;text-align:center;background:var(--accent-soft);border-radius:12px}.support-analytics strong,.support-analytics span{display:block}.support-analytics strong{font-size:22px}.support-analytics span{margin-top:4px;color:var(--muted);font-size:10px}.analytics-table-wrap{overflow-x:auto}.analytics-card table{min-width:100%;font-size:12px}.analytics-card th,.analytics-card td{padding:10px 8px}.analytics-warning{display:inline-block;padding:5px 8px;border-radius:8px;background:var(--danger-soft);color:var(--danger);font-size:11px;font-weight:700}

@media (max-width:700px) {
    .chat-head > .btn { width:auto !important; min-width:0; padding:8px 10px; font-size:12px; white-space:nowrap; }
    .support-fab { right:14px; bottom:14px; padding:10px 14px 10px 10px; }
    .admin-users-head { display:block !important; }
    .admin-users-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; width:100%; margin-top:16px; padding-top:14px; }
    .admin-users-nav .btn { width:100%; min-width:0; min-height:42px; padding:9px 7px; font-size:11px; line-height:1.15; text-align:center; white-space:normal; overflow-wrap:anywhere; }
    .admin-users-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:13px; }
    .admin-users-summary > div { min-width:0; padding:9px 10px; }
    .admin-users-summary > div:nth-child(3) { grid-column:1 / -1; }
    .support-admin-layout { height:calc(100dvh - 150px); min-height:0 !important; }
    .support-conversation { height:100%; }
    .admin-chat .chat-messages { height:auto; min-height:0; }
    .analytics-head{align-items:flex-start}.analytics-head h1{font-size:26px}.analytics-head>.btn{padding:8px 10px;font-size:12px}.analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.analytics-kpi{padding:12px}.analytics-kpi strong{font-size:19px}.analytics-grid,.analytics-grid-wide{grid-template-columns:1fr;gap:0}.analytics-card{padding:16px}.analytics-card-head{display:block}.chart-legend{margin-top:10px}.analytics-chart{height:230px}.chart-bars{height:190px}.support-analytics{gap:6px}
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background:
        radial-gradient(circle at 15% 0%, rgba(169,132,97,.10), transparent 28%),
        var(--bg);
    color: var(--text);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 68px;
    padding: 0 32px;
    background: rgba(244,239,232,.92);
    border-bottom: 1px solid rgba(138,103,72,.16);
    backdrop-filter: blur(14px);
}
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mark {
    width: 34px; height: 34px; border-radius: 11px;
    display:grid; place-items:center;
    background: var(--accent); color:#fff;
    font-size:16px; font-weight:800;
    box-shadow: 0 7px 16px rgba(113,80,53,.18);
}
.topbar .logo { color: var(--text) !important; font-weight: 800; font-size: 17px; letter-spacing:-.02em; }
.topbar nav { display:flex; align-items:center; gap:8px; }
.topbar nav a { color: var(--muted) !important; padding:8px 10px; border-radius:10px; font-size:14px; }
.topbar nav a:hover { color: var(--text) !important; background:rgba(138,103,72,.08); }
.topbar nav .guest-auth-link { padding:8px 13px; border:1px solid rgba(138,103,72,.25); background:rgba(255,253,249,.72); color:var(--text) !important; font-weight:800; }
.topbar nav .guest-auth-link:hover { border-color:rgba(138,103,72,.45); background:var(--surface); }
.topbar nav .guest-auth-register { border-color:var(--accent); background:var(--accent); color:#fff !important; }
.topbar nav .guest-auth-register:hover { border-color:var(--accent-hover); background:var(--accent-hover); color:#fff !important; }
.user-email { color: var(--muted); margin-right: 4px; font-size:13px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.container { max-width: 1040px; margin: 0 auto; padding: 42px 22px 56px; }
.page-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:24px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; margin-bottom:8px; }
h1 { font-size: 30px; line-height:1.15; letter-spacing:-.035em; margin: 0 0 8px; }
h2 { font-size: 19px; margin:0 0 10px; letter-spacing:-.02em; }
p { line-height:1.55; }
.card {
    background: rgba(255,253,249,.94);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 26px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}
.card-flat { box-shadow:none; }
.dashboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px; min-width:0; }
.stat-label { font-size:12px; color:var(--muted); margin-bottom:7px; }
.stat-value { font-size:20px; font-weight:800; letter-spacing:-.025em; overflow:hidden; text-overflow:ellipsis; }
.stat-note { font-size:12px; color:var(--muted); margin-top:5px; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; background:var(--success); box-shadow:0 0 0 4px var(--success-soft); }
.section-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:18px; align-items:start; }
.steps { display:grid; gap:12px; margin-top:18px; }
.step { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; }
.step-num { width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:13px; }
.step strong { display:block; margin:2px 0 4px; }
.step p { margin:0; color:var(--muted); font-size:13px; }
label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 13px; font-weight:600; }
input[type=email], input[type=password], input[type=text], input[type=number] {
    width: 100%; padding: 12px 13px; background: #fff;
    border: 1px solid var(--border); border-radius: 11px; color: var(--text);
    margin-bottom: 16px; font-size: 15px; outline:none;
    transition: border-color .16s, box-shadow .16s;
}
input:focus { border-color:#b49272; box-shadow:0 0 0 4px rgba(138,103,72,.10); }
.btn {
    display: inline-flex; align-items:center; justify-content:center; gap:8px;
    background: var(--accent); color: white !important; border: 1px solid var(--accent);
    padding: 11px 18px; border-radius: 11px; cursor: pointer; text-decoration: none;
    font-size: 14px; font-weight:700; transition: transform .15s, background .15s, border-color .15s;
}
.btn:hover { background: var(--accent-hover); border-color:var(--accent-hover); text-decoration:none; transform:translateY(-1px); }
.btn-large { padding: 13px 22px; font-size: 15px; }
.btn-danger { background: transparent; border-color:#d9aaa5; color:var(--danger) !important; }
.btn-danger:hover { background:var(--danger-soft); border-color:#ca8d86; }
.btn-secondary { background: var(--surface-2); border-color:var(--border); color:var(--text) !important; }
.btn-secondary:hover { background:#e4d7c8; border-color:#d0bfad; }
.happ-connect {
    display:grid;
    gap:9px;
    margin-top:16px;
}
.btn-happ {
    width:100%;
    min-height:48px;
}
.actions-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.actions-row form { margin:0; }
.alert { padding: 13px 15px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; border:1px solid; }
.alert-error { background: var(--danger-soft); color:#8e3d36; border-color:#e8c5c1; }
.alert-success { background: var(--success-soft); color:#365c43; border-color:#cbdccc; }
.mono {
    font-family: "SFMono-Regular", Consolas, monospace;
    background: #f7f1ea; border: 1px dashed #cfbca8; padding: 14px;
    border-radius: 12px; word-break: break-all; font-size: 12px; color:#654a34;
    line-height:1.55;
}
.key-box { position:relative; }
.key-box .mono { padding-right:120px; min-height:70px; }
.key-copy { position:absolute; right:10px; top:10px; }
table { width:100%; border-collapse:collapse; min-width:680px; }
th,td { text-align:left; padding:12px 13px; border-bottom:1px solid #eadfd4; font-size:13px; white-space:nowrap; }
th { color:var(--muted); font-weight:700; background:#faf6f1; }
tr:last-child td { border-bottom:0; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:13px; }
.badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.badge-ok { background:var(--success-soft); color:#356043; }
.badge-banned { background:var(--danger-soft); color:#963e36; }
.badge-warning { background:#fff0c9; color:#7a5518; }
.row-actions a,.row-actions button { font-size:13px; margin-right:8px; }
.muted { color: var(--muted); font-size: 14px; }
.auth-wrap { max-width:920px; margin:10px auto 0; display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:center; }
.auth-intro { padding:34px 18px; }
.auth-intro h1 { font-size:40px; }
.auth-card { margin:0; }
.auth-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:-4px 0 22px; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.auth-switch button { display:flex; min-height:40px; align-items:center; justify-content:center; padding:8px 10px; border:0; border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:800; text-align:center; cursor:pointer; }
.auth-switch .is-active { background:var(--surface); color:var(--text); box-shadow:0 2px 8px rgba(50,38,29,.08); }
.auth-switch button:hover { color:var(--text); background:rgba(255,255,255,.55); }
.auth-switch button.is-active:hover { background:var(--surface); }
.auth-panel[hidden] { display:none; }
.auth-honeypot { position:absolute; left:-9999px; top:-9999px; }
.auth-intro-compact h1 { max-width:430px; }
.auth-intro-compact p { max-width:430px; }
.auth-apps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; max-width:430px; margin-top:22px; }
.auth-app { min-width:0; padding:7px 2px; text-align:center; }
.auth-app span { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 7px; border-radius:12px; background:rgba(255,253,249,.72); }
.auth-app img { display:block; width:30px; height:30px; object-fit:contain; }
.auth-app strong { display:block; overflow:hidden; color:var(--text); font-size:10px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.auth-app-featured span { background:rgba(232,241,234,.9); }
.password-field { position:relative; margin-bottom:16px; }
.password-field input { margin-bottom:0; padding-right:92px; }
.password-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); min-width:72px; padding:7px 9px; border:0; border-radius:8px; background:var(--surface-2); color:var(--accent); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.password-toggle:hover { background:var(--accent-soft); }
.auth-register-cta { display:flex; width:100%; justify-content:center; margin-top:12px; text-align:center; }
.auth-help { margin:16px 0 0; color:var(--muted); font-size:13px; line-height:1.45; text-align:center; }
.existing-account-link { margin:13px 0 0; color:var(--muted); font-size:14px; }
.existing-account-link a { font-weight:800; }
.risk-list { display:grid; gap:14px; }
.risk-card { margin:0; }
.risk-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.risk-card-head h2 { margin-bottom:4px; }
.risk-reasons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.risk-reasons>div { padding:12px 13px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.risk-reasons strong,.risk-reasons span { display:block; }
.risk-reasons span { margin-top:4px; color:var(--muted); font-size:12px; }
.risk-actions { display:flex; flex-wrap:wrap; gap:8px; }
.risk-actions form { margin:0; }
.auth-points { display:grid; gap:11px; margin-top:22px; }
.auth-point { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; }
.auth-point:before { content:'✓'; width:23px;height:23px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:900;font-size:12px; }
.footer { max-width:1040px; margin:0 auto; padding:0 22px 34px; color:var(--muted); font-size:12px; display:flex; justify-content:space-between; gap:20px; }
@media (max-width: 780px) {
    .topbar { padding:0 16px; min-height:62px; }
    .user-email { display:none; }
    .topbar nav { gap:2px; }
    .topbar nav a { padding:8px; }
    .container { padding:28px 15px 42px; }
    h1 { font-size:27px; }
    .dashboard-grid { grid-template-columns:1fr; }
    .section-grid { grid-template-columns:1fr; }
    .auth-wrap { display:block; max-width:460px; }
    .auth-intro { padding:12px 6px 24px; }
    .auth-intro h1 { font-size:32px; }
    .auth-intro-compact { padding-bottom:18px; }
    .auth-apps { gap:5px; margin-top:14px; }
    .auth-app { padding:5px 1px; }
    .auth-app span { width:34px; height:34px; margin-bottom:5px; border-radius:9px; }
    .auth-app img { width:25px; height:25px; }
    .auth-app strong { font-size:8px; }
    .risk-card-head { display:block; }
    .risk-card-head>.badge { margin-top:10px; }
    .risk-reasons { grid-template-columns:1fr; gap:7px; }
    .risk-actions { display:grid; grid-template-columns:1fr; }
    .risk-actions .btn { width:100%; }
    .card { padding:20px; border-radius:15px; }
    .key-box .mono { padding-right:14px; padding-bottom:62px; }
    .key-copy { top:auto; bottom:10px; left:10px; right:10px; }
    .key-copy .btn { width:100%; }
    .actions-row { display:grid; grid-template-columns:1fr; }
    .actions-row form,.actions-row .btn { width:100%; }
    .footer { padding:0 15px 26px; display:block; }
}

/* Billing / anonymous accounts */
.dashboard-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.alert-warning { background:#fff5dd; color:#72531e; border-color:#ead19c; }
.field-note { color:var(--muted); font-size:12px; margin:-10px 0 16px; }
select {
    width:100%; max-width:420px; padding:12px 13px; background:#fff;
    border:1px solid var(--border); border-radius:11px; color:var(--text);
    margin-bottom:16px; font-size:15px; outline:none;
}
.payment-details { display:grid; gap:14px; padding:18px; border:1px solid var(--border); border-radius:14px; background:#faf6f1; }
.payment-value { font-family:"SFMono-Regular",Consolas,monospace; font-size:22px; font-weight:800; letter-spacing:.04em; word-break:break-all; }
.payment-row { display:flex; justify-content:space-between; gap:18px; padding:10px 0; border-bottom:1px solid var(--border); }
.payment-row:last-of-type { border-bottom:0; }
.notice-box { margin-top:16px; padding:14px 16px; border-radius:12px; background:var(--accent-soft); color:var(--text); font-size:14px; }
.amount-plus { color:var(--success); font-weight:800; }
.amount-minus { color:var(--danger); font-weight:800; }
.small-stat { font-size:16px; }
.page-head-actions { margin-top:0; }
.dashboard-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.partner-intro p { margin-bottom:0; }
.referral-head { align-items:center; margin-bottom:16px; }
.referral-note { margin:14px 0 0; }
.compact-actions { margin-top:0; flex-wrap:nowrap; }
.mono-cell { font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.partner-label-short { display:none; }
.referral-users-card { color:var(--text); transition:transform .15s, border-color .15s, background .15s; }
.referral-users-card:hover { color:var(--text); border-color:#c8b39e; background:var(--accent-soft); transform:translateY(-1px); }
.pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; }
.pagination-current { color:var(--muted); font-size:13px; }
.admin-user-search { display:flex; gap:10px; align-items:center; margin-bottom:18px; }
.admin-user-search input { max-width:360px; margin:0; }
.admin-user-search .btn { flex:0 0 auto; }
.chat-page{max-width:820px;margin:0 auto}.chat-head,.chat-admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.chat-status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-right:7px}.chat-shell{overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.chat-messages{height:min(62vh,620px);min-height:420px;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}.chat-row{display:flex;justify-content:flex-start}.chat-row.is-own{justify-content:flex-end}.chat-bubble{max-width:min(76%,620px);padding:11px 13px 8px;border-radius:16px 16px 16px 5px;background:var(--surface-2);overflow-wrap:anywhere}.chat-row.is-own .chat-bubble{color:#fff;background:var(--accent);border-radius:16px 16px 5px 16px}.chat-author{font-size:11px;font-weight:800;margin-bottom:4px;opacity:.75}.chat-text{line-height:1.42;font-size:14px}.chat-bubble time{display:block;margin-top:5px;font-size:10px;opacity:.65;text-align:right}.chat-compose{display:flex;align-items:flex-end;gap:10px;padding:12px;border-top:1px solid var(--border);background:#fff}.chat-compose textarea{flex:1;resize:none;min-height:44px;max-height:120px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;font:inherit;outline:none}.chat-compose textarea:focus{border-color:#b49272;box-shadow:0 0 0 4px rgba(138,103,72,.10)}.chat-send{min-height:44px}.chat-empty,.support-select-dialog{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);text-align:center;min-height:240px}.chat-empty strong,.support-select-dialog strong{color:var(--text);font-size:18px}.chat-empty.compact{min-height:130px}.chat-error{padding:8px 14px;color:var(--danger);font-size:13px}.support-admin-layout{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:650px;background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.support-dialogs{border-right:1px solid var(--border);overflow-y:auto;max-height:72vh}.support-dialogs-title{display:flex;justify-content:space-between;padding:16px;font-weight:800;border-bottom:1px solid var(--border)}.support-dialog{position:relative;display:block;padding:14px 42px 14px 16px;color:var(--text);border-bottom:1px solid var(--border)}.support-dialog:hover,.support-dialog.is-active{background:var(--accent-soft);color:var(--text)}.support-dialog-top{display:flex;justify-content:space-between;gap:8px}.support-dialog-top time{color:var(--muted);font-size:11px;white-space:nowrap}.support-dialog-preview{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}.chat-unread{position:absolute;right:14px;bottom:14px;min-width:21px;height:21px;padding:0 6px;display:grid;place-items:center;border-radius:11px;background:var(--accent);color:#fff;font-size:11px;font-weight:800}.support-conversation{min-width:0;display:flex;flex-direction:column}.support-conversation-head{min-height:65px;padding:10px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}.support-conversation-head div{flex:1;min-width:0}.support-conversation-head strong,.support-conversation-head span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.support-conversation-head span{color:var(--muted);font-size:11px;margin-top:3px}.support-conversation-head>a:last-child{font-size:13px}.admin-chat{border:0;border-radius:0;box-shadow:none;flex:1;display:flex;flex-direction:column}.admin-chat .chat-messages{height:calc(72vh - 130px);flex:1}.chat-mobile-back{display:none;font-size:24px}
@media (max-width: 900px) { .dashboard-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .dashboard-grid-4,.dashboard-grid-3 { grid-template-columns:1fr; } .payment-row { display:block; } .payment-row strong { display:block; margin-top:4px; } }


.subscription-topup-btn {
    margin-top: 24px;
}

/* Отступ под кнопкой "Я оплатил" */
.payment-confirm-btn {
    margin-bottom: 24px;
}

.payment-confirm-btn {
    margin-bottom: 48px !important;
}

.payment-note {
    display: block;
    margin-top: 18px !important;
    line-height: 1.5;
}
body.modal-open {
    overflow: hidden;
}

.site-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.site-modal.is-open {
    display: flex;
}

.site-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(45, 34, 27, 0.48);
    backdrop-filter: blur(3px);
}

.site-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    background: #fffaf6;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 25px 70px rgba(45, 34, 27, 0.22);
    text-align: center;
}

.site-modal-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #efe2d8;
    color: #6f4f3d;
    font-size: 26px;
    font-weight: 700;
}

.site-modal-dialog h3 {
    margin: 0 0 12px;
    font-size: 22px;
}

.site-modal-dialog p {
    margin: 0;
    line-height: 1.55;
    color: var(--muted);
}

.site-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.site-modal-actions .btn {
    min-width: 130px;
}

.btn-amnezia {
    background: #b62d2d;
    border-color: #b62d2d;
    color: #fff;
}
.btn-amnezia:hover { background: #982323; border-color: #982323; }
.btn-app-happ { background:#424d5c; border-color:#424d5c; color:#fff; }
.btn-app-happ:hover { background:#333c49; border-color:#333c49; color:#fff; }
.amnezia-modal { z-index: 10050; }
.amnezia-modal-dialog {
    width: min(94vw, 560px);
    max-height: min(90vh, 760px);
    overflow-y: auto;
    text-align: left;
}
.amnezia-modal-dialog h3 { font-size: clamp(28px, 6vw, 40px); margin-right: 34px; }
.amnezia-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #f3eeee;
    color: #342b2b;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.amnezia-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
}
.amnezia-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.amnezia-status.is-active { color: #197348; background: #e8f6ef; }
.amnezia-status.is-paused { color: #9a5d10; background: #fff1d9; }
.amnezia-qr {
    display: flex;
    justify-content: center;
    margin: 18px auto;
    padding: 14px;
    width: fit-content;
    border: 3px solid #b62d2d;
    border-radius: 20px;
    background: #fff;
}
.amnezia-qr img { display: block; width: min(280px, 66vw); height: auto; aspect-ratio: 1; }
.amnezia-actions { margin-top: 18px; }
.amnezia-secret-note { margin: 16px 0 0 !important; font-size: 13px; color: var(--muted); text-align: center; }
.amnezia-create-form .btn { width: 100%; margin-top: 8px; }

@media (max-width: 560px) {
    .amnezia-modal { align-items: center; padding: 12px; }
    .amnezia-modal-dialog {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        margin: auto;
        padding: 20px 18px calc(14px + env(safe-area-inset-bottom));
        border-radius: 22px;
    }
    .amnezia-modal-dialog h3 { margin-top: 4px; }
    .amnezia-modal-dialog > p { line-height: 1.42; }
    .amnezia-qr { margin: 10px auto; padding: 0; border: 0; border-radius: 12px; }
    .amnezia-qr img { width: min(220px, 58vw); }
    .amnezia-actions { display: grid; grid-template-columns: 1fr; }
    .amnezia-actions { margin-top: 12px; }
    .amnezia-actions .btn { width: 100%; }
    .amnezia-secret-note { margin-top: 10px !important; line-height: 1.35 !important; }
}

@media (max-width: 560px) {
    .site-modal {
        padding: 14px;
    }

    .site-modal-dialog {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .site-modal-actions {
        flex-direction: column;
    }

    .site-modal-actions .btn {
        width: 100%;
    }
}

/* Public pages / payment-provider review */
.landing-hero { max-width:820px; padding:34px 0 42px; }
.landing-hero h1 { font-size:46px; max-width:760px; }
.landing-lead { max-width:680px; color:var(--muted); font-size:17px; line-height:1.65; }
.amnezia-download-section { position:relative; display:grid; grid-template-columns:112px minmax(0,1fr); gap:26px; align-items:center; overflow:hidden; border-color:rgba(182,45,45,.28); background:linear-gradient(135deg,#fff 0%,#fff 62%,#fff4f2 100%); }
.amnezia-download-section::after { content:''; position:absolute; right:-54px; bottom:-76px; width:210px; height:210px; border:30px solid rgba(182,45,45,.06); border-radius:50%; pointer-events:none; }
.amnezia-download-mark { position:relative; z-index:1; display:grid; place-items:center; width:112px; height:112px; border-radius:28px; background:#b62d2d; color:#fff; font-size:58px; font-weight:800; box-shadow:0 16px 34px rgba(182,45,45,.22); }
.amnezia-download-content { position:relative; z-index:1; }
.amnezia-download-content h2 { margin-bottom:8px; font-size:clamp(28px,4vw,38px); }
.amnezia-download-content > p { max-width:720px; margin:0; color:var(--muted); line-height:1.6; }
.amnezia-platforms { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.amnezia-platforms span { padding:7px 11px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.86); color:#51433b; font-size:13px; font-weight:700; }
.amnezia-download-actions { margin-top:18px; }
.amnezia-download-section .field-note { margin-top:10px; }
.app-links-note { margin:12px 0 0 !important; color:var(--muted); font-size:13px; font-weight:700; }
.app-download-card { min-height:190px; }
.app-download-onexray { border-color:rgba(111,79,61,.24); background:linear-gradient(135deg,#fff 0%,#fff 62%,#f6efe9 100%); }
.app-download-onexray::after { border-color:rgba(111,79,61,.06); }
.app-download-onexray .amnezia-download-mark { background:#6f4f3d; box-shadow:0 16px 34px rgba(111,79,61,.2); }
.app-download-happ { border-color:rgba(66,77,92,.24); background:linear-gradient(135deg,#fff 0%,#fff 62%,#f1f4f7 100%); }
.app-download-happ::after { border-color:rgba(66,77,92,.06); }
.app-download-happ .amnezia-download-mark { background:#424d5c; box-shadow:0 16px 34px rgba(66,77,92,.2); }
.public-section { margin-top:8px; }
.public-tariffs { margin:20px 0 0; }
.public-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.public-links { display:grid; gap:10px; margin-top:20px; }
.public-links a { display:block; padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:#faf6f1; }
.legal-page { max-width:820px; margin:0 auto; }
.legal-page h1 { margin-bottom:6px; }
.legal-page h2 { margin-top:28px; }
.legal-page p { color:#514a44; }
.support-card { max-width:720px; margin:0 auto; }
.support-contact { margin:24px 0; padding:18px; border:1px solid var(--border); border-radius:14px; background:#faf6f1; }
.support-contact span { display:block; color:var(--muted); font-size:12px; margin-bottom:7px; }
.support-contact a { font-size:18px; font-weight:800; word-break:break-all; }
.footer-full { align-items:flex-start; }
.footer-full > div:first-child { display:grid; gap:5px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.footer-links a { color:var(--muted); }
.review-code { opacity:.35; font-size:9px; align-self:flex-end; }
@media (max-width:780px) {
    .landing-hero { padding:16px 0 30px; }
    .landing-hero h1 { font-size:34px; }
    .amnezia-download-section { grid-template-columns:64px minmax(0,1fr); gap:14px; padding:20px 16px; }
    .amnezia-download-mark { align-self:start; width:64px; height:64px; border-radius:18px; font-size:34px; }
    .amnezia-download-content h2 { font-size:27px; }
    .amnezia-download-actions { display:grid; grid-template-columns:1fr; }
    .amnezia-download-actions .btn { width:100%; }
    .public-grid { grid-template-columns:1fr; gap:0; }
    .footer-full { display:grid; gap:14px; }
    .footer-links { display:grid; justify-content:start; gap:8px; }
    .review-code { align-self:auto; }
}

/* Compact dashboard on mobile */
@media (max-width: 700px) {
    .dashboard-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .stat-card {
        padding: 11px !important;
        min-height: 0 !important;
    }

    .stat-label {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .stat-value {
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    .stat-note {
        font-size: 11px !important;
        line-height: 1.25 !important;
        margin-top: 4px !important;
    }

    .section-grid {
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .section-grid > div > .card:first-child {
        padding: 14px !important;
    }

    .section-grid > div > .card:first-child h2 {
        font-size: 20px !important;
        margin-bottom: 6px !important;
    }

    .section-grid > div > .card:first-child > .muted {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .section-grid > div > .card:first-child .dashboard-grid-4 {
        margin-top: 10px !important;
    }

    .section-grid > div > .card:first-child .stat-card {
        padding: 10px !important;
    }

    .section-grid > div > .card:first-child form {
        margin-top: 7px !important;
    }

    .section-grid > div > .card:first-child .btn-large {
        padding: 9px 8px !important;
        min-height: 0 !important;
        font-size: 13px !important;
    }

    .subscription-topup-btn {
        margin-top: 10px !important;
        padding: 9px 12px !important;
    }
}

.extra-actions {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.extra-actions .muted {
    margin: 4px 0 12px;
    font-size: 13px;
}

.vless-details > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
}

.vless-details > summary::-webkit-details-marker {
    display: none;
}

@media (max-width:700px) {
    .container{padding-left:12px;padding-right:12px}.chat-head,.chat-admin-head{align-items:flex-start}.chat-head h1,.chat-admin-head h1{font-size:25px}.chat-shell{border-radius:14px}.chat-messages{height:calc(100dvh - 275px);min-height:360px;padding:14px 10px}.chat-bubble{max-width:88%}.chat-compose{gap:7px;padding:9px}.chat-send{padding-left:12px;padding-right:12px}.support-admin-layout{display:block;min-height:calc(100dvh - 150px)}.support-dialogs{max-height:none;border-right:0}.support-admin-layout.has-open-chat .support-dialogs{display:none}.support-admin-layout:not(.has-open-chat) .support-conversation{display:none}.support-conversation-head{min-height:58px}.chat-mobile-back{display:block}.admin-chat .chat-messages{height:calc(100dvh - 270px)}
    .extra-actions {
        margin-top: 16px;
        padding-top: 14px;
    }

    .vless-details > summary {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width:700px) {
    .admin-user-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
    .admin-user-search input { width:100%; max-width:none; min-width:0; }
    .admin-user-search .btn-secondary { grid-column:1 / -1; justify-self:start; }
    .page-head { align-items:flex-start; }
    .page-head-actions { width:100%; display:block; }
    .page-head-actions .btn { width:100%; }
    .referral-head { display:block; }
    .referral-head .btn { width:100%; margin-top:12px; }
    .dashboard-page-head { display:flex; align-items:flex-start; gap:8px; }
    .dashboard-page-head > div:first-child { min-width:0; flex:1; }
    .dashboard-page-head h1 { font-size:25px; white-space:nowrap; }
    .dashboard-page-head .page-head-actions { width:auto; flex:0 0 auto; margin:0; }
    .partner-entry-btn { padding:7px 9px; font-size:11px; border-radius:9px; }
    .partner-label-full { display:none; }
    .partner-label-short { display:inline; }
    .partner-stats { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .partner-stats .referral-users-card { grid-column:1 / -1; }
    .pagination { justify-content:space-between; }
    .pagination .btn { width:auto; }
}

@media (max-width:700px) {
    .extra-actions .actions-row,
    .extra-actions .actions-row form {
        width: 100%;
    }

    .extra-actions .actions-row .btn,
    .vless-details > summary {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* Admin users header: keep this section stacked despite the generic page-head flex layout. */
.page-head.admin-users-head {
    display: block;
}

.page-head.admin-users-head .admin-users-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.page-head.admin-users-head .admin-users-nav {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width:700px) {
    .page-head.admin-users-head .admin-users-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-head.admin-users-head .admin-users-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* VPN nodes admin page */
.dashboard-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-section-title {
    margin: 22px 0 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.card > form > .form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.nodes-table th, .nodes-table td { white-space: normal; vertical-align: top; }
.nodes-table td { min-width: 130px; }
.node-load-cell { min-width: 110px; }
.node-load-numbers { font-size: 14px; margin-bottom: 6px; white-space: nowrap; }
.node-fill-bar { width: 100%; height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.node-fill-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.node-fill-bar.is-full > i { background: var(--danger); }
.node-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 220px; }
.node-actions .btn { padding: 7px 10px; font-size: 12px; white-space: nowrap; }

@media (max-width:700px) {
    .nodes-table th, .nodes-table td { font-size: 12px; padding: 9px 8px; }
    .node-actions { min-width: 0; }
    .node-actions .btn { flex: 1 1 auto; text-align: center; }
    .dashboard-grid-2 { grid-template-columns: 1fr; }
    .form-section-title { margin: 18px 0 10px; padding-top: 14px; font-size: 13px; }
}

/* Admin: active VPN clients */
.active-clients-card { padding: 10px 18px 16px; }
.active-clients-card .table-scroll { overflow-x: auto; }
.active-clients-table { min-width: 820px; }
.active-clients-table th { padding: 13px 12px; color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.active-clients-table td { padding: 15px 12px; vertical-align: middle; }
.active-clients-table tbody tr { transition: background .15s ease; }
.active-clients-table tbody tr[hidden] { display: none !important; }
.active-clients-table tbody tr:hover { background: rgba(111,79,61,.035); }
.active-client-name a { color: var(--text); font-size: 14px; }
.active-client-name a:hover { color: var(--accent); }
.active-client-value { display: block; font-size: 18px; line-height: 1; }
.active-client-offline { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.active-client-protocol-state { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; font-size: 11px; color: var(--muted); }
.active-client-protocol-state span { white-space: nowrap; }
.active-client-methods { display: flex; flex-wrap: wrap; gap: 6px; }
.active-client-methods span { display: inline-flex; padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 11px; font-weight: 700; white-space: nowrap; }
.active-client-checking { background: #fff4dc; color: #8b651f; border: 1px solid #ead6a9; }
.active-client-cell-value { min-width: 0; }
.active-client-filters { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.active-client-filters a { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 13px; border-radius: 10px; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.active-client-filters a:hover { color: var(--text); background: rgba(255,255,255,.75); }
.active-client-filters a.is-active { color: #fff; background: var(--accent); box-shadow: 0 5px 14px rgba(111,79,61,.2); }
.active-client-filter-empty { margin: 14px 0 0; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); text-align: center; }
.active-client-device-note,
.active-client-date-note { margin-top: 5px; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.active-client-footnote { margin: 13px 4px 0; font-size: 12px; line-height: 1.5; }
.active-client-summary { margin-top: 12px; }

@media (max-width: 640px) {
    .admin-active-head { display: block; }
    .admin-active-head > div:first-child { width: 100%; }
    .active-client-filters { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; box-sizing: border-box; }
    .active-client-filters a { min-width: 0; min-height: 40px; padding: 8px 4px; font-size: 11px; line-height: 1.15; text-align: center; }
    .active-client-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .active-client-summary > div,
    .active-client-summary > div:nth-child(3) { min-width: 0; grid-column: auto; padding: 11px 7px; }
    .active-client-summary span { font-size: 9px; line-height: 1.2; }
    .active-client-summary strong { font-size: 21px; }

    .active-clients-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
    .active-clients-card .table-scroll { overflow: visible; }
    .active-clients-table,
    .active-clients-table tbody,
    .active-clients-table tr,
    .active-clients-table td { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
    .active-clients-table { min-width: 0; border: 0; background: transparent; }
    .active-clients-table thead { display: none; }
    .active-clients-table tbody { display: grid; gap: 12px; }
    .active-clients-table tbody tr { padding: 14px 15px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
    .active-clients-table tbody tr:hover { background: var(--surface); }
    .active-clients-table td { display: grid; grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 12px; padding: 9px 0; border: 0; border-bottom: 1px solid rgba(126,101,81,.12); font-size: 13px; text-align: right; }
    .active-clients-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.25; text-align: left; text-transform: uppercase; letter-spacing: .03em; }
    .active-clients-table td:last-child { border-bottom: 0; }
    .active-clients-table .active-client-name { display: flex; align-items: center; justify-content: space-between; padding: 0 0 12px; margin-bottom: 2px; border-bottom-color: var(--border); text-align: left; }
    .active-clients-table .active-client-name::before { content: none; }
    .active-client-name a { font-size: 17px; }
    .active-client-protocol-state { justify-content: flex-end; }
    .active-client-methods { justify-content: flex-end; }
    .active-client-cell-value { width: 100%; text-align: right; }
    .active-client-cell-value .active-client-value { margin-left: auto; }
    .active-client-device-note,
    .active-client-date-note { white-space: normal; }
    .active-client-footnote { margin: 14px 2px 0; padding: 0 3px; }
}

/* VPN client actions: единственный источник стилей для dashboard.php. */
.vpn-connect-actions {
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px;
    position:relative;
    overflow:visible;
}
.vpn-connect-actions > .btn,
.vpn-connect-actions > .app-more-details { margin:0; }
.vpn-connect-actions .btn-app-happ {
    background:#445368;
    border-color:#445368;
    color:#fff;
}
.vpn-connect-actions .btn-amnezia {
    background:#c62d2d;
    border-color:#c62d2d;
    color:#fff;
}
.vpn-connect-actions .app-more-details {
    display:inline-block;
    position:relative;
    overflow:visible;
}
.vpn-connect-actions .app-more-summary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0;
    cursor:pointer;
    list-style:none;
    white-space:nowrap;
    background:var(--surface-2);
    border-color:var(--border);
    color:var(--text);
}
.vpn-connect-actions .app-more-summary::-webkit-details-marker { display:none; }
.vpn-connect-actions .app-more-summary::marker { content:""; }
.vpn-connect-actions .app-more-summary::after {
    content:"";
    width:7px;
    height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .18s ease;
}
.vpn-connect-actions .app-more-details[open] .app-more-summary::after {
    transform:rotate(225deg) translate(-1px,-1px);
}
.vpn-connect-actions .app-more-menu .btn {
    margin:0;
    background:var(--accent-soft);
    border:1px solid var(--border);
    color:var(--text);
    box-shadow:none;
}
.vpn-connect-actions .app-more-menu .btn:hover,
.vpn-connect-actions .app-more-menu .btn:active {
    background:var(--surface-2);
    border-color:#d1c1af;
    color:var(--text);
}
.vpn-connect-actions .app-more-menu .btn-app-onexray {
    background:#6f4f3d;
    border-color:#6f4f3d;
    color:#fff;
}
.vpn-connect-actions .app-more-menu .btn-app-onexray:hover,
.vpn-connect-actions .app-more-menu .btn-app-onexray:active {
    background:#593e30;
    border-color:#593e30;
    color:#fff;
}
.vpn-connect-actions .app-more-menu .btn-app-hiddify {
    background:#335f7d;
    border-color:#335f7d;
    color:#fff;
}
.vpn-connect-actions .app-more-menu .btn-app-hiddify:hover,
.vpn-connect-actions .app-more-menu .btn-app-hiddify:active {
    background:#294d65;
    border-color:#294d65;
    color:#fff;
}
.vpn-connect-actions .app-more-menu .btn-app-v2rayng {
    background:#386a4b;
    border-color:#386a4b;
    color:#fff;
}
.vpn-connect-actions .app-more-menu .btn-app-v2rayng:hover,
.vpn-connect-actions .app-more-menu .btn-app-v2rayng:active {
    background:#2d563d;
    border-color:#2d563d;
    color:#fff;
}

@media (min-width:641px) {
    .vpn-connect-actions > .btn,
    .vpn-connect-actions .app-more-summary {
        width:auto;
        min-width:0;
        padding:11px 16px;
        font-size:14px;
        line-height:1.2;
    }
    .vpn-connect-actions .app-more-menu {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        position:absolute;
        left:0;
        top:calc(100% + 8px);
        z-index:70;
        width:clamp(270px,34vw,360px);
        max-width:calc(100vw - 40px);
        margin:0;
        padding:10px;
        border:1px solid rgba(126,101,81,.18);
        border-radius:15px;
        background:#fffdf9;
        box-shadow:0 16px 38px rgba(50,38,29,.13);
    }
    .vpn-connect-actions .app-more-menu .btn {
        width:100%;
        min-width:0;
        min-height:42px;
        padding:10px 8px;
        justify-content:center;
        border-radius:11px;
        font-size:13px;
        line-height:1.15;
        white-space:nowrap;
    }
    .vpn-connect-actions .app-more-details[open] { margin-bottom:58px; }
}

@media (min-width:641px) and (max-width:900px) {
    .vpn-connect-actions .app-more-menu {
        width:300px;
        max-width:calc(100vw - 32px);
    }
    .vpn-connect-actions .app-more-menu .btn {
        padding-left:6px;
        padding-right:6px;
        font-size:12px;
    }
}

@media (max-width:640px) {
    .vpn-connect-actions { display:grid; grid-template-columns:1fr; }
    .vpn-connect-actions > .btn,
    .vpn-connect-actions > .app-more-details,
    .vpn-connect-actions .app-more-summary { width:100%; }
    .vpn-connect-actions .app-more-summary { min-height:44px; border-radius:12px; }
    .vpn-connect-actions .app-more-menu {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        width:100%;
        margin-top:8px;
        padding:9px;
        border:1px solid #eadfd3;
        border-radius:14px;
        background:#fffdf9;
        box-shadow:0 10px 25px rgba(50,38,29,.09);
    }
    .vpn-connect-actions .app-more-menu .btn {
        width:100%;
        min-height:44px;
        min-width:0;
        padding:10px 5px;
        justify-content:center;
        border-radius:12px;
        font-size:13px;
    }

    /* Дополнительные действия в кабинете: одинаковая ширина кнопок. */
    .extra-actions #load-vless-btn,
    .extra-actions > .actions-row,
    .extra-actions > .actions-row form,
    .extra-actions > .actions-row .btn {
        width:100%;
    }
    .extra-actions > .actions-row .btn {
        display:flex;
        justify-content:center;
    }
}


/* v35: заметная кнопка «Баланс» в шапке, ссылки в карточках кабинета, предупреждение о лимите устройств */
.topbar nav .topbar-balance { display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 8px; border:1px solid rgba(138,103,72,.3); background:var(--accent-soft); color:var(--text) !important; font-weight:800; }
.topbar nav .topbar-balance:hover { border-color:rgba(138,103,72,.5); background:#e2d3c3; color:var(--text) !important; }
.topbar-balance-icon { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:900; line-height:1; }
.stat-link { display:inline-flex; align-items:center; gap:5px; margin-top:2px; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent) !important; font-size:12px; font-weight:800; transition:background .15s, color .15s; }
.stat-link:hover { background:#e2d3c3; color:var(--accent-hover) !important; }
.stat-link span { transition:transform .15s; }
.stat-link:hover span { transform:translateX(2px); }
.devices-limit-warning { margin:4px 0 14px; }
@media (max-width:700px) {
    .topbar nav .topbar-balance { padding:6px 10px 6px 6px; gap:6px; }
    .topbar-balance-icon { width:18px; height:18px; font-size:10px; }
}

/* v36: подсказки в форме регистрации и причины в аналитике */
.register-hint { margin-top:-8px; }
.register-hint.is-error { color:var(--danger); font-weight:700; }
.analytics-reasons { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.analytics-reasons span { display:inline-flex; gap:6px; align-items:center; padding:5px 9px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--muted); font-size:12px; }
.analytics-reasons strong { color:var(--text); }