/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  /* Surfaces */
  --bg:            #F0F2F8;
  --surface:       #FFFFFF;
  --surface-2:     #F7F8FC;
  --surface-3:     #EEF0F8;

  /* Borders */
  --border:        #DDE0F0;
  --border-light:  #E8EAF4;

  /* Text */
  --text-1:        #17171F;
  --text-2:        #52526A;
  --text-3:        #8C8CA8;
  --text-4:        #B4B4CC;

  /* Accent — indigo-violet */
  --accent:        #5B50E8;
  --accent-hover:  #4A40D4;
  --accent-light:  #EEEEFF;
  --accent-text:   #4340C8;

  /* Status */
  --ok-bg:   #F0FDF4; --ok-text:  #15803D; --ok-border: #BBF7D0;
  --warn-bg: #FFFBEB; --warn-text: #A16207; --warn-border: #FDE68A;
  --err-bg:  #FEF2F2; --err-text:  #DC2626; --err-border: #FECACA;
  --info-bg: #EFF6FF; --info-text: #1D4ED8; --info-border: #BFDBFE;

  /* Sidebar (dark shell) */
  --sb:          #0D0D14;
  --sb-s:        #16161F;
  --sb-s2:       #1F1F2C;
  --sb-border:   #28283C;
  --sb-text:     #6868A0;
  --sb-text-2:   #A0A0C0;
  --sb-active:   #1A1A28;
  --sb-accent:   var(--accent);

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(30,20,80,.07), 0 0 0 1px rgba(30,20,80,.05);
  --shadow-sm: 0 2px 8px rgba(30,20,80,.09), 0 0 0 1px rgba(30,20,80,.05);
  --shadow-md: 0 8px 24px rgba(30,20,80,.13), 0 2px 6px rgba(30,20,80,.06);
  --shadow-lg: 0 20px 60px rgba(30,20,80,.18), 0 4px 14px rgba(30,20,80,.08);

  /* Radius */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

/* ══════════════════════════════════════════
   DARK THEME OVERRIDES
══════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:            #0B0B14;
  --surface:       #13131E;
  --surface-2:     #1A1A28;
  --surface-3:     #20203A;
  --border:        #28283C;
  --border-light:  #222236;
  --text-1:        #E8E8F8;
  --text-2:        #8888B8;
  --text-3:        #50508C;
  --text-4:        #303060;
  --accent:        #8070FF;
  --accent-hover:  #6E5EF8;
  --accent-light:  #1C1A38;
  --accent-text:   #A898FF;
  --ok-bg:   #0D1F14; --ok-text:  #4ADE80; --ok-border: #166534;
  --warn-bg: #1C1600; --warn-text: #FCD34D; --warn-border: #78350F;
  --err-bg:  #1F0A0A; --err-text:  #F87171; --err-border: #7F1D1D;
  --info-bg: #0A1628; --info-text: #60A5FA; --info-border: #1E3A5F;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.5);
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Universal fluid rules ── */
img, video, svg { max-width: 100%; height: auto; }
pre, code { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
input, textarea, select { max-width: 100%; }

/* ── Layout ── */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
  width: 248px;
  background: var(--sb);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  border-right: 1px solid var(--sb-border);
}

.sidebar.sidebar-open {
  transform: translateX(0);
}

/* Toggle button — thin strip on left edge */
.sidebar-toggle-btn {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  width: 14px;
  height: 60px;
  border: none;
  border-radius: 0 7px 7px 0;
  background: var(--sb-s);
  color: var(--sb-text);
  cursor: pointer;
  font-size: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--t-fast), color var(--t-fast);
  box-shadow: 2px 0 6px rgba(0,0,0,.25);
}

.sidebar-toggle-btn:hover {
  background: var(--sb-s2);
  color: var(--sb-text-2);
}

.sidebar-logo {
  padding: 1.4rem 1rem 1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sb-text);
  border-bottom: 1px solid var(--sb-border);
}

.sidebar-section {
  padding: .85rem .5rem .25rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sb-text);
  padding-left: 1rem;
  opacity: .7;
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--sb-text-2);
  padding: .45rem .75rem;
  margin: 1px .5rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: .875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .14s, color .14s;
}

.sidebar a:hover {
  background: var(--sb-s2);
  color: #D0D0EC;
}

.sidebar a.active {
  background: var(--sb-active);
  color: #EEEEFF;
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--sb-accent);
}

.sidebar a.brand-item {
  font-size: .825rem;
  padding-left: 1.25rem;
  color: var(--sb-text);
}

.sidebar a.brand-item.active {
  background: var(--sb-s);
  color: var(--sb-text-2);
  box-shadow: none;
}

.sidebar hr {
  border: none;
  border-top: 1px solid var(--sb-border);
  margin: .5rem 0;
}

.sidebar-spacer { flex: 1; }

.sidebar-bottom {
  padding: .5rem;
  border-top: 1px solid var(--sb-border);
}

/* Theme toggle */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .45rem .75rem;
  margin: 1px .5rem;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--sb-text);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.theme-toggle-btn:hover {
  background: var(--sb-s2);
  color: var(--sb-text-2);
}

/* ── Content ── */
.content {
  flex: 1;
  padding: 2.25rem 2.75rem;
  min-width: 0;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

/* Full-width pages (pipeline settings) — always dark, no padding */
.content:has(.pt-wrap) {
  padding: 0;
  max-width: none;
  background: #0D0D14;
}

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.page-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -.03em;
}

/* ── Card ── */
.card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1rem;
}

.card-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
}

/* ── Form ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.25rem;
}

.form-grid .full { grid-column: 1 / -1; }

.field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.field label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .01em;
}

input, textarea, select {
  width: 100%;
  padding: .5rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .875rem;
  color: var(--text-1);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,80,232,.12);
}

textarea { resize: vertical; min-height: 90px; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .48rem 1.05rem;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background .14s, opacity .14s, box-shadow .14s;
  text-decoration: none;
  letter-spacing: .005em;
}

.btn:disabled { opacity: .45; cursor: default; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(91,80,232,.35);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 3px 8px rgba(91,80,232,.4); }

.btn-secondary {
  background: var(--surface);
  color: var(--text-2);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-3); border-color: #C8C8E0; }

.btn-danger {
  background: var(--err-bg);
  color: var(--err-text);
  border: 1.5px solid var(--err-border);
}
.btn-danger:hover { background: #FEE2E2; }

.btn-ghost {
  background: transparent;
  color: var(--text-3);
  padding: .35rem .6rem;
  font-size: .8rem;
}
.btn-ghost:hover { background: var(--surface-3); color: var(--text-1); }

.btn-sm {
  padding: .3rem .65rem;
  font-size: .8rem;
}

/* ── Table ── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

th {
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: .5rem .75rem;
  border-bottom: 1.5px solid var(--border-light);
}

td {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-2);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-2); }

td a { color: var(--accent); text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }

/* ── Tags / chips ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--accent-light);
  color: var(--accent-text);
  border-radius: 100px;
  padding: .15rem .6rem;
  font-size: .78rem;
  font-weight: 500;
}

.chip .del {
  cursor: pointer;
  opacity: .6;
  font-size: .9em;
  line-height: 1;
}
.chip .del:hover { opacity: 1; }

/* ── Tags (words) ── */
.tag {
  display: inline-block;
  background: var(--surface-3);
  color: var(--text-2);
  padding: .15rem .6rem;
  border-radius: var(--r-xs);
  font-size: .8rem;
  margin: 2px;
}
.tag .del { cursor: pointer; color: var(--err-text); margin-left: .25rem; }

/* ── Rule sets ── */
.rule-set {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.25rem;
  margin-bottom: .75rem;
  transition: opacity .15s;
  box-shadow: var(--shadow-xs);
}
.rule-set.disabled { opacity: .45; }

.rule-set-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.rule-set-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-1);
}

.rule-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--border-light);
}

.rule-row:last-child { border-bottom: none; }

.rule-row label {
  flex: 1;
  font-size: .85rem;
  color: var(--text-2);
  margin: 0;
}

/* ── Post cards ── */
.post-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 1.25rem;
  margin-bottom: .75rem;
  box-shadow: var(--shadow-sm);
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.post-meta-info {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.badge-approved   { background: var(--ok-bg);   color: var(--ok-text); }
.badge-pending    { background: var(--warn-bg);  color: var(--warn-text); }
.badge-default    { background: var(--surface-3); color: var(--text-3); }
.badge-failed     { background: var(--err-bg);   color: var(--err-text); }
.badge-collecting { background: var(--info-bg);  color: var(--info-text); }

.post-text {
  font-size: .875rem;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: .875rem;
  border: 1px solid var(--border-light);
}

.post-source {
  margin-top: .75rem;
  font-size: .8rem;
  color: var(--text-3);
}

/* ── Login ── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-md);
}

.login-card h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .25rem;
  letter-spacing: -.02em;
}

.login-card .subtitle {
  font-size: .875rem;
  color: var(--text-3);
  margin-bottom: 1.75rem;
}

.login-card .field { margin-bottom: .875rem; }

.login-hint {
  margin-top: 1.25rem;
  font-size: .8rem;
  color: var(--text-4);
  text-align: center;
  line-height: 1.5;
}

/* ── Checkbox toggle ── */
.toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 100px;
  transition: background .2s;
  cursor: pointer;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  left: 2.5px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateY(-50%) translateX(14px); }

/* ── Property sheet ── */
.prop-section {
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 1rem;
}

.prop-section-title {
  padding: .6rem 1rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-light);
}

.prop-row {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid var(--border-light);
  min-height: 42px;
  cursor: default;
  transition: background .1s;
}

.prop-row:last-child { border-bottom: none; }
.prop-row:hover { background: var(--surface-2); }
.prop-row.editing { background: var(--accent-light); cursor: default; }

.prop-label {
  width: 180px;
  flex-shrink: 0;
  padding: .7rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-3);
  align-self: flex-start;
  padding-top: .85rem;
}

.prop-value {
  flex: 1;
  padding: .7rem .75rem .7rem .25rem;
  font-size: .875rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  cursor: text;
}

.prop-value-text {
  flex: 1;
  white-space: pre-wrap;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prop-value-text a { color: var(--accent); text-decoration: none; }
.prop-value-text a:hover { text-decoration: underline; }

.prop-value-empty {
  color: var(--text-4);
  font-size: .825rem;
  font-style: italic;
  flex: 1;
}

.prop-edit-icon {
  opacity: 0;
  color: var(--text-4);
  font-size: .8rem;
  flex-shrink: 0;
  transition: opacity .15s;
}

.prop-row:hover .prop-edit-icon { opacity: 1; }

.prop-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  color: var(--text-1);
  padding: 0 0 0 .4rem;
  min-width: 0;
}

.prop-text-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: .35rem .6rem;
  font-size: .875rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text-1);
  outline: none;
  box-sizing: border-box;
}
.prop-text-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,80,232,.1);
}

.prop-value.editing-input {
  background: var(--accent-light);
  border-radius: var(--r-sm);
  padding: .4rem .75rem;
  gap: .5rem;
}

.prop-input select { font: inherit; border: none; background: transparent; outline: none; }

.prop-actions { display: flex; gap: .2rem; flex-shrink: 0; }

.prop-btn-ok {
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--r-xs);
  padding: .2rem .55rem; font-size: .78rem;
  cursor: pointer; font-weight: 600;
}
.prop-btn-ok:hover { background: var(--accent-hover); }
.prop-btn-ok:disabled { opacity: .5; }

.prop-btn-cancel {
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: .2rem .55rem; font-size: .78rem; cursor: pointer;
}
.prop-btn-cancel:hover { background: var(--border); }

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,20,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  animation: fade-in .15s ease;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  width: 100%;
  max-width: 580px;
  margin: 1rem;
  box-shadow: var(--shadow-lg);
  animation: modal-in .18s cubic-bezier(.22,.68,0,1.2);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(.96) translateY(-10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}

.modal-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
}

/* ── Property sheet: sub-rows & groups ── */
.prop-group-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  min-height: 38px;
}

.prop-subrow {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  min-height: 36px;
  background: var(--surface);
  transition: background .1s;
}

.prop-subrow:last-child { border-bottom: none; }
.prop-subrow:hover { background: var(--surface-2); }
.prop-subrow.editing { background: var(--accent-light); }

