@layer reset, base, layout, app, utilities;

@layer reset { *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } }
@layer base {
  html { background: var(--background); }
  body { min-height: 100vh; overflow-x: hidden; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; }
  a { color: var(--foreground); } button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; }
  ::selection { background: var(--primary); color: var(--primary-foreground); }
  :where(button, input, textarea, select, a):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .scanline, body::before, body::after { display: none !important; }
}
@layer layout {
  #topbar { display: none !important; }
  #topbar .tb-dot { display: none; } #topbar .tb-logo { margin-left: 0; color: var(--foreground); font-family: var(--font-sans); font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
  #topbar .tb-logo:hover { color: var(--muted-foreground); } #topbar .tb-path { color: var(--muted-foreground); font-size: .8rem; } #topbar .tb-right { gap: .5rem; }
  #topbar .tb-right a { color: var(--muted-foreground); } #topbar .tb-right a:hover { color: var(--foreground); }
  main { width: min(100% - 1rem, 1440px); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) 0 1rem; }
  .hero-row { position: relative; }
  .hero-actions { position: absolute; top: .15rem; right: 0; }
  .workspace { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: .75rem; margin-bottom: 1rem; }
  .load-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .panel { overflow: hidden; margin-bottom: 1rem; }
  .panel-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; font-size: .75rem; font-weight: 600; }
  .panel-body { padding: 1rem; }
  .schema-panel, .editor-panel { min-width: 0; overflow: hidden; }
  #footer { width: min(calc(100% - 1rem), 1440px); margin: 0 auto; padding: .9rem 0 1.5rem; background: transparent; border: 0; color: var(--muted-foreground); text-align: center; }
  #footer a { color: var(--muted-foreground); } #footer a:hover { color: var(--foreground); }
  #footer strong { color: var(--foreground); font-weight: 600; }
}
@layer app {
  .hero-title { color: var(--foreground); font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.04em; } .hero-title span { color: var(--muted-foreground); }
  .hero-sub, .text-dim { color: var(--muted-foreground); } .section-title { color: var(--muted-foreground); font-size: .75rem; letter-spacing: .08em; } .section-title::before { color: var(--foreground); }
  .panel, .schema-panel, .editor-panel { background: var(--card); border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
  .panel-header, .run-bar, .stats-bar { background: var(--muted); border-color: var(--border); } .panel-header { color: var(--muted-foreground); }
  .btn { min-height: 2.25rem; border-radius: var(--radius-md); } .btn-sm { min-height: 2rem; }
  .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .btn-primary:hover { background: var(--primary); filter: brightness(.92); }
  .btn-cyan, .btn-red, .btn:not(.btn-primary) { border-color: var(--border); color: var(--foreground); } .btn-cyan:hover, .btn-red:hover, .btn:not(.btn-primary):hover { background: var(--accent); border-color: var(--ring); color: var(--accent-foreground); }
  input[type=text], input[type=number], input[type=email], input[type=password], input[type=url], textarea, select { background: var(--background); border-color: var(--input); border-radius: var(--radius-md); color: var(--foreground); }
  input:focus, textarea:focus, select:focus { border-color: var(--ring); } .dropzone { border-color: var(--border); border-radius: var(--radius-md); } .dropzone input[type=file] { display: none; }
  .dropzone:hover, .dropzone.drag-over { background: var(--accent); border-color: var(--ring); } .dz-text strong { color: var(--foreground); }
  .dropzone { min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.25rem; cursor: pointer; }
  .dz-icon { display: block; margin-bottom: .5rem; font-size: 1.5rem; line-height: 1; }
  .dz-text { font-size: .85rem; } .dz-sub { margin-top: .25rem; color: var(--muted-foreground); font-size: .75rem; }
  .sample-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
  .load-choice { display: flex; flex-direction: column; justify-content: center; min-height: 140px; padding: 1rem; }
  .load-choice label { margin-bottom: .5rem; color: var(--foreground); font-size: .8rem; font-weight: 600; }
  .load-choice-row { display: flex; align-items: center; gap: .5rem; }
  .load-choice-row select { min-width: 0; flex: 1; height: 2.25rem; }
  #btn-load-database { min-width: 5.75rem; }
  .load-choice-help { margin-top: .6rem; color: var(--muted-foreground); font-size: .72rem; }
  .schema-panel { width: 360px; min-width: 240px; max-width: 50vw; resize: horizontal; min-height: 300px; }
  .schema-tree { flex: 1; max-height: 500px; overflow-y: auto; padding: .5rem 0; font-size: .82rem; }
  .schema-tree:empty::before { content: 'Load a database to browse its schema'; display: block; padding: 2rem 1rem; color: var(--muted-foreground); text-align: center; }
  .tbl-group { margin-bottom: .25rem; } .tbl-head { padding: .35rem .8rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .tbl-row { display: flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem 1.4rem; cursor: pointer; }
  .tbl-row .tbl-icon { width: 16px; flex-shrink: 0; } .tbl-row .tbl-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .col-list { display: none; padding: .25rem 0 .5rem 2.2rem; } .tbl-group.expanded .col-list { display: block; }
  .col-row { display: flex; align-items: center; gap: .45rem; padding: .18rem 0; font-size: .76rem; }
  .editor-panel { background: var(--card); } .sql-editor-wrap { position: relative; } .sql-editor { display: block; width: 100%; min-height: 180px; padding: .9rem 1rem; line-height: 1.55; resize: vertical; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; user-select: text !important; -webkit-user-select: text !important; pointer-events: auto; cursor: text; }
  .run-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border); }
  .results-wrap { max-height: 500px; overflow: auto; } .rtable { width: 100%; border-collapse: collapse; font-size: .78rem; }
  .rtable thead th { position: sticky; top: 0; z-index: 1; padding: .65rem .7rem; text-align: left; white-space: nowrap; cursor: pointer; font-size: .8rem; }
  .rtable thead th .col-type-badge { display: inline-block; margin-left: .65rem; color: var(--muted-foreground); font-size: .7rem; font-weight: 400; text-transform: lowercase; vertical-align: baseline; }
  .rtable tbody td { max-width: 320px; padding: .4rem .7rem; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stats-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; padding: .65rem 1rem; font-size: .8rem; }
  .stats-bar span { color: var(--foreground); font-weight: 600; }
  .history-list { max-height: 200px; overflow-y: auto; } .hist-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-left: 2px solid transparent; cursor: pointer; }
  .history-list:empty::before { content: 'No queries yet'; display: block; padding: 1.25rem; color: var(--muted-foreground); text-align: center; font-size: .8rem; }
  .hist-time { width: 55px; flex-shrink: 0; font-size: .65rem; } .hist-sql { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hist-meta { flex-shrink: 0; font-size: .65rem; }
  .tabs { background: var(--muted); border-color: var(--border); } .tab { color: var(--muted-foreground); } .tab:hover { color: var(--foreground); } .tab.active { color: var(--foreground); border-bottom-color: var(--foreground); }
  .schema-tree { color: var(--foreground); } .tbl-row { color: var(--foreground); border-left-color: transparent; } .tbl-row:hover, .tbl-row.active { background: var(--accent); border-left-color: var(--foreground); }
  .tbl-row.view .tbl-name, .tbl-row.idx .tbl-name, .tbl-row .tbl-count { color: var(--muted-foreground); } .col-row, .col-row .col-type { color: var(--muted-foreground); } .col-row .col-name { color: var(--foreground); } .col-row .col-flag { color: var(--muted-foreground); border-color: var(--border); }
  .sql-editor-wrap { background: var(--background); border-color: var(--border); } .sql-editor { color: var(--foreground); font-family: var(--font-mono); caret-color: var(--foreground); } .sql-editor:focus { background: var(--accent); }
  .run-bar .kbd { color: var(--muted-foreground); border-color: var(--border); } .rtable thead th { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); } .rtable thead th:hover { color: var(--foreground); }
  .rtable tbody td { color: var(--foreground); border-color: var(--border); } .rtable tbody tr:hover td { background: var(--accent); } .rtable .rn { color: var(--muted-foreground); background: var(--muted); border-color: var(--border); }
  .rtable td.null, .results-empty, .wasm-loading { color: var(--muted-foreground); } .rtable td.num, .rtable td.bool, .rtable thead th .sort-ind { color: var(--foreground); }
  .results-err { background: color-mix(in oklch, var(--destructive) 8%, transparent); border-color: var(--destructive); color: var(--destructive); } .results-ok { background: color-mix(in oklch, var(--primary) 8%, transparent); border-color: var(--primary); color: var(--foreground); }
  .history-list { border-color: var(--border); } .hist-item:hover { background: var(--accent); border-left-color: var(--foreground); } .hist-time, .hist-meta { color: var(--muted-foreground); } .hist-sql { color: var(--foreground); font-family: var(--font-mono); } .hist-meta.err { color: var(--destructive); } .hist-meta.ok { color: var(--foreground); }
  #faq-section { width: min(calc(100% - 1rem), 1440px); max-width: none; margin: 1rem auto 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); }
  #faq-section > summary { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; background: var(--muted); color: var(--foreground); cursor: pointer; font-size: .8rem; font-weight: 600; list-style: none; }
  #faq-section > summary::-webkit-details-marker, .faq-item > summary::-webkit-details-marker { display: none; }
  #faq-section > summary::before { content: '+'; width: 1.25rem; height: 1.25rem; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--muted-foreground); font-size: 1rem; font-weight: 400; }
  #faq-section[open] > summary::before { content: '−'; }
  .faq-inner { width: 100%; max-width: none; padding: 1.25rem; background: var(--card); }
  .faq-h2 { margin: 0 0 .75rem; padding: 0 0 .75rem; border-bottom: 1px solid var(--border); color: var(--foreground); font-size: 1.1rem; letter-spacing: -.02em; text-transform: none; }
  .faq-h2 span { color: var(--muted-foreground); }
  .faq-item { margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
  .faq-item:last-child { border-bottom: 0; }
  .faq-item > summary { display: flex; align-items: center; gap: .6rem; padding: .85rem .25rem; color: var(--foreground); cursor: pointer; font-size: .85rem; font-weight: 600; list-style: none; }
  .faq-item > summary::before { content: '+'; width: 1.25rem; color: var(--muted-foreground); font-size: 1.1rem; font-weight: 400; text-align: center; }
  .faq-item[open] > summary::before { content: '−'; }
  .faq-item[open] > summary { color: var(--foreground); }
  .faq-a { padding: 0 1.25rem 1rem 2.1rem; color: var(--muted-foreground); font-size: .8rem; line-height: 1.7; }
  .faq-a p { margin: 0 0 .65rem; color: inherit; font-size: inherit; } .faq-a p:last-child { margin-bottom: 0; }
  pre, code { background: var(--muted); border-color: var(--border); color: var(--foreground); } .toast { background: var(--popover); border-color: var(--border); color: var(--popover-foreground); box-shadow: var(--shadow-md); }
  #theme-toggle, #theme-toggle-hero { border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--foreground); font-family: var(--font-sans); font-size: .75rem; padding: .35rem .6rem; } #theme-toggle:hover, #theme-toggle-hero:hover { background: var(--accent); opacity: 1; }
  a.tb-linkedin, #topbar .tb-right a.tb-linkedin { background: var(--muted); border-color: var(--border); color: var(--muted-foreground); } a.tb-linkedin:hover, a.tb-linkedin:focus-visible, #topbar .tb-right a.tb-linkedin:hover, #topbar .tb-right a.tb-linkedin:focus-visible { background: var(--accent); border-color: var(--ring); color: var(--foreground); transform: none; }
}
@layer utilities {
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
  @media (max-width: 800px) { .workspace { grid-template-columns: 1fr; } .schema-panel { width: auto; max-width: none; resize: vertical; } .load-grid { grid-template-columns: 1fr !important; } }
  @media (max-width: 640px) { main { width: calc(100% - 1rem); padding-top: 1rem; } #footer, #faq-section { width: calc(100% - 1rem); } .hero-actions { position: static; margin-top: .75rem; } .load-choice { min-height: 0; padding: 1rem 0 0; } .rtable tbody td { max-width: 160px; } }
}