/* ============ RIGHT COLUMN: CHANGE LOG ============ */
.ss-right {
  background:var(--bg);
  padding:var(--w2-s7) var(--w2-s7);
  border-left:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:var(--w2-s6);
}

/* Right column: command palette trigger */
.ss-right-cmd {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  padding:var(--w2-s3) var(--w2-s3);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  background:var(--surface-el);
  color:var(--text-dim);
  font:500 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  cursor:pointer;
  transition: color .16s, background-color .16s, border-color .16s, box-shadow .16s, transform .16s, opacity .16s;
}

.ss-right-cmd:hover {
  border-color:var(--green-soft);
  color:var(--text)
}

.ss-right-cmd svg {
  width:max(12px,0.73vw);
  height:max(12px,0.73vw);
  color:var(--text-dim);
  stroke-width:2;
  fill:none;
  stroke:currentColor
}

.ss-right-cmd-key {
  margin-left:auto;
  padding:var(--w2-s1) var(--w2-s2);
  border:1px solid var(--border);
  border-radius:var(--w2-s1);
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.08em;
  color:var(--text-mute);
  background:var(--bg);
}

.ss-right-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--w2-s3);
  margin-top:var(--w2-s2);
  padding-bottom:var(--w2-s4);
  border-bottom:1px solid rgba(255,255,255,.06)
}

.ss-right-title {
  font:600 14px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.35);
  letter-spacing:.15em;
  text-transform:uppercase
}

@keyframes pulse {
  0%,100% {
    opacity:1
  }

  50% {
    opacity:.5
  }

}

.ss-right-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--w2-s2);
  padding:var(--w2-s2) var(--w2-s3);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--w2-s2);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.5);
  font:500 14px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s;
  text-decoration:none
}

.ss-right-link:hover {
  border-color:rgba(200,241,53,.3);
  background:rgba(200,241,53,.06);
  color:var(--green);
  box-shadow:0 0 10px rgba(200,241,53,.08)
}

.log-stream {
  display:flex;
  flex-direction:column;
  position:relative;
  flex:1;
  min-height:10.4vw
}

.log-stream::before {
  content:'';
  position:absolute;
  left:var(--w2-s1);
  top:var(--w2-s4);
  bottom:var(--w2-s4);
  width:1px;
  background:linear-gradient(to bottom,var(--border-hi),var(--border),transparent);
}

.log-item {
  padding:var(--w2-s3) 0 var(--w2-s3) var(--w2-s6);
  position:relative;
  border-bottom:1px dashed var(--border);
  cursor:pointer;
  transition: background-color .14s;
}

.log-item:last-child {
  border-bottom:0
}

.log-item:hover {
  background:var(--surface-el);
  margin:0 -var(--w2-s2);
  padding-left:var(--w2-s7);
  padding-right:var(--w2-s2);
  border-radius:var(--w2-s2)
}

.log-item::before {
  content:'';
  position:absolute;
  left:var(--w2-s1);
  top:var(--w2-s3);
  width:max(10px,0.42vw);
  height:max(10px,0.42vw);
  border-radius:50%;
  background:var(--text-dim);
  border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--border-hi);
  transition: background-color .14s, box-shadow .14s;
}

.log-item:hover::before {
  background:var(--green);
  box-shadow:0 0 0 1px var(--green);
  left:var(--w2-s2)
}

.log-item.minor::before {
  background:var(--text-mute);
  box-shadow:0 0 0 1px var(--border-hi)
}

.log-item-top {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--w2-s2)
}

.log-item-section {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim)
}

.log-item-time {
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim)
}

.log-item-msg {
  font:500 12px/1.4 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  margin-top:var(--w2-s1)
}

.log-item-detail {
  font:400 12px/1.35 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute);
  margin-top:var(--w2-s1)
}

.log-item-detail .old {
  color:var(--text-dim);
  text-decoration:line-through;
  margin-right:var(--w2-s2)
}

.log-item-detail .arr {
  color:var(--text-dim);
  margin:0 var(--w2-s1)
}

.log-item-detail .new {
  color:var(--green);
  font-weight:600
}

