:root {
    --bg-light: #F8FAFC;
    --bg-card: rgba(255, 255, 255, 0.7);
    --primary: #0EA5E9;
    --primary-hover: #0284C7;
    --text-main: #0F172A;
    --text-muted: #475569;
    --border: rgba(0, 0, 0, 0.08);
    --glass-blur: blur(24px);
    --accent: #6366F1;
    --success: #10B981;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scrollbar-gutter: stable;
}

a { 
    text-decoration: none; 
    color: #464feb; 
}

tr th, tr td { 
    border: 1px solid #e6e6e6; 
}

tr th { 
    background-color: #f5f5f5; 
}

body.light-theme {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}

/* Persistent Global Atmosphere with Fading Blue Hue */
.global-atmosphere {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #E0F2FE 0%, #F8FAFC 40%, #F8FAFC 100%);
}

.ambient-base-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.12;
    will-change: transform;
}

.aurora-1 {
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, #06B6D4 0%, rgba(6, 182, 212, 0) 70%);
    top: -120px;
    left: 8%;
    animation: floatAurora1 24s ease-in-out infinite alternate;
}

.aurora-2 {
    width: 750px;
    height: 750px;
    background: radial-gradient(circle, #4338CA 0%, rgba(67, 56, 202, 0) 70%);
    bottom: -150px;
    right: 8%;
    animation: floatAurora2 28s ease-in-out infinite alternate;
}

.aurora-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #8B5CF6 0%, rgba(139, 92, 246, 0) 70%);
    top: 40%;
    left: 45%;
    animation: floatAurora3 22s ease-in-out infinite alternate;
}

@keyframes floatAurora1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(60px, 40px) scale(1.1);
    }

    100% {
        transform: translate(-40px, 70px) scale(0.95);
    }
}

@keyframes floatAurora2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-70px, -50px) scale(1.12);
    }

    100% {
        transform: translate(50px, -40px) scale(0.92);
    }
}

@keyframes floatAurora3 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-50px, 60px) scale(1.08);
    }

    100% {
        transform: translate(60px, -50px) scale(0.96);
    }
}

/* ---------------------------------------------
   GLOBAL BACKGROUND: KINETIC DAG CONSTELLATION
   Active across all views, scrolls, and tabs
   --------------------------------------------- */
.bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}

#dag-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Subtle Interactive Cursor Ambient Glow */
.cursor-glow {
    position: fixed;
    top: -200px;
    left: -200px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(67, 56, 202, 0.04) 50%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    filter: blur(40px);
    will-change: transform;
}

/* ---------------------------------------------
   HERO STATS COUNTER BAR
   --------------------------------------------- */
.hero-actions {
    margin-bottom: 3.5rem;
}

.hero-stats-bar {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 5;
}

.stats-trust-label {
    display: inline-flex;
    align-items: center;
    font-size: 1.35rem;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0;
}

.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #18181B;
    border: 2px solid #08090E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    margin-left: -8px;
}

.avatar-circle:first-child {
    margin-left: 0;
}

.stats-counter-grid {
    display: flex;
    align-items: flex-start;    /* every number on one line, whatever the length of its label */
    justify-content: center;
    gap: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding: 2.5rem 3rem;
}

.stat-counter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.stat-number {
    font-family: 'Sora', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.stat-star-icon {
    display: flex;
    align-items: center;
    margin-left: 4px;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.stat-label {
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace, sans-serif;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    margin-top: 0.35rem;
    font-weight: 600;
}

.stat-counter-divider {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    align-self: center;
}

@media (max-width: 768px) {
    .stats-counter-grid {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1.5rem 2rem;
    }

    .stat-counter-divider {
        width: 80px;
        height: 1px;
    }

    .stat-number {
        font-size: 2rem;
    }
}

/* ---------------------------------------------
   FEEDBACK OF THE MONTH (CENTRALIZED SPOTLIGHT)
   --------------------------------------------- */
.customer-stories-section {
    margin-top: 2.5rem;
    margin-bottom: 5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stories-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
    padding: 0 1rem;
}

.stories-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--primary);
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 0.35rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

.stories-title {
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.03em;
}

.stories-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Centralized Spotlight Review Card */
.feedback-spotlight-container {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: center;
    position: relative;
}

.spotlight-review-card {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: 24px;
    padding: 2.5rem 3.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 0 35px rgba(14, 165, 233, 0.05);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    overflow: hidden;
}

.spotlight-review-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08), 0 0 45px rgba(14, 165, 233, 0.1);
}

.spotlight-quote-mark {
    position: absolute;
    top: 0.75rem;
    right: 2rem;
    font-family: 'Sora', Georgia, serif;
    font-size: 6.5rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    user-select: none;
}

.review-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-stars {
    color: #FBBF24;
    font-size: 1.15rem;
    letter-spacing: 3px;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4));
}

.review-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: rgba(6, 182, 212, 0.12);
    color: var(--primary);
    border: 1px solid rgba(6, 182, 212, 0.25);
    font-weight: 600;
}

.spotlight-review-card .review-quote {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--text-main);
    font-style: italic;
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 0.5rem 0;
}

.review-author-wrap.centralized-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.centralized-author .review-author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.centralized-author .review-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.centralized-author .review-role {
    font-size: 0.85rem;
    color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .spotlight-review-card {
        padding: 1.75rem 1.5rem;
        border-radius: 18px;
    }

    .spotlight-review-card .review-quote {
        font-size: 1rem;
        line-height: 1.6;
    }

    .stories-title {
        font-size: 2rem;
    }
}

/* Subtle Interactive Cursor Ambient Glow */
.cursor-glow {
    position: fixed;
    top: -200px;
    left: -200px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(67, 56, 202, 0.04) 50%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    filter: blur(40px);
    will-change: transform;
}

/* Typography */
h1,
h2,
h3 {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

h1 {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    min-height: 11.5rem;
}

.typing-text {
    white-space: nowrap;
}

h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

p {
    margin-bottom: 1rem;
    color: var(--text-muted);
}

/* Application Header Layout */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    padding: 1.25rem 3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: transparent;
    border-bottom: none;
}

.scroll-fade-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 120px;
    background: linear-gradient(to bottom, var(--bg-light) 10%, rgba(248, 250, 252, 0) 100%);
    pointer-events: none;
    z-index: 90;
}

/* Header Left - Brand */
.nav-brand-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.nav-logo-icon {
    height: 48px;
    vertical-align: middle;
}

.nav-brand-text {
    font-family: 'Sora', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.text-main {
    color: var(--text-main);
}

.text-primary {
    color: var(--primary);
}

/* Dynamic Island Navigation (Center Pill) */
.dynamic-island-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.75); /* Light luminosity */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: var(--radius-pill);
    /* Spacing scales with the window, so the pill keeps one line at any zoom level. */
    padding: 0.5rem clamp(0.5rem, 1.1vw, 1.5rem);
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 2px 2px rgba(255, 255, 255, 0.8); /* 3D effect */
    transition: all 0.3s ease;
}

.dynamic-island-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.82rem, 0.55rem + 0.42vw, 0.95rem);
    white-space: nowrap;   /* "Contact Us" / "Generate Data" never break onto two lines */
    transition: all 0.2s ease;
    padding: 0.4rem clamp(0.45rem, 0.85vw, 1rem);
    border-radius: 100px;
}

/* Long names in "Hi, ..." are shortened instead of pushing into the nav. */
.user-greeting-text {
    display: inline-block;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Mid-size windows (laptops, zoomed-in screens): keep the logo icon, fold the
   wordmark so the centred nav never runs into it. */
@media (min-width: 641px) and (max-width: 1340px) {
    .nav-brand-text { display: none; }
}

/* Tablets and heavily zoomed windows: the nav gets its own row under the
   logo and scrolls sideways if needed (as on phones). */
@media (min-width: 641px) and (max-width: 1000px) {
    .app-header {
        flex-wrap: wrap;
        row-gap: 0.6rem;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    .dynamic-island-nav {
        position: static;
        transform: none;
        order: 3;
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: center;
    }
    .dynamic-island-nav::-webkit-scrollbar { display: none; }
}

.dynamic-island-nav a:hover {
    color: var(--primary);
    background: rgba(14, 165, 233, 0.08);
}

.dynamic-island-nav a.active {
    color: var(--primary);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15), 0 0 0 1px rgba(14, 165, 233, 0.4);
}

/* Header Right - User actions */
.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* User Profile Dropdown in Navbar */
.user-dropdown-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.user-icon-btn {
    width: auto;
    height: 40px;
    border-radius: 20px;
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-main);
    cursor: pointer;
    padding: 0 16px 0 12px;
    transition: all 0.25s ease;
}

.user-greeting-text {
    font-size: 0.9rem;
    font-weight: 500;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-icon-btn:hover,
.user-dropdown-container:hover .user-icon-btn,
.user-dropdown-container.menu-open .user-icon-btn {
    background: rgba(6, 182, 212, 0.14);
    border-color: rgba(6, 182, 212, 0.4);
    color: var(--primary);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 170px;
    background: rgba(14, 17, 26, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 14px;
    padding: 0.45rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(6, 182, 212, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}

/* Invisible bridge so mouse moving from icon to menu never loses hover state */
.user-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

/* Open on hover or when toggled open */
.user-dropdown-container:hover .user-dropdown-menu,
.user-dropdown-container.menu-open .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    background: transparent;
    color: #E2E8F0;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.dropdown-item svg {
    color: var(--text-muted);
    transition: color 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
}

.dropdown-item:hover {
    background: rgba(6, 182, 212, 0.12);
    color: var(--primary);
}

.dropdown-item:hover svg {
    color: var(--primary);
    transform: scale(1.1);
}

.dropdown-item.text-danger {
    color: #F87171;
}

.dropdown-item.text-danger svg {
    color: #F87171;
}

.dropdown-item.text-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

.dropdown-item.text-danger:hover svg {
    color: #EF4444;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.2rem 0;
}

/* Buttons */
button {
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    padding: 0.6rem 1.2rem;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 0.6rem 1.2rem;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-muted);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-full {
    width: 100%;
    margin-top: 1rem;
}

/* Main Content Area */
#app-content {
    margin-top: 120px;
    padding: 3rem 5%;
    flex: 1;
    position: relative;
    z-index: 2;
}

/* Pricing Card Price Styles */
.pricing-card .price {
    font-family: 'Sora', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 1.5rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.pricing-card .price span {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Fix label colors in auth modal */
.modal-content label {
    color: var(--text-main);
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* Fix credits display color on Dashboard */
#credits-value, .metric-value, .stat-value {
    color: var(--text-main) !important;
}

.view {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.view.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hidden {
    display: none !important;
}

/* Landing View & Schematic Architecture */
.hero-wrapper {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 1rem auto 5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
}

.schematic-backdrop {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.schematic-svg {
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

/* Floating Peripheral Schematic Elements */
.floating-schematics {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.floating-left {
    left: 1%;
    top: 5%;
}

.floating-right {
    right: 1%;
    top: 8%;
}

/* Schematic Cards */
.schematic-card {
    background: rgba(15, 17, 26, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
    width: 255px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Tilt only the decorative schematic illustrations, never the schema review
   cards on the Generate page (which share the .schema-card name). */
.schematic-card.schema-card {
    transform: rotate(-3deg);
}

.schematic-card.distribution-card {
    transform: rotate(3deg);
}

.schematic-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.schematic-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(6, 182, 212, 0.12);
    color: var(--primary);
}

.schematic-title {
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace, sans-serif;
    color: var(--text-main);
    font-weight: 500;
    flex: 1;
}

.schematic-status {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    font-weight: 600;
}

.schematic-status.status-cyan {
    background: rgba(6, 182, 212, 0.12);
    color: var(--primary);
}

/* Schematic Code Syntax */
.schematic-code {
    font-family: 'JetBrains Mono', monospace, sans-serif;
    font-size: 0.75rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

.sc-line {
    white-space: nowrap;
}

.sc-key {
    color: #94A3B8;
}

.sc-str {
    color: #38BDF8;
}

.sc-num {
    color: #A78BFA;
}

.sc-bool {
    color: #34D399;
}

/* Schematic Bars (Gaussian Distribution) */
.schematic-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 48px;
    padding: 6px 0;
    margin-bottom: 0.6rem;
}

.mini-col {
    flex: 1;
    background: linear-gradient(180deg, var(--primary) 0%, rgba(67, 56, 202, 0.4) 100%);
    border-radius: 3px;
}

.schematic-footer {
    display: flex;
    align-items: center;
}

.schematic-pill {
    font-size: 0.7rem;
    color: #34D399;
    background: rgba(52, 211, 153, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-weight: 500;
}

.schematic-subtext {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace, sans-serif;
}

/* Schematic Badges */
.schematic-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(14, 16, 24, 0.78);
    border: 1px solid rgba(6, 182, 212, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 9999px;
    padding: 0.55rem 1.1rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(6, 182, 212, 0.08);
}

.badge-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(6, 182, 212, 0.12);
    color: var(--primary);
}

.badge-icon-wrap.ai-ico-wrap {
    background: rgba(99, 102, 241, 0.15);
    color: #818CF8;
}

.badge-text-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.badge-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.badge-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.2;
}

/* Floating Animations */
.float-anim-1 {
    animation: floatSchema1 7s ease-in-out infinite;
}

.float-anim-2 {
    animation: floatBadge1 9s ease-in-out infinite;
    align-self: flex-start;
    margin-left: 1.5rem;
}

.float-anim-3 {
    animation: floatSchema2 8s ease-in-out infinite;
}

.float-anim-4 {
    animation: floatBadge2 10s ease-in-out infinite;
    align-self: flex-end;
    margin-right: 1.5rem;
}

@keyframes floatSchema1 {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-12px) rotate(-1.5deg);
    }
}

@keyframes floatBadge1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

@keyframes floatSchema2 {

    0%,
    100% {
        transform: translateY(0) rotate(3deg);
    }

    50% {
        transform: translateY(-10px) rotate(4deg);
    }
}

@keyframes floatBadge2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Responsive Handling */
@media (max-width: 1200px) {
    .floating-schematics {
        transform: scale(0.85);
        transform-origin: top center;
    }

    .floating-left {
        left: -10px;
    }

    .floating-right {
        right: -10px;
    }
}

@media (max-width: 960px) {
    .floating-schematics {
        display: none;
    }

    .schematic-backdrop {
        opacity: 0.4;
    }
}

.hero {
    text-align: center;
    max-width: 780px;
    margin: 3.5rem auto;
    position: relative;
    z-index: 5;
}

.hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
}

.hero-bg-glow {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 450px;
    background: radial-gradient(ellipse, rgba(6, 182, 212, 0.14) 0%, rgba(67, 56, 202, 0.08) 50%, transparent 70%);
    z-index: -1;
    pointer-events: none;
    filter: blur(50px);
}

.hero-half-ring {
    position: absolute;
    bottom: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 700px;
    border-radius: 700px 700px 0 0;
    /* Extremely faded outline for atmospheric look */
    border: 4px solid rgba(56, 189, 248, 0.08);
    border-bottom: 0;
    /* Earth curvature atmospheric glow */
    background: radial-gradient(ellipse at center bottom, rgba(255,255,255,0) 60%, rgba(14, 165, 233, 0.03) 95%, rgba(56, 189, 248, 0.08) 100%);
    box-shadow: 
        0 -30px 150px 20px rgba(56, 189, 248, 0.25), 
        inset 0 40px 120px 20px rgba(14, 165, 233, 0.15);
    z-index: -2;
    pointer-events: none;
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%);
}


@media (max-width: 1400px) {
    .hero-half-ring {
        width: 1200px;
        height: 600px;
        border-radius: 600px 600px 0 0;
        bottom: -150px;
    }

}
@media (max-width: 768px) {
    .hero-half-ring {
        width: 800px;
        height: 400px;
        border-radius: 400px 400px 0 0;
        bottom: -100px;
    }

}

/* Pricing View */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 15px 35px rgba(0, 0, 0, 0.3);
}

.card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.pricing-card .price {
    font-size: 3rem;
    font-weight: 700;
    margin: 1rem 0;
    color: #0f172a;
}

.pricing-card .price span {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 400;
}

.features {
    list-style: none;
    margin-bottom: 2rem;
    flex: 1;
}

.features li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.features li::before {
    content: "✓";
    color: var(--success);
    font-weight: bold;
}

.featured {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.15);
}

.badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--primary), var(--accent));
    padding: 0.2rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.paypal-container {
    margin-top: auto;
    width: 100%;
}

