:root{
  --flow-red:#c9272f;
  --flow-red-dark:#991d24;
  --flow-ink:#202630;
}

@keyframes crmPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes crmModalIn{from{opacity:0;transform:translateY(24px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes crmDrawerIn{from{transform:translateX(105%)}to{transform:translateX(0)}}

#view.crm-page-enter{animation:crmPageIn .24s cubic-bezier(.2,.8,.2,1)}
.nav-btn,.deal,.kpi,.panel,.primary-btn,.secondary-btn,.icon-btn{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,opacity .18s ease}
.nav-btn:hover{transform:translateX(4px)}
html[data-layout="horizontal"] .nav-btn:hover{transform:translateY(-2px)}
.nav-btn.active .nav-icon{transform:scale(1.12)}
.nav-icon{transition:transform .18s ease}
.deal:hover,.kpi:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.12)}

.commercial-flow{position:relative;margin:0 0 18px;border:1px solid var(--line);border-left:5px solid var(--flow-red);border-radius:12px;background:linear-gradient(145deg,var(--panel),var(--panel2));box-shadow:var(--shadow);overflow:hidden}
.commercial-flow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.commercial-flow-title{display:flex;align-items:center;gap:10px;min-width:0}
.commercial-flow-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--flow-red);color:#fff;font-weight:900}
.commercial-flow-title b,.commercial-flow-title small{display:block}
.commercial-flow-title small{margin-top:2px;color:var(--muted)}
.commercial-flow-actions{display:flex;align-items:center;gap:7px}
.commercial-flow-toggle{min-width:42px}
.commercial-flow-body{padding:0 14px 14px}
.commercial-flow.collapsed .commercial-flow-body{display:none}
.commercial-flow.collapsed{box-shadow:none}
.commercial-flow-steps{display:grid;grid-template-columns:repeat(5,minmax(135px,1fr));gap:7px}
.flow-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:58px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer}
.flow-step:not(:last-child)::after{content:"";position:absolute;right:-8px;width:8px;height:2px;background:var(--line)}
.flow-step:hover{transform:translateY(-2px);border-color:var(--flow-red)}
.flow-step.active{border-color:var(--flow-red);box-shadow:inset 0 -3px var(--flow-red)}
.flow-step-number{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--flow-ink);color:#fff;font-size:11px;font-weight:900}
.flow-step.active .flow-step-number{background:var(--flow-red)}
.flow-step-copy b,.flow-step-copy small{display:block}
.flow-step-copy b{font-size:12px}
.flow-step-copy small{margin-top:2px;color:var(--muted);font-size:9px}
.flow-step-count{min-width:24px;padding:3px 6px;border-radius:999px;background:var(--panel2);color:var(--text);text-align:center;font-size:10px;font-weight:900}

.action-center-modal{width:min(920px,96vw)}
.action-center-intro{margin:0 0 14px;color:var(--muted)}
.action-center-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.action-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:88px;padding:14px;border:1px solid var(--line);border-left:4px solid var(--flow-red);border-radius:10px;background:var(--panel2);color:var(--text);text-align:left;cursor:pointer}
.action-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--flow-red)}
.action-card-icon{font-size:25px}
.action-card b,.action-card small{display:block}
.action-card small{margin-top:4px;color:var(--muted);line-height:1.35}
.action-card-arrow{color:var(--flow-red);font-size:20px;font-weight:900}

.panel-collapse-button{padding:6px 9px;min-width:34px}
.panel.crm-collapsed>.panel-title{margin-bottom:0}
.panel.crm-collapsed>:not(.panel-title){display:none!important}

.modal-backdrop.crm-window-open .modal{animation:crmModalIn .22s cubic-bezier(.2,.8,.2,1)}
.modal-head{position:sticky;top:0;z-index:3;background:var(--panel)}
.modal-head-tools{display:flex;align-items:center;gap:6px}
.modal-minimize{font-size:16px;line-height:1}
.modal-backdrop.crm-is-minimized{visibility:hidden;pointer-events:none}
.window-dock{position:fixed;right:18px;bottom:18px;z-index:110;display:flex;align-items:center;gap:8px;max-width:min(390px,calc(100vw - 36px));padding:8px;border:1px solid var(--line);border-left:4px solid var(--flow-red);border-radius:10px;background:var(--panel);box-shadow:0 18px 45px rgba(15,23,42,.22)}
.window-dock button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.window-dock .window-restore{flex:1;text-align:left}
.drawer:not(.hidden){animation:crmDrawerIn .22s ease-out}

html[data-theme="dark"] .commercial-flow{background:linear-gradient(145deg,var(--panel),#151f2f)}
html[data-theme="dark"] .flow-step-number{background:#384458}
html[data-theme="dark"] .flow-step.active .flow-step-number{background:var(--flow-red)}

@media(max-width:980px){.commercial-flow-steps{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:5px}.flow-step{min-width:190px;scroll-snap-align:start}.action-center-grid{grid-template-columns:1fr}}
@media(max-width:620px){.commercial-flow{margin-bottom:12px}.commercial-flow-head{align-items:flex-start;padding:10px}.commercial-flow-title small{display:none}.commercial-flow-actions .secondary-btn{font-size:10px;padding:8px}.commercial-flow-body{padding:0 10px 10px}.flow-step{min-width:170px}.action-card{min-height:76px;padding:11px}.window-dock{right:9px;bottom:9px;max-width:calc(100vw - 18px)}}