:root {
  --bg: #1f1f1f;
  --bg2: #181818;
  --bg3: #2b2b2b;
  --input-bg: #313131;
  --fg: #cccccc;
  --muted: #9d9d9d;
  --border: #2b2b2b;
  --accent: #0078d4;
  --modified: #3794ff;
  --added: #238636;
  --removed: #f85149;
  --same: #858585;
  --sel: #264f78;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { user-select: none; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  color: var(--fg);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
button {
  background: var(--bg3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #3a3a3a; }
button:disabled { opacity: .5; cursor: default; }
input[type=text] {
  background: var(--input-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: inherit;
  user-select: text;
}
input[type=text]:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
.hidden { display: none !important; }

#app-menu {
  display: flex; justify-content: flex-start; align-items: center; gap: 4px;
  height: 34px; flex: 0 0 34px; padding: 0 12px;
  border-bottom: 1px solid var(--border); background: var(--bg2);
  -webkit-app-region: drag;
}
#appLogo { width: 24px; height: 24px; margin-right: 4px; object-fit: contain; pointer-events: none; }
.help-menu { position: relative; }
#helpMenuButton, .titlebar-menu-button {
  display: flex; align-items: center; gap: 7px; padding: 4px 10px;
  background: transparent; border-color: transparent; -webkit-app-region: no-drag;
}
#helpMenuButton:hover, #helpMenuButton[aria-expanded="true"], .titlebar-menu-button:hover { background: var(--bg3); }
.menu-items {
  position: absolute; z-index: 10; top: calc(100% + 5px); left: 0;
  width: 300px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--bg2); box-shadow: 0 8px 20px #0008;
}
.menu-items strong { display: block; margin-bottom: 8px; }
.menu-items p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }
#toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
#progress {
  height: 25px; flex: 0 0 25px; position: relative; overflow: hidden;
  padding: 3px 12px 0; color: var(--muted); font-size: 11px; line-height: 14px;
  background: var(--bg2);
}
#progressLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-track { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #303030; }
.progress-bar {
  width: 0; height: 100%; background: var(--accent);
  transition: width 120ms linear;
}
.file-pick { display: flex; align-items: center; gap: 6px; flex: 1; }
.file-pick .label { font-weight: 600; font-size: 11px; letter-spacing: .5px; }
.file-pick .label.old { color: var(--removed); }
.file-pick .label.new { color: var(--added); }
.file-pick input { flex: 1; }
#swap { font-size: 16px; }
#compareBtn { background: var(--accent); border-color: var(--accent); font-weight: 600; }
#compareBtn:hover:not(:disabled) { background: #026ec1; }

#summary {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-wrap: wrap;
}
.summary-group { display: flex; align-items: center; gap: 6px; }
.summary-title { color: var(--muted); margin-right: 2px; }
.pill {
  min-width: 26px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  color: #fff;
}
.pill.modified { background: var(--modified); }
.pill.added { background: var(--added); }
.pill.removed { background: var(--removed); }
.pill.same { background: var(--same); }
.spacer { flex: 1; }
.meta { color: var(--muted); font-size: 12px; }

#main { flex: 1; display: flex; min-height: 0; }
#left-pane {
  width: var(--sidebar-width, 25%); flex: 0 0 var(--sidebar-width, 25%);
  min-width: 220px; display: flex; flex-direction: column;
  background: var(--bg2);
}
#pane-splitter {
  position: relative; z-index: 2; flex: 0 0 5px; cursor: col-resize;
  background: var(--bg2); touch-action: none;
}
#pane-splitter::after {
  position: absolute; top: 0; bottom: 0; left: 2px; width: 1px;
  background: var(--border); content: "";
}
#pane-splitter:hover, #pane-splitter:focus-visible { background: var(--accent); outline: none; }
#pane-splitter:hover::after, #pane-splitter:focus-visible::after { display: none; }
#right-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#tree-heading {
  flex: 0 0 32px; display: flex; align-items: center;
  padding: 0 12px; border-bottom: 1px solid var(--border);
  color: var(--fg); font-size: 11px; font-weight: 600; letter-spacing: .5px;
}
#filters {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  flex: 0 0 auto; min-height: 42px;
  padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--bg2);
}
#filters input#search { flex: 1 1 100%; min-width: 0; }
.chk { display: flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; }

.scroll { overflow: auto; flex: 1; }
#tree { font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px; }
#treeStatus, .status { padding: 4px 10px; color: var(--muted); font-size: 12px; }

