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

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
    --bg:             #08090d;
    --surface:        #0f1117;
    --surface-2:      #161820;
    --surface-3:      #1d1f2a;
    --border:         #232533;
    --border-subtle:  #1a1c26;
    --text:           #f1f2f6;
    --text-2:         #c8cad4;
    --muted:          #7c7f93;
    --accent:         #6ee7ff;
    --accent-strong:  #22d3ee;
    --accent-glow:    rgba(34, 211, 238, 0.15);
    --accent-glow-sm: rgba(34, 211, 238, 0.08);

    /* pillar colours */
    --phone-color:    #6ee7ff;
    --phone-glow:     rgba(110, 231, 255, 0.12);
    --tv-color:       #a78bfa;
    --tv-glow:        rgba(167, 139, 250, 0.12);
    --car-color:      #f59e0b;
    --car-glow:       rgba(52, 211, 153, 0.12);

    --radius-sm:   10px;
    --radius-md:   14px;
    --radius-lg:   18px;
    --radius-xl:   22px;
    --radius-2xl:  28px;

    --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2);
    --shadow-lift: 0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
}

body.theme-light {
    --bg:            #f4f5f9;
    --surface:       #ffffff;
    --surface-2:     #f0f2f8;
    --surface-3:     #e8ebf3;
    --border:        #dde0ec;
    --border-subtle: #eaecf4;
    --text:          #111218;
    --text-2:        #3c3f52;
    --muted:         #5e6278;
    --accent:        #0891b2;
    --accent-strong: #06b6d4;
    --accent-glow:   rgba(8,145,178,0.1);
    --accent-glow-sm:rgba(8,145,178,0.06);

    --phone-color:  #0891b2;
    --phone-glow:   rgba(8,145,178,0.08);
    --tv-color:     #7c3aed;
    --tv-glow:      rgba(124,58,237,0.08);
    --car-color:    #059669;
    --car-glow:     rgba(5,150,105,0.08);
}

/* ─── RESET / BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ─── HEADER ─────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(8, 9, 13, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.theme-light .site-header {
    background: rgba(244, 245, 249, 0.85);
}

.site-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.site-logo {
    color: var(--accent);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

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

.site-nav a {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

.site-nav a:hover {
    color: var(--text);
    background: var(--surface-2);
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer {
    margin-top: 80px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface);
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px;
    color: var(--muted);
    font-size: 13px;
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.section        { margin-top: 52px; }
.section-tight  { margin-top: 16px; }

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ─── SECTION HEAD ───────────────────────────────────────── */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

.section-head h2 {
    margin: 4px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: gap 0.15s;
}
.section-link:hover { gap: 8px; }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    background: var(--accent-strong);
    color: #042428;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:active { transform: translateY(0); }

.btn-primary--hero {
    padding: 14px 26px;
    font-size: 15px;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow-sm);
}

/* keep legacy names working */
.btn-secondary { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
}

/* ─── HOME HERO ──────────────────────────────────────────── */
.home-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 52px 52px;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    margin-bottom: 16px;
    isolation: isolate;
}

/* ambient glow orbs */
.home-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.home-hero__orb--1 {
    width: 500px;
    height: 500px;
    top: -180px;
    left: -120px;
    background: radial-gradient(circle, rgba(34,211,238,0.09) 0%, transparent 70%);
}
.home-hero__orb--2 {
    width: 360px;
    height: 360px;
    bottom: -100px;
    right: -60px;
    background: radial-gradient(circle, rgba(167,139,250,0.07) 0%, transparent 70%);
}

.home-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

/* live badge */
.home-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.home-hero__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-strong);
    box-shadow: 0 0 6px var(--accent-strong);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* title */
.home-hero__title {
    margin: 0 0 20px;
    font-size: 58px;
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.04em;
    color: var(--text);
}

.home-hero__gradient-text {
    background: linear-gradient(95deg, var(--accent-strong) 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-hero__text {
    margin: 0 0 28px;
    max-width: 600px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
}

/* CTA row */
.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

/* trust strip */
.home-hero__trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.home-hero__trust-sep {
    width: 1px;
    height: 14px;
    background: var(--border);
}

.home-hero__trust-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--car-color);
}

.home-hero__trust-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--car-color);
    animation: pulse-dot 2s infinite;
}

/* ─── PILLAR CARDS ───────────────────────────────────────── */
.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.pillar-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: var(--shadow-card);
}

.pillar-card:hover {
    /*transform: translateY(-3px);*/
    box-shadow: var(--shadow-lift);
}

.pillar-card--phone:hover { border-color: var(--phone-color); box-shadow: 0 8px 32px var(--phone-glow); }
.pillar-card--tv:hover    { border-color: var(--tv-color);    box-shadow: 0 8px 32px var(--tv-glow); }
.pillar-card--car:hover   { border-color: var(--car-color);   box-shadow: 0 8px 32px var(--car-glow); }

.pillar-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.pillar-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.pillar-card--phone .pillar-card__icon { background: rgba(110,231,255,0.07); border-color: rgba(110,231,255,0.15); }
.pillar-card--tv    .pillar-card__icon { background: rgba(167,139,250,0.07); border-color: rgba(167,139,250,0.15); }
.pillar-card--car   .pillar-card__icon { background: rgba(52,211,153,0.07);  border-color: rgba(52,211,153,0.15); }

.pillar-card__arrow {
    color: var(--muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s, transform 0.18s;
}
.pillar-card:hover .pillar-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

.pillar-card h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pillar-card p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    flex: 1;
}

.pillar-card__cta {
    font-size: 13px;
    font-weight: 600;
}

.pillar-card--phone .pillar-card__cta { color: var(--phone-color); }
.pillar-card--tv    .pillar-card__cta { color: var(--tv-color); }
.pillar-card--car   .pillar-card__cta { color: var(--car-color); }

/* ─── STATS STRIP ────────────────────────────────────────── */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.stats-card {
    padding: 22px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: var(--shadow-card);
}

.stats-card strong {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-card span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.stats-card--live strong {
    background: none;
    -webkit-text-fill-color: var(--car-color);
    color: var(--car-color);
}

.stats-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--car-color);
    box-shadow: 0 0 8px var(--car-color);
    animation: pulse-dot 2s infinite;
    flex-shrink: 0;
}

/* ─── CATEGORY GRID ──────────────────────────────────────── */
.category-grid {
    display: grid;
    gap: 12px;
}

.category-grid--home {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.category-card {
    display: block;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    box-shadow: var(--shadow-card);
}

.category-card:hover {
    border-color: var(--accent);
    background: var(--surface-2);
    transform: translateY(-2px);
}

.category-card h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.category-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

/* ─── APP GRID ───────────────────────────────────────────── */
.home-app-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* ─── APP CARD ───────────────────────────────────────────── */
.app-grid { display: grid; gap: 14px; }

.app-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-card);
}

.app-card:hover {
    border-color: var(--border);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

.app-card__body {
    display: flex;
    gap: 16px;
    padding: 18px;
}

.app-card__icon { flex: 0 0 64px; }

.app-card__icon img,
.app-card__icon-fallback {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.app-card__icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 700;
    font-size: 24px;
}

.app-card__content { min-width: 0; flex: 1; }

.app-card__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.app-card__title a:hover { color: var(--accent); }

.app-card__meta,
.app-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--muted);
    font-size: 12px;
}

.app-card__meta { margin-bottom: 10px; }

.app-card__desc {
    margin: 0 0 12px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.6;
}

/* ─── INFO PANEL ─────────────────────────────────────────── */
.info-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.info-panel__col {
    padding: 40px 40px;
}

.info-panel__col:first-child {
    border-right: 1px solid var(--border);
    background: var(--surface-2);
}

.info-panel__col h2 {
    margin: 4px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.info-panel__col p {
    margin: 0 0 24px;
    color: var(--muted);
    line-height: 1.75;
    font-size: 15px;
}

.info-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
}

.info-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-glow-sm);
    border: 1px solid rgba(34,211,238,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 700;
}

/* ─── MISC ───────────────────────────────────────────────── */
.page-header, .hero-block {
    margin-bottom: 24px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.page-header h1, .hero-block h1 { margin: 0 0 12px; font-size: 38px; letter-spacing: -0.03em; }
.page-header p,  .hero-block p  { margin: 0; color: var(--muted); line-height: 1.65; }

.empty-state {
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--muted);
    background: var(--surface);
}

.breadcrumbs {
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 0 24px;
    color: var(--muted);
    font-size: 13px;
}
.breadcrumbs a { color: var(--accent); }

