:root{
  color-scheme:light;
  --bg:#f5f5f7;
  --surface:#ffffff;
  --surface-alt:#fafafa;
  --surface-soft:#f3f3f6;
  --text:#1d1d1f;
  --link:#1d1d1f;
  --muted:#6e6e73;
  --border:#dedee3;
  --border-soft:#ececf0;
  --input-border:#b8b8bf;
  --input-bg:#ffffff;
  --button:#111111;
  --button-text:#ffffff;
  --secondary:#e8e8ed;
  --secondary-text:#111111;
  --activity:#f1f1f4;
  --activity-text:#111111;
  --code:#f1f1f4;
  --table-head:#f5f5f7;
  --shadow:rgba(0,0,0,.05);
  --danger:#7d1b1b;
  --error-bg:#ffe6e6;
  --error-border:#e9aaaa;
  --success-bg:#e9f8e9;
  --success-border:#b6deb6;
  --plus:#16733a;
  --minus:#a32626;
  --badge-bg:#e7f5ea;
  --badge-text:#12632c;
  --focus:#4c8bf5;
  --footer-bg:#eeeeF2;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;
  --surface:#0d0d0f;
  --surface-alt:#121215;
  --surface-soft:#18181c;
  --text:#f5f5f7;
  --link:#f5f5f7;
  --muted:#a8a8b0;
  --border:#303037;
  --border-soft:#26262c;
  --input-border:#4a4a52;
  --input-bg:#111114;
  --button:#f5f5f7;
  --button-text:#0b0b0d;
  --secondary:#25252b;
  --secondary-text:#f5f5f7;
  --activity:#19191d;
  --activity-text:#f5f5f7;
  --code:#19191d;
  --table-head:#18181c;
  --shadow:rgba(0,0,0,.55);
  --danger:#922f35;
  --error-bg:#351b1d;
  --error-border:#73363a;
  --success-bg:#152d1d;
  --success-border:#315f41;
  --plus:#65db98;
  --minus:#ff8585;
  --badge-bg:#17301f;
  --badge-text:#83e5a9;
  --focus:#8eb4ff;
  --footer-bg:#08080a;
}

