:root{
  --bg:#0f1115; --panel:#0b0d12; --border:#1b1f25;
  --fg:#e6e6e6; --muted:#8b949e; --accent:#00ff84;
  --mark:#172a3a; --mark-border:#2e7d7a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; border-bottom:1px solid var(--border); background:var(--panel);
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:700; letter-spacing:.2px}
.btn{
  background:var(--accent); color:#00150b; border:0; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700;
}
.btn.ghost{ background:transparent; color:var(--fg); border:1px solid var(--border); }
.btn:hover{filter:brightness(.95)}

.wrap{max-width:1100px; margin:0 auto; padding:18px}
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px;
  box-shadow:0 0 18px rgba(0,0,0,.2) inset;
}

.row{display:flex; gap:12px; align-items:flex-start; margin:12px 0}
.row.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.col{display:flex; flex-direction:column; gap:8px}

.controls-bar .input{max-width:420px}

.lab{min-width:110px; color:var(--muted); padding-top:6px}
.flags label{margin-right:16px; color:var(--fg); font-size:.95rem}

.input{
  flex:1; width:100%; border:1px solid var(--border); background:#0b0e13; color:var(--fg);
  border-radius:10px; padding:10px 12px; font-size:14px; outline:none;
}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}

.preview{
  min-height:120px; border:1px solid var(--border); background:#0b0e13; border-radius:10px; padding:10px; white-space:pre-wrap; overflow:auto;
}
.matches{
  min-height:120px; border:1px solid var(--border); background:#0b0e13; border-radius:10px; padding:10px; overflow:auto; font-size:13px;
}
.subhead{display:flex; justify-content:space-between; align-items:baseline}
.muted{color:var(--muted)} .small{font-size:.9rem}

mark{
  background:var(--mark);
  border:1px solid var(--mark-border);
  color:inherit; border-radius:4px; padding:0 2px;
}

.snippet{
  background:#0b0e13; border:1px solid var(--border); border-radius:10px; padding:10px; white-space:pre-wrap; overflow:auto;
}
.actions{margin-top:8px; display:flex; align-items:center; gap:10px}
.toast{color:var(--muted)}

.note{margin-top:14px; color:var(--muted)}
.note summary{cursor:pointer}

.footer{margin:18px 0; text-align:center; color:var(--muted)}

@media (max-width:900px){
  .row.two{grid-template-columns:1fr}
  .lab{min-width:80px}
}