.prop-sublabel {
  width: 180px;
  flex-shrink: 0;
  padding: .5rem .75rem .5rem 2.25rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.prop-sublabel-first {
  padding-left: 1rem;
}

.prop-label-with-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prop-subvalue {
  flex: 1;
  padding: .5rem .5rem .5rem .25rem;
  font-size: .875rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prop-subvalue a { color: var(--accent); text-decoration: none; }
.prop-subvalue a:hover { text-decoration: underline; }

.prop-subdelete {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-4);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .75rem;
  flex-shrink: 0;
  transition: color .15s;
}
.prop-subdelete:hover { color: var(--err-text); }

.prop-label-btns {
  display: flex;
  gap: .25rem;
  flex-shrink: 0;
  margin-left: auto;
}

.prop-edit-btn {
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: var(--r-sm);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: background .15s, color .15s, opacity .15s;
}
.prop-edit-btn:hover { background: var(--accent); color: #fff; }
.prop-subrow:hover .prop-edit-btn,
.prop-row:hover .prop-edit-btn { opacity: 1; pointer-events: auto; }

.prop-add-btn {
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: var(--r-sm);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.prop-add-btn:hover { background: var(--accent); color: #fff; }
.prop-subrow:hover .prop-add-btn,
.prop-row:hover .prop-add-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Строка с кнопкой «Добавить» под списком */
.prop-add-row {
  background: transparent !important;
  min-height: auto;
}

/* ── Example texts ── */
.example-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}

.example-text {
  font-size: .825rem;
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--text-2);
}

.chip-green { background: var(--ok-bg);  color: var(--ok-text); }
.chip-gray  { background: var(--surface-3); color: var(--text-3); }

/* ── Schedule editor ── */
.sched-grid { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }

.sched-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .2rem 0;
}

.sched-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 170px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: .875rem;
  color: var(--text-2);
}
.sched-check input[type=checkbox] { width: auto; accent-color: var(--accent); }

.sched-times {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.sched-times input[type=time] {
  width: 96px;
  padding: .28rem .5rem;
  font-size: .85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
}
.sched-sep { color: var(--text-3); font-size: .9rem; }
.sched-disabled { opacity: .3; }
.sched-disabled input { cursor: not-allowed; }

/* ── Details / accordion ── */
details summary {
  font-size: .8rem;
  color: var(--accent);
  cursor: pointer;
  padding: .35rem 0;
  user-select: none;
}
details summary:hover { color: var(--accent-hover); }
details[open] summary { margin-bottom: .5rem; }

/* ── Divider ── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

/* ── Empty state ── */
.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-3);
  font-size: .9rem;
}

/* ── Utility ── */
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-sm { gap: .5rem; }
.gap { gap: .75rem; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.text-sm { font-size: .8rem; }
.text-muted { color: var(--text-3); }
.text-danger { color: var(--err-text); }

/* ── System prompt block ── */
.sysprompt-wrap {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
}
.sysprompt-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .75rem 1rem;
  background: var(--surface-2);
  border: none;
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-3);
  cursor: pointer;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sysprompt-toggle:hover { background: var(--surface-3); }
.sysprompt-arrow { font-size: .7rem; }
.sysprompt-pre {
  margin: 0;
  padding: 1rem;
  font-size: .78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Post create form ── */
.post-create-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  max-width: 720px;
}
.format-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.format-tab {
  padding: .35rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: .85rem;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.format-tab.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* ── Pipeline stages ── */
.stages-wrap, .stages-summary {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.25rem;
  max-width: 720px;
}
.stage-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .875rem;
}
.stage-check { color: #22C55E; font-weight: 700; flex-shrink: 0; }
.stage-label { color: var(--text-2); }
.stage-line-revise .stage-label { color: #A78BFA; }
.stage-line-revise .stage-pre { color: #C4B5FD; }
.stage-details { margin-left: .25rem; }
.stage-details summary {
  font-size: .78rem;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.stage-details summary::-webkit-details-marker { display: none; }
.stage-pre {
  margin: .35rem 0 0 0;
  padding: .6rem .8rem;
  background: var(--surface-3);
  border-radius: var(--r-sm);
  font-size: .78rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-2);
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
}
.stage-spinner {
  font-size: .85rem;
  color: var(--text-3);
  animation: pulse 1.2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Post result ── */
.post-result {
  margin: .5rem 1.25rem 0;
  padding: 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  max-width: 720px;
  box-shadow: var(--shadow-xs);
}
.post-result-text {
  white-space: pre-wrap;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text-1);
}
.review-actions {
  display: flex;
  gap: .75rem;
  padding: .75rem 1.25rem;
  flex-wrap: wrap;
}
.revise-panel {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 0 1.25rem 1rem;
  max-width: 720px;
}
.revise-panel textarea {
  resize: vertical;
  min-height: 70px;
}
.revise-mode-toggle {
  display: flex;
  gap: .25rem;
  background: var(--surface-3);
  border-radius: .375rem;
  padding: .2rem;
  width: fit-content;
}
.revise-mode-btn {
  background: transparent;
  border: none;
  border-radius: .25rem;
  color: var(--text-3);
  cursor: pointer;
  font-size: .8rem;
  padding: .25rem .65rem;
  transition: background .15s, color .15s;
}
.revise-mode-btn.active {
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--shadow-xs);
}

/* ── Rich text editor (Telegram formatting) ── */
.rte-panel {
  margin: .25rem 1.25rem .75rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--surface-2);
  overflow: hidden;
}
.rte-hint {
  font-size: .75rem;
  color: var(--text-3);
  padding: .5rem .75rem .25rem;
}
.rte-toolbar {
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
  flex-wrap: wrap;
}
.rte-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: .25rem;
  color: var(--text-2);
  cursor: pointer;
  font-size: .85rem;
  min-width: 1.8rem;
  padding: .2rem .4rem;
  transition: background .12s, color .12s;
  line-height: 1.4;
}
.rte-btn:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-1);
}
.rte-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--border);
  margin: 0 .2rem;
}
.rte-link-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.rte-link-input {
  flex: 1;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: .3rem;
  color: var(--text-1);
  font-size: .83rem;
  padding: .3rem .5rem;
}
.rte-emoji-panel {
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.rte-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
}
.rte-emoji {
  background: transparent;
  border: none;
  border-radius: .25rem;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: .2rem .25rem;
  transition: background .1s;
}
.rte-emoji:hover { background: var(--surface-3); }
.rte-editor {
  min-height: 120px;
  max-height: 400px;
  overflow-y: auto;
  padding: .75rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-1);
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.rte-editor:focus { outline: 1px solid var(--brand) inset; }
/* Telegram formatting tags styling in editor */
.rte-editor b, .rte-editor strong { font-weight: 700; }
.rte-editor i, .rte-editor em { font-style: italic; }
.rte-editor u { text-decoration: underline; }
.rte-editor s { text-decoration: line-through; }
.rte-editor code { background: var(--surface-3); border-radius: .2rem; font-family: monospace; font-size: .85em; padding: .1em .3em; }
.rte-editor tg-spoiler { background: var(--text-3); border-radius: .2rem; color: transparent; cursor: pointer; padding: .05em .15em; user-select: text; }
.rte-editor tg-spoiler:hover { color: var(--text-1); }
.rte-editor a { color: var(--brand); text-decoration: underline; }
.rte-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border-top: 1px solid var(--border);
  background: var(--surface-3);
}
.rte-copy-status {
  font-size: .8rem;
  color: var(--text-3);
}

