/* ═══════════════════════════════════════════
   PANEL PAGE  —  dark design consistent with home
   ═══════════════════════════════════════════ */

.panel-body {
    margin: 0;
    background: #0d0d1a;
    color: #fff;
    font-family: var(--font-base);
    min-height: 100vh;
}


/* ── AUTH SCREEN ── */
.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    position: relative;
}

.auth-screen__bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, #0d0d1a 0%, #101025 55%, #14102e 100%);
    z-index: 0;
}

.auth-screen__bg::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(239,90,58,0.08) 0%, transparent 70%);
}

.auth-screen__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: rgba(255,255,255,0.04);
    border: 0.5px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.auth-screen__logo {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: #fff;
    text-align: center;
    margin-bottom: var(--space-xs);
    letter-spacing: -0.5px;
}

.auth-screen__logo span { color: var(--color-primary); }

.auth-screen__tagline {
    text-align: center;
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.35);
    margin-bottom: var(--space-xl);
}

.auth-status {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    text-align: center;
    margin-bottom: var(--space-md);
}

.auth-status.hidden { display: none; }
.auth-status.success { background: rgba(34,197,94,0.12); color: #4ade80; border: 0.5px solid rgba(34,197,94,0.25); }
.auth-status.error   { background: rgba(239,68,68,0.12);  color: #f87171; border: 0.5px solid rgba(239,68,68,0.25); }
.auth-status.info    { background: rgba(99,102,241,0.12); color: #a5b4fc; border: 0.5px solid rgba(99,102,241,0.25); }


/* AUTH TABS */
.auth-tabs {
    display: flex;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: var(--space-xl);
    gap: 3px;
}

.auth-tab {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    background: transparent;
    color: rgba(255,255,255,0.4);
}

.auth-tab.active {
    background: rgba(255,255,255,0.10);
    color: #fff;
}


/* AUTH FORM */
.auth-form { display: flex; flex-direction: column; gap: var(--space-md); }
.auth-form.hidden { display: none; }

.auth-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.auth-form__group label {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
}

.auth-form__group input {
    height: 44px;
    padding-inline: var(--space-md);
    background: rgba(255,255,255,0.06);
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: #fff;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.auth-form__group input::placeholder { color: rgba(255,255,255,0.22); }

.auth-form__group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(239,90,58,0.15);
}

.auth-form__hint {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.45);
    text-align: center;
    margin-bottom: var(--space-xs);
}

.auth-btn {
    width: 100%;
    height: 48px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    margin-top: var(--space-xs);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.auth-btn:hover { background: var(--color-primary-hover); }
.auth-btn:active { transform: scale(0.98); }


/* ── DASHBOARD ── */
.dash {
    display: flex;
    min-height: 100vh;
    background: #0d0d1a;
}

.dash.hidden { display: none; }


/* SIDEBAR */
.dash__sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #0a0a14;
    border-left: 0.5px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    padding: var(--space-xl) var(--space-md);
    position: sticky;
    top: 0;
    height: 100vh;
}

.dash__logo {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: #fff;
    padding-inline: var(--space-sm);
    margin-bottom: var(--space-2xl);
    letter-spacing: -0.5px;
}

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

.dash__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1;
}

.dash__nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dash__nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.8);
}

.dash__nav-item.active {
    background: rgba(239,90,58,0.12);
    color: #ff8c6e;
    border: 0.5px solid rgba(239,90,58,0.2);
}

.dash__logout {
    width: 100%;
    height: 38px;
    background: rgba(255,255,255,0.05);
    border: 0.5px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-md);
    color: rgba(255,255,255,0.45);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dash__logout:hover {
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border-color: rgba(239,68,68,0.25);
}


/* MAIN AREA */
.dash__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-2xl);
}

.dash__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-lg);
    border-bottom: 0.5px solid rgba(255,255,255,0.07);
}

.dash__welcome {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: #fff;
}


/* STAT CARDS */
.dash__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-md);
}

.dash__stat-card {
    background: rgba(255,255,255,0.04);
    border: 0.5px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.dash__stat-card strong {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    color: #fff;
}

.dash__stat-card span {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.35);
}


/* SECTIONS */
.dash__section {
    background: rgba(255,255,255,0.03);
    border: 0.5px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.dash__section-title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: rgba(255,255,255,0.8);
}

.dash__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.dash__bulk-link-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.dash__bulk-link-btn:hover { opacity: 0.75; }


