/* =====================================================================
   PointQR design system — tokens + component styling
   ---------------------------------------------------------------------
   Single source of truth for the brand. Loaded AFTER Bootstrap so these
   values win. We remap Bootstrap's own CSS custom properties (--bs-*)
   onto our tokens where possible so stock components (cards, tables,
   forms, alerts) inherit the brand automatically, and add explicit
   overrides / new component classes on top.

   TOKENS
     --brand-*   electric blue primary scale (trust)
     --ink-*     navy / ink text + dark surfaces
     --slate-*   neutral slate scale (backgrounds, borders, muted text)
     semantic    --success / --warning / --danger (+ soft bg tints)
     --radius-*  corner radii      --space-*  spacing scale
     --shadow-*  elevation         --transition  motion

   Type: a deliberate modern system-sans stack (self-host-free, offline-
   safe, no CDN). Short-codes / links use a mono stack.
   Theme: light by default; dark via prefers-color-scheme (Bootstrap kept
   in sync through data-bs-theme, set by a tiny inline script in App.razor).
   ===================================================================== */

:root {
    /* Brand — electric blue */
    --brand-50:  #EFF6FF;
    --brand-100: #DBEAFE;
    --brand-200: #BFDBFE;
    --brand-400: #3B82F6;
    --brand-500: #2563EB;
    --brand-600: #1D4ED8;
    --brand-700: #1E40AF;
    --brand-800: #1E3A8A;

    /* Ink / navy */
    --ink-900: #0F172A;
    --ink-800: #1E293B;
    --ink-700: #334155;

    /* Slate neutrals */
    --slate-50:  #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    /* Semantic */
    --success:      #16A34A;
    --success-soft: #ECFDF5;
    --warning:      #D97706;
    --warning-soft: #FFFBEB;
    --danger:       #DC2626;
    --danger-soft:  #FEF2F2;

    /* Semantic surface roles (flip in dark) */
    --bg:            var(--slate-50);
    --bg-elevated:   #FFFFFF;
    --bg-subtle:     var(--slate-100);
    --surface-brand: var(--brand-50);
    --text:          var(--ink-900);
    --text-muted:    var(--slate-500);
    --text-subtle:   var(--slate-400);
    --border:        var(--slate-200);
    --border-strong: var(--slate-300);
    --link:          var(--brand-600);
    --link-hover:    var(--brand-700);
    --brand-fg:      var(--brand-600);

    /* Radius */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;

    /* Shadows — subtle, layered */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow:    0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
    --shadow-brand: 0 8px 24px rgba(37, 99, 235, 0.20);

    /* Motion */
    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Type */
    --font-sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
        BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "SFMono-Regular",
        "Source Code Pro", Menlo, Consolas, "Liberation Mono", monospace;

    /* Bootstrap remaps — make stock components brand-aware */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-emphasis-color: var(--ink-900);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-color: var(--text-subtle);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: var(--link);
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: var(--link-hover);
    --bs-heading-color: var(--ink-900);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:            var(--ink-900);
        --bg-elevated:   var(--ink-800);
        --bg-subtle:     #172033;
        --surface-brand: rgba(37, 99, 235, 0.14);
        --text:          #F1F5F9;
        --text-muted:    var(--slate-400);
        --text-subtle:   var(--slate-500);
        --border:        #273449;
        --border-strong: #33425c;
        --link:          var(--brand-400);
        --link-hover:    #93C5FD;
        --brand-fg:      var(--brand-400);

        --success-soft: rgba(22, 163, 74, 0.16);
        --warning-soft: rgba(217, 119, 6, 0.16);
        --danger-soft:  rgba(220, 38, 38, 0.16);

        --bs-emphasis-color: #F8FAFC;
        --bs-heading-color: #F8FAFC;
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow:    0 4px 12px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
    }
}

/* ---------------------------------------------------------------- base */
html, body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bs-heading-color);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    letter-spacing: -0.03em;
    font-weight: 800;
}

a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition);
}
a:hover { color: var(--link-hover); }

code, kbd, samp, pre, .pq-mono { font-family: var(--font-mono); }

.text-muted { color: var(--text-muted) !important; }

/* Accessible, brand-consistent focus ring everywhere */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    box-shadow: none;
}

/* --------------------------------------------------------------- buttons */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius);
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1.1rem;
    letter-spacing: -0.01em;
    transition: background-color var(--transition), border-color var(--transition),
        color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-800);
    --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-disabled-bg: var(--brand-400);
    --bs-btn-disabled-border-color: var(--brand-400);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover { box-shadow: var(--shadow-brand); }

.btn-outline-primary {
    --bs-btn-color: var(--brand-fg);
    --bs-btn-border-color: var(--brand-fg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--bg-subtle);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-bg: var(--bg-subtle);
    --bs-btn-active-border-color: var(--slate-400);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: #B91C1C;
}

.btn-link {
    --bs-btn-color: var(--link);
    --bs-btn-hover-color: var(--link-hover);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}

/* Brand ghost + danger-solid buttons for the Ui.Button component */
.btn-ghost {
    --bs-btn-color: var(--text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--bg-subtle);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--slate-200);
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #B91C1C;
    --bs-btn-hover-border-color: #B91C1C;
    --bs-btn-active-bg: #991B1B;
}

/* ---------------------------------------------------------------- cards */
.card {
    --bs-card-bg: var(--bg-elevated);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-spacer-y: var(--space-5);
    --bs-card-spacer-x: var(--space-5);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card-title { font-weight: 700; letter-spacing: -0.015em; }

/* ---------------------------------------------------------------- forms */
.form-control, .form-select {
    border-radius: var(--radius);
    border-color: var(--border-strong);
    background-color: var(--bg-elevated);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: var(--text-subtle); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 0.35rem;
}
.form-control-color { padding: 0.2rem; }

/* ------------------------------------------------------------ validation */
.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--success); }
.invalid { outline: none; border-color: var(--danger); }
.validation-message, .text-danger { color: var(--danger) !important; }

/* --------------------------------------------------------------- tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    vertical-align: middle;
}
.table > thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--border-strong);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}
.table > tbody td { padding-top: 0.85rem; padding-bottom: 0.85rem; }

/* --------------------------------------------------------------- alerts */
.alert {
    --bs-alert-border-radius: var(--radius);
    border: 1px solid transparent;
    border-radius: var(--radius);
}
.alert-warning {
    background-color: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
    color: #92400E;
}
.alert-info {
    background-color: var(--surface-brand);
    border-color: color-mix(in srgb, var(--brand-500) 25%, transparent);
    color: var(--brand-fg);
}
.alert-secondary {
    background-color: var(--bg-subtle);
    border-color: var(--border);
    color: var(--text);
}
.alert-success {
    background-color: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
    color: #166534;
}
@media (prefers-color-scheme: dark) {
    .alert-warning { color: #FCD34D; }
    .alert-info { color: #93C5FD; }
    .alert-success { color: #86EFAC; }
}

/* --------------------------------------------------------- badges / pills */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
    padding: 0.35em 0.7em;
}
.text-bg-success { background-color: var(--success) !important; color: #fff !important; }
.text-bg-warning { background-color: var(--warning) !important; color: #fff !important; }
.text-bg-secondary { background-color: var(--slate-500) !important; color: #fff !important; }

/* ------------------------------------------------------------- progress */
.progress {
    background-color: var(--bg-subtle);
    border-radius: var(--radius-pill);
}
.progress-bar { background-color: var(--brand-500); }
.bg-primary { background-color: var(--brand-500) !important; }

/* ===================================================================
   Brand component classes (consumed by Components/Ui/* and layout)
   =================================================================== */

/* Hero */
.hero {
    position: relative;
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
}
.hero h1 { margin-bottom: var(--space-4); }
.hero .lead { color: var(--text-muted); max-width: 44rem; margin-inline: auto; }

.pq-gradient-text {
    background: linear-gradient(120deg, var(--brand-500), var(--brand-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Section rhythm */
.pq-section { padding-block: var(--space-8); }

/* Promise / feature pills row */
.pq-promises {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-3);
    margin-block: var(--space-5);
}
.pq-promise {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    box-shadow: var(--shadow-xs);
}
.pq-promise svg { color: var(--success); flex: none; }

/* Feature card grid */
.pq-feature {
    height: 100%;
    padding: var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.pq-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pq-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    background: var(--surface-brand);
    color: var(--brand-fg);
    margin-bottom: var(--space-3);
}

/* Signup CTA banner */
.pq-signup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--surface-brand);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: left;
}
.pq-signup-banner h3 { color: var(--text); }
@media (max-width: 640px) {
    .pq-signup-banner { flex-direction: column; text-align: center; }
    .pq-signup-banner > div:first-child { text-align: center; }
}

/* Stat / KPI tile */
.pq-stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    height: 100%;
}
.pq-stat__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
}
.pq-stat__value {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink-900);
}
@media (prefers-color-scheme: dark) { .pq-stat__value { color: #F8FAFC; } }
.pq-stat__hint { font-size: 0.8rem; color: var(--text-muted); }

/* Empty state */
.pq-empty {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    color: var(--text-muted);
}
.pq-empty__icon { color: var(--slate-400); margin-bottom: var(--space-3); }
.pq-empty__title { color: var(--text); font-weight: 700; margin-bottom: var(--space-2); }

/* Spinner */
.pq-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--border-strong);
    border-top-color: var(--brand-500);
    border-radius: 50%;
    animation: pq-spin 0.7s linear infinite;
}
.pq-spinner--lg { width: 2.5rem; height: 2.5rem; border-width: 4px; }
@keyframes pq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pq-spinner { animation-duration: 2s; } }

/* Pill (brand tier / status) */
.pq-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    border: 1px solid transparent;
}
.pq-pill--brand   { background: var(--surface-brand); color: var(--brand-fg); }
.pq-pill--success { background: var(--success-soft); color: var(--success); }
.pq-pill--warning { background: var(--warning-soft); color: var(--warning); }
.pq-pill--danger  { background: var(--danger-soft); color: var(--danger); }
.pq-pill--neutral { background: var(--bg-subtle); color: var(--text-muted); }

/* Pro-lock affordances: a small badge for locked labels/summaries, a
   distinct dashed-border treatment for buttons that are really an upgrade
   CTA in disguise, and a callout panel explaining why controls are disabled. */
.pq-badge-pro {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--surface-brand);
    color: var(--brand-fg);
    margin-left: 0.4rem;
    vertical-align: middle;
}
.pq-lock-icon { margin-right: 0.3rem; vertical-align: -1px; }
.pq-locked-btn {
    --bs-btn-color: var(--text-muted);
    --bs-btn-border-color: var(--border-strong);
    border-style: dashed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pq-locked-btn:hover {
    --bs-btn-hover-color: var(--brand-fg);
    --bs-btn-hover-border-color: var(--brand-fg);
    --bs-btn-hover-bg: var(--surface-brand);
}
.pq-locked-panel {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-subtle);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--text-muted);
}
.pq-locked-panel .pq-lock-icon { flex: none; margin-top: 0.15rem; }

/* Short-code / URL chips */
.pq-code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
}

/* ===================================================================
   Pricing page (/pricing) — CSS-only billing toggle + tier cards
   =================================================================== */
.pq-pricing { padding-block: var(--space-6); }

/* The billing radios drive everything below via :checked sibling selectors. */
.pq-bill-input { position: absolute; opacity: 0; pointer-events: none; }

.pq-bill-switch {
    display: inline-flex;
    gap: 0.25rem;
    margin: 0 auto var(--space-6);
    padding: 0.3rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    justify-content: center;
    width: fit-content;
}
.pq-pricing { display: flex; flex-direction: column; align-items: center; }
.pq-bill-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.pq-bill-save {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--success-soft);
    color: var(--success);
}
#pq-bill-monthly:checked ~ .pq-bill-switch .pq-bill-option--monthly,
#pq-bill-annual:checked ~ .pq-bill-switch .pq-bill-option--annual {
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

/* Price + billed-note visibility flips with the toggle. Annual is default.
   Selectors are qualified with .pq-tier__price / .pq-tier__billed so they
   outrank the base .pq-price { display: inline-flex } rule below (equal
   class-selector specificity would otherwise let source order decide). */
.pq-tier__price .pq-price--monthly,
.pq-tier__billed .pq-price--monthly { display: none; }
#pq-bill-monthly:checked ~ .pq-tiers .pq-tier__price .pq-price--monthly,
#pq-bill-monthly:checked ~ .pq-tiers .pq-tier__billed .pq-price--monthly { display: inline-flex; }
#pq-bill-monthly:checked ~ .pq-tiers .pq-tier__price .pq-price--annual,
#pq-bill-monthly:checked ~ .pq-tiers .pq-tier__billed .pq-price--annual { display: none; }

.pq-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    width: 100%;
    max-width: 1080px;
    align-items: start;
}
@media (max-width: 860px) { .pq-tiers { grid-template-columns: 1fr; max-width: 30rem; } }

.pq-tier {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}
.pq-tier--featured {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-brand);
}
.pq-tier__badge {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-600);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}
.pq-tier__name { font-size: 1.4rem; margin-bottom: var(--space-2); }
.pq-tier__blurb { color: var(--text-muted); font-size: 0.9rem; min-height: 3.2rem; }
.pq-tier__price { display: flex; align-items: baseline; gap: 0.35rem; margin-top: var(--space-2); }
.pq-price { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.pq-price__amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink-900); }
@media (prefers-color-scheme: dark) { .pq-price__amount { color: #F8FAFC; } }
.pq-price__period { color: var(--text-muted); font-weight: 600; }
.pq-tier__billed { font-size: 0.8rem; color: var(--text-muted); min-height: 1.2rem; margin-bottom: var(--space-4); }

.pq-tier__features { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: 0.6rem; }
.pq-tier__features li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; color: var(--text); }
.pq-tick { color: var(--success); flex: none; margin-top: 0.15rem; }
.pq-cross { color: var(--text-subtle); flex: none; margin-top: 0.15rem; }

/* Comparison table + FAQ */
.pq-compare th[scope="row"] { font-weight: 600; color: var(--text); }
.pq-compare td { text-align: center; }
.pq-compare thead th:not(:first-child) { text-align: center; }

.pq-faq { max-width: 46rem; margin-inline: auto; }
.pq-faq__item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-xs);
}
.pq-faq__q { font-weight: 700; cursor: pointer; color: var(--text); list-style-position: inside; }
.pq-faq__a { color: var(--text-muted); margin: var(--space-3) 0 0; }

