:root {
  --base:    #f4f6f8;
  --mantle:  #ffffff;
  --surface0:#edf0f3;
  --surface1:#d0d7de;
  --overlay: #8c959f;
  --subtext: #57606a;
  --text:    #1f2328;
  --blue:    #0969da;
  --green:   #1a7f37;
  --yellow:  #9a6700;
  --red:     #cf222e;
  --mauve:   #8250df;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--base); color: var(--text); font-family: system-ui, sans-serif; font-size: 14px; }

header { display:flex; align-items:center; gap:12px; padding:16px 24px; background:var(--mantle); border-bottom:1px solid var(--surface0); }
.logo { font-size:1.2em; font-weight:700; color:var(--blue); }
.tagline { font-size:0.82em; color:var(--subtext); }

main { max-width:580px; margin:32px auto; padding:0 16px; }
.field-group { margin-bottom:16px; }
.field-group label { display:block; font-size:0.78em; color:var(--subtext); margin-bottom:4px; }
select, input[type="password"], input[type="text"] { width:100%; background:var(--surface0); border:1px solid var(--surface1); border-radius:6px; padding:8px 10px; color:var(--text); font-size:0.9em; }

.mode-toggle { display:flex; gap:4px; margin-bottom:16px; background:var(--mantle); border-radius:8px; padding:4px; }
.mode-btn { flex:1; padding:8px; border:none; border-radius:6px; cursor:pointer; font-size:0.82em; background:transparent; color:var(--subtext); }
.mode-btn.active { background:var(--surface0); border:1px solid var(--blue); color:var(--blue); font-weight:600; }

.help-box { background:var(--surface0); border-radius:6px; padding:10px 12px; font-size:0.8em; color:var(--subtext); margin-bottom:12px; }

.drop-zone { border:2px dashed var(--surface1); border-radius:8px; padding:28px; text-align:center; font-size:0.85em; color:var(--subtext); cursor:pointer; margin-bottom:12px; }
.drop-zone:hover { border-color:var(--blue); color:var(--blue); }
.file-link { color:var(--blue); cursor:pointer; text-decoration:underline; }

.btn-primary { width:100%; padding:10px; background:var(--blue); color:var(--mantle); border:none; border-radius:6px; font-size:0.9em; font-weight:600; cursor:pointer; }
.btn-primary:hover { opacity:0.9; }

.status { margin-top:12px; font-size:0.8em; color:var(--subtext); min-height:1.2em; }
.status-error { color:var(--red); }

/* Bundle mode */
.bundle-section { background:var(--surface0); border-radius:8px; padding:14px; margin-bottom:16px; }
.bundle-name { font-size:0.82em; color:var(--subtext); margin-bottom:10px; font-weight:600; }
.bundle-slot { display:flex; align-items:center; gap:10px; border-radius:6px; padding:8px 10px; font-size:0.8em; cursor:pointer; margin-bottom:6px; }
.slot-loaded { background:#dafbe1; border:1px solid var(--green); }
.slot-empty { background:var(--mantle); border:1px dashed var(--surface1); }
.slot-icon { width:16px; color:var(--green); }
.slot-label { flex:1; color:var(--text); }
.slot-file { color:var(--subtext); font-size:0.85em; }
.slot-clear { color:var(--overlay); cursor:pointer; }
.slot-clear:hover { color:var(--red); }

/* Results */
#results-screen { max-width:960px; margin:24px auto; padding:0 16px; }
.results-header { font-size:0.85em; color:var(--subtext); margin-bottom:14px; }
.summary-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.chip { padding:5px 12px; border-radius:6px; font-size:0.82em; font-weight:600; }
.chip-error { background:#ffebe9; border:1px solid var(--red); color:var(--red); }
.chip-warn  { background:#fff8c5; border:1px solid var(--yellow); color:var(--yellow); }
.chip-pass  { background:#dafbe1; border:1px solid var(--green); color:var(--green); }
.chip-actions { margin-left:auto; display:flex; gap:6px; }
.btn-secondary { background:var(--surface0); border:1px solid var(--surface1); border-radius:6px; padding:5px 10px; font-size:0.78em; color:var(--subtext); cursor:pointer; }
.btn-secondary:hover { border-color:var(--blue); color:var(--blue); }

.filter-tabs { display:flex; gap:2px; margin-bottom:10px; }
.filter-tab { padding:6px 14px; border:none; border-radius:4px 4px 0 0; cursor:pointer; font-size:0.8em; background:var(--surface0); color:var(--subtext); }
.filter-tab.active { background:var(--surface1); color:var(--text); font-weight:600; }

.table-container { overflow-x:auto; }
.results-table { width:100%; border-collapse:collapse; font-size:0.78em; min-width:700px; }
.results-table th { padding:7px 8px; background:var(--surface0); color:var(--subtext); text-align:left; border:1px solid var(--surface1); white-space:nowrap; }
.results-table td { padding:7px 8px; border:1px solid var(--surface1); color:var(--text); }
.row-error { background:#ffebe9; }
.row-warn  { background:#fff8c5; }
.row-pass  { background:transparent; }

.status-badge { padding:2px 7px; border-radius:4px; font-size:0.85em; font-weight:600; }
.badge-error { background:var(--red); color:var(--mantle); }
.badge-warning { background:var(--yellow); color:var(--mantle); }
.badge-pass { background:var(--green); color:var(--mantle); }

.cross-ref-tag { color:var(--mauve); font-size:0.85em; margin-left:4px; }
.table-count { font-size:0.75em; color:var(--overlay); margin-top:8px; }

.bundle-result-section { margin-bottom:32px; border-top:1px solid var(--surface0); padding-top:16px; }
.bundle-result-section h3 { font-size:0.9em; color:var(--blue); margin-bottom:12px; }

/* Admin */
#admin-tabs { display:flex; gap:4px; margin-left:auto; }
.admin-tab { padding:6px 14px; border:none; border-radius:6px; cursor:pointer; font-size:0.82em; background:var(--surface0); color:var(--subtext); }
.admin-tab.active { background:var(--blue); color:var(--mantle); font-weight:600; }

.analytics-summary { font-size:0.85em; color:var(--subtext); margin-bottom:16px; }
.rules-dir { margin-bottom:16px; }
.rules-dir-label { font-size:0.78em; color:var(--subtext); font-weight:600; margin-bottom:6px; font-family:monospace; }
.rules-file-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--surface0); font-size:0.82em; }
.rules-file-row span { flex:1; font-family:monospace; color:var(--text); }
.json-editor { width:100%; height:400px; background:var(--surface0); color:var(--text); border:1px solid var(--surface1); border-radius:6px; padding:12px; font-family:monospace; font-size:0.82em; margin-top:12px; resize:vertical; }

h3 { font-size:0.9em; color:var(--blue); margin:16px 0 8px; }