.pagination {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--muted);
    font-size: 14px;
}
.pagination a { color: var(--accent); font-weight: 600; }

/* ─── APP DETAIL ─────────────────────────────────────────── */
.app-hero {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.app-hero__main { display: flex; gap: 20px; align-items: flex-start; }
.app-hero__icon { flex: 0 0 96px; }

.app-hero__icon img,
.app-hero__icon-fallback {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.app-hero__icon-fallback {
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 700; color: var(--muted);
}
.app-hero__content h1 { margin: 0 0 12px; font-size: 38px; letter-spacing: -0.03em; }

.app-meta-row, .app-stat-row {
    display: flex; flex-wrap: wrap; gap: 8px 12px;
    color: var(--muted); margin-bottom: 14px;
}

.app-summary { margin: 0 0 14px; color: var(--text-2); line-height: 1.65; }

.trust-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.trust-item {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--muted);
    font-size: 14px;
}

.screenshot-strip {
    display: flex; gap: 12px; overflow-x: auto;
    margin-bottom: 20px; padding-bottom: 4px;
    scrollbar-width: thin;
}
.screenshot-strip__item {
    min-width: 200px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
}
.screenshot-strip__item img { width: 100%; height: auto; display: block; }

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.content-main,
.content-sidebar { display: grid; gap: 20px; align-content: start; }

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    color: var(--text-2);
}

.long-desc, .simple-list { color: var(--text-2); line-height: 1.75; }
.simple-list { margin: 0; padding-left: 18px; }
.sidebar-card h3 { margin-top: 0; }

.btn-disabled {
    display: inline-block; width: 100%; text-align: center;
    padding: 14px 18px; border-radius: var(--radius-md); font-weight: 700;
    background: var(--surface-2); color: var(--muted);
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .home-app-grid             { grid-template-columns: repeat(2, 1fr); }
    .category-grid--home       { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    .home-hero                 { padding: 40px 28px 36px; }
    .home-hero__title          { font-size: 42px; }
    .home-hero__text           { font-size: 16px; }
    .pillar-grid               { grid-template-columns: 1fr; }
    .stats-strip               { grid-template-columns: repeat(2, 1fr); }
    .category-grid--home       { grid-template-columns: repeat(2, 1fr); }
    .home-app-grid             { grid-template-columns: 1fr; }
    .info-panel                { grid-template-columns: 1fr; }
    .info-panel__col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
    .info-panel__col           { padding: 28px 24px; }
    .section-head              { flex-direction: column; align-items: flex-start; }
    .content-grid              { grid-template-columns: 1fr; }
    .app-hero__main            { flex-direction: column; }
    .app-hero__content h1      { font-size: 30px; }
}

@media (max-width: 540px) {
    .home-hero__title          { font-size: 34px; }
    .stats-strip               { grid-template-columns: 1fr 1fr; }
    .category-grid--home       { grid-template-columns: 1fr 1fr; }
    .home-hero__actions        { flex-direction: column; }
    .home-hero__actions a      { width: 100%; }
    .page-wrap                 { padding: 20px 16px 48px; }
}


/*explore more*/

/* ─── INLINE LINKS ───────────────────────────────────────── */
.inline-link {
    color: var(--accent);
    font-weight: 600;
    position: relative;
    transition: color 0.15s ease;
}

.inline-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.inline-link:hover {
    color: var(--accent-strong);
}

.inline-link:hover::after {
    opacity: 1;
    transform: translateY(-1px);
}

.download-note {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.7;
}


.muted-copy {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    margin-top: 0;
}

.long-desc p {
    margin: 0 0 14px;
}

.badge-tv {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--tv-glow);
    color: var(--tv-color);
    border: 1px solid var(--tv-color);
    margin-bottom: 6px;
}

.badge-flag {
    display: inline-block;
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border);
    margin-left: 4px;
}

.badge-flag--warn {
    color: #fbbf24;
    border-color: #fbbf24;
}


.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 24px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.filter-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.filter-chip.is-active {
    background: var(--accent-glow-sm);
    border-color: var(--accent);
    color: var(--accent);
}


.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.archive-tile {
    background: #161b22;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.archive-tile__icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: #f4f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.archive-tile__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive-tile__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.archive-tile__title {
    font-size: 1rem;
    line-height: 1.35;
    margin: 0;
}

.archive-tile__meta,
.archive-tile__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.9rem;
    color: #666;
}

.archive-tile__actions {
    margin-top: auto;
    padding-top: 8px;
}


/* search */

.site-search {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    width: 100%;
    flex-wrap: wrap;
}

.site-search__input {
    flex: 1 1 240px;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #161b22;
    color: #f3f4f6;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.site-search__input::placeholder {
    color: #9ca3af;
}

.site-search__button {
    height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.site-search__button:hover {
    background: #1d4ed8;
}

@media (max-width: 640px) {
    .site-search {
        flex-wrap: nowrap;
    }

    .site-search__input {
        flex: 1 1 auto;
    }

    .site-search__button {
        flex: 0 0 auto;
    }
}









.site-header__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.site-nav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.site-search {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: stretch;
}

.site-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #161b22;
    color: #f3f4f6;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.site-search__input::placeholder {
    color: #9ca3af;
}

.site-search__button {
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
}

.site-search__button:hover {
    background: #1d4ed8;
}

@media (max-width: 640px) {
    .site-header__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-nav {
        width: 100%;
    }

    .site-search {
        width: 100%;
    }
}


.home-hero--tv {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    border-radius: 24px;
}

.home-hero__bg-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home-hero__bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    transform: scale(1.02);
}

.home-hero__bg-slide.is-active {
    opacity: 1;
}

.home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(135deg, rgba(5, 10, 20, 0.78), rgba(5, 10, 20, 0.45)),
        linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
}

.home-hero--tv .home-hero__inner {
    position: relative;
    z-index: 2;
}


/* TV slide */

.home-hero--tv {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    border-radius: 24px;
}

.home-hero__bg-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home-hero__bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
    transform: scale(1.02);
}

.home-hero__bg-slide.is-active {
    opacity: 1;
}

.home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(135deg, rgba(5,10,20,0.78), rgba(5,10,20,0.45)),
        linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
}

.home-hero--tv .home-hero__inner {
    position: relative;
    z-index: 2;
}

.home-hero__content-carousel {
    min-height: 260px;
}

.home-hero__content-slide {
    display: none;
}

.home-hero__content-slide.is-active {
    display: block;
}

.home-hero__controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.home-hero__nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(0,0,0,0.28);
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.home-hero__dots {
    display: flex;
    gap: 8px;
}

.home-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    padding: 0;
}

.home-hero__dot.is-active {
    background: #ffffff;
}


/* hide pkg overflow */

.details-grid div {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* badge */


.badge-tv--auto {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border-color: #f59e0b;
}


/* stop drift  */


/* prevent horizontal page drift on mobile detail pages */
html, body {
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}



/* long machine strings should wrap */
.app-hero__content,
.app-summary,
.app-meta-row,
.details-grid div,
.details-grid span,
.details-grid a,
.feature-card,
.muted-copy {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 768px) {
    .content-grid,
    .app-hero__main,
    .details-grid {
        min-width: 0;
        max-width: 100%;
    }

    .content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-hero__main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .details-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .content-main,
    .content-sidebar,
    .app-hero__content,
    .app-hero__icon,
    .feature-card,
    .details-grid > div {
        min-width: 0;
        max-width: 100%;
    }

    .app-hero__icon img,
    .feature-card img,
    .content-main img,
    .content-sidebar img {
        max-width: 100%;
        height: auto;
    }
}

/* upform  */

.form-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
}

.form-input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.12);
    background: #161b22;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}

.form-input::placeholder {
    color: var(--muted);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow-sm);
}

.form-textarea {
    resize: vertical;
    line-height: 1.6;
}


/* Submit APK form */
.submission-form {
    display: grid;
    gap: 18px;
}

.submission-form__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.submission-form__field {
    min-width: 0;
}

.submission-form label,
.form-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
}

.submission-form input[type="text"],
.submission-form input[type="email"],
.submission-form input[type="file"],
.submission-form textarea,
.form-input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.12);
    background: #161b22;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}

.submission-form textarea,
.form-textarea {
    resize: vertical;
    line-height: 1.6;
}

.submission-form input::placeholder,
.submission-form textarea::placeholder,
.form-input::placeholder {
    color: var(--muted);
}

.submission-form input:focus,
.submission-form textarea:focus,
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow-sm);
}

.submission-form input[type="file"] {
    padding: 10px 12px;
}