/* Dashboard View */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.span-2 {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .span-2 {
        grid-column: span 1;
    }
}

.api-key-container {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.api-key-container input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 0.8rem;
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 1rem;
}

.credits-display {
    margin: 1.5rem 0 1rem 0;
}

#credits-value {
    font-size: 3rem;
    font-weight: 700;
    color: white;
}

.credits-label {
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    width: 0%;
    transition: width 1s ease-out;
}

.status-tag {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
    font-weight: 600;
    text-transform: capitalize;
    margin: 1rem 0;
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 30, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #09090b;
    padding: 2.5rem 3rem;
    width: 90%;
    max-width: 420px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
    animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f8fafc;
    margin-bottom: 0.25rem;
}

@keyframes modalPop {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.close-modal {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    z-index: 10;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.close-modal:active {
    transform: scale(0.95);
}

.close-modal svg {
    pointer-events: none;
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.form-group label {
    font-size: 0.825rem;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.01em;
}

.styled-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 0.925rem;
    font-family: inherit;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.styled-input:focus {
    background: rgba(255, 255, 255, 1);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
    outline: none;
}

/* Hints must read as hints: lighter than any real value the user types. */
.styled-input::placeholder,
.form-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: #a0aec0;
    opacity: 1; /* Firefox dims placeholders by default; keep one consistent shade */
}

.code-input::placeholder {
    font-style: italic;
}

.styled-input option,
select option {
    background-color: #ffffff;
    color: var(--text-main);
}

.auth-form,
.contact-form {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.contact-form input,
.contact-form textarea {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.auth-form .form-group {
    margin-bottom: 0.75rem;
}

.auth-form .btn-full {
    margin-top: 0.35rem;
}

.btn-google {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    margin-top: 0;
}

.btn-google:hover {
    background: #f3f4f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

input,
textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    padding: 0.8rem;
    border-radius: 8px;
    color: white;
    font-family: inherit;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

.divider {
    text-align: center;
    position: relative;
    margin: 0.85rem 0;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--border);
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

.divider span {
    color: var(--text-muted);
    font-size: 0.85rem;
    background: #0f172a;
    padding: 0 10px;
}

.auth-error {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 0.75rem;
    display: none;
}

.auth-error:not(:empty) {
    display: block;
    animation: shake 0.3s ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.success-msg {
    color: var(--success);
    text-align: center;
    margin-top: 1rem;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.8rem;
    border-radius: 8px;
}

/* Toast */
.toast {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 0.85rem 1.4rem;
    border-radius: 10px;
    color: white;
    font-size: 0.925rem;
    font-weight: 500;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    z-index: 2100;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    max-width: 420px;
}

.toast.show {
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dynamic Typing & Hero Adjustments */
.typing-text {
    background: linear-gradient(to right, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cursor {
    display: inline-block;
    width: 3px;
    animation: blink 1s step-end infinite;
    color: var(--primary);
    margin-left: 2px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Scroll Reveal Sections */
.features-scroll-section {
    margin-top: 8rem;
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 12rem;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 1100px;
    margin: 0 auto;
}

.feature-row.reverse {
    flex-direction: row-reverse;
}

.feature-text {
    flex: 1;
}

.feature-graphic {
    flex: 1;
    padding: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(30, 41, 59, 0.4);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: none;
}

/* Mock Graphics for Features */
.mock-code {
    font-family: 'Fira Code', monospace;
    font-size: 1.05rem;
    color: #ffffff;
    background: #000000;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
}

.mock-code .keyword {
    color: #f472b6;
}

.mock-code .const {
    color: #60a5fa;
}

.mock-code .string {
    color: #a7f3d0;
}

.nodes-visual {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
    color: var(--text-muted);
}

.node {
    padding: 0.8rem 1.2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.node.highlight {
    border-color: var(--accent);
    color: white;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.mock-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #111111;
    color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
}

.tr {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tr:last-child {
    border-bottom: none;
}

.th,
.td {
    padding: 1rem;
    flex: 1;
}

.complex-data-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.data-pill {
    display: flex;
    align-items: center;
    background: #111111;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
    border-radius: var(--radius-lg);
    gap: 1rem;
    transition: transform 0.2s, background 0.2s;
}

.data-pill:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.05);
}

.pill-icon {
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem;
    border-radius: var(--radius-md);
}

.pill-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.data-pill:hover .pill-icon-svg {
    transform: scale(1.12);
}

.pill-icon-svg.icon-blue {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: #60a5fa;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.pill-icon-svg.icon-purple {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.28);
    color: #c084fc;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}

.pill-icon-svg.icon-emerald {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
    color: #34d399;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.pill-icon-svg.icon-amber {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #fbbf24;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.pill-content {
    display: flex;
    flex-direction: column;
}

.pill-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

.pill-value {
    font-family: monospace;
    font-size: 0.9rem;
    color: #a1a1aa;
}

/* Advanced Dynamic UI Effects */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.1) 40%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s;
    opacity: 0;
    /* Hidden until mouse moves */
}

/* Base card transition adjusted for 3D JS manipulation */
.card {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out, border-color 0.3s;
}

/* Magnetic Button Wrapper */
.magnetic-wrap {
    display: inline-block;
    position: relative;
}

/* EDA Modal Styles */
.modern-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.modern-table th,
.modern-table td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
    text-align: left;
}

.modern-table th {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-weight: 600;
}

.modern-table td {
    color: var(--text-muted);
}

.modern-table tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.complex-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* -------------------------------------
   EXPANDED UI SECTIONS (ABOUT, DOCS, USP)
   ------------------------------------- */

/* USP Section */
.usp-section {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.usp-card {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.usp-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.usp-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.usp-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.usp-card:hover .usp-icon-wrap {
    transform: translateY(-4px) scale(1.08);
}

.usp-icon-wrap.icon-cyan {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.28);
    color: #06B6D4;
    box-shadow: 0 10px 28px rgba(6, 182, 212, 0.2);
}

.usp-card:hover .usp-icon-wrap.icon-cyan {
    box-shadow: 0 14px 34px rgba(6, 182, 212, 0.35);
}

.usp-icon-wrap.icon-indigo {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.28);
    color: #818CF8;
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.2);
}

.usp-card:hover .usp-icon-wrap.icon-indigo {
    box-shadow: 0 14px 34px rgba(99, 102, 241, 0.35);
}

.usp-icon-wrap.icon-emerald {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
    color: #34D399;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.2);
}

.usp-card:hover .usp-icon-wrap.icon-emerald {
    box-shadow: 0 14px 34px rgba(16, 185, 129, 0.35);
}

.badge-icon-wrap.dag-ico-wrap {
    background: rgba(6, 182, 212, 0.15);
    color: #06B6D4;
}

/* Docs Layout */
.docs-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.docs-sidebar {
    padding: 2rem;
    align-self: start;
    position: sticky;
    top: 100px;
}

.docs-sidebar ul {
    list-style: none;
}

.docs-sidebar li {
    margin-bottom: 1rem;
}

.docs-sidebar a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.docs-sidebar a:hover {
    color: var(--primary);
}

.docs-content {
    padding: 3rem;
}

/* Contact Layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-info,
.contact-form {
    padding: 3rem;
}

.contact-info p {
    margin-bottom: 1.5rem;
}

/* Content Container (About Us) */
.content-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem;
}

/* -------------------------------------
   MESMERIZING GRAPH ANIMATION
   ------------------------------------- */
.mesmerizing-graph {
    position: relative;
    width: 100%;
    height: 300px;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0) 100%);
}

.graph-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.graph-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2;
}

.graph-particle {
    fill: none;
    stroke: var(--accent);
    stroke-width: 4;
    stroke-dasharray: 10 1000;
    stroke-linecap: round;
    animation: dash 3s linear infinite;
    filter: drop-shadow(0 0 8px var(--accent));
}

.graph-particle.p2 {
    animation-delay: 1.5s;
    stroke: var(--primary);
    filter: drop-shadow(0 0 8px var(--primary));
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.pulse-node {
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--bg-dark);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.pulse-node small {
    font-size: 0.6rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
}

.pulse-node.highlight-node {
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), inset 0 0 10px rgba(59, 130, 246, 0.3);
    animation: nodePulse 2s infinite;
}

@keyframes nodePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Modern Table Customization */
.modern-table {
    display: table;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 2px solid var(--primary);
    font-size: 0.95rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.modern-table thead {
    background: #f8fafc;
}

.modern-table th {
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    color: #475569;
    text-align: left;
    border-bottom: 2px solid var(--primary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.modern-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
    vertical-align: middle;
}

.modern-table tbody tr {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.modern-table tbody tr:hover {
    background: #f1f5f9;
}

.modern-table tbody tr:last-child td {
    border-bottom: none;
}

.mt-cell {
    /* Kept for backwards compatibility but handled by td selector */
}

.mt-cell:last-child {
    border-right: none;
}

.llm-highlight {
    color: #a7f3d0;
    font-family: monospace;
    font-size: 1rem;
}

/* Badges for Hybrid Footer */
.badge-mini {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-llm {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.badge-ind {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.badge-dep {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* -------------------------------------
   TRUSTED BY ENGINEERS CONVEYOR BELT
   ------------------------------------- */
.trusted-strip {
    margin: 6rem 0 3rem 0;
    width: 100%;
    position: relative;
    text-align: center;
}

.trusted-header {
    max-width: 720px;
    margin: 0 auto 2.75rem auto;
    padding: 0 1.5rem;
}

.trusted-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
}

.trusted-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.trusted-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 auto;
}

/* Conveyor Belt Wrapper with Gradient Edge Masks */
.conveyor-belt {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1.5rem 0;
    -webkit-mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 12%,
            rgba(0, 0, 0, 1) 88%,
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 12%,
            rgba(0, 0, 0, 1) 88%,
            rgba(0, 0, 0, 0) 100%);
}

/* Infinite Scrolling Track moving Right to Left */
.conveyor-track {
    display: flex;
    width: max-content;
    gap: 1.5rem;
    animation: conveyorScroll 40s linear infinite;
    will-change: transform;
}

.conveyor-belt:hover .conveyor-track {
    animation-play-state: paused;
}

@keyframes conveyorScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Company Badge / Conveyor Item */
.conveyor-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1.6rem;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    user-select: none;
    cursor: default;
    flex-shrink: 0;
}

.conveyor-item:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(14, 165, 233, 0.5);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 20px rgba(14, 165, 233, 0.15);
}

.brand-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.25s ease;
}

.conveyor-item:hover .brand-logo {
    transform: scale(1.1);
}

.brand-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .trusted-title {
        font-size: 1.8rem;
    }

    .conveyor-track {
        animation-duration: 28s;
        gap: 1rem;
    }

    .conveyor-item {
        padding: 0.6rem 1.2rem;
        border-radius: 10px;
    }

    .brand-logo {
        width: 22px;
        height: 22px;
    }

    .brand-name {
        font-size: 0.85rem;
    }
}


/* Google Sign-In Button */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: #ffffff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.btn-google:hover {
    background: #f7f8f8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-google svg {
    flex-shrink: 0;
}

/* Generate Data View */
.generate-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Once a schema has been generated, split into config | review so the whole
   viewport is used instead of one narrow centred column. */
.generate-layout.has-review {
    /* The schema needs the room, the form does not: give the review the larger
       share and let the page widen so every table is visible together. */
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr);
    max-width: 1820px;
}

/* Not sticky and not height-capped: a tall schema must never be cut off by an
   inner scrollbar. The page scrolls instead. */
.generate-layout.has-review #schema-review-card {
    position: static;
    max-height: none;
    overflow: visible;
}

