@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Paleta Dracula (https://draculatheme.com/contribute) */
  --bg:#282a36;          /* Background */
  --bg-alt:#21222c;       /* variante mais escura */
  --panel:#2f313f;        /* passo intermediário entre bg e current line */
  --panel-2:#383a4c;      /* inputs / painéis secundários */
  --border:#44475a;       /* Current Line */
  --border-strong:#6272a4;/* Comment */
  --text:#f8f8f2;         /* Foreground */
  --text-dim:#b7b9d1;
  --text-faint:#6272a4;   /* Comment reaproveitado como texto apagado */
  --accent:#ff79c6;       /* Pink — accent principal (Ped) */
  --accent-strong:#bd93f9;/* Purple — realce de sintaxe (tok-key) */
  --accent-ink:#1e1a24;
  --veh:#50fa7b;          /* Green — accent de veículo */
  --veh-ink:#0d2818;
  --danger:#ff5555;       /* Red */
  --danger-bg:rgba(255,85,85,.14);
  --success:#50fa7b;      /* Green */
  --mod:#f1fa8c;          /* Yellow — modificadores (percent/ammo) */
  --font-sans:'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --radius:10px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(255,121,198,.07), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(80,250,123,.06), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{ background:rgba(255,121,198,.35); color:var(--text); }

h1,h2,h3{ margin:0; font-family:var(--font-sans); }
p{ margin:0; }
button{ font-family:inherit; }
input, textarea{
  font-family:var(--font-mono);
  background:var(--panel-2);
  border:1px solid var(--border-strong);
  color:var(--text);
  border-radius:6px;
  padding:6px 8px;
  font-size:13px;
}
input:focus-visible, textarea:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
input[type="number"]{ -moz-appearance:textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ opacity:.5; }

/* ---------- layout shell ---------- */
.app-header{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  padding:22px 20px 18px;
  max-width:1320px; margin:0 auto;
}
.brand{
  /* reserva espaço pra não passar por baixo do header-actions fixo no canto */
  padding-right:170px;
  max-width:100%;
}
.brand-eyebrow{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  color:var(--text-faint); text-transform:uppercase; margin-bottom:6px;
}
.brand-title{
  font-size:22px; font-weight:700; letter-spacing:.01em; color:var(--text);
}
.brand-accent{ color:var(--accent); }

/* ---------- language switcher ---------- */
.header-actions{
  position:absolute; top:22px; right:20px;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.header-actions-row{ display:flex; align-items:center; gap:8px; }
.lang-switcher{ position:relative; }
.theme-switcher{ position:relative; }
.lang-switcher-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border-strong); background:var(--panel-2);
  cursor:pointer; font-size:16px; line-height:1;
  transition:filter .12s ease, border-color .12s ease;
}
.lang-switcher-btn:hover{ filter:brightness(1.12); border-color:var(--accent); }
.lang-switcher-btn[aria-expanded="true"]{ border-color:var(--accent); }
.lang-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:40;
  min-width:170px; padding:6px;
  background:var(--panel); border:1px solid var(--border-strong); border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:2px;
}
.lang-menu.is-hidden{ display:none; }
.lang-menu-item{
  display:flex; align-items:center; gap:8px;
  width:100%; border:none; background:transparent; color:var(--text-dim);
  padding:8px 10px; border-radius:6px; font-size:13px; text-align:left; cursor:pointer;
  white-space:nowrap;
}
.lang-menu-item:hover{ background:var(--panel-2); color:var(--text); }
.lang-menu-item.active{ background:var(--panel-2); color:var(--accent); font-weight:600; }

/* ---------- theme editor ---------- */
.theme-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:40;
  min-width:220px; padding:10px;
  background:var(--panel); border:1px solid var(--border-strong); border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:4px;
}
.theme-menu.is-hidden{ display:none; }
.theme-menu-title{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); padding:2px 2px 8px;
}
.theme-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:5px 2px;
}
.theme-row-label{ font-size:12px; color:var(--text-dim); }
.theme-color-input{
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; padding:0; border-radius:6px;
  border:1px solid var(--border-strong); background:transparent; cursor:pointer;
}
.theme-color-input::-webkit-color-swatch-wrapper{ padding:2px; }
.theme-color-input::-webkit-color-swatch{ border:none; border-radius:4px; }
.theme-color-input::-moz-color-swatch{ border:none; border-radius:4px; }
.theme-menu-actions{
  margin-top:6px; padding-top:8px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end;
}

.add-toolbar{
  display:flex; gap:10px; flex-wrap:wrap;
  max-width:1320px; margin:0 auto; padding:0 20px 18px;
}

.layout{
  display:grid; grid-template-columns:1fr; gap:20px;
  max-width:1320px; margin:0 auto; padding:0 20px 48px;
}
@media (min-width:980px){
  .layout{ grid-template-columns:minmax(0,1fr) 400px; align-items:start; }
  .preview-panel{ position:sticky; top:20px; }
}

.builder{ display:flex; flex-direction:column; gap:16px; }

.empty-state{
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  padding:32px 20px; text-align:center; color:var(--text-dim); font-size:14px;
  background:var(--panel);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:7px; border:1px solid var(--border-strong);
  padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer;
  background:var(--panel-2); color:var(--text);
  transition:filter .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:hover{ filter:brightness(1.12); }
.btn:active{ filter:brightness(.95); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-primary.btn-veh{ background:var(--veh); border-color:var(--veh); color:var(--veh-ink); }
.btn-ghost{ background:transparent; }

.icon-btn{
  width:26px; height:26px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; border:1px solid transparent; background:transparent;
  color:var(--text-faint); cursor:pointer; font-size:13px; line-height:1;
}
.icon-btn:hover{ color:var(--danger); background:var(--danger-bg); border-color:rgba(255,85,85,.3); }
.icon-btn.danger{ color:var(--text-faint); }

.btn-add-entry{
  background:transparent; border:1px dashed var(--border-strong); color:var(--text-dim);
  border-radius:6px; padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer;
}
.btn-add-entry:hover{ color:var(--accent); border-color:var(--accent); }

.btn-mini{
  width:30px; border-radius:6px; border:1px solid var(--border-strong);
  background:var(--panel-2); color:var(--text-dim); cursor:pointer; font-size:14px;
}
.btn-mini:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- target cards ---------- */
.target-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px;
}
.target-head{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.badge{
  font:700 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  padding:6px 9px; border-radius:5px; align-self:center;
}
.badge-ped{ background:rgba(255,121,198,.15); color:var(--accent); border:1px solid rgba(255,121,198,.35); }
.badge-vehicle{ background:rgba(80,250,123,.18); color:var(--veh); border:1px solid rgba(80,250,123,.4); }

.field-label{
  display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:4px; font-family:var(--font-mono);
}
.field-hint{ font-size:11px; color:var(--text-faint); margin-top:6px; }
.target-id-field .in-target-model{ width:120px; }
.target-remove{ margin-left:auto; }

.section-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-dim);
  margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--border);
}

.zones-field{ margin-bottom:6px; }
.zone-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--panel-2); border:1px solid var(--border-strong); border-radius:20px;
  padding:4px 6px 4px 10px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
}
.chip-x{
  width:16px; height:16px; border:none; border-radius:50%; background:transparent;
  color:var(--text-faint); cursor:pointer; font-size:11px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.chip-x:hover{ background:var(--danger-bg); color:var(--danger); }
.zone-add{ display:flex; gap:6px; }
.zone-input{ width:150px; }

.lists-grid{ display:flex; flex-direction:column; gap:14px; }

.list-editor{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; padding:10px 12px;
}
.list-editor-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.list-label{ font-size:12px; font-weight:600; color:var(--text-dim); }
.empty-hint{ font-size:12px; color:var(--text-faint); padding:4px 0; }

.entry-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  padding:7px 0; border-bottom:1px dashed var(--border);
}
.entry-row:last-child{ border-bottom:none; }
.in-value{ width:92px; }
.in-num{ width:64px; }
.in-num.is-hidden{ display:none; }