/* style the Choose File button */
.submission-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    padding: 8px 12px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.submission-form input[type="file"]::file-selector-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 860px) {
    .submission-form__grid {
        grid-template-columns: 1fr;
    }
}


/*review*/
.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.admin-table th,
.admin-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: var(--text-2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-table td {
    color: var(--text);
    font-size: 14px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: var(--text-2);
}

.status-pill--pending {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.status-pill--approved {
    background: rgba(52, 211, 153, 0.12);
    color: #f59e0b;
    border-color: rgba(52, 211, 153, 0.35);
}

.status-pill--rejected {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.35);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}



.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.btn-danger:hover {
    background: rgba(248, 113, 113, 0.22);
}




.hash-value {
    font-family: ui-monospace, SFMono-Regular, Monaco, monospace;
    font-size: 0.85em;
    padding: 2px;
    
    /* "Safe" Green Theme */
    color: #50a957;            /* Deep emerald text for contrast */
    
    /* Keeps it from breaking the layout */
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
    max-width: 100%;
}




.download-source-list {
    display: grid;
    gap: 14px;
}

.download-source-card {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px;
}

.download-source-card h4 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.download-source-card p {
    margin: 0 0 10px;
}



.account-profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.account-avatar {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1.6rem;
    font-weight: 800;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-tabs {
    margin-top: 20px;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 8px;
}

.tab-button {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 700;
}

.tab-button.is-active,
.tab-button:hover {
    color: var(--text);
    border-color: rgba(110,231,255,0.35);
    background: rgba(110,231,255,0.12);
}

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: block;
}


.nav-logout-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-link-button {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.nav-link-button:hover {
    text-decoration: underline;
}



/*login*/

/* ─── AUTH (LOGIN / REGISTER) ────────────────────────────── */
.auth-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 56px 20px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-card {
    position: relative;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--shadow-lift);
}

.auth-card__inner {
    position: relative;
    z-index: 1;
    padding: 40px 36px;
}

/* ambient glow */
.auth-card__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.auth-card__orb--1 {
    width: 360px;
    height: 360px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(34,211,238,0.10) 0%, transparent 70%);
}
.auth-card__orb--2 {
    width: 280px;
    height: 280px;
    bottom: -120px;
    right: -100px;
    background: radial-gradient(circle, rgba(167,139,250,0.08) 0%, transparent 70%);
}

/* head */
.auth-card__head {
    margin-bottom: 26px;
    text-align: center;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.auth-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-strong);
    box-shadow: 0 0 6px var(--accent-strong);
    animation: pulse-dot 2s infinite;
}

.auth-title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.auth-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

/* alert */
.auth-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.08);
    color: #fca5a5;
    font-size: 13px;
    line-height: 1.55;
}
.auth-alert__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #f87171;
}
.auth-alert p { margin: 0; }
.auth-alert p + p { margin-top: 4px; }

/* form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field {
    display: flex;
    flex-direction: column;
}

.auth-field__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.auth-field__row .form-label {
    margin-bottom: 0;
}

.auth-field__hint {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    transition: color 0.15s;
}
.auth-field__hint:hover { color: var(--accent-strong); }

/* input with icon */
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
    transition: color 0.15s;
}

.auth-input {
    padding-left: 42px !important;
    padding-right: 42px !important;
    height: 46px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.auth-input:focus + .auth-toggle,
.auth-input-wrap:focus-within .auth-input-icon {
    color: var(--accent);
}

.auth-toggle {
    position: absolute;
    right: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.auth-toggle svg { width: 16px; height: 16px; }
.auth-toggle:hover {
    color: var(--text);
    background: var(--surface-2);
}
.auth-toggle.is-active { color: var(--accent); }

/* checkbox */
.auth-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-2);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    margin-top: 2px;
}
.auth-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-strong);
    cursor: pointer;
}

/* submit */
.auth-submit {
    width: 100%;
    margin-top: 6px;
    padding: 14px 22px;
    font-size: 15px;
}
.auth-submit svg {
    transition: transform 0.18s ease;
}
.auth-submit:hover svg {
    transform: translateX(3px);
}

/* divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

/* foot */
.auth-foot {
    margin: 0;
    text-align: center;
    color: var(--text-2);
    font-size: 14px;
}

/* trust line */
.auth-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}
.auth-trust__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--car-color);
    box-shadow: 0 0 6px var(--car-color);
    animation: pulse-dot 2s infinite;
    flex-shrink: 0;
}

/* responsive */
@media (max-width: 540px) {
    .auth-wrap { padding: 32px 16px 48px; }
    .auth-card__inner { padding: 30px 22px; }
    .auth-title { font-size: 26px; }
    .auth-trust { font-size: 11px; line-height: 1.5; }
}



/* =user dash= */

/* ─── ACCOUNT DASHBOARD ──────────────────────────────────── */

/* HERO */
.account-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    padding: 32px 32px 0;
    margin-bottom: 24px;
    isolation: isolate;
    box-shadow: var(--shadow-card);
}

.account-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.account-hero__orb--1 {
    width: 420px; height: 420px;
    top: -180px; left: -120px;
    background: radial-gradient(circle, rgba(34,211,238,0.10) 0%, transparent 70%);
}
.account-hero__orb--2 {
    width: 320px; height: 320px;
    bottom: -160px; right: -80px;
    background: radial-gradient(circle, rgba(167,139,250,0.07) 0%, transparent 70%);
}

.account-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 28px;
}

.account-hero__main {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.account-avatar--lg {
    width: 88px;
    height: 88px;
    font-size: 2rem;
    border: 1px solid var(--border);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px rgba(34,211,238,0.06);
}

.account-hero__text { min-width: 0; }

.account-hero__name {
    margin: 4px 0 6px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.account-hero__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 14px;
}
.account-hero__email { overflow-wrap: anywhere; }

.account-hero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* STATS */
.account-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-subtle);
    border-top: 1px solid var(--border-subtle);
    margin: 0 -32px;
}

.account-stat {
    background: var(--surface);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-stat__label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-stat__value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--text);
}
.account-stat__value--ok   { color: var(--car-color); }
.account-stat__value--warn { color: #f59e0b; }

/* SECTION HEAD inside tabs */
.account-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.account-section-head h2 {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.account-section-head__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

/* TABS — upgraded styling */
.account-tabs { margin-top: 8px; }

.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    margin-bottom: 22px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.tab-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.tab-button svg { width: 14px; height: 14px; opacity: 0.85; }

.tab-button:hover {
    color: var(--text);
    background: var(--surface-2);
}

.tab-button.is-active {
    color: #042428;
    background: var(--accent-strong);
    border-color: transparent;
    box-shadow: 0 4px 14px var(--accent-glow);
}
.tab-button.is-active svg { opacity: 1; }

body.theme-light .tab-button.is-active { color: #ffffff; }

/* SUBMISSION LIST */
.submission-list {
    display: grid;
    gap: 14px;
}

.submission-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 22px 24px;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.submission-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lift);
}

.submission-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.submission-card__id {
    margin: 0 0 4px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.submission-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.submission-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border-subtle);
}

.submission-card__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.submission-card__field span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.submission-card__field strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.submission-card__notes {
    margin-top: 6px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
}
.submission-card__notes-label {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.submission-card__notes p {
    margin: 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
}

/* EMPTY STATE */
.account-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 28px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
}
.account-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--muted);
}
.account-empty__icon svg { width: 28px; height: 28px; }
.account-empty h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}
.account-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    max-width: 420px;
    line-height: 1.6;
}

/* SETTINGS GRID */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
}

.settings-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 26px 26px 28px;
    box-shadow: var(--shadow-card);
}

