:root {
    --bg: #070d18;
    --panel: #101a2c;
    --panel2: #142039;
    --border: #23324d;

    --text: #f1f5ff;
    --muted: #8997b3;

    --blue: #4d84ff;
    --green: #45d99e;
    --yellow: #f2b64c;
    --red: #ef6579;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;

    min-height: 100%;

    color: var(--text);
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(42, 82, 160, .15),
            transparent 34%
        ),
        var(--bg);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    min-height: 100vh;
}

button {
    font: inherit;
}

.hidden {
    display: none !important;
}

.app-shell {
    width: min(100%, 520px);

    min-height: 100vh;

    margin: 0 auto;

    padding:
        14px
        12px
        calc(76px + env(safe-area-inset-bottom, 0px));
}

.app-top {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 18px;
}

.app-top > div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.app-top strong {
    font-size: 18px;
}

.app-top span {
    color: var(--muted);

    font-size: 10px;
}

.status-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #536177;

    box-shadow:
        0 0 0 4px rgba(83, 97, 119, .12);
}

.status-dot.ok {
    background: var(--green);

    box-shadow:
        0 0 0 4px rgba(69, 217, 158, .11);
}

.hero {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 14px;

    margin-bottom: 11px;
}

.eyebrow {
    display: block;

    margin-bottom: 4px;

    color: #7184a8;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}

.hero h1 {
    margin: 0;

    font-size: 26px;
    line-height: 1;
}

.access-pill,
.count-pill {
    flex: 0 0 auto;

    padding: 4px 8px;

    border-radius: 999px;

    color: var(--muted);
    background: rgba(120, 145, 190, .11);

    font-size: 9px;
}

.access-pill.ok {
    color: #77e8ba;
    background: rgba(69, 217, 158, .13);
}

.access-pill.wait {
    color: #f6c87f;
    background: rgba(242, 182, 76, .13);
}

.overview-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-bottom: 8px;
}

.mini-card,
.panel {
    background:
        linear-gradient(
            145deg,
            rgba(17, 28, 49, .98),
            rgba(12, 22, 39, .98)
        );

    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);

    border-radius: 12px;
}

.mini-card {
    padding: 9px 10px;
}

.mini-card span {
    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: 9px;
}

.mini-card strong {
    font-size: 17px;
}

.panel {
    margin-bottom: 8px;

    padding: 10px;
}

.panel-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;
}

.panel h2 {
    margin: 0;

    font-size: 17px;
}

.panel p {
    margin: 7px 0 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.4;
}

.device-symbol {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    flex: 0 0 auto;

    color: #8cacff;
    background: rgba(77, 132, 255, .14);

    border-radius: 9px;

    font-size: 15px;
}

.devices-list {
    display: grid;

    gap: 6px;

    margin-top: 8px;
}

.device-row {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    min-height: 45px;

    padding: 6px 7px;

    background: rgba(21, 33, 56, .75);

    border: 1px solid rgba(107, 137, 191, .14);
    border-radius: 9px;
}

.device-row.current {
    border-color: rgba(77, 132, 255, .45);

    background:
        linear-gradient(
            90deg,
            rgba(77, 132, 255, .12),
            rgba(21, 33, 56, .76)
        );
}

.device-row-icon {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    color: #91aff0;

    background: rgba(70, 108, 180, .12);

    border-radius: 8px;
}

.device-row strong {
    display: block;

    margin-bottom: 2px;

    font-size: 12px;
}

.device-row small {
    display: block;

    color: var(--muted);

    font-size: 8px;
}

.device-state {
    padding: 3px 6px;

    color: #78e7ba;
    background: rgba(69, 217, 158, .12);

    border-radius: 999px;

    font-size: 8px;
}

.device-state.revoked {
    color: #ff9caf;
    background: rgba(239, 101, 121, .12);
}

.recovery-item {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 8px;

    margin-top: 6px;

    padding: 7px 8px;

    background: rgba(77, 132, 255, .08);

    border: 1px solid rgba(77, 132, 255, .16);
    border-radius: 8px;
}