*{box-sizing:border-box}
html{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-color:var(--bg);
  color:var(--text);
  min-height:100%;
  transition:background-color .15s ease,color .15s ease;
}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background-color:var(--bg);
  color:var(--text);
}
body,main,header,footer,.card,.rule-edit-card,input,select,textarea,button,.button{
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
a{color:var(--link)}
h1,h2,h3,h4,h5,h6,p,li,dt,dd,strong,b,label,legend{color:inherit}
header{
  position:sticky;
  top:0;
  z-index:5;
  flex:0 0 auto;
  background:var(--surface);
  color:var(--text);
  border-bottom:1px solid var(--border);
  padding:.9rem max(1rem,calc((100vw - 1100px)/2));
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 1px 8px var(--shadow);
}
header a{text-decoration:none;color:var(--link)}
.brand{font-weight:800}
nav{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
main{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:1rem;
  flex:1 0 auto;
  background:transparent;
  color:var(--text);
}
.card{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.2rem;
  margin-bottom:1rem;
  box-shadow:0 2px 12px var(--shadow);
}
.narrow{max-width:560px;margin:3rem auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.hero{display:flex;justify-content:space-between;align-items:center}
.hero h1{font-size:3rem;margin:.25rem 0}
label{display:block;font-weight:650;margin:.8rem 0}
input,select,textarea{
  width:100%;
  padding:.75rem;
  border:1px solid var(--input-border);
  border-radius:10px;
  font:inherit;
  margin-top:.3rem;
  background:var(--input-bg);
  color:var(--text);
  caret-color:var(--text);
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
select option{background:var(--input-bg);color:var(--text)}
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset;
  box-shadow:0 0 0 1000px var(--input-bg) inset;
  caret-color:var(--text);
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--focus)}
input:focus,select:focus,textarea:focus,button:focus-visible,.button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button,.button{
  display:inline-block;
  border:0;
  border-radius:10px;
  padding:.72rem 1rem;
  font:inherit;
  font-weight:750;
  background:var(--button);
  color:var(--button-text);
  cursor:pointer;
  text-decoration:none;
}
.secondary{background:var(--secondary);color:var(--secondary-text)}
.danger{background:var(--danger);color:#fff}
.buttons{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0}
.check{display:flex;gap:.7rem;align-items:center;border-bottom:1px solid var(--border-soft);padding:.65rem 0;margin:0}
.check input{width:auto;margin:0}
.activity{width:100%;display:grid;grid-template-columns:1fr auto;text-align:left;margin:.5rem 0;background:var(--activity);color:var(--activity-text)}
.activity small{display:block;color:var(--muted);font-weight:500}
.activity b{grid-column:2;grid-row:1/3;align-self:center}
.muted,small{color:var(--muted)}
.error{background:var(--error-bg);border:1px solid var(--error-border);padding:.8rem;border-radius:10px;color:var(--text)}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--border-soft)}
.plus{color:var(--plus)}
.minus{color:var(--minus)}
.rule-columns{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.rules li{margin:.35rem 0}

textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.35;resize:vertical}
.rules-toolbar{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between}
.rules-toolbar h1{margin-top:0}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rule-document{color:var(--text)}
.rule-document h1{font-size:1.7rem}
.rule-document h2{margin-top:1.7rem;border-top:1px solid var(--border-soft);padding-top:1rem}
.rule-table-wrap{overflow-x:auto;margin:.8rem 0 1.2rem}
.rule-table{border-collapse:collapse;width:100%;min-width:420px;color:var(--text)}
.rule-table th,.rule-table td{border:1px solid var(--border);padding:.55rem .65rem;text-align:left;vertical-align:top;background:var(--surface)}
.rule-table th{background:var(--table-head)}
.badge{display:inline-block;background:var(--badge-bg);color:var(--badge-text);border-radius:999px;padding:.15rem .45rem;font-size:.75rem;font-weight:800}
.success{background:var(--success-bg);border:1px solid var(--success-border);padding:.8rem;border-radius:10px;color:var(--text)}
code{background:var(--code);color:var(--text);padding:.1rem .3rem;border-radius:4px}

/* structured rules editor */
.language-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.rule-edit-card{background:var(--surface-alt);color:var(--text);border:1px solid var(--border);border-radius:12px;margin:.6rem 0;overflow:hidden}
.rule-edit-card summary{cursor:pointer;padding:.8rem 1rem;background:var(--surface-soft);color:var(--text);list-style:none}
.rule-edit-card summary::-webkit-details-marker{display:none}
.rule-edit-card[open] summary{border-bottom:1px solid var(--border)}
.rule-edit-body{padding:.8rem 1rem;background:var(--surface-alt);color:var(--text)}
.rule-edit-body textarea{min-height:6rem;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.45}
.rule-edit-body input{font-weight:700}
.editor-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;background:var(--surface);color:var(--text);padding:.75rem 0 1rem}
.sticky-actions{position:sticky;top:62px;z-index:4;border-bottom:1px solid var(--border)}
.editor-actions select{width:auto;margin:0}
.inline-check{display:flex;gap:.45rem;align-items:center;margin:0;font-weight:600}
.inline-check input{width:auto;margin:0}
.translator-settings{padding-top:.8rem}
.translator-settings details{margin:0}
button:disabled{opacity:.45;cursor:not-allowed}

/* compact theme selector lives at the bottom, never in the header */
.app-footer{
  flex:0 0 auto;
  width:100%;
  border-top:1px solid var(--border);
  background:var(--footer-bg);
  color:var(--muted);
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.45rem;
}
.theme-control{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
}
.theme-control select{
  width:auto;
  min-width:7.8rem;
  margin:0;
  padding:.35rem 1.8rem .35rem .55rem;
  border-radius:8px;
  font-size:.82rem;
  font-weight:600;
  background-color:var(--input-bg);
  color:var(--text);
}

@media(max-width:900px){
  .editor-grid,.language-editor-grid{grid-template-columns:1fr}
  .rules-toolbar{flex-direction:column}
  .sticky-actions{position:static}
}
@media(max-width:760px){
  header,.hero{align-items:flex-start;flex-direction:column}
  .rule-columns,.row{grid-template-columns:1fr}
  .hero h1{font-size:2.4rem}
  nav{width:100%}
  .footer-inner{justify-content:center}
}


/* Web Push controls: compact, footer-only */
.push-controls{display:flex;align-items:center;gap:.4rem;margin-right:auto;min-width:0}
.footer-mini-button{padding:.36rem .58rem;border-radius:8px;font-size:.78rem;line-height:1.2;font-weight:650;white-space:nowrap}
.push-status{color:var(--muted);font-size:.75rem;max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.footer-inner{align-items:flex-end;flex-wrap:wrap}.push-controls{width:100%;order:1}.theme-control{order:2;margin-left:auto}.push-status{max-width:12rem}}