@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

body.web-cabinet {
    --bg: #0a0a14;
    --bg-soft: #0f0f1e;
    --card: rgba(255, 255, 255, 0.045);
    --card-hover: rgba(255, 255, 255, 0.075);
    --text: #f1f1f7;
    --text-soft: #c8c8d8;
    --muted: #747494;
    --success: #34d399;
    --accent: #667eea;
    --accent2: #764ba2;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-accent: rgba(167, 141, 232, 0.48);
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --shadow-lg: 0 36px 90px -46px rgba(0, 0, 0, 0.82), 0 14px 40px -26px rgba(102, 126, 234, 0.36);
    --shadow-accent: 0 22px 54px -26px rgba(102, 126, 234, 0.95);
    --blur: blur(22px) saturate(165%);
    --header-h: 76px;
    --app-top-offset: 0px;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 12% 0%, rgba(102, 126, 234, 0.18), transparent 34vw),
        radial-gradient(circle at 92% 86%, rgba(118, 75, 162, 0.18), transparent 34vw),
        linear-gradient(180deg, #0a0a14 0%, #0f0f1e 100%);
}

body.web-cabinet::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.web-cabinet #app {
    z-index: 1;
}

body.web-cabinet .app-header {
    left: 50%;
    right: auto;
    width: min(1180px, calc(100% - 48px));
    transform: translateX(-50%);
    margin-top: 16px;
    height: 64px;
    padding: 0 18px 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(13, 13, 28, 0.72);
    box-shadow: 0 26px 64px -42px rgba(0, 0, 0, 0.85);
}

body.web-cabinet .app-header::after {
    left: 28px;
    right: 28px;
    opacity: .7;
}

body.web-cabinet .header-brand {
    font-family: 'Unbounded', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

body.web-cabinet .header-status {
    min-height: 38px;
    padding: 8px 14px 8px 12px;
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.045);
    font-size: 13px;
    font-weight: 700;
}

body.web-cabinet .screen {
    top: 96px;
    height: calc(100dvh - 96px);
    left: 50%;
    right: auto;
    width: min(1180px, calc(100% - 48px));
    transform: translateX(-50%);
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 141, 232, .45) transparent;
}

body.web-cabinet .screen::-webkit-scrollbar {
    width: 8px;
}

body.web-cabinet .screen::-webkit-scrollbar-thumb {
    background: rgba(167, 141, 232, .38);
    border-radius: 999px;
}

body.web-cabinet .screen-content {
    padding: 22px 0 72px;
    gap: 18px;
}

body.web-cabinet .screen-header {
    margin: 0 0 18px;
    padding: 16px 0 14px;
    background: linear-gradient(180deg, rgba(10, 10, 20, .92), rgba(10, 10, 20, .70));
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

body.web-cabinet .screen-title,
body.web-cabinet .section-title,
body.web-cabinet .auth-title,
body.web-cabinet .app-boot-title {
    font-family: 'Unbounded', sans-serif;
    letter-spacing: -0.04em;
}

body.web-cabinet .screen-title {
    font-size: 24px;
    font-weight: 600;
}

body.web-cabinet .btn-back {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
}

body.web-cabinet .glass-card,
body.web-cabinet .card,
body.web-cabinet .profile-card,
body.web-cabinet .status-banner,
body.web-cabinet .auto-apply-card,
body.web-cabinet .action-card,
body.web-cabinet .stat-card,
body.web-cabinet .accordion,
body.web-cabinet .settings-subscription-card,
body.web-cabinet .referral-hero,
body.web-cabinet .referral-link-card,
body.web-cabinet .referral-list {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 22px 64px -46px rgba(0, 0, 0, 0.75);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

body.web-cabinet .glass-card:hover,
body.web-cabinet .action-card:hover,
body.web-cabinet .profile-card:hover,
body.web-cabinet .accordion:hover {
    border-color: rgba(167, 141, 232, 0.45);
    background: rgba(255, 255, 255, 0.065);
}

body.web-cabinet #main-screen .screen-content {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    align-items: start;
    column-gap: 22px;
}

body.web-cabinet .profile-carousel-wrap,
body.web-cabinet #profile-auth-btn,
body.web-cabinet .status-banner,
body.web-cabinet .auto-apply-card,
body.web-cabinet #launch-apply-btn {
    grid-column: 1;
}