.recovery-item strong {
    font-size: 11px;
}

.recovery-item span {
    color: var(--muted);

    font-size: 8px;
}

.limit-panel {
    border-left-color: var(--yellow);
}

.limit-panel h2 {
    color: #f4ca7c;
}

.bottom-nav {
    position: fixed;

    left: 50%;
    bottom: 0;

    z-index: 50;

    width: min(100%, 520px);

    transform: translateX(-50%);

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    padding:
        5px
        6px
        calc(5px + env(safe-area-inset-bottom, 0px));

    background: rgba(7, 13, 24, .97);

    border-top: 1px solid var(--border);

    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
}

.bottom-item {
    display: flex;

    min-height: 47px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    color: var(--muted);
    background: transparent;

    border: 0;
    border-radius: 9px;

    font-size: 9px;
}

.bottom-item.active {
    color: #a8c0ff;

    background: rgba(77, 132, 255, .12);
}

.nav-icon {
    font-size: 16px;
}

.app-loader,
.outside-telegram {
    min-height: 100vh;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px;

    text-align: center;
}

.app-loader strong {
    margin-top: 10px;

    font-size: 17px;
}

.app-loader span,
.outside-card p {
    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;
}

.loader-ring {
    width: 30px;
    height: 30px;

    border: 3px solid rgba(100, 135, 195, .17);
    border-top-color: var(--blue);

    border-radius: 50%;

    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.outside-card {
    width: min(100%, 340px);

    padding: 20px;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 14px;
}

.outside-card strong {
    font-size: 19px;
}

/* ==========================================================
   PHASE 4C — DEVICE ACTIONS
   ========================================================== */

.current-device-actions {
    display: grid;

    gap: 6px;

    margin-top: 9px;
}

.current-device-actions:empty {
    display: none;
}

.device-primary-action,
.device-secondary-action {
    width: 100%;

    min-height: 39px;

    padding: 7px 10px;

    border: 0;
    border-radius: 9px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.device-primary-action {
    color: #eef4ff;

    background:
        linear-gradient(
            135deg,
            #356ff0,
            #4d84ff
        );
}

.device-secondary-action {
    color: #b9ccf4;

    background:
        rgba(71, 102, 160, .20);

    border:
        1px solid rgba(102, 134, 190, .18);
}

.device-primary-action:disabled,
.device-secondary-action:disabled {
    cursor: wait;
    opacity: .65;
}

.action-result {
    padding: 7px 8px;

    border-radius: 8px;

    font-size: 10px;
    line-height: 1.35;
}

.action-result.success {
    color: #7ce5b9;
    background: rgba(69, 217, 158, .10);
}

.action-result.error {
    color: #ff9cad;
    background: rgba(239, 101, 121, .10);
}

.recovery-item {
    cursor: pointer;
}

.recovery-item-action {
    flex: 0 0 auto;

    padding: 4px 7px;

    color: #9bb9ff;
    background: rgba(77, 132, 255, .12);

    border: 1px solid rgba(77, 132, 255, .18);
    border-radius: 7px;

    font-size: 8px;
    font-weight: 700;
}

/* ==========================================================
   PHASE 4D — CONNECTION
   ========================================================== */

.connection-ready-note {
    display: flex;

    align-items: center;
    gap: 6px;

    color: #78e7ba;

    font-size: 9px;
}

.connection-ready-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    background: #45d99e;

    border-radius: 50%;

    box-shadow:
        0 0 0 3px rgba(69, 217, 158, .10);
}

.device-connection-button {
    width: 100%;

    min-height: 39px;

    padding: 7px 10px;

    color: #edf4ff;

    background:
        linear-gradient(
            135deg,
            #356ff0,
            #4d84ff
        );

    border: 0;
    border-radius: 9px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.device-connection-button.copied {
    color: #7ce5b9;

    background:
        rgba(69, 217, 158, .14);

    border:
        1px solid rgba(69, 217, 158, .20);
}

.device-connection-button:disabled {
    opacity: .65;
    cursor: wait;
}

/* ==========================================================
   PHASE 4E — INSTRUCTION
   ========================================================== */

.app-shell.instruction-mode > .hero,
.app-shell.instruction-mode > .overview-grid,
.app-shell.instruction-mode > .panel {
    display: none !important;
}

.app-shell.instruction-mode > #instruction-page {
    display: block !important;
}

.instruction-page {
    padding-bottom: 8px;
}

.instruction-title {
    margin-bottom: 12px;
}

.instruction-title h1 {
    margin: 0;

    font-size: 25px;
    line-height: 1.1;
}

.instruction-title p {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

.instruction-device-line {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}

.instruction-device-line strong {
    font-size: 17px;
}

#instruction-device-icon {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    color: #8cacff;
    background: rgba(77, 132, 255, .14);

    border-radius: 9px;
}

.instruction-download,
.instruction-home {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 42px;

    padding: 8px 12px;

    color: #f4f7ff;
    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #356ff0,
            #4d84ff
        );

    border: 0;
    border-radius: 9px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.instruction-home {
    margin-top: 8px;
}

.instruction-steps {
    display: grid;

    gap: 4px;
}

.instruction-step {
    display: grid;

    grid-template-columns:
        27px
        minmax(0, 1fr);

    gap: 8px;

    align-items: start;

    padding: 8px 0;

    border-bottom:
        1px solid
        rgba(110, 135, 180, .10);
}

.instruction-step:last-child {
    border-bottom: 0;
}

.instruction-step > b {
    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    color: #9db7ff;
    background: rgba(77, 132, 255, .13);

    border-radius: 8px;

    font-size: 10px;
}

.instruction-step strong {
    display: block;

    margin-bottom: 2px;

    font-size: 11px;
}

.instruction-step span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.4;
}

