:root {
  --bg: #EAF0E6;
  --surface: #FFFFFF;
  --sunk: #F3F7F0;
  --ink: #17261C;
  --muted: #56685B;
  --line: #C9D6C6;
  --accent: #2E7A3E;
  --accent-ink: #FFFFFF;
  --sel: #D5EBCF;
  --danger: #A63A22;
  --t0: #3C6FB0;
  --t2: #2E7A3E;
  --t3: #C0781A;
  --tx: #8A6FB5;
  --radius: 6px;
  --ui: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101913; --surface: #172219; --sunk: #1C291F; --ink: #E3ECE4; --muted: #9DB2A2;
    --line: #2D4233; --accent: #6CC27C; --accent-ink: #0E1A11; --sel: #24452C; --danger: #E98A70;
    --t0: #7EA8E0; --t2: #6CC27C; --t3: #E9A94E; --tx: #B9A1E0; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101913; --surface: #172219; --sunk: #1C291F; --ink: #E3ECE4; --muted: #9DB2A2;
  --line: #2D4233; --accent: #6CC27C; --accent-ink: #0E1A11; --sel: #24452C; --danger: #E98A70;
  --t0: #7EA8E0; --t2: #6CC27C; --t3: #E9A94E; --tx: #B9A1E0; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body {
  margin: 0; height: 100%; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); font: 16px/1.45 var(--ui);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
code { font-family: var(--mono); font-size: .88em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- header ---- */
.bar {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 3vw, 32px);
}
.brand h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.01em; }
.file-line { margin: 2px 0 0; color: var(--muted); font-family: var(--mono); font-size: .85rem; }
.file-line.dirty::after { content: "  • alterações não baixadas"; color: var(--t3); font-family: var(--ui); }
.bar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

select, input[type="text"], input[type="search"], textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
}
textarea { font-family: var(--mono); font-size: .85rem; width: 100%; resize: vertical; }

.btn {
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; text-align: center;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 14px; display: inline-block;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .45; cursor: default; }

/* ---- empty state ---- */
main { flex: 1; display: flex; flex-direction: column; padding: 0 clamp(16px, 3vw, 32px) 16px; min-height: 0; }
.empty { flex: 1; display: grid; place-items: center; }
.drop {
  max-width: 620px; padding: 48px 40px; border: 2px dashed var(--line); border-radius: 14px;
  background: var(--surface); text-align: left;
}
.drop.over { border-color: var(--accent); background: var(--sel); }
.drop h2 { margin: 0 0 8px; font-size: 1.4rem; }
.drop p { margin: 0 0 10px; max-width: 60ch; }
.drop .hint { color: var(--muted); font-size: .9rem; }

/* ---- workspace ---- */
.workspace { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; min-height: 0; }
.workspace[hidden] { display: none; }
.list-wrap {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.list-head { display: flex; gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); }
.list-head input { flex: 1; max-width: 360px; }
.count { color: var(--muted); font-size: .9rem; }
.table-scroll { overflow: auto; flex: 1; min-height: 240px; }

table { border-collapse: collapse; width: 100%; }
th { position: sticky; top: 0; background: var(--sunk); text-align: left; font-size: .85rem;
     color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); z-index: 1; }
td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.macros tbody tr { cursor: default; user-select: none; }
.macros tbody tr:hover td { background: var(--sunk); }
.macros tbody tr.selected td { background: var(--sel); }
.c-sel { width: 36px; } .c-pos { width: 44px; color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.c-key { width: 170px; } .c-steps { width: 170px; }
td.c-pos { color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.name { font-weight: 700; word-break: break-word; }

kbd {
  font-family: var(--mono); font-size: .75rem; padding: 1px 6px; margin-right: 3px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--sunk); white-space: nowrap;
}

/* the step strip: one tick per recorded action, colored by type */
.strip { display: flex; align-items: center; gap: 8px; }
.ticks { display: flex; gap: 2px; flex-wrap: wrap; max-width: 120px; }
.ticks i, .t { display: inline-block; width: 6px; height: 14px; border-radius: 2px; background: var(--tx); }
.t0, .t1 { background: var(--t0) !important; } .t2 { background: var(--t2) !important; } .t3 { background: var(--t3) !important; }
.strip b { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--muted); min-width: 2ch; }
.legend { margin: 0; padding: 10px 12px; color: var(--muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }

/* ---- side panel ---- */
.panel { display: flex; flex-direction: column; gap: 6px; }
.panel h3 { margin: 14px 0 4px; font-size: .9rem; color: var(--muted); }
.panel h3:first-child { margin-top: 0; }
.panel .btn { width: 100%; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.note { margin-top: 16px; font-size: .82rem; color: var(--muted); border-left: 3px solid var(--t3); padding-left: 10px; }

.status { padding: 8px clamp(16px, 3vw, 32px); font-size: .9rem; color: var(--muted); min-height: 2.2em; }
.status.error { color: var(--danger); font-weight: 700; }

/* ---- dialogs ---- */
dialog { border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--surface); color: var(--ink);
         width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog.wide { width: min(1000px, calc(100vw - 24px)); }
dialog::backdrop { background: rgb(10 20 12 / .45); }
.dlg { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 34px); }
.dlg h2 { margin: 0; font-size: 1.2rem; }
.dlg p { margin: 0; }
.dlg .small { font-size: .85rem; color: var(--muted); }
.dlg input[type="text"] { width: 100%; }
.dlg-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; margin-top: 4px; }
.dlg-actions.spread { flex-direction: row; justify-content: space-between; }
.dlg-actions span { display: flex; flex-direction: row-reverse; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .9rem; }
.check { display: flex; gap: 8px; align-items: center; }

.merge-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); }
.merge-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.merge-list li:last-child { border-bottom: 0; }
.merge-list li span { flex: 1; font-weight: 700; }
.merge-list li em { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.mini { font: inherit; font-size: .85rem; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line);
        background: var(--sunk); color: var(--ink); cursor: pointer; }
.mini:disabled { opacity: .35; cursor: default; }

.act-scroll { max-height: 55vh; border: 1px solid var(--line); border-radius: var(--radius); }
.actions td { padding: 4px 6px; }
.actions input { width: 100%; font-family: var(--mono); font-size: .85rem; padding: 5px 6px;
                 border: 1px solid transparent; background: transparent; color: var(--ink); border-radius: 4px; }
.actions input:hover { border-color: var(--line); }
.actions input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.actions td:nth-child(1) { width: 36px; color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.actions td:nth-child(2) { width: 64px; } .actions td:nth-child(3) { width: 90px; }
.actions td:nth-child(4), .actions td:nth-child(5) { width: 96px; }
.actions td:last-child { width: 108px; white-space: nowrap; }
.actions tr.t-row-0 td:first-child, .actions tr.t-row-1 td:first-child { box-shadow: inset 3px 0 var(--t0); }
.actions tr.t-row-2 td:first-child { box-shadow: inset 3px 0 var(--t2); }
.actions tr.t-row-3 td:first-child { box-shadow: inset 3px 0 var(--t3); }

@media (max-width: 760px) {
  body { height: auto; min-height: 100%; }
  .table-scroll { max-height: 60vh; }
  .workspace { grid-template-columns: 1fr; }
  .panel { display: grid; grid-template-columns: 1fr 1fr; }
  .panel h3, .panel .note { grid-column: 1 / -1; }
  .c-key, td:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .macros tbody tr.flash td { animation: flash .9s ease-out; }
  @keyframes flash { from { background: var(--sel); } }
}