/* dcmp — Ayu dark, flat. No gradients, no rounded corners, no lined borders.
   One font: Google Sans Code Nerd Font (ligatures on). Separation is by flat
   fill and whitespace only; the one hairline allowed is the pane divider. */

:root {
  --bg-tree: #0d1017;   /* surface.base — left pane */
  --bg-code: #10141c;   /* surface.lift — right pane */
  --bg-sunk: #0b0e14;   /* dividers, wells */
  --bg-line: #161a24;   /* active line / hover */
  --bg-sel:  #3388ff40; /* selection */
  --fg:      #bfbdb6;
  --fg-dim:  #5a6673;   /* comments, muted */
  --fg-line: #5a6378a6; /* line numbers */
  --accent:  #e6b450;   /* ui accent / active marker */
  --green:   #aad94c;   /* string */
  --orange:  #ff8f40;   /* keyword */
  --yellow:  #ffb454;   /* function */
  --blue:    #39bae6;   /* type / entity */
  --blue2:   #59c2ff;   /* class */
  --teal:    #95e6cb;   /* regexp / char */
  --purple:  #d2a6ff;   /* numeric / const */
  --peach:   #f29668;   /* operator */
  --red:     #f07178;   /* member / support */
  --error:   #d95757;

  --mono: "GoogleSansCode Nerd Font Mono", "GoogleSansCode NFM",
          "GoogleSansCode Nerd Font", "Google Sans Code", monospace;
}

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

html, body {
  height: 100%;
  background: var(--bg-code);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  font-variant-ligatures: contextual common-ligatures;
  font-feature-settings: "calt" 1, "liga" 1;
  overflow: hidden;
}

#app { display: flex; height: 100vh; width: 100vw; }

/* ---- left pane: tree ---- */
#tree-pane {
  width: 20%;
  min-width: 140px;
  background: var(--bg-tree);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#meta {
  padding: 10px 12px;
  background: var(--bg-sunk);
  color: var(--fg-dim);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#meta .name { color: var(--fg); display: block; overflow: hidden; text-overflow: ellipsis; }
#meta .tag { color: var(--accent); }
#meta .lang { color: var(--teal); }
#meta .engine { color: var(--blue); }

#tree { flex: 1; overflow: auto; padding: 6px 0; }

.row {
  display: flex;
  align-items: center;
  padding: 1px 8px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.row:hover { background: var(--bg-line); }
.row.sel { background: var(--bg-line); box-shadow: inset 2px 0 0 var(--accent); }
.row .ico { width: 1.3em; text-align: center; margin-right: 6px; flex: none; }
.row .caret { width: 1em; text-align: center; color: var(--fg-dim); flex: none; }
.row .label { overflow: hidden; text-overflow: ellipsis; }

/* icon tints by kind */
.ico.dir, .ico.package { color: var(--blue); }
.ico.archive, .ico.binary { color: var(--accent); }
.ico.class { color: var(--blue2); }
.ico.function { color: var(--yellow); }
.ico.resource, .ico.field { color: var(--fg-dim); }

.kids { display: none; }
.kids.open { display: block; }

/* ---- divider ---- */
#divider {
  width: 4px;
  background: var(--bg-sunk);
  cursor: col-resize;
  flex: none;
}
#divider:hover { background: var(--accent); }

/* ---- right pane: viewer ---- */
#code-pane {
  flex: 1;
  background: var(--bg-code);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tabbar { display: flex; align-items: center; background: var(--bg-sunk); flex: none; }
#tabs { display: flex; flex: 1; min-width: 0; overflow-x: auto; }
#lang-select {
  flex: none; margin: 0 8px; padding: 3px 6px;
  background: var(--bg-line); color: var(--fg-dim);
  border: none; outline: none; font-family: var(--mono); font-size: 12px;
  cursor: pointer; appearance: none;
}
#lang-select:hover { color: var(--fg); }
.tab {
  padding: 8px 16px;
  cursor: pointer;
  color: var(--fg-dim);
  white-space: nowrap;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }

#view { flex: 1; overflow: auto; position: relative; }

pre#content {
  margin: 0;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 13px;
  tab-size: 4;
  white-space: pre;
  color: var(--fg);
}

#graph { position: absolute; inset: 0; overflow: auto; background: var(--bg-code); }
#graph-canvas { position: relative; }
#graph svg { display: block; }
/* Colours come from the DOT we emit; only normalise the font and recolour the
   fallback (agfd) graph's white boxes / black text so it stays legible. */