.node { user-select: none; }
.node > .row {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 8px; cursor: pointer; white-space: nowrap;
}
.node > .row:hover { background: var(--bg3); }
.node > .row.selected { background: var(--sel); }
.tw { width: 14px; display: inline-block; text-align: center; color: var(--muted); }
.badge {
  font-size: 10px; padding: 0 5px; border-radius: 8px; color: #fff; font-weight: 700;
  text-transform: uppercase;
}
.badge.modified { background: var(--modified); }
.badge.added { background: var(--added); }
.badge.removed { background: var(--removed); }
.badge.same { background: var(--same); }
.name { overflow: hidden; text-overflow: ellipsis; }
.name.descriptor { color: #9cdcfe; }
.sig { color: var(--muted); }
.children { display: none; margin-left: 14px; border-left: 1px solid var(--border); }
.node.open > .children { display: block; }
.counts { color: var(--muted); font-size: 11px; }

#detail-head {
  display: flex; align-items: center; gap: 10px;
  height: 42px; flex: 0 0 42px;
  padding: 4px 10px; border-bottom: 1px solid var(--border);
  background: var(--bg2); font-weight: 600; white-space: nowrap; overflow: hidden;
}
#detailTitle { overflow: hidden; text-overflow: ellipsis; }
#diff-controls {
  display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto;
  padding-right: 4px;
}
#diff-controls button { padding: 2px 10px; font-size: 12px; line-height: 16px; }
#diffPos { color: var(--muted); font-size: 12px; min-width: 52px; }
@keyframes diffFlash { 0% { background: rgba(55, 148, 255, .4); } 100% { background: transparent; } }
.flash { animation: diffFlash 1s ease-out; }
#detail { padding: 0; user-select: text; }
.diff {
  display: grid; grid-template-columns: 1fr 1fr; font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12.5px; min-width: 0;
}
.diff .h {
  position: sticky; top: 0; padding: 4px 10px; background: var(--bg3); border-bottom: 1px solid var(--border);
  font-weight: 700; z-index: 1;
}
.diff .h.old { color: var(--removed); }
.diff .h.new { color: var(--added); }
.diff .c { padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.diff .l, .diff .r, .diff .line {
  padding: 1px 10px; white-space: pre-wrap; word-break: break-word; min-width: 0;
  border-right: 1px solid var(--border);
}
.diff.unified .h.new { display: none; }
.diff.unified { grid-template-columns: 1fr; }
.diff.unified .c { grid-template-columns: 1fr; }
.diff.unified .l { border-right: none; }
.diff.unified .r { display: none; }
.rowdel { background: rgba(248, 81, 73, .15); }
.rowadd { background: rgba(35, 134, 54, .18); }
.l.rowadd, .r.rowdel { background: transparent; }
.lineno { color: #858585; user-select: none; margin-right: 8px; display: inline-block; min-width: 34px; text-align: right; }
.notice { padding: 14px; color: var(--muted); }
.smali { font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; padding: 8px 12px; }
.smali .del { background: rgba(248, 81, 73, .15); display: block; }
.smali .add { background: rgba(35, 134, 54, .18); display: block; }

/* smali syntax highlighting */
.tk-directive { color: #c586c0; }
.tk-opcode { color: #569cd6; }
.tk-name { color: #dcdfe4; }
.tk-member { color: #dcdcaa; }
.tk-reg { color: #9cdcfe; }
.tk-lit { color: #b5cea8; }
.tk-str { color: #ce9178; }
.tk-type { color: #4ec9b0; }
.tk-label { color: #d7ba7d; }
.tk-addr { color: #6b7280; }
.tk-mod { color: #c586c0; }
.tk-op { color: #808690; }
.tk-comment { color: #6a9955; font-style: italic; }

#aboutDialog {
  width: min(620px, calc(100vw - 40px)); max-width: none; max-height: min(720px, calc(100vh - 40px));
  padding: 0; border: 1px solid var(--border); border-radius: 8px;
  color: var(--fg); background: var(--bg2); box-shadow: 0 18px 55px #000a;
  overflow: hidden;
}
#aboutDialog::backdrop { background: #0009; }
.about-dialog { display: flex; flex-direction: column; max-height: inherit; }
.about-header {
  display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
}
.about-header h1 { margin: 0; font-size: 19px; }
.about-header p { margin: 5px 0 0; color: var(--muted); }
.about-close { padding: 1px 8px; font-size: 21px; line-height: 24px; }
.about-content { min-height: 0; overflow-y: auto; padding: 4px 22px 18px; user-select: text; }
.about-content section { margin-top: 17px; }
.about-content h2 { margin: 0 0 8px; font-size: 14px; }
.about-content p, .about-content li { color: #b7b7b7; line-height: 1.55; }
.about-content p { margin: 0; }
.about-content ul { margin: 7px 0 0; padding-left: 21px; }
.about-details {
  display: grid; grid-template-columns: 105px 1fr; gap: 7px 14px; margin: 0;
}
.about-details dt { color: var(--muted); }
.about-details dd { margin: 0; overflow-wrap: anywhere; }
.about-footer {
  flex: 0 0 auto; padding: 13px 22px; border-top: 1px solid var(--border);
  color: var(--muted); text-align: center; font-weight: 600; background: var(--bg2);
}

/* ---- web additions: privacy note, drag & drop, mobile layout ---- */
#webnote {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
#webnote a { color: var(--modified); text-decoration: none; }
#webnote a:hover { text-decoration: underline; }
.file-pick.dragover { outline: 2px dashed var(--accent); outline-offset: 2px; }
.file-pick.dragover input { border-color: var(--accent); }

@media (max-width: 900px) {
  body { height: auto; min-height: 100vh; overflow: visible; }
  #toolbar { flex-wrap: wrap; }
  .file-pick { flex: 1 1 100%; }
  #swap { transform: rotate(90deg); }
  #compareBtn { flex: 1 1 100%; padding: 9px 10px; }
  #main { flex-direction: column; }
  #left-pane { width: 100% !important; flex: 0 0 44vh; min-width: 0; }
  #pane-splitter { display: none; }
  #right-pane { flex: 0 0 56vh; min-width: 0; }
  #detail-head { height: auto; min-height: 42px; flex-wrap: wrap; }
  .diff { min-width: 560px; }
}