.log-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex:1;
  padding:var(--w2-s9) var(--w2-s5);
  text-align:center;
  color:var(--text-dim);
}

.log-empty svg {
  width:max(43px,2.5vw);
  height:max(43px,2.5vw);
  opacity:.3;
  margin-bottom:var(--w2-s3);
  stroke:currentColor;
  stroke-width:1.5;
  fill:none
}

.log-empty .t {
  font:600 14px/1.3 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute);
  margin-bottom:var(--w2-s1)
}

.log-empty .s {
  font:400 12px/1.4 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  max-width:10.4vw
}

/* ============ SCREEN: FULL LOG ============ */
.log-page {
  max-width:1200px;
  margin:0 auto;
  padding:var(--w2-s8) var(--w2-s8) var(--w2-s9)
}

.log-filters {
  display:flex;
  gap:var(--w2-s3);
  flex-wrap:wrap;
  margin-bottom:var(--w2-s6);
  padding-bottom:var(--w2-s5);
  border-bottom:1px solid var(--border)
}

.log-filter-group {
  display:flex;
  gap:var(--w2-s2);
  align-items:center
}

.log-filter-group .lbl {
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-right:var(--w2-s1)
}

.log-table {
  width:100%;
  border-collapse:collapse
}

.log-table thead th {
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim);
  text-align:left;
  padding:var(--w2-s3) var(--w2-s4);
  border-bottom:1px solid var(--border);
}

.log-table tbody tr {
  cursor:pointer;
  transition: background-color .12s;
  border-bottom:1px solid var(--border)
}

.log-table tbody tr:hover {
  background:var(--surface-el)
}

.log-table tbody td {
  padding:var(--w2-s3) var(--w2-s4);
  font:500 13px/1.3 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text)
}

.log-table td.sm {
  font-size:12px;
  color:var(--text-mute);
  font-family:'JetBrains Mono',monospace
}

.log-table td .dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  margin-right:var(--w2-s2);
  vertical-align:middle
}

/* ============ SCREEN: DIFF / DETAIL ============ */
.detail-page {
  max-width:900px;
  margin:0 auto;
  padding:var(--w2-s8) var(--w2-s8) var(--w2-s9)
}

.detail-hero {
  padding:var(--w2-s6) var(--w2-s7);
  border:1px solid var(--border);
  border-radius:var(--w2-s4);
  background:var(--surface-el);
  margin-bottom:var(--w2-s6)
}

.detail-hero-top {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:var(--w2-s3);
  flex-wrap:wrap;
  gap:var(--w2-s3)
}

.detail-hero-title {
  font:700 22px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing:-.01em
}

.detail-hero-meta {
  display:flex;
  gap:var(--w2-s5);
  flex-wrap:wrap;
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-mute);
  letter-spacing:.04em
}

.detail-hero-meta b {
  color:var(--text);
  font-weight:600
}

.diff-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--w2-s3);
  margin-bottom:var(--w2-s6)
}

.diff-col {
  padding:var(--w2-s5) var(--w2-s5);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  background:var(--surface-el)
}

.diff-col.before {
  border-color:rgba(241,70,44,.2);
  background:rgba(241,70,44,.04)
}

.diff-col.after {
  border-color:rgba(200,241,53,.25);
  background:rgba(200,241,53,.04)
}

.diff-col .h {
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:var(--w2-s3);
  display:flex;
  align-items:center;
  gap:var(--w2-s2)
}

.diff-col.before .h {
  color:var(--error)
}

.diff-col.after .h {
  color:var(--green)
}

.diff-col .val {
  font:700 22px/1.2 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text);
  letter-spacing:-.01em;
  word-break:break-all
}

.diff-col .unit {
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  margin-left:var(--w2-s2)
}

/* ============ COMMAND PALETTE ============ */
.cmdp-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  z-index:1000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:12vh
}

.cmdp-overlay.open {
  display:flex
}

.cmdp-box {
  width:640px;
  max-width:90vw;
  background:#26282B;
  border:1px solid var(--border-hi);
  border-radius:var(--w2-s4);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 40px rgba(200,241,53,.1)
}