.settings-card__head {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-card__head h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.settings-card__head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.settings-hint {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.settings-card .auth-form { gap: 14px; }
.settings-card .btn-primary,
.settings-card .btn-outline { align-self: flex-start; }

/* SUCCESS variant of auth-alert */
.auth-alert--ok {
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.08);
    color: #6ee7b7;
}
.auth-alert--ok .auth-alert__icon { color: var(--car-color); }

/* RESPONSIVE */
@media (max-width: 860px) {
    .account-hero { padding: 26px 22px 0; }
    .account-hero__name { font-size: 26px; }
    .account-stats {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 -22px;
    }
    .account-avatar--lg { width: 72px; height: 72px; font-size: 1.6rem; }
}

@media (max-width: 540px) {
    .account-hero__inner { flex-direction: column; align-items: flex-start; }
    .account-hero__actions { width: 100%; }
    .account-hero__actions a,
    .account-hero__actions button { flex: 1; }
    .submission-card { padding: 18px; }
    .submission-card__title { font-size: 16px; }
    .tab-list { width: 100%; justify-content: flex-start; }
    .settings-grid { grid-template-columns: 1fr; }
}


/*= submissions =*/


/* ─── SUBMISSIONS PAGE EXTRAS ────────────────────────────── */

/* hero icon tile (replaces avatar on listing page) */
.account-hero__icon-tile {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(34,211,238,0.06);
}
.account-hero__icon-tile svg { width: 30px; height: 30px; }

/* extra stat color */
.account-stat__value--bad { color: #f87171; }

/* filter chip count badge */
.filter-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
.filter-chip.is-active .filter-chip__count {
    background: var(--accent);
    color: #042428;
}

/* submission card – right-side group (duplicate + status pills) */
.submission-card__head-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* file summary row (filename · size) */
.submission-card__file {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    overflow-wrap: anywhere;
}
.submission-card__file svg { color: var(--muted); flex-shrink: 0; }
.submission-card__filename {
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.submission-card__sep { color: var(--muted); }

/* status dots inside meta grid */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.dot--ok    { background: var(--car-color); box-shadow: 0 0 6px var(--car-glow); }
.dot--bad   { background: #f87171; }
.dot--muted { background: var(--muted); }

/* SHA-256 block */
.submission-card__hash {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.submission-card__hash-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.submission-card__hash-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
    font-size: 12px;
}
.submission-card__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.submission-card__copy:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.submission-card__copy.is-copied {
    border-color: var(--car-color);
    color: var(--car-color);
    background: rgba(52,211,153,0.08);
}

/* duplicate warning callout */
.submission-card__warning {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.08);
    color: #fca5a5;
}
.submission-card__warning svg { color: #f87171; flex-shrink: 0; margin-top: 1px; }
.submission-card__warning strong {
    display: block;
    color: #fecaca;
    font-size: 13px;
    margin-bottom: 2px;
}
.submission-card__warning p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}


/*= submitAPK  =*/


/* ─── SUBMIT APK PAGE ────────────────────────────────────── */

.submit-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 8px;
}

/* form sections */
.submit-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 26px 28px;
    box-shadow: var(--shadow-card);
}

.form-section__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-subtle);
}

.form-section__step {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--accent-glow-sm);
    border: 1px solid rgba(34,211,238,0.25);
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}

.form-section__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.form-section__hint {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

/* required marker */
.req { color: var(--accent); }

/* ─── DROPZONE ───────────────────────────────────────────── */
.dropzone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dropzone {
    position: relative;
    display: block;
    cursor: pointer;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    padding: 22px;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    min-height: 150px;
}

.dropzone:hover {
    border-color: var(--accent);
    background: var(--accent-glow-sm);
}

.dropzone.is-dragging {
    border-color: var(--accent-strong);
    background: var(--accent-glow);
    transform: scale(1.01);
}

.dropzone.has-file {
    border-style: solid;
    border-color: var(--car-color);
    background: rgba(52,211,153,0.06);
}

.dropzone__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dropzone__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    pointer-events: none;
}

.dropzone__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dropzone__icon svg { width: 22px; height: 22px; }

.dropzone__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}
.dropzone__text strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.dropzone__text span { color: var(--text-2); }
.dropzone__text small { color: var(--muted); font-size: 12px; }
.dropzone__text code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--accent);
}

.dropzone__preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}
.dropzone__preview svg { color: var(--car-color); flex-shrink: 0; }
.dropzone__preview-img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.dropzone__preview-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.dropzone__preview-text strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.dropzone__preview-text span {
    color: var(--muted);
    font-size: 12px;
}
.dropzone__clear {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
}
.dropzone__clear:hover {
    color: #f87171;
    border-color: #f87171;
}

/* ─── FORM GRID VARIANTS ─────────────────────────────────── */
.submission-form__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ─── SUBMIT ACTIONS ─────────────────────────────────────── */
.submit-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    margin-top: 4px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.submit-actions__btn {
    padding: 14px 26px;
    font-size: 15px;
}

.submit-actions__note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    max-width: 520px;
}

/* ─── SIDEBAR ────────────────────────────────────────────── */
.submit-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 96px;
}

.aside-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 22px 22px;
    box-shadow: var(--shadow-card);
}
.aside-card h3 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
}

.aside-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: var(--text-2);
}
.aside-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}
.aside-tick {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(52,211,153,0.12);
    border: 1px solid rgba(52,211,153,0.3);
    color: var(--car-color);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.aside-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.aside-steps li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.aside-steps__num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.aside-steps strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}
.aside-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.aside-card--info {
    background: var(--accent-glow-sm);
    border-color: rgba(34,211,238,0.25);
}
.aside-card--info h3 { color: var(--accent); }
.aside-card--info p {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.6;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1000px) {
    .submit-layout { grid-template-columns: 1fr; }
    .submit-aside { position: static; }
}

@media (max-width: 640px) {
    .form-section { padding: 22px 18px; }
    .dropzone-grid { grid-template-columns: 1fr; }
    .submission-form__grid--two { grid-template-columns: 1fr; }
}


/*= submissions  =*/


/* ─── ADMIN SUBMISSIONS INDEX ────────────────────────────── */

/* toolbar (filters + search) */
.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 24px 0 16px;
    flex-wrap: wrap;
}

.admin-toolbar .filter-bar {
    margin: 0;
}

/* search input */
.admin-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    max-width: 360px;
}
.admin-search svg {
    position: absolute;
    left: 14px;
    color: var(--muted);
    pointer-events: none;
}
.admin-search__input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-search__input::placeholder { color: var(--muted); }
.admin-search__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow-sm);
}

/* card wrapper */
.admin-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* polished table */
.admin-table--polished {
    min-width: 980px;
}
.admin-table--polished thead th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
}
.admin-table--polished tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    font-size: 14px;
}
.admin-table--polished tbody tr:last-child td {
    border-bottom: none;
}
.admin-table--polished tbody tr {
    transition: background 0.12s;
}
.admin-table--polished tbody tr:hover {
    background: var(--surface-2);
}

/* cell helpers */
.admin-table__id {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Monaco, monospace;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.admin-table__nowrap { white-space: nowrap; }
.admin-table__muted  { color: var(--muted); font-size: 13px; }
.admin-table__actions-col { width: 1%; white-space: nowrap; text-align: right; }

/* app cell */
.admin-app-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.admin-app-cell__title {
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.admin-app-cell__sub {
    color: var(--muted);
    font-size: 12px;
}

/* package code */
.admin-pkg {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-2);
    font-family: ui-monospace, SFMono-Regular, Monaco, monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
    word-break: break-all;
    max-width: 240px;
}

/* user cell */
.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.admin-user-cell__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-glow) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-user-cell__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.admin-user-cell__text strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.admin-user-cell__text span {
    color: var(--muted);
    font-size: 11.5px;
    overflow-wrap: anywhere;
}

/* row action button */
.admin-table__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 12px;
}
.admin-table__btn svg {
    transition: transform 0.15s;
}
.admin-table__btn:hover svg {
    transform: translateX(2px);
}

/* filter empty state */
.admin-empty-filter {
    padding: 32px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

/* responsive */
@media (max-width: 720px) {
    .admin-toolbar { flex-direction: column; align-items: stretch; }
    .admin-search { max-width: none; }
}


/*= submissions review  =*/


/* ─── ADMIN REVIEW (SHOW) ────────────────────────────────── */

/* hero icon (rounded square avatar/icon) */
.review-hero__icon {
    width: 84px;
    height: 84px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(34,211,238,0.06);
}
.review-hero__icon img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.review-hero__icon span {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent);
}

/* two-column layout */
.review-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
    margin-top: 24px;
    align-items: start;
}

.review-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.review-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 96px;
}

/* review card */
.review-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 24px 26px;
    box-shadow: var(--shadow-card);
}
.review-card__head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.review-card__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.review-card__sub {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

/* fields grid */
.review-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.review-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.review-field span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.review-field strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* file rows */
.file-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.file-row:last-of-type { border-bottom: none; }
.file-row__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.file-row__icon svg { width: 20px; height: 20px; }
.file-row__thumb { width: 100%; height: 100%; object-fit: cover; }
.file-row__body { flex: 1; min-width: 0; }
.file-row__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.file-row__title strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.file-row__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12.5px;
}
.file-row__meta code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    font-size: 11.5px;
}

/* collapsible storage paths */
.review-paths {
    margin-top: 16px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
}
.review-paths summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.review-paths summary::-webkit-details-marker { display: none; }
.review-paths summary::before {
    content: '▸';
    color: var(--accent);
    transition: transform 0.15s;
    display: inline-block;
}
.review-paths[open] summary::before { transform: rotate(90deg); }
.review-path {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}
.review-path span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.review-path code {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-2);
    font-size: 12px;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* description */
