/* ============================================================
   ПЕРВЫЙ ЭКРАН CRM (30.09.2026): канбан сделок в окне приложения.
   Фон — тонкая «миллиметровка» в цвете направления справа.
   ============================================================ */
.crh__bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(var(--accent-rgb), .07) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(var(--accent-rgb), .07) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image:radial-gradient(60% 80% at 78% 48%, #000 30%, transparent 78%);
          mask-image:radial-gradient(60% 80% at 78% 48%, #000 30%, transparent 78%);
}
.crh__board{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 1px 2px rgba(13,15,32,.05), 0 40px 80px -40px rgba(60,20,10,.35);
  overflow:hidden;
}
.crh__bar{ display:flex; align-items:baseline; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.crh__bar b{ font:700 15px/1 var(--font); color:var(--fg); }
.crh__bar span{ font-size:12.5px; color:var(--fg-mute); }
.crh__bar i{ margin-left:auto; width:70px; height:8px; border-radius:3px; background:#e3e5ea; }
.crh__cols{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; padding:14px; min-height:clamp(330px, 30vw, 400px); }
.crh__col{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.crh__ch{ display:flex; align-items:center; justify-content:space-between; margin:0 0 4px; padding:7px 9px; border-radius:4px; background:var(--surface-2); font:600 12px/1.2 var(--font); color:var(--fg); }
.crh__col:last-child .crh__ch{ background:#e7f5ee; color:#17744a; }
.crh__n{ font:600 11px/1 var(--font-mono); font-style:normal; color:var(--fg-mute); }
.crh__list{ display:flex; flex-direction:column; gap:8px; }
.crh__card{
  display:grid; gap:6px; padding:10px; border-radius:6px;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent-1);
  box-shadow:0 2px 6px rgba(13,15,32,.06);
  font:600 12px/1.25 var(--font); color:var(--fg);
  will-change:transform;
}
.crh__card small{ font:500 10.5px/1 var(--font-mono); color:var(--accent-1); letter-spacing:.03em; }
.crh__card i{ display:block; height:5px; border-radius:3px; background:#e8eaef; }
.crh__card i + i{ width:60%; }
.crh__card.is-paid{ border-left-color:#1f9d5a; }
.crh__card.is-paid small{ color:#17744a; }
.crh__card.is-new{ animation:crh-in .45s cubic-bezier(.2,.8,.2,1); }
.crh__card.is-out{ opacity:0; transform:scale(.9); transition:opacity .3s, transform .3s; }
@keyframes crh-in{ from{ opacity:0; transform:translateY(-10px) scale(.96); } }
/* сработавшая автоматизация — плашка внизу доски */
.crh__auto{
  position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:5px; background:#16202a; color:#fff;
  font:600 12.5px/1.2 var(--font); box-shadow:0 12px 26px -10px rgba(0,0,0,.5);
  opacity:0; transform:translateY(8px); transition:opacity .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1);
}
.crh__auto i{ width:14px; height:14px; border-radius:3px; background:var(--accent-2); clip-path:polygon(40% 0, 100% 0, 60% 42%, 100% 42%, 20% 100%, 45% 55%, 0 55%); }
.crh__auto.is-on{ opacity:1; transform:none; }
@media (max-width: 640px){
  .crh__cols{ grid-template-columns:repeat(4, 150px); overflow-x:auto; }
}
@media (prefers-reduced-motion: reduce){ .crh__card.is-new{ animation:none; } }