.cmdp-inp-wrap {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  padding:var(--w2-s5) var(--w2-s5);
  border-bottom:1px solid var(--border)
}

.cmdp-inp-wrap svg {
  width:18px;
  height:18px;
  color:var(--green);
  stroke:currentColor;
  stroke-width:2;
  fill:none
}

.cmdp-inp {
  flex:1;
  background:transparent;
  border:0;
  color:var(--text);
  font:500 16px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  outline:0
}

.cmdp-inp::placeholder {
  color:var(--text-dim)
}

.cmdp-key-hint {
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  padding:var(--w2-s1) var(--w2-s2);
  border:1px solid var(--border);
  border-radius:var(--w2-s1)
}

.cmdp-body {
  max-height:50vh;
  overflow-y:auto
}

.cmdp-group {
  padding:var(--w2-s2) 0
}

.cmdp-group-lbl {
  padding:var(--w2-s3) var(--w2-s5) var(--w2-s1);
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim)
}

.cmdp-item {
  display:flex;
  align-items:center;
  gap:var(--w2-s4);
  padding:var(--w2-s3) var(--w2-s5);
  cursor:pointer
}

.cmdp-item:hover,.cmdp-item.focused {
  background:var(--green-ghost)
}

.cmdp-item-ic {
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  flex-shrink:0
}

.cmdp-item-ic svg {
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:2;
  fill:none
}

.cmdp-item-txt {
  flex:1;
  min-width:0
}

.cmdp-item-ttl {
  font:500 13px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text)
}

.cmdp-item-sub {
  font:500 11px/1.2 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  margin-top:var(--w2-s1);
  letter-spacing:.04em
}

.cmdp-item-hint {
  font:500 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  padding:var(--w2-s1) var(--w2-s2);
  border:1px solid var(--border);
  border-radius:var(--w2-s1)
}

.cmdp-footer {
  display:flex;
  justify-content:space-between;
  padding:var(--w2-s3) var(--w2-s5);
  border-top:1px solid var(--border);
  font:500 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  letter-spacing:.04em
}

.cmdp-footer span {
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s2)
}

.cmdp-footer kbd {
  font-family:'JetBrains Mono',monospace;
  padding:var(--w2-s1) var(--w2-s2);
  border:1px solid var(--border);
  border-radius:var(--w2-s1);
  color:var(--text-mute)
}

/* ============ PRESETS ============ */
.presets-page {
  max-width:1100px;
  margin:0 auto;
  padding:var(--w2-s8) var(--w2-s8) var(--w2-s9)
}

.preset-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--w2-s4)
}

.preset-card {
  padding:var(--w2-s5) var(--w2-s6);
  border:1px solid var(--border);
  border-radius:var(--w2-s4);
  background:linear-gradient(135deg,var(--surface-el),transparent 70%);
  display:flex;
  flex-direction:column;
  gap:var(--w2-s4);
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
  cursor:pointer;
}

.preset-card:hover {
  border-color:var(--border-hi);
  transform:translateY(-2px)
}

.preset-card.current {
  border-color:var(--green);
  box-shadow:0 0 30px rgba(200,241,53,.08)
}

.preset-card.current::before {
  content:'АКТИВНЫЙ';
  position:absolute
}

.preset-card-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline
}

.preset-card-name {
  font:700 15px/1.2 'Inter',sans-serif
}

.preset-card-ver {
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  letter-spacing:.08em
}

.preset-card-desc {
  font:400 12px/1.5 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute)
}

.preset-card-stats {
  display:flex;
  gap:var(--w2-s4);
  font:500 11px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim)
}

.preset-card-stats b {
  color:var(--text);
  font-weight:600
}

.preset-card-foot {
  display:flex;
  gap:var(--w2-s2);
  margin-top:auto;
  padding-top:var(--w2-s3);
  border-top:1px dashed var(--border)
}

/* ============ MOBILE VIEW DEMO ============ */
.mobile-demo-wrap {
  max-width:460px;
  margin:var(--w2-s8) auto;
  background:var(--surface-el);
  border:1px solid var(--border);
  border-radius:var(--w2-s7);
  padding:var(--w2-s4);
  position:relative;
}