/* Light mode overrides */
body.theme-light .rte-panel { background: #FAFAFA; }
body.theme-light .rte-toolbar { background: #F4F4F5; }
body.theme-light .rte-editor { color: #18181B; }
body.theme-light .rte-editor tg-spoiler { background: #71717A; }
body.theme-light .rte-editor tg-spoiler:hover { color: #18181B; }
body.theme-light .rte-footer { background: #F4F4F5; }
body.theme-light .rte-emoji-panel { background: #FAFAFA; }

/* ── Format checkboxes ── */
.format-checks {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.format-check-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  cursor: pointer;
  padding: .3rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  transition: border-color .15s, background .15s;
}
.format-check-item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-text);
}
.format-check-item input { display: none; }
.format-all-btn {
  display: inline-flex;
  align-items: center;
  font-size: .875rem;
  font-family: inherit;
  cursor: pointer;
  padding: .3rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: none;
  color: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.format-all-btn:hover { border-color: var(--accent); }
.format-check-disabled {
  opacity: .35;
  pointer-events: none;
}
.format-all-btn.partial { border-color: #A5B4FC; background: #F5F3FF; color: var(--accent); }
.format-all-btn.active  { border-color: var(--accent); background: var(--accent-light); color: var(--accent-text); }
.format-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  align-self: center;
  flex-shrink: 0;
}

/* ── LLM debug log ── */
.llm-call {
  border: 1px solid #2E2E3C;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.llm-call-step {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8080A8;
  padding: .35rem .75rem;
  background: #1A1A24;
}
.llm-call-details {
  border-top: 1px solid #2E2E3C;
}
.llm-call-details summary {
  font-size: .75rem;
  color: #6060A0;
  cursor: pointer;
  padding: .3rem .75rem;
  user-select: none;
}
.llm-call-details summary:hover { color: #8888C0; }
.llm-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .75rem;
  line-height: 1.5;
  color: #C0C0E0;
  padding: .5rem .75rem;
  background: #0E0E18;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}

/* ── Upload row ── */
.upload-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  flex-wrap: wrap;
}
.upload-btn {
  font-size: .8rem;
  padding: .25rem .6rem;
}
.upload-status {
  font-size: .8rem;
  color: var(--text-3);
}
.drop-hint {
  font-size: .75rem;
  color: var(--text-2);
  margin-top: .3rem;
  pointer-events: none;
}
.post-create-form {
  transition: background .15s;
}
.post-create-form.drag-over {
  background: #14141C;
  border-radius: .5rem;
  outline: 2px dashed #3B82F6;
  outline-offset: 4px;
}
.post-create-form.drag-over .drop-hint {
  color: #3B82F6;
}

/* ── Gen-facts exclude toggles ── */
.fact-gen-hint {
  font-size: .78rem;
  color: var(--text-3);
  padding: .3rem 1rem .5rem;
}

.fact-gen-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 1rem;
  border-radius: var(--r-xs);
  transition: background .1s;
}

.fact-gen-row:hover { background: var(--surface-3); }

.fact-gen-text {
  flex: 1;
  font-size: .875rem;
  color: var(--text-1);
  line-height: 1.45;
}

.fact-gen-off .fact-gen-text {
  color: var(--text-3);
  text-decoration: line-through;
}

.fact-gen-btn {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  font-size: .75rem;
  padding: .15rem .5rem;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background .1s, color .1s;
  white-space: nowrap;
}

.fact-gen-btn:hover { background: var(--surface-3); color: var(--text-1); }

.fact-gen-off .fact-gen-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.fact-gen-off .fact-gen-btn:hover { background: #E0DEFF; }

/* ── Gap analysis ── */
.gap-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin-bottom: 1.5rem;
}
.gap-intro {
  color: #B45309;
  font-size: .9rem;
  margin: 0;
}
.gap-questions {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0;
}
.gap-questions li {
  font-size: .9rem;
  color: var(--text-1);
}
.gap-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Multi-result ── */
.post-result-format {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
}

/* ── Post type selector ── */
.post-type-select {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.post-type-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: .85rem;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.post-type-btn:hover { border-color: var(--accent); }
.post-type-btn.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-text);
  font-weight: 500;
}
.post-type-icon { font-size: 1rem; }
.post-type-label { font-size: .85rem; }

/* ── Tone preset buttons ── */
.tone-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  font-size: .82rem;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.tone-preset-btn:hover { border-color: var(--accent); }
.tone-preset-btn.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-text);
  font-weight: 500;
}

/* ── Generation details accordion ── */
.gen-details {
  margin-top: .6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-light);
  overflow: hidden;
}
.gen-details-toggle {
  font-size: .78rem !important;
  color: var(--text-3) !important;
  cursor: pointer;
  padding: .4rem .75rem !important;
  user-select: none;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.gen-details-toggle::before { content: '▸'; font-size: .7rem; }
details[open] .gen-details-toggle::before { content: '▾'; }
.gen-details-toggle:hover { color: var(--text-2) !important; }
.gen-details-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: .5rem .75rem .5rem;
  background: var(--surface-2);
  border-top: 1px solid var(--border-light);
}
.gen-detail-item {
  display: flex;
  gap: .5rem;
  font-size: .78rem;
  padding: .25rem 0;
  border-bottom: 1px solid var(--border-light);
  align-items: flex-start;
}
.gen-detail-item:last-child { border-bottom: none; }
.gen-detail-key {
  color: var(--text-3);
  flex-shrink: 0;
  min-width: 120px;
  font-weight: 600;
}
.gen-detail-val {
  color: var(--text-2);
  word-break: break-word;
}

/* ── Main wrap (mobile shell) ── */
.main-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.main-wrap .content { flex: 1; }

/* ── Brand tabs ── */
.brand-tabs {
  display: flex;
  gap: .3rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background: var(--surface-3);
  border-radius: var(--r-md);
  padding: .3rem;
  width: fit-content;
}
.brand-tabs::-webkit-scrollbar { display: none; }
.brand-tab-btn {
  padding: .5rem 1.1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s;
  letter-spacing: .005em;
}
.brand-tab-btn:hover { color: var(--text-1); background: rgba(255,255,255,.7); }
.brand-tab-btn.active {
  color: var(--text-1);
  background: var(--surface);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* ── Mobile header (hidden on desktop) ── */
.mob-header { display: none; }

/* ── Sidebar overlay ── */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,5,15,.55);
  z-index: 190;
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════════
   MOBILE  ≤ 1024px
══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Sidebar → same overlay approach as desktop ── */
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.active { opacity: 1; pointer-events: all; }

  /* ── Mobile header ── */
  .mob-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: var(--sb);
    position: sticky;
    top: 0;
    z-index: 90;
    flex-shrink: 0;
    min-height: 48px;
    border-bottom: 1px solid var(--sb-border);
  }
  .mob-menu-btn {
    background: none;
    border: none;
    color: var(--sb-text);
    cursor: pointer;
    padding: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-menu-btn:active { color: var(--sb-text-2); }
  .mob-header-title {
    color: #DCDCF8;
    font-size: .875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    letter-spacing: -.01em;
  }

  /* ── Layout ── */
  .layout { flex-direction: column; }

  /* ── Content ── */
  .content {
    padding: clamp(.75rem, 4vw, 1.25rem);
    max-width: 100%;
  }

  /* ── Page header ── */
  .page-header { flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
  .page-title { font-size: 1.1rem; }

  /* ── Form grid → single column ── */
  .form-grid { grid-template-columns: 1fr; }

  /* ── Cards ── */
  .card { padding: .875rem; }

  /* ── Modal → full width on mobile ── */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 1.25rem 1rem;
    margin: 0;
  }

  /* ── Prop rows → stack vertically ── */
  .prop-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    min-height: auto;
    padding: .6rem 0;
  }
  .prop-label {
    width: auto;
    min-width: 0;
    padding: 0;
    font-weight: 700;
    color: var(--text-3);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-right: none;
    line-height: 1.3;
  }
  .prop-value { width: 100%; padding: .2rem 0; }

  /* ── Prop subrows → stack ── */
  .prop-subrow { flex-wrap: wrap; gap: .25rem; }
  .prop-sublabel {
    width: 100%;
    padding: .4rem .75rem .1rem;
    font-size: .72rem;
  }
  .prop-sublabel-first { padding-left: .75rem; }
  .prop-subvalue {
    flex: 1;
    min-width: 0;
    font-size: .85rem;
    padding: .1rem .5rem .4rem;
  }

  /* ── Post cards ── */
  .post-card { padding: .875rem; }
  .post-meta { gap: .4rem; flex-wrap: wrap; }
  .post-meta-info { flex-wrap: wrap; gap: .3rem; }

  /* ── Post create form ── */
  .post-create-form { padding: 0; gap: .875rem; }

  /* ── Post type buttons ── */
  .post-type-select { gap: .3rem; flex-wrap: wrap; }
  .post-type-btn { padding: .35rem .6rem; font-size: .8rem; }

  /* ── Format checks ── */
  .format-checks { gap: .3rem .4rem; }
  .format-check-item { font-size: .8rem; padding: .3rem .55rem; }
  .format-all-btn { font-size: .8rem; padding: .3rem .65rem; }

  /* ── Review actions — wrap into 2×2 ── */
  .review-actions { padding: .6rem 0; gap: .35rem; flex-wrap: wrap; }
  .review-actions .btn {
    font-size: .8rem;
    padding: .45rem .6rem;
    flex: 1 1 calc(50% - .35rem);
    min-width: 0;
    justify-content: center;
  }
  .post-result { margin: .5rem 0 0; }

  /* ── Stages ── */
  .stages-wrap, .stages-summary { padding: .875rem 0; }
  .stage-pre { font-size: .7rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Revise panel ── */
  .revise-panel { padding: 0 0 .875rem; }
  .revise-mode-toggle { flex-wrap: wrap; }
  .revise-mode-btn { font-size: .78rem; padding: .25rem .5rem; }

  /* ── Generation details ── */
  .gen-detail-item { flex-wrap: wrap; gap: .2rem; }
  .gen-detail-key { min-width: 0; width: 100%; font-size: .72rem; }
  .gen-detail-val { width: 100%; font-size: .8rem; padding-left: .5rem; }

  /* ── Brand tabs ── */
  .brand-tab-btn { padding: .5rem .7rem; font-size: .8rem; }

  /* ── Rule sets ── */
  .rule-set { padding: .875rem; }

  /* ── Tables → horizontal scroll ── */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Pre / code blocks ── */
  .llm-pre { max-height: 180px; font-size: .7rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sysprompt-pre { font-size: .75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Post source material ── */
  .post-source-material { font-size: .78rem; }

  /* ── Prop section ── */
  .prop-section { border-radius: var(--r-sm); }
  .prop-section-title { padding: .55rem .875rem .35rem; font-size: .65rem; }

  /* ── Tone preset buttons ── */
  .tone-preset-btn { font-size: .78rem; padding: .25rem .55rem; }

  /* ── Touch targets ── */
  .toggle { transform: scale(1.1); }
  .sidebar-bottom { padding-bottom: env(safe-area-inset-bottom, .5rem); }

  /* ── Sandbox ── */
  .sb-blocks { gap: .25rem; }
  .sb-prompt-preview { max-height: 220px; font-size: .7rem; }
  .sb-controls { flex-direction: column; gap: .4rem; }
  .sb-controls .sb-format-select,
  .sb-controls .btn { width: 100%; }
  .sb-run { padding: .75rem; }
  .sb-run-output { font-size: .8rem; }

  /* ── Evolution analytics ── */
  .evo-item { padding: .875rem; }
  .evo-version-header { flex-wrap: wrap; gap: .35rem; }
  .evo-tabs { gap: .35rem; flex-wrap: wrap; }
}

/* ── Admin: evolution analytics ── */
.evo-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .75rem;
}
.evo-tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .35rem .75rem;
  border-radius: var(--r-sm);
  font-size: .85rem;
  color: var(--text-3);
}
.evo-tab-btn.active { background: var(--text-1); color: #fff; }

.evo-list { display: flex; flex-direction: column; gap: .75rem; }
.evo-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem;
  box-shadow: var(--shadow-xs);
}
.evo-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  font-size: .8rem;
  color: var(--text-3);
  margin-bottom: .5rem;
}
.evo-brand { font-weight: 600; color: var(--text-1); }
.evo-versions { background: var(--surface-3); border-radius: 4px; padding: .1rem .4rem; }

.evo-expand-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .3rem .75rem;
  font-size: .8rem;
  cursor: pointer;
  color: var(--text-2);
}
.evo-expand-btn:hover { background: var(--surface-3); }

.evo-actions-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.evo-note-quick-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .3rem .65rem;
  font-size: .8rem;
  cursor: pointer;
  color: var(--text-2);
}
.evo-note-quick-btn:hover { background: var(--surface-3); }

