:root{
  --bg:#eef2f7;
  --panel:#fff;
  --ink:#172033;
  --muted:#64748b;
  --line:#dbe3ed;
  --blue:#2563eb;
  --editor:#0f172a;
  --editor-ink:#e2e8f0;

  --ok:#047857;
  --ok-bg:#ecfdf5;
  --bad:#b91c1c;
  --bad-bg:#fef2f2;
  --warn:#92400e;
  --warn-bg:#fffbeb;

  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.55 Inter,system-ui,sans-serif;
}

.app{max-width:1600px;margin:auto;padding:20px}

.back{
  display:inline-block;
  margin-bottom:12px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  text-decoration:none;
}
.back:hover{color:var(--blue)}

header,.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:17px;
  box-shadow:0 8px 25px #0f172a10;
}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:15px 18px;
  margin-bottom:17px;
}
header h1{margin:0;font-size:21px}
header p{margin:1px 0;color:var(--muted);font-size:13px}

nav{display:flex;gap:8px;flex-wrap:wrap}

button,.button{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:9px 13px;
  font:inherit;
  font-weight:750;
  cursor:pointer;
  color:var(--ink);
}
button:hover{border-color:#93c5fd}
button:disabled{cursor:default;opacity:.45}
button:disabled:hover{border-color:var(--line)}
.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.primary:hover{border-color:var(--blue)}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
textarea:focus-visible,input:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}

.panel{overflow:hidden;display:flex;flex-direction:column;margin-bottom:17px}

