/* =====================================================================
   Spirit Trade — пульт заказов менеджера
   Компактный «скетч» в стиле i.spirittrade.kz: контур 2px, короткие жёсткие тени,
   маркерные цвета. Цвет метки заказа = что с ним делать.
   ===================================================================== */
.stcp-body{min-height:100vh}
.stc.stcp{
  padding:0;min-height:100vh;font-size:15px;line-height:1.45;
  --lv-act:#ff5757;--lv-new:#ffde59;--lv-wait:#38b6ff;--lv-ok:#c1ff00;--lv-done:#cdc8bd;
  --tint-act:#ffe1de;--tint-new:#fff3bd;--tint-wait:#dff2ff;--tint-ok:#f0ffc9;--tint-info:#f2efe7;
  --sh2:2px 2px 0 var(--ink);--sh3:3px 3px 0 var(--ink);
  --font:'Comic Neue','Comic Sans MS',cursive,sans-serif;
}
.stcp .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stcp button{font-family:inherit}

/* ---------- Вход ---------- */
.stcp-gate{display:grid;place-items:center;padding:16px}
.stcp-gate .stc-login{margin:0;width:100%}
.stcp-gate .stc-alert{margin:10px 0 16px;text-align:left}
.stcp-gate .stc-lock .stc-i{width:40px;height:40px}

/* ---------- Верхняя панель ---------- */
.stcp-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);height:62px;padding:0 clamp(10px,2vw,24px);background:rgba(255,254,247,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.stcp-brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--ink)!important}
.stcp-brand>span:last-child{display:grid;line-height:1.05}
.stcp-brand b{font-family:'Neucha',cursive;font-size:1.38rem;white-space:nowrap}
.stcp-brand small{font-weight:700;font-size:.66rem;letter-spacing:.9px;text-transform:uppercase;color:var(--muted)}
.stcp-search{position:relative;flex:1 1 auto;max-width:620px;margin:0 auto;display:flex;align-items:center}
.stcp-search>.stc-i{position:absolute;left:12px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.stcp-search input{width:100%;height:42px;padding:0 38px 0 38px;font:700 .98rem var(--font);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:inset 2px 2px 0 rgba(0,0,0,.05);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.stcp-search input:focus{border-color:var(--teal);box-shadow:3px 3px 0 var(--teal)}
.stcp-search input::placeholder{color:#9a958c}
.stcp-search kbd{position:absolute;right:10px;min-width:22px;height:22px;display:grid;place-items:center;font:700 .8rem ui-monospace,Menlo,monospace;color:var(--muted);background:var(--paper);border:1.5px solid rgba(26,26,26,.35);border-radius:6px;pointer-events:none}
.stcp-search input:focus~kbd,.stcp-search input:not(:placeholder-shown)~kbd{display:none}
.stcp-new{flex:none}
.stcp-user{position:relative;flex:none}
.stcp-user summary{list-style:none;display:flex;align-items:center;gap:8px;padding:3px;border-radius:30px;cursor:pointer}
.stcp-user summary::-webkit-details-marker{display:none}
.stcp-user summary:focus-visible{outline:3px solid var(--teal)}
.stcp-ava{width:38px;height:38px;display:grid;place-items:center;font-family:'Neucha',cursive;font-size:1.2rem;background:var(--b);border:2px solid var(--ink);border-radius:50%;box-shadow:var(--sh2)}
.stcp-ava .stc-i{width:18px;height:18px}
.stcp-user-name{max-width:150px;font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stcp-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:236px;display:grid;gap:2px;padding:10px;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);animation:stcIn .15s ease}
.stcp-menu b{padding:0 8px;font-family:'Neucha',cursive;font-size:1.12rem}
.stcp-menu small{padding:0 8px 8px;margin-bottom:4px;font-weight:700;color:var(--muted);border-bottom:1.5px dashed rgba(26,26,26,.2);overflow-wrap:anywhere}
.stcp-menu a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;font-weight:700;color:var(--ink)!important;text-decoration:none}
.stcp-menu a:hover{background:var(--y)}
.stcp-menu .stc-i{width:17px;height:17px}

/* ---------- Раскладка ---------- */
.stcp-main{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;width:100%;max-width:1920px;margin:0 auto;padding:clamp(10px,1.6vw,22px) clamp(10px,2vw,24px) 40px}
.stcp-listcol{display:grid;gap:12px;min-width:0}

/* ---------- Быстрые фильтры ---------- */
.stcp-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.stcp-kpi{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:10px;min-height:64px;padding:9px 12px;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--sh3);transition:transform .15s,box-shadow .15s,background .15s}
.stcp-kpi:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.stcp-kpi:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.stcp-kpi:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.stcp-kpi-ico{grid-row:1/3;width:40px;height:40px;display:grid;place-items:center;background:var(--kc,#fff);border:2px solid var(--ink);border-radius:12px}
.stcp-kpi-ico .stc-i{width:20px;height:20px}
.stcp-kpi b{font-family:'Neucha',cursive;font-size:1.75rem;line-height:1}
.stcp-kpi>span:last-child{display:-webkit-box;overflow:hidden;font-weight:700;font-size:.8rem;line-height:1.15;color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.stcp-kpi.is-active{--kc:var(--g)}
.stcp-kpi.is-act{--kc:var(--lv-act)}
.stcp-kpi.is-new{--kc:var(--y)}
.stcp-kpi.is-wait{--kc:var(--b)}
.stcp-kpi.is-late{--kc:#ffb4ad}
.stcp-kpi.is-done{--kc:#e9e4d9}
.stcp-kpi.is-act:not(.is-zero) b{color:#d32f2f}
.stcp-kpi.is-on{background:var(--cream);box-shadow:0 0 0 3px var(--y),4px 4px 0 var(--ink);transform:translate(-1px,-1px)}
.stcp-kpi.is-on>span:last-child{color:var(--ink)}
.stcp-kpi.is-zero b{color:#b7b2a8}
.stcp-kpi.is-zero .stcp-kpi-ico{background:#f4f1ea;border-color:#b7b2a8;color:#9a958c}

/* ---------- Этапы ---------- */
.stcp-stages{display:flex;gap:6px;margin:0 -3px;padding:2px 3px 6px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.stcp-schip{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 5px 0 11px;font-weight:700;font-size:.85rem;white-space:nowrap;background:#fff;border:2px solid var(--ink);border-radius:20px;box-shadow:var(--sh2);transition:transform .15s,background .15s}
.stcp-schip .stc-i{width:16px;height:16px}
.stcp-schip i{min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;font-style:normal;font-size:.75rem;color:#fff;background:var(--ink);border-radius:11px}
.stcp-schip:hover{transform:translateY(-1px)}
.stcp-schip:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.stcp-schip.is-on{background:var(--y)}
.stcp-schip.is-zero{opacity:.45;box-shadow:none}

/* ---------- Над списком ---------- */
.stcp-listbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:36px}
.stcp-count{font-family:'Neucha',cursive;font-size:1.15rem}
.stcp-legend{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-weight:700;font-size:.78rem;color:var(--muted)}
.stcp-legend i{display:inline-block;width:10px;height:10px;margin-right:-6px;border:1.5px solid var(--ink);border-radius:3px;vertical-align:-1px}
.stcp-legend i.is-act{background:var(--lv-act)}.stcp-legend i.is-new{background:var(--lv-new)}.stcp-legend i.is-wait{background:var(--lv-wait)}.stcp-legend i.is-ok{background:var(--lv-ok)}
.stcp-listtools{display:flex;align-items:center;gap:8px;margin-left:auto}
.stcp-toggle{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;font-weight:700;font-size:.88rem;background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:var(--sh2)}
.stcp-toggle .stc-i{width:16px;height:16px}
.stcp-toggle.is-on{background:var(--b)}
.stcp-toggle:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.stcp-sort select{height:34px;padding:0 30px 0 10px;font:700 .88rem var(--font);color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%231a1a1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;border:2px solid var(--ink);border-radius:10px;box-shadow:var(--sh2);cursor:pointer;-webkit-appearance:none;appearance:none}
.stcp-sort select:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ---------- Список заказов ---------- */
.stcp-list{display:grid;gap:8px}
.stcp-row{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(170px,1.1fr) minmax(0,1.9fr) minmax(96px,auto) 64px;
  grid-template-areas:"main stage flags sum time";
  align-items:center;gap:6px 16px;width:100%;min-height:62px;padding:9px 14px 9px 24px;
  background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--sh3);
  transition:transform .12s,box-shadow .12s,background .12s}
.stcp-row:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.stcp-row:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.stcp-row:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.stcp-row.is-open{background:var(--cream);box-shadow:0 0 0 3px var(--y),4px 4px 0 var(--ink)}
.stcp-row-bar{position:absolute;left:0;top:0;bottom:0;width:11px;background:var(--lv,#eee);border-right:2px solid var(--ink);border-radius:12px 0 0 12px}
.stcp-row.is-act{--lv:var(--lv-act)}
.stcp-row.is-new{--lv:var(--lv-new)}
.stcp-row.is-wait{--lv:var(--lv-wait)}
.stcp-row.is-ok{--lv:var(--lv-ok)}
.stcp-row.is-done{--lv:var(--lv-done);background:#fbfaf6}
.stcp-row.is-done .stcp-row-main b{color:#6b665d}
.stcp-row-main{grid-area:main;display:grid;min-width:0}
.stcp-row-main b{overflow:hidden;font-family:'Neucha',cursive;font-size:1.14rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.stcp-row-main small{overflow:hidden;font-weight:700;font-size:.8rem;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.stcp-row-main em{font-style:normal;color:#b3261e}
.stcp-row-stage{grid-area:stage;display:grid;gap:5px;min-width:0}
.stcp-seg{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;height:9px}
.stcp-seg i{background:#e9e5dc;border-radius:2px}
.stcp-seg i.is-d{background:var(--teal)}
.stcp-seg i.is-c{background:var(--y);box-shadow:0 0 0 1.5px var(--ink)}
.stcp-row-stage small{display:flex;align-items:center;gap:5px;overflow:hidden;font-weight:700;font-size:.8rem;white-space:nowrap}
.stcp-row-stage small span{overflow:hidden;text-overflow:ellipsis}
.stcp-row-stage .stc-i{width:15px;height:15px}
.stcp-row-flags{grid-area:flags;display:flex;flex-wrap:wrap;gap:4px;min-width:0;max-height:54px;overflow:hidden}
.stcp-flag{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;padding:2px 9px 2px 6px;font-weight:700;font-size:.78rem;line-height:1.35;white-space:nowrap;background:var(--tint-info);border:1.5px solid var(--ink);border-radius:20px}
.stcp-flag span{overflow:hidden;text-overflow:ellipsis}
.stcp-flag .stc-i{width:14px;height:14px}
.stcp-flag.is-act{background:var(--tint-act)}
.stcp-flag.is-act .stc-i{color:#c62828}
.stcp-flag.is-wait{background:var(--tint-wait)}
.stcp-flag.is-ok{background:var(--tint-ok);border-color:rgba(26,26,26,.35)}
.stcp-flag.is-ok .stc-i{color:var(--teal)}
.stcp-flag.is-more{padding:2px 7px;background:#fff}
.stcp-row-sum{grid-area:sum;font-family:'Neucha',cursive;font-size:1.05rem;text-align:right;white-space:nowrap}
.stcp-row-sum em{font-style:normal;color:#b7b2a8}
.stcp-row-time{grid-area:time;display:flex;align-items:center;justify-content:flex-end;gap:6px;font-weight:700;font-size:.8rem;color:var(--muted);white-space:nowrap}
.stcp-unread{min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;font-size:.78rem;color:var(--ink);background:var(--y);border:1.5px solid var(--ink);border-radius:11px}
.stcp-empty{display:grid;justify-items:center;gap:6px;padding:34px 16px;text-align:center;background:#fff;border:2px dashed var(--ink);border-radius:16px}
.stcp-empty b{font-family:'Neucha',cursive;font-size:1.4rem}
.stcp-empty small{font-weight:700;color:var(--muted)}
.stcp-empty .stc-btn{margin-top:8px}
.stcp-listnote{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 12px;font-weight:700;font-size:.85rem;color:var(--muted);background:var(--tint-new);border:1.5px dashed var(--ink);border-radius:10px}

/* ---------- Мелкие элементы ---------- */
.stcp-link{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:.88rem;line-height:1.3;color:var(--teal);border-bottom:2px dashed currentColor}
.stcp-link .stc-i{width:15px;height:15px}
.stcp-link:hover{color:var(--ink)}
.stcp-link:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.stcp-link.is-danger{color:#b3261e}
.stcp-link.is-loading{opacity:.5;pointer-events:none}
.stcp-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;font-weight:700;font-size:.78rem;line-height:1.5;white-space:nowrap;background:#fff;border:1.5px solid var(--ink);border-radius:20px}
.stcp-chip .stc-i{width:13px;height:13px;stroke-width:2.6}
.stcp-chip.is-ok{background:var(--g)}
.stcp-chip.is-wait{background:#fff0b3}
.stcp-chip.is-now{background:var(--y)}
.stcp-chip.is-big{padding:4px 12px;font-family:'Neucha',cursive;font-size:1.02rem}
.stcp-chip.is-big .stc-i{width:18px;height:18px}
.stcp-ibtn{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:38px;height:38px;display:grid;place-items:center;color:var(--ink)!important;background:#fff;border:2px solid var(--ink);border-radius:11px;box-shadow:var(--sh2);transition:transform .12s,background .12s}
.stcp-ibtn:hover{transform:translate(-1px,-1px);background:var(--y)}
.stcp-ibtn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.stcp-ibtn .stc-i{width:18px;height:18px}
.stcp-ibtn.is-wa{background:#d9f8e1}
.stcp-ibtn.is-done{background:var(--g)}
.stc-btn.is-pulse{animation:stcpPulse 1.6s ease-in-out infinite}
@keyframes stcpPulse{50%{box-shadow:2px 2px 0 var(--ink),0 0 0 6px rgba(193,255,0,.6)}}

/* ---------- Карточка заказа ---------- */
.stcp-scrim{display:none}
.stcp-drawer{position:sticky;top:78px;max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;background:var(--paper-2);border:2px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);scrollbar-width:thin}
.stcp-drawer.is-loading::before{content:"";position:sticky;top:0;z-index:7;display:block;height:4px;margin-bottom:-4px;background:linear-gradient(90deg,transparent 0,var(--teal) 35%,var(--teal) 65%,transparent 100%) 0 0/50% 100% no-repeat;animation:stcpBar .9s linear infinite}
@keyframes stcpBar{from{background-position:-60% 0}to{background-position:160% 0}}
.stcp-dh{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main actions";align-items:start;gap:10px;padding:14px 16px 10px}
.stcp-dh>.stcp-back{grid-area:back}
.stcp-dh>.stcp-dh-main{grid-area:main}
.stcp-dh>.stcp-dh-actions{grid-area:actions}
.stcp-back{all:unset;box-sizing:border-box;cursor:pointer;width:38px;height:38px;display:none;place-items:center;background:var(--y);border:2px solid var(--ink);border-radius:11px;box-shadow:var(--sh2)}
.stcp-back .stc-i{width:20px;height:20px;stroke-width:2.6}
.stcp-dh-main{min-width:0}
.stcp-dh-main small{font-weight:700;font-size:.8rem;color:var(--muted)}
.stcp-dh-main small em{font-style:normal;color:#b3261e}
.stcp-dh-main h2{margin:2px 0 6px!important;font-size:clamp(1.35rem,2.1vw,1.8rem);line-height:1.1;overflow-wrap:anywhere}
.stcp-dh-main h2:focus{outline:none}
.stcp-dh-meta{display:flex;flex-wrap:wrap;gap:3px 14px;font-weight:700;font-size:.84rem;color:var(--muted)}
.stcp-dh-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere}
.stcp-dh-meta .stc-i{width:15px;height:15px;color:var(--teal)}
.stcp-dh-meta .is-warn,.stcp-dh-meta .is-warn .stc-i{color:#b3261e}
.stcp-dh-actions{display:flex;gap:6px}

/* Этап и его смена */
.stcp-dcontrol{padding:0 16px}
.stcp-sc{padding:12px 14px;background:var(--cream);border:2px solid var(--ink);border-radius:16px;box-shadow:var(--sh3)}
.stcp-sc.is-ready{background:#f2ffd9}
.stcp-sc.is-final{background:var(--mint)}
.stcp-sc.is-skel{height:124px;background:repeating-linear-gradient(-45deg,#fff 0 12px,#f6f3ec 12px 24px);border-style:dashed;box-shadow:none}
.stcp-track{--fill:0;position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;margin:4px 0 10px;padding:0;list-style:none}
.stcp-track::before,.stcp-track::after{content:"";position:absolute;left:5.55%;top:16px;z-index:0;height:4px;border-radius:3px}
.stcp-track::before{right:5.55%;background:repeating-linear-gradient(90deg,rgba(26,26,26,.3) 0 6px,transparent 6px 11px)}
.stcp-track::after{width:calc(88.9% * var(--fill));background:var(--teal);border:1px solid var(--ink)}
.stcp-track li{position:relative;z-index:1;display:grid;justify-items:center;gap:4px;min-width:0}
.stcp-dot{all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:36px;height:36px;display:grid;place-items:center;background:#fff;border:2px solid var(--ink);border-radius:50%;box-shadow:var(--sh2);transition:transform .15s}
.stcp-dot .stc-i{width:17px;height:17px}
.stcp-dot i{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;font:700 .66rem/1 var(--font);font-style:normal;background:#fff;border:1.5px solid var(--ink);border-radius:9px}
.stcp-dot:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.stcp-dot.is-ok i{background:var(--g)}
.stcp-track li.is-done .stcp-dot{background:var(--g)}
.stcp-track li.is-current .stcp-dot{background:var(--y);box-shadow:3px 3px 0 var(--ink);transform:scale(1.14);cursor:default}
.stcp-track li.is-next .stcp-dot{color:#8a857c;background:#f1eee6;border-color:#9a958c;box-shadow:none}
.stcp-track li:not(.is-current) .stcp-dot:hover{transform:translateY(-2px) rotate(-6deg)}
.stcp-track li>span{max-width:100%;overflow:hidden;font-weight:700;font-size:.66rem;line-height:1.1;text-align:center;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.stcp-track li.is-current>span{color:var(--ink)}
.stcp-sc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding-top:10px;border-top:2px dashed rgba(26,26,26,.22)}
.stcp-sc-now{flex:1 1 260px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.stcp-sc-now small{flex-basis:100%;font-weight:700;font-size:.8rem;color:var(--muted)}
.stcp-sc-now b{display:inline-flex;align-items:center;gap:6px;font-family:'Neucha',cursive;font-size:1.3rem;line-height:1.1}
.stcp-sc-now b .stc-i{width:20px;height:20px}
.stcp-sc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}

/* Вкладки */
.stcp-tabs{position:sticky;top:0;z-index:5;display:flex;gap:4px;margin-top:12px;padding:8px 16px;overflow-x:auto;background:var(--paper-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);scrollbar-width:none}
.stcp-tabs::-webkit-scrollbar{display:none}
.stcp-tab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;flex:none;display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 10px;font-family:'Neucha',cursive;font-weight:700;font-size:1.02rem;color:#4a463f;border:2px solid transparent;border-radius:10px;transition:background .15s}
.stcp-tab .stc-i{width:17px;height:17px}
.stcp-tab:hover{background:#f3efe4}
.stcp-tab:focus-visible{outline:3px solid var(--teal);outline-offset:1px}
.stcp-tab.is-on{color:var(--ink);background:var(--y);border-color:var(--ink);box-shadow:var(--sh2)}
.stcp-tab i{display:none;min-width:18px;height:18px;padding:0 5px;place-items:center;font:700 .7rem/1 var(--font);font-style:normal;color:#fff;background:#d32f2f;border:1.5px solid var(--ink);border-radius:9px}
.stcp-tab.has-badge i{display:grid}
.stcp-tab.is-log-new i{color:var(--ink);background:var(--y)}
.stcp-panes{padding:16px 16px 24px}
.stcp-pane{animation:stcIn .2s ease}
.stcp-drawer.is-loading .stcp-panes{opacity:.75;transition:opacity .2s}
.stcp-skel{display:grid;gap:10px}
.stcp-skel i{height:54px;border-radius:12px;background:linear-gradient(90deg,#f1eee6 25%,#faf8f2 50%,#f1eee6 75%) 0 0/200% 100%;animation:stcpShimmer 1.2s linear infinite}
@keyframes stcpShimmer{to{background-position:-200% 0}}

/* Обзор: что сделать */
.stcp-todo h3,.stcp-recent h3{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px!important;font-size:1.3rem}
.stcp-todo h3 .stc-i,.stcp-recent h3 .stc-i{width:20px;height:20px}
.stcp-todo ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.stcp-todo-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:10px 12px;background:#fff;border:2px solid var(--ink);border-left-width:8px;border-radius:12px;box-shadow:var(--sh2)}
.stcp-todo-i.is-act{border-left-color:var(--lv-act);background:#fffafa}
.stcp-todo-i.is-wait{border-left-color:var(--lv-wait)}
.stcp-todo-i.is-info{border-left-color:#c9c4b9;background:#fdfcf8;box-shadow:none}
.stcp-todo-ico{width:34px;height:34px;display:grid;place-items:center;background:#fff;border:2px solid var(--ink);border-radius:50%}
.stcp-todo-ico .stc-i{width:18px;height:18px}
.stcp-todo-i.is-act .stcp-todo-ico{color:#c62828;background:var(--tint-act)}
.stcp-todo-i.is-wait .stcp-todo-ico{background:var(--tint-wait)}
.stcp-todo-text{display:grid;gap:1px;font-weight:700;font-size:.92rem;overflow-wrap:anywhere}
.stcp-todo-text small{font-family:'Neucha',cursive;font-size:.86rem;color:var(--muted)}
.stcp-todo-i.is-act .stcp-todo-text small{color:#c62828}
.stcp-todo-i .stc-btn{white-space:nowrap}
.stcp-allgood{display:flex;align-items:center;gap:10px;padding:14px 16px;font-weight:700;background:var(--tint-ok);border:2px solid var(--ink);border-radius:12px}
.stcp-allgood .stc-i{flex:none;width:26px;height:26px;color:var(--teal)}

/* Обзор: цифры */
.stcp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}
.stcp-fact{all:unset;box-sizing:border-box;cursor:pointer;display:grid;align-content:start;gap:2px;min-width:0;padding:10px 12px;background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:var(--sh2);transition:transform .12s,background .12s}
.stcp-fact:hover{transform:translate(-1px,-1px);background:var(--cream)}
.stcp-fact:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.stcp-fact small{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.78rem;color:var(--muted)}
.stcp-fact small .stc-i{width:14px;height:14px}
.stcp-fact b{font-family:'Neucha',cursive;font-size:1.25rem;line-height:1.15;overflow-wrap:anywhere}
.stcp-fact b.is-none{color:#b7b2a8}
.stcp-fact em{display:-webkit-box;overflow:hidden;font-style:normal;font-weight:700;font-size:.76rem;color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.stcp-meter{display:block;height:7px;margin-top:5px;overflow:hidden;background:#eee9de;border:1.5px solid var(--ink);border-radius:5px}
.stcp-meter i{display:block;height:100%;background:var(--teal)}
.stcp-recent header{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Журнал */
.stcp-log{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.stcp-log li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:8px 10px;background:#fff;border:1.5px solid rgba(26,26,26,.2);border-radius:12px}
.stcp-log li.is-client{background:#f6fbff;border-color:rgba(56,182,255,.65)}
.stcp-log li.is-new{background:var(--tint-new);border:2px solid var(--ink);box-shadow:var(--sh2)}
.stcp-log li.is-note{background:#fff9d6;border-style:dashed;border-color:rgba(26,26,26,.45)}
.stcp-log li.is-alert{background:var(--tint-act);border-color:var(--lv-act)}
.stcp-log-ico{width:30px;height:30px;display:grid;place-items:center;background:#fff;border:1.5px solid var(--ink);border-radius:50%}
.stcp-log-ico .stc-i{width:15px;height:15px}
.stcp-log li.is-client .stcp-log-ico{background:var(--tint-wait)}
.stcp-log-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-weight:700;font-size:.76rem;color:var(--muted)}
.stcp-log-meta b{color:var(--ink)}
.stcp-log-meta em{padding:0 6px;font-style:normal;border:1px dashed rgba(26,26,26,.35);border-radius:10px}
.stcp-log-meta i{padding:0 7px;font-style:normal;color:var(--ink);background:var(--y);border:1.5px solid var(--ink);border-radius:10px}
.stcp-log p{margin:1px 0 0!important;font-weight:700;font-size:.9rem;overflow-wrap:anywhere}
.stcp-note{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:5px 5px 5px 10px;background:#fff9d6;border:2px dashed var(--ink);border-radius:12px}
.stcp-note-ico{display:grid}
.stcp-note-ico .stc-i{width:18px;height:18px;color:var(--teal)}
.stcp-note input{flex:1;min-width:0;height:36px;padding:0 6px;font:700 .95rem var(--font);color:var(--ink);background:transparent;border:0;outline:none}
.stcp-note:focus-within{border-style:solid;box-shadow:var(--sh2)}

/* Этапы: данные для клиента */
.stcp-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 12px!important;padding:8px 12px;font-weight:700;font-size:.86rem;background:var(--mint);border:1.5px dashed var(--teal);border-radius:10px}
.stcp-hint .stc-i{flex:none;width:17px;height:17px;color:var(--teal)}
.stcp-hint.is-soft{margin:0!important;color:var(--muted);background:#f7f5ef;border-color:rgba(26,26,26,.25)}
.stcp-sfs{display:grid;gap:8px}
.stcp-sf{background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--sh2)}
.stcp-sf[open]{box-shadow:var(--sh3)}
.stcp-sf summary{display:flex;align-items:center;gap:10px;padding:8px 12px;list-style:none;cursor:pointer;border-radius:12px}
.stcp-sf summary::-webkit-details-marker{display:none}
.stcp-sf summary::after{content:"";flex:none;width:8px;height:8px;margin:0 4px 4px 6px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
.stcp-sf[open] summary::after{margin-top:4px;margin-bottom:0;transform:rotate(-135deg)}
.stcp-sf summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.stcp-sf[open] summary{background:var(--cream);border-bottom:1.5px dashed rgba(26,26,26,.25);border-radius:12px 12px 0 0}
.stcp-sf summary b{min-width:0;font-family:'Neucha',cursive;font-size:1.1rem}
.stcp-sf.is-next summary b{color:#6b665d}
.stcp-sf-ico{flex:none;width:32px;height:32px;display:grid;place-items:center;background:#f1eee6;border:2px solid var(--ink);border-radius:50%}
.stcp-sf-ico .stc-i{width:16px;height:16px}
.stcp-sf.is-done .stcp-sf-ico{background:var(--g)}
.stcp-sf.is-current .stcp-sf-ico{background:var(--y)}
.stcp-sf-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-left:auto}
.stcp-sf-form{padding:12px}
.stcp-sf-form .stc-form-grid{gap:12px 14px}
.stcp-sf-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px;margin-top:12px;padding-top:10px;border-top:1.5px dashed rgba(26,26,26,.25)}
.stcp-sf-foot .stcp-chip{margin-right:auto}
.stcp-drawer .stc-field span,.stcp-drawer .stc-radios legend{font-size:.98rem}
.stcp-drawer .stc-field input,.stcp-drawer .stc-field textarea,.stcp-drawer .stc-field select{padding:8px 11px;font-size:.95rem;border-radius:9px}
.stcp-drawer .stc-field textarea{min-height:64px}
.stcp-drawer .stc-radios span{padding:5px 12px;font-size:.9rem}
.stcp-range{display:flex!important;align-items:center;gap:10px}
.stcp-drawer .stcp-range input[type=range]{flex:1;min-width:0;padding:0;accent-color:var(--teal);background:none;border:0;box-shadow:none}
.stcp-drawer .stcp-range input[type=number]{flex:none;width:84px}
/* Табличный редактор строк */
.stcp-lines{display:grid;gap:6px}
.stcp-lines-body{display:grid;gap:6px}
.stcp-lines-row{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)) 32px;align-items:center;gap:6px}
.stcp-drawer .stcp-lines-row.is-head span{padding-left:4px;font-family:var(--font);font-weight:700;font-size:.78rem;color:var(--muted)}
.stcp-lines-row input{width:100%;min-width:0;height:36px;padding:0 10px;font:700 .92rem var(--font);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:9px;outline:none}
.stcp-lines-row input:focus{border-color:var(--teal);box-shadow:2px 2px 0 var(--teal)}
.stcp-lines-x{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;color:#b3261e;border:1.5px solid rgba(26,26,26,.3);border-radius:8px}
.stcp-lines-x .stc-i{width:14px;height:14px;stroke-width:2.8}
.stcp-lines-x:hover{background:#ffe3e3;border-color:#b3261e}
.stcp-lines>.stcp-link{justify-self:start;margin-top:2px}

/* Доступ */
.stcp-acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stcp-card{display:grid;align-content:start;gap:8px;min-width:0;padding:12px 14px;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--sh2)}
.stcp-card.is-wide{grid-column:1/-1}
.stcp-card h4{display:inline-flex;align-items:center;gap:7px;font-size:1.2rem}
.stcp-card h4 .stc-i{width:19px;height:19px}
.stcp-card p{font-weight:700;font-size:.9rem;color:var(--muted)}
.stcp-card small{font-weight:700;font-size:.78rem;color:var(--muted)}
.stcp-card.is-send{background:var(--mint)}
.stcp-card.is-warn{background:#fff4d6}
.stcp-card.is-danger{background:#fffdfa;border-style:dashed;box-shadow:none}
.stcp-card.is-danger .stc-btn{justify-self:start}
.stcp-card>.stc-btn{justify-self:start}
.stcp-card textarea{width:100%;padding:8px 10px;font:700 .9rem/1.45 var(--font);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:10px;resize:none}
.stcp-share{display:flex;flex-wrap:wrap;gap:8px}
.stcp-copyrow{display:flex;gap:6px}
.stcp-copyrow input{flex:1;min-width:0;height:38px;padding:0 10px;font:700 .86rem ui-monospace,Menlo,Consolas,monospace;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:10px}
.stcp-pinbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.stcp-pinbox b{padding:6px 8px 6px 14px;font:700 1.9rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:6px;background:var(--y);border:2px solid var(--ink);border-radius:10px;box-shadow:var(--sh2)}
.stcp-pinrow{display:flex!important;gap:6px}
.stcp-pinrow input{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace!important;font-size:1.2rem!important;letter-spacing:4px}

/* Рабочие блоки кабинета — компактнее внутри пульта */
.stcp-drawer .stc-btn{min-height:36px;padding:5px 13px;font-size:.98rem;border-width:2px;box-shadow:var(--sh2)}
.stcp-drawer .stc-btn:hover{box-shadow:4px 4px 0 var(--ink)}
.stcp-drawer .stc-btn:active{box-shadow:0 0 0 var(--ink)}
.stcp-pane .stc-sec-head{margin:18px 0 10px}
.stcp-pane .stc-block:first-child .stc-sec-head{margin-top:0}
.stcp-pane .stc-sec-head h4{font-size:1.3rem}
.stcp-pane .stc-sec-head h4 .stc-i{width:20px;height:20px}
.stcp-pane .stc-summary,.stcp-pane .stc-upcards,.stcp-pane .stc-kv,.stcp-pane .stc-cta{border-width:2px;box-shadow:var(--sh3);transform:none!important}
.stcp-pane .stc-block+.stc-block{margin-top:14px}
.stcp-pane .stc-cta{gap:12px;padding:14px}
.stcp-pane .stc-cta-ico{width:48px;height:48px;border-width:2px}
.stcp-pane .stc-cta-ico .stc-i{width:24px;height:24px}
.stcp-pane .stc-cta-text b{font-size:1.2rem}
.stcp-pane .stc-empty{padding:18px 14px;border-width:2px}
.stcp-pane .stc-empty-ico{width:52px;height:52px}
.stcp-pane .stc-empty b{font-size:1.2rem}
.stcp-pane .stc-summary-head{padding:10px 14px}
.stcp-pane .stc-summary-head h4{font-size:1.2rem}
.stcp-pane .stc-answers div{padding:8px 14px}
.stcp-pane .stc-summary-files{padding:10px 14px}
.stcp-pane .stc-summary .stc-actions{padding:10px 14px 12px}
.stcp-pane .stc-docs2,.stcp-pane .stc-pays{gap:10px}
.stcp-pane .stc-doc2-title h5,.stcp-pane .stc-pay-title b{font-size:1.12rem}
.stcp-pane .stc-pay-num{width:30px;height:30px;font-size:.95rem}
.stcp-pane .stc-pay-amount{font-size:1.12rem}
.stcp-pane .stc-paysum{box-shadow:var(--sh2)}
.stcp-pane .stc-upcard{gap:10px;padding:10px 12px}
.stcp-pane .stc-upcard-ico{width:36px;height:36px}
.stcp-pane .stc-upcard h5{font-size:1.12rem}
.stcp-pane .stc-kv-row{padding:9px 14px}
.stcp-pane .stc-kv-row.is-total{font-size:1.1rem}
.stcp-pane .stc-calc-head b{font-size:1.3rem}
.stcp-pane .stc-mgr-bar{margin-top:12px;padding:0;background:none;border:0}
.stcp-pane .stc-mgr-tag{display:none}
.stcp-pane .stc-oks{margin-top:8px}
.stcp-pane .stc-ok{padding:2px 9px;font-size:.8rem}
.stcp-pane .stc-doc2-ico{width:34px;height:34px}
.stcp-pane .stc-doc2-actions{margin-top:10px}

/* ---------- Карточка заказа рядом со списком (широкий экран) ---------- */
@media (min-width:1180px){
  .stcp.has-drawer .stcp-main{grid-template-columns:minmax(380px,5fr) minmax(560px,7fr)}
  .stcp.has-drawer .stcp-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stcp.has-drawer .stcp-kpi{min-height:52px;padding:6px 10px;column-gap:8px}
  .stcp.has-drawer .stcp-kpi-ico{width:32px;height:32px;border-radius:10px}
  .stcp.has-drawer .stcp-kpi-ico .stc-i{width:17px;height:17px}
  .stcp.has-drawer .stcp-kpi b{font-size:1.4rem}
  .stcp.has-drawer .stcp-kpi>span:last-child{font-size:.76rem}
  .stcp.has-drawer .stcp-legend{display:none}
  .stcp.has-drawer .stcp-row{grid-template-columns:minmax(0,1fr) 150px 58px;grid-template-areas:"main stage time" "flags flags flags";padding-top:8px;padding-bottom:8px}
  .stcp.has-drawer .stcp-row-flags{max-height:24px}
  .stcp.has-drawer .stcp-row-sum{display:none}
}
@media (min-width:1180px) and (max-width:1440px){
  .stcp.has-drawer .stcp-main{grid-template-columns:minmax(340px,4fr) minmax(540px,6fr)}
  .stcp.has-drawer .stcp-row{grid-template-columns:minmax(0,1fr) 124px 52px}
  .stcp.has-drawer .stcp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Планшет: карточка поверх списка ---------- */
@media (max-width:1179px){
  html.stcp-lock{overflow:hidden}
  .stcp-scrim:not([hidden]){position:fixed;inset:0;z-index:55;display:block;background:rgba(26,26,26,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:stcIn .2s}
  .stcp-drawer{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(780px,100vw);max-height:none;border-width:0 0 0 2px;border-radius:0;box-shadow:-8px 0 0 rgba(26,26,26,.12);animation:stcpSlide .25s cubic-bezier(.25,.8,.25,1)}
  .stcp-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stcp-row{grid-template-columns:minmax(0,1.6fr) minmax(150px,1fr) minmax(0,1.4fr) 58px;grid-template-areas:"main stage flags time"}
  .stcp-row-sum{display:none}
}
@keyframes stcpSlide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* ---------- Телефон ---------- */
@media (max-width:700px){
  .stc.stcp{font-size:14.5px}
  .stcp-top{flex-wrap:wrap;height:auto;gap:8px;padding:8px 10px}
  .stcp-brand .stc-dots{display:none}
  .stcp-brand b{font-size:1.25rem}
  .stcp-brand small{display:none}
  .stcp-search{order:3;flex-basis:100%;max-width:none}
  .stcp-search kbd{display:none}
  .stcp-new{margin-left:auto}
  .stcp-user-name{display:none}
  .stcp-main{gap:12px;padding:10px 10px 32px}
  .stcp-kpis{display:flex;gap:8px;margin:0 -10px;padding:2px 10px 6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .stcp-kpis::-webkit-scrollbar{display:none}
  .stcp-kpi{flex:0 0 auto;min-width:138px;min-height:56px;scroll-snap-align:start}
  .stcp-kpi-ico{width:34px;height:34px}
  .stcp-kpi b{font-size:1.45rem}
  .stcp-stages{margin:0 -10px;padding:2px 10px 6px}
  .stcp-legend{display:none}
  .stcp-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main time" "stage stage" "flags flags";gap:7px 10px;padding:10px 12px 10px 21px}
  .stcp-row-stage{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
  .stcp-row-flags{max-height:none}
  .stcp-drawer{width:100vw;border:0;box-shadow:none}
  .stcp-dh{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"back main" ". actions";padding:10px 12px 8px}
  .stcp-back{display:grid}
  .stcp-dh-actions{flex-wrap:wrap}
  .stcp-ibtn.is-x{display:none}
  .stcp-dcontrol{padding:0 10px}
  .stcp-sc{padding:10px}
  .stcp-track{margin-top:6px}
  .stcp-track li>span{display:none}
  .stcp-dot{width:30px;height:30px}
  .stcp-dot .stc-i{width:15px;height:15px}
  .stcp-dot i{top:-7px;right:-7px}
  .stcp-track::before,.stcp-track::after{top:13px}
  .stcp-sc-btns{width:100%;margin-left:0}
  .stcp-sc-btns .stc-btn{flex:1 1 auto}
  .stcp-tabs{gap:4px;padding:6px 10px}
  .stcp-tab{padding:0 10px;font-size:.98rem}
  .stcp-panes{padding:12px 10px 28px}
  .stcp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stcp-todo-i{grid-template-columns:auto minmax(0,1fr)}
  .stcp-todo-i .stc-btn{grid-column:1/-1;justify-self:stretch}
  .stcp-acc{grid-template-columns:minmax(0,1fr)}
  .stcp-share .stc-btn{flex:1 1 auto}
  .stcp-sf summary{flex-wrap:wrap}
  .stcp-sf-tags{margin-left:42px;justify-content:flex-start;order:3;flex-basis:100%}
  .stcp-sf summary::after{margin-left:auto}
  .stcp-sf-foot .stc-btn{flex:1 1 100%}
  .stcp-lines-row{grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)) 28px;gap:4px}
  .stcp-lines-row input{padding:0 7px;font-size:.88rem}
  .stcp-lines-x{width:28px;height:28px}
}
@media (max-width:420px){
  .stcp-new span{display:none}
  .stcp-new{width:40px;padding:0!important}
  .stcp-listbar{gap:6px}
  .stcp-count{flex-basis:100%;font-size:1.05rem}
  .stcp-listtools{margin-left:0;width:100%}
  .stcp-sort{flex:1}
  .stcp-sort select{width:100%}
  .stcp-dh-main h2{font-size:1.3rem}
  .stcp-tab span{display:none}
  .stcp-tab.is-on span{display:inline}
}

@media (prefers-reduced-motion:reduce){
  .stcp *{animation:none!important;transition:none!important}
}

/* Telegram по заказу */
.stcp-switch{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;cursor:pointer}
.stcp-switch input{width:18px;height:18px;flex:none;accent-color:var(--teal)}
.stcp-switch.is-wide{grid-column:1/-1}
.stcp-tg .stc-field small{font-family:'Comic Neue',cursive;font-weight:700;font-size:.78rem;color:var(--muted)}