/* Import component styles - MUST be at the top */
@import url('/assets/css/components/header.css?v=5');
@import url('/assets/css/components/hero.css?v=5');
@import url('/assets/css/components/picker.css?v=5');
@import url('/assets/css/components/features.css?v=5');
@import url('/assets/css/components/content.css?v=5');
@import url('/assets/css/components/faq.css?v=5');
@import url('/assets/css/components/footer.css?v=6');
@import url('/assets/css/components/responsive.css?v=5');
@import url('/assets/css/results.css?v=5');

:root {
    /* VK Light Theme Colors */
    --vk-blue: #0077FF;
    --vk-blue-light: #3D8CF5;
    --vk-blue-dark: #0056CC;
    --vk-blue-hover: #E5F0FF;
    --vk-bg: #FFFFFF;
    --vk-bg-secondary: #F5F5F5;
    --vk-bg-hover: #EBEDF0;
    --vk-text-primary: #000000;
    --vk-text-secondary: #818C99;
    --vk-text-link: #0077FF;
    --vk-border: #D7D8D9;
    --vk-border-light: #E7E8EC;
    --vk-red: #E64646;
    --vk-green: #4BB34B;
    --vk-orange: #FFA000;
    --vk-purple: #9370DB;
    
    /* Legacy variables mapped to VK theme */
    --yt-red: var(--vk-blue);
    --yt-dark: var(--vk-bg);
    --yt-darker: var(--vk-bg-secondary);
    --yt-light-dark: var(--vk-bg-hover);
    --yt-light: var(--vk-text-secondary);
    --yt-white: var(--vk-text-primary);
    --yt-blue: var(--vk-blue);
    --yt-green: var(--vk-green);
    --gradient-red: linear-gradient(135deg, var(--vk-blue) 0%, var(--vk-blue-light) 100%);
    --gradient-red-reverse: linear-gradient(135deg, var(--vk-blue-light) 0%, var(--vk-blue) 100%);
    --gradient-dark: linear-gradient(135deg, var(--vk-bg) 0%, var(--vk-bg-secondary) 100%);
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 119, 255, 0.1);
    --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --glow-red: 0 0 15px rgba(0, 119, 255, 0.2);
    --glow-white: 0 0 20px rgba(0, 0, 0, 0.05);
}

/* vkpicker account, pricing, and subscription modules */
.nav-login {
    background: var(--vk-blue);
    color: #ffffff !important;
    box-shadow: none;
    border-radius: 8px;
}

.nav-login i {
    color: #ffffff !important;
}

.access-state {
    display: grid;
    gap: 1.5rem;
    text-align: center;
}

.access-state p,
.usage-pill {
    color: var(--vk-text-secondary);
    font-size: 1.08rem;
    font-weight: 700;
}

.usage-pill {
    width: fit-content;
    margin: 0 auto 2rem;
    padding: .75rem 1rem;
    border: 1px solid var(--vk-blue);
    border-radius: 8px;
    background: var(--vk-blue-hover);
    color: var(--vk-blue);
}

.access-link {
    text-decoration: none;
}

.auth-section,
.profile-dashboard {
    min-height: calc(100vh - 80px);
    padding: 8rem 1.5rem 5rem;
    background: var(--vk-bg-secondary);
    color: var(--vk-text-primary);
}

.auth-shell,
.profile-dashboard {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(360px, .58fr);
    gap: 1.5rem;
    align-items: stretch;
}

.auth-copy,
.auth-panel,
.profile-panel,
.profile-plans,
.profile-plan-card {
    border: 1px solid var(--vk-border-light);
    border-radius: 12px;
    background: var(--vk-bg);
    box-shadow: var(--glass-shadow);
}

.auth-copy,
.auth-panel,
.profile-panel,
.profile-plans {
    padding: 2rem;
}

.auth-kicker,
.profile-kicker,
.profile-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .55rem .8rem;
    border-radius: 8px;
    background: var(--vk-blue);
    color: #ffffff;
    border: none;
    font-weight: 900;
}

.auth-copy h1,
.profile-hero h1 {
    margin: 1rem 0;
    color: var(--vk-text-primary);
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
}

.auth-copy p,
.profile-hero p,
.profile-section-heading p,
.profile-plan-card p {
    color: var(--vk-text-secondary);
    line-height: 1.7;
    font-weight: 650;
}

.auth-highlights {
    display: grid;
    gap: .85rem;
    margin-top: 1.5rem;
}

.auth-highlights span {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--vk-text-primary);
    font-weight: 800;
}