.panel-head{
  min-height:55px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px 12px;
  flex:none;
  flex-wrap:wrap;
}
.panel-head small{color:var(--muted)}
.head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.mini{
  position:relative;
  border:1px solid var(--line);
  border-radius:8px;
  padding:5px 10px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  cursor:pointer;
}
.mini:hover{border-color:#93c5fd;color:var(--ink)}
.mini:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.mini input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Editoren mit Hervorhebung ---------- */

.editor{position:relative;background:var(--editor);min-width:0}
.editor textarea,.editor .hl{
  margin:0;
  border:0;
  font:13px/1.65 var(--mono);
  letter-spacing:normal;
  tab-size:4;
  white-space:pre-wrap;
  overflow-wrap:break-word;
  word-break:normal;
  font-variant-ligatures:none;
}
.editor textarea{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  resize:vertical;
  outline-offset:-2px;
  background:transparent;
  color:transparent;
  caret-color:#f8fafc;
}
.editor textarea::placeholder{color:#94a3b8}
.editor textarea::selection{background:#60a5fa66;color:transparent}
.editor .backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.editor-pattern .hl span{pointer-events:auto}   /* für elementsFromPoint (Hover über dem Muster) */
.editor .hl{position:absolute;left:0;top:0;color:var(--editor-ink);box-sizing:border-box}
.editor.is-plain textarea,.editor.is-typing textarea{color:var(--editor-ink)}
.editor.is-typing .backdrop{visibility:hidden}
.editor.is-plain .backdrop{display:none}
.editor.drag-over{box-shadow:inset 0 0 0 2px var(--blue)}

.editor-text textarea,.editor-text .hl{padding:16px 19px}
.editor-text textarea{min-height:34vh;height:40vh}

.pattern-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:stretch;
  background:var(--editor);
}
.slash{color:#64748b;font:600 18px/1 var(--mono);padding:13px 4px 0 14px;user-select:none}
.slash + .flags-input{margin-left:0}
.pattern-row .slash:nth-of-type(2){padding-left:4px;padding-right:0}
.editor-pattern textarea,.editor-pattern .hl{padding:11px 6px;font-size:15px;line-height:1.55}
.editor-pattern textarea{resize:none;overflow:hidden;min-height:46px}
.flags-input{
  width:calc(9ch + 18px);
  border:0;
  background:transparent;
  color:#fbbf24;
  font:600 15px/1.55 var(--mono);
  padding:11px 14px 11px 4px;
}

.flag-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:#f8fafc;
}
.flag{
  padding:4px 10px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:650;
  color:var(--muted);
}
.flag b{font-family:var(--mono);color:var(--ink);margin-right:3px}
.flag[aria-pressed="true"]{background:#eff6ff;border-color:#93c5fd;color:#1e3a8a}
.flag[aria-pressed="true"] b{color:var(--blue)}

.messages:empty{display:none}
.messages{padding:8px 14px;display:flex;flex-direction:column;gap:6px}
.msg{
  display:flex;
  gap:8px;
  align-items:flex-start;
  padding:7px 10px;
  border-radius:9px;
  font-size:13px;
  line-height:1.45;
}
.msg-error{background:var(--bad-bg);color:var(--bad)}
.msg-warn{background:var(--warn-bg);color:var(--warn)}
.msg-info{background:#f1f5f9;color:#334155}
.msg .icon{font-weight:800;flex:none}
.msg code{font-family:var(--mono);font-size:12px;background:#ffffffa8;border-radius:4px;padding:0 3px}
.msg[data-start]{cursor:default}

.status{font-size:13px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.status.is-error{color:var(--bad)}
.status.is-busy{color:var(--warn)}
.status.is-ok{color:var(--ok)}

/* Syntax-Farben im Musterfeld */
.t-g0{color:#7dd3fc}
.t-g1{color:#c4b5fd}
.t-g2{color:#86efac}
.t-g3{color:#fdba74}
.t-look{color:#f9a8d4}
.t-quant{color:#fcd34d}
.t-alt{color:#fb7185;font-weight:700}
.t-anchor{color:#fda4af}
.t-set{color:#5eead4}
.t-esc{color:#93c5fd}
.t-class{color:#fde68a}
.t-classop{color:#fbbf24}
.t-classchar{color:#e2e8f0}
.t-backref{color:#a5b4fc}
.t-warn{color:#fca5a5}
.p-error{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:#f87171;text-decoration-thickness:2px;text-underline-offset:3px}
.p-hint{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:#fbbf24;text-decoration-thickness:2px;text-underline-offset:3px}
.p-hover{background:#60a5fa55}

/* Treffer im Testtext */
.hl mark{color:inherit;border-radius:2px}
.hl .m0{background:#facc1540}
.hl .m1{background:#38bdf845}
.hl .is-current{box-shadow:0 0 0 2px #f8fafc;border-radius:2px}
.hl .g{box-shadow:inset 0 -2px 0 var(--gc)}
.hl .gc0{--gc:#f472b6}
.hl .gc1{--gc:#a78bfa}
.hl .gc2{--gc:#34d399}
.hl .gc3{--gc:#fb923c}
.hl .gc4{--gc:#60a5fa}
.hl .gc5{--gc:#facc15}
.hl .g.is-hover{background:#f8fafc38;box-shadow:inset 0 -3px 0 var(--gc)}
.hl .zl{position:relative}
.hl .zl::before{content:"";position:absolute;left:-1px;top:-2px;bottom:-2px;width:2px;background:#fbbf24;border-radius:1px}

.notice{
  padding:9px 14px;
  border-top:1px solid var(--line);
  background:var(--warn-bg);
  color:var(--warn);
  font-size:13px;
}

/* ---------- Raster ---------- */

.grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:17px;
  align-items:start;
}

.viewswitch{display:flex;gap:0}
.seg{
  border-radius:0;
  padding:6px 12px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}
.seg:first-child{border-radius:9px 0 0 9px}
.seg:last-child{border-radius:0 9px 9px 0;border-left:0}
.seg.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.seg.is-active:hover{border-color:var(--blue)}
.grid{margin-bottom:17px}
.grid .panel{margin-bottom:0}

.select{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
select{
  font:inherit;
  font-weight:650;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:4px 8px;
  cursor:pointer;
  max-width:100%;
}

/* ---------- Tabs ---------- */

.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{
  border:0;
  border-radius:9px;
  padding:7px 12px;
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  background:transparent;
}
.tab:hover{background:#f1f5f9;color:var(--ink)}
.tab[aria-selected="true"]{background:#eff6ff;color:var(--blue)}
.count{
  display:inline-block;
  min-width:20px;
  margin-left:3px;
  padding:0 6px;
  border-radius:999px;
  background:#e2e8f0;
  color:#334155;
  font-size:11.5px;
  font-weight:800;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.count:empty{display:none}
.count.is-ok{background:var(--ok-bg);color:var(--ok)}
.count.is-bad{background:var(--bad-bg);color:var(--bad)}
.tab[aria-selected="true"] .count{background:#dbeafe;color:#1e3a8a}

.tabpanel{min-height:0}
.side-panel .tabpanel{flex:1;overflow:auto;max-height:calc(40vh + 60px)}
.tabpanel:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* ---------- Trefferliste ---------- */

.matches{font-size:13px;transition:opacity .15s}
.matches.is-stale{opacity:.55}
.empty-state{padding:30px 16px;text-align:center;color:var(--muted);font-size:14px}
.match-summary{padding:9px 14px;color:var(--muted);border-bottom:1px solid var(--line);background:#f8fafc;font-size:12.5px}
.match-list{list-style:none;margin:0;padding:0}
.match{border-bottom:1px solid #eef2f6}
.match-btn{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:2px 10px;
  width:100%;
  padding:8px 14px;
  border:0;
  border-radius:0;
  background:transparent;
  text-align:left;
  font-weight:400;
}
.match-btn:hover{background:#f8fafc}
.match.is-current .match-btn{background:#eff6ff;box-shadow:inset 3px 0 0 var(--blue)}
.mi{grid-row:span 2;font:700 12px/1.9 var(--mono);color:var(--muted);min-width:24px}
.pos{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.val{font:13px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.val .ws{color:#94a3b8}
.val .sp{background:#e2e8f0;border-radius:2px}
.val .none{color:var(--muted);font-family:Inter,system-ui,sans-serif;font-style:italic}
.groups{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:12.5px}
.groups td{padding:2px 8px;vertical-align:top;border-top:1px solid #f1f5f9}
.groups td:first-child{padding-left:48px;width:1%;white-space:nowrap;color:var(--muted);font-weight:700}
.groups .gdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:var(--gc)}
.groups .gname{color:#475569;font-weight:650;width:1%;white-space:nowrap}
.groups .gpos{color:var(--muted);width:1%;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.gc0{--gc:#db2777}.gc1{--gc:#7c3aed}.gc2{--gc:#059669}.gc3{--gc:#ea580c}.gc4{--gc:#2563eb}.gc5{--gc:#ca8a04}
.more{display:block;margin:10px auto 14px}

.line-list{list-style:none;margin:0;padding:0;font:12.5px/1.6 var(--mono)}
.line-row{display:grid;grid-template-columns:52px minmax(0,1fr);border-bottom:1px solid #f1f5f9}
.line-row .ln{padding:2px 8px;text-align:right;color:#94a3b8;background:#f8fafc;border-right:1px solid var(--line);user-select:none}
.line-row .lt{padding:2px 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.line-row.hit .ln{color:var(--ok);font-weight:700;box-shadow:inset 3px 0 0 #10b981}
.line-row mark{background:#fef08a;color:inherit;border-radius:2px}

/* ---------- Erklärung ---------- */

.flag-info{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:#f8fafc}
.flag-info:empty{display:none}
.flag-info span{font-size:12px;color:#334155;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.flag-info b{font-family:var(--mono);color:var(--blue)}
.explain{list-style:none;margin:0;padding:6px 0 10px;font-size:13px}
.x-row{
  display:grid;
  grid-template-columns:10.5em minmax(0,1fr);
  gap:12px;
  padding:4px 14px;
  align-items:baseline;
  border-left:3px solid transparent;
}
.x-row:hover,.x-row.is-hover{background:#f1f5f9;border-left-color:#93c5fd}
.x-code{
  justify-self:start;
  font:12.5px/1.5 var(--mono);
  color:#0f172a;
  background:#f1f5f9;
  border-radius:5px;
  padding:0 5px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:pre;
}
.x-code:empty{background:transparent}
.x-row:hover .x-code,.x-row.is-hover .x-code{background:#e2e8f0}
.x-text{color:#1e293b;line-height:1.45}
.x-group .x-text{font-weight:700}
.x-group .x-code{color:#0369a1}
.x-look .x-code{color:#be185d}
.x-alt .x-text{color:var(--muted);font-weight:700}
.x-alt .x-code{color:#e11d48;font-weight:700}
.x-class .x-code{color:#a16207}
.x-set .x-code{color:#0f766e}
.x-anchor .x-code{color:#be123c}
.x-backref .x-code{color:#4338ca}
.d1{padding-left:34px}.d2{padding-left:54px}.d3{padding-left:74px}.d4{padding-left:94px}.d5{padding-left:114px}.d6{padding-left:134px}.d7{padding-left:154px}.d8{padding-left:174px}

/* ---------- Werkzeuge unten ---------- */

.tools-panel .tabpanel{padding:0 0 14px}
.tool-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px 0}
.tool-row > label{font-size:13px;font-weight:700;color:#334155}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.row-actions button{padding:6px 11px;font-size:13px}
.editor-small{flex:1;min-width:200px;border-radius:10px;overflow:hidden}
.editor-small textarea{
  color:var(--editor-ink);
  padding:8px 12px;
  resize:none;
  overflow:hidden;
  min-height:38px;
  font:14px/1.55 var(--mono);
}
.help{margin:8px 14px 0;font-size:12.5px;color:var(--muted)}
.help code{font-family:var(--mono);background:#f1f5f9;border-radius:4px;padding:0 4px;color:#0f172a}
.info-line{margin:8px 14px 0;font-size:13px;color:var(--muted)}
.tool-row .info-line{margin:0;flex:1}
.info-line strong{color:var(--ink)}
.output{
  margin:10px 14px 0;
  padding:14px 16px;
  max-height:50vh;
  overflow:auto;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:12px;
  font:13px/1.6 var(--mono);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.output:empty::before{content:"–";color:var(--muted)}
.output mark{background:#bbf7d0;color:#064e3b;border-radius:3px;box-shadow:0 0 0 1px #86efac}
.output mark.empty-repl{display:inline-block;width:2px;min-height:1em;padding:0;background:#10b981;vertical-align:text-bottom}

.parts{list-style:none;margin:10px 14px 0;padding:0;max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:12px;counter-reset:none}
.part{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:5px 12px;border-bottom:1px solid #f1f5f9;font-size:13px}
.part:last-child{border-bottom:0}
.part .pi{font:700 12px/1.6 var(--mono);color:var(--muted);min-width:28px;text-align:right}
.part .val{font-size:13px}
.part.is-group{background:#faf5ff}
.part.is-group .pi{color:#7c3aed;font-family:Inter,system-ui,sans-serif;font-size:11.5px}

.checkbox{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:#334155}
.checkbox input{width:15px;height:15px;accent-color:var(--blue)}

.tests-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 14px 0}
.test-label{display:block;font-size:13px;font-weight:700;margin-bottom:5px;color:#334155}
.test-label small{font-weight:500;color:var(--muted);margin-left:6px}
.test-editor{display:grid;grid-template-columns:34px minmax(0,1fr);border-radius:12px;overflow:hidden;background:var(--editor);height:220px}
.gutter{overflow:hidden;background:#111c33;border-right:1px solid #1e293b;padding:10px 0;font:13px/1.65 var(--mono)}
.gutter div{height:21.45px;text-align:center;color:#475569;font-weight:800}
.gutter .pass{color:#34d399}
.gutter .fail{color:#f87171}
.test-editor textarea{
  display:block;width:100%;height:100%;border:0;resize:none;
  padding:10px 12px;background:transparent;color:var(--editor-ink);caret-color:#f8fafc;
  font:13px/1.65 var(--mono);white-space:pre;overflow:auto;
}
.test-editor textarea:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}

.code-row{align-items:flex-start}
.lang-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.lang{
  padding:5px 11px;
  border-radius:999px;
  font-size:13px;
  font-weight:650;
  color:#334155;
}
.lang[aria-checked="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.lang .st{margin-left:5px;font-weight:800}
.lang .st-ok{color:#059669}
.lang .st-warn{color:#b45309}
.lang .st-error{color:#dc2626}
.lang[aria-checked="true"] .st{color:#fff}
.code-notes{list-style:none;margin:10px 14px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.code-notes:empty{display:none}
.code-wrap{position:relative;margin:10px 14px 0}
.code{
  margin:0;
  padding:16px 18px;
  max-height:60vh;
  overflow:auto;
  background:var(--editor);
  color:var(--editor-ink);
  border-radius:12px;
  font:13px/1.6 var(--mono);
  white-space:pre;
  tab-size:4;
}
.code-copy{position:absolute;right:10px;top:10px;padding:5px 10px;font-size:12.5px;background:#1e293b;color:#e2e8f0;border-color:#334155}
.code-copy:hover{border-color:#60a5fa}

/* ---------- Vorlagen ---------- */

.templates{
  width:min(760px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  padding:0;
  border:1px solid var(--line);
  border-radius:17px;
  box-shadow:0 20px 60px #0f172a40;
  color:var(--ink);
}
.templates::backdrop{background:#0f172a66}
.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.dialog-head h2{margin:0;font-size:18px}
.close{width:34px;height:34px;padding:0;font-size:20px;line-height:1;border-radius:9px}
.dialog-option{padding:10px 18px 0}
.template-list{padding:6px 18px 18px}
.template-cat{margin:14px 0 6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.template-btn{
  display:block;
  width:100%;
  margin-bottom:6px;
  padding:9px 12px;
  text-align:left;
  font-weight:400;
}
.template-btn strong{display:block;font-size:14.5px}
.template-btn span{display:block;font-size:12.5px;color:var(--muted)}
.template-btn code{display:block;margin-top:4px;font:12px/1.4 var(--mono);color:#0369a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:1100px){
  .grid{grid-template-columns:1fr}
  .side-panel .tabpanel{max-height:60vh}
}

@media(max-width:760px){
  header{align-items:flex-start;flex-direction:column}
  .tests-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .app{padding:14px}
  .lang-chips{flex-basis:100%}
  .slash{padding-left:10px}
  .flags-input{width:calc(6ch + 14px);padding-right:10px}
  .flag{font-size:12px;padding:4px 8px}
  .editor-text textarea{height:34vh}
  .groups td:first-child{padding-left:14px}
  .x-row{grid-template-columns:1fr;gap:2px}
  .x-code{max-width:100%}
  .d1{padding-left:26px}.d2{padding-left:38px}.d3{padding-left:50px}.d4,.d5,.d6,.d7,.d8{padding-left:62px}
  .line-row{grid-template-columns:40px minmax(0,1fr)}
}