/* ==========================================================
   PHASE 4F — USER APP NAVIGATION
   ========================================================== */

.device-action-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 6px;

    width: 100%;
}

.device-refresh-button {
    min-height: 39px;

    padding: 7px 8px;

    color: #eafff6;

    background:
        linear-gradient(
            135deg,
            #159c6c,
            #38c995
        );

    border: 0;
    border-radius: 9px;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.device-action-row
.device-connection-button {
    min-width: 0;

    padding-left: 5px;
    padding-right: 5px;

    font-size: 10px;
}

.device-refresh-button:disabled {
    opacity: .65;

    cursor: wait;
}


/* Subscription */

.app-shell.subscription-mode > .hero,
.app-shell.subscription-mode > .overview-grid,
.app-shell.subscription-mode > .panel,
.app-shell.subscription-mode > #instruction-page {
    display: none !important;
}

.app-shell.subscription-mode
> #subscription-page {
    display: block !important;
}

.subscription-page {
    padding-bottom: 8px;
}

.subscription-current-line {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.subscription-current-line strong {
    font-size: 20px;
}

.subscription-current-line span {
    padding: 4px 8px;

    color: #9eb8ff;

    background:
        rgba(77, 132, 255, .13);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
}

.subscription-plans {
    display: grid;

    gap: 7px;
}

.subscription-plan-card {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 28, 49, .98),
            rgba(12, 22, 39, .98)
        );

    border:
        1px solid
        var(--border);

    border-left:
        3px solid
        var(--blue);

    border-radius: 12px;
}

.subscription-plan-card strong {
    font-size: 13px;
}

.subscription-plan-card span {
    color: var(--muted);

    font-size: 10px;
}

/* ==========================================================
   VPN TRAFFIC CARDS
   ========================================================== */

.traffic-card strong {
    font-size: 16px;
    white-space: nowrap;
}

.traffic-card:nth-child(3) {
    border-left-color: var(--green);
}

.traffic-card:nth-child(4) {
    border-left-color: #7fa6ff;
}