body.web-cabinet .quick-actions-section {
    grid-column: 2;
    grid-row: 1 / span 5;
}

body.web-cabinet .profile-carousel-wrap {
    margin-bottom: 0;
}

body.web-cabinet .profile-card {
    min-height: 92px;
    padding: 20px;
    border-radius: 22px;
}

body.web-cabinet .profile-card.is-active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.16), rgba(118, 75, 162, 0.08));
}

body.web-cabinet .profile-card__avatar {
    width: 52px;
    height: 52px;
    font-size: 18px;
}

body.web-cabinet .profile-card__name {
    font-size: 17px;
}

body.web-cabinet .profile-card__meta {
    font-size: 13px;
}

body.web-cabinet .status-banner {
    border-radius: 26px;
    overflow: hidden;
}

body.web-cabinet .status-banner-content {
    min-height: 116px;
    padding: 24px;
}

body.web-cabinet .auto-apply-card {
    border-radius: 24px;
    min-height: 112px;
    padding: 22px;
}

body.web-cabinet .auto-apply-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 18px;
    letter-spacing: -0.03em;
}

body.web-cabinet .quick-actions-section {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: var(--shadow-lg);
}

body.web-cabinet .section-header {
    margin-bottom: 18px;
}

body.web-cabinet .section-title {
    font-size: 28px;
    font-weight: 600;
}

body.web-cabinet .quick-actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

body.web-cabinet .action-card {
    min-height: 150px;
    border-radius: 22px;
    padding: 20px;
}

body.web-cabinet .action-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 24px;
}

body.web-cabinet .action-card-label {
    font-size: 15px;
    line-height: 1.25;
}

body.web-cabinet .primary-action-btn,
body.web-cabinet .btn-primary {
    border-radius: 999px;
    box-shadow: var(--shadow-accent);
}

body.web-cabinet .stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

body.web-cabinet .stat-card {
    border-radius: 22px;
    padding: 20px;
}

body.web-cabinet .stat-val {
    font-family: 'Unbounded', sans-serif;
    letter-spacing: -0.03em;
}

body.web-cabinet .field-input,
body.web-cabinet textarea,
body.web-cabinet select {
    border-radius: 16px;
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.045);
}

body.web-cabinet .modal-content,
body.web-cabinet .sheet-modal,
body.web-cabinet .bottom-sheet,
body.web-cabinet .channel-gate-card,
body.web-cabinet .onboarding-card {
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(19, 19, 38, 0.92);
    box-shadow: var(--shadow-lg);
}

body.web-cabinet #auth-screen .screen-content.centered {
    min-height: calc(100dvh - 132px);
    justify-content: center;
    padding-top: 0;
}

body.web-cabinet .auth-flow {
    max-width: 520px;
    transform: none;
}

body.web-cabinet .auth-title {
    font-size: 34px;
}

body.web-cabinet .auth-sub {
    max-width: 420px;
    font-size: 16px;
}

body.web-cabinet .auth-flow .card {
    border-radius: 26px;
    padding: 26px;
}

/* ===================================================================
   Landing-parity flourishes — echo hesoyam.tech hero / cards / badges
   =================================================================== */
body.web-cabinet {
    --accent-3: #a78de8;
    --mint: #34d399;
    --ease-lp: cubic-bezier(.22, 1, .36, 1);
}