.evo-note-quick {
  margin-top: .6rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.evo-note-quick-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .45rem .6rem;
  font-size: .82rem;
  color: var(--text-1);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.evo-note-quick-input:focus { outline: none; border-color: var(--accent); }

html:not([data-theme="dark"]) .evo-note-quick-input { background: #fff; }

.evo-detail { margin-top: 1rem; }
.evo-versions-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.evo-version {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.evo-version-header {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .5rem .75rem;
  background: var(--surface-2);
  font-size: .78rem;
  color: var(--text-3);
}
.evo-version-num { font-weight: 700; color: var(--text-1); }
.evo-version-type {
  border-radius: 4px;
  padding: .1rem .4rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.evo-version-type.generated { background: var(--info-bg);  color: var(--info-text); }
.evo-version-type.revised    { background: #FFF7ED;         color: #C2410C; }
.evo-version-type.approved   { background: var(--ok-bg);    color: var(--ok-text); }

.evo-version-text {
  padding: .75rem;
  font-size: .82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  font-family: inherit;
  background: var(--surface);
  max-height: 200px;
  overflow-y: auto;
}

.evo-analysis {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--r-sm);
  padding: 1rem;
}
.evo-analysis-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #92400E;
  margin-bottom: .5rem;
}
.evo-analysis-text { font-size: .85rem; line-height: 1.6; color: var(--text-1); }

.evo-pagination { font-size: .78rem; color: var(--text-3); text-align: center; margin-top: 1rem; }

/* ── Star / toolbar ─────────────────────────────────────────── */
.evo-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.evo-toolbar-hint { font-size: .82rem; color: var(--text-3); }

.evo-star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-3);
  padding: 0 .25rem;
  transition: color .15s, transform .1s;
  flex-shrink: 0;
}
.evo-star-btn:hover { color: #F59E0B; transform: scale(1.2); }
.evo-star-btn.starred { color: #F59E0B; }

.evo-item-starred { border-left: 3px solid #F59E0B !important; }

/* ── Note row ───────────────────────────────────────────────── */
.evo-note-row {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  padding: .75rem 1rem;
  background: var(--sb-bg2, #1a1a2e);
  border-top: 1px solid var(--sb-border, #2a2a3d);
}
.evo-note-input {
  flex: 1;
  background: var(--sb-bg, #0D0D14);
  border: 1px solid var(--sb-border, #2a2a3d);
  border-radius: 6px;
  color: var(--text-1);
  font-size: .82rem;
  padding: .4rem .6rem;
  resize: vertical;
  font-family: inherit;
}
.evo-note-input:focus { outline: none; border-color: var(--brand, #7C3AED); }

/* ── Summary modal ──────────────────────────────────────────── */
.evo-summary-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.evo-summary-modal {
  background: var(--sb-bg2, #1a1a2e);
  border: 1px solid var(--sb-border, #2a2a3d);
  border-radius: 10px;
  max-width: 760px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.evo-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--sb-border, #2a2a3d);
  font-weight: 600;
  font-size: .9rem;
}
.evo-summary-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 1rem;
  padding: .2rem .4rem;
}
.evo-summary-close:hover { color: var(--text-1); }
.evo-summary-body {
  overflow-y: auto;
  padding: 1.2rem;
  flex: 1;
}
.evo-summary-count {
  font-size: .75rem;
  color: var(--text-3);
  margin-bottom: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.evo-summary-text {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--text-1);
}

/* Light mode overrides */
html:not([data-theme="dark"]) .evo-note-row { background: #F9FAFB; border-color: #E5E7EB; }
html:not([data-theme="dark"]) .evo-note-input { background: #fff; border-color: #E5E7EB; }
html:not([data-theme="dark"]) .evo-summary-modal { background: #fff; border-color: #E5E7EB; }
html:not([data-theme="dark"]) .evo-summary-header { border-color: #E5E7EB; }

.evo-settings { max-width: 700px; }
.evo-users-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
.evo-users-table th {
  text-align: left;
  padding: .5rem .75rem;
  background: var(--surface-3);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
}
.evo-users-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--border-light); }
.evo-user-select {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: .25rem .5rem;
  font-size: .82rem;
  background: var(--surface);
  cursor: pointer;
}

.toggle-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .88rem; }
.empty-hint { padding: 2rem; text-align: center; color: var(--text-3); font-size: .9rem; }

/* ── Sandbox (Prompt Playground) ── */
.sb-session-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0 1rem;
  border-bottom: 1px solid var(--sb-border);
  flex-wrap: wrap;
}
.sb-session-tabs {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.sb-session-tab {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  background: var(--sb-s);
  border-radius: .375rem;
  font-size: .82rem;
  color: var(--sb-text-2);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.sb-session-tab:hover { background: var(--sb-s2); }
.sb-session-tab.active { background: #1A2E5A; color: #A0C0FF; border-color: #2A4080; }
.sb-session-del {
  color: var(--sb-text);
  font-size: 1rem;
  line-height: 1;
  padding: 0 .1rem;
  cursor: pointer;
}
.sb-session-del:hover { color: #EF4444; }

/* Mobile-first: single column by default */
.sb-layout {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  min-height: 0;
}
.sb-left { width: 100%; overflow: hidden; }
.sb-right { width: 100%; overflow: hidden; padding-top: 1.25rem; }
.sb-divider { display: none; }

/* Desktop: side-by-side with drag handle */
@media (min-width: 1025px) {
  .sb-layout { flex-direction: row; align-items: start; }
  .sb-left {
    flex: 0 0 var(--sb-left-w, 300px);
    width: auto;
    min-width: 180px;
    max-width: 70%;
  }
  .sb-right {
    flex: 1 1 0;
    min-width: 200px;
    padding-top: 0;
    padding-left: 1.5rem;
  }
  .sb-divider {
    display: block;
    flex: 0 0 6px;
    align-self: stretch;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 1;
  }
  .sb-divider::after {
    content: '';
    display: block;
    width: 2px;
    height: 100%;
    min-height: 40px;
    background: var(--sb-border);
    margin: 0 auto;
    border-radius: 1px;
    transition: background .15s;
  }
  .sb-divider:hover::after,
  .sb-divider.dragging::after { background: #3B82F6; }
}

.sb-section-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--sb-text);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}

.sb-blocks {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.sb-block-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: .3rem .5rem;
  border-radius: .375rem;
  background: var(--sb-s);
  border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.sb-block-check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: .45rem;
  cursor: pointer;
}
.sb-block-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #3B82F6;
  flex-shrink: 0;
}
.sb-block-name {
  font-size: .85rem;
  color: var(--sb-text-2);
  text-decoration: none;
  line-height: 1.4;
  transition: color .15s;
}
a.sb-block-name:hover { color: #93C5FD; text-decoration: underline; }
.sb-block-name-static { cursor: default; }
.sb-block-item.active { background: #1A2540; border-color: #253555; }
.sb-block-item.active .sb-block-name { color: #C0D5F0; }

.sb-prompt-chars {
  font-size: .72rem;
  color: var(--sb-text);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: .5rem;
}
.sb-prompt-preview {
  background: #09090F;
  border: 1px solid var(--sb-border);
  border-radius: .375rem;
  padding: .5rem .75rem;
  font-size: .72rem;
  color: var(--sb-text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 380px;
  overflow-y: auto;
  line-height: 1.5;
}
.sb-prompt-block {
  padding: 0;
}
.sb-prompt-block + .sb-prompt-block {
  margin-top: 1.1em;
  padding-top: 1.1em;
  border-top: 1px solid #1A1A2C;
}
.sb-prompt-block-name {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #2A2A40;
  margin-bottom: 0;
}
.sb-prompt-block-content {
  color: #8888B0;
  font-size: .72rem;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}

.sb-tz-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 120px;
  margin-bottom: .75rem;
}
.sb-controls {
  display: flex;
  gap: .75rem;
  align-items: center;
}
.sb-format-select {
  background: var(--sb-s);
  border: 1px solid var(--sb-border);
  border-radius: .375rem;
  color: #E0E0F8;
  padding: .4rem .75rem;
  font-size: .85rem;
  cursor: pointer;
}

.sb-run {
  border: 1px solid var(--sb-border);
  border-radius: .5rem;
  padding: .85rem 1rem;
  margin-bottom: .75rem;
  background: #0A0A12;
}
.sb-run-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--sb-text);
}
.sb-run-num { font-weight: 700; color: var(--sb-text-2); }
.sb-run-time { color: var(--sb-text); }
.sb-run-format {
  background: var(--sb-s);
  padding: .1rem .4rem;
  border-radius: .25rem;
  font-size: .72rem;
}
.sb-run-blocks-detail summary {
  color: var(--accent);
  cursor: pointer;
  font-size: .75rem;
}
.sb-run-blocks-list {
  margin-top: .25rem;
  font-size: .72rem;
  color: var(--sb-text);
  padding: .3rem .5rem;
  background: var(--sb);
  border-radius: .25rem;
  line-height: 1.6;
}
.sb-run-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .9rem;
  color: #E0E0F8;
  line-height: 1.7;
}
.sb-run-error { color: #EF4444; font-size: .85rem; }
.sb-run-prompt-detail {
  margin-top: .6rem;
  border-top: 1px solid var(--sb-border);
  padding-top: .5rem;
}
.sb-run-prompt-detail summary {
  font-size: .75rem;
  color: var(--sb-text);
  cursor: pointer;
}
.sb-run-prompt-pre {
  margin-top: .35rem;
  font-size: .7rem;
  color: var(--sb-text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Sandbox voice recording ── */
.sb-voice-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
.sb-rec-status {
  font-size: .8rem;
  color: var(--sb-text);
}
.sb-attachment {
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: .5rem;
  padding: .6rem .75rem;
  margin-bottom: .5rem;
}
.sb-attachment-header {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.sb-attachment-icon { font-size: 1rem; }
.sb-attachment-audio {
  flex: 1;
  height: 28px;
  min-width: 0;
  accent-color: var(--accent);
}
.sb-attachment-del {
  background: transparent;
  border: none;
  color: var(--sb-text);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 .2rem;
  line-height: 1;
}
.sb-attachment-del:hover { color: #EF4444; }
.sb-attachment-transcript summary {
  font-size: .78rem;
  color: var(--accent);
  cursor: pointer;
  margin-top: .4rem;
}
.sb-attachment-text {
  font-size: .82rem;
  color: var(--sb-text-2);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: .35rem;
  padding: .4rem .5rem;
  background: #07070F;
  border-radius: .25rem;
  line-height: 1.5;
}

/* ── Prompt Template Editor (admin) ─────────────────────────────────────────── */

.pt-loading {
  padding: 2rem;
  color: var(--text-3);
  font-size: .9rem;
}

.pt-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.pt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
  background: var(--sb);
}

.pt-header-left {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.pt-title {
  font-size: 1rem;
  font-weight: 700;
  color: #EEEEFF;
  margin: 0;
  letter-spacing: -.01em;
}

.pt-stage-tabs {
  display: flex;
  gap: .25rem;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: .4rem;
  padding: .2rem;
}

.pt-stage-btn {
  background: transparent;
  border: none;
  color: var(--sb-text);
  font-size: .82rem;
  padding: .3rem .7rem;
  border-radius: .3rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.pt-stage-btn.active {
  background: var(--sb-s2);
  color: #EEEEFF;
}

.pt-stage-btn:hover:not(.active) {
  color: var(--sb-text-2);
}

.pt-prod-badge {
  font-size: .78rem;
  color: #F59E0B;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.28);
  border-radius: .3rem;
  padding: .2rem .5rem;
  font-weight: 600;
}

.pt-publish-btn {
  font-size: .82rem;
  padding: .4rem .9rem;
}

.pt-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.pt-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--sb-border);
  overflow-y: auto;
  padding: .5rem 0;
  transition: width .2s ease, padding .2s ease;
  background: var(--sb-s);
}

.pt-sidebar.pt-sidebar-hidden {
  width: 0;
  overflow: hidden;
  padding: 0;
  border-right: none;
}

.pt-sidebar-toggle {
  flex-shrink: 0;
  width: 14px;
  border: none;
  border-right: 1px solid var(--sb-border);
  background: #141420;
  color: var(--sb-text);
  cursor: pointer;
  font-size: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
  padding: 0;
}

.pt-sidebar-toggle:hover {
  background: var(--sb-s2);
  color: var(--sb-text-2);
}

.pt-block-item {
  padding: .55rem 1rem;
  font-size: .83rem;
  color: var(--sb-text-2);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}

.pt-block-item:hover {
  background: var(--sb-s2);
  color: #EEEEFF;
}

.pt-block-item.active {
  background: var(--sb-active);
  color: #A0A0FF;
  border-left-color: var(--accent);
}

.pt-editor-pane {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
}

.pt-editor-split {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* ── Tab strip ── */
.pt-editor-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
  background: var(--sb-s);
  padding: 0 1rem;
}

.pt-editor-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--sb-text);
  font: inherit;
  font-size: .83rem;
  font-weight: 500;
  padding: .6rem 1rem;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .14s, border-color .14s;
  white-space: nowrap;
}

.pt-editor-tab:hover { color: var(--sb-text-2); }

.pt-editor-tab.active {
  color: #EEEEFF;
  border-bottom-color: var(--accent);
}

/* ── Tab content panels ── */
.pt-editor-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.pt-editor-form {
  width: 100%;
  max-width: 680px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  background: #10101A;
}

.pt-prompt-preview {
  padding: 1rem 1.25rem;
  background: #0A0A12;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.pt-empty {
  color: var(--sb-text);
  font-size: .9rem;
  padding: 1.5rem;
}

.pt-editor-header {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.pt-editor-name {
  font-size: .95rem;
  font-weight: 700;
  color: #EEEEFF;
  letter-spacing: -.01em;
}

.pt-editor-desc {
  font-size: .8rem;
  color: var(--sb-text);
}

.pt-vars-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .8rem;
}

.pt-vars-label {
  color: var(--sb-text);
}

.pt-var-chip {
  background: var(--sb);
  border: 1px solid var(--sb-border);
  color: #8080FF;
  font-size: .78rem;
  font-family: monospace;
  padding: .2rem .45rem;
  border-radius: .3rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.pt-var-chip:hover {
  background: var(--sb-s);
  border-color: var(--accent);
}

.pt-textarea {
  width: 100%;
  min-height: 320px;
  background: #07070F;
  border: 1px solid #28283C;
  border-radius: .4rem;
  color: #D8D8F0;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: .82rem;
  line-height: 1.65;
  padding: .75rem;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color .15s;
}

.pt-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.pt-actions-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.pt-save-status {
  font-size: .82rem;
  color: #22C55E;
  font-weight: 500;
}

.pt-preview-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.pt-brand-select {
  appearance: none;
  background: var(--sb-s) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236868A0' stroke-width='2'%3E%3Cpolyline points='1 1 6 7 11 1'/%3E%3C/svg%3E") no-repeat right .6rem center;
  border: 1px solid var(--sb-border);
  color: var(--sb-text-2);
  font-size: .82rem;
  padding: .35rem 1.8rem .35rem .6rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  min-width: 180px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}
.pt-brand-select:focus { border-color: var(--accent); }

/* btn-outline — used in pipeline editor */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .9rem;
  border: 1.5px solid var(--sb-border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--sb-text-2);
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  white-space: nowrap;
}
.btn-outline:hover {
  background: var(--sb-s2);
  border-color: var(--accent);
  color: #EEEEFF;
}

.pt-preview-box {
  background: #07070F;
  border: 1px solid var(--sb-border);
  border-radius: .4rem;
  padding: .75rem 1rem;
  margin-top: .25rem;
}

.pt-preview-label {
  font-size: .78rem;
  color: var(--sb-text);
  margin-bottom: .5rem;
}

.pt-preview-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: .85rem;
  color: #D0D0F0;
  line-height: 1.6;
  margin: 0;
}

/* ── Sidebar section labels ── */
.pt-sidebar-section {
  margin-bottom: .25rem;
}

.pt-sidebar-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sb-text);
  padding: .7rem .85rem .3rem;
  user-select: none;
  opacity: .7;
}

/* ── Step params block (temperature + max_tokens) ── */
.pt-step-params {
  display: flex;
  gap: 1.5rem;
  padding: .85rem 1rem;
  background: #09090F;
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  margin-bottom: .75rem;
}

.pt-step-param {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 140px;
}

.pt-param-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--sb-text-2);
  user-select: none;
}

.pt-param-hint {
  font-size: .68rem;
  color: var(--sb-text);
  margin-top: .1rem;
}

.pt-slider-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.pt-slider {
  flex: 1;
  accent-color: #7C3AED;
  cursor: pointer;
  height: 4px;
}

.pt-param-num {
  width: 56px;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: 4px;
  color: #D8D8F0;
  font-size: .82rem;
  padding: .25rem .35rem;
  text-align: center;
}

.pt-param-num:focus {
  outline: none;
  border-color: #7C3AED;
}

.pt-param-num-wide {
  width: 80px;
}

@media (max-width: 1023px) {
  .pt-step-params {
    flex-direction: column;
    gap: .75rem;
  }
}

@media (max-width: 1023px) {
  .pt-body {
    flex-direction: column;
  }
  .pt-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--sb-border);
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: .4rem;
    gap: .25rem;
  }
  .pt-block-item {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: .3rem;
    padding: .4rem .75rem;
    white-space: nowrap;
  }
  .pt-block-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
  .pt-preview-row {
    margin-left: 0;
    width: 100%;
  }
  .pt-brand-select {
    flex: 1;
    min-width: 0;
  }
}

/* ── Pipeline test section ── */

.pt-test-section {
  border-top: 1px solid var(--border);
  padding: 1.5rem 1.75rem 2rem;
  background: var(--surface-2);
}

.pt-test-header {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1rem;
}

.pt-test-title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.01em;
}

.pt-test-hint {
  font-size: .8125rem;
  color: var(--text-3);
}

.pt-test-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.pt-test-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.pt-test-text-field {
  width: 100%;
  margin-bottom: .75rem;
}

.pt-test-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pt-test-select {
  appearance: none;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238888A0' stroke-width='2'%3E%3Cpolyline points='1 1 6 7 11 1'/%3E%3C/svg%3E") no-repeat right .6rem center;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: .35rem 1.8rem .35rem .6rem;
  font-size: .875rem;
  color: var(--text-1);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  min-width: 140px;
}

.pt-test-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,80,232,.12);
}

.pt-test-textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: .5rem .75rem;
  font-size: .875rem;
  font-family: inherit;
  color: var(--text-1);
  background: var(--surface);
  outline: none;
  box-sizing: border-box;
}

.pt-test-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,80,232,.12);
}

.pt-test-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pt-test-status {
  font-size: .875rem;
  color: var(--text-2);
}

.pt-test-progress {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
}

/* ── Step toggle chips ── */
.pt-test-steps-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .5rem .75rem;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  margin-bottom: .75rem;
}

.pt-step-chips {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}

.pt-step-chip {
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  text-decoration: line-through;
  opacity: .6;
}

.pt-step-chip.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  opacity: 1;
}

