:root[data-theme='dark'] {
  --bg:#0b0b0b; --panel:#111; --border:#222; --text:#eaeaea; --muted:#9aa0a6; --accent:#007aff;
  --code-bg:#0e0e0e;
  /* error colors (dark) */
  --error-bg:#140909; --error-border:#3b0e0e; --error-text:#ffbdbd;
}

:root[data-theme='light']{
  --bg:#f7f7f8; --panel:#ffffff; --border:#e5e7eb; --text:#0b0b0b; --muted:#6b7280;
  --accent:#3b82f6; --accent-2:#2563eb; --ok:#16a34a; --warn:#d97706; --err:#dc2626;
  --code-bg:#f3f4f6; --input:#11182708; --shadow:0 10px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  /* error colors (light) */
  --error-bg:rgba(220,38,38,.06); --error-border:rgba(220,38,38,.30); --error-text:#991b1b;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) { color-scheme: light; }
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) { color-scheme: dark; }
}
/* ensure scrollbars & form controls follow theme where supported */
:root { color-scheme: light dark; }


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.5;
}
.container{max-width:1100px; margin:40px auto; padding:0 20px}
.header h1{font-size:28px; margin:0 0 6px}
.subtitle{color:var(--muted); margin:0 0 24px}
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:16px;
}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }
.label{display:block; font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}

.controls{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:12px}
.controls .left{display:flex; gap:16px; align-items:center}
.controls .right{display:flex; gap:12px; align-items:center}
.checkbox{display:flex; align-items:center; gap:8px; color:var(--muted)}

button{
  appearance:none; border:none; background:var(--accent); color:#fff;
  padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer;
}

.result-head{ display:flex; align-items:center; justify-content:space-between; }

/* base code block */
pre{
  margin:0; padding:12px;
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:10px; overflow:auto;
}

/* unified result container */
.result{
  background: var(--panel);
  border: 1px solid var(--border);
}

/* theme-aware error container */
.error{
  background: var(--error-bg);
  border-color: var(--error-border);
}
.error pre{
  background: var(--panel);
  color: var(--error-text);
}

/* Watermark */
.watermark{
  position: fixed; right:16px; bottom:16px; z-index: 9999; opacity:.75;
  font-size:12px; letter-spacing:.02em;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 10px; user-select: none;
}
.watermark a, .watermark span{ color: var(--muted); text-decoration: none; }
.watermark a:hover{ color: var(--text); opacity: 1; }

/* Monaco containers */
.editor-wrap { position: relative; }
.m-editor{
  width: 100%;
  height: 360px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--code-bg);
}

/* не даём aria-контейнеру перекрывать страницу */
.monaco-aria-container{
  position: fixed !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  left: -9999px !important;
  top: -9999px !important;
  pointer-events: none !important;
}

/* всё внутри редактора должно принимать события и выделяться */
.monaco-editor, .monaco-editor *{
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* скрытое textarea моноки, которое ловит клавиатуру */
.monaco-editor .inputarea{
  pointer-events: auto !important;
  z-index: 100 !important;
  opacity: 0; /* оно по дизайну невидимое, оставляем так */
}

/* контейнер редактора точно кликабелен */
.m-editor{
  position: relative !important;
  pointer-events: auto !important;
}

/* на всякий, полностью убираем любые оверлеи, если где-то остались */
.editor-toolbar{ display: none !important; }

.editor-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 8px;
}
.head-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:24px; padding:0;
  border:1px solid var(--border); border-radius:6px;
  background:rgba(255,255,255,.04); color:var(--muted);
  cursor:pointer;
}
.icon-btn:hover{ background:rgba(255,255,255,.08); color:var(--text); }
.icon-btn svg{ width:14px; height:14px; fill:currentColor; }

#onlineBadge{
  padding:2px 8px; border:1px solid var(--border);
  border-radius:999px; background:rgba(255,255,255,.03);
}

.theme-toggle{
  position:fixed; top:16px; right:16px;
  z-index: 10001; pointer-events: auto;
}
.theme-toggle button{ pointer-events: auto; }
.theme-toggle button{
  background:var(--panel); border:1px solid var(--border); padding:8px 12px; border-radius:10px;
  box-shadow: var(--shadow); cursor:pointer; font-size:16px; line-height:1;
}
.theme-toggle button:hover{ transform: translateY(-1px); }


/* === Pain Level badge === */
.pain-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border:1px solid var(--border);
  border-radius:999px; background:rgba(255,255,255,.03);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px; letter-spacing:.01em; color:var(--muted);
}
.pain-badge .score{ font-weight:700; color:var(--text); }
.pain-badge .reasons{ opacity:.85; }
.pain-badge[hidden]{ display:none; }

/* Result block must show raw text without ellipsis */
pre#out {
  white-space: pre-wrap;       /* переносы как в исходном тексте */
  overflow: auto;              /* скролл при необходимости */
  text-overflow: clip;         /* точно без … */
}

/* На случай, если где-то был псевдоэлемент */
pre#out::after {
  content: none !important;
}

/* === Pain Level badge === */
.pain-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border:1px solid var(--border);
  border-radius:999px; background:rgba(255,255,255,.03);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px; letter-spacing:.01em; color:var(--muted);
}
.pain-badge .score{ font-weight:700; color:var(--text); }
.pain-badge[hidden]{ display:none; }