#graph svg text { font-family: var(--mono) !important; }
#graph svg polygon[fill="white"],
#graph svg polygon[fill="#ffffff"] { fill: var(--bg-tree); }
#graph svg polygon[fill="white"] ~ text,
#graph svg text[fill="black"], #graph svg text[fill="#000000"] { fill: var(--fg); }

/* zoom control, anchored on the right edge of the graph view */
#graph-tools {
  position: absolute; top: 12px; right: 12px; z-index: 15;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--bg-sunk); padding: 10px 6px; color: var(--fg-dim);
}
#graph-tools .zlabel { font-size: 11px; }
#graph-tools input[type="range"] {
  writing-mode: vertical-lr; direction: rtl;
  appearance: slider-vertical; -webkit-appearance: slider-vertical;
  width: 6px; height: 160px; accent-color: var(--accent); cursor: ns-resize;
}

/* empty / status states fill the viewer */
#empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--fg-dim); gap: 10px; text-align: center;
}
#empty .big { font-size: 40px; color: var(--accent); min-height: 48px; }
#empty .big.spin { font-size: 34px; }
#empty .hint { font-size: 13px; }

/* ---- hex view colouring ---- */
#content code.hexview .ho { color: var(--fg-dim); }         /* offset column */
#content code.hexview .hz { color: #39414f; }               /* zero bytes / dots */
#content code.hexview .ha { color: var(--teal); }           /* ascii gutter */

/* ---- drop overlay ---- */
#drop {
  position: fixed; inset: 0;
  background: #0b0e14cc;
  display: none;
  align-items: center; justify-content: center;
  color: var(--accent); font-size: 22px;
  z-index: 50;
}
#drop.on { display: flex; }

/* ---- deobf panel (slides over the viewer) ---- */
#deobf-btn {
  position: absolute; right: 12px; bottom: 12px;
  background: var(--bg-sunk); color: var(--accent);
  padding: 6px 12px; cursor: pointer; z-index: 10;
}
#deobf-btn:hover { color: var(--fg); background: var(--bg-line); }
#deobf {
  position: absolute; inset: 0;
  background: var(--bg-code);
  display: none; flex-direction: column; z-index: 20;
}
#deobf.on { display: flex; }
#deobf header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; background: var(--bg-sunk); color: var(--fg);
}
#deobf header .x { cursor: pointer; color: var(--fg-dim); }
#deobf header .x:hover { color: var(--error); }
#deobf-body { flex: 1; overflow: auto; padding: 16px 22px; line-height: 1.7; }
#deobf-body h3 {
  color: var(--accent); font-size: 13px; margin: 24px 0 8px;
  font-weight: normal; letter-spacing: .04em;
}
#deobf-body h3:first-child { margin-top: 0; }
#deobf-body .ok, #deobf-body .warn { margin: 4px 0 10px; }
/* Tables get hairline row separators here (the one place borders earn their
   keep): a dense report is far easier to scan ruled than unruled. */
#deobf-body table {
  border-collapse: collapse; width: 100%; font-size: 12px; margin: 6px 0 12px;
}
#deobf-body td, #deobf-body th {
  padding: 6px 14px 6px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--bg-line);
}
#deobf-body th { color: var(--fg-dim); font-weight: normal; border-bottom-color: #2a3140; }
#deobf-body tr:last-child td { border-bottom: none; }
#deobf-body .mono { color: var(--teal); }
#deobf-body .warn { color: var(--orange); }
#deobf-body .ok { color: var(--green); }
#deobf-body .deep {
  background: var(--bg-sunk); color: var(--accent);
  padding: 4px 10px; cursor: pointer; display: inline-block; margin-bottom: 8px;
}

.warnings { padding: 6px 12px; background: var(--bg-sunk); color: var(--orange); font-size: 12px; }

/* ---- highlight.js token colors (Ayu) ---- */
.hljs-comment, .hljs-quote { color: var(--fg-dim); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type { color: var(--orange); }
.hljs-string, .hljs-meta-string { color: var(--green); }
.hljs-title, .hljs-title.function_, .hljs-section { color: var(--yellow); }
.hljs-title.class_, .hljs-class .hljs-title { color: var(--blue2); }
.hljs-number, .hljs-literal { color: var(--purple); }
.hljs-regexp, .hljs-symbol, .hljs-char { color: var(--teal); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--fg); }
.hljs-name, .hljs-tag { color: var(--blue); }
.hljs-operator, .hljs-punctuation { color: var(--peach); }
.hljs-params { color: var(--fg); }
.hljs-meta { color: var(--red); }
.hljs-deletion { color: var(--error); }
.hljs-addition { color: var(--green); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-sunk); }
::-webkit-scrollbar-thumb { background: #2a3140; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }