/* ============================================================
   ConvertBag — style.css
   ============================================================ */

/* Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Design tokens
   ============================================================ */
:root {
    --bg:             #f4f6fb;
    --surface:        #ffffff;
    --surface-subtle: #f9fafb;
    --border:         #e3e7ef;
    --border-strong:  #c9d0de;

    --primary:        #2563eb;
    --primary-hover:  #1d4ed8;
    --primary-tint:   #eef3ff;
    --primary-ring:   rgba(37,99,235,0.18);

    --success:        #059669;
    --success-bg:     #ecfdf5;
    --success-border: #a7f3d0;
    --success-hover:  #047857;

    --warning:        #b45309;
    --warning-bg:     #fffbeb;
    --warning-border: #fde68a;

    --error:          #dc2626;
    --error-bg:       #fef2f2;
    --error-border:   #fecaca;

    --expired:        #6b7280;
    --expired-bg:     #f9fafb;
    --expired-border: #e5e7eb;

    --text:           #111827;
    --text-secondary: #4b5563;
    --text-muted:     #9ca3af;

    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --r-sm: 6px;
    --r:    10px;
    --r-lg: 14px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --shadow:    0 4px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);

    --t-fast: 120ms ease;
    --t:      200ms ease;
}

/* Base
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[hidden] { display: none !important; }
.text-muted { color: var(--text-muted); }

/* Layout
   ============================================================ */
.container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}
.container--wide {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header
   ============================================================ */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.hdr-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.2px;
    flex-shrink: 0;
}
.logo-mark { color: var(--primary); }

.site-nav {
    display: flex;
    gap: 4px;
    align-items: center;
}

.nav-link {
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    transition: background var(--t-fast), color var(--t-fast);
}
.nav-link:hover,
.nav-link.nav-active { color: var(--text); background: var(--surface-subtle); }

.hdr-auth {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    margin-left: auto;
    padding: 4px;
}

/* Flash bar
   ============================================================ */
.flash-bar {
    padding: 12px 20px;
    font-size: 14px;
    text-align: center;
}
.flash-success { background: var(--success-bg); color: var(--success); border-bottom: 1px solid var(--success-border); }
.flash-error   { background: var(--error-bg);   color: var(--error);   border-bottom: 1px solid var(--error-border);   }

/* Main
   ============================================================ */
.site-main { flex: 1; padding: 48px 0 72px; }
.pricing-main .hero { max-width: 980px; margin-left: auto; margin-right: auto; padding: 0 20px; text-align: center; }

/* Hero
   ============================================================ */
.hero { text-align: center; margin-bottom: 32px; }
.hero-title {
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -0.5px;
    color: var(--text);
    margin-bottom: 8px;
}
.hero-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto;
}

/* Cards
   ============================================================ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 28px;
}

/* Converter layout (with optional ad sidebars)
   ============================================================ */
.converter-layout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.converter-col {
    width: 100%;
    max-width: 700px;
    min-width: 0;
}

/* Ad containers — reserved space to reduce CLS
   ============================================================ */
.ad-sidebar {
    width: 160px;
    flex-shrink: 0;
    min-height: 600px;
}

.ad-leaderboard {
    min-height: 90px;
    margin-bottom: 20px;
    background: var(--surface-subtle);
    border: 1px dashed var(--border);
    border-radius: var(--r);
}
.ad-leaderboard--bottom { margin-top: 20px; margin-bottom: 0; }

/* Limit banner (free tier)
   ============================================================ */
.limit-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--r);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--warning);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.limit-banner__cta {
    color: var(--warning);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.limit-banner__cta:hover { text-decoration: underline; }

/* Upload zone
   ============================================================ */
.upload-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--r);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
}
.upload-zone:hover,
.upload-zone.is-dragover { border-color: var(--primary); background: var(--primary-tint); }
.upload-zone:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }

.upload-input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 1;
}

.upload-icon { color: var(--text-muted); margin-bottom: 14px; display: flex; justify-content: center; }
.upload-zone:hover .upload-icon,
.upload-zone.is-dragover .upload-icon { color: var(--primary); }