.review-desc h4 {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.review-desc p,
.review-desc__long {
    margin: 0 0 18px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.review-desc p:last-child,
.review-desc__long:last-child { margin-bottom: 0; }
.review-desc__long { white-space: pre-wrap; }

/* quick facts list */
.quick-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.quick-facts li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
.quick-facts li:last-child { border-bottom: none; }
.quick-facts li > span:first-child {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}
.quick-facts li strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    display: inline-flex;
    align-items: center;
}

/* ─── DECISION BLOCK ─────────────────────────────────── */
.decision-block {
    margin-top: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.decision-block__head {
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.decision-block__head h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.decision-block__head p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
}

/* approve / reject tabs */
.decision-tabs {
    display: flex;
    gap: 6px;
    padding: 16px 28px 0;
}
.decision-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    border-radius: 999px;
    padding: 9px 18px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.decision-tab svg { width: 14px; height: 14px; }
.decision-tab:hover { color: var(--text); }

.decision-tab.is-active[data-tab="approve"] {
    color: #042428;
    background: var(--accent-strong);
    border-color: transparent;
    box-shadow: 0 4px 14px var(--accent-glow);
}
.decision-tab.is-active[data-tab="reject"] {
    color: #fff;
    background: #f87171;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(248,113,113,0.25);
}

/* panels */
.decision-panel {
    padding: 22px 28px 28px;
    display: none;
}
.decision-panel.is-active { display: block; }

/* nested form sections inside decision */
.form-section--nested {
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border-color: var(--border-subtle);
    box-shadow: none;
    padding: 22px 22px;
    margin-bottom: 16px;
}
.form-section--nested:last-of-type { margin-bottom: 0; }
.form-section--nested .form-section__head {
    padding-bottom: 14px;
    margin-bottom: 16px;
}
.form-section--danger {
    background: rgba(248,113,113,0.06);
    border-color: rgba(248,113,113,0.25);
}
.form-section__step--danger {
    background: rgba(248,113,113,0.12);
    border-color: rgba(248,113,113,0.35);
    color: #f87171;
}

.optional-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* check-tile (TV flag checkboxes) */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.check-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.check-tile:hover { border-color: var(--accent); }
.check-tile input { position: absolute; opacity: 0; pointer-events: none; }
.check-tile__box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}
.check-tile__box::after {
    content: '';
    position: absolute;
    inset: 3px 4px 4px 3px;
    border-right: 2px solid #042428;
    border-bottom: 2px solid #042428;
    transform: rotate(45deg) scale(0);
    transition: transform 0.12s;
    width: 6px;
    height: 10px;
    margin-left: 1px;
    margin-top: -1px;
}
.check-tile input:checked ~ .check-tile__box {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}
.check-tile input:checked ~ .check-tile__box::after {
    transform: rotate(45deg) scale(1);
}
.check-tile input:checked ~ .check-tile__label { color: var(--text); }
.check-tile__label {
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
}
.check-tile:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-glow-sm);
}

/* decision actions footer */
.decision-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.decision-actions__btn {
    padding: 14px 24px;
    font-size: 14px;
}
.decision-actions__note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    flex: 1 1 240px;
}

/* responsive */
@media (max-width: 1000px) {
    .review-grid { grid-template-columns: 1fr; }
    .review-aside { position: static; }
}
@media (max-width: 640px) {
    .review-card,
    .decision-block__head,
    .decision-tabs,
    .decision-panel { padding-left: 18px; padding-right: 18px; }
    .form-section--nested { padding: 18px; }
    .check-grid { grid-template-columns: 1fr 1fr; }
}


/*= footer  =*/


/* ─── RICH FOOTER ────────────────────────────────────────── */

.site-footer--rich {
    margin-top: 80px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface);
    color: var(--text-2);
}

/* TRUST STRIP */
.footer-trust {
    border-bottom: 1px solid var(--border-subtle);
    background:
        radial-gradient(circle at 20% 0%, rgba(34,211,238,0.06), transparent 60%),
        radial-gradient(circle at 80% 100%, rgba(167,139,250,0.05), transparent 60%),
        var(--surface);
}

.footer-trust__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.footer-trust__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.footer-trust__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.footer-trust__icon svg { width: 18px; height: 18px; }

.footer-trust__item strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}
.footer-trust__item span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

/* MAIN GRID */
.footer-main { padding: 0; }

.footer-main__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 36px;
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 40px;
}

/* BRAND */
.footer-brand { min-width: 0; }

.footer-brand__logo {
    display: inline-block;
    color: var(--accent);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.footer-brand__tag {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.65;
    max-width: 320px;
}

.footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.footer-social a:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-glow-sm);
    transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }

/* COLUMNS */
.footer-col { min-width: 0; }

.footer-col__title {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-col__list a {
    display: inline-block;
    color: var(--muted);
    font-size: 13.5px;
    transition: color 0.15s, padding 0.15s;
}
.footer-col__list a:hover {
    color: var(--accent);
    padding-left: 4px;
}

/* BOTTOM BAR */
.footer-bottom {
    border-top: 1px solid var(--border-subtle);
    background: var(--bg);
}

.footer-bottom__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 24px;
    align-items: center;
}

.footer-copy {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
}
.footer-copy strong {
    color: var(--text-2);
    font-weight: 700;
}
.footer-copy__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: flex-end;
}
.footer-legal a {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    transition: color 0.15s;
}
.footer-legal a:hover { color: var(--accent); }

.footer-disclaimer {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--border-subtle);
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.6;
    max-width: 900px;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .footer-main__inner {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 36px 28px;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-trust__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .footer-main__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px 20px;
        padding: 36px 18px 28px;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-trust__inner {
        grid-template-columns: 1fr;
        padding: 22px 18px;
    }
    .footer-bottom__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-legal { justify-content: center; }
}


/*= logo  =*/

.site-header__top--full {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.site-logo--with-image {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: 0 0 auto;
    margin-right: 0;
}

.site-logo__img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

.site-logo__text {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    color: inherit;
}

.site-nav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-left: clamp(80px, 14vw, 260px);
    margin-right: auto;
}

/* Tablet / mobile header */
@media (max-width: 760px) {
    .site-header__top--full {
        justify-content: center;
        gap: 12px;
    }

    .site-logo--with-image {
        width: 100%;
        justify-content: center;
    }

    .site-nav {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
        gap: 10px 14px;
    }

    .site-logo__img {
        width: 36px;
        height: 36px;
    }

    .site-logo__text {
        font-size: 1.15rem;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    .site-nav {
        font-size: 0.9rem;
        gap: 8px 10px;
    }

    .site-logo--with-image {
        gap: 8px;
    }

    .site-logo__img {
        width: 32px;
        height: 32px;
    }
}


/*= register  =*/

/* ─── AUTH (REGISTER EXTRAS) ─────────────────────────────── */

/* small grey hint under fields */
.auth-hint {
    margin: 6px 2px 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}
.auth-hint.is-ok  { color: var(--car-color); font-weight: 600; }
.auth-hint.is-bad { color: #f87171; font-weight: 600; }

/* password strength meter */
.pw-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.pw-strength__bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    flex: 1;
}
.pw-strength__bars span {
    height: 4px;
    border-radius: 2px;
    background: var(--surface-3);
    transition: background 0.18s;
}

/* level fill */
.pw-strength[data-level="1"] .pw-strength__bars span:nth-child(-n+1) { background: #f87171; }
.pw-strength[data-level="2"] .pw-strength__bars span:nth-child(-n+2) { background: #fbbf24; }
.pw-strength[data-level="3"] .pw-strength__bars span:nth-child(-n+3) { background: var(--accent-strong); }
.pw-strength[data-level="4"] .pw-strength__bars span:nth-child(-n+4) { background: var(--car-color); }

.pw-strength__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    min-width: 64px;
    text-align: right;
}
.pw-strength[data-level="1"] .pw-strength__label { color: #f87171; }
.pw-strength[data-level="2"] .pw-strength__label { color: #fbbf24; }
.pw-strength[data-level="3"] .pw-strength__label { color: var(--accent); }
.pw-strength[data-level="4"] .pw-strength__label { color: var(--car-color); }


/*= home hero  =*/

/* ─── HERO STAGE (BG-IMAGE CAROUSEL · COMPACT) ───────────── */
.hero-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    margin-bottom: 24px;
    isolation: isolate;
    min-height: 380px;
}

/* ROTATING BACKGROUND LAYER */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.9s ease-in-out, transform 8s ease-out;
    will-change: opacity, transform;
}
.hero-bg__slide.is-active {
    opacity: 1;
    transform: scale(1);   /* slow Ken-Burns zoom */
}

/* readable overlay + brand tint */
.hero-bg__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(8,9,13,0.85) 0%, rgba(8,9,13,0.55) 55%, rgba(8,9,13,0.35) 100%),
        radial-gradient(circle at 85% 110%, rgba(34,211,238,0.18), transparent 55%),
        radial-gradient(circle at 0%   0%,  rgba(167,139,250,0.14), transparent 55%);
}