/* ===================================================================
   App shell — header + footer
   =================================================================== */
.pq-shell { display: flex; flex-direction: column; min-height: 100vh; }
.pq-shell__main { flex: 1 0 auto; }

.pq-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--border);
}
.pq-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 1200px;
    margin-inline: auto;
    padding: 0.7rem var(--space-4);
}
.pq-header__brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.pq-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.pq-navlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.pq-navlink:hover { background: var(--bg-subtle); color: var(--text); }
.pq-navlink.active { color: var(--brand-fg); background: var(--surface-brand); }

.pq-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.4rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
}
.pq-header__nav-toggle { display: none; }

@media (max-width: 860px) {
    .pq-header__toggle { display: inline-flex; }
    .pq-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        padding: var(--space-3) var(--space-4);
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        display: none;
    }
    .pq-header__nav-toggle:checked ~ .pq-header__nav { display: flex; }
    .pq-navlink { padding-block: 0.7rem; }
    .pq-header__nav .btn { width: 100%; }
}

/* Footer */
.pq-footer {
    flex-shrink: 0;
    background: var(--ink-900);
    color: var(--slate-300);
    padding-block: var(--space-8) var(--space-6);
    margin-top: var(--space-10);
}
.pq-footer__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-4);
}
.pq-footer__cols {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: var(--space-6);
}
@media (max-width: 860px) { .pq-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pq-footer__cols { grid-template-columns: 1fr; } }
.pq-footer h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-400);
    margin-bottom: var(--space-3);
}
.pq-footer ul { list-style: none; padding: 0; margin: 0; }
.pq-footer li { margin-bottom: 0.5rem; }
.pq-footer a { color: var(--slate-300); text-decoration: none; font-size: 0.9rem; }
.pq-footer a:hover { color: #fff; text-decoration: underline; }
.pq-footer__tagline { color: var(--slate-400); font-size: 0.9rem; margin-top: var(--space-3); max-width: 22rem; }
.pq-footer__bottom {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--ink-700);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--slate-400);
}
.pq-footer__trademark { max-width: 46rem; }

/* Content container for app pages */
.pq-page {
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--space-6) var(--space-4);
    width: 100%;
}

/* Logo */
.pq-logo { display: inline-flex; align-items: center; gap: 0.55rem; }
.pq-logo__mark { flex: none; display: block; }
.pq-logo__word {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    color: var(--ink-900);
    white-space: nowrap;
}
.pq-logo__word b { color: var(--brand-fg); font-weight: 800; }
@media (prefers-color-scheme: dark) { .pq-logo__word { color: #F8FAFC; } }
.pq-logo--on-dark .pq-logo__word { color: #fff; }
.pq-logo--on-dark .pq-logo__word b { color: var(--brand-400); }

/* Auth (centered card) layout */
.pq-auth {
    display: flex;
    justify-content: center;
    padding-block: var(--space-8);
}
.pq-auth__card {
    width: 100%;
    max-width: 27rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}
.pq-auth__card--wide { max-width: 46rem; }
.pq-auth__head { text-align: center; margin-bottom: var(--space-5); }
.pq-auth__head h1 { font-size: 1.6rem; margin-bottom: 0.35rem; }
.pq-auth__head p { color: var(--text-muted); margin: 0; }

/* Generator card polish (Home / landing) */
.qr-generator {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-6);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-6);
    max-width: 960px;
    margin-inline: auto;
}
@media (max-width: 768px) { .qr-generator { grid-template-columns: minmax(0, 1fr); } }
.qr-generator > * { min-width: 0; }

/* QR content-type icon picker */
.pq-type-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--space-2);
}
.pq-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: var(--space-2) var(--space-1);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.pq-type-btn:hover { border-color: var(--brand-500); color: var(--text); }
.pq-type-btn.is-active {
    background: var(--surface-brand);
    border-color: var(--brand-500);
    color: var(--brand-fg);
}
.pq-type-btn__label {
    font-size: 0.68rem;
    line-height: 1.1;
    text-align: center;
}
.qr-generator__preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Report-abuse form: wider than the sign-in card, plus the bot honeypot */
.pq-report { max-width: 36rem; }
.pq-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}