/* BULK SHORTEN MODAL */
.bulk-textarea {
    width: 100%;
    min-height: 140px;
    padding: var(--space-md);
    background: rgba(255,255,255,0.05);
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: var(--text-sm);
    font-family: monospace;
    direction: ltr;
    text-align: left;
    resize: vertical;
    margin-bottom: var(--space-md);
}

.bulk-textarea::placeholder { color: rgba(255,255,255,0.25); }

.bulk-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

#bulkResults {
    margin-top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.bulk-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.bulk-result-row.ok {
    background: rgba(34,197,94,0.08);
    border: 0.5px solid rgba(34,197,94,0.2);
}

.bulk-result-row.fail {
    background: rgba(239,68,68,0.08);
    border: 0.5px solid rgba(239,68,68,0.2);
}

.bulk-result-row__url {
    color: rgba(255,255,255,0.5);
    direction: ltr;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.bulk-result-row__status {
    flex-shrink: 0;
    color: rgba(255,255,255,0.8);
    direction: ltr;
}

.bulk-result-row.fail .bulk-result-row__status { color: #f87171; }
.bulk-result-row.ok .bulk-result-row__status { color: #4ade80; }

.bulk-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 0.5px solid rgba(255,255,255,0.08);
}

.bulk-summary__text {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.6);
}

.bulk-summary__csv {
    height: 34px;
    padding-inline: var(--space-md);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.08);
    border: 0.5px solid rgba(255,255,255,0.14);
    color: #fff;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.bulk-summary__csv:hover { background: rgba(255,255,255,0.14); }


/* CREATE FORM */
.dash__create-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.dash__create-form input {
    height: 48px;
    padding-inline: var(--space-lg);
    background: rgba(255,255,255,0.06);
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: #fff;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.dash__create-form input::placeholder { color: rgba(255,255,255,0.25); }

.dash__create-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(239,90,58,0.15);
}

.dash__create-details summary {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color var(--transition-fast);
    padding: var(--space-xs) 0;
}

.dash__create-details summary:hover { color: rgba(255,255,255,0.6); }
.dash__create-details summary::-webkit-details-marker { display: none; }

.dash__create-optionals {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.dash__create-btn {
    height: 48px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    margin-top: var(--space-xs);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.dash__create-btn:hover { background: var(--color-primary-hover); }
.dash__create-btn:active { transform: scale(0.98); }


/* LINKS LIST */
.dash__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.link-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: rgba(255,255,255,0.03);
    border: 0.5px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.link-row:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.13);
}

.link-row_url {
    flex: 1;
    min-width: 160px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: #ff9a42;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-row_clicks,
.link-row_date {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
}

/* row action buttons */
.btn-stats,
.btn-copy,
.btn-qr,
.btn-delete {
    height: 30px;
    padding-inline: var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border: 0.5px solid transparent;
    transition: background var(--transition-fast);
}

.btn-stats, .btn-copy, .btn-qr {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.65);
    border-color: rgba(255,255,255,0.10);
}

.btn-stats:hover, .btn-copy:hover, .btn-qr:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.btn-delete {
    background: rgba(239,68,68,0.10);
    color: #f87171;
    border-color: rgba(239,68,68,0.20);
}

.btn-delete:hover {
    background: rgba(239,68,68,0.20);
}

/* inline QR */
.qr-inline {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-xs);
    padding-top: var(--space-sm);
    border-top: 0.5px solid rgba(255,255,255,0.07);
}

.qr-inline.hidden { display: none; }

.qr-inline_img {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}

.dash__empty {
    text-align: center;
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.25);
    padding: var(--space-xl) 0;
}

.dash__empty.hidden { display: none; }


/* API KEY SECTION */
.dash__api-desc {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
}

.dash__api-desc a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dash__api-status {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.65);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-sm);
}

.dash__api-reveal {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(251,191,36,0.06);
    border: 0.5px solid rgba(251,191,36,0.25);
    border-radius: var(--radius-md);
}

.dash__api-warning {
    font-size: var(--text-xs);
    color: #fbbf24;
}

.dash__api-key-row {
    display: flex;
    gap: var(--space-sm);
}

.dash__api-key-row .btn {
    width: auto;
    height: 40px;
    flex-shrink: 0;
    padding-inline: var(--space-lg);
}


/* LINK-IN-BIO EDITOR */
.bio-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.bio-editor__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.bio-editor__row label {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.5);
}

.bio-editor__row input {
    height: 42px;
    padding-inline: var(--space-md);
    background: rgba(255,255,255,0.05);
    border: 0.5px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: var(--text-sm);
}