body.theme-light .hero-bg__overlay {
    background:
        linear-gradient(120deg, rgba(244,245,249,0.92) 0%, rgba(244,245,249,0.65) 55%, rgba(244,245,249,0.4) 100%),
        radial-gradient(circle at 85% 110%, rgba(8,145,178,0.12), transparent 55%);
}

/* CONTENT */
.hero-stage__inner {
    position: relative;
    z-index: 1;
    padding: 48px 52px 28px;
    max-width: 760px;       /* keeps copy left-aligned & readable */
}

/* ROTATOR */
.hero-rotator { position: relative; }

.hero-rotator__viewport {
    position: relative;
    min-height: 130px;     /* fits ~2 lines + subtitle */
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.hero-slide.is-active {
    position: relative;     /* drives the rotator height */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-stage__title {
    margin: 0 0 12px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: var(--text);
    text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

.hero-stage__text {
    margin: 0;
    max-width: 580px;
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.65;
    text-shadow: 0 1px 14px rgba(0,0,0,0.45);
}
body.theme-light .hero-stage__title,
body.theme-light .hero-stage__text { text-shadow: none; }

/* SEARCH (overlays the bg) */
.hero-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(15, 17, 23, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin-top: 22px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.theme-light .hero-search {
    background: rgba(255,255,255,0.75);
    border-color: var(--border);
}
.hero-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow-sm);
}
.hero-search > svg { color: var(--muted); flex-shrink: 0; }
.hero-search input {
    flex: 1;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    min-width: 0;
}
.hero-search input:focus { outline: none; }
.hero-search input::placeholder { color: var(--muted); }
.hero-search button {
    height: 44px;
    padding: 0 22px;
    border: none;
    border-radius: 10px;
    background: var(--accent-strong);
    color: #042428;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.hero-search button:hover { opacity: 0.92; transform: translateY(-1px); }

/* POPULAR TAGS (overlays the bg) */
.hero-stage__suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 12px;
}
.hero-stage__suggest a {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 17, 23, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--text-2);
    font-weight: 600;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
body.theme-light .hero-stage__suggest a {
    background: rgba(255,255,255,0.7);
    border-color: var(--border);
}
.hero-stage__suggest a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* CONTROLS */
.hero-rotator__controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.hero-rotator__nav {
    width: 34px; height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(15, 17, 23, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hero-rotator__nav:hover {
    color: var(--accent);
    border-color: var(--accent);
}
body.theme-light .hero-rotator__nav {
    background: rgba(255,255,255,0.7);
    border-color: var(--border);
}

.hero-rotator__dots { display: flex; gap: 6px; }
.hero-rotator__dot {
    width: 24px; height: 4px;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    padding: 0;
    transition: background 0.18s, width 0.18s;
}
.hero-rotator__dot:hover { background: rgba(255,255,255,0.6); }
.hero-rotator__dot.is-active {
    background: var(--accent-strong);
    width: 32px;
    box-shadow: 0 0 8px var(--accent-glow);
}
body.theme-light .hero-rotator__dot { background: rgba(0,0,0,0.18); }
body.theme-light .hero-rotator__dot:hover { background: rgba(0,0,0,0.4); }

/* RESPONSIVE */
@media (max-width: 860px) {
    .hero-stage { min-height: 360px; }
    .hero-stage__inner { padding: 40px 28px 24px; }
    .hero-stage__title { font-size: 32px; }
    .hero-stage__text  { font-size: 15px; }
    .hero-rotator__viewport { min-height: 150px; }
}
@media (max-width: 540px) {
    .hero-stage { min-height: 340px; }
    .hero-stage__inner { padding: 32px 20px 20px; }
    .hero-stage__title { font-size: 26px; }
    .hero-search { padding: 5px; }
    .hero-search button { padding: 0 16px; }
    .hero-rotator__viewport { min-height: 170px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-bg__slide,
    .hero-slide { transition: none !important; }
}




/*= home lower =*/


/* ─── TRUST STRIP ────────────────────────────────────────── */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 36px 0 8px;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.trust-strip__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trust-strip__icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.trust-strip__icon svg { width: 18px; height: 18px; }
.trust-strip__item strong {
    display: block;
    color: var(--text); font-size: 13px; font-weight: 700; margin-bottom: 1px;
}
.trust-strip__item span { color: var(--muted); font-size: 12px; }

/* ─── FEATURED BANNER ────────────────────────────────────── */
.featured-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-card);
    transition: transform 0.18s, box-shadow 0.18s;
}
.featured-banner:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}
.featured-banner__media {
    position: relative;
    min-height: 280px;
    overflow: hidden;
}
.featured-banner__media img {
    width: 100%; height: 100%; object-fit: cover; min-height: 280px;
}
.featured-banner__shade {
    position: absolute; inset: 0;
    background: linear-gradient(to right, transparent 50%, var(--surface) 95%);
}
body.theme-light .featured-banner__shade {
    background: linear-gradient(to right, transparent 50%, var(--surface) 95%);
}

.featured-banner__content {
    padding: 36px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.featured-banner__chip {
    display: inline-flex; align-items: center;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--accent-glow-sm);
    border: 1px solid rgba(34,211,238,0.3);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.featured-banner__content h2 {
    margin: 4px 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.featured-banner__content p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
    max-width: 460px;
}
.featured-banner__cta {
    display: inline-flex;
    margin-top: 6px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
}

/* ─── CATEGORY GRID ──────────────────────────────────────── */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.cat-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.cat-tile:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    background: var(--surface-2);
}
.cat-tile__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cat-tile strong { font-size: 13px; font-weight: 600; }

/* ─── DUAL CTA ───────────────────────────────────────────── */
.dual-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dual-cta__card {
    position: relative;
    overflow: hidden;
    padding: 32px 30px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.dual-cta__card--submit {
    background:
        radial-gradient(circle at top right, rgba(34,211,238,0.12), transparent 60%),
        var(--surface);
}
.dual-cta__card--pin {
    background:
        radial-gradient(circle at top right, rgba(167,139,250,0.12), transparent 60%),
        var(--surface);
}

.dual-cta__chip {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.dual-cta__card h3 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.dual-cta__card p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 420px;
}

.dual-cta__points {
    list-style: none;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dual-cta__points li {
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
}

/* ─── WHY GRID ───────────────────────────────────────────── */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.why-card {
    padding: 26px 26px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transition: transform 0.15s, border-color 0.15s;
}
.why-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}
.why-card__icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.why-card__icon svg { width: 22px; height: 22px; }
.why-card__icon--cyan   { background: rgba(110,231,255,0.10); border:1px solid rgba(110,231,255,0.22); color: var(--phone-color); }
.why-card__icon--purple { background: rgba(167,139,250,0.10); border:1px solid rgba(167,139,250,0.22); color: var(--tv-color); }
.why-card__icon--green  { background: rgba(52,211,153,0.10);  border:1px solid rgba(52,211,153,0.22);  color: var(--car-color); }
.why-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.why-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

/* ─── FINAL CTA ──────────────────────────────────────────── */
.final-cta {
    position: relative;
    overflow: hidden;
    margin-top: 56px;
    padding: 56px 48px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at 20% 10%, rgba(34,211,238,0.12), transparent 60%),
        radial-gradient(circle at 80% 90%, rgba(167,139,250,0.12), transparent 60%),
        var(--surface);
    text-align: center;
    isolation: isolate;
}
.final-cta__orb {
    position: absolute; border-radius: 50%;
    pointer-events: none; z-index: 0; filter: blur(50px);
}
.final-cta__orb--1 { width:300px; height:300px; top:-100px; left:-60px;
    background: radial-gradient(circle, rgba(34,211,238,0.20), transparent 70%); }
.final-cta__orb--2 { width:260px; height:260px; bottom:-100px; right:-60px;
    background: radial-gradient(circle, rgba(167,139,250,0.18), transparent 70%); }
.final-cta__inner { position: relative; z-index: 1; }
.final-cta h2 {
    margin: 6px 0 12px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.final-cta__text {
    margin: 0 auto 24px;
    max-width: 540px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}
.final-cta__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .trust-strip { grid-template-columns: repeat(2, 1fr); }
    .cat-grid { grid-template-columns: repeat(4, 1fr); }
    .dual-cta { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .featured-banner { grid-template-columns: 1fr; }
    .featured-banner__shade {
        background: linear-gradient(to bottom, transparent 50%, var(--surface) 95%);
    }
}
@media (max-width: 640px) {
    .trust-strip { grid-template-columns: 1fr; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .featured-banner__content { padding: 26px 22px; }
    .featured-banner__content h2 { font-size: 22px; }
    .final-cta { padding: 40px 22px; }
    .final-cta h2 { font-size: 28px; }
    .dual-cta__card { padding: 26px 22px; }
}

/*= messages  =*/

.message-form {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    max-width: 760px;
}

.message-form label {
    font-weight: 600;
}

.message-form input,
.message-form textarea,
.message-form select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #0f141a;
    color: #f3f4f6;
}

.message-form textarea {
    resize: vertical;
}

.success-message {
    background: rgba(34,197,94,0.12);
    color: #86efac;
    border: 1px solid rgba(34,197,94,0.25);
    padding: 12px 14px;
    border-radius: 10px;
}

.error-message {
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.25);
    padding: 12px 14px;
    border-radius: 10px;
}


/*= dashboard =*/

/* ─── ADMIN DASHBOARD ────────────────────────────────────── */

/* KPI grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-card);
}
.kpi::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--accent);
    opacity: 0.6;
}
.kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

.kpi__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.kpi__label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kpi__icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kpi__icon svg { width: 14px; height: 14px; }

.kpi__value {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
}

.kpi__cta {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.kpi--accent::before { background: var(--accent-strong); }
.kpi--warn::before   { background: #fbbf24; }
.kpi--danger::before { background: #f87171; }

.kpi--warn   .kpi__value { color: #fbbf24; }
.kpi--danger .kpi__value { color: #f87171; }
.kpi--warn   .kpi__icon  { color: #fbbf24; }
.kpi--danger .kpi__icon  { color: #f87171; }
.kpi--warn   .kpi__cta   { color: #fbbf24; }
.kpi--danger .kpi__cta   { color: #f87171; }

/* SPLIT (Inventory / Workflow) */
.admin-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 16px;
}

.admin-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 22px 24px;
    box-shadow: var(--shadow-card);
}
.admin-panel__head { margin-bottom: 16px; }
.admin-panel__head h3 {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* visualization bar */
.admin-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin: 4px 0 16px;
    border: 1px solid var(--border-subtle);
}
.admin-bar__seg {
    height: 100%;
    transition: width 0.4s ease;
    min-width: 0;
}
.admin-bar__seg--ok     { background: var(--car-color); }
.admin-bar__seg--muted  { background: var(--surface-3); }
.admin-bar__seg--purple { background: var(--tv-color); }

