@import url("https://queye.dev/fonts/master.css");

/* ===========================================================
   QUEYE VPN
   Same neutral grey/white/black shell as the rest of Queye:
   Wix Madefor type, flat 1px-border cards, one accent (a deep
   teal, distinct from Daily's green / Maps' blue / Play's coral)
   used sparingly, automatic pure-black dark mode.
   =========================================================== */

:root {
    --heading-font: 'Wix Madefor Display', 'Metropolis', 'Arimo', 'Geologica', 'Roboto', system-ui, Arial, sans-serif;
    --body-font: 'Wix Madefor Text', 'Metropolis', 'Arimo', 'Geologica', 'Roboto', system-ui, Arial, sans-serif;

    --background-color: #f2f2f2;
    --card-background: #fff;
    --text-color: #202124;
    --snippet-color: #4d5156;
    --border-color: #dadce0;
    --input-border: #dfe1e5;
    --input-bg: #fff;
    --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-lift: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-dialog: 0 8px 24px rgba(0, 0, 0, 0.22);
    --scrim: rgba(0, 0, 0, 0.45);

    --accent: #0f9d94;
    --accent-ink: #ffffff;
    --accent-text: #0a746d;
    --accent-tint: rgba(15, 157, 148, 0.10);

    --ok-bg: #e1fbe9; --ok-ink: #147a34;
    --warn-bg: #fdf1de; --warn-ink: #a05a00;
    --bad-bg: #fdeaea; --bad-ink: #b3261e;

    --radius-card: 12px;
    --radius-control: 10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background-color: #000;
        --card-background: #111;
        --text-color: #ddd;
        --snippet-color: #bbb;
        --border-color: #333;
        --input-border: #333;
        --input-bg: #222;
        --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow-lift: 0 8px 16px rgba(0, 0, 0, 0.5);
        --shadow-dialog: 0 8px 24px rgba(0, 0, 0, 0.6);
        --scrim: rgba(0, 0, 0, 0.6);
        --accent: #24c7bd;
        --accent-ink: #062421;
        --accent-text: #5be0d6;
        --accent-tint: rgba(36, 199, 189, 0.14);
        --ok-bg: #12301c; --ok-ink: #6ede93;
        --warn-bg: #362713; --warn-ink: #edb765;
        --bad-bg: #3a1a1a; --bad-ink: #f08d85;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--background-color);
    color: var(--text-color);
    font-family: var(--body-font);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--heading-font); margin: 0; }

a { color: inherit; }

.plans-page { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid var(--border-color);
    background: var(--card-background);
}
.brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-color); }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy strong { font-family: var(--heading-font); font-size: 16px; }
.brand-copy span { font-size: 12px; color: var(--snippet-color); }

.topbar-actions { display: flex; gap: 10px; align-items: center; }
.action-btn {
    padding: 8px 14px; border-radius: var(--radius-control); border: 1px solid var(--border-color);
    text-decoration: none; font-size: 14px; font-weight: 600; color: var(--text-color);
    background: var(--card-background);
}
.action-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.action-btn.danger { color: var(--bad-ink); border-color: var(--bad-ink); background: transparent; }

.plans-shell { max-width: 980px; margin: 0 auto; padding: 40px 20px 100px; width: 100%; }

.page-hero { text-align: center; padding: 40px 0 32px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--accent-text); margin: 0 0 10px; }
.page-hero h1 { font-size: 40px; line-height: 1.15; margin-bottom: 14px; }
.subhead { max-width: 620px; margin: 0 auto; color: var(--snippet-color); font-size: 16px; line-height: 1.5; }

.hero-cta { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px; border-radius: 999px; border: none;
    background: var(--accent); color: var(--accent-ink);
    font-family: var(--heading-font); font-size: 18px; font-weight: 700;
    cursor: pointer; text-decoration: none; box-shadow: var(--shadow-lift);
    transition: transform .12s ease;
}
.cta-btn:hover { transform: translateY(-1px); }
.cta-btn:disabled { opacity: .6; cursor: default; transform: none; }
.cta-note { font-size: 13px; color: var(--snippet-color); }