.pt-step-chip:hover {
  opacity: 1;
  border-color: var(--accent);
}

.pt-steps-hint {
  font-size: .71rem;
  color: var(--text-4);
  margin-left: .25rem;
}

/* History toggle button */
.pt-history-toggle-btn {
  margin-left: auto;
  font-size: .75rem;
  padding: .25rem .65rem;
  white-space: nowrap;
}

/* Save run button */
.pt-save-run-btn {
  font-size: .8rem;
  padding: .3rem .75rem;
}

/* ── Progress steps (expandable) ── */
.pt-test-step {
  font-size: .8125rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid transparent;
}

.pt-test-step.pt-step-expandable {
  border-color: var(--border-light);
  background: var(--surface);
}

.pt-test-step.pt-step-expandable:hover {
  border-color: var(--border);
}

.pt-test-step.pt-step-open {
  border-color: var(--accent);
  background: var(--surface);
}

.pt-test-step-header {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .3rem .5rem;
}

.pt-step-expandable .pt-test-step-header {
  cursor: pointer;
}

.pt-step-expandable .pt-test-step-header:hover .pt-test-step-label {
  color: var(--accent-text);
}

.pt-step-chevron {
  font-size: .65rem;
  color: var(--text-4);
  flex-shrink: 0;
  width: .8rem;
}

.pt-step-chevron-none {
  opacity: 0;
}

.pt-test-step-label {
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

.pt-step-skipped {
  color: var(--text-4);
  font-weight: 400;
  font-style: italic;
}

.pt-test-step-preview {
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 460px;
}

/* ── Step I/O viewer ── */
.pt-step-io {
  padding: .5rem .6rem .6rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.pt-io-block {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.pt-io-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-4);
}

.pt-io-response .pt-io-label {
  color: var(--ok-text);
}

.pt-io-error-badge {
  background: var(--err-bg);
  color: var(--err-text);
  border: 1px solid var(--err-border);
  border-radius: 3px;
  padding: 0 .3rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.pt-io-code {
  margin: 0;
  padding: .45rem .6rem;
  background: var(--surface-3);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xs);
  font-size: .72rem;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  max-height: 280px;
  overflow-y: auto;
}

.pt-io-separator {
  height: 1px;
  background: var(--border);
  margin: .25rem 0;
}

.pt-io-skipped {
  font-size: .78rem;
  color: var(--text-4);
  font-style: italic;
  padding: .25rem 0;
}

/* ── History panel ── */
.pt-history-panel {
  margin-bottom: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.pt-history-list {
  max-height: 320px;
  overflow-y: auto;
}

.pt-history-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-3);
  font-size: .82rem;
}

.pt-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border-light);
  transition: background .1s;
}

.pt-history-item:last-child { border-bottom: none; }
.pt-history-item:hover { background: var(--surface-2); }

.pt-history-item-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.pt-history-item-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-1);
}

.pt-history-item-meta {
  font-size: .72rem;
  color: var(--text-3);
}

.pt-history-item-preview {
  font-size: .72rem;
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.pt-history-item-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}

.pt-history-load-btn {
  font-size: .75rem;
  padding: .25rem .6rem;
}

.pt-history-delete-btn {
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  color: var(--text-4);
  font-size: 1rem;
  cursor: pointer;
  transition: color .1s, border-color .1s, background .1s;
}

.pt-history-delete-btn:hover {
  color: var(--err-text);
  border-color: var(--err-border);
  background: var(--err-bg);
}

.pt-test-result {
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.pt-test-result-label {
  padding: .5rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-2);
}

.pt-test-result-text {
  margin: 0;
  padding: .75rem;
  font-size: .875rem;
  font-family: inherit;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
}

.pt-test-error {
  padding: .75rem;
  color: var(--err-text);
  font-size: .875rem;
}

/* ── Assembled prompt preview (.pv-*) ── */

.pv-legend {
  font-size: .75rem;
  color: var(--sb-text);
  margin-bottom: .25rem;
}

.pv-legend-item {
  display: inline;
  border-radius: 3px;
  padding: .05rem .3rem;
  font-size: .7rem;
  font-weight: 600;
}

.pv-block {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.pv-block-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--sb-text-2);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.pv-block-meta {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sb-text);
  font-size: .75rem;
}

.pv-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .35rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pv-badge-brand { background: #20204A; color: #A0A0FF; }
.pv-badge-role  { background: var(--sb-s); color: var(--sb-text-2); }

.pv-pre {
  margin: 0;
  padding: .65rem .8rem;
  font-family: inherit;
  font-size: .8125rem;
  color: #C8C8E8;
  background: var(--sb-s);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
}

/* Variable highlights */
.pv-chain {
  background: rgba(251,146,60,.18);
  color: #FB923C;
  border-radius: 3px;
  padding: 0 .2rem;
  font-weight: 600;
}

.pv-input {
  background: rgba(91,80,232,.2);
  color: #9898FF;
  border-radius: 3px;
  padding: 0 .2rem;
  font-weight: 600;
}

.pv-note {
  font-size: .75rem;
  color: var(--sb-text);
  padding: .25rem 0;
}

/* Commented-out lines in prompt preview */
.pv-comment {
  color: #404060;
  font-style: italic;
  display: inline;
}
html:not([data-theme="dark"]) .pv-comment { color: #AAAACC; }

/* Comment toggle button */
.pt-comment-btn {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: .78rem;
  letter-spacing: .02em;
  padding: .3rem .6rem;
  background: var(--sb);
  border-color: var(--sb-border);
  color: #5858A8;
}
.pt-comment-btn:hover {
  background: var(--sb-s2) !important;
  border-color: var(--accent) !important;
  color: #9090FF !important;
}
html:not([data-theme="dark"]) .pt-comment-btn {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-3);
}
html:not([data-theme="dark"]) .pt-comment-btn:hover {
  background: var(--accent-light) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ══════════════════════════════════════════
   LIGHT MODE OVERRIDES FOR PIPELINE/SANDBOX
   (override hardcoded dark colors when light theme active)
══════════════════════════════════════════ */
/* Remap --sb-* inside pt-wrap for light mode (main sidebar stays dark) */
html:not([data-theme="dark"]) .pt-wrap,
html:not([data-theme="dark"]) .content:has(.pt-wrap) {
  --sb:        #F4F5FA;
  --sb-s:      #FFFFFF;
  --sb-s2:     #EEF0F8;
  --sb-border: #DDE0F0;
  --sb-text:   #8C8CA8;
  --sb-text-2: #52526A;
  --sb-active: #EEEEFF;
  --sb-accent: #5B50E8;
}
/* Sandbox also gets light remap */
html:not([data-theme="dark"]) .sb-layout { --sb: #F4F5FA; --sb-s: #FFFFFF; --sb-border: #DDE0F0; }

/* Pipeline editor tab strip */
html:not([data-theme="dark"]) .pt-editor-tabs { background: var(--surface-2); border-bottom-color: var(--border); }
html:not([data-theme="dark"]) .pt-editor-tab  { color: var(--text-3); }
html:not([data-theme="dark"]) .pt-editor-tab:hover { color: var(--text-2); }
html:not([data-theme="dark"]) .pt-editor-tab.active { color: var(--text-1); border-bottom-color: var(--accent); }

/* Stage tabs (Тест / Прод) — light mode */
html:not([data-theme="dark"]) .pt-stage-tabs {
  background: var(--surface-3);
  border-color: var(--border);
}
html:not([data-theme="dark"]) .pt-stage-btn { color: var(--text-3); }
html:not([data-theme="dark"]) .pt-stage-btn:hover:not(.active) { color: var(--text-2); }
html:not([data-theme="dark"]) .pt-stage-btn.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* Hardcoded dark backgrounds in pipeline editor */
html:not([data-theme="dark"]) .pt-header    { background: var(--surface); border-bottom-color: var(--border); }
html:not([data-theme="dark"]) .pt-editor-form {
  background: var(--surface-2);
  border-right-color: var(--border);
}
html:not([data-theme="dark"]) .pt-prompt-preview { background: var(--surface-3); }
html:not([data-theme="dark"]) .pt-preview-box {
  background: var(--surface);
  border-color: var(--border);
}
html:not([data-theme="dark"]) .pt-textarea {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-1);
}
html:not([data-theme="dark"]) .pt-textarea:focus { border-color: var(--accent); }
html:not([data-theme="dark"]) .pt-title        { color: var(--text-1); }
html:not([data-theme="dark"]) .pt-editor-name  { color: var(--text-1); }
html:not([data-theme="dark"]) .pt-editor-desc  { color: var(--text-2); }
html:not([data-theme="dark"]) .pt-empty        { color: var(--text-3); }
html:not([data-theme="dark"]) .pt-save-status  { color: #16A34A; }
html:not([data-theme="dark"]) .pt-vars-label   { color: var(--text-3); }
html:not([data-theme="dark"]) .pt-var-chip {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--accent);
}
html:not([data-theme="dark"]) .pt-brand-select {
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238C8CA8' stroke-width='2'%3E%3Cpolyline points='1 1 6 7 11 1'/%3E%3C/svg%3E") no-repeat right .6rem center;
  border-color: var(--border);
  color: var(--text-1);
}
html:not([data-theme="dark"]) .btn-outline {
  border-color: var(--border);
  color: var(--text-2);
}
html:not([data-theme="dark"]) .btn-outline:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--accent);
}
html:not([data-theme="dark"]) .pt-preview-label { color: var(--text-3); }
html:not([data-theme="dark"]) .pt-preview-text  { color: var(--text-2); }
html:not([data-theme="dark"]) .pv-pre {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}
html:not([data-theme="dark"]) .pt-step-params {
  background: var(--surface-2);
  border-color: var(--border);
}
html:not([data-theme="dark"]) .pt-param-label  { color: var(--text-2); }
html:not([data-theme="dark"]) .pt-param-hint   { color: var(--text-3); }
html:not([data-theme="dark"]) .pt-param-num {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-1);
}
html:not([data-theme="dark"]) .pt-sidebar-toggle {
  background: var(--surface-3);
  border-right-color: var(--border);
  color: var(--text-3);
}
html:not([data-theme="dark"]) .pt-sidebar-label { color: var(--text-3); }