.admin-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
    color: var(--text-2);
    font-size: 13px;
}
.admin-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-legend strong {
    margin-left: auto;
    color: var(--text);
    font-weight: 700;
}

/* workflow list */
.workflow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.workflow li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.workflow li:last-child { border-bottom: none; }

.workflow__step {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.workflow__body { flex: 1; min-width: 0; }
.workflow__body strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}
.workflow__body span {
    color: var(--muted);
    font-size: 12.5px;
}

.workflow__count {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}
.workflow__count--ok   { color: var(--car-color); }
.workflow__count--warn { color: #fbbf24; }
.workflow__count--bad  { color: #f87171; }

/* QUICK ACTIONS */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.quick-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 22px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.quick-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lift);
}

.quick-card__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.quick-card__icon svg { width: 18px; height: 18px; }
.quick-card__icon--cyan   { background: rgba(110,231,255,0.10); border:1px solid rgba(110,231,255,0.22); color: var(--phone-color); }
.quick-card__icon--purple { background: rgba(167,139,250,0.10); border:1px solid rgba(167,139,250,0.22); color: var(--tv-color); }
.quick-card__icon--green  { background: rgba(52,211,153,0.10);  border:1px solid rgba(52,211,153,0.22);  color: var(--car-color); }
.quick-card__icon--amber  { background: rgba(245,158,11,0.10);  border:1px solid rgba(245,158,11,0.22);  color: #fbbf24; }

.quick-card strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.quick-card span {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}
.quick-card__arrow {
    position: absolute;
    top: 22px; right: 22px;
    color: var(--muted);
    font-size: 16px;
    transition: transform 0.15s, color 0.15s;
}
.quick-card:hover .quick-card__arrow {
    color: var(--accent);
    transform: translateX(3px);
}

/* ACTIVITY GRID */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.activity-col {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 22px 22px;
    box-shadow: var(--shadow-card);
}

.activity-col__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}
.activity-col__head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-2);
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.activity-item:hover {
    border-color: var(--accent);
    background: var(--accent-glow-sm);
}

.activity-item__main {
    min-width: 0;
    flex: 1;
}
.activity-item__main strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.activity-item__meta {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    overflow: hidden;
}
.activity-item__sep { opacity: 0.6; }

.admin-pkg--mini {
    padding: 2px 7px;
    font-size: 11px;
}

.activity-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
}

/* RESPONSIVE */
@media (max-width: 860px) {
    .admin-split { grid-template-columns: 1fr; }
    .admin-legend { grid-template-columns: 1fr; }
    .account-hero__actions { width: 100%; }
}



/*= forms  =*/

/* ─── SUPPORT PAGES (Contact / DMCA / Report) ────────────── */

.support-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    padding: 44px 44px 36px;
    margin-bottom: 24px;
    isolation: isolate;
    box-shadow: var(--shadow-card);
}
.support-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.support-hero__orb--1 {
    width: 380px; height: 380px;
    top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(34,211,238,0.10) 0%, transparent 70%);
}
.support-hero__orb--2 {
    width: 300px; height: 300px;
    bottom: -140px; right: -80px;
    background: radial-gradient(circle, rgba(167,139,250,0.07) 0%, transparent 70%);
}
.support-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.support-hero__icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px rgba(34,211,238,0.06);
}
.support-hero__icon svg { width: 32px; height: 32px; }
.support-hero__text { flex: 1; min-width: 260px; }
.support-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.support-hero__badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-strong);
    box-shadow: 0 0 6px var(--accent-strong);
    animation: pulse-dot 2s infinite;
}
.support-hero__title {
    margin: 0 0 8px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.support-hero__subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
    max-width: 640px;
}

/* layout (form + sidebar) */
.support-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
}

/* honeypot */
.hp-field {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* select styling matched to .form-input */
.form-select {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.12);
    background: #161b22;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}
.form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow-sm);
}

/* checkbox row (legal acknowledgements) */
.support-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.55;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.support-check:hover { border-color: var(--accent); }
.support-check input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent-strong);
    cursor: pointer;
}

/* alerts (success / error inside support pages) */
.alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    line-height: 1.55;
}
.alert svg { flex-shrink: 0; margin-top: 1px; }
.alert p { margin: 0; }
.alert--ok {
    border: 1px solid rgba(52,211,153,0.35);
    background: rgba(52,211,153,0.08);
    color: #6ee7b7;
}
.alert--ok svg { color: var(--car-color); }
.alert--err {
    border: 1px solid rgba(248,113,113,0.35);
    background: rgba(248,113,113,0.08);
    color: #fca5a5;
}
.alert--err svg { color: #f87171; }

@media (max-width: 1000px) {
    .support-layout { grid-template-columns: 1fr; }
    .submit-aside { position: static; }
}
@media (max-width: 640px) {
    .support-hero { padding: 32px 22px 28px; }
    .support-hero__title { font-size: 26px; }
}


/*= info pages  =*/

/* ─── INFO PAGES (About / FAQ / Privacy / Terms / Cookies / Safety / Install) ── */

/* HERO */
.info-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    padding: 44px 44px 36px;
    margin-bottom: 24px;
    isolation: isolate;
    box-shadow: var(--shadow-card);
}
.info-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.info-hero__orb--1 {
    width: 420px; height: 420px;
    top: -180px; left: -130px;
    background: radial-gradient(circle, rgba(34,211,238,0.10) 0%, transparent 70%);
}
.info-hero__orb--2 {
    width: 320px; height: 320px;
    bottom: -160px; right: -90px;
    background: radial-gradient(circle, rgba(167,139,250,0.07) 0%, transparent 70%);
}
.info-hero__inner { position: relative; z-index: 1; max-width: 780px; }