.auth-highlights i {
    flex: 0 0 1.1rem;
    display: inline-flex;
    justify-content: center;
    padding-top: .2em;
    color: var(--vk-green);
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .35rem;
    border-radius: 8px;
    background: var(--vk-bg-secondary);
    margin-bottom: 1.4rem;
}

.auth-tabs--single {
    grid-template-columns: 1fr;
}

.auth-tab {
    border-radius: 7px;
    padding: .85rem;
    text-align: center;
    color: var(--vk-text-primary);
    text-decoration: none;
    font-weight: 900;
}

.auth-tab.active {
    background: var(--vk-blue);
    color: #ffffff;
}

.auth-form,
.auth-field {
    display: grid;
    gap: .9rem;
}

.auth-field {
    color: var(--vk-text-primary);
    font-weight: 850;
}

.auth-field input {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--vk-border);
    border-radius: 8px;
    padding: .9rem 1rem;
    color: var(--vk-text-primary);
    background: var(--vk-bg);
    font-size: 1rem;
}

.auth-field input:focus {
    border-color: var(--vk-blue);
    outline: none;
    box-shadow: 0 0 0 3px var(--vk-blue-hover);
}

.auth-row,
.auth-check {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--vk-text-secondary);
    font-weight: 750;
}

.auth-row a,
.auth-check a {
    color: var(--vk-blue);
}

.auth-error {
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border-radius: 8px;
    background: #FFF0F0;
    color: var(--vk-red);
    font-weight: 800;
}

.auth-success {
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid #A7E3B0;
    border-radius: 8px;
    background: #F0FFF2;
    color: #287A32;
    font-weight: 800;
}

.auth-resend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .45rem .8rem;
    border: 1px solid var(--vk-blue);
    border-radius: 7px;
    background: var(--vk-blue-hover);
    color: var(--vk-blue);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.auth-resend:hover,
.auth-return:hover {
    background: var(--vk-blue);
    color: #ffffff;
}

.auth-note .auth-return {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .5rem .95rem;
    border: 1px solid var(--vk-blue);
    border-radius: 7px;
    background: #ffffff;
    color: var(--vk-blue);
    font-weight: 850;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.auth-submit,
.auth-google,
.profile-tool-link,
.profile-plan-button,
.profile-test-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 900;
}

.auth-submit,
.profile-tool-link,
.profile-plan-button,
.profile-test-button {
    border: none;
    background: var(--vk-blue);
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
}

.auth-submit:hover,
.profile-tool-link:hover,
.profile-plan-button:hover,
.profile-test-button:hover {
    background: var(--vk-blue-dark);
}

.auth-note {
    color: var(--vk-text-secondary);
    text-align: center;
    font-weight: 800;
}

.profile-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.profile-grid,
.profile-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.profile-plans {
    margin-top: 1rem;
}

.profile-panel-header,
.profile-plan-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.profile-panel h2,
.profile-section-heading h2,
.profile-plan-card h3 {
    color: var(--vk-text-primary);
}

.profile-details {
    display: grid;
    gap: .85rem;
    margin-top: 1.3rem;
}

.profile-details div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--vk-border-light);
    padding-top: .85rem;
}

.profile-details dt {
    color: var(--vk-text-secondary);
    font-weight: 800;
}

.profile-details dd {
    color: var(--vk-text-primary);
    font-weight: 900;
}

.profile-badge-active {
    background: #E8F5E9;
    color: var(--vk-green);
}

.profile-badge-muted {
    background: var(--vk-bg-secondary);
    color: var(--vk-text-secondary);
}

.profile-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.3rem;
}

.profile-plan-card {
    padding: 1.4rem;
}

.profile-plan-card.is-current {
    border-color: var(--vk-blue);
    box-shadow: 0 0 0 2px var(--vk-blue), var(--glass-shadow);
}

.profile-price {
    margin: 1rem 0;
    color: var(--vk-text-primary);
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 900;
}

.profile-price span {
    font-size: 1.3rem;
}

.profile-price small {
    color: var(--vk-text-secondary);
    font-size: .95rem;
}

.profile-test-button {
    width: fit-content;
    margin-top: 1.5rem;
    padding: 0 1.5rem;
}

@media (max-width: 900px) {
    .auth-shell,
    .profile-grid,
    .profile-plan-grid {
        grid-template-columns: 1fr;
    }

    .profile-hero {
        align-items: flex-start;
        flex-direction: column;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
    background-color: var(--vk-bg);
    color: var(--vk-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--vk-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--vk-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vk-text-secondary);
}