/* ==========================================================
   PHASE 4H — QR MODAL
   ========================================================== */

.device-qr-button {
    width: 100%;
    min-height: 39px;

    padding: 7px 10px;

    color: #b9ccf4;
    background: rgba(71, 102, 160, .18);

    border:
        1px solid
        rgba(102, 134, 190, .18);

    border-radius: 9px;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.device-qr-button:disabled {
    opacity: .65;
    cursor: wait;
}


.qr-modal {
    position: fixed;

    inset: 0;

    z-index: 500;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    padding:
        16px
        12px
        calc(
            16px
            + env(
                safe-area-inset-bottom,
                0px
            )
        );
}

.qr-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0, 5, 14, .76);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.qr-modal-card {
    position: relative;

    z-index: 1;

    width: min(100%, 420px);

    padding:
        9px
        15px
        15px;

    color: var(--text);

    background:
        linear-gradient(
            145deg,
            #142039,
            #0c1627
        );

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .45);

    text-align: center;
}

.qr-modal-handle {
    width: 34px;
    height: 4px;

    margin:
        0 auto
        12px;

    background:
        rgba(150, 170, 205, .26);

    border-radius: 999px;
}

.qr-modal-card .eyebrow {
    text-align: left;
}

.qr-modal-card h2 {
    margin:
        2px 0
        3px;

    font-size: 20px;
}

.qr-modal-device {
    margin:
        0 0
        11px;

    color: var(--muted);

    font-size: 10px;
}

.qr-code-shell {
    display: flex;

    justify-content: center;
    align-items: center;

    width: fit-content;

    min-width: 226px;
    min-height: 226px;

    margin:
        0 auto
        11px;

    padding: 9px;

    background: #fff;

    border-radius: 12px;
}

#qr-code {
    line-height: 0;
}

#qr-code img,
#qr-code canvas {
    display: block !important;

    width: 208px !important;
    height: 208px !important;
}

.qr-modal-help {
    max-width: 310px;

    margin:
        0 auto
        7px;

    color: #aebbd2;

    font-size: 10px;
    line-height: 1.45;
}

.qr-modal-warning {
    margin:
        0 auto
        12px;

    color: #7184a8;

    font-size: 8px;
}

.qr-modal-close {
    width: 100%;
    min-height: 40px;

    color: #edf4ff;

    background:
        rgba(77, 132, 255, .18);

    border:
        1px solid
        rgba(77, 132, 255, .24);

    border-radius: 9px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

/* ==========================================================
   QR CANVAS FIX
   Keep only the actual canvas generated by QRCode.js.
   ========================================================== */

.qr-code-shell {
    width: 226px !important;
    height: 226px !important;

    min-width: 226px !important;
    min-height: 226px !important;
    max-width: 226px !important;
    max-height: 226px !important;

    overflow: hidden !important;
}

#qr-code {
    width: 208px !important;
    height: 208px !important;

    overflow: hidden !important;
}

#qr-code canvas {
    display: block !important;

    width: 208px !important;
    height: 208px !important;
}

#qr-code img {
    display: none !important;
}

/* ==========================================================
   FINAL SAFE ROTATION UI
   ========================================================== */

.device-action-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.14fr)
        50px !important;

    gap: 6px !important;
}


.device-refresh-button,
.device-connection-button,
.device-qr-button {
    width: 100% !important;
    min-width: 0 !important;

    min-height: 40px !important;

    padding:
        7px 5px !important;

    margin: 0 !important;

    border-radius:
        10px !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    white-space:
        nowrap !important;
}


.device-refresh-button {
    color:
        #effff9 !important;

    background:
        linear-gradient(
            135deg,
            #159c6c,
            #38c995
        ) !important;

    border:
        0 !important;
}


.device-connection-button {
    color:
        #f1f5ff !important;

    background:
        linear-gradient(
            135deg,
            #356ff0,
            #4d84ff
        ) !important;

    border:
        0 !important;
}


