:root {
    --bg: #ffffff;
    --nav-bg: rgba(255, 255, 255, 0.85);
    --card-bg: #f9fafb;
    --accent: #0070f3; /* Stronger blue for light mode accessibility */
    --accent-light: #e6f2ff;
    --text-main: #111111;
    --text-muted: #666666;
    --border: #e5e7eb;
    --terminal-bg: #1e1e1e; /* Kept dark for contrast and "coder" feel */
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

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

body {
    background-color: var(--bg);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* Navbar */
.navbar {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: var(--nav-bg); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.nav-container { height: 72px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.5px; color: var(--text-main); }
.logo span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a { text-decoration: none; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; transition: 0.2s; }
.nav-links a:hover { color: var(--accent); }
.nav-divider { width: 1px; height: 20px; background: var(--border); margin: 0 0.5rem; }

/* Buttons */
.btn-primary { background: var(--accent); color: #fff; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600; border: none; cursor: pointer; }
.btn-primary-lg { background: var(--accent); color: #fff; padding: 0.9rem 1.8rem; border-radius: 8px; font-weight: 600; text-decoration: none; display: inline-block; transition: transform 0.2s; }
.btn-primary-lg:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 112, 243, 0.2); }
.btn-outline-lg { border: 1px solid var(--border); color: var(--text-main); padding: 0.9rem 1.8rem; border-radius: 8px; text-decoration: none; margin-left: 1rem; font-weight: 600; }

/* Hero Section */
.hero { padding: 10rem 0 6rem; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.badge { background: var(--accent-light); color: var(--accent); padding: 0.4rem 0.8rem; border-radius: 6px; display: inline-block; font-size: 0.75rem; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: 0.5px; }
.hero h1 { font-size: 4rem; line-height: 1.1; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -2px; color: var(--text-main); }
.accent { color: var(--accent); }
.hero p { color: var(--text-muted); font-size: 1.2rem; margin-bottom: 2.5rem; max-width: 520px; }

/* Terminal Visual (The "Hero" Piece) */
.terminal-window {
    background: var(--terminal-bg); border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.12); overflow: hidden;
}
.terminal-header { background: #2d2d2d; padding: 0.75rem 1rem; display: flex; align-items: center; }
.dots { display: flex; gap: 6px; }
.dot { width: 11px; height: 11px; border-radius: 50%; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.terminal-title { color: #999; font-size: 0.7rem; font-family: var(--font-mono); margin-left: 15px; }
.terminal-body { padding: 1.5rem; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.7; color: #d4d4d4; }
.t-keyword { color: #569cd6; } .t-info { color: #4fc1ff; }
.cursor { color: var(--accent); font-weight: bold; animation: blink 1.2s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Social Proof */
.social-proof { text-align: center; padding: 5rem 0; border-top: 1px solid var(--border); background: #fafafa; }
.social-proof p { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 2.5rem; }
.logos { display: flex; justify-content: center; gap: 5rem; align-items: center; }
.logo-item { font-weight: 700; font-size: 1.3rem; color: #cbd5e0; }

/* Added for Features Section */
/* Page Header */
.page-header {
    padding: 10rem 0 4rem;
    text-align: center;
    background: linear-gradient(to bottom, #fcfcfd, #ffffff);
}
.page-header h1 { font-size: 3.5rem; letter-spacing: -1.5px; margin-bottom: 1rem; }
.page-header p { color: var(--text-muted); font-size: 1.2rem; max-width: 600px; margin: 0 auto; }

/* Features Grid */
.features-grid-section { padding: 4rem 0 8rem; }
.features-main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 2.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}
.feature-card:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transform: translateY(-5px);
}

.icon-box {
    width: 48px;
    height: 48px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.icon-box i { width: 24px; height: 24px; }

.feature-card h3 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--text-main); }
.feature-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
.feature-card code { background: #f1f1f1; padding: 0.2rem 0.4rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85rem; }

.text-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

/* CTA Banner */
.cta-banner {
    background: var(--card-bg);
    padding: 6rem 0;
    text-align: center;
    border-top: 1px solid var(--border);
}
.cta-banner h2 { font-size: 2.5rem; margin-bottom: 2.5rem; letter-spacing: -1px; }

.nav-links a.active { color: var(--accent); font-weight: 700; }

/* Added for individual feature page */
/* Breadcrumb */
.breadcrumb { padding: 8rem 0 1rem; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb span { margin: 0 0.5rem; color: #ccc; }

/* Detail Hero */
.detail-hero { padding: 2rem 0 4rem; }
.detail-hero h1 { font-size: 3.5rem; letter-spacing: -2px; margin-top: 1rem; }
.lead-text { font-size: 1.25rem; color: var(--text-muted); max-width: 700px; margin-top: 1.5rem; }

/* Detail Grid Layout */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: flex-start; padding-bottom: 8rem; }

.content-block { margin-bottom: 4rem; }
.content-block h3 { font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--text-main); }
.content-block p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 1.5rem; }

.feature-list { list-style: none; }
.feature-list li { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: 1rem; color: var(--text-main); }
.feature-list i { color: #27c93f; width: 20px; }

/* Diagram Components */
.integrity-diagram { padding: 0; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.diagram-header { background: #f8f9fa; padding: 1rem; border-bottom: 1px solid var(--border); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.diagram-body { padding: 3rem 2rem; display: flex; align-items: center; justify-content: space-between; position: relative; }

.db-table { border: 1px solid var(--border); border-radius: 8px; width: 220px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.table-name { background: #1e1e1e; color: white; padding: 0.5rem 1rem; font-size: 0.75rem; font-family: var(--font-mono); border-radius: 7px 7px 0 0; }
.table-row { padding: 0.75rem 1rem; font-size: 0.8rem; display: flex; justify-content: space-between; border-bottom: 1px solid #f0f0f0; font-family: var(--font-mono); }
.table-row:last-child { border-bottom: none; }

.tag { font-size: 0.65rem; background: #eee; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.tag.fk { background: var(--accent-light); color: var(--accent); }

.active-row { background: var(--accent-light); }

.diagram-footer { background: #f8f9fa; padding: 1rem; text-align: center; font-size: 0.85rem; color: #27c93f; font-weight: 700; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 0.5rem; }

/* Pricing Section */
/* Pricing Grid */
.pricing-section { padding: 4rem 0 8rem; }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: flex-start;
}

.price-card {
    background: #fff;
    border: 1px solid var(--border);
    padding: 3rem 2.5rem;
    border-radius: 16px;
    position: relative;
    transition: transform 0.3s ease;
}

.price-card.featured {
    border: 2px solid var(--accent);
    box-shadow: 0 20px 40px rgba(0, 112, 243, 0.1);
    transform: scale(1.05);
    z-index: 2;
}

.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.price-header h3 { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 1rem; }
.cost { font-size: 3.5rem; font-weight: 800; color: var(--text-main); line-height: 1; margin-bottom: 1rem; }
.cost span { font-size: 1rem; color: var(--text-muted); font-weight: 400; }
.price-header p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 2rem; min-height: 3rem; }

.price-features { list-style: none; margin-bottom: 2.5rem; padding-top: 2rem; border-top: 1px solid #f0f0f0; }
.price-features li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.95rem; color: var(--text-main); }
.price-features i { color: var(--accent); width: 18px; }

/* Pricing Buttons */
.btn-outline-full, .btn-primary-full {
    display: block; text-align: center; padding: 1rem; border-radius: 8px; text-decoration: none; font-weight: 700; transition: 0.2s;
}
.btn-outline-full { border: 1px solid var(--border); color: var(--text-main); }
.btn-outline-full:hover { background: #f8f9fa; }
.btn-primary-full { background: var(--accent); color: white; }
.btn-primary-full:hover { opacity: 0.9; }

/* FAQ Section */
.faq-preview { padding: 6rem 0; background: #fafafa; border-top: 1px solid var(--border); }
.faq-preview h2 { text-align: center; margin-bottom: 4rem; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.faq-item h4 { font-size: 1.1rem; margin-bottom: 1rem; }
.faq-item p { color: var(--text-muted); font-size: 0.95rem; }

/* For contact page */
/* Contact Grid */
.contact-section { padding: 4rem 0 8rem; }
.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 5rem;
    align-items: start;
}

/* Form Styling */
.contact-form-container {
    padding: 3rem;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fdfdfd;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    transition: border-color 0.2s;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Sidebar Info */
.info-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.icon-box-small {
    width: 40px;
    height: 40px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.info-item h4 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    color: var(--text-main);
}

.info-item p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Resources page */
/* Resources Layout */
.resources-main { padding: 4rem 0 8rem; }

/* Docs Hero */
.docs-hero {
    display: flex;
    align-items: center;
    padding: 4rem;
    background: linear-gradient(135deg, #ffffff 0%, #f3f9ff 100%);
    border: 1px solid var(--accent-light);
    margin-bottom: 4rem;
    text-align: center;
}
.docs-hero-content { width: 100%; max-width: 600px; margin: 0 auto; }
.hero-icon { width: 48px; height: 48px; color: var(--accent); margin-bottom: 1.5rem; }
.docs-hero h2 { font-size: 2rem; margin-bottom: 1rem; }
.docs-hero p { color: var(--text-muted); margin-bottom: 2rem; }

.search-bar {
    position: relative;
    display: flex;
    align-items: center;
}
.search-bar i { position: absolute; left: 1.2rem; color: var(--text-muted); width: 18px; }
.search-bar input {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Resource Grid */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}
.resource-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.resource-meta {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.resource-item h3 { font-size: 1.25rem; margin-bottom: 1rem; line-height: 1.4; }
.resource-item p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 2rem; }

/* Snippet Callout */
.snippet-callout {
    background: var(--text-main);
    color: var(--bg);
    padding: 3rem;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.snippet-text h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.snippet-text p { opacity: 0.8; }
.snippet-callout .btn-outline-lg { border-color: rgba(255,255,255,0.3); color: white; margin-left: 0; }

/* For accounts page */
/* Dashboard Layout */
.dashboard-body { background-color: #f4f7f9; }
.dashboard-wrapper { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
    width: 260px;
    background: #fff;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-header { padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; }
.sidebar-nav { padding: 1.5rem 1rem; flex-grow: 1; }
.nav-group { 
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; 
    color: #999; letter-spacing: 1px; margin: 1.5rem 0 0.5rem 1rem; 
}
.sidebar-nav a {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    text-decoration: none; color: #555; font-size: 0.9rem; font-weight: 500;
    border-radius: 8px; transition: 0.2s;
}
.sidebar-nav a:hover, .sidebar-nav a.active { background: var(--accent-light); color: var(--accent); }
.sidebar-nav a i { width: 18px; height: 18px; }

/* Main Content */
.main-content { flex-grow: 1; padding: 2rem 3rem; }
.dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.dash-header h1 { font-size: 1.75rem; letter-spacing: -0.5px; }

/* Account Specifics */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.settings-card { background: #fff; padding: 2rem; }
.section-desc { color: var(--text-muted); font-size: 0.9rem; margin: 0.5rem 0 1.5rem; }
.usage-snapshot { grid-column: span 2; }

/* Form Elements */
.settings-form .form-group { margin-bottom: 1.25rem; }
.settings-form label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; }
.settings-form input {
    width: 100%; padding: 0.75rem; border: 1px solid var(--border);
    border-radius: 6px; font-size: 0.95rem; background: #fafafa;
}
.btn-primary-sm { background: var(--accent); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 6px; font-weight: 600; cursor: pointer; }

/* API Key UI */
.api-key-box {
    display: flex; align-items: center; justify-content: space-between;
    background: #1e1e1e; padding: 1rem; border-radius: 8px; color: #569cd6;
    font-family: var(--font-mono); font-size: 0.85rem; margin-bottom: 1rem;
}
.btn-icon { background: transparent; border: none; color: #888; cursor: pointer; }

/* Progress Bars */
.usage-stat { margin-bottom: 1.5rem; }
.usage-label { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; }
.progress-bar { width: 100%; height: 8px; background: #eee; border-radius: 100px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 100px; }

.text-link-danger { color: #ef4444; font-size: 0.85rem; text-decoration: none; font-weight: 600; }

/* Settings Page */
/* Settings Layout */
.settings-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
}

.settings-section-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.settings-section-header i {
    color: var(--accent);
    width: 24px;
    height: 24px;
    margin-top: 4px;
}

.settings-section-header h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.settings-section-header p { font-size: 0.85rem; color: var(--text-muted); }

/* Setting Rows */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid #f9f9f9;
}

.setting-row:last-child { border-bottom: none; }

.setting-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.setting-info strong { font-size: 0.95rem; color: var(--text-main); }
.setting-info span { font-size: 0.8rem; color: var(--text-muted); }

/* Inputs */
.setting-select, .setting-input {
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: #fff;
    min-width: 200px;
}

/* Custom Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .4s; border-radius: 34px;
}

.slider:before {
    position: absolute; content: ""; height: 16px; width: 16px;
    left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%;
}

input:checked + .slider { background-color: var(--accent); }
input:checked + .slider:before { transform: translateX(22px); }

/* Action Footer */
.settings-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

.btn-ghost {
    background: transparent; border: 1px solid transparent;
    color: var(--text-muted); padding: 0.8rem 1.5rem; font-weight: 600; cursor: pointer;
}
.btn-ghost:hover { color: var(--text-main); }

/* Builder Page */
/* Builder Layout */
.builder-mode { overflow: hidden; height: 100vh; }
.builder-wrapper { display: flex; height: 100vh; width: 100vw; }

/* Toolbox & Properties Sidebars */
.toolbox, .properties-panel {
    width: 300px;
    background: #fff;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.properties-panel { border-right: none; border-left: 1px solid var(--border); }

.toolbox-header, .panel-header { padding: 1.5rem; border-bottom: 1px solid #f0f0f0; }
.back-link { text-decoration: none; color: var(--accent); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; margin-bottom: 0.5rem; }

/* Draggable Items */
.tool-category { padding: 1.5rem; }
.tool-category span { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: #999; }
.tool-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem; background: #f9f9fb; border: 1px solid var(--border);
    border-radius: 6px; margin-top: 0.5rem; cursor: grab; font-size: 0.85rem;
}
.tool-item:active { cursor: grabbing; }

/* Canvas Area */
.builder-canvas {
    flex-grow: 1;
    background-color: #f4f7f9;
    background-image: radial-gradient(#d1d5db 1px, transparent 1px);
    background-size: 30px 30px;
    position: relative;
    overflow: hidden;
}

.canvas-header {
    background: rgba(255,255,255,0.8); backdrop-filter: blur(10px);
    padding: 1rem 2rem; display: flex; justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

/* Table Nodes */
.node-card {
    position: absolute; width: 240px; background: white;
    border-radius: 10px; border: 1px solid #cbd5e1;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.node-label { 
    background: #334155; color: white; padding: 0.5rem 1rem; 
    font-family: var(--font-mono); font-size: 0.75rem; border-radius: 9px 9px 0 0;
}
.node-field {
    padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; font-size: 0.8rem;
}
.node-field.selected { border-left: 3px solid var(--accent); background: var(--accent-light); }
.active-link { color: var(--accent); font-weight: 700; }

/* Properties Panel Controls */
.property-groups { padding: 1.5rem; }
.prop-control { margin-bottom: 2rem; }
.prop-control label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.75rem; }
.code-editor-mini { 
    background: #1e1e1e; color: #9cdcfe; padding: 1rem; 
    border-radius: 6px; font-family: var(--font-mono); font-size: 0.8rem;
}

/* Connectors */
.canvas-connectors { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* quick fetch page */
/* Layout Splits */
.fetch-container {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
    align-items: start;
}

.full-width { width: 100%; }

/* Format Toggle Buttons */
.format-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.format-btn {
    padding: 0.6rem;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.format-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Checkbox Styling */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.check-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    cursor: pointer;
}

/* Console Styling */
.fetch-preview {
    background: #1a1a1e;
    border: none;
    color: #fff;
    padding: 0;
}

.preview-header {
    padding: 1rem 1.5rem;
    background: #252529;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-pill {
    background: #27c93f20;
    color: #27c93f;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.preview-console {
    padding: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #a9b7c6;
    min-height: 300px;
}

.preview-actions {
    padding: 1rem 1.5rem;
    border-top: 1px solid #333;
    display: flex;
    gap: 1rem;
}

.preview-actions .btn-outline-sm {
    border-color: #444;
    color: #eee;
}

.preview-actions .btn-outline-sm:hover {
    background: #333;
}

/* Signup/Login Page */
/* Auth Layout */
.auth-body { background: #fff; margin: 0; }
.auth-wrapper { display: flex; min-height: 100vh; }

.auth-content { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 4rem 2rem;
}

.auth-form-container { width: 100%; max-width: 400px; }

.auth-header { margin: 2.5rem 0; }
.auth-header h1 { font-size: 2.25rem; letter-spacing: -1px; margin-bottom: 0.5rem; }
.auth-header p { color: var(--text-muted); font-size: 0.95rem; }

/* Form Components */
.auth-divider { 
    text-align: center; 
    margin: 1.5rem 0; 
    position: relative; 
}
.auth-divider::before { 
    content: ""; position: absolute; top: 50%; left: 0; width: 100%; 
    height: 1px; background: var(--border); z-index: 1; 
}
.auth-divider span { 
    background: #fff; padding: 0 1rem; position: relative; 
    z-index: 2; font-size: 0.75rem; color: #999; text-transform: uppercase; 
}

.social-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.social-auth i { width: 16px; margin-right: 8px; }

.auth-footer { margin-top: 2rem; text-align: center; font-size: 0.9rem; color: var(--text-muted); }
.auth-footer a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* Brand Sidebar */
.auth-sidebar { 
    flex: 1; 
    background: #f8fafc; 
    border-left: 1px solid var(--border); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 4rem;
}

@media (max-width: 900px) {
    .auth-sidebar { display: none; }
}

.testimonial-card { 
    background: #fff; padding: 2.5rem; border-radius: 16px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.05); border: 1px solid var(--border);
    margin-bottom: 3rem;
}
.stars { color: #fbbf24; margin-bottom: 1rem; letter-spacing: 2px; }
.testimonial-card p { font-style: italic; font-size: 1.1rem; color: var(--text-main); line-height: 1.6; }
.author { margin-top: 1.5rem; display: flex; flex-direction: column; }
.author strong { font-size: 0.9rem; }
.author span { font-size: 0.8rem; color: var(--text-muted); }

.benefit-list { list-style: none; }
.benefit-list li { 
    display: flex; align-items: center; gap: 0.75rem; 
    margin-bottom: 1rem; font-weight: 600; color: #475569; 
}
.benefit-list i { color: var(--accent); }

/* Login page */
.text-link-sm {
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.status-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

.status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #27c93f;
    margin-bottom: 0.5rem;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #27c93f;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(39, 201, 63, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(39, 201, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(39, 201, 63, 0); }
}

.login-visual {
    margin-top: 4rem;
    opacity: 0.5;
    display: flex;
    justify-content: center;
}

/* Admin accounts page */
/* Admin Overrides */
.admin-sidebar { background: #1e293b; color: #fff; }
.admin-sidebar .logo { color: #fff; }
.admin-sidebar .sidebar-nav a { color: #94a3b8; }
.admin-sidebar .sidebar-nav a:hover, .admin-sidebar .sidebar-nav a.active { background: #334155; color: #fff; }
.admin-sidebar .nav-group { color: #64748b; }

.nav-badge { background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; margin-left: auto; }

/* Admin Filters */
.admin-filters {
    display: flex; gap: 1rem; padding: 1rem; margin-bottom: 2rem; align-items: center;
}
.search-input { position: relative; flex-grow: 1; }
.search-input i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; width: 16px; }
.search-input input { width: 100%; padding: 0.6rem 1rem 0.6rem 2.8rem; border: 1px solid var(--border); border-radius: 6px; }

/* Admin Table */
.table-container { padding: 0; overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th { background: #f8fafc; padding: 1rem 1.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 1.25rem 1.5rem; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; vertical-align: middle; }

.user-info-cell strong { display: block; color: var(--text-main); }
.user-info-cell span { font-size: 0.8rem; color: var(--text-muted); }

/* Status & Tiers */
.status-pill-success { background: #dcfce7; color: #166534; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }
.status-pill-warning { background: #fef9c3; color: #854d0e; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }
.status-pill-muted { background: #f1f5f9; color: #475569; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }

.tier-pill { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; }
.tier-pill.pro { border-color: var(--accent); color: var(--accent); }
.tier-pill.enterprise { background: #6366f1; color: #fff; }
.tier-pill.free { border-color: #94a3b8; color: #64748b; }

/* Usage Bar Mini */
.usage-mini { width: 120px; }
.usage-mini span { font-size: 0.7rem; color: var(--text-muted); display: block; margin-top: 4px; }
.usage-bar { width: 100%; height: 4px; background: #e2e8f0; border-radius: 10px; overflow: hidden; }
.usage-bar .fill { height: 100%; background: var(--accent); }
.usage-bar .fill.danger { background: #ef4444; }

.btn-icon-link { color: #94a3b8; transition: color 0.2s; }
.btn-icon-link:hover { color: var(--accent); }

/* Account Details */
/* Layout Components */
.header-with-back { display: flex; flex-direction: column; gap: 0.5rem; }
.back-link-admin { 
    text-decoration: none; color: #64748b; font-size: 0.85rem; 
    font-weight: 600; display: flex; align-items: center; gap: 0.4rem; 
}
.header-title-row { display: flex; align-items: center; gap: 1rem; }

.admin-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.full-width-card { grid-column: span 2; }

/* Detail Specific Cards */
.detail-card h3 { font-size: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 0.75rem; }

.detail-info-list .info-row {
    display: flex; justify-content: space-between; padding: 0.75rem 0;
    border-bottom: 1px dotted #e2e8f0; font-size: 0.9rem;
}
.detail-info-list .info-row:last-child { border-bottom: none; }
.detail-info-list .info-row span { color: #64748b; }

/* Big Stats */
.big-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.big-stat { background: #f8fafc; padding: 1rem; border-radius: 8px; }
.big-stat .label { display: block; font-size: 0.75rem; color: #64748b; text-transform: uppercase; font-weight: 700; }
.big-stat .value { font-size: 1.5rem; font-weight: 800; color: var(--accent); }

.usage-bar-large { width: 100%; height: 12px; background: #e2e8f0; border-radius: 100px; overflow: hidden; }
.usage-bar-large .fill { height: 100%; background: var(--accent); }

/* Key Management */
.key-preview { margin-bottom: 1rem; }
.key-preview span { font-size: 0.8rem; color: #64748b; display: block; margin-bottom: 0.5rem; }
.key-preview code { background: #f1f5f9; padding: 0.5rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85rem; display: block; }

.key-actions { display: flex; gap: 0.5rem; }

/* Complexity Labels */
.complexity-high { color: #ef4444; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; }
.complexity-low { color: #22c55e; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; }

.btn-outline-danger {
    background: transparent; border: 1px solid #fee2e2; color: #ef4444; 
    padding: 0.6rem 1.2rem; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.btn-outline-danger:hover { background: #ef4444; color: white; border-color: #ef4444; }

/* Audit log admin page */
/* Log Table Specifics */
.logs-table td {
    font-family: var(--font-sans);
    padding: 1rem 1.5rem;
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #64748b;
}

/* Event Badges */
.log-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
}

.log-badge.crit { background: #fee2e2; color: #ef4444; }
.log-badge.warn { background: #fef9c3; color: #854d0e; }
.log-badge.info { background: #e0f2fe; color: var(--accent); }

/* Row Highlighting */
.log-row.critical { background: rgba(239, 68, 68, 0.02); }
.log-row.critical td { color: #b91c1c; }
.log-row.warning { background: rgba(234, 179, 8, 0.02); }

/* Custom Scroll for Tables */
.table-container {
    max-height: 700px;
    overflow-y: auto;
}

.admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
}

/* Admin dash page */
/* Hero Stats */
.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card.highlight {
    border-left: 4px solid var(--accent);
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.stat-sub { font-size: 0.8rem; color: var(--text-muted); }

.stat-trend {
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.trend-up { color: #166534; }
.trend-neutral { color: #64748b; }

/* Metrics Section */
.metrics-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.card-header-row h3 { font-size: 1rem; }
.card-header-row i { color: #cbd5e1; }

/* Regional Bars */
.region-item { margin-bottom: 1.5rem; }
.region-item span { font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 0.5rem; }
.region-bar-group { display: flex; align-items: center; gap: 1rem; }
.region-bar { flex-grow: 1; height: 8px; background: #f1f5f9; border-radius: 100px; overflow: hidden; }
.region-bar .fill { height: 100%; background: var(--accent); }
.region-bar-group strong { font-size: 0.85rem; min-width: 70px; text-align: right; }

/* Consumer Rows */
.consumer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.consumer-row:last-child { border-bottom: none; }
.c-info strong { display: block; font-size: 0.9rem; }
.c-info span { font-size: 0.75rem; color: #64748b; }
.c-usage { font-family: var(--font-mono); font-weight: 700; color: var(--text-main); }

/* Datasets admin page */
/* Progress Animation */
.progress-animate {
    position: relative;
    overflow: hidden;
}
.progress-animate::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(
        -45deg, 
        rgba(255, 255, 255, 0.2) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.2) 75%, 
        transparent 75%, 
        transparent
    );
    background-size: 20px 20px;
    animation: move 2s linear infinite;
}

@keyframes move {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}

/* Status Pill Variations */
.status-pill-info { background: #e0f2fe; color: #0369a1; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }
.status-pill-danger { background: #fee2e2; color: #b91c1c; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }

/* Format Tags */
.format-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* Node IDs */
.node-id {
    background: #1e293b;
    color: #38bdf8;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.error-text { color: #ef4444; font-weight: 600; }

/* Live Indicator */
.live-indicator {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    background: #f8fafc;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    border: 1px solid var(--border);
}

/* Menu button fix */
.navbar .nav-links a.btn-primary {
    color: #ffffff !important;
}

.navbar .nav-links a.btn-primary:hover {
    color: #ffffff !important;
    opacity: 0.8; /* Optional: adds a slight visual change on hover */
}

/* Possible page issues START */
/* 1. Force the APEX body container to take up the full width */
.t-Body-main, 
.t-Body-content, 
.t-Body-contentInner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* 2. Reset the APEX Grid container which often adds a max-width */
.container-fluid,
.apex-grid-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* 3. Ensure your custom container is the only thing controlling width */
.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* 4. Fix for potential 'borders' caused by APEX region styling */
.t-Region {
    border: none !important;
    box-shadow: none !important;
}
/* Possible page issues END */