.mobile-demo-frame {
  height:720px;
  border-radius:var(--w2-s5);
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--border);
  position:relative;
  display:flex;
  flex-direction:column;
}

.mobile-demo-topbar {
  padding:var(--w2-s4) var(--w2-s4);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:var(--w2-s3)
}

.mobile-demo-burger {
  width:22px;
  height:22px;
  display:flex;
  flex-direction:column;
  gap:var(--w2-s1);
  justify-content:center
}

.mobile-demo-burger span {
  height:2px;
  background:var(--text);
  border-radius:var(--w2-s1);
  display:block
}

.mobile-demo-burger span:nth-child(2) {
  width:70%
}

.mobile-demo-title {
  font:700 14px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  flex:1
}

.mobile-demo-tabs {
  display:flex;
  overflow-x:auto;
  padding:var(--w2-s3) var(--w2-s2);
  gap:var(--w2-s2);
  border-bottom:1px solid var(--border);
  scrollbar-width:none
}

.mobile-demo-tabs::-webkit-scrollbar {
  display:none
}

.mobile-demo-tab {
  padding:var(--w2-s2) var(--w2-s3);
  border-radius:var(--w2-s5);
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-mute);
  white-space:nowrap;
  flex-shrink:0;
  border:1px solid var(--border)
}

.mobile-demo-tab.active {
  background:var(--green-ghost);
  color:var(--green);
  border-color:var(--green)
}

.mobile-demo-content {
  flex:1;
  overflow-y:auto;
  padding:var(--w2-s4)
}

.mobile-demo-fab {
  position:absolute;
  right:var(--w2-s4);
  bottom:var(--w2-s4);
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--green);
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(200,241,53,.3),0 0 20px var(--green-glow)
}

.mobile-demo-fab svg {
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:2.5;
  fill:none
}

.mobile-demo-note {
  text-align:center;
  margin-top:var(--w2-s6);
  font:500 11px/1.4 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  letter-spacing:.1em;
  text-transform:uppercase
}

/* ============ HEADERS / PAGE-LEVEL ============ */
.page-hero-big {
  max-width:57vw;
  margin:0 auto;
  padding:var(--w2-s7) var(--w2-s9) var(--w2-s6);
  border-bottom:1px solid var(--border)
}

.page-hero-big .ss-page-title {
  font-size:16px
}

.back-link {
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s2);
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:var(--w2-s4);
  cursor:pointer;
  transition:color .15s
}

.back-link:hover {
  color:var(--green)
}

.back-link svg {
  width:max(10px,0.52vw);
  height:max(10px,0.52vw);
  stroke:currentColor;
  stroke-width:2.5;
  fill:none
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px) {
  /* Ссылка возврата была высотой 11 px — пальцем не попасть (докрутка 15.08.2026). */
  .page-hero-big .back-link {
    display:inline-flex;
    align-items:center;
    min-height:var(--w2-s8);
  }


  .screen-settings {
    grid-template-columns:1fr;
    gap:0
  }

  .ss-left,.ss-right {
    border:0
  }

  .ss-left {
    border-bottom:1px solid var(--border);
    padding:var(--w2-s4)
  }

  .ss-right {
    border-top:1px solid var(--border)
  }

  .ss-center {
    padding:var(--w2-s4) var(--w2-s4) var(--w2-s9)
  }

  .diff-grid {
    grid-template-columns:1fr
  }

}

/* ============ UTILITIES ============ */
.muted {
  color:var(--text-mute)
}

.dim {
  color:var(--text-dim)
}

.green {
  color:var(--green)
}

.hstack {
  display:flex;
  gap:var(--w2-s3);
  align-items:center
}

.vstack {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s3)
}

.grow {
  flex:1
}

.sm {
  font-size:11px
}

.mono {
  font-family:'JetBrains Mono',monospace
}

.divider {
  height:1px;
  background:var(--border);
  margin:var(--w2-s5) 0
}

.spacer-lg {
  height:40px
}

.spacer-md {
  height:20px
}

/* Micro utility to disable danger */
.disabled {
  opacity:.4;
  pointer-events:none
}