/* HUSH VPN — styles v1.6.0 */

*, *::before, *::after {
            margin: 0; padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        :root {
            --orange: #FF8800;
            --orange-tint: rgba(255,136,0,0.10);
            --orange-tint2: rgba(255,136,0,0.09);
            --orange-border: rgba(255,136,0,0.22);
            --bg: #F5F5F7;
            --card: #ffffff;
            --text1: #1c1c1e;
            --text2: #8e8e93;
            --text3: #c7c7cc;
            --separator: #f2f2f7;
            --green: #34c759;
            --shadow: 0 4px 24px rgba(0,0,0,0.07);

            /* Device safe area (notch, home bar) */
            --sat: env(safe-area-inset-top, 0px);
            --sab: env(safe-area-inset-bottom, 0px);
            --sal: env(safe-area-inset-left, 0px);
            --sar: env(safe-area-inset-right, 0px);

            /* Telegram WebApp safe area (set by JS, includes close button height) */
            --tg-top:    0px;
            --tg-bottom: 0px;
            --tg-left:   0px;
            --tg-right:  0px;

            /* Top offset: max of Telegram controls, device notch, or 72px minimum */
            --top-safe: max(var(--tg-top), var(--sat), 72px);

            /* Fluid spacing */
            --px: clamp(12px, 4vw, 20px);
            --gap: clamp(10px, 3vw, 14px);
        }

        html {
            font-size: 16px;
            height: 100%;
        }

        body {
            min-height: 100%;
            background: var(--bg);
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
            color: var(--text1);
            overflow-x: hidden;
            /* Telegram mini app: fill entire viewport */
            padding-bottom: max(var(--tg-bottom), var(--sab), 20px);
        }

        .app {
            max-width: 480px;
            margin: 0 auto;
            padding-left: max(var(--sal), var(--px));
            padding-right: max(var(--sar), var(--px));
        }

        /* ─── HEADER ─── */
        /* Transparent spacer — same color as bg — sits above the header.
           Height = Telegram toolbar + status bar space. */
        .tg-spacer {
            height: var(--top-safe);
            background: var(--bg);
            position: sticky;
            top: 0;
            z-index: 101;
            margin-left: calc(-1 * max(var(--sal), var(--px)));
            margin-right: calc(-1 * max(var(--sar), var(--px)));
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 10px;
            padding-bottom: 14px;
            position: sticky;
            top: var(--top-safe);   /* sticks just below the spacer */
            z-index: 100;
            background: var(--bg);
            margin-left: calc(-1 * max(var(--sal), var(--px)));
            margin-right: calc(-1 * max(var(--sar), var(--px)));
            padding-left: max(var(--sal), var(--px));
            padding-right: max(var(--sar), var(--px));
            animation: fromTop 0.5s cubic-bezier(0.22,1,0.36,1) both;
        }

        .logo-group { display: flex; align-items: center; gap: 8px; }

        .logo-icon {
            width: clamp(32px, 8vw, 36px);
            height: clamp(32px, 8vw, 36px);
            background: var(--orange);  /* shows through SVG cutouts */
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
        }
        .logo-icon img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 10px;
        }
        .logo-text {
            font-size: clamp(18px, 5vw, 22px);
            font-weight: 700; color: var(--text1); letter-spacing: -0.5px;
        }


        /* ─── SCROLL CONTENT ─── */
        .content {
            display: flex;
            flex-direction: column;
            gap: var(--gap);
            padding-bottom: max(var(--tg-bottom), var(--sab), 16px);
        }

        /* ─── BANNER ─── */
        .banner {
            background: var(--orange-tint2);
            border: 1px solid var(--orange-border);
            border-radius: clamp(14px, 4vw, 18px);
            padding: clamp(10px, 3vw, 13px) clamp(12px, 3.5vw, 14px);
            display: flex;
            align-items: flex-start;
            gap: clamp(8px, 2.5vw, 12px);
            animation: fadeUp 0.4s cubic-bezier(0.22,1,0.36,1) 0.05s both;
            /* Видимость: inline style в HTML + JS (нельзя !important — иначе API не покажет баннер) */
        }
        .banner.hidden {
            animation: bannerOut 0.35s cubic-bezier(0.55,0,1,0.45) forwards;
            pointer-events: none;
        }

        .banner-icon-wrap {
            width: 30px; height: 30px;
            background: rgba(255,136,0,0.15);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; margin-top: 1px;
        }
        .banner-body { flex: 1; min-width: 0; }
        .banner-title { font-size: clamp(12px, 3.5vw, 13px); font-weight: 600; color: var(--text1); line-height: 1.4; }
        .banner-sub { font-size: clamp(11px, 3vw, 12px); color: #6e6e73; line-height: 1.5; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
        .banner-close {
            width: 22px; height: 22px;
            background: rgba(0,0,0,0.06);
            border-radius: 50%; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; margin-top: 1px;
            transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
        }
        .banner-close:active { transform: scale(0.82); }

        /* ─── BALANCE CARD ─── */
        .balance-card {
            background: var(--card);
            border-radius: clamp(16px, 5vw, 22px);
            padding: clamp(16px, 4.5vw, 20px);
            box-shadow: var(--shadow);
            animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.08s both;
        }
        .balance-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
        .balance-left { flex: 1; min-width: 0; }
        .balance-label { font-size: clamp(11px, 3vw, 13px); color: var(--text2); font-weight: 500; }
        .balance-amount {
            font-size: clamp(30px, 9vw, 38px);
            font-weight: 700; color: var(--text1);
            letter-spacing: -1.5px; line-height: 1.1; margin-top: 4px;
            white-space: nowrap;
        }
        .balance-amount .rub { font-size: clamp(22px, 6.5vw, 28px); }
        .balance-days-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
        .balance-days { font-size: clamp(11px, 3vw, 13px); color: var(--text2); }
        .balance-days .acc { color: var(--orange); font-weight: 600; }
        .refresh-btn {
            display: flex; align-items: center; justify-content: center;
            background: none; border: none; padding: 3px; cursor: pointer;
            color: var(--text2); opacity: 0.7; border-radius: 50%;
            transition: opacity .2s, transform .3s;
            -webkit-tap-highlight-color: transparent;
        }
        .refresh-btn:active { opacity: 1; }
        .refresh-icon.spinning {
            animation: spin360 0.7s cubic-bezier(.4,0,.2,1) forwards;
        }
        @keyframes spin360 { to { transform: rotate(360deg); } }
        .wallet-icon {
            width: clamp(40px, 10vw, 48px);
            height: clamp(40px, 10vw, 48px);
            background: var(--orange-tint);
            border-radius: clamp(10px, 3vw, 14px);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .progress-wrap { margin-top: clamp(12px, 3.5vw, 16px); }
        .progress-track { height: 5px; background: #f2f2f7; border-radius: 10px; overflow: hidden; }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--orange) 0%, #ffb347 100%);
            border-radius: 10px; width: 0%;
            transition: width 1s cubic-bezier(0.22,1,0.36,1);
        }
        .progress-labels { display: flex; justify-content: space-between; margin-top: 6px; }
        .progress-labels span { font-size: clamp(10px, 2.8vw, 11px); color: var(--text3); }

        /* ─── ACTION BUTTONS ─── */
        .action-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(8px, 2.5vw, 12px);
            animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.13s both;
        }
        .act-btn {
            border: none; cursor: pointer;
            border-radius: clamp(14px, 4vw, 18px);
            padding: clamp(12px, 3.5vw, 16px) clamp(8px, 2vw, 12px);
            display: flex; flex-direction: column;
            align-items: center;
            gap: clamp(6px, 1.8vw, 8px);
            transition: transform 0.17s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.17s;
            -webkit-user-select: none; user-select: none;
            min-height: 80px;
        }
        .act-btn:hover  { transform: translateY(-2px) scale(1.02); }
        .act-btn:active { transform: scale(0.955); }
        .act-btn.primary { background: var(--orange); box-shadow: 0 4px 16px rgba(255,136,0,0.35); }
        .act-btn.secondary { background: var(--card); box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
        .act-icon-circle {
            width: clamp(28px, 7vw, 32px);
            height: clamp(28px, 7vw, 32px);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .act-btn.primary .act-icon-circle { background: rgba(255,255,255,0.22); }
        .act-btn.secondary .act-icon-circle { background: var(--orange-tint); }
        .act-label { font-size: clamp(12px, 3.5vw, 14px); font-weight: 600; line-height: 1; }
        .act-btn.primary .act-label { color: #fff; }
        .act-btn.secondary .act-label { color: var(--text1); }

        /* ─── CARD BASE ─── */
        .card {
            background: var(--card);
            border-radius: clamp(16px, 5vw, 22px);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        /* ─── DEVICES ─── */
        .devices-card { animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.18s both; }

        .card-header {
            display: flex; align-items: center;
            justify-content: space-between;
            padding: clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px) clamp(10px, 2.5vw, 12px);
            gap: 8px;
        }
        .card-header-left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
        .card-header-title { font-size: clamp(14px, 4vw, 16px); font-weight: 700; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .pill-btn {
            display: flex; align-items: center; gap: 3px;
            padding: 6px clamp(8px, 2.5vw, 12px);
            background: var(--orange-tint);
            border-radius: 20px; border: none; cursor: pointer;
            transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s;
            flex-shrink: 0;
        }
        .pill-btn:hover { box-shadow: 0 3px 10px rgba(255,136,0,0.25); }
        .pill-btn:active { transform: scale(0.92); }
        .pill-btn span { font-size: clamp(11px, 3vw, 12px); font-weight: 600; color: var(--orange); white-space: nowrap; }
        .pill-btn.pill-btn--locked {
            opacity: 0.42;
            cursor: not-allowed;
            box-shadow: none;
        }
        .pill-btn.pill-btn--locked:hover { box-shadow: none; }
        .pill-btn.pill-btn--locked:active { transform: none; }

        .device-row {
            display: flex; align-items: center; gap: clamp(10px, 2.8vw, 12px);
            padding: clamp(12px, 3.5vw, 14px) clamp(14px, 4vw, 20px);
            border-top: 1px solid var(--separator);
            cursor: pointer;
            transition: background 0.15s;
        }
        .device-row:active { background: rgba(0,0,0,0.025); }
        .device-icon {
            width: clamp(38px, 9.5vw, 44px);
            height: clamp(38px, 9.5vw, 44px);
            border-radius: clamp(10px, 3vw, 13px);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .device-icon.ios { background: linear-gradient(135deg, #1c1c1e 0%, #3a3a3c 100%); }
        .device-icon.android { background: linear-gradient(135deg, #34A853 0%, #1a7f37 100%); }
        .device-info { flex: 1; min-width: 0; }
        .device-name { font-size: clamp(13px, 3.5vw, 14px); font-weight: 600; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .device-plan { font-size: clamp(11px, 3vw, 12px); color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .device-right { text-align: right; flex-shrink: 0; }
        .device-date { font-size: clamp(10px, 2.8vw, 11px); color: var(--text3); }
        .device-status {
            display: inline-flex; align-items: center; gap: 4px;
            margin-top: 4px; padding: 2px 7px;
            background: rgba(52,199,89,0.12); border-radius: 20px;
            transition: background 0.25s ease;
        }
        .device-status.paused {
            background: rgba(142,142,147,0.12);
        }
        .status-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: var(--green); flex-shrink: 0;
            transition: background 0.25s ease;
        }
        .device-status.paused .status-dot { background: var(--text3); }
        .device-status span { font-size: clamp(10px, 2.8vw, 11px); color: var(--green); font-weight: 500; }
        .device-status.paused span { color: var(--text3); }

        .manage-btn-wrap { padding: 8px clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px); }
        .manage-btn {
            width: 100%; background: #f2f2f7;
            border: none; border-radius: clamp(10px, 3vw, 14px);
            padding: clamp(10px, 3vw, 12px);
            cursor: pointer;
            font-size: clamp(12px, 3.2vw, 13px); color: var(--text2); font-weight: 500;
            font-family: inherit;
            transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), background 0.15s;
        }
        .manage-btn:hover { background: #e8e8ed; }
        .manage-btn:active { transform: scale(0.97); }

        /* ─── REFERRAL ─── */
        .ref-card {
            animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.23s both;
            position: relative; overflow: hidden;
        }
        .ref-blob {
            position: absolute; right: -32px; top: -32px;
            width: 128px; height: 128px;
            background: var(--orange); border-radius: 50%;
            opacity: 0.10; filter: blur(30px); pointer-events: none;
        }
        .ref-inner { padding: clamp(14px, 4vw, 20px); position: relative; z-index: 1; }
        .ref-top { display: flex; align-items: flex-start; gap: clamp(10px, 3vw, 12px); }
        .ref-icon {
            width: clamp(40px, 10vw, 48px);
            height: clamp(40px, 10vw, 48px);
            border-radius: clamp(10px, 3vw, 14px);
            background: linear-gradient(135deg, var(--orange) 0%, #ffb347 100%);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .ref-title { font-size: clamp(14px, 4vw, 16px); font-weight: 700; color: var(--text1); line-height: 1.3; }
        .ref-title .acc { color: var(--orange); }
        .ref-desc { font-size: clamp(11px, 3vw, 12px); color: var(--text2); margin-top: 4px; line-height: 1.5; }
        .ref-link {
            display: flex; align-items: center; justify-content: space-between;
            margin-top: 0;
            padding: clamp(10px, 2.8vw, 12px) clamp(12px, 3.5vw, 16px);
            background: #f9f9fb; border: 1.5px solid rgba(255,136,0,0.18); border-radius: 13px;
            transition: background 0.15s, border-color 0.15s;
        }
        .ref-link:active { background: rgba(255,136,0,0.07); border-color: var(--orange-border); }
        .ref-link-text {
            font-size: clamp(11px, 3vw, 12px); color: var(--text2);
            flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        /* ─── PROMO ANIMATION SECTION ─── */

        .promo-section {
            position: relative;
            margin-top: clamp(10px, 3vw, 12px);
        }

        /* The two ref buttons row */
        .ref-btns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(8px, 2.5vw, 12px);
        }

        /* Smooth slide transition on individual buttons */
        #refBtnSend {
            transition: transform 0.42s cubic-bezier(0.55,0,1,0.45),
                        opacity    0.34s ease,
                        visibility 0.42s;
        }
        #copyBtn {
            transition: transform 0.42s cubic-bezier(0.55,0,1,0.45),
                        opacity    0.34s ease 0.04s,
                        visibility 0.42s;
        }

        /* ── Promo input box — hidden by default ── */
        .promo-input-box {
            position: absolute;
            top: 0; left: 0; right: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            opacity: 0;
            transform: scaleX(0.6);
            transform-origin: center center;
            pointer-events: none;
            transition: opacity    0.38s ease,
                        transform  0.44s cubic-bezier(0.34,1.2,0.64,1);
        }

        .promo-code-field {
            flex: 1; min-width: 0;
            background: var(--bg);
            border: 2px solid transparent;
            border-radius: 13px;
            padding: 11px 13px;
            font-size: 14px; font-weight: 600;
            color: var(--text1);
            outline: none;
            font-family: inherit;
            letter-spacing: 0.5px;
            transition: border-color 0.2s;
        }
        .promo-code-field:focus   { border-color: var(--orange); }
        .promo-code-field::placeholder { color: var(--text3); font-weight: 500; letter-spacing: 0; }

        .promo-apply-btn {
            background: var(--orange); color: #fff;
            border: none; border-radius: 13px;
            padding: 11px 15px;
            font-size: 13px; font-weight: 700;
            cursor: pointer; white-space: nowrap;
            font-family: inherit; flex-shrink: 0;
            transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s;
        }
        .promo-apply-btn:hover  { box-shadow: 0 4px 14px rgba(255,136,0,0.38); }
        .promo-apply-btn:active { transform: scale(0.93); }
        .promo-apply-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

        .promo-x-btn {
            width: 36px; height: 36px; flex-shrink: 0;
            background: var(--bg);
            border: none; border-radius: 50%;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: var(--text2);
            transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), background 0.15s;
        }
        .promo-x-btn:active { transform: scale(0.86); background: #e8e8ed; }

        /* Feedback message */
        .promo-feedback {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: max-height 0.38s cubic-bezier(0.34,1.2,0.64,1),
                        opacity    0.28s ease,
                        margin     0.32s ease;
        }
        .promo-feedback.visible {
            max-height: 50px;
            opacity: 1;
            margin-top: 10px;
        }
        .promo-feedback-inner {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: -0.2px;
            animation: feedbackPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        .promo-feedback.ok  .promo-feedback-inner {
            background: rgba(52,199,89,0.12);
            color: #28a046;
        }
        .promo-feedback.err .promo-feedback-inner {
            background: rgba(255,59,48,0.10);
            color: #e0322a;
        }
        .promo-feedback.dev .promo-feedback-inner {
            background: var(--orange-tint);
            color: var(--orange);
            font-family: 'SF Mono', monospace;
            font-size: 12px;
            letter-spacing: 0;
        }
        @keyframes feedbackPop {
            from { transform: scale(0.82); opacity: 0; }
            to   { transform: scale(1);    opacity: 1; }
        }

        /* ── Promo toggle button (full width, below) ── */
        .promo-toggle-btn {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            width: 100%; margin-top: 10px;
            background: var(--orange-tint); color: var(--orange);
            border: none; border-radius: var(--r-sm);
            padding: 13px;
            font-size: 13.5px; font-weight: 700;
            cursor: pointer; font-family: inherit;
            max-height: 60px; overflow: hidden;
            transition: transform     0.17s cubic-bezier(0.34,1.56,0.64,1),
                        opacity       0.3s  ease,
                        max-height    0.38s cubic-bezier(0.55,0,1,0.45),
                        margin-top    0.38s cubic-bezier(0.55,0,1,0.45),
                        padding       0.38s cubic-bezier(0.55,0,1,0.45);
        }
        .promo-toggle-btn:hover  { background: rgba(255,136,0,0.15); }
        .promo-toggle-btn:active { transform: scale(0.96); }

        /* ═══ OPEN STATE — triggered by adding .promo-open to #promoSection ═══ */

        /* Buttons slide APART (send → right, copy → left) */
        #promoSection.promo-open #refBtnSend {
            transform: translateX(calc(100% + 14px));
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        #promoSection.promo-open #copyBtn {
            transform: translateX(calc(-100% - 14px));
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Input EXPANDS from center (same timing = "pushes buttons apart") */
        #promoSection.promo-open .promo-input-box {
            opacity: 1;
            transform: scaleX(1);
            pointer-events: all;
        }

        /* Promo toggle button collapses (CSS sibling selector) */
        #promoSection.promo-open ~ .promo-toggle-btn {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
            margin-top: 0;
            padding-top: 0;
            padding-bottom: 0;
        }
        .ref-btn {
            display: flex; align-items: center; justify-content: center; gap: 5px;
            padding: clamp(10px, 3vw, 12px) 8px;
            border: none; border-radius: clamp(10px, 3vw, 14px); cursor: pointer;
            font-size: clamp(12px, 3.2vw, 13px); font-weight: 600; font-family: inherit;
            white-space: nowrap;
            transition: transform 0.17s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.17s;
        }
        .ref-btn:hover  { transform: translateY(-1px) scale(1.02); }
        .ref-btn:active { transform: scale(0.94); }
        .ref-btn.send { background: var(--orange); color: #fff; box-shadow: 0 4px 12px rgba(255,136,0,0.30); }
        .ref-btn.copy { background: var(--orange-tint); color: var(--orange); }
        .ref-btn.copied { background: rgba(52,199,89,0.12); color: var(--green); }

        /* ─── INSTRUCTIONS ─── */
        .instr-card { animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
        .instr-row {
            display: flex; align-items: center; gap: clamp(10px, 3vw, 12px);
            padding: clamp(12px, 3.5vw, 14px) clamp(14px, 4vw, 20px);
            cursor: pointer; transition: background 0.15s;
        }
        .instr-row + .instr-row { border-top: 1px solid var(--separator); }
        .instr-row:active { background: rgba(0,0,0,0.025); }
        .instr-icon {
            width: clamp(36px, 9vw, 40px);
            height: clamp(36px, 9vw, 40px);
            border-radius: clamp(10px, 2.8vw, 12px);
            background: linear-gradient(135deg, var(--orange) 0%, #ffb347 100%);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .instr-info { flex: 1; min-width: 0; }
        .instr-name { font-size: clamp(13px, 3.5vw, 14px); font-weight: 600; color: var(--text1); }
        .instr-sub { font-size: clamp(11px, 3vw, 12px); color: var(--text2); margin-top: 2px; }
        .chevron-btn {
            width: 24px; height: 24px;
            background: #f2f2f7; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }

        /* ─── FOOTER ─── */
        footer {
            text-align: center;
            padding: 4px 0 8px;
            font-size: clamp(11px, 3vw, 12px);
            color: var(--text3);
            animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.33s both;
        }
        footer .support { color: var(--orange); cursor: pointer; }

        /* ─── MODAL SHEET ─── */
        .overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.40);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            z-index: 500;
            display: flex; align-items: flex-end; justify-content: center;
            opacity: 0; pointer-events: none;
            transition: opacity 0.28s ease;
        }
        .overlay.open { opacity: 1; pointer-events: all; }

        .sheet {
            background: var(--card);
            border-radius: 24px 24px 0 0;
            width: 100%; max-width: 480px;
            padding: 8px clamp(16px, 5vw, 24px) max(calc(var(--sab) + 24px), 40px);
            transform: translateY(100%);
            transition: transform 0.38s cubic-bezier(0.32,1.18,0.64,1);
            max-height: 92vh;
            overflow-y: auto;
        }
        .overlay.open .sheet { transform: translateY(0); }

        .sheet-handle {
            width: 36px; height: 4px;
            background: #e5e5ea; border-radius: 2px;
            margin: 10px auto 20px;
        }
        .sheet-title { font-size: clamp(17px, 5vw, 20px); font-weight: 700; letter-spacing: -0.4px; margin-bottom: 16px; }

        .amount-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
        .amt-btn {
            background: #f2f2f7; border: 2px solid transparent;
            border-radius: 14px; padding: 14px 10px;
            cursor: pointer; text-align: center; color: var(--text1);
            font-family: inherit; display: flex; flex-direction: column;
            align-items: center; gap: 3px;
            transition: all 0.15s cubic-bezier(0.34,1.56,0.64,1);
        }
        .amt-btn.sel { background: rgba(255,136,0,0.10); border-color: var(--orange); }
        .amt-btn.sel .plan-price { color: var(--orange); }
        .amt-btn.sel .plan-label { color: var(--orange); }
        .amt-btn.sel .plan-per { color: rgba(255,136,0,0.65); }
        .amt-btn:active { transform: scale(0.94); }
        .plan-label { font-size: clamp(10px,2.8vw,11px); font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.4px; }
        .plan-price { font-size: clamp(18px,5vw,22px); font-weight: 800; color: var(--text1); letter-spacing: -0.5px; line-height:1; }
        .plan-per   { font-size: clamp(10px,2.7vw,11px); color: var(--text3); }
        .plan-save  { font-size: 10px; font-weight: 700; background: rgba(52,199,89,0.14); color: #34c759; padding: 2px 7px; border-radius: 8px; margin-top: 2px; }

        /* Device type selector */
        .dev-type-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 16px; }
        .dev-type-btn {
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            padding: 10px 4px; border-radius: 12px; border: 2px solid transparent;
            background: var(--bg); cursor: pointer; font-size: 11px; color: var(--text2);
            font-weight: 500; font-family: inherit;
            transition: all 0.15s cubic-bezier(0.34,1.56,0.64,1);
        }
        .dev-type-btn.active { border-color: var(--orange); background: var(--orange-tint); color: var(--orange); }
        .dev-type-btn:active { transform: scale(0.92); }

        /* Key display */
        /* ── Key modal redesign ── */
        .key-sheet { padding-bottom: max(var(--tg-bottom), var(--sab), 32px); }

        .key-dev-header {
            display: flex; align-items: center; gap: 14px;
            padding: 4px 0 20px;
        }
        .key-dev-avatar {
            width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        }
        .key-dev-avatar.ios    { background: linear-gradient(135deg,#1c1c1e,#3a3a3c); }
        .key-dev-avatar.android{ background: linear-gradient(135deg,#34A853,#1a7f37); }
        .key-dev-avatar.windows{ background: linear-gradient(135deg,#0078d4,#005a9e); }
        .key-dev-avatar.macos  { background: linear-gradient(135deg,#1c1c1e,#3a3a3c); }
        .key-dev-avatar.tv     { background: linear-gradient(135deg,#5a5a8a,#3a3a6e); }
        .key-dev-avatar.other  { background: linear-gradient(135deg,#8e8e93,#636366); }
        .key-dev-name { font-size: 20px; font-weight: 800; color: var(--text1); letter-spacing: -0.4px; }
        .key-dev-sub  { font-size: 13px; color: var(--text2); margin-top: 3px; font-weight: 500; }

        .key-section-label {
            font-size: 11px; font-weight: 700; color: var(--text3);
            text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;
        }

        .key-display {
            background: var(--bg); border-radius: 16px; padding: 14px 16px;
            margin-bottom: 12px; cursor: pointer;
            border: 1.5px solid transparent;
            transition: border-color 0.2s ease, background 0.18s ease;
            position: relative; overflow: hidden;
        }
        .key-display:active { background: rgba(255,136,0,0.06); }
        .key-display.copied { border-color: var(--green); background: rgba(52,199,89,0.07); }
        .key-display.flash  {
            animation: keyFlash 0.45s cubic-bezier(0.34,1.2,0.64,1);
        }
        @keyframes keyFlash {
            0%   { transform: scale(1); }
            40%  { transform: scale(0.97); }
            100% { transform: scale(1); }
        }
        .key-text {
            font-size: 11px; color: var(--orange); font-weight: 600;
            word-break: break-all; line-height: 1.6;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
            font-family: 'SF Mono', 'Menlo', monospace;
            letter-spacing: 0.2px;
        }
        .key-display.copied .key-text { color: var(--green); }
        .key-copy-hint {
            display: flex; align-items: center; gap: 5px;
            font-size: 11.5px; color: var(--text3); margin-top: 7px; font-weight: 500;
            transition: color 0.2s;
        }
        .key-display.copied .key-copy-hint { color: var(--green); }

        .qr-toggle-btn {
            width: 100%; background: var(--orange-tint); color: var(--orange);
            border: none; border-radius: 14px; padding: 13px 16px;
            font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), background 0.15s;
            margin-top: 0;
        }
        .qr-toggle-btn:hover { background: rgba(255,136,0,0.15); }
        .qr-toggle-btn:active { transform: scale(0.96); }
        #qrChevron { font-size: 12px; transition: transform 0.28s cubic-bezier(0.34,1.2,0.64,1); }
        #qrChevron.open { transform: rotate(180deg); }

        .qr-wrap {
            display: flex; flex-direction: column; align-items: center;
            padding: 18px 0 6px;
            animation: fadeUp 0.35s cubic-bezier(0.22,1,0.36,1) both;
        }
        .qr-wrap img { width: 186px; height: 186px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.10); }
        .qr-hint { font-size: 12px; color: var(--text2); margin-top: 10px; text-align: center; }

        .add-dev-label { font-size: 13px; color: var(--text2); margin-bottom: 10px; font-weight: 500; }
        .add-dev-note { font-size: 13px; color: #ff3b30; min-height: 18px; margin-bottom: 10px; text-align: center; }

        .custom-input {
            width: 100%; background: #f2f2f7;
            border: 2px solid transparent; border-radius: 13px;
            padding: clamp(12px, 3.5vw, 14px) clamp(12px, 3.5vw, 16px);
            font-size: clamp(14px, 4vw, 15px); font-weight: 600;
            color: var(--text1); outline: none; margin-bottom: 14px;
            font-family: inherit;
            transition: border-color 0.2s;
        }
        .custom-input:focus { border-color: var(--orange); }
        .custom-input::placeholder { color: var(--text3); font-weight: 500; }

        .pay-note { font-size: clamp(11px, 3vw, 12px); color: var(--text3); text-align: center; margin-bottom: 14px; line-height: 1.4; }

        .main-btn {
            background: var(--orange); color: #fff;
            border: none; border-radius: 16px; padding: clamp(14px, 4vw, 16px);
            font-size: clamp(14px, 4vw, 16px); font-weight: 700; width: 100%; cursor: pointer;
            letter-spacing: -0.2px; font-family: inherit;
            transition: transform 0.17s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.17s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .main-btn:hover { box-shadow: 0 6px 22px rgba(255,136,0,0.42); }
        .main-btn:active { transform: scale(0.964); }
        .main-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

        /* History */
        .hist-item {
            display: flex; align-items: center; gap: 12px;
            padding: clamp(11px, 3vw, 13px) 0;
            border-bottom: 1px solid #f2f2f7;
        }
        .hist-item:last-child { border-bottom: none; }
        .hist-icon {
            width: 38px; height: 38px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 15px; flex-shrink: 0;
        }
        .hist-icon.inc { background: rgba(52,199,89,0.12); }
        .hist-icon.exp { background: rgba(255,59,48,0.10); }
        .hist-info { flex: 1; min-width: 0; }
        .hist-desc { font-size: clamp(13px, 3.5vw, 14px); font-weight: 600; }
        .hist-date { font-size: clamp(11px, 3vw, 12px); color: var(--text2); margin-top: 2px; }
        .hist-amt { font-size: clamp(13px, 3.8vw, 15px); font-weight: 800; flex-shrink: 0; }
        .hist-amt.inc { color: #34C759; }
        .hist-amt.exp { color: #FF3B30; }

        /* ─── TOAST ─── */
        .toast {
            position: fixed; bottom: max(calc(var(--sab) + 20px), 32px); left: 50%;
            transform: translateX(-50%) translateY(14px);
            background: rgba(28,28,30,0.88);
            color: #fff; padding: 10px 20px; border-radius: 22px;
            font-size: clamp(13px, 3.5vw, 14px); font-weight: 600;
            opacity: 0; transition: all 0.32s cubic-bezier(0.34,1.56,0.64,1);
            z-index: 9999; pointer-events: none;
            white-space: nowrap; backdrop-filter: blur(12px);
            max-width: calc(100vw - 40px); text-align: center;
            white-space: normal; text-align: center;
        }
        .toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* ─── SPINNER ─── */
        .spinner {
            width: 18px; height: 18px;
            border: 2.5px solid rgba(255,255,255,0.4);
            border-top-color: #fff; border-radius: 50%;
            animation: spin 0.7s linear infinite;
            display: inline-block;
        }

        /* ─── KEYFRAMES ─── */
        @keyframes fromTop {
            from { opacity: 0; transform: translateY(-12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes bannerOut {
            to { opacity: 0; transform: translateY(-8px) scale(0.97); max-height: 0; padding: 0; margin: 0; border-width: 0; }
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ─── VERY SMALL SCREENS (< 360px) ─── */
        @media (max-width: 359px) {
            .ref-btns { grid-template-columns: 1fr; }
            .ref-btn { justify-content: center; }
            .amount-grid { grid-template-columns: repeat(2,1fr); }
            .balance-amount { font-size: 28px; letter-spacing: -1px; }
        }

        /* ─── LANDSCAPE (override top-safe for landscape) ─── */
        @media (orientation: landscape) and (max-height: 500px) {
            .header { padding-top: 10px; padding-bottom: 8px; }
            .content { gap: 8px; }
            .balance-card { padding: 12px 16px; }
            .balance-amount { font-size: 26px; }
            .act-btn { padding: 10px 8px; min-height: 64px; }
        }

        svg { display: block; }

        /* ═══════════════════════════════════════
           DEVICE MANAGEMENT MODAL (centered)
           ═══════════════════════════════════════ */
        .mgmt-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.44);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            z-index: 700;
            display: flex; align-items: center; justify-content: center;
            padding: clamp(16px,4vw,24px);
            opacity: 0; pointer-events: none;
            transition: opacity 0.28s ease;
        }
        .mgmt-overlay.open { opacity: 1; pointer-events: all; }

        .mgmt-dialog {
            background: var(--card);
            border-radius: 24px;
            width: 100%; max-width: 440px;
            max-height: 78vh;
            overflow: hidden;
            display: flex; flex-direction: column;
            box-shadow: 0 24px 80px rgba(0,0,0,0.22);
            transform: scale(0.86) translateY(20px);
            opacity: 0;
            transition: transform 0.44s cubic-bezier(0.34,1.2,0.64,1),
                        opacity    0.3s  ease;
        }
        .mgmt-overlay.open .mgmt-dialog {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        /* Header */
        .mgmt-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px 20px 16px;
            border-bottom: 1px solid var(--separator);
            flex-shrink: 0;
        }
        .mgmt-title {
            font-size: 17px; font-weight: 800;
            color: var(--text1); letter-spacing: -0.3px;
        }
        .mgmt-close {
            width: 30px; height: 30px;
            background: var(--bg); border: none; border-radius: 50%;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            color: var(--text2);
            transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), background 0.15s;
        }
        .mgmt-close:active { transform: scale(0.86); background: #e0e0e6; }

        /* Scrollable list */
        .mgmt-list { overflow-y: auto; padding: 8px 0 8px; flex: 1; }

        /* Empty / loading */
        .mgmt-empty {
            padding: 36px 20px; text-align: center;
            font-size: 14px; color: var(--text2); line-height: 1.5;
        }
        .mgmt-loading { padding: 32px; display: flex; justify-content: center; }

        /* Device card row */
        .mgmt-card {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 20px;
            border-bottom: 1px solid var(--separator);
            transition: background 0.15s, opacity 0.3s, max-height 0.3s ease;
            overflow: hidden;
        }
        .mgmt-card:last-child { border-bottom: none; }
        .mgmt-card:active { background: rgba(0,0,0,0.025); }

        .mgmt-dev-icon {
            width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
        }
        .mgmt-dev-icon.ios    { background: linear-gradient(135deg,#1c1c1e,#3a3a3c); }
        .mgmt-dev-icon.android{ background: linear-gradient(135deg,#34A853,#1a7f37); }
        .mgmt-dev-icon.windows{ background: linear-gradient(135deg,#0078d4,#005a9e); }
        .mgmt-dev-icon.macos  { background: linear-gradient(135deg,#1c1c1e,#3a3a3c); }
        .mgmt-dev-icon.tv     { background: linear-gradient(135deg,#5a5a8a,#3a3a6e); }
        .mgmt-dev-icon.other  { background: linear-gradient(135deg,#8e8e93,#636366); }

        .mgmt-dev-info { flex: 1; min-width: 0; }
        .mgmt-dev-name { font-size: 14px; font-weight: 600; color: var(--text1);
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mgmt-dev-status {
            font-size: 12px; font-weight: 500;
            margin-top: 3px; display: flex; align-items: center; gap: 5px;
        }
        .mgmt-dev-status.active { color: var(--green); }
        .mgmt-dev-status.paused { color: var(--text3); }
        .mgmt-status-dot {
            width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
        }
        .active .mgmt-status-dot { background: var(--green); }
        .paused .mgmt-status-dot { background: var(--text3); }

        /* ── iOS-style toggle switch ── */
        .dev-toggle {
            position: relative;
            width: 48px; height: 28px; flex-shrink: 0;
            background: #e5e5ea;
            border-radius: 14px;
            border: none; cursor: pointer; outline: none;
            transition: background 0.28s ease;
        }
        .dev-toggle.on { background: var(--orange); }
        .dev-toggle::after {
            content: '';
            position: absolute;
            top: 3px; left: 3px;
            width: 22px; height: 22px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.20);
            transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
        }
        .dev-toggle.on::after { transform: translateX(20px); }
        .dev-toggle:disabled { opacity: 0.5; cursor: not-allowed; }

        /* ── Delete button (red trash) ── */
        .dev-del {
            width: 36px; height: 36px; flex-shrink: 0;
            background: rgba(255,59,48,0.09);
            border: none; border-radius: 10px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: #ff3b30;
            transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
                        background 0.15s;
        }
        .dev-del:hover  { background: rgba(255,59,48,0.16); }
        .dev-del:active { transform: scale(0.86); }

        /* ─── TOP PAYMENT NOTIFICATION ─── */
        .pay-notif {
            position: fixed;
            /* Hidden: starts off-screen above */
            top: -200px;
            left: 50%; transform: translateX(-50%);
            width: calc(100% - 32px);
            max-width: 448px;
            background: #1c1c1e;
            border-radius: 18px;
            padding: 14px 16px;
            display: flex; align-items: center; gap: 13px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.35);
            z-index: 9999;
            transition: top 0.45s cubic-bezier(0.34,1.2,0.64,1);
            pointer-events: none;
        }
        .pay-notif.show {
            /* Sits right below the spacer + a small gap */
            top: calc(var(--top-safe) + 12px);
            pointer-events: all;
        }
        .pay-notif-ico {
            width: 42px; height: 42px; flex-shrink: 0;
            background: linear-gradient(135deg, #34c759, #28a046);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
        }
        .pay-notif-body { flex: 1; min-width: 0; }
        .pay-notif-title {
            font-size: 14px; font-weight: 700;
            color: #fff; margin-bottom: 2px;
        }
        .pay-notif-sub {
            font-size: 12.5px; color: rgba(255,255,255,0.65);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .pay-notif-close {
            width: 22px; height: 22px;
            background: rgba(255,255,255,0.12);
            border: none; border-radius: 50%; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; transition: background 0.15s;
        }
        .pay-notif-close:active { background: rgba(255,255,255,0.22); }

        /* Progress bar that shrinks as auto-dismiss counts down */
        .pay-notif-bar {
            position: absolute; bottom: 0; left: 0;
            height: 3px; background: #34c759;
            border-radius: 0 0 18px 18px;
            width: 100%;
            transition: width linear;
        }