/* Sandbox light mode */
html:not([data-theme="dark"]) .sb-layout,
html:not([data-theme="dark"]) .sb-prompt-preview,
html:not([data-theme="dark"]) .sb-run,
html:not([data-theme="dark"]) .sb-attachment {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-1);
}
html:not([data-theme="dark"]) .sb-run-text       { color: var(--text-1); }
html:not([data-theme="dark"]) .sb-run-num         { color: var(--text-2); }
html:not([data-theme="dark"]) .sb-run-time        { color: var(--text-3); }
html:not([data-theme="dark"]) .sb-format-select {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-1);
}
html:not([data-theme="dark"]) .sb-section-title   { color: var(--text-3); }
html:not([data-theme="dark"]) .sb-block-item      { background: var(--surface-2); }
html:not([data-theme="dark"]) .sb-block-name      { color: var(--text-2); }
html:not([data-theme="dark"]) .sb-prompt-block-content { color: var(--text-2); }
html:not([data-theme="dark"]) .sb-attachment-text {
  background: var(--surface-3);
  color: var(--text-2);
}

/* LLM log light mode */
html:not([data-theme="dark"]) .llm-call         { border-color: var(--border); }
html:not([data-theme="dark"]) .llm-call-step    { background: var(--surface-3); color: var(--text-3); }
html:not([data-theme="dark"]) .llm-call-details { border-top-color: var(--border); }
html:not([data-theme="dark"]) .llm-pre {
  background: var(--surface-2);
  color: var(--text-2);
}

/* content background for pipeline page — follows theme */
html:not([data-theme="dark"]) .content:has(.pt-wrap) { background: var(--surface-3); }

/* ══════════════════════════════════════════
   ЛАБОРАТОРИЯ
══════════════════════════════════════════ */
.lab-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.page-subtitle {
  font-size: .82rem;
  color: var(--text-3);
  margin: -.25rem 0 0;
}
.lab-form {
  background: var(--sb-s);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
.lab-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.lab-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--sb-text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.lab-voice-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.lab-rec-status {
  font-size: .75rem;
  color: var(--sb-text);
}
.lab-textarea {
  width: 100%;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  color: var(--sb-text-2);
  font-size: .85rem;
  font-family: inherit;
  padding: .65rem .85rem;
  resize: vertical;
  line-height: 1.55;
  transition: border-color .15s;
  box-sizing: border-box;
}
.lab-textarea:focus {
  outline: none;
  border-color: var(--accent);
  color: #E8E8F8;
}
.lab-textarea::placeholder { color: var(--sb-text); }
.lab-params-row {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: .25rem;
}
.lab-param {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.lab-param-label {
  font-size: .72rem;
  color: var(--sb-text);
  white-space: nowrap;
}
.lab-param-input {
  width: 90px;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  color: var(--sb-text-2);
  font-size: .82rem;
  padding: .4rem .6rem;
  text-align: center;
}
.lab-param-input:focus {
  outline: none;
  border-color: var(--accent);
}
.lab-param-spacer { flex: 1; }
.lab-gen-btn { align-self: flex-end; }

/* History */
.lab-history {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lab-empty {
  text-align: center;
  color: var(--sb-text);
  font-size: .82rem;
  padding: 2rem 0;
}
.lab-run {
  background: var(--sb-s);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.lab-run-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.lab-run-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.lab-run-time {
  font-size: .75rem;
  color: var(--sb-text);
}
.lab-run-model {
  font-size: .72rem;
  color: var(--sb-text);
  background: var(--sb-s2);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-xs);
  padding: .1rem .45rem;
}
.lab-run-param {
  font-size: .72rem;
  color: var(--sb-text);
  background: var(--sb-s2);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-xs);
  padding: .1rem .4rem;
  font-family: 'JetBrains Mono', monospace;
}
.lab-run-del {
  background: none;
  border: none;
  color: var(--sb-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: .1rem .35rem;
  border-radius: var(--r-xs);
  transition: background .15s, color .15s;
}
.lab-run-del:hover { background: var(--err-bg); color: var(--err-text); }

.lab-run-prompts {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.lab-run-detail {
  font-size: .8rem;
}
.lab-run-detail summary { cursor: pointer; list-style: none; }
.lab-run-detail summary::-webkit-details-marker { display: none; }
.lab-run-summary {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .2rem .3rem;
  border-radius: var(--r-xs);
  color: var(--sb-text);
  user-select: none;
}
.lab-run-summary:hover { background: var(--sb-s2); }
.lab-run-summary-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sb-text);
  white-space: nowrap;
}
.lab-run-summary-preview {
  color: var(--sb-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 600px;
}
.lab-run-pre {
  margin: .4rem 0 0 0;
  padding: .6rem .8rem;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--sb-text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}

.lab-run-result {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--sb-text-2);
  white-space: pre-wrap;
  word-break: break-word;
  padding: .65rem .85rem;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
}
.lab-run-error {
  font-size: .82rem;
  color: var(--err-text);
  background: var(--err-bg);
  border: 1px solid var(--err-border);
  border-radius: var(--r-sm);
  padding: .55rem .85rem;
}

/* Light-mode overrides */
html:not([data-theme="dark"]) .lab-form,
html:not([data-theme="dark"]) .lab-run {
  background: var(--surface);
  border-color: var(--border);
}
html:not([data-theme="dark"]) .lab-textarea {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-1);
}
html:not([data-theme="dark"]) .lab-textarea:focus { color: var(--text-1); }
html:not([data-theme="dark"]) .lab-textarea::placeholder { color: var(--text-4); }
html:not([data-theme="dark"]) .lab-label          { color: var(--text-2); }
html:not([data-theme="dark"]) .lab-rec-status      { color: var(--text-3); }
html:not([data-theme="dark"]) .lab-param-label     { color: var(--text-3); }
html:not([data-theme="dark"]) .lab-param-input {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-1);
}
html:not([data-theme="dark"]) .lab-run-time        { color: var(--text-3); }
html:not([data-theme="dark"]) .lab-run-model,
html:not([data-theme="dark"]) .lab-run-param {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-3);
}
html:not([data-theme="dark"]) .lab-run-del         { color: var(--text-3); }
html:not([data-theme="dark"]) .lab-run-summary      { color: var(--text-3); }
html:not([data-theme="dark"]) .lab-run-summary:hover { background: var(--surface-3); }
html:not([data-theme="dark"]) .lab-run-summary-label { color: var(--text-3); }
html:not([data-theme="dark"]) .lab-run-summary-preview { color: var(--text-2); }
html:not([data-theme="dark"]) .lab-run-pre {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}
html:not([data-theme="dark"]) .lab-run-result {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-1);
}
html:not([data-theme="dark"]) .lab-empty { color: var(--text-3); }

/* ══════════════════════════════════════════
   PIPELINES — custom pipeline manager
══════════════════════════════════════════ */

/* Full-height, no padding, dark shell */
.content:has(.pl-wrap) {
  padding: 0;
  max-width: none;
  background: #0D0D14;
}

.pl-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Two-panel layout */
.pl-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Left sidebar ── */
.pl-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--sb-border);
  overflow-y: auto;
  background: var(--sb-s);
  display: flex;
  flex-direction: column;
}

.pl-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .875rem .5rem;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}

.pl-sidebar-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--sb-text);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Pipeline list items */
.pl-item {
  padding: .55rem .875rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .12s;
}
.pl-item:hover { background: var(--sb-s2); }
.pl-item.active {
  background: var(--sb-active);
  border-left-color: var(--accent);
}

.pl-item-name {
  font-size: .84rem;
  color: var(--sb-text-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-item.active .pl-item-name { color: #EEEEFF; }

.pl-item-meta {
  font-size: .72rem;
  color: var(--sb-text);
  margin-top: .12rem;
}

.pl-item-badges {
  display: flex;
  gap: .25rem;
  margin-top: .3rem;
  flex-wrap: wrap;
}

/* Status badges */
.pl-badge {
  font-size: .67rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: .25rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pl-badge-prod {
  background: rgba(245,158,11,.15);
  color: #F59E0B;
  border: 1px solid rgba(245,158,11,.3);
}
.pl-badge-test {
  background: rgba(99,102,241,.15);
  color: #818CF8;
  border: 1px solid rgba(99,102,241,.3);
}
.pl-badge-off {
  font-size: .7rem;
  color: var(--sb-text);
}

/* ── Right main area ── */
.pl-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--sb);
}

/* Empty / Classic info */
.pl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  gap: .75rem;
  min-height: 400px;
}
.pl-empty-icon { font-size: 2.5rem; opacity: .35; }
.pl-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sb-text-2);
}
.pl-empty-sub {
  font-size: .83rem;
  color: var(--sb-text);
  max-width: 460px;
  line-height: 1.55;
}
.pl-classic-status {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .5rem;
}
.pl-status-row { font-size: .83rem; color: var(--sb-text); }
.pl-status-row b { color: var(--sb-text-2); }
.pl-help {
  font-size: .78rem;
  color: var(--sb-text);
  margin-top: .25rem;
  max-width: 400px;
  line-height: 1.5;
}

/* ── Editor ── */
.pl-editor {
  display: flex;
  flex-direction: column;
}

.pl-editor-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem .75rem;
  border-bottom: 1px solid var(--sb-border);
  background: var(--sb-s);
  flex-wrap: wrap;
}

.pl-name-input {
  flex: 1;
  min-width: 160px;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  color: #EEEEFF;
  font-size: .9rem;
  font-weight: 600;
  padding: .4rem .75rem;
  font-family: inherit;
  transition: border-color .15s;
}
.pl-name-input:focus { outline: none; border-color: var(--accent); }

.pl-header-actions { display: flex; gap: .5rem; }

.pl-danger-btn { color: #F87171 !important; }
.pl-danger-btn:hover {
  background: rgba(239,68,68,.1) !important;
  border-color: rgba(239,68,68,.3) !important;
}

/* Activation row */
.pl-activation-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .65rem 1.25rem;
  border-bottom: 1px solid var(--sb-border);
  background: var(--sb-s);
  flex-wrap: wrap;
}
.pl-activation-item { display: flex; align-items: center; gap: .5rem; }
.pl-act-label { font-size: .78rem; color: var(--sb-text); white-space: nowrap; }

.pl-act-btn {
  font-size: .78rem !important;
  padding: .25rem .65rem !important;
  background: rgba(34,197,94,.12) !important;
  color: #4ADE80 !important;
  border: 1px solid rgba(34,197,94,.25) !important;
}
.pl-act-btn:hover { background: rgba(34,197,94,.22) !important; }

.pl-deact-btn {
  font-size: .78rem !important;
  padding: .25rem .65rem !important;
  background: rgba(239,68,68,.1) !important;
  color: #F87171 !important;
  border: 1px solid rgba(239,68,68,.25) !important;
}
.pl-deact-btn:hover { background: rgba(239,68,68,.18) !important; }

/* Section label */
.pl-section-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--sb-text);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .875rem 1.25rem .4rem;
}

/* Steps list */
.pl-steps-section { padding-bottom: .5rem; }

.pl-steps-list { display: flex; flex-direction: column; }

.pl-steps-empty {
  font-size: .83rem;
  color: var(--sb-text);
  padding: .6rem 1.25rem;
  font-style: italic;
}

.pl-step-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .1s;
}
.pl-step-row:hover { background: var(--sb-s2); }
.pl-step-row.pl-step-row-active {
  background: var(--sb-active);
  border-left: 2px solid var(--accent);
}

.pl-step-order {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sb-s2);
  color: var(--sb-text);
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pl-step-info { flex: 1; min-width: 0; }