/* ── Live-data signal: mint ping ring (matches landing .badge) ── */
body.web-cabinet .status-badge {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.30);
    color: var(--mint);
    letter-spacing: .02em;
}
body.web-cabinet .status-badge .status-dot {
    background: var(--mint);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .5);
    animation: wc-ping 2.4s var(--ease-lp) infinite;
}
@keyframes wc-ping {
    0%        { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}

/* ── Headings: gradient clip like landing .grad ── */
body.web-cabinet #main-screen .section-title,
body.web-cabinet .auth-title {
    background: linear-gradient(110deg, var(--accent) 0%, var(--accent-3) 45%, var(--accent2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Primary buttons: landing glow + circular icon badge ── */
body.web-cabinet .primary-action-btn,
body.web-cabinet .btn-primary,
body.web-cabinet .profile-auth-btn {
    transition: transform .2s var(--ease-lp), box-shadow .35s var(--ease-lp), filter .35s var(--ease-lp);
}
body.web-cabinet .primary-action-btn:hover,
body.web-cabinet .btn-primary:hover,
body.web-cabinet .profile-auth-btn:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18),
                0 22px 50px -18px rgba(102, 126, 234, .7),
                0 0 32px rgba(102, 126, 234, .45);
    filter: brightness(1.06);
}
body.web-cabinet .primary-action-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .16);
    font-size: 17px;
    transition: background .35s var(--ease-lp);
}
body.web-cabinet .primary-action-btn:hover .primary-action-icon {
    background: rgba(255, 255, 255, .28);
}

/* ── Secondary buttons: landing ghost-button feel ── */
body.web-cabinet .btn-secondary {
    transition: background .3s var(--ease-lp), border-color .3s var(--ease-lp),
                box-shadow .3s var(--ease-lp), transform .12s var(--ease-lp);
}
body.web-cabinet .btn-secondary:hover {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 1px rgba(167, 141, 232, .25),
                0 0 26px rgba(102, 126, 234, .20);
}

/* ── Action cards: landing card hover (lift + accent glow) ── */
body.web-cabinet .action-card {
    transition: transform .25s var(--ease-lp), border-color .25s var(--ease-lp),
                background .25s var(--ease-lp), box-shadow .35s var(--ease-lp);
}
body.web-cabinet .action-card:hover {
    box-shadow: 0 26px 60px -34px rgba(102, 126, 234, .5),
                0 0 0 1px rgba(167, 141, 232, .18);
}

/* ── Eyebrow "live" accent dot before main section titles ── */
body.web-cabinet #main-screen .section-title {
    position: relative;
    padding-left: 24px;
}
body.web-cabinet #main-screen .section-title::before {
    content: "";
    position: absolute;
    left: 2px; top: 50%;
    width: 9px; height: 9px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .5);
    animation: wc-ping 2.4s var(--ease-lp) infinite;
}

/* ── Scroll-progress bar at the very top (matches landing .progress) ── */
@supports (animation-timeline: scroll()) {
    body.web-cabinet { timeline-scope: --wc-scroll; }
    body.web-cabinet .screen.active {
        scroll-timeline-name: --wc-scroll;
        scroll-timeline-axis: block;
    }
    body.web-cabinet::after {
        content: "";
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 2px;
        transform: scaleX(0);
        transform-origin: 0 50%;
        background: linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent2));
        z-index: 200;
        pointer-events: none;
        animation: wc-progress linear both;
        animation-timeline: --wc-scroll;
    }
}
@keyframes wc-progress {
    to { transform: scaleX(1); }
}

@media (max-width: 980px) {
    body.web-cabinet .app-header,
    body.web-cabinet .screen {
        width: min(720px, calc(100% - 28px));
    }

    body.web-cabinet #main-screen .screen-content {
        display: flex;
    }

    body.web-cabinet .quick-actions-section {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body.web-cabinet .quick-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body.web-cabinet {
        --header-h: 62px;
    }

    body.web-cabinet .app-header {
        width: calc(100% - 20px);
        margin-top: 10px;
        height: 56px;
        padding-inline: 12px;
    }

    body.web-cabinet .screen {
        top: 76px;
        width: calc(100% - 20px);
        height: calc(100dvh - 76px);
    }

    body.web-cabinet .header-brand {
        font-size: 15px;
    }

    body.web-cabinet .quick-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.web-cabinet .action-card {
        min-height: 116px;
        padding: 14px;
    }

    body.web-cabinet .screen-content {
        padding-bottom: 44px;
    }
}