/* ===== Modern Light Theme – Green Accent ===== */
:root{
  --bg: #f7faf9;
  --card: #ffffff;
  --text: #0f172a;         /* slate-900 */
  --muted: #64748b;        /* slate-500 */
  --border:#e5e7eb;        /* gray-200 */
  --accent:#22c55e;        /* green-500 */
  --accent-2:#16a34a;      /* green-600 */
  --ring: rgba(34,197,94,.28);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 8% -10%, #ebfff4 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #e7fff1 0%, transparent 50%),
    var(--bg);
}

/* ===== Header ===== */
.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 22px;
  background: rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);
  backdrop-filter: saturate(140%) blur(8px);
}
.brand{display:flex; gap:12px; align-items:center}
.logo-img{
  width:50px; height:50px; border-radius:8px;
  box-shadow: 0 2px 10px rgba(22,163,74,.18);
}
.brand h1{margin:0; font-size:18px; letter-spacing:.2px}
.subtitle{margin:3px 0 0; color:var(--muted); font-size:13px}

/* ===== Layout & Cards ===== */
.container{
  max-width:980px; margin:28px auto; padding:0 18px; display:grid; gap:18px;
}
.card{
  border:1px solid var(--border); border-radius:16px; background: var(--card);
  box-shadow: 0 10px 24px rgba(2,6,23,.05), inset 0 1px 0 rgba(255,255,255,.8);
  padding:16px;
}
.card h2{margin:0 0 10px; font-size:16px}

/* ===== Controls ===== */
.file-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

input[type=file]{
  border:1px dashed var(--border);
  background:#fff; color:var(--text);
  padding:10px 12px; border-radius:12px; font-size:14px;
}
input[type=file]:focus{
  outline:none; box-shadow:0 0 0 3px var(--ring);
  border-color:#a7f3d0;                     /* green-200 */
}

.row{display:flex; gap:10px; align-items:center; margin-top:10px}
.indent{padding-left:26px}

.btn{
  appearance:none; cursor:pointer;
  border:1px solid #bbf7d0;                  /* green-200 */
  background: linear-gradient(180deg,#eafff3,#dcffe9);
  color:#065f46;                             /* green-900 */
  padding:10px 14px; border-radius:12px; font-weight:700; font-size:14px;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{
  border-color:#86efac;                      /* green-300 */
  box-shadow: 0 6px 16px rgba(5,46,22,.08);
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* ===== Results ===== */
.summary{font-size:13px; color:var(--muted)}
.matches{display:grid; gap:10px; margin-top:10px}

.match{
  border:1px solid var(--border); border-radius:12px;
  background: linear-gradient(180deg,#ffffff 0%, #fbfefd 100%);
  padding:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.match .path{color:#475569; font-size:12px}
.match code{
  display:block; margin-top:6px; padding:8px 10px; border-radius:8px;
  background:#f0fdf4;                         /* green-50 */
  border:1px solid #dcfce7;                   /* green-100 */
  color:#064e3b;                              /* green-900 */
  white-space:pre-wrap;
}

/* ===== CLI Output ===== */
.output .row.between{display:flex; align-items:center; justify-content:space-between}
.output .actions{display:flex; gap:8px}

.cli{
  width:100%; height:260px;
  background:#f8fafc; color:#0f172a;
  border:1px solid var(--border); border-radius:12px; padding:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

/* ===== Focus rings voor knoppen/links (toegankelijkheid) ===== */
.btn:focus, input[type=file]:focus{
  outline:none; box-shadow:0 0 0 3px var(--ring);
}
.footer{max-width:980px; margin:8px auto 30px; padding:0 18px; color:var(--muted); font-size:12px}