.device-qr-button {
    color:
        #d6dce7 !important;

    background:
        rgba(
            125,
            139,
            162,
            .20
        ) !important;

    border:
        1px solid
        rgba(
            153,
            164,
            184,
            .18
        ) !important;
}


/* Safe pending rotation */

.safe-rotation-card {
    display: grid;

    gap: 7px;

    margin-top: 7px;

    padding: 10px;

    background:
        rgba(38,55,87,.36);

    border:
        1px solid
        rgba(85,126,205,.22);

    border-radius: 11px;
}


.safe-rotation-card > strong {
    font-size: 12px;
}


.safe-rotation-card > span {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.45;
}


.safe-rotation-card > small {
    color: #8ea3c8;

    font-size: 8px;
}


.safe-rotation-card > small.tested {
    color: #65dda8;
}


.rotation-key-row {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        50px;

    gap: 6px;
}


.rotation-copy-button,
.rotation-qr-button,
.rotation-confirm-button,
.rotation-cancel-button {
    min-height: 39px;

    border-radius: 9px;

    font-size: 9px;
    font-weight: 700;
}


.rotation-copy-button {
    color: #eef4ff;

    background:
        linear-gradient(
            135deg,
            #356ff0,
            #4d84ff
        );

    border: 0;
}


.rotation-qr-button {
    color: #d6dce7;

    background:
        rgba(125,139,162,.20);

    border:
        1px solid
        rgba(153,164,184,.18);
}


.rotation-confirm-button {
    color: #effff9;

    background:
        linear-gradient(
            135deg,
            #159c6c,
            #38c995
        );

    border: 0;
}


.rotation-cancel-button {
    color: #aab7cc;

    background:
        rgba(108,125,151,.10);

    border:
        1px solid
        rgba(135,150,174,.14);
}


/* QR: no white tail */

.qr-code-shell {
    width: 226px !important;
    height: 226px !important;

    min-width: 226px !important;
    min-height: 226px !important;

    max-width: 226px !important;
    max-height: 226px !important;

    overflow: hidden !important;
}


#qr-code {
    width: 208px !important;
    height: 208px !important;

    overflow: hidden !important;
}


#qr-code canvas {
    display: block !important;

    width: 208px !important;
    height: 208px !important;
}


#qr-code img {
    display: none !important;
}


/* QR Close = light red */

.qr-modal-close {
    color:
        #ffb4be !important;

    background:
        rgba(239,101,121,.13)
        !important;

    border:
        1px solid
        rgba(239,101,121,.24)
        !important;
}


/* Telegram-like text-only navigation */

.bottom-nav {
    position: fixed !important;

    left: 50% !important;

    bottom:
        calc(
            8px
            + env(
                safe-area-inset-bottom,
                0px
            )
        ) !important;

    z-index: 100 !important;

    transform:
        translateX(-50%) !important;

    width:
        calc(
            min(100%,520px)
            - 18px
        ) !important;

    display: grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    gap: 4px !important;

    padding: 5px !important;

    background:
        rgba(17,27,45,.97)
        !important;

    border:
        1px solid
        rgba(137,155,186,.18)
        !important;

    border-radius:
        999px !important;

    box-shadow:
        0 10px 32px
        rgba(0,0,0,.34)
        !important;

    backdrop-filter:
        blur(18px) !important;

    -webkit-backdrop-filter:
        blur(18px) !important;
}


.bottom-item {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;

    padding:
        0 7px !important;

    color:
        #8e9bb3 !important;

    background:
        transparent !important;

    border: 0 !important;

    border-radius:
        999px !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    white-space:
        nowrap !important;
}


.bottom-item.active {
    color:
        #e1eaff !important;

    background:
        rgba(77,132,255,.18)
        !important;
}


.nav-icon {
    display: none !important;
}


.app-shell {
    padding-bottom:
        calc(
            88px
            + env(
                safe-area-inset-bottom,
                0px
            )
        ) !important;
}