.upload-primary { font-size: 15px; color: var(--text); font-weight: 500; margin-bottom: 6px; }
.upload-link    { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.upload-hint    { font-size: 13px; color: var(--text-muted); }

/* File card
   ============================================================ */
.file-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-top: 16px;
}
.file-card-icon   { flex-shrink: 0; color: var(--primary); }
.file-card-info   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-card-name   { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-card-size   { font-size: 12px; color: var(--text-muted); }
.file-card-clear  {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 4px; border-radius: 4px;
    display: flex; align-items: center;
    transition: color var(--t-fast), background var(--t-fast);
}
.file-card-clear:hover { color: var(--error); background: var(--error-bg); }

/* Format selector
   ============================================================ */
.format-section { margin-top: 24px; }
.section-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 10px;
}
.format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 8px;
}
.format-option { cursor: pointer; position: relative; }
.format-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.format-inner {
    display: flex; flex-direction: column; gap: 3px;
    padding: 11px 12px;
    border: 2px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color var(--t), background var(--t), box-shadow var(--t);
    background: var(--surface);
}
.format-option input:checked + .format-inner {
    border-color: var(--primary);
    background: var(--primary-tint);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.format-option:hover .format-inner { border-color: var(--primary); }
.format-name { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.format-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.format-option input:checked + .format-inner .format-name { color: var(--primary); }

/* Action row
   ============================================================ */
.action-row { margin-top: 24px; }
.btn-full    { width: 100%; }

/* Progress
   ============================================================ */
.progress-section { margin-top: 24px; }
.progress-track   {
    height: 4px; background: var(--border); border-radius: 4px;
    overflow: hidden; margin-bottom: 10px;
}
.progress-fill  {
    height: 100%; background: var(--primary); border-radius: 4px;
    width: 0%; transition: width 200ms ease;
}
.progress-label { font-size: 13px; color: var(--text-secondary); text-align: center; }

/* Result panels
   ============================================================ */
.result-panel {
    margin-top: 24px;
    padding: 18px;
    border-radius: var(--r);
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.result-success { background: var(--success-bg); border-color: var(--success-border); }
.result-error   { background: var(--error-bg);   border-color: var(--error-border);   }
.result-expired { background: var(--expired-bg); border-color: var(--expired-border); }
.result-queued  { background: var(--warning-bg); border-color: var(--warning-border); }

.result-icon-wrap {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.result-icon-success { background: var(--success); color: #fff; }
.result-icon-error   { background: var(--error);   color: #fff; }
.result-icon-queued  { background: var(--warning);  color: #fff; }

.result-title  { font-size: 14px; font-weight: 600; color: var(--text); }
.result-desc   { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Countdown / expiry notice
   ============================================================ */
.expiry-notice {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.expiry-notice.expiry-urgent { color: var(--error); font-weight: 500; }

.result-upgrade { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.result-upgrade a { color: var(--primary); }

/* Buttons
   ============================================================ */
.btn-primary, .btn-primary-sm, .btn-primary-full {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff;
    border: none; border-radius: var(--r-sm);
    font-family: var(--font); font-weight: 600; cursor: pointer;
    transition: background var(--t-fast), box-shadow var(--t-fast);
    text-decoration: none;
}
.btn-primary     { padding: 12px 20px; font-size: 15px; }
.btn-primary-sm  { padding: 7px 14px;  font-size: 13px; }
.btn-primary-full { padding: 12px 20px; font-size: 15px; width: 100%; }

.btn-primary:hover,
.btn-primary-sm:hover,
.btn-primary-full:hover { background: var(--primary-hover); box-shadow: var(--shadow-sm); }

.btn-ghost, .btn-ghost-sm, .btn-ghost-full {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font-family: var(--font); font-weight: 500; cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
    text-decoration: none;
}
.btn-ghost      { padding: 10px 18px; font-size: 14px; }
.btn-ghost-sm   { padding: 7px 14px;  font-size: 13px; }
.btn-ghost-full { padding: 12px 20px; font-size: 14px; width: 100%; }

.btn-ghost:hover,
.btn-ghost-sm:hover,
.btn-ghost-full:hover { background: var(--surface-subtle); border-color: var(--border-strong); }

.btn-download {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; background: var(--success); color: #fff;
    border: none; border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
    text-decoration: none; cursor: pointer; font-family: var(--font);
    transition: background var(--t-fast);
}
.btn-download:hover { background: var(--success-hover); }
.btn-download[disabled], .btn-download.disabled {
    opacity: 0.5; pointer-events: none; cursor: default;
}

.btn-current {
    display: inline-block; padding: 10px 20px;
    background: var(--surface-subtle); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: 14px; font-weight: 500; text-align: center;
}

.btn-danger-sm {
    display: inline-flex; align-items: center;
    padding: 6px 12px; font-size: 12px; font-weight: 500;
    background: var(--error-bg); color: var(--error);
    border: 1px solid var(--error-border); border-radius: var(--r-sm);
    cursor: pointer; font-family: var(--font);
    transition: background var(--t-fast);
}
.btn-danger-sm:hover { background: var(--error); color: #fff; }

/* Features
   ============================================================ */
.features {
    display: flex;
    gap: 20px;
    margin-top: 28px;
}
.feature {
    display: flex;
    gap: 12px;
    flex: 1;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.feature-icon { flex-shrink: 0; color: var(--primary); opacity: 0.8; margin-top: 2px; }
.feature strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.feature p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Plan badges
   ============================================================ */
.plan-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.plan-badge--free  { background: #f3f4f6; color: #6b7280; }
.plan-badge--light { background: #e0f2fe; color: #0369a1; }
.plan-badge--basic { background: #ede9fe; color: #6d28d9; }
.plan-badge--pro   { background: #fef3c7; color: #b45309; }

/* Pricing page
   ============================================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1060px;
    margin: 0 auto 32px;
    padding: 0 24px;
    box-sizing: border-box;
}

.pricing-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}
.pricing-card--featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-ring), var(--shadow);
}
.pricing-card--current {
    border-color: var(--success-border);
    background: var(--success-bg);
}
.pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.pricing-card__header { margin-bottom: 20px; text-align: left; }
.pricing-card__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.pricing-card__price { display: flex; align-items: baseline; gap: 3px; }
.price-amount { font-size: 32px; font-weight: 750; letter-spacing: -1px; color: var(--text); }
.price-period { font-size: 13px; color: var(--text-muted); }

.pricing-card__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
    margin-bottom: 24px;
}
.pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
    text-align: left;
}
.pricing-card__features li span {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.pricing-card__features .check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--success);
    margin-top: 1px;
}

.pricing-card__cta { margin-top: auto; }

.trust-bar {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 auto 48px;
    max-width: 940px;
    padding: 16px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-sizing: border-box;
}

/* FAQ
   ============================================================ */
.faq { margin-top: 8px; max-width: 980px; margin-left: auto; margin-right: auto; padding: 0 20px; box-sizing: border-box; }
.faq__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    margin-bottom: 28px;
}
.faq__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.faq__item {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.faq__item h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.faq__item p  { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Blog
   ============================================================ */
.blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.blog-cat {
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.blog-cat:hover    { border-color: var(--primary); color: var(--primary); }
.blog-cat--active  { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.blog-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow var(--t);
}
.blog-card:hover { box-shadow: var(--shadow); }

.blog-card__cat {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--primary);
    text-decoration: none;
}
.blog-card__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
.blog-card__title a { text-decoration: none; color: var(--text); }
.blog-card__title a:hover { color: var(--primary); }
.blog-card__desc  { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.blog-card__meta  { margin-top: auto; display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); }

/* Blog post layout
   ============================================================ */
.blog-post-layout {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 40px;
    align-items: start;
}

.blog-post__header { margin-bottom: 32px; }
.blog-post__title  {
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -0.4px;
    line-height: 1.3;
    margin: 10px 0 16px;
}
.blog-post__meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.blog-post__body {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-secondary);
}
.blog-post__body h2, .blog-post__body h3 {
    color: var(--text);
    margin: 28px 0 12px;
    font-weight: 700;
}
.blog-post__body h2 { font-size: 20px; }
.blog-post__body h3 { font-size: 17px; }
.blog-post__body p  { margin-bottom: 16px; }
.blog-post__body a  { color: var(--primary); }
.blog-post__body ul,
.blog-post__body ol { padding-left: 24px; margin-bottom: 16px; }
.blog-post__body li { margin-bottom: 6px; }
.blog-post__body code {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.blog-post__body pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 16px;
    border-radius: var(--r);
    overflow-x: auto;
    margin-bottom: 16px;
    font-size: 13px;
}
.blog-post__body pre code { background: none; border: none; padding: 0; color: inherit; }

.blog-post__footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.blog-post__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-muted);
}

.blog-sidebar .blog-cta { position: sticky; top: 80px; }
.blog-cta h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.blog-cta p  { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }

/* Account page
   ============================================================ */
.account-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.account-card__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.plan-summary { display: flex; flex-direction: column; gap: 14px; }
.plan-summary__badge { align-self: flex-start; }
.plan-summary__details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    font-size: 13px;
}
.plan-summary__details dt { color: var(--text-muted); }
.plan-summary__details dd { font-weight: 500; }
.plan-summary__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tables
   ============================================================ */
.table-wrap { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table th, .data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-subtle); }

/* Status badges
   ============================================================ */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.status-badge--completed  { background: var(--success-bg);   color: var(--success); }
.status-badge--failed     { background: var(--error-bg);     color: var(--error); }
.status-badge--pending    { background: #fef9c3; color: #854d0e; }
.status-badge--processing { background: var(--primary-tint); color: var(--primary); }
.status-badge--expired,
.status-badge--deleted    { background: #f3f4f6; color: #6b7280; }

/* Alerts
   ============================================================ */
.alert {
    padding: 12px 16px;
    border-radius: var(--r);
    font-size: 14px;
    margin-bottom: 16px;
}
.alert-warning { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); }
.alert-error   { background: var(--error-bg);   border: 1px solid var(--error-border);   color: var(--error); }

/* Admin stats
   ============================================================ */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px 16px;
    text-align: center;
}
.stat-num   { font-size: 28px; font-weight: 750; letter-spacing: -1px; color: var(--text); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.admin-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.admin-nav-card {
    display: block;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    text-decoration: none;
    color: var(--text);
    transition: box-shadow var(--t);
}
.admin-nav-card:hover { box-shadow: var(--shadow); }
.admin-nav-card strong { display: block; margin-bottom: 4px; }
.admin-nav-card p { font-size: 13px; color: var(--text-muted); }

/* Pagination
   ============================================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    font-size: 14px;
}
.pagination__link { color: var(--primary); text-decoration: none; }
.pagination__link:hover { text-decoration: underline; }
.pagination__info { color: var(--text-muted); }

/* Form rows (admin)
   ============================================================ */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Footer
   ============================================================ */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin-top: auto;
    padding-bottom: 32px;
}
.footer-inner {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 24px;
}
.footer-brand { max-width: 320px; }
.footer-logo  { font-size: 15px; font-weight: 700; display: block; margin-bottom: 8px; }
.footer-brand p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.footer-links { display: grid; grid-template-columns: repeat(2, 120px); gap: 24px; }
.footer-links div { display: flex; flex-direction: column; gap: 8px; }
.footer-links strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.footer-links a { font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom .container { padding-top: 16px; padding-bottom: 8px; }
.footer-bottom p { font-size: 12px; color: var(--text-muted); text-align: center; }

/* Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-post-layout { grid-template-columns: 1fr; }
    .blog-sidebar { display: none; }
    .admin-stats { grid-template-columns: repeat(3, 1fr); }
    .ad-sidebar { display: none; }
}

@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .faq__grid    { grid-template-columns: 1fr; }
    .blog-grid    { grid-template-columns: 1fr; }
    .account-grid { grid-template-columns: 1fr; }
    .admin-stats  { grid-template-columns: repeat(2, 1fr); }
    .admin-nav-grid { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; gap: 24px; }
    .footer-links { grid-template-columns: repeat(2, 1fr); }
    .features { flex-direction: column; }
    .form-row { grid-template-columns: 1fr; }
    .hero-title { font-size: 24px; }
}

@media (max-width: 600px) {
    .site-main { padding: 32px 0 48px; }
    .card { padding: 20px 16px; }
    .converter-layout { padding: 0 16px; }
    .hdr-inner { padding: 12px 16px; }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        padding: 8px 16px;
        display: none;
    }
    .site-nav.nav-open { display: flex; }
    .hdr-auth {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--surface);
        flex-direction: column;
        align-items: stretch;
        padding: 8px 16px 16px;
        display: none;
        border-bottom: 1px solid var(--border);
        margin-top: 160px; /* adjust if needed */
    }
    .hdr-auth.auth-open { display: flex; }
    .nav-toggle { display: block; }

    .result-actions { flex-direction: column; }
    .btn-download, .btn-ghost { width: 100%; justify-content: center; }
    .admin-stats  { grid-template-columns: 1fr 1fr; }
}