.bio-editor__row input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.bio-editor__slug-row {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 0.5px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.bio-editor__slug-prefix {
    padding-inline: var(--space-md);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.4);
    direction: ltr;
    white-space: nowrap;
}

.bio-editor__slug-row input {
    border: none;
    background: none;
    direction: ltr;
    text-align: left;
    flex: 1;
    min-width: 0;
}

.bio-editor__view-link {
    align-self: center;
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-decoration: none;
}

.bio-editor__view-link:hover { text-decoration: underline; }

.bio-editor__divider {
    border: none;
    border-top: 0.5px solid rgba(255,255,255,0.08);
    margin: var(--space-sm) 0;
}

.bio-editor__subtitle {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: rgba(255,255,255,0.7);
}

.bio-editor__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.bio-editor__link-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255,255,255,0.03);
    border: 0.5px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}

.bio-editor__link-label {
    font-size: var(--text-sm);
    color: #fff;
    font-weight: var(--font-weight-medium);
}

.bio-editor__link-url {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    direction: ltr;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-editor__link-clicks {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
}

.bio-editor__link-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.bio-move-btn,
.bio-delete-btn {
    height: 26px;
    padding-inline: var(--space-sm);
    border-radius: var(--radius-sm);
    border: 0.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    font-size: var(--text-xs);
    cursor: pointer;
}

.bio-move-btn:hover:not(:disabled),
.bio-delete-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

.bio-move-btn:disabled { opacity: 0.3; cursor: default; }

.bio-delete-btn:hover { background: rgba(239,68,68,0.15); color: #f87171; }

.bio-editor__add-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.bio-editor__add-row input {
    flex: 1;
    min-width: 140px;
    height: 40px;
    padding-inline: var(--space-md);
    background: rgba(255,255,255,0.05);
    border: 0.5px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: var(--text-sm);
}

.bio-editor__add-row .btn {
    width: auto;
    height: 40px;
    flex-shrink: 0;
    padding-inline: var(--space-lg);
}


.dash__api-key-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding-inline: var(--space-md);
    background: rgba(0,0,0,0.3);
    border: 0.5px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-sm);
    color: #4ade80;
    font-family: monospace;
    font-size: var(--text-sm);
    direction: ltr;
    text-align: left;
}


/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .dash { flex-direction: column; }

    .dash__sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        padding: var(--space-md);
        border-left: none;
        border-bottom: 0.5px solid rgba(255,255,255,0.07);
    }

    .dash__nav { flex-direction: row; flex: 1; }
    .dash__logo { margin-bottom: 0; margin-left: var(--space-md); }
    .dash__logout { width: auto; }

    .dash__main { padding: var(--space-lg); }
}


/* ── CHANNEL SELECTION ── */
.channel-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.channel-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: rgba(255,255,255,0.04);
    border: 0.5px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    text-align: right;
    position: relative;
}

.channel-btn:hover:not(.channel-btn--disabled) {
    background: rgba(239,90,58,0.10);
    border-color: rgba(239,90,58,0.30);
}

.channel-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.channel-btn__icon {
    font-size: 24px;
    flex-shrink: 0;
}

.channel-btn__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.channel-btn__label strong {
    font-size: var(--text-base);
    color: #fff;
    font-weight: var(--font-weight-semibold);
}

.channel-btn__label small {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.38);
}

.channel-btn__badge {
    font-size: 10px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4);
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    white-space: nowrap;
}

/* ── PLAN CARD ── */
.dash__stat-card--plan {
  position: relative;
  border-color: rgba(239,90,58,0.2);
}

.plan-upgrade-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  background: rgba(239,90,58,0.15);
  border: 0.5px solid rgba(239,90,58,0.3);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: #ff8c6e;
  text-decoration: none;
  transition: background 0.2s;
}

.plan-upgrade-btn:hover {
  background: rgba(239,90,58,0.25);
}

/* ── USAGE BARS ── */
.dash__usage {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}

.dash__usage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}

.dash__usage-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dash__usage-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: #ef5a3a;
  transition: width 0.6s cubic-bezier(.16,1,.3,1);
}

/* ── PRO FIELDS ── */
.dash__pro-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash__pro-field.hidden { display: none; }

.dash__pro-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
}

.dash__pro-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(239,90,58,0.15);
  color: #ff8c6e;
  border: 0.5px solid rgba(239,90,58,0.25);
}

.dash__pro-badge--pro {
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border-color: rgba(139,92,246,0.25);
}