.pl-step-name {
  font-size: .85rem;
  color: var(--sb-text-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-step-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .15rem;
  flex-wrap: wrap;
}

.pl-step-var {
  font-size: .72rem;
  font-family: monospace;
  color: var(--accent);
  background: rgba(91,80,232,.12);
  padding: .05rem .35rem;
  border-radius: .2rem;
}

.pl-step-params { font-size: .72rem; color: var(--sb-text); }

.pl-final-badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  background: rgba(245,158,11,.15);
  color: #F59E0B;
  border: 1px solid rgba(245,158,11,.3);
  padding: .05rem .35rem;
  border-radius: .2rem;
  text-transform: uppercase;
}

.pl-step-actions {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-shrink: 0;
}

.pl-step-btn {
  background: none;
  border: none;
  color: var(--sb-text);
  font-size: .82rem;
  padding: .2rem .35rem;
  cursor: pointer;
  border-radius: .25rem;
  transition: background .1s, color .1s;
}
.pl-step-btn:hover { background: var(--sb-s2); color: var(--sb-text-2); }
.pl-step-btn-del:hover { background: rgba(239,68,68,.12); color: #F87171; }

.pl-add-step-btn { margin: .5rem 1.25rem; }

/* ── Inline step editor ── */
.pl-step-editor {
  background: var(--sb-s2);
  border-top: 1px solid var(--sb-border);
  border-bottom: 1px solid var(--sb-border);
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.pl-step-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.pl-step-editor-title {
  font-size: .85rem;
  font-weight: 700;
  color: #EEEEFF;
}

.pl-se-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.pl-se-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
  min-width: 140px;
}
.pl-se-field-half { flex: 1 1 calc(50% - .375rem); }
.pl-se-field-third { flex: 1 1 calc(33.3% - .5rem); }

.pl-se-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--sb-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.pl-se-hint {
  font-size: .72rem;
  font-weight: 400;
  color: var(--sb-text);
  text-transform: none;
  letter-spacing: 0;
}

.pl-se-input {
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  color: var(--sb-text-2);
  font-size: .84rem;
  padding: .42rem .7rem;
  font-family: inherit;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.pl-se-input:focus { outline: none; border-color: var(--accent); color: #EEEEFF; }

.pl-se-textarea {
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  color: var(--sb-text-2);
  font-size: .83rem;
  font-family: monospace;
  padding: .5rem .7rem;
  resize: vertical;
  line-height: 1.55;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.pl-se-textarea:focus { outline: none; border-color: var(--accent); color: #EEEEFF; }
.pl-se-textarea-lg { min-height: 130px; }

.pl-se-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .84rem;
  color: var(--sb-text-2);
}

/* Variable chips */
.pl-vars-row {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}

.pl-var-chip {
  background: rgba(91,80,232,.13);
  border: 1px solid rgba(91,80,232,.25);
  color: #A5A0F8;
  font-size: .72rem;
  font-family: monospace;
  padding: .15rem .45rem;
  border-radius: .25rem;
  cursor: pointer;
  transition: background .1s;
  line-height: 1.5;
}
.pl-var-chip:hover { background: rgba(91,80,232,.26); color: #EEEEFF; }

.pl-se-actions { display: flex; gap: .5rem; padding-top: .15rem; }

/* ── Test section ── */
.pl-test-section {
  border-top: 1px solid var(--sb-border);
  margin-top: .25rem;
  padding-bottom: 1.5rem;
}

.pl-test-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .5rem 1.25rem .6rem;
}

.pl-test-select {
  background: var(--sb-s2);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  color: var(--sb-text-2);
  font-size: .83rem;
  padding: .38rem .65rem;
  font-family: inherit;
  cursor: pointer;
}
.pl-test-select:focus { outline: none; border-color: var(--accent); }

.pl-test-input {
  width: 100%;
  background: var(--sb-s);
  border: none;
  border-top: 1px solid var(--sb-border);
  color: var(--sb-text-2);
  font-size: .84rem;
  font-family: inherit;
  padding: .65rem 1.25rem;
  resize: vertical;
  line-height: 1.55;
  box-sizing: border-box;
}
.pl-test-input:focus { outline: none; color: #EEEEFF; }
.pl-test-input::placeholder { color: var(--sb-text); }

/* Run result */
.pl-run-result {
  margin: .75rem 1.25rem 0;
  background: var(--sb-s2);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.pl-run-result-text {
  padding: .875rem 1rem;
  font-size: .85rem;
  color: var(--sb-text-2);
  white-space: pre-wrap;
  line-height: 1.65;
}

.pl-run-trace { border-top: 1px solid var(--sb-border); font-size: .8rem; }
.pl-run-trace > summary {
  padding: .5rem 1rem;
  cursor: pointer;
  color: var(--sb-text);
  user-select: none;
}
.pl-run-trace > summary:hover { color: var(--sb-text-2); }

.pl-run-calls {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem 1rem .75rem;
}

.pl-run-call {
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.pl-run-call-step {
  padding: .3rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(91,80,232,.08);
  border-bottom: 1px solid var(--sb-border);
}

.pl-run-pre {
  margin: 0;
  padding: .55rem .75rem;
  font-size: .78rem;
  font-family: monospace;
  color: var(--sb-text-2);
  white-space: pre-wrap;
  overflow-x: auto;
  line-height: 1.5;
}

/* ── Light mode overrides ── */
html:not([data-theme="dark"]) .content:has(.pl-wrap) {
  --sb:        #F4F5FA;
  --sb-s:      #FFFFFF;
  --sb-s2:     #EEF0F8;
  --sb-border: #DDE0F0;
  --sb-text:   #8C8CA8;
  --sb-text-2: #52526A;
  --sb-active: #EEEEFF;
}

html:not([data-theme="dark"]) .pl-sidebar      { background: var(--surface); border-color: var(--border); }
html:not([data-theme="dark"]) .pl-sidebar-header { border-color: var(--border); }
html:not([data-theme="dark"]) .pl-sidebar-title { color: var(--text-3); }
html:not([data-theme="dark"]) .pl-item:hover   { background: var(--surface-2); }
html:not([data-theme="dark"]) .pl-item.active  { background: var(--accent-light); border-left-color: var(--accent); }
html:not([data-theme="dark"]) .pl-item-name    { color: var(--text-1); }
html:not([data-theme="dark"]) .pl-item.active .pl-item-name { color: var(--accent-text); }
html:not([data-theme="dark"]) .pl-item-meta    { color: var(--text-3); }
html:not([data-theme="dark"]) .pl-main         { background: var(--bg); }
html:not([data-theme="dark"]) .pl-empty-title  { color: var(--text-1); }
html:not([data-theme="dark"]) .pl-empty-sub    { color: var(--text-3); }
html:not([data-theme="dark"]) .pl-status-row   { color: var(--text-2); }
html:not([data-theme="dark"]) .pl-status-row b { color: var(--text-1); }
html:not([data-theme="dark"]) .pl-help         { color: var(--text-3); }

html:not([data-theme="dark"]) .pl-editor-header  { background: var(--surface); border-color: var(--border); }
html:not([data-theme="dark"]) .pl-name-input     { background: var(--surface-2); border-color: var(--border); color: var(--text-1); }
html:not([data-theme="dark"]) .pl-name-input:focus { border-color: var(--accent); }
html:not([data-theme="dark"]) .pl-activation-row { background: var(--surface); border-color: var(--border); }
html:not([data-theme="dark"]) .pl-act-label      { color: var(--text-2); }
html:not([data-theme="dark"]) .pl-section-label  { color: var(--text-3); }

html:not([data-theme="dark"]) .pl-step-row          { border-color: var(--border-light); }
html:not([data-theme="dark"]) .pl-step-row:hover    { background: var(--surface-2); }
html:not([data-theme="dark"]) .pl-step-row.pl-step-row-active { background: var(--accent-light); border-left-color: var(--accent); }
html:not([data-theme="dark"]) .pl-step-order  { background: var(--surface-3); color: var(--text-3); }
html:not([data-theme="dark"]) .pl-step-name   { color: var(--text-1); }
html:not([data-theme="dark"]) .pl-step-params { color: var(--text-3); }
html:not([data-theme="dark"]) .pl-steps-empty { color: var(--text-3); }
html:not([data-theme="dark"]) .pl-step-btn           { color: var(--text-3); }
html:not([data-theme="dark"]) .pl-step-btn:hover     { background: var(--surface-3); color: var(--text-2); }
html:not([data-theme="dark"]) .pl-step-btn-del:hover { background: var(--err-bg); color: var(--err-text); }

html:not([data-theme="dark"]) .pl-step-editor       { background: var(--surface-2); border-color: var(--border); }
html:not([data-theme="dark"]) .pl-step-editor-title { color: var(--text-1); }
html:not([data-theme="dark"]) .pl-se-label          { color: var(--text-2); }
html:not([data-theme="dark"]) .pl-se-hint           { color: var(--text-3); }
html:not([data-theme="dark"]) .pl-se-input          { background: var(--surface); border-color: var(--border); color: var(--text-1); }
html:not([data-theme="dark"]) .pl-se-input:focus    { color: var(--text-1); }
html:not([data-theme="dark"]) .pl-se-textarea       { background: var(--surface); border-color: var(--border); color: var(--text-1); }
html:not([data-theme="dark"]) .pl-se-textarea:focus { color: var(--text-1); }
html:not([data-theme="dark"]) .pl-se-toggle         { color: var(--text-2); }

html:not([data-theme="dark"]) .pl-test-section { border-color: var(--border); }
html:not([data-theme="dark"]) .pl-test-select  { background: var(--surface); border-color: var(--border); color: var(--text-1); }
html:not([data-theme="dark"]) .pl-test-input   { background: var(--surface); border-color: var(--border); color: var(--text-1); }
html:not([data-theme="dark"]) .pl-test-input:focus { color: var(--text-1); }
html:not([data-theme="dark"]) .pl-test-input::placeholder { color: var(--text-4); }

html:not([data-theme="dark"]) .pl-run-result      { background: var(--surface); border-color: var(--border); }
html:not([data-theme="dark"]) .pl-run-result-text { color: var(--text-1); }
html:not([data-theme="dark"]) .pl-run-trace        { border-color: var(--border); }
html:not([data-theme="dark"]) .pl-run-trace > summary { color: var(--text-3); }
html:not([data-theme="dark"]) .pl-run-call         { background: var(--surface-2); border-color: var(--border); }
html:not([data-theme="dark"]) .pl-run-call-step    { background: var(--accent-light); border-color: var(--border); }
html:not([data-theme="dark"]) .pl-run-pre          { color: var(--text-2); }

/* ══════════════════════════════════════════
   TZ LIBRARY — Библиотека ТЗ
══════════════════════════════════════════ */

.content:has(.tz-wrap) {
  padding: 0;
  max-width: none;
  background: #0D0D14;
}

/* ── Pipeline type badges + new sidebar items ── */
.pl-section-label-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pl-type-create-btn {
  background: none;
  border: 1px solid var(--sb-border, #2a2a3d);
  border-radius: 4px;
  color: var(--sb-text);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  padding: 0 .4rem;
}
.pl-type-create-btn:hover { background: var(--sb-bg2, #1a1a2e); }

.pl-item-empty-type {
  font-size: .75rem;
  color: var(--sb-muted, #555);
  padding: .3rem .75rem .6rem;
  line-height: 1.4;
}

.pl-type-badge {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .5rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.pl-type-badge-generation { background: #1e3a2f; color: #6ee7b7; }
.pl-type-badge-revision    { background: #2d1b4e; color: #c4b5fd; }

/* ── Evolution prompt meta ── */
.evo-prompt-meta {
  margin-top: .5rem;
  border: 1px solid var(--sb-border, #2a2a3d);
  border-radius: 6px;
  overflow: hidden;
  font-size: .8rem;
}
.evo-prompt-meta summary {
  cursor: pointer;
  padding: .4rem .75rem;
  background: var(--sb-bg2, #1a1a2e);
  color: var(--text-2);
  font-size: .78rem;
  user-select: none;
}
.evo-prompt-meta summary:hover { color: var(--text-1); }
.evo-prompt-meta-body { padding: .5rem .75rem; }
.evo-prompt-call { margin-bottom: .75rem; }
.evo-prompt-call-title {
  font-weight: 600;
  font-size: .78rem;
  color: var(--text-2);
  margin-bottom: .25rem;
}
.evo-prompt-detail { margin-bottom: .25rem; }
.evo-prompt-detail summary {
  cursor: pointer;
  font-size: .75rem;
  color: var(--text-3);
  padding: .2rem 0;
  background: none;
  border: none;
}
.evo-prompt-pre {
  background: var(--sb-bg, #0D0D14);
  border: 1px solid var(--sb-border, #2a2a3d);
  border-radius: 4px;
  padding: .5rem .75rem;
  font-size: .75rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  color: var(--text-1);
  margin-top: .25rem;
}

html:not([data-theme="dark"]) .pl-type-badge-generation { background: #d1fae5; color: #065f46; }
html:not([data-theme="dark"]) .pl-type-badge-revision    { background: #ede9fe; color: #5b21b6; }
html:not([data-theme="dark"]) .evo-prompt-meta summary   { background: #F3F4F6; }
html:not([data-theme="dark"]) .evo-prompt-pre            { background: #F9FAFB; border-color: #E5E7EB; }

.tz-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.tz-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* Sidebar */
.tz-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--sb-border);
  overflow-y: auto;
  background: var(--sb-s);
  display: flex;
  flex-direction: column;
}
.tz-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .875rem .5rem;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.tz-sidebar-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--sb-text);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tz-list { display: flex; flex-direction: column; }
.tz-list-empty {
  font-size: .82rem;
  color: var(--sb-text);
  padding: .875rem;
  font-style: italic;
}
.tz-item {
  padding: .55rem .875rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .12s;
}
.tz-item:hover { background: var(--sb-s2); }
.tz-item.active { background: var(--sb-active); border-left-color: var(--accent); }
.tz-item-name {
  font-size: .84rem;
  color: var(--sb-text-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tz-item.active .tz-item-name { color: #EEEEFF; }
.tz-item-meta { font-size: .72rem; color: var(--sb-text); margin-top: .1rem; }

/* Main */
.tz-main { flex: 1; min-width: 0; overflow-y: auto; background: var(--sb); }

/* Empty state */
.tz-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  gap: .75rem;
  min-height: 400px;
}
.tz-empty-icon { font-size: 2.5rem; opacity: .35; }
.tz-empty-title { font-size: 1.05rem; font-weight: 700; color: var(--sb-text-2); }
.tz-empty-sub {
  font-size: .83rem;
  color: var(--sb-text);
  max-width: 440px;
  line-height: 1.55;
}

/* Editor */
.tz-editor { display: flex; flex-direction: column; }
.tz-editor-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem .75rem;
  border-bottom: 1px solid var(--sb-border);
  background: var(--sb-s);
  flex-wrap: wrap;
}
.tz-name-input {
  flex: 1;
  min-width: 160px;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  color: #EEEEFF;
  font-size: .9rem;
  font-weight: 600;
  padding: .4rem .75rem;
  font-family: inherit;
  transition: border-color .15s;
}
.tz-name-input:focus { outline: none; border-color: var(--accent); }
.tz-editor-actions { display: flex; gap: .5rem; }
.tz-danger-btn { color: #F87171 !important; }
.tz-danger-btn:hover { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.3) !important; }

/* Field */
.tz-field {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.tz-field-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--sb-text);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.tz-hint { font-size: .72rem; color: var(--sb-text); text-transform: none; font-weight: 400; letter-spacing: 0; }
.tz-voice-row { display: flex; align-items: center; gap: .35rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tz-rec-status { font-size: .75rem; color: var(--sb-text); }
.tz-textarea {
  width: 100%;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  color: var(--sb-text-2);
  font-size: .84rem;
  font-family: inherit;
  padding: .6rem .8rem;
  resize: vertical;
  line-height: 1.6;
  transition: border-color .15s;
  box-sizing: border-box;
}
.tz-textarea:focus { outline: none; border-color: var(--accent); color: #EEEEFF; }
.tz-textarea::placeholder { color: var(--sb-text); }
.tz-upload-btn {
  cursor: pointer;
  font-size: .75rem !important;
  padding: .22rem .6rem !important;
}

/* Attachments */
.tz-att-empty { font-size: .8rem; color: var(--sb-text); font-style: italic; }
.tz-attachments { display: flex; flex-direction: column; gap: .35rem; }
.tz-att-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--sb-s2);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-xs);
  padding: .35rem .65rem;
}
.tz-att-icon { font-size: .9rem; flex-shrink: 0; }
.tz-att-name {
  flex: 1;
  min-width: 0;
  font-size: .8rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tz-att-name:hover { text-decoration: underline; }
.tz-att-size { font-size: .72rem; color: var(--sb-text); white-space: nowrap; }
.tz-att-del {
  background: none;
  border: none;
  color: var(--sb-text);
  cursor: pointer;
  font-size: .8rem;
  padding: .1rem .25rem;
  border-radius: .2rem;
  flex-shrink: 0;
}
.tz-att-del:hover { background: rgba(239,68,68,.12); color: #F87171; }

/* ── TZ Picker Modal ── */
.tz-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 1rem;
}
.tz-picker-modal {
  background: var(--sb-s);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-md);
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.tz-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem .75rem;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.tz-picker-title {
  font-size: .9rem;
  font-weight: 700;
  color: #EEEEFF;
}
.tz-picker-close {
  background: none;
  border: none;
  color: var(--sb-text);
  font-size: 1rem;
  cursor: pointer;
  padding: .1rem .4rem;
  border-radius: .25rem;
}
.tz-picker-close:hover { background: var(--sb-s2); color: var(--sb-text-2); }
.tz-picker-search {
  margin: .75rem 1rem .5rem;
  background: var(--sb);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-sm);
  color: var(--sb-text-2);
  font-size: .84rem;
  padding: .42rem .7rem;
  font-family: inherit;
  flex-shrink: 0;
}
.tz-picker-search:focus { outline: none; border-color: var(--accent); color: #EEEEFF; }
.tz-picker-search::placeholder { color: var(--sb-text); }
.tz-picker-list { overflow-y: auto; flex: 1; padding: .25rem 0 .5rem; }
.tz-picker-empty {
  font-size: .84rem;
  color: var(--sb-text);
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-style: italic;
}
.tz-picker-item {
  padding: .6rem 1.25rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .1s;
}
.tz-picker-item:hover { background: var(--sb-s2); border-left-color: var(--accent); }
.tz-picker-item-name {
  font-size: .85rem;
  color: var(--sb-text-2);
  font-weight: 500;
}
.tz-picker-item:hover .tz-picker-item-name { color: #EEEEFF; }
.tz-picker-item-meta { font-size: .72rem; color: var(--sb-text); margin-top: .1rem; }

/* ── Light mode overrides ── */
html:not([data-theme="dark"]) .content:has(.tz-wrap) {
  --sb: #F4F5FA; --sb-s: #FFFFFF; --sb-s2: #EEF0F8;
  --sb-border: #DDE0F0; --sb-text: #8C8CA8; --sb-text-2: #52526A;
  --sb-active: #EEEEFF;
}
html:not([data-theme="dark"]) .tz-sidebar   { background: var(--surface); border-color: var(--border); }
html:not([data-theme="dark"]) .tz-sidebar-header { border-color: var(--border); }
html:not([data-theme="dark"]) .tz-sidebar-title  { color: var(--text-3); }
html:not([data-theme="dark"]) .tz-item:hover     { background: var(--surface-2); }
html:not([data-theme="dark"]) .tz-item.active    { background: var(--accent-light); }
html:not([data-theme="dark"]) .tz-item-name      { color: var(--text-1); }
html:not([data-theme="dark"]) .tz-item.active .tz-item-name { color: var(--accent-text); }
html:not([data-theme="dark"]) .tz-item-meta      { color: var(--text-3); }
html:not([data-theme="dark"]) .tz-main           { background: var(--bg); }
html:not([data-theme="dark"]) .tz-empty-title    { color: var(--text-1); }
html:not([data-theme="dark"]) .tz-empty-sub      { color: var(--text-3); }
html:not([data-theme="dark"]) .tz-editor-header  { background: var(--surface); border-color: var(--border); }
html:not([data-theme="dark"]) .tz-name-input     { background: var(--surface-2); border-color: var(--border); color: var(--text-1); }
html:not([data-theme="dark"]) .tz-field          { border-color: var(--border); }
html:not([data-theme="dark"]) .tz-field-label    { color: var(--text-2); }
html:not([data-theme="dark"]) .tz-textarea       { background: var(--surface); border-color: var(--border); color: var(--text-1); }
html:not([data-theme="dark"]) .tz-textarea:focus { color: var(--text-1); }
html:not([data-theme="dark"]) .tz-textarea::placeholder { color: var(--text-4); }
html:not([data-theme="dark"]) .tz-att-empty      { color: var(--text-3); }
html:not([data-theme="dark"]) .tz-att-row        { background: var(--surface-2); border-color: var(--border); }
html:not([data-theme="dark"]) .tz-att-size       { color: var(--text-3); }
html:not([data-theme="dark"]) .tz-att-del        { color: var(--text-3); }
html:not([data-theme="dark"]) .tz-rec-status     { color: var(--text-3); }

html:not([data-theme="dark"]) .tz-picker-modal {
  background: var(--surface);
  border-color: var(--border);
}
html:not([data-theme="dark"]) .tz-picker-header  { border-color: var(--border); }
html:not([data-theme="dark"]) .tz-picker-title   { color: var(--text-1); }
html:not([data-theme="dark"]) .tz-picker-search  { background: var(--surface-2); border-color: var(--border); color: var(--text-1); }
html:not([data-theme="dark"]) .tz-picker-item:hover { background: var(--surface-2); }
html:not([data-theme="dark"]) .tz-picker-item-name  { color: var(--text-1); }
html:not([data-theme="dark"]) .tz-picker-item-meta  { color: var(--text-3); }

/* ── Socials Dashboard ──────────────────────────────────────────────────────── */

/* Empty state */
.social-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}
.social-empty h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.social-empty p  { font-size: .875rem; color: var(--text-2); margin-bottom: 1.75rem; max-width: 340px; }
.social-empty-connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  width: 100%;
  max-width: 400px;
}
.social-empty-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0 1.5rem;
}

/* Stat cards */
.social-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.social-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  position: relative;
}
.social-stat-platform {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: .15rem;
}
.social-stat-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-stat-row {
  display: flex;
  gap: 1.25rem;
  margin-top: .35rem;
}
.social-stat-item { display: flex; flex-direction: column; }
.social-stat-num  { font-size: 1.25rem; font-weight: 700; color: var(--text-1); line-height: 1.1; }
.social-stat-label { font-size: .7rem; color: var(--text-3); margin-top: .1rem; }
.social-stat-refresh {
  position: absolute;
  top: .6rem;
  right: .6rem;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: .9rem;
  padding: .2rem .35rem;
  border-radius: var(--r-xs);
  transition: color .15s, background .15s;
}
.social-stat-refresh:hover { color: var(--text-1); background: var(--surface-3); }

/* Feed */
.social-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.social-feed-title { font-size: .95rem; font-weight: 600; color: var(--text-1); }

.feed-filter-bar {
  display: flex;
  gap: .35rem;
  align-items: center;
}
.feed-filter-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .2rem .75rem;
  font-size: .78rem;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.feed-filter-btn:hover { background: var(--surface-3); }
.feed-filter-btn.active {
  background: var(--accent-light);
  color: var(--accent-text);
  border-color: transparent;
  font-weight: 500;
}

.pub-feed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
}
.pub-feed-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .45rem;
  font-size: .78rem;
  color: var(--text-3);
}
.pub-feed-meta-platform {
  font-weight: 500;
  color: var(--text-2);
}
.pub-feed-text {
  font-size: .87rem;
  color: var(--text-1);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.pub-feed-sentinel { height: 1px; }
.pub-feed-loading  { text-align: center; padding: 1rem; color: var(--text-3); font-size: .85rem; }

/* Links section (bottom) */
.social-links-section {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 1rem;
}
.social-links-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.social-links-title { font-size: .85rem; font-weight: 600; color: var(--text-2); }