.flow-notice{padding:16px 20px;border-left:4px solid #5a83b5;border-radius:0 8px 8px 0;background:#eff3f9;color:#50637b;line-height:1.75;font-size:13px;margin-bottom:18px}.flow-tools{display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:12px;align-items:center;margin:18px 0}.flow-tools input{padding:12px;border:1px solid #d7e0ea;border-radius:9px;background:#fff;font-size:13px}.flow-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.flow-filters button{border:1px solid #d6dfea;padding:9px 13px;border-radius:20px;color:#556982;background:#fff;cursor:pointer}.flow-filters button.active{background:#4a77ae;color:#fff}.flow-record{padding:22px;background:#fff;border:1px solid #dde4ec;border-radius:12px;margin-bottom:16px}.flow-record-header{display:flex;justify-content:space-between;gap:18px;align-items:start;margin-bottom:18px}.flow-record h2{font-size:18px;color:#324255;line-height:1.5;margin:0}.flow-record small{font-size:12px;color:#7a8899;line-height:1.8;display:block}.flow-contact{font-size:12px;color:#647283;margin:6px 0;overflow-wrap:anywhere}.flow-record-meta{font-size:12px;text-align:right;color:#7d8b9c;min-width:100px}.flow-stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:16px 0}.flow-stage{border:1px solid #e1e6ed;border-radius:9px;padding:12px;background:#f8fafc;min-width:0}.flow-stage .stage-label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#7f8ea1;display:block}.flow-stage strong{display:block;font-size:13px;line-height:1.5;color:#4e5e72;margin:5px 0}.flow-stage small{font-size:11px;overflow-wrap:anywhere;line-height:1.6}.flow-stage.done{background:#eef7f0;border-color:#d6e9dc}.flow-stage.done strong{color:#3d7354}.flow-stage.pending{background:#fff8ee;border-color:#f0e2c9}.flow-stage.pending strong{color:#9a7136}.flow-stage button{font-size:11px;line-height:1.6;text-align:left}.flow-next{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid #e8edf4;padding-top:15px;margin-top:16px}.flow-next p{font-size:13px;color:#5a6a7d;line-height:1.7;margin:0}.flow-next b{color:#364b64}.flow-next ul{list-style:none;padding:0;margin:5px 0;font-size:12px;color:#a5783a}.flow-next li{padding:3px 0}.flow-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.flow-empty{padding:35px;border:1px dashed #ccd8e7;border-radius:10px;text-align:center;font-size:13px;color:#78889b}.flow-pages{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:20px 0;font-size:12px;color:#6f7e91}.flow-summary{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;margin-bottom:18px}.flow-summary span{background:#eaf0f7;color:#59779c;border-radius:8px;padding:8px 12px}.flow-related{font-size:12px;color:#728092}.flow-related summary{cursor:pointer;margin:10px 0}.flow-related ul{padding-left:18px;line-height:1.8}.flow-error{padding:18px;color:#a6354e;border:1px solid #edc7d0;border-radius:9px;background:#fff7f9}#modal .flow-stage-list{display:grid;gap:12px}.flow-stage-list article{border:1px solid #dee6ef;border-radius:9px;padding:14px}.flow-stage-list h3{font-size:14px;margin:0 0 8px}.flow-stage-list p{font-size:12px;line-height:1.7;margin:5px 0}@media(max-width:1050px){.flow-stages{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.flow-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-record{padding:16px}.flow-record-header,.flow-next{display:block}.flow-record-meta{text-align:left;margin-top:8px}.flow-tools{grid-template-columns:1fr}.flow-next .primary{margin-top:12px}.flow-pages{flex-wrap:wrap}}
.flow-filters[hidden]{display:none}
.flow-view{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.flow-view [aria-pressed="true"]{background:var(--purple,#4a77ae);border-color:transparent;color:var(--bg,#fff)}
.flow-board{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;max-width:100%;padding:4px 4px 14px;scroll-padding:4px}
.flow-board-column{flex:0 0 min(260px,80vw);min-width:0;min-height:160px;padding:12px;background:var(--crm-surface-soft,#f1f5fa);border:1px solid var(--crm-line,#dde4ec);border-radius:10px}
.flow-board-column h2{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;margin:0 0 12px;color:var(--crm-text,#324255)}
.flow-board-column h2 span{font-size:12px;color:var(--crm-subtle,#50637b)}
.flow-board-card{padding:12px;margin:0 0 8px;border:1px solid var(--crm-line,#dde4ec);border-radius:8px;background:var(--crm-surface,#fff);overflow-wrap:anywhere}
.flow-board-card[draggable="true"]{cursor:grab}
.flow-board-card[draggable="true"]:active{cursor:grabbing}
.flow-board-card h3{margin:0 0 4px;font-size:14px}
.flow-board-card h3 button{text-align:left;font-size:inherit}
.flow-board-card small,.flow-board-card p{display:block;font-size:12px;color:var(--crm-subtle,#50637b)}
.flow-board-card p{margin:8px 0}
.flow-board-action{display:grid;gap:5px;padding-top:8px;margin-top:8px;border-top:1px solid var(--crm-line,#dde4ec)}
.flow-board-action span{font-size:12px;color:var(--crm-subtle,#50637b)}
.flow-board-action button{text-align:left;white-space:normal}
.flow-board-destination{outline:2px dashed var(--crm-accent,#4a77ae);outline-offset:-3px}

.flow-postits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1.8rem 1.65rem;
  padding: 1.4rem .8rem 1.8rem;
}

.flow-postits .flow-postit {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 14.5rem;
  margin: 0;
  padding: 1.7rem 1.15rem 2.25rem;
  border: 1px solid #d8b94b;
  border-radius: 1px 2px 1px 3px;
  background:
    repeating-linear-gradient(37deg, #704f0007 0 1px, transparent 1px 4px),
    linear-gradient(152deg, #fff497 0%, #ffea76 49%, #ffdf58 86%, #e7b52f 100%);
  color: #3b290d;
  box-shadow: inset 0 1px 0 #fff9cd, 0 2px 0 #b58c28,
    3px 7px 5px -3px #51350373, 8px 13px 14px -6px #3e2d136e;
  transform: rotate(-2.3deg);
}

.flow-postits .flow-postit:nth-child(3n + 2) { transform: rotate(1.8deg); }
.flow-postits .flow-postit:nth-child(3n + 3) { transform: rotate(-.8deg); }

.flow-postit::before {
  content: "";
  position: absolute;
  top: -.78rem;
  left: 50%;
  width: 5.2rem;
  height: 1.5rem;
  transform: translateX(-50%) rotate(-5deg);
  background: linear-gradient(175deg, #fff5d2de, #d5b678ba);
  border-top: 1px solid #fff7d9;
  border-bottom: 1px solid #ad8b48a6;
  clip-path: polygon(0 0, 99% 0, 96% 14%, 100% 27%, 96% 43%, 100% 55%, 96% 70%, 100% 85%, 98% 100%, 0 100%, 4% 83%, 0 69%, 4% 56%, 0 42%, 4% 27%, 0 12%);
  pointer-events: none;
}

.flow-postit:nth-child(even)::before { transform: translateX(-50%) rotate(4deg); }

.flow-postit::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 2.15rem;
  height: 2.15rem;
  background: linear-gradient(135deg, #c69b2a 44%, #fff5b0 49%, #ffe376 57%, #ffffff00 59%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.flow-postits .flow-postit h3 { font-size: 1.05rem; }
.flow-postits .flow-postit h3 button { color: #322009; }
.flow-postits .flow-postit small,
.flow-postits .flow-postit p,
.flow-postits .flow-board-action span { color: #594116; font-size: .875rem; }
.flow-postits .flow-postit .flow-postit-stage { margin: 0 0 .35rem; font-weight: 700; }
.flow-postits .flow-board-action {
  margin-top: auto;
  padding-top: .65rem;
  border-color: #b9953e;
}
.flow-postits .flow-board-action span:first-child { font-weight: 700; }
.flow-postits .flow-board-action .primary {
  justify-self: start;
  max-width: 100%;
  background: #fff6bd;
  border: 1px solid #9a6d13;
  color: #472d00;
  box-shadow: 0 1px 0 #9a6d1345;
  font-size: .9rem;
}
.flow-postits .flow-board-action .primary:hover { background: #fffad8; }
.flow-postits button:focus-visible { outline: 2px solid #352400; outline-offset: 3px; }