.dash__create-form select {
  height: 48px;
  padding-inline: var(--space-lg);
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dash__create-form select option {
  background: #1a1a2e;
  color: #fff;
}

/* ══════════════════════════════
   PLANS MODAL
══════════════════════════════ */
.plans-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.plans-modal.hidden { display: none; }

.plans-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
}

.plans-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  background: #12121f;
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
}

.plans-modal__close {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 50%;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.plans-modal__close:hover { background: rgba(255,255,255,0.14); }

.plans-modal__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.plans-modal__header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: #fff;
  margin-bottom: var(--space-xs);
}

.plans-modal__header p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}

.plans-modal__loading {
  text-align: center;
  color: rgba(255,255,255,0.35);
  padding: var(--space-2xl);
}

/* PLANS GRID */
.plans-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

/* PLAN CARD */
.plan-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color 0.2s;
}

.plan-card--current {
  border-color: rgba(239,90,58,0.35);
  background: rgba(239,90,58,0.05);
}

.plan-card--pro {
  border-color: rgba(139,92,246,0.4);
  background: rgba(139,92,246,0.06);
}

.plan-card__badge {
  position: absolute;
  top: -12px;
  right: 50%;
  transform: translateX(50%);
  background: linear-gradient(90deg, #6d28d9, #7c3aed);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.plan-card__name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: #fff;
}

.plan-card__price {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.plan-card__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
}

.plan-card__features li span {
  font-size: 12px;
  color: #22c55e;
  flex-shrink: 0;
}

.plan-card__feature--no {
  color: rgba(255,255,255,0.25) !important;
}

.plan-card__feature--no span {
  color: rgba(255,255,255,0.2) !important;
}

.plan-card__btn {
  width: 100%;
  height: 44px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-card__btn:hover { background: var(--color-primary-hover); }

.plan-card__btn--current {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.4);
  cursor: default;
  border: 0.5px solid rgba(255,255,255,0.1);
}

.plan-card__btn--current:hover { background: rgba(255,255,255,0.07); }

.plan-card--pro .plan-card__btn:not(.plan-card__btn--current) {
  background: linear-gradient(90deg, #6d28d9, #7c3aed);
}

.plan-card--pro .plan-card__btn:not(.plan-card__btn--current):hover {
  background: linear-gradient(90deg, #5b21b6, #6d28d9);
}

/* ── MODAL BILLING TOGGLE ── */
.modal-billing-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: 24px;
  padding: 3px;
  gap: 3px;
  margin-top: 12px;
}

.mbt-btn {
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 21px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,0.4);
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mbt-btn.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.mbt-badge {
  font-size: 10px;
  background: rgba(34,197,94,0.18);
  color: #4ade80;
  border: 0.5px solid rgba(34,197,94,0.25);
  border-radius: 20px;
  padding: 1px 6px;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.plan-card__price-amount {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.plan-card__price-unit {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

/* ══════════════════════════════
   STATS MODAL — قبلاً هیچ استایلی نداشت
══════════════════════════════ */
.stats-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.stats-modal.hidden { display: none; }

.stats-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
}

.stats-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: #12121f;
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
}

.stats-modal__close {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 50%;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.stats-modal__close:hover { background: rgba(255,255,255,0.14); }

.stats-modal__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.stats-modal__header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: #fff;
  margin-bottom: var(--space-xs);
}

.stats-modal__url {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  direction: ltr;
}

.stats-modal__loading,
.stats-modal__empty {
  text-align: center;
  color: rgba(255,255,255,0.35);
  padding: var(--space-2xl);
}

.stats-modal__section {
  margin-bottom: var(--space-xl);
}

.stats-modal__section:last-child { margin-bottom: 0; }

.stats-modal__section h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-sm);
}

.stats-modal__bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stats-modal__bar-row {
  display: grid;
  grid-template-columns: 84px 1fr 72px;
  align-items: center;
  gap: var(--space-sm);
}

/* اسم کشورها معمولاً بلندتر از دستگاه/مرورگرن، پس ستون برچسب رو براشون
   عریض‌تر می‌کنیم تا اسم کامل + پرچم جا بشه */
.stats-modal__bar-row:has(.stats-modal__bar-label--country) {
  grid-template-columns: 140px 1fr 72px;
}

.stats-modal__bar-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
}

.stats-modal__bar-label--country {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-modal__flag {
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.15);
  object-fit: cover;
}

.stats-modal__flag--unknown {
  display: inline-block;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
}

.stats-modal__bar-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}

.stats-modal__bar-fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.stats-modal__bar-value {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  text-align: left;
  direction: ltr;
}

.stats-modal__upgrade {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
}

.stats-modal__upgrade p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-lg);
}