:root {
  --bg: #0a0e17;
  --bg-secondary: #121826;
  --bg-card: #1a2332;
  --bg-hover: #1e2a3a;
  --border: #233044;
  --text: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --primary: #00d4ff;
  --primary-hover: #00b8e6;
  --success: #00ff88;
  --warning: #ffaa00;
  --danger: #ff4444;
  --sidebar-width: 260px;
}
[data-theme="light"] {
  --bg: #f6f8fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f1f3f5;
  --border: #d0d7de;
  --text: #1f2328;
  --text-secondary: #656d76;
  --text-muted: #8c959f;
  --primary: #0969da;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Inter, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height:1.6; overflow-x:hidden; }
.mono { font-family: 'JetBrains Mono', monospace; }
.landing { min-height:100vh; display:flex; flex-direction:column; }
.landing-nav { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 2rem; border-bottom:1px solid var(--border); backdrop-filter:blur(10px); position:sticky; top:0; z-index:100; background: color-mix(in srgb, var(--bg-secondary) 88%, transparent); }
.logo { display:flex; align-items:center; gap:0.75rem; font-weight:800; font-size:1.5rem; letter-spacing:-0.02em; }
.logo-icon { width:36px; height:36px; background: linear-gradient(135deg, var(--primary), #7c3aed); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.nav-links { display:flex; gap:1rem; align-items:center; }
.btn { padding:0.6rem 1.2rem; border-radius:8px; border:1px solid var(--border); background: var(--bg-card); color: var(--text); cursor:pointer; font-weight:500; transition:all 0.2s; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; font-size:0.9rem; }
.btn-primary { background: var(--primary); color:#000; border-color: var(--primary); font-weight:600; }
.btn-primary:hover { background: var(--primary-hover); transform:translateY(-1px); }
.btn:hover { background: var(--bg-hover); }
.hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4rem 2rem; max-width:1200px; margin:0 auto; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight:900; line-height:0.9; letter-spacing:-0.04em; margin-bottom:1.5rem; }
.hero p { font-size:1.25rem; color: var(--text-secondary); max-width:600px; margin-bottom:2.5rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.features { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; padding:2rem; max-width:1200px; margin:0 auto; width:100%; }
.feature-card { background: var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
.feature-card h3 { margin-bottom:0.5rem; display:flex; align-items:center; gap:0.5rem; }
.feature-card p { color: var(--text-secondary); font-size:0.9rem; }
.app { display:flex; min-height:100vh; }
.sidebar { width: var(--sidebar-width); background: var(--bg-secondary); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; height:100vh; z-index:50; transition:transform 0.3s; }
.sidebar-header { padding:1.5rem; border-bottom:1px solid var(--border); }
.sidebar-nav { flex:1; padding:1rem; overflow-y:auto; }
.nav-section { margin-bottom:2rem; }
.nav-section-title { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; color: var(--text-muted); margin-bottom:0.75rem; text-transform:uppercase; }
.nav-item { display:flex; align-items:center; gap:0.75rem; padding:0.6rem 0.75rem; border-radius:8px; color: var(--text-secondary); text-decoration:none; transition:all 0.2s; font-size:0.9rem; cursor:pointer; }
.nav-item:hover, .nav-item.active { background: var(--bg-card); color: var(--text); }
.nav-item.active { background: var(--bg-hover); color: var(--primary); }
.main { flex:1; margin-left: var(--sidebar-width); background: var(--bg); min-height:100vh; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; border-bottom:1px solid var(--border); background: var(--bg-secondary); position:sticky; top:0; z-index:20; }
.topbar h1 { font-size:1.25rem; font-weight:700; }
.content { padding:2rem; max-width:1400px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:1.5rem; }
.card { background: var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; transition:all 0.2s; }
.card:hover { border-color: var(--primary); transform:translateY(-2px); }
.card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.card-title { font-weight:700; font-size:1.1rem; }
.badge { padding:0.2rem 0.6rem; border-radius:20px; font-size:0.7rem; font-weight:600; background: var(--bg-hover); border:1px solid var(--border); }
.badge-success { background: rgba(0,255,136,0.1); color: var(--success); border-color: rgba(0,255,136,0.2); }
.stats { display:flex; gap:1.5rem; margin-top:1rem; font-size:0.85rem; color: var(--text-secondary); }
.progress { height:4px; background: var(--bg-hover); border-radius:2px; overflow:hidden; margin-top:1rem; }
.progress-fill { height:100%; background: var(--primary); transition:width 0.3s; }
.table-container { background: var(--bg-card); border:1px solid var(--border); border-radius:12px; overflow:hidden; overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:0.75rem 1rem; font-size:0.75rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color: var(--text-muted); background: var(--bg-secondary); border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:0.75rem 1rem; border-bottom:1px solid var(--border); font-size:0.9rem; }
.data-table tr:hover td { background: var(--bg-hover); }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.5rem; color: var(--text-secondary); }
.form-input { width:100%; padding:0.75rem; background: var(--bg); border:1px solid var(--border); border-radius:8px; color: var(--text); font-size:0.9rem; }
.form-input:focus { outline:none; border-color: var(--primary); }
.sql-editor { background:#0d1117; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.editor-toolbar { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1rem; background: var(--bg-secondary); border-bottom:1px solid var(--border); }
.editor-area { display:flex; min-height:200px; }
.line-numbers { padding:1rem 0.5rem; background:#010409; color:#484f58; font-family:'JetBrains Mono', monospace; font-size:0.85rem; text-align:right; user-select:none; min-width:50px; }
.sql-textarea { flex:1; padding:1rem; background:transparent; border:none; color:#e6edf3; font-family:'JetBrains Mono', monospace; font-size:0.9rem; resize:none; outline:none; min-height:200px; }
.result-box { margin-top:1.5rem; background: var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1rem; }
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
.tab { padding:0.75rem 1.25rem; cursor:pointer; border-bottom:2px solid transparent; font-size:0.9rem; font-weight:500; color: var(--text-secondary); transition:all 0.2s; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.modal { position:fixed; inset:0; background: rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(4px); }
.modal-content { background: var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:2rem; max-width:500px; width:90%; max-height:90vh; overflow-y:auto; }
.hidden { display:none !important; }
.mobile-toggle { display:none; background:none; border:none; color: var(--text); font-size:1.5rem; cursor:pointer; }
.limit-bar { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1rem; background: var(--bg-card); border:1px solid var(--border); border-radius:8px; margin-bottom:1rem; font-size:0.85rem; }
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .mobile-toggle { display:block; }
  .content { padding:1rem; }
  .grid { grid-template-columns:1fr; }
  .topbar { padding:1rem; }
}


.logo-icon-img { width:36px; height:36px; object-fit:contain; display:block; }
.nav-icon-img { width:20px; height:20px; object-fit:contain; flex:0 0 20px; }
.auth-card { text-align:center; max-width:460px; }
.auth-brand { width:64px; height:64px; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; border-radius:18px; background:var(--bg-hover); border:1px solid var(--border); }
.auth-brand img { width:42px; height:42px; }
.auth-subtitle { color:var(--text-secondary); font-size:.92rem; margin:.5rem 0 1.5rem; }
.auth-error { background:rgba(255,68,68,.1); border:1px solid rgba(255,68,68,.25); color:#ff8b8b; padding:.8rem 1rem; border-radius:10px; margin-bottom:1rem; font-size:.85rem; text-align:left; }
.google-auth-btn { width:100%; min-height:50px; border:1px solid var(--border); background:#fff; color:#1f2328; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:.75rem; cursor:pointer; font-size:.95rem; font-weight:700; transition:.2s; }
.google-auth-btn:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.15); }
.google-auth-btn:disabled { opacity:.65; cursor:wait; transform:none; }
.google-mark { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-weight:900; font-size:1rem; color:#4285f4; background:#fff; }
.auth-trust { margin-top:1rem; color:var(--text-muted); font-size:.75rem; line-height:1.5; }
.toast-stack { position:fixed; top:18px; right:18px; z-index:5000; display:flex; flex-direction:column; gap:10px; width:min(380px, calc(100vw - 36px)); }
.toast { display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.25); transform:translateY(-10px); opacity:0; transition:.22s ease; }
.toast.show { transform:translateY(0); opacity:1; }
.toast-icon { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:900; background:var(--bg-hover); color:var(--primary); flex:0 0 28px; }
.toast-success { border-color:rgba(0,255,136,.3); }.toast-success .toast-icon{color:var(--success)}
.toast-error { border-color:rgba(255,68,68,.35); }.toast-error .toast-icon{color:var(--danger)}
.toast-warning { border-color:rgba(255,170,0,.35); }.toast-warning .toast-icon{color:var(--warning)}
.toast-message { flex:1; font-size:.86rem; }
.toast-close { border:0; background:transparent; color:var(--text-muted); font-size:1.25rem; cursor:pointer; }
.confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.68); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:5100; }
.confirm-card { width:min(440px,100%); background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.5rem; box-shadow:0 24px 80px rgba(0,0,0,.4); }
.confirm-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:rgba(255,170,0,.12); color:var(--warning); font-weight:900; margin-bottom:1rem; }
.confirm-card h3 { margin-bottom:.45rem; }.confirm-card p { color:var(--text-secondary); font-size:.9rem; line-height:1.55; }
.confirm-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.25rem; }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { filter:brightness(1.08); }

.code-block{background:var(--bg);border:1px solid var(--border);padding:1rem;border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:.78rem;line-height:1.65;overflow:auto;margin-top:.75rem;white-space:pre-wrap;word-break:break-word;}
.api-endpoint-list{display:grid;gap:.65rem;margin-top:.8rem;color:var(--text-secondary);font-size:.86rem;line-height:1.55;}
.muted-copy{color:var(--text-secondary);font-size:.86rem;line-height:1.7;}
.form-label{display:block;color:var(--text-secondary);font-size:.8rem;font-weight:600;margin-bottom:.35rem;}
.ui-prompt-card{max-height:90vh;overflow:auto;}
.ui-prompt-input:focus{outline:2px solid rgba(0,212,255,.3);border-color:var(--primary);}
@media (max-width:700px){.code-block{font-size:.72rem}.api-endpoint-list{font-size:.8rem}}


.terms-row { display:flex; align-items:flex-start; gap:.65rem; text-align:left; margin:0 0 1rem; padding:.8rem .9rem; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text-secondary); font-size:.82rem; line-height:1.5; }
.terms-row input { margin-top:.2rem; accent-color:var(--primary); width:17px; height:17px; flex:0 0 auto; }
.terms-row a { color:var(--primary); font-weight:700; }
.terms-content { color:var(--text-secondary); font-size:.9rem; line-height:1.7; margin:1rem 0 1.5rem; }
.terms-content p { margin-bottom:1rem; }
.auth-loading { position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); padding:1rem; }
.auth-loading-card { width:min(390px,100%); background:var(--bg-card); border:1px solid var(--border); border-radius:18px; padding:2rem; text-align:center; box-shadow:0 24px 80px rgba(0,0,0,.4); }
.auth-loading-card h3 { margin:1rem 0 .4rem; }
.auth-loading-card p { color:var(--text-secondary); font-size:.85rem; }
.spinner { width:42px; height:42px; margin:0 auto; border:4px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:smartbaseSpin .8s linear infinite; }
@keyframes smartbaseSpin { to { transform:rotate(360deg); } }
.theme-toggle { white-space:nowrap; }
[data-theme="light"] .sql-editor { background:#f6f8fa; }
[data-theme="light"] .line-numbers { background:#eaeef2; color:#8c959f; }
[data-theme="light"] .sql-textarea { color:#1f2328; }
.muted-copy { color:var(--text-secondary); font-size:.85rem; }