@media (max-width: 1180px) {
    .generate-layout.has-review {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .generate-layout {
        padding: 0 0.75rem;
    }
}

/* Shared settings row: format / rows / seed / anomalies */
.gen-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.gen-settings-grid .form-group {
    margin-bottom: 0;
}

.field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.inline-check {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0 !important;
}

.inline-check input {
    width: auto;
    margin: 0;
    cursor: pointer;
}

/* Privacy notice on the schema-upload tab */
.schema-notice {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    margin-bottom: 1.75rem;
    border-radius: 12px;
    border: 1px solid rgba(6, 182, 212, 0.28);
    background: rgba(6, 182, 212, 0.07);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.schema-notice svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--primary-light);
}

.schema-notice strong {
    color: var(--text-main);
    display: block;
    margin-bottom: 0.15rem;
}

.schema-notice code,
.field-hint code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.85em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: rgba(6, 182, 212, 0.12);
    color: var(--primary-light);
}

/* "or paste it" separator */
.sql-or-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sql-or-divider::before,
.sql-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Monospace DDL editor */
.code-input {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace !important;
    font-size: 0.82rem !important;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    resize: vertical;
    min-height: 200px;
}

/* Live "we found N tables" readout under the DDL box */
.sql-detect {
    margin-top: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}

.sql-detect.ok {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.08);
}

.sql-detect.warn {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}

/* Schema review: one compact card per table, flowed into balanced columns so the
   whole schema fits on screen. Column count follows the panel width. */
.schema-cards {
    column-width: 265px;
    column-gap: 0.9rem;
}

.schema-card {
    break-inside: avoid;
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.75rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
}

.schema-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--primary);
}