.info-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 12.5px;
}
.info-crumbs a { color: var(--accent); font-weight: 600; }
.info-crumbs a:hover { color: var(--accent-strong); }
.info-crumbs__sep { opacity: 0.5; }

.info-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.info-eyebrow__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-strong);
    box-shadow: 0 0 6px var(--accent-strong);
    animation: pulse-dot 2s infinite;
}

.info-title {
    margin: 0 0 12px;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.info-lede {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
    max-width: 680px;
}
.info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    color: var(--muted);
    font-size: 12.5px;
}
.info-meta__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-2);
    font-weight: 600;
}
.info-meta__pill svg { width: 12px; height: 12px; color: var(--accent); }

/* LAYOUT */
.info-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
    align-items: start;
}

/* TOC sidebar */
.info-toc {
    position: sticky;
    top: 96px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
}
.info-toc h4 {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.info-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.info-toc ol li { counter-increment: toc; }
.info-toc a {
    display: flex;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.4;
    transition: color 0.15s, background 0.15s;
    border-left: 2px solid transparent;
}
.info-toc a::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--muted);
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}
.info-toc a:hover {
    color: var(--text);
    background: var(--surface-2);
}
.info-toc a.is-active {
    color: var(--accent);
    background: var(--accent-glow-sm);
    border-left-color: var(--accent);
}
.info-toc a.is-active::before { color: var(--accent); }

/* MAIN CONTENT */
.info-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.info-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 30px 34px;
    box-shadow: var(--shadow-card);
    scroll-margin-top: 96px;
}
.info-card h2 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.info-card h2 .info-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--accent-glow-sm);
    border: 1px solid rgba(34,211,238,0.25);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    vertical-align: middle;
}
.info-card h3 {
    margin: 22px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.info-card p,
.info-card ul,
.info-card ol {
    margin: 0 0 14px;
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.75;
}
.info-card p:last-child,
.info-card ul:last-child,
.info-card ol:last-child { margin-bottom: 0; }
.info-card ul,
.info-card ol { padding-left: 22px; }
.info-card ul li,
.info-card ol li { margin-bottom: 6px; }
.info-card ul li::marker { color: var(--accent); }
.info-card ol li::marker { color: var(--accent); font-weight: 700; }
.info-card strong { color: var(--text); font-weight: 700; }
.info-card a:not([class]) {
    color: var(--accent);
    font-weight: 600;
    border-bottom: 1px solid rgba(34,211,238,0.3);
    transition: color 0.15s, border-color 0.15s;
}
.info-card a:not([class]):hover {
    color: var(--accent-strong);
    border-bottom-color: var(--accent-strong);
}
.info-card code {
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    font-size: 12.5px;
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Monaco, monospace;
}

/* CALLOUTS */
.callout {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    margin: 18px 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-2);
}
.callout:first-child { margin-top: 0; }
.callout__icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.callout__icon svg { width: 16px; height: 16px; }
.callout__body { flex: 1; min-width: 0; }
.callout__body strong {
    display: block;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 4px;
}
.callout__body p {
    margin: 0;
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.6;
}
.callout--info {
    border-color: rgba(34,211,238,0.3);
    background: rgba(34,211,238,0.05);
}
.callout--info .callout__icon {
    background: rgba(34,211,238,0.12);
    color: var(--accent);
}
.callout--warn {
    border-color: rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.06);
}
.callout--warn .callout__icon {
    background: rgba(245,158,11,0.14);
    color: #fbbf24;
}
.callout--danger {
    border-color: rgba(248,113,113,0.35);
    background: rgba(248,113,113,0.06);
}
.callout--danger .callout__icon {
    background: rgba(248,113,113,0.14);
    color: #f87171;
}
.callout--ok {
    border-color: rgba(52,211,153,0.35);
    background: rgba(52,211,153,0.06);
}
.callout--ok .callout__icon {
    background: rgba(52,211,153,0.14);
    color: var(--car-color);
}

/* INSTALL STEPS */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.steps li {
    counter-increment: step;
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-2);
}
.steps li::before {
    content: counter(step);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.steps strong {
    display: block;
    color: var(--text);
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 4px;
}
.steps span,
.steps p {
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0;
}

/* FEATURE LIST (key/value) */
.kv-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.kv-list li {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-2);
    margin: 0 !important;
}
.kv-list__icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--accent-glow-sm);
    border: 1px solid rgba(34,211,238,0.22);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}
.kv-list strong {
    display: block;
    color: var(--text);
    font-size: 13.5px;
    margin-bottom: 2px;
}
.kv-list span { color: var(--muted); font-size: 12.5px; line-height: 1.55; }

/* FAQ ACCORDION */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.faq-item[open] {
    border-color: var(--accent);
    background: var(--accent-glow-sm);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-size: 14.5px;
    font-weight: 700;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '＋';
    margin-left: auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.18s, background 0.15s;
}
.faq-item[open] summary::after {
    content: '−';
    background: var(--accent);
    color: #042428;
    border-color: transparent;
}
.faq-item__body {
    padding: 0 18px 18px 18px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.7;
}
.faq-item__body p { margin: 0 0 10px; }
.faq-item__body p:last-child { margin: 0; }
.faq-item__body ul { margin: 8px 0 0; padding-left: 20px; }
.faq-item__body a {
    color: var(--accent);
    font-weight: 600;
    border-bottom: 1px solid rgba(34,211,238,0.3);
}

/* CTA STRIP (bottom of info pages) */
.info-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 28px 32px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at 0% 0%, rgba(34,211,238,0.10), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(167,139,250,0.10), transparent 60%),
        var(--surface);
    margin-top: 18px;
    box-shadow: var(--shadow-card);
}
.info-cta h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.info-cta p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 540px;
}
.info-cta__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
    .info-layout { grid-template-columns: 1fr; }
    .info-toc { position: static; order: -1; }
}
@media (max-width: 640px) {
    .info-hero { padding: 32px 22px 28px; }
    .info-title { font-size: 30px; }
    .info-card { padding: 24px 22px; }
    .info-cta { grid-template-columns: 1fr; padding: 24px 22px; }
}


/*= cat icon set  =*/

/* ─── CATEGORY TILES (icon refresh) ──────────────────────── */
.cat-tile__icon {
    /* override the existing emoji-sized rules */
    font-size: 0;
}
.cat-tile__icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    transition: transform 0.18s ease;
}
.cat-tile:hover .cat-tile__icon svg {
    transform: scale(1.08);
}

/* per-tile color accents — uses existing tokens */
/*
.cat-tile--cyan   .cat-tile__icon { background: rgba(110,231,255,0.10); border-color: rgba(110,231,255,0.22); color: var(--phone-color); }
.cat-tile--purple .cat-tile__icon { background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.22); color: var(--tv-color); }
.cat-tile--green  .cat-tile__icon { background: rgba(52,211,153,0.10);  border-color: rgba(52,211,153,0.22);  color: var(--car-color); }
.cat-tile--amber  .cat-tile__icon { background: rgba(245,158,11,0.10);  border-color: rgba(245,158,11,0.22);  color: #fbbf24; }
.cat-tile--pink   .cat-tile__icon { background: rgba(244,114,182,0.10); border-color: rgba(244,114,182,0.22); color: #f472b6; }
.cat-tile--rose   .cat-tile__icon { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.22); color: #f87171; }
*/

/* keep matching color on hover instead of fading to grey */
.cat-tile--cyan:hover   { border-color: var(--phone-color); }
.cat-tile--purple:hover { border-color: var(--tv-color); }
.cat-tile--green:hover  { border-color: var(--car-color); }
.cat-tile--amber:hover  { border-color: #fbbf24; }
.cat-tile--pink:hover   { border-color: #f472b6; }
.cat-tile--rose:hover   { border-color: #f87171; }


/* ─── PILLAR CARDS (icon refresh) ────────────────────────── */
.pillar-card__icon {
    /* override the old emoji-sized rule */
    font-size: 0;
    color: var(--muted);
    transition: transform 0.18s ease, color 0.18s ease;
}
.pillar-card__icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

/* tint the icon stroke per pillar (background/border already tinted) */
.pillar-card--phone .pillar-card__icon { color: var(--phone-color); }
.pillar-card--tv    .pillar-card__icon { color: var(--tv-color); }
.pillar-card--car   .pillar-card__icon { color: var(--car-color); }

/* subtle scale on hover, matches your existing card lift */
.pillar-card:hover .pillar-card__icon { transform: scale(1.06); }

/* upgrade the top-right arrow to a real SVG */
.pillar-card__arrow svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
    display: block;
}