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

:root{
  --bg:#1a1a2e;
  --surface:#22223a;
  --surface2:#2a2a45;
  --border:#3a3a5c;
  --border2:#4a4a6a;
  --text:#d0d0e0;
  --text2:#8888aa;
  --accent:#7b68ee;
  --accent2:#6a5acd;
  --green:#50fa7b;
  --red:#ff5555;
  --orange:#ffb86c;
  --tab-bg:#2e2e4a;
  --mono:"JetBrains Mono","Fira Code","SF Mono","Cascadia Code",Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --gap:2px;
}

html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.4;
  display:flex;
  flex-direction:column;
}

/* ---- APP GRID ---- */
.app{
  flex:1;
  display:grid;
  grid-template-columns:280px 1fr 300px;
  gap:var(--gap);
  padding:var(--gap);
  overflow:hidden;
}

.col{display:flex;flex-direction:column;gap:var(--gap);overflow:hidden}

/* ---- PANELS ---- */
.panel{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  overflow:hidden;
  flex:1;
  min-height:0;
}
.panel-grow{flex:3}
.panel-info{flex:0 0 auto;max-height:180px}

.panel-tabs{
  display:flex;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.tab{
  padding:4px 14px;
  font-size:12px;
  font-weight:500;
  color:var(--text2);
  cursor:default;
  border-right:1px solid var(--border);
  user-select:none;
}
.tab.active{
  background:var(--tab-bg);
  color:var(--accent);
  border-bottom:2px solid var(--accent);
  margin-bottom:-1px;
}

.panel-body{
  flex:1;
  overflow:auto;
  padding:0;
  position:relative;
  min-height:0;
}

.panel-footer{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-top:1px solid var(--border);
  background:var(--surface2);
  flex-shrink:0;
}

/* ---- FILE TABLE ---- */
.file-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.file-table thead{position:sticky;top:0;z-index:1}
.file-table th{
  background:var(--surface2);
  color:var(--text2);
  font-weight:500;
  padding:4px 8px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
.file-table td{
  padding:4px 8px;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:140px;
}
.file-table tr:hover td{background:var(--surface2)}
.empty-msg{
  color:var(--text2);
  text-align:center;
  padding:40px 8px !important;
  font-style:italic;
}
.tbl-btn{
  background:none;
  border:none;
  color:var(--accent);
  cursor:pointer;
  font-size:13px;
  padding:0 2px;
}
.tbl-btn:hover{color:var(--green)}
.tbl-btn.del:hover{color:var(--red)}

/* ---- FILTER / SELECT ---- */
.filter-input{
  flex:1;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  padding:3px 8px;
  font-size:11px;
  outline:none;
}
.filter-input:focus{border-color:var(--accent)}

.select-file-btn{
  color:var(--accent);
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.select-file-btn:hover{text-decoration:underline}

/* ---- DROP ZONE ---- */
.drop-hint{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-size:13px;
  cursor:pointer;
  transition:background .15s;
}
.drop-hint:hover,.drop-hint.drag-over{background:rgba(123,104,238,.08)}

/* ---- EDITOR ---- */
.editor{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.editor-scroll{
  flex:1;
  overflow:auto;
  min-height:0;
}
.editor-table{
  border-collapse:collapse;
  width:max-content;
  min-width:100%;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.65;
}
.editor-table td{
  vertical-align:top;
  white-space:pre;
  border:none;
}
.ln{
  width:1px;
  text-align:right;
  padding:0 14px 0 8px;
  color:var(--text2);
  background:var(--surface2);
  user-select:none;
  position:sticky;
  left:0;
  z-index:1;
  border-right:1px solid var(--border);
}
.lc{
  padding:0 14px 0 12px;
  color:var(--text);
}
/* first and last row spacing */
.editor-table tr:first-child .ln,
.editor-table tr:first-child .lc{padding-top:6px}
.editor-table tr:last-child .ln,
.editor-table tr:last-child .lc{padding-bottom:6px}

/* ---- SYNTAX HIGHLIGHTING ---- */
.hl-kw{color:#c678dd}
.hl-s{color:#98c379}
.hl-n{color:#d19a66}
.hl-c{color:#5c6370;font-style:italic}
.hl-bi{color:#61afef}
.hl-op{color:#56b6c2}
.hl-fn{color:#e5c07b}
.hl-bl{color:#d19a66}

.editor-bar{
  display:flex;
  justify-content:space-between;
  padding:3px 10px;
  font-size:11px;
  color:var(--text2);
  border-top:1px solid var(--border);
  background:var(--surface2);
  flex-shrink:0;
}
.aim-label{color:var(--green)}

/* ---- INFO AREA ---- */
.info-area{
  padding:8px 12px;
  overflow:auto;
}
.info-text{
  font-size:12px;
  color:var(--text2);
  white-space:pre-wrap;
  font-family:var(--mono);
  line-height:1.5;
  margin:0;
}

/* ---- SUB-PANELS ---- */
.sub-panel{display:flex;flex-direction:column;height:100%}
.sub-panel-header{
  padding:3px 10px;
  font-size:11px;
  font-weight:600;
  color:var(--accent);
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
}
.collapse-btn{cursor:pointer;color:var(--text2);font-size:13px}
.sub-panel-body{
  flex:1;
  overflow:auto;
  padding:6px 10px;
}
.constant-body{
  overflow:auto;
  padding:6px 10px;
}
.mono-small{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  color:var(--text);
  white-space:pre;
  margin:0;
}

/* ---- FUNC ROW highlight ---- */
.func-row{cursor:pointer}
.func-row:hover td{background:var(--surface2);color:var(--accent);padding: 5px;}

/* ---- STATUS BAR ---- */
.status-bar{
  display:flex;
  align-items:center;
  gap:16px;
  padding:2px 12px;
  background:var(--surface2);
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--text2);
  flex-shrink:0;
  height:24px;
}
.brand{color:var(--accent);font-weight:600;letter-spacing:.02em}
.status-spacer{flex:1}

/* ---- ACTIONS OVERLAY ---- */
.actions-bar{
  position:fixed;
  bottom:32px;
  right:16px;
  display:flex;
  gap:6px;
  z-index:100;
}
.action-btn{
  background:var(--surface2);
  color:var(--text);
  border:1px solid var(--border);
  padding:6px 16px;
  border-radius:4px;
  font-size:12px;
  cursor:pointer;
  transition:all .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.action-btn:hover{border-color:var(--accent);color:#fff}
.accent-btn{
  background:var(--accent2);
  border-color:var(--accent);
  color:#fff;
}
.accent-btn:hover{background:var(--accent)}
.hidden{display:none}

/* ---- SCROLLBARS ---- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .col{max-height:none}
}