.seg{ display:inline-flex; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; }
.seg-btn{
  background:var(--panel-2); color:var(--text-dim); border:none; padding:6px 9px;
  font:600 11px/1 var(--font-mono); letter-spacing:.02em; cursor:pointer;
}
.seg-btn + .seg-btn{ border-left:1px solid var(--border-strong); }
.seg-btn.active{ background:var(--accent); color:var(--accent-ink); }
.seg-btn:hover:not(.active){ color:var(--text); }

.entry-row .icon-btn{ margin-left:auto; }

.passengers-list{ display:flex; flex-direction:column; gap:12px; }
.passenger-block{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; padding:12px;
}
.passenger-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.passenger-label{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--veh); }

/* ---------- import panel ---------- */
.import-panel{
  max-width:1320px; margin:0 auto; padding:0 20px 18px;
}
.import-panel.is-hidden{ display:none; }
.import-panel > div, .import-panel > p, .import-panel > textarea{
  background:var(--panel); border:1px solid var(--border);
}
.import-panel-inner{
  background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:16px 18px;
}
.import-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.import-panel-head h2{ font-size:15px; }
.import-textarea{
  width:100%; min-height:140px; resize:vertical; margin:10px 0; font-size:12px; line-height:1.5;
}
.import-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.spacer{ flex:1 1 auto; }

/* ---------- preview panel ---------- */
.preview-panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 40px);
}
.preview-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:14px 16px 0;
}
.preview-head h2{ font-size:14px; }
.preview-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.preview-actions{ display:flex; gap:8px; padding:12px 16px; flex-wrap:wrap; }
.preview-body{
  flex:1 1 auto; overflow:auto; background:var(--panel-2);
  border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:12.5px; line-height:1.65;
  min-height:220px; tab-size:4;
}
.preview-placeholder{
  padding:24px 16px; color:var(--text-faint); font-size:12.5px;
}
.line{ display:flex; white-space:pre; }
.line .ln{
  flex:0 0 auto; width:38px; text-align:right; padding-right:12px;
  color:var(--text-faint); user-select:none; border-right:1px solid var(--border);
  margin-right:12px;
}
.line .lc{ flex:1 1 auto; padding-right:16px; }
.tok-key{ color:var(--accent-strong); }
.tok-punc{ color:var(--text-faint); }
.tok-struct{ color:var(--veh); font-weight:600; }
.tok-mod{ color:var(--mod); }
.tok-num{ color:var(--success); }

/* ---------- recalibration panel ---------- */
.recalib-panel{
  max-width:1320px; margin:0 auto 24px; padding:0 20px;
  display:flex; flex-direction:column; gap:12px;
}
.recalib-panel.is-hidden{ display:none; }
.recalib-panel-title{
  font-size:13px; font-weight:600; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.04em;
}
.recalib-group{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 16px;
}
.recalib-group-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--border);
}
.recalib-group-title{ font-size:13px; font-weight:600; }
.recalib-group-count{ font-size:11px; color:var(--text-faint); font-family:var(--font-mono); }
.recalib-list{ margin:6px 0; }
.recalib-list-title{
  font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:2px;
}
.recalib-row{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text);
  padding:2px 0;
}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,16px);
  background:var(--panel-2); border:1px solid var(--border-strong); color:var(--text);
  padding:10px 16px; border-radius:8px; font-size:13px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  z-index:50; max-width:90vw; text-align:center;
}
.toast.is-visible{ opacity:1; transform:translate(-50%,0); }
.toast.is-error{ border-color:rgba(255,85,85,.5); color:#ff9e9e; }

@media (max-width:600px){
  .app-header{ padding:18px 14px 14px; }
  .header-actions{ top:14px; right:14px; gap:6px; }
  .brand{ padding-right:120px; }
  .add-toolbar{ padding:0 14px 14px; }
  .layout{ padding:0 14px 40px; }
  .target-card{ padding:14px; }
  .zone-input{ width:120px; }
}

@media (max-width:420px){
  .header-actions .btn{ padding:8px 10px; font-size:12px; }
  .brand{ padding-right:100px; }
}