.status-banner {
    display: none; margin: 0 auto 28px; max-width: 640px;
    padding: 14px 18px; border-radius: var(--radius-card); font-size: 14px; font-weight: 600;
}
.status-banner.show { display: block; }
.status-banner.ok { background: var(--ok-bg); color: var(--ok-ink); }
.status-banner.warn { background: var(--warn-bg); color: var(--warn-ink); }
.status-banner.bad { background: var(--bad-bg); color: var(--bad-ink); }

.credentials-card {
    display: none; margin: 0 auto 32px; max-width: 520px; padding: 24px;
    background: var(--card-background); border: 1px solid var(--border-color); border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
}
.credentials-card.show { display: block; }
.credentials-card h3 { margin-bottom: 6px; }
.credentials-card p.note { color: var(--warn-ink); background: var(--warn-bg); padding: 8px 12px; border-radius: var(--radius-control); font-size: 13px; margin: 10px 0 16px; }
.cred-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.cred-row:last-child { border-bottom: none; }
.cred-row span.label { color: var(--snippet-color); font-size: 13px; }
.cred-row code { font-size: 14px; background: var(--input-bg); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--input-border); }
.copy-btn { border: 1px solid var(--border-color); background: transparent; border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; color: var(--text-color); }

.section-title { text-align: center; margin: 56px 0 24px; }
.section-title h2 { font-size: 26px; }
.section-title p { color: var(--snippet-color); margin-top: 8px; }

.account-panel {
    display: none; background: var(--card-background); border: 1px solid var(--border-color);
    border-radius: var(--radius-card); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow-rest);
}
.account-panel.show { display: block; }
.account-panel .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.account-panel .username { font-family: monospace; font-size: 15px; }

.server-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.server-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-control);
}
.server-row.locked { opacity: .55; }
.server-row .server-name { font-weight: 600; }
.server-row .server-meta { font-size: 12px; color: var(--snippet-color); }
.server-row .lock-note { font-size: 12px; color: var(--warn-ink); }
.dl-btn { border: 1px solid var(--accent); color: var(--accent-text); background: var(--accent-tint); border-radius: var(--radius-control); padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dl-btn:disabled { opacity: .5; cursor: default; }

.protocol-tabs { display: flex; gap: 8px; margin-top: 18px; }
.protocol-tab { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-color); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-color); }
.protocol-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 10px; }
.plan-card {
    background: var(--card-background); border: 1px solid var(--border-color); border-radius: var(--radius-card);
    padding: 22px; display: flex; flex-direction: column; gap: 12px; position: relative;
}
.plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.plan-card .plan-name { font-family: var(--heading-font); font-size: 18px; }
.plan-card .plan-price { font-size: 26px; font-family: var(--heading-font); }
.plan-card .plan-note { font-size: 13px; color: var(--snippet-color); }
.plan-card .plan-btn {
    margin-top: auto; padding: 10px 14px; border-radius: var(--radius-control); border: 1px solid var(--accent);
    background: transparent; color: var(--accent-text); font-weight: 700; cursor: pointer;
}
.plan-card.current .plan-btn, .plan-card .plan-btn[disabled] { background: var(--accent-tint); cursor: default; }
.plan-card.featured .plan-btn { background: var(--accent); color: var(--accent-ink); }
.badge { position: absolute; top: -10px; right: 16px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }

.manage-row { text-align: center; margin-top: 24px; }
.text-link { color: var(--accent-text); text-decoration: underline; background: none; border: none; font-size: 14px; cursor: pointer; font-family: inherit; }

.faq { margin-top: 64px; }
.faq details { background: var(--card-background); border: 1px solid var(--border-color); border-radius: var(--radius-control); padding: 14px 18px; margin-bottom: 10px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { color: var(--snippet-color); margin: 10px 0 0; font-size: 14px; line-height: 1.5; }

footer.plans-footer { text-align: center; padding: 28px; color: var(--snippet-color); font-size: 13px; }