.schema-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schema-card-meta {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.schema-card-cols,
.schema-card .schema-row {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1.05fr;
    gap: 0.3rem;
    align-items: center;
}

.schema-card-cols {
    margin-bottom: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.schema-card .schema-row {
    margin-bottom: 0.25rem;
}

.schema-card .schema-row input {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
    text-overflow: ellipsis;
}

/* "1 database · N tables" banner above the schema preview */

/* "1 database · N tables" banner above the schema preview */
.schema-summary {
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.schema-summary strong {
    color: var(--text-main);
}

.schema-links {
    margin-top: 0.5rem;
}

/* Keep checklist icons full size when a line wraps */
.auth-checklist li svg {
    flex-shrink: 0;
}

/* Dashboard: per-dataset action buttons */
.dataset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dataset-action {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    min-height: unset !important;
    height: auto !important;
}

.dataset-action:disabled {
    opacity: 0.6;
    cursor: progress;
}

.dataset-expiry {
    flex-basis: 100%;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dataset-expired {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.dataset-error {
    cursor: help;
    border-bottom: 1px dotted #ef4444;
    color: #ef4444;
    white-space: nowrap;
}

.schema-links summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary-light);
    font-size: 0.8rem;
}

.schema-links ul {
    margin: 0.4rem 0 0 1.1rem;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.55;
}

.schema-summary .tbl-rows {
    opacity: 0.75;
    font-size: 0.9em;
}

.schema-summary .tbl-chip,
.sql-detect .tbl-chip {
    display: inline-block;
    margin: 0.2rem 0.3rem 0 0;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.75rem;
    background: rgba(6, 182, 212, 0.14);
    color: var(--primary-light);
    border: 1px solid rgba(6, 182, 212, 0.25);
}

.form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.styled-input {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.styled-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.form-checkbox input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--primary);
}

.form-checkbox label {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.4;
}

.spinner {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    vertical-align: text-bottom;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Schema Preview Card */
.schema-preview {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    /* No height cap: the schema is shown in full and the page scrolls instead of
       the card hiding rows behind an inner scrollbar. */
    max-height: none;
    overflow: visible;
}

/* Schema Table */
.schema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.schema-table th,
.schema-table td {
    border: 1px solid var(--border);
    padding: 0.6rem 0.8rem;
    text-align: left;
    vertical-align: top;
}

.schema-table thead th {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.schema-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.schema-table code {
    background: rgba(6, 182, 212, 0.15);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--primary-light);
}

.schema-table-group td {
    background: rgba(6, 182, 212, 0.08);
    font-weight: 600;
    color: var(--primary-light);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--primary);
}

.schema-row-warning {
    background: rgba(239, 68, 68, 0.05) !important;
}

.badge-llm-warning {
    display: inline-block;
    font-size: 0.7rem;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.3rem;
    cursor: help;
}

.schema-restrictions-cell {
    color: var(--text-muted);
    font-size: 0.8rem;
    max-width: 280px;
    word-wrap: break-word;
}

/* Generate Data Sub-Tabs */
.gen-subtabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.4rem;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.gen-subtab {
    flex: 1;
    padding: 0.8rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.gen-subtab:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.gen-subtab.active {
    background: rgba(6, 182, 212, 0.15);
    color: var(--primary-light);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.gen-subtab-content {
    display: none;
}

.gen-subtab-content.active {
    display: block;
}

/* File Upload Area */
.file-upload-area {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.file-upload-area:hover,
.file-upload-area.dragover {
    border-color: var(--primary);
    background: rgba(6, 182, 212, 0.05);
}

.file-upload-area .upload-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--primary-light);
}

.file-upload-area p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0.3rem 0;
}

.file-upload-area .file-name {
    color: var(--primary-light);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.action-link {
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 500;
}

.action-link:hover {
    text-decoration: underline;
}

/* Footer */
.app-footer {
    text-align: center;
    padding: 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
}

.footer-links {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.footer-links a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.badge-green {
    background: linear-gradient(90deg, #10b981, #059669);
}

.features li.feature-disabled::before {
    content: "✕";
    color: #ef4444;
    font-weight: bold;
}

a.btn-primary,
a.btn-secondary {
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif !important;
    border: none;
    box-sizing: border-box;
}


/* ==========================================================================
   Capabilities Section (Side-Tab Layout)
   ========================================================================== */
.capabilities-section {
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.capabilities-header {
    text-align: center;
    margin-bottom: 4rem;
}

.capabilities-header h2 {
    font-family: 'Sora', sans-serif;
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.capabilities-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.capabilities-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) {
    .capabilities-container {
        grid-template-columns: 1fr;
    }
}

/* Left Tabs */
.capabilities-tabs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cap-tab {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    color: var(--text-primary);
}

.cap-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
}

.cap-tab.active {
    background: rgba(11, 172, 211, 0.1);
    border-color: rgba(11, 172, 211, 0.4);
    box-shadow: inset 4px 0 0 var(--accent);
}

.cap-tab .tab-icon {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.cap-tab.active .tab-icon {
    color: var(--accent);
}

.cap-tab h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.cap-tab p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Right Display */
.capabilities-display {
    padding: 3rem;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cap-panel {
    display: none;
    animation: fadeInSlideUp 0.4s ease forwards;
}

.cap-panel.active {
    display: block;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cap-panel h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.cap-panel p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.cap-visual {
    background: #000000;
    border-radius: var(--radius-sm);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 4px 20px rgba(0,0,0,0.9);
}

.cap-visual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Funnel Visual specifically */
.funnel-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.funnel-step {
    background: rgba(11, 172, 211, 0.15);
    border: 1px solid rgba(11, 172, 211, 0.3);
    padding: 0.75rem 2rem;
    border-radius: 20px;
    color: var(--accent);
    font-family: 'Sora', sans-serif;
    font-weight: 600;
}

.funnel-arrow {
    color: #a1a1aa;
    font-size: 1.2rem;
}

/* Global modal and text color fixes */
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4 {
    color: #ffffff !important;
}

.modal-content p, .modal-content span:not(.badge):not(.tag) {
    color: #cbd5e1;
}



/* EDA Chart text */
.chart-title, .dist-label {
    color: var(--text-main) !important;
}

/* Fix chart bars container backgrounds */
.chart-bar {
    background-color: var(--primary) !important;
}

/* Type Selector Modal Styles */
.type-selector-content {
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.type-grid-container {
    overflow-y: auto;
    padding-right: 0.5rem;
}

.type-category-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 1.5rem 0 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.25rem;
}
.type-category-header:first-child {
    margin-top: 0;
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.type-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-light);
    transform: translateY(-2px);
}

.type-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 0.25rem;
}

.type-card-example {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Modal Overlay and Content Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    width: 90%;
    max-width: 800px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    position: relative;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 1.25rem;
}

.btn-close-modal {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-close-modal:hover {
    color: var(--text-main);
}

/* Info Tooltip */
.info-tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-tooltip-container .info-tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: #1e293b;
    color: #f1f5f9;
    text-align: center;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    position: absolute;
    z-index: 100;
    bottom: 125%; 
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    line-height: 1.4;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.1);
}

.info-tooltip-container .info-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

.info-tooltip-container:hover .info-tooltip-text,
.info-tooltip-container:focus-within .info-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Pricing cards: an ⓘ sits near the card's right edge, so its tooltip opens towards the left and stays
   inside the card, and the card being read sits above its neighbour (which used to cover the tooltip). */
.pricing-card .info-tooltip-container .info-tooltip-text { left: auto; right: -0.5rem; transform: none; }
.pricing-card .info-tooltip-container .info-tooltip-text::after { left: auto; right: 0.6rem; margin-left: 0; }
.pricing-card:hover, .pricing-card:focus-within { position: relative; z-index: 5; }

/* Schema review: the "refine" box, a white card like the rest of the page */
.refine-schema { margin-top: 1rem; background: #fff; padding: 1rem 1.1rem 1.1rem; border-radius: 12px; border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); }
.refine-schema.hidden { display: none; }
.refine-schema-label { display: block; font-weight: 600; font-size: 0.9rem; color: #0f172a; margin-bottom: 0.5rem; }
.refine-schema-input { width: 100%; resize: vertical; margin: 0; min-height: 88px; background: #fff; color: #0f172a; }
.refine-schema-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.refine-schema-counter { font-size: 0.85rem; color: #64748b; }
.refine-schema-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.refine-schema-actions button { padding: 0.5rem 1.25rem; min-height: unset; height: 38px; border-radius: 8px; }

/* Generate Data: one-click examples (hand-built plans, no AI call) */
.gen-examples { margin: 0 0 1.25rem; padding: 1rem 1rem 0.9rem; border: 1px dashed #c7d2fe; border-radius: 12px; background: rgba(238, 242, 255, 0.55); }
.gen-examples-head { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; margin-bottom: 0.7rem; }
.gen-examples-head strong { font-size: 0.95rem; color: #0f172a; }
.gen-examples-head span { font-size: 0.8rem; color: #64748b; }
.gen-examples-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gen-example { border: 1px solid #c7d2fe; background: #fff; color: #3730a3; border-radius: 999px; padding: 0.45rem 0.85rem;
    font: 600 0.82rem Inter, system-ui, sans-serif; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.gen-example:hover { background: #eef2ff; border-color: #a5b4fc; }
.gen-example.active { background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; border-color: transparent; }
.gen-example:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.gen-examples-note { margin: 0.7rem 0 0; font-size: 0.82rem; color: #475569; }

/* Auth Split Layout (Two Column) */
.auth-split-layout {
    display: flex !important;
    flex-direction: row;
    padding: 0 !important;
    max-width: 1000px !important;
    min-height: 600px;
    height: auto;
    max-height: 90vh;
    background: #ffffff !important;
    overflow: hidden;
}

.auth-left {
    flex: 1;
    padding: 3rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    overflow-y: auto;
}

.auth-right {
    flex: 1;
    background-image: url('auth-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.auth-right-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.auth-glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    color: #0f172a;
    width: 100%;
}

.modal-content h3.auth-glass-card-title {
    color: #0f172a !important;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.modal-content p.auth-glass-card-text {
    color: #475569 !important;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-checklist {
    list-style: none;
    padding: 0;
}

.auth-checklist li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: #334155 !important;
    font-size: 0.85rem;
}

.auth-glass-icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.glass-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.auth-new-feature {
    text-align: center;
    color: white;
}

.auth-badge {
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: inline-block;
}

.auth-new-feature h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: white !important;
}

.auth-new-feature p {
    font-size: 1rem;
    opacity: 0.9;
    color: white !important;
    max-width: 300px;
    margin: 0 auto;
}

.auth-left-content {
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
}

.auth-logo-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.modal-content h2.auth-title {
    color: #0f172a !important;
    font-size: 2rem !important;
    margin-bottom: 0.5rem;
}

.modal-content p.auth-subtitle {
    color: #64748b !important;
    font-size: 1rem;
    margin-bottom: 2rem;
}

.auth-split-layout .form-group label {
    color: #334155 !important;
    font-size: 0.85rem;
    font-weight: 600;
}

.auth-split-layout .styled-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    padding: 0.85rem;
    border-radius: 8px;
    width: 100%;
}

.auth-split-layout .styled-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

.remember-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.remember-text {
    font-size: 0.9rem;
    color: #475569 !important;
    font-weight: 500;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
}
input:checked + .slider {
    background-color: var(--primary);
}
input:checked + .slider:before {
    transform: translateX(16px);
}
.slider.round {
    border-radius: 20px;
}
.slider.round:before {
    border-radius: 50%;
}

.auth-split-layout .divider span {
    background: #ffffff !important;
    color: #94a3b8 !important;
}
.auth-split-layout .divider::before, .auth-split-layout .divider::after {
    border-top: 1px solid #e2e8f0;
}

.auth-split-layout .btn-google {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}
.auth-split-layout .btn-google:hover {
    background: #f1f5f9;
}

.auth-close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    background: rgba(0,0,0,0.2) !important;
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
}
.auth-close-btn:hover {
    background: rgba(0,0,0,0.4) !important;
}

@media (max-width: 768px) {
    .auth-right {
        display: none;
    }
    .auth-split-layout {
        height: auto;
        min-height: 500px;
    }
    .auth-left {
        padding: 2rem;
    }
}

.auth-split-layout .auth-error {
    color: #000000 !important;
    background: #fecdd3 !important;
    border: 1px solid #fda4af !important;
    font-weight: 500 !important;
}

/* --- Profile Dashboard Modal Layout --- */
.profile-dashboard-layout {
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.profile-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.profile-actions button {
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-actions button:hover {
    background: rgba(14, 165, 233, 0.05) !important;
}

.profile-grid-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-avatar-container {
    margin-bottom: 0.5rem;
}

.profile-avatar-circle {
    width: 140px;
    height: 140px;
    background: #f1f5f9;
    border-radius: 12px; /* slight rounding, not full circle like reference */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e2e8f0;
}

.profile-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.35rem;
}

.status-badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.active-badge {
    background: #0ea5e9;
    color: white;
}

.profile-meta-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.profile-meta-sub {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.2rem;
    display: block;
}

.profile-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-info-card {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 1.5rem;
}

.card-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.25rem 0;
}

.info-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.profile-clean-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    padding: 0;
    transition: border-color 0.2s;
}

.profile-clean-input:not([readonly]) {
    border-bottom: 1px solid #cbd5e1;
}
.profile-clean-input:not([readonly]):focus {
    outline: none;
    border-bottom: 1px solid #0ea5e9;
}

.profile-text-value {
    font-size: 1rem;
    font-weight: 500;
    color: #334155;
    margin: 0;
}

.profile-view-all {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0ea5e9;
    text-decoration: none;
}
.profile-view-all:hover {
    text-decoration: underline;
}

.usage-stats-row {
    display: flex;
    gap: 2rem;
}

.usage-stat-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 40px;
    height: 40px;
    background: rgba(14, 165, 233, 0.1);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.usage-value {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

@media (max-width: 768px) {
    .profile-grid-container {
        grid-template-columns: 1fr;
    }
    .profile-avatar-circle {
        margin: 0 auto;
    }
    .profile-sidebar {
        align-items: center;
        text-align: center;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 1.5rem;
    }
}

/* --- About Section Translucent Wave Background --- */
#view-about {
    position: relative;
}

#view-about::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1000px;
    background: url('auth-bg.jpg') no-repeat center top;
    background-size: cover;
    opacity: 0.2; /* Slightly increased to account for the heavy radial fade */
    z-index: -1;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 65%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 65%);
    pointer-events: none;
}

/* Rainbow usage bar animation */
@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}


.scratch-grid-row {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr 1.1fr 1.9fr 40px;
    gap: 0.5rem;
    align-items: center;
}

/* Below this the five columns are unusable; stack each field into a labelled
   card instead of letting the inputs shrink to nothing. */
@media (max-width: 860px) {
    .scratch-fields-header {
        display: none;
    }

    .scratch-field-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 0.85rem;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.03);
        position: relative;
    }

    .scratch-field-row>.field-name,
    .scratch-field-row>.field-comment {
        grid-column: 1 / -1;
    }

    .scratch-field-row>button:last-child {
        position: absolute;
        top: 0.4rem;
        right: 0.4rem;
        width: 28px !important;
        height: 28px !important;
    }
}

/* ---------------------------------------------
   PHONE LAYOUT (<= 640px): Google ranks the mobile version of the page,
   so nothing may be wider than the screen.
   --------------------------------------------- */
@media (max-width: 640px) {
    html, body { overflow-x: clip; }

    .app-header {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .dynamic-island-nav {
        position: static;
        transform: none;
        order: 3;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0.3rem 0.4rem;
        justify-content: flex-start;
    }
    .dynamic-island-nav::-webkit-scrollbar { display: none; }
    .dynamic-island-nav a { white-space: nowrap; padding: 0.35rem 0.75rem; font-size: 0.85rem; }

    .hero { max-width: 100%; padding: 0 1rem; margin-top: 5.5rem; }
    .hero h1 { font-size: clamp(2.1rem, 10.5vw, 3rem); min-height: 8.5rem; }
    .hero h1 span[style] { white-space: normal !important; }
    .hero .typing-text { white-space: normal; }
    .hero p { font-size: 1rem; max-width: 100%; }

    .nav-brand-text { font-size: 0.95rem; }
    .nav-logo-icon { height: 26px; width: auto; }
    .header-right #auth-btn { padding: 0.45rem 1rem; font-size: 0.85rem; }
}

/* Home: "See It In Action" links to the Product Demo page (the video lives
   there, so the home page doesn't download it). Pure CSS, no image. */
.demo-video-wrap {
    max-width: 1360px;
    margin: 0 auto;
    text-align: center;
}
.demo-teaser {
    position: relative; display: grid; place-items: center; gap: 0.9rem;
    max-width: 860px; margin: 0 auto; padding: 4.2rem 1.5rem 3rem; border-radius: 18px; overflow: hidden;
    text-decoration: none; color: #fff;
    background: radial-gradient(circle at 20% 15%, rgba(14, 165, 233, 0.35), transparent 45%),
                radial-gradient(circle at 85% 90%, rgba(139, 92, 246, 0.4), transparent 50%), #0b1220;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18), 0 8px 20px rgba(15, 23, 42, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.demo-teaser:hover { transform: translateY(-3px); box-shadow: 0 36px 80px rgba(15, 23, 42, 0.24), 0 10px 24px rgba(15, 23, 42, 0.1); }
.demo-teaser .dt-lights { position: absolute; top: 14px; left: 16px; display: flex; gap: 7px; }
.demo-teaser .dt-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.demo-teaser .dt-lights i:nth-child(2) { background: #febc2e; }
.demo-teaser .dt-lights i:nth-child(3) { background: #28c840; }
.demo-teaser .dt-play { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #fff;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12); transition: transform 0.25s ease; }
.demo-teaser:hover .dt-play { transform: scale(1.06); }
.demo-teaser .dt-play::after { content: ""; margin-left: 6px; border-style: solid; border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #6366f1; }
.demo-teaser strong { font-family: 'Sora', sans-serif; font-size: 1.35rem; letter-spacing: -0.01em; }
.demo-teaser span { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }
@media (max-width: 640px) {
    .interactive-demo-section { padding: 3rem 0.75rem !important; }
    .demo-teaser { padding: 3.4rem 1rem 2.4rem; border-radius: 14px; }
    .demo-teaser strong { font-size: 1.15rem; }
}

/* Header: "Book a Demo" next to Sign In (opens the form from book-demo.js). */
.btn-book-demo {
    height: 40px; padding: 0 1.1rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1px solid rgba(14, 165, 233, 0.45); background: rgba(255, 255, 255, 0.75); color: var(--primary);
    font: 600 0.9rem 'Inter', sans-serif; transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.btn-book-demo:hover { background: rgba(14, 165, 233, 0.08); border-color: var(--primary); transform: translateY(-1px); }
@media (max-width: 640px) {
    /* One header row on phones: logo, Demo, Sign In. */
    .app-header .header-left { min-width: 0; }
    .header-right { gap: 0.4rem; flex-shrink: 0; }
    .btn-book-demo { height: 32px; padding: 0 0.75rem; font-size: 0.78rem; }
    .btn-book-demo .bd-long { display: none; }
    .header-right #auth-btn { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
    .nav-brand-link { gap: 0.45rem; }
    .nav-brand-text { font-size: 0.82rem !important; letter-spacing: 0.03em; }
}
@media (max-width: 380px) {
    .nav-brand-text { font-size: 0.74rem !important; letter-spacing: 0.02em; }
}
/* =====================================================================
   Home: "Others Fake Rows. We Build Databases." (why-us + comparison)
   ===================================================================== */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.why-us-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4.5rem 2rem 3.5rem;
    text-align: center;
}

.why-us-header { margin-bottom: 2.5rem; }
.why-us-header p { max-width: 720px; margin: 0.75rem auto 0; color: var(--text-muted); font-size: 1.08rem; }

.why-us-eyebrow {
    display: inline-block;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.25);
    color: var(--primary-hover);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.why-us-accent {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Proof cards */
.why-us-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.proof-card {
    padding: 1.9rem 1.7rem 1.7rem;
    text-align: left;
    border-radius: var(--radius-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.proof-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14, 165, 233, 0.14); }

.proof-figure {
    font-family: 'Sora', sans-serif;
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-main);
    letter-spacing: -0.03em;
}
.proof-figure span { font-size: 1.4rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }

.proof-title {
    margin: 0.45rem 0 0.8rem;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--primary-hover);
}
.proof-card p { margin: 0; color: var(--text-muted); font-size: 0.93rem; line-height: 1.6; }

.proof-card-featured {
    background: linear-gradient(160deg, rgba(14, 165, 233, 0.10), rgba(99, 102, 241, 0.08)), rgba(255, 255, 255, 0.75);
    border-color: rgba(14, 165, 233, 0.35);
}

/* Comparison table */
.cmp-wrap { padding: 0.5rem 0.5rem 1rem; border-radius: var(--radius-md); text-align: left; }
.cmp-scroll { overflow-x: auto; }

.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 0.95rem 1rem; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }

.cmp-table thead th {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    vertical-align: bottom;
}
.cmp-table thead th.cmp-corner { text-align: left; }

.cmp-table tbody th { text-align: left; font-weight: 400; width: 46%; }
.cmp-feature { display: block; font-weight: 600; color: var(--text-main); font-size: 0.97rem; }
.cmp-note { display: block; margin-top: 0.2rem; color: var(--text-muted); font-size: 0.83rem; }
.cmp-table td { text-align: center; font-size: 1.15rem; }

/* Our column: tinted, with rounded top and bottom */
.cmp-table .cmp-us { background: rgba(14, 165, 233, 0.07); }
.cmp-table thead .cmp-us { border-radius: 14px 14px 0 0; padding-top: 1.1rem; }
.cmp-table tbody tr:last-child .cmp-us { border-radius: 0 0 14px 14px; }
.cmp-us-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.3);
}

.cmp-yes, .cmp-part, .cmp-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: 0.95rem;
}
.cmp-yes { background: rgba(16, 185, 129, 0.14); color: #059669; }
.cmp-part { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.cmp-no { background: rgba(239, 68, 68, 0.10); color: #dc2626; }

.cmp-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem;
    margin-top: 0.8rem; font-size: 0.82rem; color: var(--text-muted);
}
.cmp-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.cmp-legend .cmp-yes, .cmp-legend .cmp-part, .cmp-legend .cmp-no { width: 22px; height: 22px; font-size: 0.75rem; }

.why-us-cta { margin-top: 2.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.why-us-cta-note { font-size: 0.85rem; color: var(--text-muted); }

@media (max-width: 900px) {
    .why-us-proof { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .why-us-section { padding: 3rem 0.75rem 2.5rem; }
    .proof-figure { font-size: 2.4rem; }
    .cmp-table { min-width: 0; }
    .cmp-table th, .cmp-table td { padding: 0.75rem 0.45rem; }
    .cmp-table thead th { font-size: 0.66rem; letter-spacing: 0; }
    .cmp-us-badge { padding: 0.3rem 0.5rem; font-size: 0.66rem; }
    .cmp-note { display: none; }
    .cmp-feature { font-size: 0.86rem; }
    .cmp-yes, .cmp-part, .cmp-no { width: 24px; height: 24px; font-size: 0.78rem; }
}
/* Comparison: override the site-wide table grid; give the cards real surfaces. */
.cmp-table tr th, .cmp-table tr td {
    border: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background-color: transparent;
}
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tr .cmp-us { background-color: rgba(14, 165, 233, 0.07); }
.cmp-table tbody tr:hover th, .cmp-table tbody tr:hover td:not(.cmp-us) { background-color: rgba(15, 23, 42, 0.02); }

.proof-card, .cmp-wrap {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.proof-card-featured {
    background: linear-gradient(160deg, rgba(14, 165, 233, 0.12), rgba(99, 102, 241, 0.09)), rgba(255, 255, 255, 0.85);
    border-color: rgba(14, 165, 233, 0.35);
}
.cmp-wrap { padding: 0.75rem 1rem 1.1rem; }
/* Comparison table: short column labels and balanced widths on phones. */
.cmp-short { display: none; }
@media (max-width: 640px) {
    .cmp-long { display: none; }
    .cmp-short { display: inline; }
    .cmp-wrap { padding: 0.4rem 0.35rem 0.9rem; }
    .cmp-table { table-layout: fixed; }
    .cmp-table tbody th { width: 46%; }
    .cmp-table thead th.cmp-corner { width: 46%; font-size: 0.62rem; }
    .cmp-table th, .cmp-table td { padding: 0.7rem 0.3rem; }
    .cmp-table thead th { font-size: 0.62rem; line-height: 1.25; }
    .cmp-feature { font-size: 0.84rem; line-height: 1.3; }
    .cmp-us-badge { padding: 0.28rem 0.6rem; font-size: 0.7rem; }
    .cmp-legend { gap: 0.4rem 1rem; }
}
@media (max-width: 640px) {
    .cmp-table tbody th, .cmp-table thead th.cmp-corner { width: 41%; }
    .cmp-table thead th { letter-spacing: 0; padding-left: 0.15rem; padding-right: 0.15rem; }
}
/* Decorative hero ring and orbs are wider than tablets; never let them add a sideways scroll. */
html, body { overflow-x: clip; }
/* =====================================================================
   Home: "Inside the Engine" (seven-stage pipeline timeline)
   ===================================================================== */
.engine-section { max-width: 1120px; margin: 0 auto; padding: 3.5rem 2rem 4rem; text-align: center; }
.engine-header { margin-bottom: 3rem; }
.engine-header p { max-width: 640px; margin: 0.75rem auto 0; color: var(--text-muted); font-size: 1.05rem; }

.engine-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
/* The spine */
.engine-timeline::before {
    content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px;
    background: linear-gradient(var(--primary), var(--accent));
    opacity: 0.35; border-radius: 2px;
}

.engine-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    align-items: center;
    margin-bottom: 1.4rem;
}
.engine-step:last-child { margin-bottom: 0; }

.engine-node {
    grid-column: 2; grid-row: 1;
    justify-self: center;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 0 0 6px #f4f8fb, 0 8px 20px rgba(14, 165, 233, 0.35);
    position: relative; z-index: 1;
}

.engine-card {
    grid-row: 1;
    position: relative;
    text-align: left;
    padding: 1.4rem 1.5rem 1.3rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.engine-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14, 165, 233, 0.12); border-color: rgba(14, 165, 233, 0.3); }

/* Odd stages on the left of the spine, even stages on the right */
.engine-step:nth-child(odd) .engine-card { grid-column: 1; margin-right: 0.4rem; }
.engine-step:nth-child(even) .engine-card { grid-column: 3; margin-left: 0.4rem; }
/* Small pointer from each card towards the spine */
.engine-card::after {
    content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px;
    background: inherit; border: inherit; transform: rotate(45deg);
}
.engine-step:nth-child(odd) .engine-card::after { right: -7px; border-left: 0; border-bottom: 0; }
.engine-step:nth-child(even) .engine-card::after { left: -7px; border-right: 0; border-top: 0; }

.engine-kicker {
    display: block; margin-bottom: 0.2rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-hover);
}
.engine-card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--text-main); letter-spacing: -0.01em; }
.engine-card p { margin: 0 0 0.9rem; color: var(--text-muted); font-size: 0.92rem; line-height: 1.62; }

.engine-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.engine-tags span {
    padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; font-size: 0.72rem;
    color: #3730a3; background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2);
}

.engine-footnote { margin: 2.4rem auto 0; font-size: 0.92rem; font-style: italic; color: var(--text-muted); }

/* Tablets and phones: spine on the left, every card to its right */
@media (max-width: 860px) {
    .engine-timeline::before { left: 23px; }
    .engine-step { grid-template-columns: 46px minmax(0, 1fr); column-gap: 1rem; align-items: start; }
    .engine-node { grid-column: 1; }
    .engine-step:nth-child(odd) .engine-card,
    .engine-step:nth-child(even) .engine-card { grid-column: 2; margin: 0; }
    .engine-step:nth-child(odd) .engine-card::after,
    .engine-step:nth-child(even) .engine-card::after { left: -7px; right: auto; top: 23px; border: inherit; border-right: 0; border-top: 0; }
}
@media (max-width: 640px) {
    .engine-section { padding: 2.5rem 0.75rem 3rem; }
    .engine-card { padding: 1.15rem 1.1rem 1.05rem; }
}
/* Desktop: stagger the alternating cards so each starts beside the previous one's middle. */
@media (min-width: 861px) {
    .engine-step { margin-bottom: 0; }
    .engine-step + .engine-step { margin-top: -5.2rem; }
}
/* Engine section v2: stats strip, lead line and technique bullets */
.engine-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
    max-width: 860px; margin: -1rem auto 3rem;
}
.engine-stat {
    padding: 1rem 0.75rem; border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
}
.engine-stat-num {
    font-family: 'Sora', sans-serif; font-size: 1.9rem; font-weight: 700; line-height: 1.1;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.engine-stat-label { font-size: 0.8rem; color: var(--text-muted); text-align: center; }

.engine-card .engine-lead { margin: 0 0 0.8rem; color: var(--text-main); font-weight: 500; font-size: 0.95rem; }
.engine-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.engine-points li {
    position: relative; padding-left: 1.55rem;
    font-size: 0.875rem; line-height: 1.55; color: var(--text-muted);
}
.engine-points li::before {
    content: ""; position: absolute; left: 0; top: 0.28rem; width: 1rem; height: 1rem; border-radius: 50%;
    background: rgba(14, 165, 233, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.4 2.3L12 5.2' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.engine-points strong { color: var(--text-main); font-weight: 600; }

@media (max-width: 860px) { .engine-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 861px) { .engine-step + .engine-step { margin-top: -6.5rem; } }
.engine-points strong { display: block; margin-bottom: 0.05rem; }

/* Engine roadmap items, clearly marked as in development */
.engine-next {
    margin-top: 0.9rem; padding: 0.75rem 0.85rem 0.8rem;
    border-radius: 12px; border: 1px dashed rgba(124, 58, 237, 0.35);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(14, 165, 233, 0.04));
}
.engine-next-label {
    display: inline-block; margin-bottom: 0.55rem; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #6d28d9; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3);
}
.engine-points-next li::before {
    background: rgba(139, 92, 246, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.6' fill='%237c3aed'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
.engine-footnote-dev { display: inline-block; margin-top: 0.35rem; font-style: normal; font-size: 0.82rem; }
/* Engine cards v3: compact */
.engine-card { padding: 1.15rem 1.3rem 1.1rem; }
.engine-card h3 { margin-bottom: 0.7rem; font-size: 1.08rem; }
.engine-points { gap: 0.45rem; }
.engine-points li { padding-left: 1.45rem; font-size: 0.9rem; color: var(--text-main); font-weight: 500; }
.engine-points li::before { top: 0.2rem; }
@media (min-width: 861px) { .engine-step + .engine-step { margin-top: -3.6rem; } }
/* Two-way comparison: narrower, centred */
.cmp-wrap:has(.cmp-two) { max-width: 900px; margin: 0 auto; }
.cmp-two { min-width: 0; }
.cmp-two tbody th { width: 58%; }
.cmp-two td, .cmp-two thead th:not(.cmp-corner) { width: 21%; }
@media (max-width: 640px) {
    .cmp-two tbody th, .cmp-two thead th.cmp-corner { width: 56%; }
    .cmp-two td, .cmp-two thead th:not(.cmp-corner) { width: 22%; }
}
/* =====================================================================
   Scroll reveal for the engine timeline and comparison rows.
   Only active once JS adds .reveal-on (content stays visible without JS).
   ===================================================================== */
.reveal-on .engine-step .engine-card {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on .engine-step:nth-child(odd) .engine-card { transform: translateX(-36px); }
.reveal-on .engine-step:nth-child(even) .engine-card { transform: translateX(36px); }
.reveal-on .engine-step .engine-node {
    opacity: 0; transform: scale(0.4);
    transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-on .engine-step .engine-points li {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    transition-delay: calc(0.25s + var(--i, 0) * 0.12s);
}
.reveal-on .engine-step.is-visible .engine-card { opacity: 1; transform: none; }
.reveal-on .engine-step.is-visible .engine-node { opacity: 1; transform: none; }
.reveal-on .engine-step.is-visible .engine-points li { opacity: 1; transform: none; }

.reveal-on .cmp-table tbody tr {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--i, 0) * 0.08s);
}
.reveal-on .cmp-table tbody tr.is-visible { opacity: 1; transform: none; }

@media (max-width: 860px) {
    .reveal-on .engine-step:nth-child(odd) .engine-card,
    .reveal-on .engine-step:nth-child(even) .engine-card { transform: translateX(28px); }
}
@media (prefers-reduced-motion: reduce) {
    .reveal-on .engine-step .engine-card, .reveal-on .engine-step .engine-node,
    .reveal-on .engine-step .engine-points li, .reveal-on .cmp-table tbody tr {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}
/* Data-type picker: note under the "Generate with AI" category */
.type-category-hint {
    display: block; margin-top: 0.2rem;
    font-size: 0.78rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted);
}
/* Data-type picker: AI cards locked on plans without AI */
.type-card.type-card-locked { opacity: 0.5; filter: grayscale(1); cursor: not-allowed; }
.type-card.type-card-locked:hover { opacity: 0.62; transform: none; }
.type-card-lock {
    margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; vertical-align: middle;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: #b91c1c; background: rgba(239, 68, 68, 0.12);
}

/* Red upgrade pop-up */
.ai-upgrade-overlay {
    position: fixed; inset: 0; z-index: 20000;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(3px);
}
.ai-upgrade-overlay[hidden] { display: none; }
.ai-upgrade-card {
    width: min(440px, 100%); padding: 1.6rem 1.6rem 1.4rem; border-radius: 16px; text-align: center;
    background: #fff; border: 1px solid rgba(239, 68, 68, 0.35); border-top: 5px solid #ef4444;
    box-shadow: 0 24px 60px rgba(127, 29, 29, 0.25);
    animation: aiUpgradeIn 0.22s ease-out;
}
@keyframes aiUpgradeIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.ai-upgrade-icon {
    width: 48px; height: 48px; margin: 0 auto 0.8rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3);
}
.ai-upgrade-card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: #b91c1c; }
.ai-upgrade-card p { margin: 0 0 1.2rem; font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); }
.ai-upgrade-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.ai-upgrade-primary, .ai-upgrade-secondary {
    padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.ai-upgrade-primary { border: 0; color: #fff; background: #ef4444; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); }
.ai-upgrade-primary:hover { background: #dc2626; }
.ai-upgrade-secondary { border: 1px solid rgba(15, 23, 42, 0.15); background: #fff; color: var(--text-main); }

/* Text for search engines and screen readers only */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Dashboard: API access card */
/* Free-trial banner on the dashboard (active trial, or waiting for email verification) */
.trial-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; flex-wrap: wrap;
    margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid #c7d2fe; border-left: 4px solid #6366f1; border-radius: 12px;
    background: rgba(238, 242, 255, 0.75); }
.trial-banner[hidden] { display: none; }
.trial-banner p { margin: 0; flex: 1 1 22rem; color: #334155; font-size: 0.95rem; line-height: 1.5; }
.trial-banner p strong { color: #0f172a; }
.trial-banner[data-state="verify"] { border-color: rgba(245, 158, 11, 0.45); border-left-color: #f59e0b; background: rgba(255, 251, 235, 0.85); }
.trial-banner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.trial-banner-go, .trial-banner-alt { padding: 0.6rem 1.15rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.trial-banner-go:disabled { opacity: 0.6; cursor: wait; }
.trial-banner-alt { color: #334155; border-color: #cbd5e1; background: #ffffff; }
.trial-banner-alt:hover { background: #f8fafc; border-color: #94a3b8; }
.trial-banner-alt[hidden] { display: none; }

/* My designs (dashboard) */
.my-designs-card { margin-top: 1.5rem; }
.my-designs-card [hidden] { display: none !important; }
.my-designs-empty { margin: 1.1rem 0 0; color: var(--text-muted); font-size: 0.92rem; }
.my-designs-table { width: 100%; margin-top: 1rem; }
.my-design-name { font-weight: 600; color: #0f172a; max-width: 22rem; overflow-wrap: anywhere; }
.my-designs-table td:nth-child(2) { white-space: nowrap; }
.my-design-rename { width: 100%; min-width: 12rem; padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.my-design-delete:hover { color: #b91c1c; border-color: rgba(239, 68, 68, 0.45); }

/* My designs: View schema pop-up (light, like the dashboard) */
#design-schema-modal .design-schema-content, #example-preview-modal .design-schema-content {
    max-width: 920px; width: 92%; max-height: 86vh; display: flex; flex-direction: column;
    background: #ffffff; color: #0f172a; border: none; border-top: 4px solid #6366f1; border-radius: 16px;
    padding: 1.6rem 1.8rem 1.4rem;
}
#design-schema-modal .auth-close-btn, #example-preview-modal .auth-close-btn { top: 1rem; right: 1rem; background: rgba(15, 23, 42, 0.06) !important; color: #334155; }
#design-schema-modal .auth-close-btn:hover, #example-preview-modal .auth-close-btn:hover { background: rgba(15, 23, 42, 0.12) !important; }
.design-schema-title { margin: 0 2.5rem 0.25rem 0; font-size: 1.25rem; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.design-schema-meta { margin: 0 0 0.9rem; color: #64748b; font-size: 0.88rem; }
/* These two boxes are light: undo the dark pop-ups' white headings and pale text (.modal-content h3 / p / span). */
#design-schema-modal .design-schema-title, #example-preview-modal .design-schema-title { color: #0f172a !important; }
#design-schema-modal .design-schema-meta, #example-preview-modal .design-schema-meta,
#design-schema-modal .ds-table h4, #example-preview-modal .ds-table h4 { color: #0f172a !important; }
#design-schema-modal .ds-table h4 span, #example-preview-modal .ds-table h4 span,
#example-preview-modal .ep-file span, #example-preview-modal .ep-meta-desc { color: #64748b; }
#example-preview-modal .ep-file.active span { color: #4338ca; }
#example-preview-modal .ds-key { color: #4338ca; }
#example-preview-modal .ep-rules span { color: #334155; }
#example-preview-modal .ep-rules .holds .ep-rule-mark { color: #15803d; }
#example-preview-modal .ep-rules .pending .ep-rule-mark { color: #b45309; }
.design-schema-tabs { display: flex; gap: 0.4rem; align-items: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.6rem; }
.design-schema-tab, .design-schema-copy {
    border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; border-radius: 8px;
    padding: 0.35rem 0.85rem; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.design-schema-tab.active { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.design-schema-copy { margin-left: auto; }
.design-schema-tab:focus-visible, .design-schema-copy:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.design-schema-body { overflow: auto; margin-top: 0.9rem; flex: 1; min-height: 0; }
.design-schema-body [hidden] { display: none !important; }
.ds-table { margin-bottom: 1.25rem; }
.ds-table h4 { margin: 0 0 0.45rem; font-size: 0.98rem; color: #0f172a; }
.ds-table h4 span { font-weight: 500; color: #64748b; font-size: 0.82rem; margin-left: 0.4rem; }
.ds-cols { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.ds-cols th { text-align: left; color: #64748b; font-weight: 600; font-size: 0.74rem; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 0.35rem 0.6rem; border-bottom: 1px solid #e2e8f0; }
.ds-cols td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; color: #334155; }
.ds-cols td:first-child { font-family: 'JetBrains Mono', monospace; color: #0f172a; white-space: nowrap; }
.ds-cols td:nth-child(2) { white-space: nowrap; color: #475569; }
.ds-key { display: inline-block; margin-left: 0.35rem; padding: 0 0.35rem; border-radius: 4px; font-size: 0.68rem;
    font-family: Inter, sans-serif; background: #eef2ff; color: #4338ca; vertical-align: middle; }
.design-schema-code { margin: 0; background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 1rem;
    font-size: 0.78rem; line-height: 1.5; white-space: pre; overflow: auto; }
@media (max-width: 640px) {
    #design-schema-modal .design-schema-content, #example-preview-modal .design-schema-content { padding: 1.2rem 1rem; width: 96%; }
    .ds-cols td:nth-child(2) { white-space: normal; }
}

/* Ready examples: sample-data pop-up (same light box as View schema) */
#example-preview-modal .design-schema-content { max-width: 1040px; }
.ep-made { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; padding: 0.55rem 0.8rem;
    border: 1px solid #bae6fd; border-radius: 10px; background: #f0f9ff; font-size: 0.86rem; line-height: 1.45; flex-shrink: 0; }
.ep-made img { flex-shrink: 0; display: block; }
#example-preview-modal .ep-made span { color: #075985; }
#example-preview-modal .ep-made strong { color: #0c4a6e; }
.ep-row { display: flex; align-items: flex-start; gap: 0.6rem 0.9rem; margin-bottom: 0.8rem; flex-shrink: 0; }
.ep-row[hidden] { display: none; }
.ep-label { flex: 0 0 6.5rem; padding-top: 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #64748b; line-height: 1.35; }
#example-preview-modal .ep-label { color: #64748b; }
/* Views: one compact segmented control, the open view raised; its one-line summary sits beside it */
.ep-toolbar { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; flex-shrink: 0;
    margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid #e2e8f0; }
.ep-seg { display: inline-flex; gap: 2px; padding: 3px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; }
.ep-seg button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.75rem; border: 0; border-radius: 7px;
    background: transparent; color: #64748b; font-size: 0.8rem; font-weight: 600; line-height: 1.2; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.ep-seg button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
    stroke-linejoin: round; flex-shrink: 0; }
.ep-seg button:hover { color: #0f172a; }
.ep-seg button.active { background: #ffffff; color: #4338ca; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.06); }
.ep-seg button:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.ep-seg-count { min-width: 1.35rem; padding: 0.05rem 0.35rem; border-radius: 999px; background: #e2e8f0; color: #475569;
    font-size: 0.68rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.ep-seg-count:empty { display: none; }
#example-preview-modal .ep-seg-count { color: #475569; }
#example-preview-modal .ep-seg button.active .ep-seg-count { background: #e0e7ff; color: #4338ca; }
.ep-caption { margin: 0; flex: 1 1 14rem; min-width: 0; font-size: 0.8rem; color: #64748b; line-height: 1.4; }
#example-preview-modal .ep-caption { color: #64748b; }
@media (prefers-reduced-motion: reduce) { .ep-seg button { transition: none; } }
.ep-examples { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; min-width: 0; }
.ep-example { border: 1px solid #e2e8f0; background: #ffffff; color: #334155; border-radius: 999px;
    padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.ep-example:hover { border-color: #c7d2fe; color: #4338ca; }
.ep-example.active { background: #4f46e5; border-color: #4f46e5; color: #ffffff; }
.ep-tables { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; min-width: 0; }
.ep-file { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid #e2e8f0; background: #f8fafc;
    color: #334155; border-radius: 8px; padding: 0.32rem 0.7rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; }
.ep-file svg { color: #94a3b8; flex-shrink: 0; }
.ep-file span { font-family: Inter, sans-serif; font-weight: 500; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.ep-file:hover { border-color: #c7d2fe; }
.ep-file.active { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.ep-file.active svg { color: #6366f1; }
.ep-file:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.ep-body { min-height: 12rem; margin-top: 0; }
.ep-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0 1.5rem; font-size: 0.84rem; }
.ep-rules li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; padding: 0.42rem 0;
    border-bottom: 1px solid #f1f5f9; line-height: 1.4; }
.ep-rule-mark { flex: 0 0 1rem; font-weight: 700; text-align: center; }
.ep-rules li > span:nth-child(2) { flex: 1 1 0; min-width: 0; }
.ep-rules em { flex-basis: 100%; padding-left: 1.5rem; font-style: normal; font-size: 0.76rem; color: #b45309; }
.ep-grid { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ep-grid th { position: sticky; top: 0; background: #f8fafc; text-align: left; color: #475569; font-weight: 600;
    font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; padding: 0.45rem 0.7rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.ep-grid td { padding: 0.38rem 0.7rem; border-bottom: 1px solid #f1f5f9; color: #334155; white-space: nowrap;
    max-width: 22rem; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ep-grid tbody tr:hover td { background: #f8fafc; }
.ep-grid td.ep-key { color: #4338ca; font-weight: 600; }
.ep-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
    margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid #e2e8f0; }
/* Scale: the sample beside the full dataset from the same plan; the full number is the one the eye lands on */
.ep-scale { flex: 1 1 24rem; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ep-scale[hidden] { display: none; }
.ep-scale-nums { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.ep-scale-nums b { font-variant-numeric: tabular-nums; }
#example-preview-modal .ep-scale-here { color: #64748b; font-size: 0.84rem; }
#example-preview-modal .ep-scale-here b { color: #334155; font-weight: 700; }
.ep-scale-arrow { width: 18px; height: 18px; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#example-preview-modal .ep-scale-full { color: #4338ca; font-size: 0.95rem; font-weight: 600; }
#example-preview-modal .ep-scale-full b { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: #4338ca; }
.ep-scale-text { margin: 0; font-size: 0.78rem; line-height: 1.4; }
#example-preview-modal .ep-scale-text { color: #64748b; }
.ep-scale-text a { color: #4f46e5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.ep-scale-text a:hover { color: #3730a3; }
.ep-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#example-preview-modal .ep-download { color: #334155; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0.55rem 1rem;
    font-size: 0.88rem; font-weight: 600; text-decoration: none; }
#example-preview-modal .ep-download:hover { background: #f1f5f9; }
.ep-cta { border-radius: 8px; padding: 0.55rem 1.1rem; font-size: 0.88rem; font-weight: 600; }
.ep-example:focus-visible, .ep-download:focus-visible, .ep-cta:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.gen-examples-preview { margin-left: auto; border: none; background: none; padding: 0; color: #4f46e5; font-size: 0.8rem;
    font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; border-radius: 0; }
.gen-examples-preview:hover { color: #3730a3; }
#cta-see-sample { margin-left: 0.75rem; background: rgba(255, 255, 255, 0.85); color: #0f172a; border-color: #cbd5e1; }
#cta-see-sample:hover { background: #ffffff; border-color: #94a3b8; }
.ep-examples, .ep-tables, .ep-foot { flex-shrink: 0; }
@media (max-width: 640px) {
    /* One line each that scrolls sideways, so the rows and the buttons keep their room */
    .ep-examples, .ep-tables { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ep-examples::-webkit-scrollbar, .ep-tables::-webkit-scrollbar { display: none; }
    .ep-example, .ep-file { flex-shrink: 0; white-space: nowrap; }
    .ep-row { flex-direction: column; gap: 0.35rem; }
    .ep-label { flex-basis: auto; padding-top: 0; }
    .ep-row > .ep-examples, .ep-row > .ep-tables { width: 100%; flex: none; }
    #example-preview-modal .design-schema-content { max-height: 94vh; }
    .ep-meta-desc, .ep-made-more { display: none; }
    .ep-made { padding: 0.45rem 0.65rem; font-size: 0.8rem; margin-bottom: 0.7rem; }
    .ep-row { margin-bottom: 0.6rem; }
    .ep-toolbar { margin-bottom: 0.6rem; padding-bottom: 0.6rem; }
    .ep-seg { width: 100%; }
    .ep-seg button { flex: 1 1 0; justify-content: center; padding: 0.38rem 0.3rem; gap: 0.3rem; }
    .ep-caption { display: none; }
    .ep-scale-text { display: none; }
    .ep-rules { grid-template-columns: 1fr; }
    .ep-body { min-height: 9rem; }
    .ep-foot { margin-top: 0.7rem; padding-top: 0.7rem; }
    .ep-scale { flex-basis: 100%; }
}
@media (max-width: 520px) {
    #cta-see-sample { margin: 0.75rem 0 0; }
    .ep-actions { width: 100%; }
    .ep-actions > * { flex: 1 1 0; text-align: center; padding-left: 0.5rem; padding-right: 0.5rem; }
}

.api-card { margin-top: 1.5rem; }
.api-card [hidden] { display: none !important; }
.api-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.api-card-head h3 { margin: 0 0 0.3rem; }
.api-card-sub { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.api-docs-link { color: #6366f1; font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.api-docs-link:hover { text-decoration: underline; }
.api-state { margin-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.api-state p { margin: 0; color: var(--text-muted); }
.api-btn { padding: 0.6rem 1.15rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.api-btn:disabled { opacity: 0.6; cursor: wait; }
.api-btn-danger { background: #ef4444; color: #fff; border: 0; }
.api-btn-danger:hover { background: #dc2626; }
.api-key-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.api-key-row code, .api-reveal code {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.88rem; background: #f1f5f9;
    border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; color: #0f172a;
}
.api-key-meta { color: var(--text-muted); font-size: 0.85rem; }
.api-reveal { margin-top: 1.1rem; padding: 1rem 1.1rem; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.api-reveal-title { margin: 0 0 0.6rem; font-weight: 600; color: #065f46; }
.api-reveal-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.api-reveal-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: #fff; }
.api-reveal-warn { margin: 0.7rem 0 0; font-size: 0.85rem; color: #065f46; }
.api-confirm { margin-top: 1.1rem; padding: 1rem 1.1rem; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; }
.api-confirm p { margin: 0 0 0.8rem; color: #7c2d12; }
.api-confirm-actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.api-tag { display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.4rem; border-radius: 6px; font-size: 0.68rem;
    font-weight: 700; letter-spacing: 0.06em; color: #6366f1; background: rgba(99, 102, 241, 0.12); vertical-align: middle; }

/* Grouped footer with links to the standalone pages (same design as pages.css) */
.app-footer.grouped { text-align: left; padding: 2.75rem 1.5rem 1.25rem; }
.gf-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; max-width: 1120px; margin: 0 auto; }
.gf-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.1rem; color: #0f172a; }
.gf-brand p { color: #64748b; font-size: 0.9rem; max-width: 280px; margin: 0.6rem 0 0; }
.gf-col h4 { font-family: 'Sora', sans-serif; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #94a3b8; margin: 0.2rem 0 0.9rem; }
.gf-col a { display: block; color: #1e293b; text-decoration: none; font-size: 0.92rem; padding: 0.28rem 0;
    transition: color 0.2s, transform 0.2s; }
.gf-col a:hover { color: #6366f1; transform: translateX(3px); }
.gf-bottom { max-width: 1120px; margin: 2rem auto 0; padding-top: 1.1rem; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.gf-bottom p { margin: 0; }
@media (max-width: 900px) { .gf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
    .gf-grid { grid-template-columns: 1fr; }
    .gf-bottom { justify-content: center; text-align: center; }
}

/* Auth modal: sign in / create account modes */
#auth-modal [hidden] { display: none !important; }
#auth-modal #auth-subtitle-text { color: #64748b; }
#auth-modal #auth-google-label { color: #1e293b; }
#auth-modal #auth-switch-text { color: #64748b; }
/* Fit the auth modal on short laptop screens (e.g. 1536x700 at 125% Windows scaling)
   without inner scrolling: tighter spacing everywhere, compact mode below 800px tall. */
#auth-modal .auth-split-layout { min-height: 0; max-height: calc(100vh - 2rem); }
#auth-modal .auth-left { padding: 2rem 3.5rem; }
#auth-modal .auth-logo-row { margin-bottom: 1.5rem; }
#auth-modal h2.auth-title { font-size: 1.75rem !important; }
#auth-modal p.auth-subtitle { margin-bottom: 1.25rem; }
#auth-modal .auth-form { margin-top: 0 !important; }
#auth-modal .auth-form .form-group { margin-bottom: 0.9rem; }
#auth-modal .auth-form .divider { margin: 1rem 0; }
#auth-modal .auth-right { padding: 2rem; }
@media (max-height: 800px) {
    #auth-modal .auth-left { padding: 1.25rem 3rem; }
    #auth-modal .auth-logo-row { margin-bottom: 0.9rem; }
    #auth-modal h2.auth-title { font-size: 1.5rem !important; margin-bottom: 0.25rem; }
    #auth-modal p.auth-subtitle { font-size: 0.9rem; margin-bottom: 0.9rem; }
    #auth-modal .auth-form .form-group { margin-bottom: 0.65rem; }
    #auth-modal .auth-form .form-group label { margin-bottom: 0.3rem; }
    #auth-modal .styled-input { padding: 0.6rem 0.8rem; }
    #auth-modal .auth-password-wrap .styled-input { padding-right: 2.9rem; }
    #auth-modal #btn-email-auth, #auth-modal #btn-google-auth { height: 42px !important; }
    #auth-modal .auth-form .divider { margin: 0.7rem 0; }
    #auth-modal .auth-right { padding: 1.25rem; }
    #auth-modal .auth-right-overlay { gap: 1rem; }
    #auth-modal .auth-glass-card { padding: 1.25rem; }
    #auth-modal .auth-glass-icon-row { margin-bottom: 0.75rem; }
    #auth-modal .auth-checklist li { margin-bottom: 0.45rem; }
    #auth-modal .auth-new-feature p { font-size: 0.9rem; }
}
@media (max-height: 720px) and (min-width: 769px) {
    /* The right panel already carries the logo. */
    #auth-modal .auth-logo-row { display: none; }
}
@media (max-height: 680px) {
    #auth-modal .auth-new-feature { display: none; }
    #auth-modal p.auth-subtitle { margin-bottom: 0.5rem; }
    #auth-modal .auth-switch { margin-top: 0.5rem; }
    #auth-modal .auth-legal { margin-top: 0.35rem; }
}
.auth-password-wrap { position: relative; }
.auth-password-wrap .styled-input { width: 100%; padding-right: 2.9rem; }
.auth-password-toggle {
    position: absolute; top: 50%; right: 0.55rem; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: #94a3b8; cursor: pointer;
}
.auth-password-toggle:hover { color: #475569; background: rgba(15, 23, 42, 0.05); }
.auth-password-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
.auth-forgot {
    display: inline-block; margin-top: 0.45rem; font-size: 0.8rem; font-weight: 500;
    color: #3b82f6; text-decoration: none;
}
.auth-forgot:hover { text-decoration: underline; }
.auth-legal {
    margin: 0.6rem 0 0; font-size: 0.72rem; line-height: 1.4; color: #94a3b8; text-align: center;
}
.auth-legal a { color: #64748b; text-decoration: underline; }
.auth-switch {
    margin: 1rem 0 0; font-size: 0.88rem; color: #64748b; text-align: center;
}
.auth-switch a { color: #3b82f6; font-weight: 600; text-decoration: none; margin-left: 0.25rem; }
.auth-switch a:hover { text-decoration: underline; }

/* ===== Rows + AI rows plans (October 2026) ===== */
.launch-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 0.9rem;
    max-width: 1100px;
    margin: -0.5rem auto 1.75rem;
    padding: 0.8rem 1.1rem;
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.06);
    color: var(--text-main);
    font-size: 0.92rem;
    text-align: center;
}
.launch-banner[hidden] { display: none; }
.launch-banner-tag {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.launch-banner-bonus { border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.07); }
.launch-banner-bonus .launch-banner-tag { background: #059669; }
.launch-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}
.pricing-card .price-note {
    min-height: 1.3em;
    margin: -0.6rem 0 1.1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.pricing-card .price-note[hidden] { display: block; visibility: hidden; }
.pricing-card .price .price-amount { font-size: inherit; color: inherit; font-weight: inherit; }
.pricing-explainer {
    display: grid;
    gap: 0.5rem;
    max-width: 820px;
    margin: 2rem auto 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}
.pricing-explainer strong { color: var(--text-main); }
/* What a plan's two allowances mean, side by side under the plan cards */
.pricing-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 0.75rem; text-align: left; }
.pricing-terms > div { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.15rem; }
.pricing-terms dt { font-weight: 700; color: var(--text-main); font-size: 0.95rem; margin-bottom: 0.3rem; }
.pricing-terms dd { margin: 0; }
@media (max-width: 640px) { .pricing-terms { grid-template-columns: 1fr; } }

.balance-line + .balance-line { margin-top: 0.9rem; }
.credits-display-ai #ai-credits-value { font-size: 1.6rem; font-weight: 700; }
.progress-fill-ai { background: linear-gradient(90deg, #8b5cf6, #6366f1); }

.ai-fields-dialog { max-width: 520px; display: grid; gap: 0.85rem; padding: 1.75rem; }
.ai-fields-dialog h3 { margin: 0; font-size: 1.2rem; text-wrap: balance; }
.ai-fields-dialog p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); }
.ai-fields-list { margin: 0; padding: 0.75rem 1rem; list-style: none; display: grid; gap: 0.4rem;
    border: 1px solid var(--border-color, #e3e9f2); border-radius: 10px; background: rgba(148, 163, 184, 0.08); }
.ai-fields-list li { font-size: 0.9rem; }
.ai-fields-table, .ai-fields-type { color: var(--text-muted); font-size: 0.82rem; }
.ai-fields-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin-top: 0.25rem; }
.ai-fields-actions button { min-height: 42px; padding: 0 1.1rem; }

.schema-usage {
    margin-bottom: 0.9rem;
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.06);
    font-size: 0.85rem;
    line-height: 1.5;
}
.schema-usage-short { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.06); }
.schema-usage-hint { display: block; color: var(--text-muted); font-size: 0.78rem; }
.schema-ai-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: -0.1rem 0 0.4rem;
    font-size: 0.72rem;
    color: #6366f1;
    cursor: pointer;
}
.schema-ai-toggle input { margin: 0; cursor: pointer; }
.schema-ai-cost { color: var(--text-muted); }
.profile-updates-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #334155; cursor: pointer; }
.profile-updates-toggle input { cursor: pointer; }
.ai-fields-modal { z-index: 1100; }
.ai-fields-dialog { background: #ffffff; color: #0f172a; border: 1px solid #e2e8f0; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); }
.ai-fields-dialog h3 { color: #0f172a; }
.ai-fields-dialog p { color: #475569; }
.ai-fields-dialog strong { color: #0f172a; }
.ai-fields-list { background: #f8fafc; border-color: #e2e8f0; }
.ai-fields-table, .ai-fields-type { color: #64748b; }
/* The generic .modal-content rules above are for dark dialogs; this one is light. */
.modal-content.ai-fields-dialog h3 { color: #0f172a !important; }
.modal-content.ai-fields-dialog p { color: #475569; }
.modal-content.ai-fields-dialog span.ai-fields-table,
.modal-content.ai-fields-dialog span.ai-fields-type { color: #64748b; }
@media (max-width: 1100px) { .pricing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .pricing-cards { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .launch-banner { margin-inline: 0.25rem; }
}

/* ===== Locked profiles ===== */
.lock-banner {
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: 4px solid #ef4444;
    border-radius: 10px;
    background: #fef2f2;
    color: #7f1d1d;
    font-size: 0.92rem;
    line-height: 1.55;
}
.lock-banner[hidden] { display: none; }
.lock-banner a { color: #b91c1c; font-weight: 600; }
.locked-hidden { display: none !important; }

/* ===== Admin page ===== */
#view-admin { padding: 4rem 2rem; width: 100%; }
.admin-wrap { max-width: 1100px; margin: 0 auto; display: grid; gap: 1.25rem; }
.admin-head h2 { margin: 0; font-size: 1.8rem; color: #0f172a; }
.admin-head p { margin: 0.3rem 0 0; color: #64748b; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.admin-card {
    display: grid;
    gap: 0.55rem;
    align-content: start;
    padding: 1.3rem 1.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
.admin-card h3 { margin: 0; font-size: 1.05rem; color: #0f172a; }
.admin-card p { margin: 0; font-size: 0.87rem; line-height: 1.55; color: #64748b; }
.admin-card label { font-size: 0.78rem; font-weight: 600; color: #334155; margin-top: 0.4rem; }
.admin-card-danger { border-color: rgba(239, 68, 68, 0.3); }
.admin-card-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-btn { height: 42px; border-radius: 8px; font-weight: 600; }
.admin-btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; }
.admin-btn-armed { background: #b45309 !important; border-color: #b45309 !important; }
.admin-small-btn { height: 32px; padding: 0 0.8rem; font-size: 0.8rem; border-radius: 8px; white-space: nowrap; }
.admin-result { font-size: 0.85rem; line-height: 1.5; min-height: 1.2em; }
.admin-result-ok { color: #047857; }
.admin-result-error { color: #b91c1c; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.admin-table th, .admin-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid #f1f5f9; text-align: left; vertical-align: top; color: #334155; }
.admin-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; background: #f8fafc; white-space: nowrap; }
.admin-table tr.admin-open td { background: #fffbeb; }
.admin-mono { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.76rem; }
.admin-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: #e2e8f0; color: #334155; }
.admin-status-open { background: #fef3c7; color: #92400e; }
.admin-status-refunded, .admin-status-credited { background: #d1fae5; color: #065f46; }
.admin-empty { color: #94a3b8; font-size: 0.85rem; }
.admin-demo-pending { background: #fef3c7; color: #92400e; }
.admin-demo-done { background: #d1fae5; color: #065f46; }
.admin-demo-cancelled { background: #fee2e2; color: #991b1b; }
.admin-demo-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.admin-demo-btn.is-current { background: #0f172a !important; color: #fff !important; border-color: #0f172a !important; opacity: 1; cursor: default; }
.admin-demo-counts { font-size: 0.8rem; color: #64748b; }
.admin-hint { color: #94a3b8; font-size: 0.75rem; }
/* Automatic emails card: one row per email, its state and switch on the right */
.admin-emails { display: grid; gap: 0.1rem; margin-top: 0.9rem; }
.admin-emails[hidden] { display: none; }
.admin-email-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap;
    padding: 0.6rem 0; border-bottom: 1px solid #f1f5f9; }
.admin-email-what { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 14rem; font-size: 0.85rem; color: #475569; }
.admin-email-what strong { color: #0f172a; font-size: 0.9rem; }
.admin-email-state { display: flex; align-items: center; gap: 0.5rem; }
.admin-email-off { background: #e2e8f0; color: #475569; }
.admin-emails-all { margin-top: 0.8rem; justify-self: start; }
.admin-wrap-cell { min-width: 220px; max-width: 360px; white-space: pre-wrap; }
.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.85rem; color: #334155; }
.admin-list li { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; border-bottom: 1px solid #f1f5f9; padding-bottom: 0.4rem; }
.admin-list li span { color: #94a3b8; font-size: 0.78rem; }
@media (max-width: 760px) {
    .admin-grid { grid-template-columns: minmax(0, 1fr); }
    #view-admin { padding: 3rem 1rem; }
}
.admin-inline { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }
.admin-inline > input { flex: 1 1 260px; }
.admin-inline > div { flex: 1 1 140px; display: grid; gap: 0.3rem; }
.admin-inline .admin-btn { padding: 0 1.4rem; }
.admin-lookup { display: grid; gap: 0.6rem; }
.admin-lookup h4 { margin: 0.8rem 0 0; font-size: 0.9rem; color: #0f172a; }
.admin-budget { margin: 0.2rem 0 0.4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.admin-budget[hidden] { display: none; }
.admin-budget div { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.5rem 0.6rem; }
.admin-budget dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
.admin-budget dd { margin: 0.2rem 0 0; font-size: 0.95rem; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .admin-budget { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-facts { margin: 0.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem 1.2rem; }
.admin-facts div { border-bottom: 1px solid #f1f5f9; padding-bottom: 0.35rem; }
.admin-facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
.admin-facts dd { margin: 0.15rem 0 0; font-size: 0.88rem; color: #0f172a; overflow-wrap: anywhere; }
.admin-danger-text { color: #b91c1c; }

/* ===== Plan Status card ===== */
.plan-details { display: grid; gap: 0.9rem; margin-top: 0.4rem; }
.plan-details[hidden] { display: none; }
.plan-days[hidden] { display: none; }
.plan-days-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.4rem; }
.plan-days-top strong { font-size: 1.05rem; color: var(--text-main); }
.plan-days-top span { font-size: 0.8rem; color: var(--text-muted); }
.plan-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.plan-facts div { padding: 0.55rem 0.65rem; border-radius: 10px; background: rgba(148, 163, 184, 0.1); }
.plan-facts dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.plan-facts dd { margin: 0.2rem 0 0; font-size: 0.9rem; font-weight: 600; color: var(--text-main); }
.plan-lock-note { margin: 0; font-size: 0.82rem; color: #047857; }
.plan-lock-note[hidden] { display: none; }
.plan-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.plan-cta { height: 40px; padding: 0 1.3rem; border-radius: 999px; }
.plan-cta[hidden], .plan-upgrade[hidden] { display: none; }
.plan-upgrade { font-size: 0.88rem; font-weight: 600; color: var(--primary); text-decoration: none; }
@media (max-width: 640px) { .plan-facts { grid-template-columns: minmax(0, 1fr); } }
/* Plan Status card, compact: two slim one-line tiles, tighter spacing. */
.plan-details { gap: 0.7rem; margin-top: 0.1rem; }
#plan-expiry-text { margin-bottom: 0; }
.plan-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.plan-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.65rem; border-radius: 8px; }
.plan-facts dt { font-size: 0.64rem; white-space: nowrap; }
.plan-facts dd { margin: 0; font-size: 0.88rem; white-space: nowrap; }
.plan-cta { height: 36px; font-size: 0.85rem; }
@media (max-width: 640px) { .plan-facts { grid-template-columns: minmax(0, 1fr); } }
.plan-actions .plan-lock-note { font-size: 0.8rem; line-height: 1.35; }
.plan-details { margin-top: 0.45rem; }
.plan-buy-note { margin-top: 0.75rem; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); text-align: center; }

/* ---------------------------------------------
   Fit and mobile fixes (14 Oct 2026)
   --------------------------------------------- */
/* Auth modal: never cut. The overlay scrolls when the box is taller than the window
   (browser zoom, short laptop screens, phones), and the content is centred only when
   it fits, so the logo and title can always be reached. */
#auth-modal.modal { overflow-y: auto; align-items: flex-start; padding: 1rem 0; box-sizing: border-box; }
#auth-modal .auth-split-layout { max-height: none; margin: auto; }
#auth-modal .auth-left { overflow: visible; justify-content: flex-start; }
#auth-modal .auth-left-content { margin: auto; }
/* The "How did you hear about us?" list: no fixed height, so its text is never clipped. */
#auth-modal select.styled-input { height: auto !important; min-height: 44px; line-height: 1.35; padding-top: 0.6rem; padding-bottom: 0.6rem; }
@media (max-height: 800px) {
    #auth-modal select.styled-input { min-height: 40px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}
@media (max-width: 768px) {
    #auth-modal.modal { padding: 0.75rem 0; }
    #auth-modal .auth-split-layout { width: calc(100% - 1.5rem); }
    #auth-modal .auth-left { padding: 1.75rem 1.25rem 1.5rem; }
    #auth-modal h2.auth-title { font-size: 1.5rem !important; }
    #auth-modal .auth-close-btn { top: 0.75rem; right: 0.75rem; background: rgba(15, 23, 42, 0.08) !important; color: #334155; }
}

/* Contact page: one column on narrow screens (the form was pushed off the right edge). */
@media (max-width: 860px) {
    .contact-layout { grid-template-columns: 1fr; padding: 0 1rem; }
    .contact-info, .contact-form { padding: 1.75rem; }
}

/* Dashboard: the datasets table scrolls inside its card instead of spilling out. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
    .table-scroll .modern-table { min-width: 680px; }
    .datasets-header { flex-wrap: wrap; align-items: flex-start !important; gap: 1rem; }
}

/* Phone: the top menu scrolls sideways; a fade on the right shows there is more. */
@media (max-width: 640px) {
    .dynamic-island-nav { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
    /* Info tooltips near the right edge open towards the left. */
    .pricing-card .info-tooltip-container .info-tooltip-text { left: auto; right: -0.5rem; transform: none; }
    .pricing-card .info-tooltip-container .info-tooltip-text::after { left: auto; right: 0.6rem; }
}/* Short windows (laptops at 110-125% zoom): tighter spacing so even the longer
   create-account form fits without scrolling. */
@media (max-height: 760px) and (min-width: 769px) {
    #auth-modal.modal { padding: 0.5rem 0; }
    #auth-modal .auth-left { padding: 0.9rem 3rem; }
    #auth-modal h2.auth-title { font-size: 1.35rem !important; margin-bottom: 0.15rem; }
    #auth-modal p.auth-subtitle { font-size: 0.85rem; margin-bottom: 0.6rem; line-height: 1.35; }
    #auth-modal .auth-form .form-group { margin-bottom: 0.5rem; }
    #auth-modal .auth-form .form-group label { margin-bottom: 0.2rem; font-size: 0.8rem; }
    #auth-modal .styled-input { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
    #auth-modal select.styled-input { min-height: 38px; padding-top: 0.4rem; padding-bottom: 0.4rem; }
    #auth-modal .auth-terms-row { margin-bottom: 0.45rem !important; }
    #auth-modal #btn-email-auth, #auth-modal #btn-google-auth { height: 40px !important; font-size: 0.95rem !important; }
    #auth-modal .auth-form .divider { margin: 0.45rem 0; }
    #auth-modal .auth-legal { font-size: 0.7rem; margin-top: 0.3rem; }
    #auth-modal .auth-switch { margin-top: 0.4rem; }
    #auth-modal .auth-glass-card { padding: 1rem; }
    #auth-modal .auth-glass-card-text { margin-bottom: 0.75rem !important; }
    #auth-modal .auth-checklist li { margin-bottom: 0.35rem; font-size: 0.8rem; }
}/* Privacy pop-up: retention table */
#privacy-modal .legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.85rem; }
#privacy-modal .legal-table th, #privacy-modal .legal-table td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid #e2e8f0; vertical-align: top; color: #475569; }
#privacy-modal .legal-table th { color: #0f172a; font-weight: 600; background: #f8fafc; }

/* Loading spinner: shown wherever a number or list has not arrived yet (main.js: LOADING_SPIN) */
.ld-spin { display: inline-block; width: 0.75em; height: 0.75em; min-width: 14px; min-height: 14px; box-sizing: border-box;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0.45;
    vertical-align: middle; animation: ld-spin 0.75s linear infinite; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ld-spin { animation-duration: 2s; } }
#credits-value .ld-spin { width: 0.5em; height: 0.5em; border-width: 3px; }
#ai-credits-value .ld-spin { width: 0.6em; height: 0.6em; }
.ld-row td { text-align: center; padding: 2rem; color: #64748b; }
.ld-row td .ld-spin { margin-right: 0.35rem; }
#api-loading { padding: 0.5rem 0; color: #64748b; }