/* ========================================================================== Sourcing CRM · дизайн-система KAYF (v2) Фирменные цвета: лайм #bbff00, тёмный #171717, вторичный тёмный #282828. Лайм используется как ЗАЛИВКА (--accent-fill): на белом фоне он не читается как текст, поэтому для текста/обводок в светлой теме берётся затемнённый лайм. Все размеры в rem — масштаб задаётся одним числом на (см. «Размер текста»). ========================================================================== */ :root{ color-scheme:light; --bg:#f2f3ef; --surface:#ffffff; --surface2:#f7f8f4; --surface3:#eef0e9; --field:#ffffff; --line:#e4e6df; --line2:#d0d3c9; --text:#171717; --text2:#4a4c48; --mut:#6e716b; --mut2:#8a8d86; --accent:#446e00; --accent-ink:#171717; --accent-fill:#bbff00; --accent-fill-hover:#a9e800; --accent-soft:#f2fbdc; --accent-hover:#365800; --good:#0ca30c; --good-soft:#e4f5e4; --warn:#c98500; --warn-soft:#fff3d6; --serious:#ec835a; --bad:#d03b3b; --bad-soft:#fbe5e5; --info:#2a78d6; --info-soft:#e3eefb; --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --seq1:#86b6ef; --seq2:#5598e7; --seq3:#2a78d6; --seq4:#1c5cab; --seq5:#104281; --seq6:#0d366b; --grid:#e7e9e2; --axis:#c4c7bd; --shadow:0 1px 2px rgba(23,23,23,.04),0 6px 20px rgba(23,23,23,.05); --shadow-lg:0 12px 40px rgba(23,23,23,.16); --scrim:rgba(23,23,23,.45); --r:14px; --r-sm:10px; --r-xs:8px; --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --sans:'Poppins','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --ease:cubic-bezier(.2,.7,.2,1); --ctl:2.5rem; /* высота полей и кнопок */ --ctl-sm:2rem; --topbar:4rem; --mnav:calc(3.75rem + env(safe-area-inset-bottom)); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ color-scheme:dark; --bg:#171717; --surface:#1f1f1f; --surface2:#282828; --surface3:#303030; --field:#282828; --line:#323232; --line2:#444444; --text:#f0f1ee; --text2:#c5c7c1; --mut:#8f928b; --mut2:#7a7d75; --accent:#bbff00; --accent-ink:#171717; --accent-fill:#bbff00; --accent-fill-hover:#cdff4d; --accent-soft:#2f3d08; --accent-hover:#cdff4d; --good:#3fc93f; --good-soft:#12301a; --warn:#fab219; --warn-soft:#3a2f10; --serious:#ec835a; --bad:#e66767; --bad-soft:#3b1a1a; --info:#5b9df0; --info-soft:#15243a; --s1:#5b9df0; --s2:#ef7a4a; --s3:#3ec49a; --s4:#e0a800; --s5:#ef8fb4; --s6:#39b339; --seq1:#184f95; --seq2:#1c5cab; --seq3:#256abf; --seq4:#3987e5; --seq5:#6da7ec; --seq6:#9ec5f4; --grid:#2c2c2c; --axis:#4a4a4a; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35); --shadow-lg:0 16px 48px rgba(0,0,0,.6); --scrim:rgba(0,0,0,.6); }} :root[data-theme="dark"]{ color-scheme:dark; --bg:#171717; --surface:#1f1f1f; --surface2:#282828; --surface3:#303030; --field:#282828; --line:#323232; --line2:#444444; --text:#f0f1ee; --text2:#c5c7c1; --mut:#8f928b; --mut2:#7a7d75; --accent:#bbff00; --accent-ink:#171717; --accent-fill:#bbff00; --accent-fill-hover:#cdff4d; --accent-soft:#2f3d08; --accent-hover:#cdff4d; --good:#3fc93f; --good-soft:#12301a; --warn:#fab219; --warn-soft:#3a2f10; --serious:#ec835a; --bad:#e66767; --bad-soft:#3b1a1a; --info:#5b9df0; --info-soft:#15243a; --s1:#5b9df0; --s2:#ef7a4a; --s3:#3ec49a; --s4:#e0a800; --s5:#ef8fb4; --s6:#39b339; --seq1:#184f95; --seq2:#1c5cab; --seq3:#256abf; --seq4:#3987e5; --seq5:#6da7ec; --seq6:#9ec5f4; --grid:#2c2c2c; --axis:#4a4a4a; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35); --shadow-lg:0 16px 48px rgba(0,0,0,.6); --scrim:rgba(0,0,0,.6); } /* ---------- Размер текста: одно число задаёт масштаб всего интерфейса ---------- */ html{font-size:15px} html[data-text="s"]{font-size:14px} html[data-text="l"]{font-size:17px} @media(max-width:960px){ html{font-size:16px} html[data-text="s"]{font-size:15px} html[data-text="l"]{font-size:18px} } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--text);font:1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} [hidden]{display:none!important} img{max-width:100%} a{color:var(--accent)} h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em} ::selection{background:var(--accent-fill);color:var(--accent-ink)} /* ---------- controls ---------- */ input,select,textarea,button{font:inherit;color:inherit} input,select,textarea{background:var(--field);border:1px solid var(--line2);border-radius:var(--r-sm);padding:.45em .8em;min-height:var(--ctl);width:100%;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;min-width:0} input:hover,select:hover,textarea:hover{border-color:var(--mut2)} input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} input:disabled,select:disabled,textarea:disabled{opacity:.7;background:var(--surface2)} input::placeholder,textarea::placeholder{color:var(--mut2)} input[type=checkbox],input[type=radio]{width:1.15rem;height:1.15rem;min-height:0;accent-color:var(--accent);margin:0;vertical-align:-.2em} input[type=file]{min-height:0;padding:.35em} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238f928b' fill='none' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;padding-right:2.2em} textarea{resize:vertical;min-height:5.5em;line-height:1.5} button{cursor:pointer;border:1px solid var(--line2);background:var(--surface);border-radius:var(--r-sm);padding:.4em 1em;min-height:var(--ctl);color:var(--text);font-weight:600;transition:background .15s,border-color .15s,color .15s,transform .1s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.45em;line-height:1.2} button:hover{border-color:var(--mut2);background:var(--surface2)} button:active{transform:translateY(1px)} button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px} button.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink);font-weight:700} button.primary:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover);color:var(--accent-ink)} button.ghost{background:transparent;border-color:transparent;color:var(--text2)} button.ghost:hover{background:var(--surface2);border-color:transparent;color:var(--text)} button.small{padding:.25em .75em;font-size:.875rem;min-height:var(--ctl-sm);border-radius:var(--r-xs)} button.icon{padding:0;width:var(--ctl);min-width:var(--ctl);line-height:1} button.icon.small{width:var(--ctl-sm);min-width:var(--ctl-sm)} button.danger-armed{background:var(--bad);border-color:var(--bad);color:#fff} button:disabled{opacity:.5;cursor:not-allowed;transform:none} button svg{width:1.15em;height:1.15em;flex:none} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .muted{color:var(--mut)} .right{text-align:right} .row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .grow{flex:1} .lbl,.fld label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:.35rem} .grid{display:grid;gap:.85rem} .g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}.g6{grid-template-columns:repeat(6,1fr)} .span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4} /* ---------- shell ---------- */ #shell{display:flex;min-height:100vh;min-height:100dvh} #nav{width:15.5rem;min-width:15.5rem;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh} #brand{padding:1.25rem 1.1rem .9rem} /* два файла лого: тёмная надпись для светлой темы, белая — для тёмной (без ID в селекторах, чтобы тема могла переопределить) */ .blogo{width:auto;display:block;height:1.75rem} .blogo.on-dark{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .blogo.on-dark{display:block} :root:not([data-theme="light"]) .blogo.on-light{display:none} } :root[data-theme="dark"] .blogo.on-dark{display:block} :root[data-theme="dark"] .blogo.on-light{display:none} #brand .who{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--line)} #brand b{font-size:.95rem;font-weight:700;display:block;line-height:1.25} #brand small{color:var(--mut);font-size:.8rem;display:block;margin-top:.1rem} #nav-items{padding:.4rem .6rem;flex:1;overflow-y:auto} .nav-i{display:flex;align-items:center;justify-content:flex-start;gap:.65rem;width:100%;text-align:left;background:transparent;border:0;border-radius:var(--r-sm);padding:.55rem .7rem;min-height:0;color:var(--text2);font-weight:600;font-size:.95rem;margin-bottom:2px;transition:background .15s,color .15s} .nav-i:hover{background:var(--surface2);color:var(--text)} .nav-i.on{background:var(--accent-soft);color:var(--accent)} .nav-i svg{width:1.2rem;height:1.2rem;flex:none;opacity:.85} .nav-i.on svg{opacity:1} .nav-i .cnt{margin-left:auto;font-family:var(--mono);font-size:.75rem;color:var(--mut);background:var(--surface2);border-radius:1rem;padding:.05rem .5rem;font-weight:600} .nav-i.on .cnt{background:transparent;color:var(--accent)} .nav-sec{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);padding:.9rem .7rem .3rem} #nav-foot{padding:.8rem .9rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--mut);display:flex;flex-direction:column;gap:.5rem} #nav-foot .row{justify-content:space-between} #main{flex:1;min-width:0;display:flex;flex-direction:column} #top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);padding:.6rem 1.6rem;display:flex;align-items:center;gap:.75rem;min-height:var(--topbar)} #top h2{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.015em;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;line-height:1.2} #top .sub{color:var(--mut);font-size:.85rem;font-weight:500;letter-spacing:0;display:block;width:100%;margin-top:.1rem} #top h2 .badge{font-size:.75rem} #gsearch{width:17rem;max-width:32vw} #search-btn{display:none} #save-chip{font-size:.8rem;color:var(--mut);display:flex;align-items:center;gap:.4rem;white-space:nowrap} #save-chip i{width:.5rem;height:.5rem;border-radius:50%;background:var(--mut2);display:inline-block} #save-chip.ok i{background:var(--good)}#save-chip.dirty i{background:var(--warn)}#save-chip.err i{background:var(--bad)} .tog{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-xs);overflow:hidden;background:var(--surface)} .tog button{border:0;border-radius:0;padding:.3em .7em;min-height:var(--ctl-sm);font-size:.8rem;background:transparent;color:var(--mut);font-weight:700} .tog button+button{border-left:1px solid var(--line)} .tog button.on{background:var(--accent-soft);color:var(--accent)} #page{padding:1.5rem 1.6rem 5rem;max-width:96rem;width:100%;animation:pageIn .22s var(--ease)} @keyframes pageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} #banner{background:var(--warn-soft);border-bottom:1px solid var(--line);color:var(--text);padding:.5rem 1.6rem;font-size:.875rem} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;box-shadow:var(--shadow)} .card-h{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.85rem;flex-wrap:wrap} .card-h h3{margin:0;font-size:1rem;font-weight:700} .card-h .hint{font-size:.85rem;color:var(--mut)} .stack{display:flex;flex-direction:column;gap:1.1rem} .cols{display:grid;gap:1.1rem} .c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}.c21{grid-template-columns:2fr 1fr}.c12{grid-template-columns:1fr 2fr} .empty{color:var(--mut);padding:2.6rem 1.25rem;text-align:center;font-size:.95rem;max-width:34rem;margin:0 auto} .empty b{display:block;color:var(--text);font-size:1.1rem;margin-bottom:.3rem;font-weight:700} .empty svg{width:2.6rem;height:2.6rem;color:var(--mut2);margin-bottom:.6rem} .empty button{margin-top:1rem} .toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem} .toolbar input,.toolbar select{width:auto} .toolbar input[type=search]{width:16rem} .toolbar label{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--text2)} .chips{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center} .toolbar .chips{flex:1 1 100%} /* ---------- pills & badges ---------- */ .pill{display:inline-flex;align-items:center;gap:.35em;border-radius:2rem;padding:.15em .7em;font-size:.8rem;font-weight:700;white-space:nowrap;line-height:1.5} .pill i{width:.4em;height:.4em;border-radius:50%;background:currentColor;display:inline-block} .st-Prospect{background:var(--surface2);color:var(--text2);border:1px solid var(--line2)} .st-Contacted,.st-Quoted{background:var(--info-soft);color:var(--info)} .st-Sampling{background:var(--warn-soft);color:var(--warn)} .st-Approved{background:var(--accent-soft);color:var(--accent)} .st-Active{background:var(--good-soft);color:var(--good)} .st-Onhold{background:var(--warn-soft);color:var(--serious)} .st-Dropped{background:var(--bad-soft);color:var(--bad)} .tag{display:inline-block;border-radius:.4rem;padding:.05em .55em;font-size:.78rem;font-weight:700;background:var(--surface2);border:1px solid var(--line);color:var(--text2);margin-right:.2rem;white-space:nowrap} .ok{color:var(--good)}.warnc{color:var(--warn)}.badc{color:var(--bad)}.accc{color:var(--accent)} .badge{display:inline-flex;align-items:center;gap:.3em;font-size:.8rem;font-weight:700;padding:.15em .6em;border-radius:.4rem;line-height:1.5} .badge.good{background:var(--good-soft);color:var(--good)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.bad{background:var(--bad-soft);color:var(--bad)}.badge.info{background:var(--info-soft);color:var(--info)}.badge.neutral{background:var(--surface2);color:var(--mut);border:1px solid var(--line)} .chip{border:1px solid var(--line2);background:transparent;color:var(--mut);border-radius:2rem;padding:.2em .85em;min-height:var(--ctl-sm);font-size:.85rem;font-weight:600} .chip.on{background:var(--text);border-color:var(--text);color:var(--bg)} .bar{height:.45rem;background:var(--surface3);border-radius:1rem;overflow:hidden} .bar i{display:block;height:100%;background:var(--accent);border-radius:1rem;transition:width .4s var(--ease)} .stars{color:var(--warn);letter-spacing:1px;white-space:nowrap;font-size:.85rem}.stars .off{color:var(--line2)} /* ---------- tables ---------- */ .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:.92rem} th{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700;text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line2);white-space:nowrap;user-select:none;background:var(--surface)} th.sortable{cursor:pointer}th.sortable:hover{color:var(--text)} th .arr{font-size:.6rem;margin-left:.2rem;color:var(--accent)} td{padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle} tr:last-child td{border-bottom:0} tr.clickable{cursor:pointer}tr.clickable:hover td{background:var(--surface2)} td.name{font-weight:700} .sub{color:var(--mut);font-size:.85rem;display:block;font-weight:500} tfoot td{font-weight:700;border-top:1px solid var(--line2);background:var(--surface2)} .card>.tbl-wrap:first-child table{border-radius:var(--r);overflow:hidden} /* ---------- KPI ---------- */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.85rem} @media(min-width:1200px){.kpis{grid-template-columns:repeat(4,1fr)}} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s,transform .15s var(--ease),box-shadow .15s} .kpi:hover{border-color:var(--line2);transform:translateY(-1px);box-shadow:var(--shadow-lg)} .kpi .k{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700;line-height:1.3} .kpi .v{font-size:1.85rem;font-weight:700;letter-spacing:-.03em;margin-top:.35rem;line-height:1.1;font-variant-numeric:tabular-nums} .kpi .d{font-size:.85rem;color:var(--mut);margin-top:.3rem} .kpi .v.good{color:var(--good)}.kpi .v.bad{color:var(--bad)}.kpi .v.warn{color:var(--warn)} /* ---------- charts ---------- */ .viz{width:100%;display:block;font-family:var(--sans);overflow:visible} .viz text{fill:var(--mut);font-size:.75rem} .viz .grid line{stroke:var(--grid);stroke-width:1} .viz .axis{stroke:var(--axis);stroke-width:1} .viz .lbl-strong{fill:var(--text);font-weight:700} .viz .val{fill:var(--text);font-family:var(--mono);font-size:.75rem} .viz .mark{transition:opacity .12s} .viz .mark:hover{opacity:.8} .legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--text2);margin-top:.6rem} .legend span{display:inline-flex;align-items:center;gap:.4rem} .legend i{width:.7rem;height:.7rem;border-radius:3px;display:inline-block} #tip{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xs);padding:.5rem .7rem;font-size:.85rem;box-shadow:var(--shadow-lg);pointer-events:none;max-width:18rem} #tip b{display:block} /* горизонтальные столбики (воронка, топ поставщиков) */ .hbars{display:grid;gap:.5rem} .hb{display:grid;grid-template-columns:minmax(6rem,9rem) 1fr 3.5rem;align-items:center;gap:.7rem;font-size:.9rem} .hb-l{text-align:right;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)} .hb-t{height:.9rem;background:var(--surface3);border-radius:1rem;overflow:hidden} .hb-t i{display:block;height:100%;border-radius:1rem;transition:width .5s var(--ease)} .hb-v{font-family:var(--mono);font-size:.85rem;font-variant-numeric:tabular-nums} /* ---------- supplier detail ---------- */ .det-head{display:flex;align-items:flex-start;gap:1.1rem;flex-wrap:wrap;margin-bottom:1.1rem} .det-head .grow{min-width:0} .det-head .nm{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;background:transparent;border:1px solid transparent;padding:.2em .4em;margin-left:-.4em;width:calc(100% + .4em);min-height:0;line-height:1.2} .det-head .nm:hover,.det-head .nm:focus{border-color:var(--line2);background:var(--field)} .det-meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.5rem} .det-meta input,.det-meta select{width:auto} .det-acts{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap} .score-ring{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.7rem 1rem} .score-ring .big{font-size:1.6rem;font-weight:700;letter-spacing:-.02em} .score-ring .cap{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700} .tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;position:relative} .tabs::-webkit-scrollbar{display:none} .tab{background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:.6rem .85rem;min-height:0;color:var(--mut);font-weight:600;font-size:.92rem;margin-bottom:-1px;flex:none;scroll-snap-align:start;transition:color .15s} .tab:hover{color:var(--text);background:transparent} .tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:700} .tab .cnt{font-family:var(--mono);font-size:.75rem;margin-left:.3rem;color:var(--mut2)} .mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.7rem;margin-bottom:1.1rem} .ms{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .9rem} .ms .k{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700} .ms .v{font-family:var(--mono);font-size:1.2rem;font-weight:600;margin-top:.15rem} .ms .v.good{color:var(--good)}.ms .v.bad{color:var(--bad)}.ms .v.warn{color:var(--warn)} /* ---------- timeline ---------- */ .tl{position:relative;padding-left:1.5rem} .tl:before{content:'';position:absolute;left:.45rem;top:.4rem;bottom:.4rem;width:2px;background:var(--line)} .tl-i{position:relative;padding:.4rem 0 1rem} .tl-i:before{content:'';position:absolute;left:-1.3rem;top:.75rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--surface);border:2px solid var(--accent)} .tl-i.t-decision:before{background:var(--accent)} .tl-i .h{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--mut)} .tl-i .h b{color:var(--text);font-size:.95rem} .tl-i .b{margin-top:.2rem;white-space:pre-wrap} /* ---------- kanban ---------- */ .kanban{display:grid;grid-template-columns:repeat(5,minmax(13rem,1fr));gap:.85rem;overflow-x:auto;padding-bottom:.5rem} .kcol{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:.7rem;min-height:8rem} .kcol h4{margin:0 0 .6rem;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);display:flex;justify-content:space-between;padding:0 .2rem} .kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:.75rem;margin-bottom:.55rem;box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s,transform .15s var(--ease)} .kcard:hover{border-color:var(--accent);transform:translateY(-1px)} .kcard b{display:block;font-size:.95rem} .kcard .m{font-size:.85rem;color:var(--mut);margin-top:.15rem} .kcard .mv{display:flex;gap:.3rem;margin-top:.55rem;align-items:center} /* ---------- tasks ---------- */ .task{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .4rem;border-bottom:1px solid var(--line)} .task:last-child{border-bottom:0} .task input[type=checkbox]{margin-top:.2rem} .task .t{flex:1;min-width:0} .task .t b{display:block;font-size:.95rem} .task.done .t b{text-decoration:line-through;color:var(--mut)} .task .t .m{font-size:.85rem;color:var(--mut);display:flex;gap:.5rem;flex-wrap:wrap} .due-over{color:var(--bad);font-weight:700}.due-soon{color:var(--warn);font-weight:700} .pr-high{color:var(--bad)}.pr-normal{color:var(--mut)}.pr-low{color:var(--mut2)} /* ---------- docs ---------- */ .doc{display:flex;align-items:center;gap:.7rem;padding:.6rem .3rem;border-bottom:1px solid var(--line)} .doc:last-child{border-bottom:0} .doc .ic{width:2.4rem;height:2.4rem;border-radius:var(--r-xs);background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;font-size:.7rem;font-weight:800;color:var(--mut);font-family:var(--mono);flex:none} .doc .t{flex:1;min-width:0}.doc .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .doc .t .m{font-size:.85rem;color:var(--mut)} .doc a{text-decoration:none;font-weight:700} /* ---------- forms ---------- */ .form-box{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin-top:.85rem} .form-box .grid{margin-bottom:.85rem} .form-actions{display:flex;gap:.5rem;justify-content:flex-end} .audit-item{display:grid;grid-template-columns:1fr 14rem;gap:.85rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line)} .audit-item:last-child{border-bottom:0} .audit-item .q b{display:block;font-size:.95rem}.audit-item .q span{font-size:.85rem;color:var(--mut)} .seg{display:flex;gap:.2rem} .seg button{flex:1;padding:.2em 0;min-height:var(--ctl-sm);font-family:var(--mono);font-size:.85rem;border-radius:var(--r-xs)} .seg button.on{background:var(--text);border-color:var(--text);color:var(--bg)} /* ---------- modal / sheet ---------- */ #modal{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;z-index:50;padding:1.5rem;animation:fadeIn .15s} #modal .box{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);padding:1.25rem 1.4rem;width:min(46rem,100%);max-height:90vh;max-height:90dvh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:popIn .2s var(--ease)} #modal .box h3{margin:0 0 1rem;font-size:1.15rem;font-weight:700} #modal img{max-height:70vh;object-fit:contain;border-radius:var(--r-xs);display:block;margin:0 auto} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}} @keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}} #toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);border-radius:var(--r-sm);padding:.65rem 1rem .65rem .85rem;font-size:.92rem;font-weight:600;z-index:90;box-shadow:var(--shadow-lg);max-width:90vw;animation:popIn .2s var(--ease);display:flex;align-items:center;gap:.55rem;transition:opacity .2s,transform .2s} #toast svg{width:1.1rem;height:1.1rem;flex:none} #toast.ok svg{color:var(--accent-fill)}#toast.err svg{color:#ff8a8a} #toast.out{opacity:0;transform:translateX(-50%) translateY(6px)} .attn{display:flex;align-items:center;gap:.7rem;padding:.55rem .3rem;border-bottom:1px solid var(--line);cursor:pointer;border-radius:var(--r-xs)} .attn:last-child{border-bottom:0}.attn:hover{background:var(--surface2)} .attn .ic{width:.55rem;height:.55rem;border-radius:50%;flex:none} .attn .t{flex:1;min-width:0}.attn .t b{display:block;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attn .t span{font-size:.85rem;color:var(--mut)} /* ---------- settings ---------- */ .settings{display:flex;flex-direction:column;gap:1.5rem;max-width:64rem} .sec{display:grid;grid-template-columns:minmax(12rem,17rem) 1fr;gap:1.5rem;align-items:start} .sec-h h3{font-size:1.02rem;font-weight:700;margin-bottom:.35rem} .sec-h p{margin:0;color:var(--mut);font-size:.9rem;line-height:1.5} .sec-b{padding:1.25rem 1.4rem} .fhint{font-size:.8rem;color:var(--mut);margin-top:.35rem;line-height:1.45} .fhint.ok{color:var(--accent);font-weight:600} /* выбор категории: список + поле для новой категории под ним */ .catpick{display:flex;flex-direction:column;gap:.4rem;min-width:0} .catpick>select,.catpick>input{width:100%;min-width:0} .catpick>input[hidden]{display:none} .hero-meta .catpick{gap:.3rem} .tags{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;background:var(--field);border:1px solid var(--line2);border-radius:var(--r-sm);padding:.4rem .5rem;min-height:var(--ctl);transition:border-color .15s,box-shadow .15s} .tags:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .tagc{display:inline-flex;align-items:center;gap:.25rem;background:var(--surface2);border:1px solid var(--line);border-radius:.5rem;padding:.15rem .3rem .15rem .6rem;font-size:.9rem;font-weight:600;line-height:1.5;cursor:grab} .tagc .x{border:0;background:transparent;min-height:0;padding:0 .3rem;font-size:1.05rem;line-height:1;color:var(--mut);border-radius:.3rem} .tagc .x:hover{background:var(--bad-soft);color:var(--bad)} .tag-in{border:0;background:transparent;min-height:1.9rem;padding:.1rem .3rem;flex:1;min-width:10rem;box-shadow:none!important} #savebar{position:sticky;bottom:1rem;margin-top:1.5rem;display:flex;align-items:center;gap:.7rem;background:var(--text);color:var(--bg);border-radius:var(--r);padding:.7rem .8rem .7rem 1.1rem;box-shadow:var(--shadow-lg);max-width:64rem;transform:translateY(calc(100% + 2rem));opacity:0;transition:transform .25s var(--ease),opacity .2s;pointer-events:none;font-weight:600} #savebar.show{transform:none;opacity:1;pointer-events:auto} #savebar .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--accent-fill);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-fill) 25%,transparent)} #savebar button{background:transparent;border-color:color-mix(in srgb,var(--bg) 30%,transparent);color:var(--bg)} #savebar button:hover{background:color-mix(in srgb,var(--bg) 12%,transparent)} #savebar button.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)} /* аватар-инициалы */ .av{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.65rem;font-size:.78rem;font-weight:700;letter-spacing:.02em;flex:none;background:hsl(var(--h) 45% 90%);color:hsl(var(--h) 45% 28%)} .av.lg{width:3.2rem;height:3.2rem;font-size:1.1rem;border-radius:.9rem} :root[data-theme="dark"] .av{background:hsl(var(--h) 30% 24%);color:hsl(var(--h) 60% 80%)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .av{background:hsl(var(--h) 30% 24%);color:hsl(var(--h) 60% 80%)}} /* ---------- skeleton ---------- */ .skel{position:relative;overflow:hidden;background:var(--surface2);border-radius:var(--r-xs);min-height:1em} .skel:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 60%,transparent),transparent);animation:shimmer 1.3s infinite} @keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}} #boot{padding:1.5rem;max-width:96rem} #boot .kpis{margin:1.5rem 0} /* ---------- auth ---------- */ #auth{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem} .auth-box{width:min(26rem,100%);background:var(--surface);border:1px solid var(--line);border-radius:1.2rem;padding:1.8rem 1.7rem;box-shadow:var(--shadow-lg)} .auth-box h3{margin:0 0 .8rem;font-size:1.1rem} .auth-head{padding-bottom:1.3rem} .auth-head .blogo{height:2.1rem} .auth-head .sub{margin-top:.8rem;font-size:.9rem;color:var(--mut)} .auth-msg{margin-top:.8rem;font-size:.9rem;color:var(--good);background:var(--good-soft);border-radius:var(--r-xs);padding:.55rem .7rem} .auth-msg.err{color:var(--bad);background:var(--bad-soft)} /* ---------- notifications / comments ---------- */ .bell-cnt{position:absolute;top:-.2rem;right:-.2rem;background:var(--bad);color:#fff;font-size:.68rem;font-weight:800;border-radius:1rem;padding:0 .35rem;line-height:1.1rem;min-width:1.1rem;text-align:center;font-family:var(--mono)} #bell-wrap{position:relative} #notif-pop{position:absolute;right:0;top:calc(var(--ctl) + .4rem);width:22rem;max-height:26rem;overflow-y:auto;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:40;padding:.4rem;animation:popIn .18s var(--ease)} .notif{padding:.55rem .6rem;border-radius:var(--r-xs);cursor:pointer;display:flex;flex-direction:column;gap:.1rem} .notif:hover{background:var(--surface2)} .notif.unread{background:var(--accent-soft)} .notif b{font-size:.92rem}.notif span{font-size:.85rem;color:var(--mut)}.notif small{font-size:.75rem;color:var(--mut2)} .cmt{padding:.7rem 0;border-bottom:1px solid var(--line)} .cmt:last-child{border-bottom:0} .cmt-h{display:flex;gap:.6rem;align-items:center;font-size:.85rem;color:var(--mut)} .cmt-h b{color:var(--text);font-size:.95rem} .cmt-h button{margin-left:auto} .cmt-b{margin-top:.25rem;white-space:pre-wrap} .mention{color:var(--accent);font-weight:700;background:var(--accent-soft);border-radius:.3rem;padding:0 .2em} a.btn-link{text-decoration:none} s.muted{opacity:.7} /* ---------- mobile shell: нижняя панель, шторка, поиск ---------- */ #mnav,#sheet,#sheet-scrim,#mtop{display:none} @media(max-width:960px){ #shell{flex-direction:column} #nav{display:none} #main{padding-bottom:var(--mnav)} /* верхняя панель */ #top{padding:.55rem 1rem;min-height:3.5rem;gap:.5rem;flex-wrap:wrap} #top h2{font-size:1.15rem;flex:1;min-width:0} #top h2 .sub{display:none} #top .grow{display:none} #gsearch{display:none;width:100%;max-width:none;order:10} #top.search-open #gsearch{display:block} #search-btn{display:inline-flex} #save-chip{display:none} #save-chip.err,#save-chip.dirty{display:flex;width:100%;order:11;font-size:.8rem} #page{padding:1rem 1rem 2rem} #banner{padding:.5rem 1rem} /* нижняя навигация */ #mnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-top:1px solid var(--line);padding:.35rem .25rem env(safe-area-inset-bottom);height:var(--mnav)} #mnav button{border:0;background:transparent;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:0;padding:.3rem 0;color:var(--mut);font-size:.68rem;font-weight:600;position:relative;line-height:1.1} #mnav button svg{width:1.45rem;height:1.45rem} #mnav button.on{color:var(--accent)} #mnav button .cnt{position:absolute;top:.1rem;left:calc(50% + .4rem);background:var(--accent-fill);color:var(--accent-ink);font-family:var(--mono);font-size:.62rem;font-weight:700;border-radius:1rem;padding:0 .3rem;line-height:1rem;min-width:1rem} /* шторка «Ещё» */ #sheet-scrim{display:block;position:fixed;inset:0;background:var(--scrim);z-index:40;animation:fadeIn .15s} #sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--surface);border-radius:1.2rem 1.2rem 0 0;padding:.6rem 1rem calc(1rem + env(safe-area-inset-bottom));max-height:88vh;max-height:88dvh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:sheetIn .22s var(--ease)} #sheet .grab{width:2.5rem;height:.3rem;border-radius:1rem;background:var(--line2);margin:0 auto .8rem} #sheet .who{display:flex;align-items:center;gap:.8rem;padding:.4rem 0 .9rem;border-bottom:1px solid var(--line);margin-bottom:.5rem} #sheet .who .av{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--accent-fill);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;flex:none} #sheet .who b{display:block;font-size:1rem}#sheet .who small{color:var(--mut);font-size:.85rem} #sheet .nav-i{padding:.75rem .6rem;font-size:1rem} #sheet .prefs{display:flex;flex-direction:column;gap:.7rem;padding:.9rem 0 .4rem;border-top:1px solid var(--line);margin-top:.5rem} #sheet .prefs .row{justify-content:space-between} #sheet .prefs .lbl{margin:0} /* сетки */ .c2,.c3,.c21,.c12{grid-template-columns:1fr} .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr} .span2,.span3,.span4{grid-column:auto} .kpis{grid-template-columns:1fr 1fr;gap:.6rem} .kpi{padding:.8rem .9rem}.kpi .v{font-size:1.5rem} .mini-stats{grid-template-columns:1fr 1fr;gap:.5rem} .kanban{grid-template-columns:repeat(5,80vw);scroll-snap-type:x mandatory} .kcol{scroll-snap-align:start} .card{padding:.95rem 1rem} .toolbar input[type=search],.toolbar input,.toolbar select{width:100%} .toolbar>*{flex:1 1 auto} .toolbar .chips{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -1rem;padding:0 1rem .1rem;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)} .toolbar .chips::-webkit-scrollbar{display:none} .toolbar .chips .chip{flex:none} .toolbar button.primary{flex:1 1 100%} /* карточка поставщика */ .det-head{gap:.7rem} .det-head .nm{font-size:1.3rem;min-width:0;width:100%;margin-left:0;padding-left:0} .det-meta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .det-meta input,.det-meta select{width:100%!important} .det-acts{grid-column:span 2;display:flex} .det-acts button{flex:1} .score-ring{width:100%;justify-content:space-between} .tabs{position:sticky;top:3.5rem;z-index:15;background:var(--bg);margin:0 -1rem 1rem;padding:0 1rem;gap:0;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)} .tab{padding:.7rem .8rem} .audit-item{grid-template-columns:1fr} .hb{grid-template-columns:6rem 1fr 3rem;gap:.5rem} .toolbar label{flex:0 0 auto;white-space:nowrap} /* крупные цели для пальца */ :root{--ctl:2.75rem;--ctl-sm:2.25rem} /* модалка становится шторкой */ #modal{align-items:flex-end;padding:0} #modal .box{width:100%;max-height:92vh;max-height:92dvh;border-radius:1.2rem 1.2rem 0 0;border-bottom:0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));animation:sheetIn .22s var(--ease)} #modal .box:before{content:'';display:block;width:2.5rem;height:.3rem;border-radius:1rem;background:var(--line2);margin:0 auto .8rem} #modal .form-actions{position:sticky;bottom:calc(-1rem - env(safe-area-inset-bottom));background:var(--surface);padding:.8rem 0 0;margin-top:1rem!important;border-top:1px solid var(--line)} #modal .form-actions button{flex:1} #toast{bottom:calc(var(--mnav) + .8rem)} .sec{grid-template-columns:1fr;gap:.6rem} .sec-b{padding:1rem} #savebar{position:fixed;left:.6rem;right:.6rem;bottom:calc(var(--mnav) + .6rem);margin:0;flex-wrap:wrap} #savebar .grow{flex-basis:100%} #savebar button{flex:1} #notif-pop{position:fixed;left:.6rem;right:.6rem;top:3.7rem;width:auto} /* таблицы превращаются в карточки */ .tbl-wrap table,.tbl-wrap thead,.tbl-wrap tbody,.tbl-wrap tfoot,.tbl-wrap tr,.tbl-wrap td{display:block} .tbl-wrap thead{display:none} .tbl-wrap table{font-size:.95rem} .tbl-wrap tr{border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .85rem;margin-bottom:.6rem;background:var(--surface)} .tbl-wrap tr.clickable:hover td{background:transparent} .tbl-wrap tr.clickable:active{background:var(--surface2)} .tbl-wrap td{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.2rem 0;border:0;text-align:left} .tbl-wrap td.num,.tbl-wrap td.right{text-align:right} .tbl-wrap td:before{content:attr(data-th);color:var(--mut);font-size:.8rem;font-weight:600;flex:none;max-width:45%} .tbl-wrap td:first-child{display:block;font-weight:700;font-size:1.02rem;padding-bottom:.35rem;margin-bottom:.25rem;border-bottom:1px solid var(--line)} .tbl-wrap td:first-child:before{display:none} .tbl-wrap td:empty,.tbl-wrap td.m-empty{display:none} .tbl-wrap td:last-child:has(button){justify-content:flex-end;padding-top:.5rem;gap:.4rem} .tbl-wrap td:last-child:has(button):before{display:none} .tbl-wrap tr.m-collapsed td:nth-child(n+5):not(:last-child){display:none} .tbl-wrap .m-more{display:block!important;width:100%;margin-top:.3rem;border:0;background:transparent;color:var(--accent);font-size:.85rem;min-height:2rem;padding:0;justify-content:flex-start} .tbl-wrap tfoot tr{background:var(--surface2)} .card>.tbl-wrap:first-child{padding:.6rem .6rem 0} } @media(max-width:400px){ .kpis{grid-template-columns:1fr 1fr} .det-meta{grid-template-columns:1fr} .det-acts{grid-column:auto} } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} #top h2 .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1} #boot .cols{gap:1.1rem} /* ========================================================================== v2.1 — компоненты «премиум»: экран входа, меню пользователя, палитра ⌘K, аватары, ступени воронки, KPI с иконками, список внимания ========================================================================== */ .tag-in:focus-visible{outline:none} /* --- экран входа: панель бренда + форма --- */ #auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding:0;align-items:stretch} .auth-side{background:#171717;color:#f0f1ee;display:flex;flex-direction:column;justify-content:space-between;padding:3rem;position:relative;overflow:hidden} .auth-side:before{content:'';position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(187,255,0,.22),transparent 70%);pointer-events:none} .auth-side:after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:2.5rem 2.5rem;mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 80%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 80%);pointer-events:none} .auth-side-in{position:relative;z-index:1;max-width:28rem} .auth-side .blogo{height:2rem;display:block;margin-bottom:3rem} .auth-side h1{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0 0 .8rem} .auth-side .lead{font-size:1.1rem;color:#c5c7c1;margin:0 0 2rem;line-height:1.5} .auth-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem} .auth-side li{display:flex;gap:.7rem;align-items:center;color:#e6e7e2;font-size:.95rem} .auth-side li svg{width:1.2rem;height:1.2rem;color:#bbff00;flex:none;background:rgba(187,255,0,.12);border-radius:50%;padding:.2rem} .auth-foot{position:relative;z-index:1;font-size:.8rem;color:#8f928b} .auth-main{display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--bg)} .auth-box .blogo{display:none} .auth-head .sub{font-size:1.15rem;font-weight:700;color:var(--text);margin-top:0} /* --- меню пользователя внизу боковой панели --- */ #nav-foot{position:relative;padding:.6rem} .user-btn{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:.65rem;padding:.5rem .6rem;border-radius:var(--r-sm);min-height:0;text-align:left;justify-content:flex-start} .user-btn:hover{background:var(--surface2);border-color:transparent} .user-btn .u{flex:1;min-width:0} .user-btn .u b{display:block;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-btn .u small{display:block;font-size:.78rem;color:var(--mut)} .user-btn .chev{width:1rem;height:1rem;color:var(--mut2);flex:none} #user-pop{position:absolute;left:.6rem;right:.6rem;bottom:calc(100% - .2rem);background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:.5rem;z-index:30;animation:popIn .18s var(--ease)} #user-pop .pref{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem .5rem;font-size:.85rem;color:var(--text2)} #user-pop .sep{height:1px;background:var(--line);margin:.4rem 0} /* --- поиск в шапке с подсказкой ⌘K --- */ .search-wrap{position:relative;display:flex;align-items:center;width:20rem;max-width:34vw} .search-wrap>svg{position:absolute;left:.8rem;width:1rem;height:1rem;color:var(--mut2);pointer-events:none} .search-wrap input{padding-left:2.3rem;padding-right:3.6rem} .search-wrap kbd,.pal-in kbd,.pal-i kbd{font-family:var(--sans);font-size:.7rem;font-weight:700;color:var(--mut);background:var(--surface2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:.35rem;padding:.1rem .4rem;line-height:1.3;white-space:nowrap} .search-wrap kbd{position:absolute;right:.55rem;cursor:pointer} /* --- палитра --- */ #pal{position:fixed;inset:0;z-index:70} .pal-scrim{position:absolute;inset:0;background:var(--scrim);animation:fadeIn .15s} .pal-box{position:absolute;left:50%;top:12vh;transform:translateX(-50%);width:min(40rem,calc(100% - 2rem));background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;animation:popIn .2s var(--ease)} .pal-in{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-bottom:1px solid var(--line)} .pal-in>svg{width:1.2rem;height:1.2rem;color:var(--mut);flex:none} .pal-close{display:none} .pal-in kbd{cursor:pointer} .pal-in input{border:0;background:transparent;box-shadow:none!important;font-size:1.05rem;padding:.4rem 0;min-height:2.4rem} .pal-in input:focus-visible{outline:none} .pal-list{max-height:min(26rem,60vh);overflow-y:auto;padding:.4rem} .pal-g{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);padding:.6rem .6rem .25rem} .pal-i{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:var(--r-sm);cursor:pointer} .pal-i.on,.pal-i:hover{background:var(--surface2)} .pal-i.on{box-shadow:inset 0 0 0 1px var(--line2)} .pal-i .ic{width:2rem;height:2rem;display:grid;place-items:center;flex:none;color:var(--mut)} .pal-i .ic svg{width:1.15rem;height:1.15rem} .pal-i .t{flex:1;min-width:0}.pal-i .t b{display:block;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pal-i .t small{display:block;font-size:.8rem;color:var(--mut)} .pal-foot{padding:.45rem .9rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--mut2)} .av.sm{width:1.8rem;height:1.8rem;font-size:.68rem;border-radius:.5rem} /* --- список поставщиков --- */ .nm-cell{display:inline-flex;align-items:center;gap:.6rem} .list-meta{font-size:.8rem;color:var(--mut);margin:-.4rem 0 .6rem;font-family:var(--mono)} .tbl-wrap thead th{position:sticky;top:0;z-index:2} .m-more{display:none} /* --- шапка поставщика: ступени воронки --- */ .det-head .av.lg{margin-top:.15rem} .stepper{display:flex;align-items:center;gap:0;margin:0 0 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.3rem;overflow-x:auto;scrollbar-width:none} .stepper::-webkit-scrollbar{display:none} .step{flex:1 1 0;min-width:0;border:0;background:transparent;border-radius:var(--r-sm);min-height:2.4rem;padding:.3rem .6rem;color:var(--mut);font-size:.82rem;font-weight:600;gap:.45rem;justify-content:center;position:relative} .step i{width:.6rem;height:.6rem;border-radius:50%;border:2px solid var(--line2);flex:none;transition:all .15s} .step.done{color:var(--text2)}.step.done i{background:var(--accent);border-color:var(--accent)} .step.cur{background:var(--accent-soft);color:var(--accent)}.step.cur i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)} .step:hover:not(:disabled){background:var(--surface2);color:var(--text)} .step:disabled{opacity:1;cursor:default} .step-off{padding:0 .6rem;flex:none} .stepper.off .step{opacity:.55} /* --- KPI с иконками --- */ .kpi .k{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .kpi .ki{width:1.7rem;height:1.7rem;border-radius:.55rem;background:var(--surface2);display:grid;place-items:center;color:var(--mut);flex:none} .kpi .ki svg{width:1rem;height:1rem} .kpi:hover .ki{background:var(--accent-soft);color:var(--accent)} /* --- «требует внимания» --- */ .attn-list{display:flex;flex-direction:column;gap:.2rem} .attn{border:0;padding:.55rem .5rem;border-radius:var(--r-sm)} .attn .ic{width:2rem;height:2rem;border-radius:.6rem;display:grid;place-items:center;flex:none;background:var(--info-soft);color:var(--info)} .attn .ic svg{width:1.05rem;height:1.05rem} .attn.lv2 .ic{background:var(--warn-soft);color:var(--warn)}.attn.lv3 .ic{background:var(--bad-soft);color:var(--bad)} .attn .arr{color:var(--mut2);font-size:1.2rem;padding-right:.2rem} .empty svg{display:block;margin:0 auto .6rem} @media(max-width:960px){ #auth{grid-template-columns:1fr} .auth-side{display:none} .auth-box .blogo.on-light{display:block} .search-wrap{display:none} .pal-box{top:0;left:0;right:0;transform:none;width:100%;border-radius:0 0 var(--r) var(--r);border-top:0} .pal-list{max-height:calc(100dvh - 8rem)} .pal-in kbd{display:none}.pal-close{display:inline-flex} .stepper{margin:0 -1rem 1rem;border-radius:0;border-left:0;border-right:0;padding:.3rem .6rem} .step{flex:none;padding:.3rem .7rem} .det-head .av.lg{display:none} } input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none} .g5{grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr))} .fld label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ========================================================================== v2.2 — шапка поставщика, воронка, бренды, умная вставка, расходы, дашборд ========================================================================== */ /* --- мобильный вход: брендовый фон вместо пустоты --- */ @media(max-width:960px){ #auth{display:block;position:relative;background:#171717} #auth:before{content:'';position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 0%,rgba(187,255,0,.28),transparent 70%),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:100% 100%,2.2rem 2.2rem,2.2rem 2.2rem;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 90%);mask-image:linear-gradient(180deg,#000 30%,transparent 90%);pointer-events:none} .auth-side{display:contents} .auth-side:before,.auth-side:after{display:none} .auth-side-in{padding:2.2rem 1.4rem 1rem;position:relative;z-index:1} .auth-side .blogo{height:1.6rem;margin-bottom:1.4rem} .auth-side h1{font-size:1.7rem} .auth-side .lead{font-size:.95rem;margin-bottom:1.1rem} .auth-side ul{gap:.5rem;margin-bottom:.4rem} .auth-side li{font-size:.9rem} .auth-foot{display:block;text-align:center;padding:.5rem 0 1.5rem;order:2;position:relative;z-index:1} #auth{display:flex;flex-direction:column;min-height:100dvh} .auth-main{order:1} .auth-main{position:relative;padding:.5rem 1rem 2rem;background:transparent;min-height:0} .auth-box{box-shadow:var(--shadow-lg)} .auth-box .blogo{display:none!important} } /* --- шапка поставщика --- */ .hero{padding:0;overflow:hidden;margin-bottom:1.1rem} .hero-top{display:flex;gap:1.1rem;align-items:flex-start;padding:1.2rem 1.4rem 1rem} .hero-main{flex:1;min-width:0} .hero .nm{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;background:transparent;border:1px solid transparent;padding:.15em .4em;margin-left:-.4em;width:calc(100% + .4em);min-height:0;line-height:1.2;border-radius:var(--r-xs)} .hero .nm:hover,.hero .nm:focus{border-color:var(--line2);background:var(--field)} .hero-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.5rem} .hero-meta .meta-sel{width:auto;min-height:2.1rem;padding:.2em 2em .2em .7em;font-size:.9rem;font-weight:600;background-color:var(--surface2);border-color:var(--line)} .hero-meta .meta-city{display:inline-flex;align-items:center;gap:.3rem;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 .4rem 0 .6rem;min-height:2.1rem;color:var(--mut)} .hero-meta .meta-city svg{width:1rem;height:1rem;flex:none} .hero-meta .meta-city input{border:0;background:transparent;min-height:0;padding:.2em .3em;width:11rem;font-size:.9rem;font-weight:600;box-shadow:none!important} .hero-acts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.8rem} .hero-side{display:flex;gap:.8rem;flex:none} .ring{position:relative;width:4.6rem;height:4.6rem;display:grid;place-items:center} .ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .ring circle{fill:none;stroke-width:5;stroke-linecap:round} .ring .bg{stroke:var(--surface3)} .ring .fg{stroke:var(--accent);transition:stroke-dashoffset .6s var(--ease)} .ring-t{text-align:center;line-height:1.1} .ring-t b{display:block;font-size:.95rem;letter-spacing:-.02em} .ring-t small{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700;margin-top:.1rem} /* воронка */ .pipe{border-top:1px solid var(--line);background:var(--surface2);padding:.9rem 1.4rem .8rem} .pipe-track{display:flex;align-items:flex-start;position:relative} .pipe-track:before{content:'';position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:1rem;height:2px;background:var(--line2);z-index:0} .node{flex:1 1 0;min-width:0;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:.45rem;min-height:0;padding:0;position:relative;z-index:1;color:var(--mut);font-size:.8rem;font-weight:600;cursor:pointer} .node i{width:2rem;height:2rem;border-radius:50%;background:var(--surface);border:2px solid var(--line2);display:grid;place-items:center;font-style:normal;font-size:.8rem;font-weight:700;color:var(--mut2);transition:all .2s var(--ease)} .node i svg{width:1rem;height:1rem} .node span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .node.done{color:var(--text2)}.node.done i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} :root[data-theme="dark"] .node.done i{color:#171717} .node.cur{color:var(--text);font-weight:700}.node.cur i{background:var(--surface);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);animation:pulse 2s infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 10%,transparent)}} .node:hover:not(:disabled) i{border-color:var(--accent);transform:scale(1.06)} .node:disabled{cursor:default} .pipe.off .node{opacity:.45} .pipe-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.8rem;flex-wrap:wrap} .pipe-cap{font-size:.9rem;color:var(--text2)} /* бренды в карточке */ .tags.plain{background:transparent;border:0;padding:0;min-height:0} .tags.plain:focus-within{box-shadow:none} .tags.plain .tagc{cursor:default;background:var(--accent-soft);border-color:transparent;color:var(--accent)} .brand-add{width:auto;min-height:2rem;padding:.15em 2em .15em .7em;font-size:.85rem;font-weight:600;border-style:dashed;background-color:transparent} /* умная вставка */ .paste label{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem} .paste label:before{content:'✦'} .paste textarea{background:var(--accent-soft);border-color:transparent;min-height:4.5em} .paste textarea:focus{background:var(--field)} .flash{animation:flash 1.2s var(--ease)} @keyframes flash{0%{background:var(--accent-soft)}100%{background:var(--field)}} .chk{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text2);margin-top:.5rem} .rem-ic{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:.4rem;background:var(--accent-soft);color:var(--accent);vertical-align:-.3rem;margin-right:.35rem} .rem-ic svg{width:.85rem;height:.85rem} /* дашборд */ .dash-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem} .dash-head h3{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)} .kpis.big4{grid-template-columns:repeat(4,1fr);margin-bottom:.8rem} .kpi.big .v{font-size:2.3rem} .kpi.big .d{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;min-height:1.3rem} .delta{font-size:.78rem;font-weight:700;padding:.05em .45em;border-radius:.4rem;background:var(--surface2)} .delta.up{color:var(--good);background:var(--good-soft)}.delta.down{color:var(--bad);background:var(--bad-soft)}.delta.flat{color:var(--mut)} .minis{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.1rem} .mini{display:inline-flex;align-items:center;gap:.55rem;background:var(--surface);border:1px solid var(--line);border-radius:2rem;padding:.35rem .9rem .35rem .45rem;cursor:pointer;font-size:.85rem;color:var(--text2);transition:border-color .15s,transform .15s var(--ease)} .mini:hover{border-color:var(--line2);transform:translateY(-1px)} .mini .ki{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--surface2);display:grid;place-items:center;color:var(--mut)} .mini .ki svg{width:.9rem;height:.9rem} .mini b{font-size:1rem;color:var(--text);font-variant-numeric:tabular-nums} .hb-click{cursor:pointer;border-radius:.4rem;margin:0 -.4rem;padding:.1rem .4rem} .hb-click:hover{background:var(--surface2)} .kpi .hbars{margin-top:.6rem}.kpi .hb{font-size:.8rem;grid-template-columns:minmax(4rem,6rem) 1fr 3.5rem} @media(max-width:960px){ .hero-top{padding:1rem;gap:.7rem;flex-wrap:wrap} .hero-top>.av.lg{display:none} .hero .nm{font-size:1.3rem;margin-left:0;padding-left:0;width:100%} .hero-meta .meta-sel,.hero-meta .meta-city{flex:1 1 45%;width:auto} .hero-meta .meta-city input{width:100%} .hero-acts{gap:.5rem}.hero-acts button{flex:1} .hero-side{width:100%;justify-content:flex-start;gap:1rem;padding-top:.6rem;border-top:1px dashed var(--line)} .ring{width:4.4rem;height:4.4rem} .pipe{padding:.8rem 1rem;overflow-x:auto;scrollbar-width:none} .pipe-track{min-width:32rem} .kpis.big4{grid-template-columns:1fr 1fr} .kpi.big .v{font-size:1.7rem} .minis{overflow-x:auto;flex-wrap:nowrap;margin:0 -1rem 1rem;padding:0 1rem;scrollbar-width:none} .mini{flex:none} } /* ========================================================================== v2.3 — мобильный слой: как нативное приложение ========================================================================== */ .m-only{display:none!important} .mlogo{display:none} .mlogo-img.on-dark{display:none} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mlogo-img.on-dark{display:block}:root:not([data-theme="light"]) .mlogo-img.on-light{display:none}} :root[data-theme="dark"] .mlogo-img.on-dark{display:block} :root[data-theme="dark"] .mlogo-img.on-light{display:none} .page-h{display:none} .fab{display:none} .hero-chips{display:none} .pipe-bar{display:none} .st-list{display:flex;flex-direction:column;gap:.35rem} .st-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;text-align:left;padding:.6rem .8rem;min-height:3.2rem;border-color:var(--line);background:var(--surface);white-space:normal} .st-row small{color:var(--mut);font-size:.82rem;line-height:1.3} .st-row.on{border-color:var(--accent);background:var(--accent-soft)} .st-row .chk-ic{color:var(--accent);font-weight:800} .contact-rows{display:flex;flex-direction:column} .crow{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--line)} .crow:last-child{border-bottom:0} .cic{width:2.2rem;height:2.2rem;border-radius:.7rem;background:var(--surface2);display:grid;place-items:center;color:var(--mut);flex:none} .cic svg{width:1.05rem;height:1.05rem} .ct{flex:1;min-width:0}.ct small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700}.ct b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cact{flex:none;font-size:.8rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border:0;border-radius:2rem;padding:.35em .8em;min-height:0;text-decoration:none} .cact:hover{background:var(--accent-soft);border:0;color:var(--accent)} @media(max-width:960px){ .m-only{display:revert!important} .d-only{display:none!important} /* ---- верхняя панель ---- */ #top{min-height:3.5rem;padding:.45rem .75rem .45rem .9rem;gap:.35rem;padding-top:calc(.45rem + env(safe-area-inset-top))} #top .mlogo{display:flex;align-items:center;flex:1;min-width:0;text-decoration:none} #top .mlogo-img{height:1.45rem;width:auto} #top h2{display:none} #top.detail .mlogo{display:none} #top.detail h2{display:flex;flex:1;min-width:0;font-size:1.05rem} #top.detail h2 .ttl{flex:1} #top button.ghost.icon{width:2.6rem;min-width:2.6rem;height:2.6rem} /* ---- крупный заголовок страницы ---- */ .page-h{display:block;padding:.4rem 0 1rem} .page-h h1{font-size:1.75rem;font-weight:700;letter-spacing:-.025em;line-height:1.15} .page-h p{margin:.25rem 0 0;color:var(--mut);font-size:.9rem} /* ---- плавающая кнопка ---- */ .fab{display:grid;place-items:center;position:fixed;right:1rem;bottom:calc(var(--mnav) + 1rem);width:3.5rem;height:3.5rem;border-radius:1.2rem;background:var(--accent-fill);color:var(--accent-ink);border:0;box-shadow:0 10px 28px rgba(187,255,0,.35),0 2px 6px rgba(0,0,0,.2);z-index:25;padding:0;min-height:0} .fab svg{width:1.5rem;height:1.5rem} .fab:active{transform:scale(.94)} #page{padding-bottom:6rem} /* ---- нижняя панель: пилюля под активной ---- */ #mnav button{gap:.2rem} #mnav button svg{width:1.4rem;height:1.4rem;padding:.2rem .6rem;box-sizing:content-box;border-radius:1rem;transition:background .15s} #mnav button.on svg{background:var(--accent-soft)} #mnav button:active svg{transform:scale(.92)} /* ---- карточки поставщиков ---- */ .sup-cards{display:flex;flex-direction:column;gap:.6rem} .sup-card{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.85rem .6rem .85rem .85rem;box-shadow:var(--shadow);cursor:pointer;position:relative} .sup-card:active{background:var(--surface2)} .sup-card.archived{opacity:.6} .sup-card .av{width:2.5rem;height:2.5rem;font-size:.85rem} .sc-main{flex:1;min-width:0} .sc-top{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start} .sc-top b{font-size:1rem;line-height:1.25;flex:1;min-width:0} .sc-top .pill{flex:none;font-size:.72rem} .sc-meta{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;margin-top:.35rem;color:var(--mut);font-size:.82rem} .sc-meta span{display:inline-flex;align-items:center;gap:.25rem} .sc-meta svg{width:.9rem;height:.9rem} .sc-foot{display:flex;gap:.8rem;align-items:center;margin-top:.55rem;font-size:.78rem;color:var(--mut);flex-wrap:wrap} .sc-score{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--accent)} .sc-score .bar{width:3.2rem;height:.4rem;display:inline-block} .sc-score .bar b{display:block;height:100%;background:var(--accent);border-radius:1rem} .sc-arr{color:var(--mut2);font-size:1.3rem;align-self:center;padding-right:.2rem} .list-meta{margin:0 0 .5rem} /* ---- шапка поставщика ---- */ .hero-top{padding:.9rem 1rem .8rem;gap:.7rem;align-items:center;flex-wrap:nowrap} .hero-top>.av.lg{display:grid;width:2.8rem;height:2.8rem;font-size:.95rem;border-radius:.8rem;margin:0} .hero-main{display:flex;flex-direction:column;gap:.5rem} .hero .nm{font-size:1.2rem;width:100%;margin:0;padding:.1em .2em .1em 0} .hero-meta,.hero-acts{display:none} .hero-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;cursor:pointer} .hero-chips .tag.muted{color:var(--mut)} .hero-chips .hc-city{display:inline-flex;align-items:center;gap:.2rem;font-size:.8rem;color:var(--mut)} .hero-chips .hc-city svg{width:.85rem;height:.85rem} .hero-chips .hc-edit{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--accent)} .hero-side{width:auto;border:0;padding:0;flex:none} .ring{width:3.4rem;height:3.4rem}.ring circle{stroke-width:6}.ring-t b{font-size:.8rem}.ring-t small{display:none} .hero-side .ring:nth-child(2){display:none} /* ---- воронка: полоса сегментов вместо кругов ---- */ .pipe{padding:.8rem 1rem .9rem;overflow:visible} .pipe-track{display:none} .pipe-bar{display:flex;gap:.3rem;width:100%;border:0;background:transparent;padding:0;min-height:0;cursor:pointer} .pipe-bar i{flex:1;height:.55rem;border-radius:1rem;background:var(--line2);transition:background .2s} .pipe-bar i.done{background:var(--accent)} .pipe-bar i.cur{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)} .pipe-foot{margin-top:.7rem;flex-wrap:nowrap} .pipe-cap{font-size:.85rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pipe-foot button{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis} /* ---- вкладки-пилюли ---- */ .tabs{border:0;background:transparent;gap:.4rem;padding:.2rem 1rem .6rem;margin:0 -1rem .6rem;top:calc(3.5rem + env(safe-area-inset-top));-webkit-mask-image:none;mask-image:none} .tab{border:1px solid var(--line);border-radius:2rem;background:var(--surface);padding:.45rem .9rem;margin:0;font-size:.88rem;color:var(--text2)} .tab.on{background:var(--text);border-color:var(--text);color:var(--bg)} .tab .cnt{color:inherit;opacity:.7} /* ---- мини-статистика: 3 в ряд, компактно ---- */ .mini-stats{grid-template-columns:repeat(3,1fr);gap:.45rem} .ms{padding:.55rem .65rem}.ms .k{font-size:.62rem}.ms .v{font-size:1rem} /* ---- модалка-шторка: заголовок крупнее, поля крупнее ---- */ #modal .box h3{font-size:1.25rem} /* ---- тосты и прочее ---- */ #toast{left:1rem;right:1rem;transform:none;max-width:none;justify-content:center} #toast.out{transform:translateY(6px)} } @media(max-width:400px){.sc-foot span:nth-child(3){display:none}} @media(max-width:960px){ .cols>*,.stack>*{min-width:0} .hero-main{min-width:0} .hero .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pipe-foot{flex-direction:column;align-items:stretch;gap:.5rem} .pipe-foot button{max-width:none;width:100%} .pipe-cap{white-space:normal} .crow{min-width:0} .crow .cact{padding:.3em .6em;font-size:.75rem} .toolbar button.primary{display:none} .toolbar select{flex:1 1 40%} .card-h .hint{font-size:.8rem} } @media(max-width:960px){ .dash-head{flex-direction:column;align-items:stretch;gap:.5rem} .dash-head .tog{display:flex} .dash-head .tog button{flex:1;text-align:center;justify-content:center} .kpi.big{padding:.85rem .9rem} .kpi.big .v{font-size:1.6rem} .kpi.big .d{min-height:0} } .ver{font-size:.7rem;color:var(--mut2);text-align:center;padding:.5rem 0 .1rem;font-family:var(--mono)} /* узкие десктопные окна (ноутбук 13"): таблицы не ломают названия на 5 строк, а прокручиваются */ @media(min-width:961px){ td.name{white-space:nowrap;max-width:22rem;overflow:hidden;text-overflow:ellipsis} td.name .nm-cell{max-width:100%} td.name .nm-cell>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tbl-wrap table{min-width:56rem} } /* ========================================================================== v2.4 — фотографии сэмплов: сетка, просмотр, комментарии к снимку ========================================================================== */ .ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.7rem} .ph-grid.sm{grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.5rem} .ph-cell{position:relative;margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--surface2);border:1px solid var(--line);cursor:pointer;transition:transform .15s var(--ease),border-color .15s,box-shadow .15s} .ph-cell:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:var(--shadow-lg)} .ph-cell:active{transform:scale(.985)} .ph-img{position:relative;aspect-ratio:1;display:block;background:var(--surface3)} .ph-img:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 55%,transparent),transparent);animation:shimmer 1.3s infinite} .ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1} .ph-img:has(img):after{display:none} .ph-cell figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.6rem .55rem .45rem;font-size:.78rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ph-badge{position:absolute;top:.4rem;right:.4rem;z-index:2;display:inline-flex;align-items:center;gap:.2rem;background:rgba(0,0,0,.6);color:#fff;border-radius:1rem;padding:.1rem .45rem;font-size:.72rem;font-weight:700;backdrop-filter:blur(4px)} .ph-badge svg{width:.8rem;height:.8rem} .ph-grid.sm figcaption{padding-top:1.2rem;font-size:.7rem} /* просмотр снимка */ #pview{position:fixed;inset:0;z-index:75;animation:fadeIn .15s} .pv-scrim{position:absolute;inset:0;background:rgba(10,10,10,.88);backdrop-filter:blur(3px)} .pv-box{position:absolute;inset:0;display:grid;grid-template-columns:1fr minmax(20rem,23rem);animation:popIn .2s var(--ease)} .pv-stage{position:relative;display:grid;place-items:center;padding:1.5rem;min-width:0} .pv-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-sm);box-shadow:0 20px 60px rgba(0,0,0,.5)} .pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:2.8rem;height:2.8rem;min-height:0;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1;backdrop-filter:blur(6px)} .pv-nav:hover{background:rgba(255,255,255,.22);border:0;color:#fff} .pv-nav.prev{left:1rem}.pv-nav.next{right:1rem} .pv-count{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.8rem;background:rgba(0,0,0,.4);border-radius:1rem;padding:.15rem .7rem} .pv-side{background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden} .pv-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)} .pv-who{display:flex;align-items:center;gap:.6rem;min-width:0} .pv-who b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pv-who small{display:block;font-size:.76rem;color:var(--mut)} .pv-cap{padding:.9rem 1rem;border-bottom:1px solid var(--line)} .pv-cmts{flex:1;overflow-y:auto;padding:.9rem 1rem} .pv-cmts .cmt{padding:.6rem 0} .pv-cmts .cmt-h{gap:.45rem} .pv-cmts .cmt-h b{font-size:.88rem} .pv-post{padding:.9rem 1rem;border-top:1px solid var(--line);background:var(--surface2)} .pv-post textarea{min-height:3.4em} #uplbar{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:95;background:var(--text);color:var(--bg);border-radius:var(--r-sm);padding:.6rem .9rem;font-size:.88rem;font-weight:600;box-shadow:var(--shadow-lg);min-width:14rem;animation:popIn .2s var(--ease)} #uplbar i{display:block;height:.28rem;border-radius:1rem;background:rgba(255,255,255,.22);margin-top:.5rem;overflow:hidden} #uplbar b{display:block;height:100%;background:var(--accent-fill);border-radius:1rem;transition:width .3s var(--ease)} @media(max-width:960px){ .ph-grid{grid-template-columns:repeat(3,1fr);gap:.4rem} .ph-grid.sm{grid-template-columns:repeat(3,1fr)} .ph-cell figcaption{display:none} .card-h:has(button[data-act="ph-gal"]) .row{flex:1;justify-content:flex-end} .card-h button[data-act="ph-cam"],.card-h button[data-act="ph-gal"]{flex:1;min-width:0;padding-left:.6em;padding-right:.6em} .pv-stage{background:rgba(0,0,0,.4)} /* просмотр: фото сверху, панель снизу */ .pv-box{grid-template-columns:1fr;grid-template-rows:minmax(0,45vh) 1fr} .pv-stage{padding:.6rem;padding-top:calc(.6rem + env(safe-area-inset-top))} .pv-nav{width:2.4rem;height:2.4rem} .pv-side{border-left:0;border-top:1px solid var(--line);border-radius:1.2rem 1.2rem 0 0} .pv-post{padding-bottom:calc(.9rem + env(safe-area-inset-bottom))} #uplbar{left:1rem;right:1rem;transform:none;bottom:calc(var(--mnav) + .8rem)} } /* ============================ дашборд «Работа» (v2.6) ============================ Одна колонка, крупные цели для пальца (минимум 44px), плотность ниже обычной: экран читают на ходу, а не за столом. */ .dw-hd{margin:.2rem 0 1rem} .dw-date{font-size:1.35rem;font-weight:700;letter-spacing:-.01em} .dw-date::first-letter{text-transform:uppercase} .dw-sum{color:var(--mut);font-size:.95rem;margin-top:.15rem} .dw-rec{display:flex;gap:.5rem;overflow-x:auto;padding:0 0 .9rem;margin:0 -1rem;padding-left:1rem;padding-right:1rem;scrollbar-width:none} .dw-rec::-webkit-scrollbar{display:none} .dw-chip{display:inline-flex;align-items:center;gap:.45rem;flex:none;max-width:12rem;padding:.4rem .75rem .4rem .4rem; border:1px solid var(--line);border-radius:999px;background:var(--card);color:inherit;font-size:.85rem;font-weight:600;cursor:pointer} .dw-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dw-chip .av{width:1.6rem;height:1.6rem;font-size:.65rem} .dw-stack{display:flex;flex-direction:column;gap:.9rem} .card.dw{padding:0;overflow:hidden} .card.dw>.card-h{padding:.9rem 1rem .6rem;margin:0} .dw-empty{padding:0 1rem 1rem;color:var(--mut);font-size:.9rem} .dw-ok{display:flex;align-items:center;gap:.6rem;padding:0 1rem 1.1rem;color:var(--mut)} .dw-ok svg{width:1.2rem;height:1.2rem;color:var(--good)} .dw-ok b{font-weight:600;font-size:.95rem;color:var(--fg)} /* «Сегодня»: группа = одна фабрика = одна поездка */ .dw-grp+.dw-grp{border-top:1px solid var(--line)} .dw-grp-h{display:flex;align-items:center;gap:.5rem;width:100%;padding:.55rem 1rem;background:var(--bg2); border:0;border-top:1px solid var(--line);color:inherit;text-align:left;cursor:pointer;font-size:.85rem} .dw-grp-h b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dw-grp-h span{color:var(--mut)} .dw-grp-h .arr{margin-left:auto;color:var(--mut2)} .dw-task{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;min-height:3rem;cursor:pointer} .dw-task+.dw-task{border-top:1px solid var(--line)} .dw-task input{width:1.25rem;height:1.25rem;flex:none;accent-color:var(--accent-fill)} .dw-task .tx{flex:1;min-width:0;font-weight:600;display:flex;align-items:center;gap:.4rem} .dw-task .tx svg{width:.95rem;height:.95rem;flex:none;color:var(--accent)} .dw-task .dd{font-size:.78rem;color:var(--mut);flex:none} .dw-task.over .dd{color:var(--bad);font-weight:700} /* строки списков: слева суть, справа число, стрелка в конце */ .dw-row{display:flex;align-items:center;gap:.6rem;width:100%;padding:.7rem 1rem;min-height:3rem; background:none;border:0;border-top:1px solid var(--line);color:inherit;text-align:left;cursor:pointer} .dw-row .a{flex:1;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:.1rem;background:none;border:0;color:inherit;text-align:left;padding:0;cursor:pointer} .dw-row .a b,.dw-row .a span{display:block;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dw-row .a b{font-weight:600} .dw-row .a span{font-size:.8rem;color:var(--mut)} .dw-row .b{display:flex;align-items:center;gap:.5rem;flex:none} .dw-row .b .st{font-size:.78rem;color:var(--mut)} .dw-row .arr{color:var(--mut2);flex:none} .dw-row.sil{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem;cursor:default} .dw-row.sil .mono{white-space:nowrap;font-size:.85rem} .dw-row .acts{display:flex;gap:.35rem;flex:none} .dw-ic{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem; border:1px solid var(--line);border-radius:.7rem;background:var(--card);color:var(--fg);cursor:pointer} .dw-ic svg{width:1.05rem;height:1.05rem} .dw-more{display:block;width:100%;padding:.75rem 1rem;border:0;border-top:1px solid var(--line); background:none;color:var(--accent);font-weight:600;font-size:.9rem;text-align:center;cursor:pointer} /* мои расходы — одна строка-кнопка */ .card.dw-exp{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;width:100%;border:1px solid var(--line); background:var(--card);color:inherit;text-align:left;cursor:pointer} .dw-exp .k{font-size:.85rem;color:var(--mut)} .dw-exp b{margin-left:auto;font-size:1.1rem} .dw-exp .n{font-size:.8rem;color:var(--mut)} .dw-exp .arr{color:var(--mut2)} /* «+» над нижним меню: большой палец достаёт, верх экрана — нет */ #dwfab{position:fixed;right:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 4.6rem);z-index:40} .fab{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:999px; border:0;background:var(--accent-fill);color:var(--accent-ink);cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.18)} .fab svg{width:1.5rem;height:1.5rem} @media(min-width:961px){#dwfab{bottom:1.4rem;right:1.4rem} .dw-stack{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start} .card.dw-exp{grid-column:1/-1}} /* в шапке дашборда два переключателя: режим и период — на телефоне в строку */ .dash-head{flex-wrap:wrap;gap:.5rem} .dash-head h3{flex:1 1 100%} @media(min-width:961px){.dash-head h3{flex:0 1 auto}} /* переключатель режима — своей строкой, без заголовка отчёта */ .dash-head.dw-head{margin-bottom:.9rem} .dash-head.dw-head .tog{width:100%} .dash-head.dw-head .tog button{flex:1} /* последний блок не должен уезжать под кнопку «+» и нижнее меню */ .dw-stack{padding-bottom:6rem} @media(min-width:961px){.dw-stack{padding-bottom:1rem}} /* ========================================================================== v2.7 — мобильный слой: свет, воздух, мягкие поверхности Правила: рамки убираются в пользу тени и расстояния; разделители внутри карточки — тонкие и с отступом слева, как в нативных приложениях; статусы и сроки — пилюли с мягким фоном, а не цветной текст; активная вкладка обозначается цветом текста, а не лаймовой плашкой. ========================================================================== */ @media(max-width:960px){ :root{--mnav:calc(4.6rem + env(safe-area-inset-bottom))} /* ---------- верх экрана ---------- */ #top{border-bottom:0;min-height:3.25rem;padding:.5rem 1rem; background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px)} #page{padding:.1rem 1rem 1.6rem} .page-h{padding:.1rem 0 1.15rem} .page-h h1{font-size:1.95rem;font-weight:600;letter-spacing:-.035em;line-height:1.1} .page-h p{margin-top:.35rem;font-size:.92rem} /* ---------- поверхности ---------- */ .card{border:0;border-radius:1.25rem;box-shadow:var(--shadow);padding:1rem 1.1rem} .card.dw{padding:0} .card.dw>.card-h{padding:1rem 1.1rem .4rem;border:0} .card.dw>.card-h h3{font-size:1.05rem;font-weight:600;letter-spacing:-.015em} .card.dw>.card-h .hint{font-size:.85rem;color:var(--mut2)} /* разделители внутри карточки — тонкие, с отступом, не на всю ширину */ .card.dw .dw-row,.card.dw .dw-task{position:relative;border-top:0} .card.dw .dw-row+.dw-row::after,.card.dw .dw-task+.dw-task::after{ content:'';position:absolute;left:1.1rem;right:0;top:0;height:1px;background:var(--line)} .dw-row{padding:.8rem 1.1rem} .dw-task{padding:.8rem 1.1rem} .dw-more{border-top:0;color:var(--accent);padding:.6rem 1.1rem 1rem} /* заголовок группы — метка, а не плашка */ .dw-grp+.dw-grp{border-top:0} .dw-grp-h{background:transparent;border-top:0;padding:.85rem 1.1rem .1rem;font-size:.78rem; letter-spacing:.02em;text-transform:uppercase;color:var(--mut)} .dw-grp-h b{font-weight:700;color:var(--text2);text-transform:none;letter-spacing:0;font-size:.88rem} .dw-grp+.dw-grp .dw-grp-h{padding-top:1.1rem} /* сроки и статусы — пилюли */ .dw-task .dd,.dw-row .b .mono,.dw-row.sil .mono{ padding:.22rem .55rem;border-radius:999px;background:var(--surface2);color:var(--mut); font-size:.74rem;font-weight:600;font-family:var(--sans);letter-spacing:0} .dw-task.over .dd,.dw-row .mono.badc{background:var(--bad-soft);color:var(--bad)} .dw-row .mono.warnc{background:var(--warn-soft);color:var(--warn)} .dw-row .b .st{font-size:.78rem;color:var(--mut2)} .dw-task input{width:1.4rem;height:1.4rem;border-radius:.45rem} .dw-task .tx{font-weight:600;letter-spacing:-.01em} /* кружки действий в строке обзвона */ .dw-ic{width:2.6rem;height:2.6rem;border:0;border-radius:50%;background:var(--surface2);color:var(--text2)} .dw-ic:active{background:var(--accent-soft);color:var(--accent)} /* лента недавних фабрик */ .dw-rec{padding-bottom:1rem;gap:.45rem} .dw-chip{border:0;background:var(--surface);box-shadow:var(--shadow);padding:.35rem .85rem .35rem .35rem} /* дата и сводка */ .dw-hd{margin:.1rem 0 1.1rem} .dw-date{font-size:1.5rem;letter-spacing:-.03em;font-weight:600} .dw-sum{font-size:.92rem;margin-top:.2rem} /* мои расходы */ .card.dw-exp{border:0;border-radius:1.25rem;box-shadow:var(--shadow);padding:1rem 1.1rem} /* ---------- переключатель режима: пилюля с бегунком ---------- */ .dash-head .tog{border:0;border-radius:999px;background:var(--surface2);padding:.25rem;overflow:visible} .dash-head .tog button{border-radius:999px;padding:.5rem .9rem;font-size:.88rem;font-weight:600; color:var(--mut);background:transparent;min-height:2.25rem} .dash-head .tog button+button{border-left:0} .dash-head .tog button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.09)} /* ---------- нижняя панель ---------- */ #mnav{grid-template-columns:1fr 1fr 4.8rem 1fr 1fr;align-items:center;height:var(--mnav); border-top:0;padding:.2rem .25rem env(safe-area-inset-bottom); background:color-mix(in srgb,var(--surface) 90%,transparent); box-shadow:0 -1px 0 color-mix(in srgb,var(--line) 80%,transparent),0 -10px 30px rgba(23,23,23,.05)} #mnav button{font-size:.66rem;font-weight:600;gap:.22rem;color:var(--mut2)} #mnav button svg{width:1.5rem;height:1.5rem;padding:0;border-radius:0;transition:none} #mnav button.on{color:var(--text)} #mnav button.on svg{background:none} #mnav .cnt{top:-.05rem;left:calc(50% + .45rem);background:var(--bad);color:#fff;font-family:var(--sans)} /* круглая кнопка главного действия: выступает над панелью */ #mnav .mnav-add{justify-self:center;width:3.6rem;height:3.6rem;margin-top:-1.7rem;border-radius:50%; background:var(--accent-fill);color:var(--accent-ink);border:4px solid var(--bg);gap:0; box-shadow:0 8px 22px rgba(140,190,0,.42)} #mnav .mnav-add svg{width:1.6rem;height:1.6rem} #mnav .mnav-add:active{transform:scale(.94)} #dwfab{display:none} /* на телефоне действие живёт в панели */ .dw-stack{padding-bottom:1.5rem} /* ---------- тост сверху и не перехватывает нажатия ---------- */ #toast{top:calc(.7rem + env(safe-area-inset-top));bottom:auto;pointer-events:none; border-radius:999px;padding:.6rem 1.05rem;font-size:.88rem} #toast.out{transform:translateX(-50%) translateY(-8px)} /* ---------- шторки ---------- */ #modal .box{border-radius:1.5rem 1.5rem 0 0;padding:.6rem 1.1rem calc(1rem + env(safe-area-inset-bottom))} #sheet{border-radius:1.5rem 1.5rem 0 0} #sheet .nav-i{border-radius:.9rem} #modal .box:before,#sheet .grab{width:2.4rem;height:.28rem;background:var(--line2);opacity:.9} /* ---------- списки и карточки поставщиков ---------- */ .sup-card{border:0;border-radius:1.25rem;box-shadow:var(--shadow)} .toolbar .chip{border:0;background:var(--surface2);font-weight:600} .toolbar .chip.on{background:var(--accent-fill);color:var(--accent-ink)} } /* ---- v2.7.1: правки по снимкам экрана ---- */ @media(max-width:960px){ /* действие живёт только в круглой кнопке панели — второй «плюс» лишний */ .fab{display:none!important} /* заголовок группы: без капса, город — приглушённой подписью */ .dw-grp-h{text-transform:none;letter-spacing:0;font-size:.85rem;color:var(--mut2)} .dw-grp-h b{font-size:.9rem} /* мои расходы — в две строки, чтобы не сжималось на 390px */ .card.dw-exp{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:'k k a' 'v n a'; row-gap:.15rem;column-gap:.6rem;align-items:center} .dw-exp .k{grid-area:k;font-size:.85rem} .dw-exp b{grid-area:v;margin:0;font-size:1.5rem;letter-spacing:-.02em} .dw-exp .n{grid-area:n;justify-self:start;align-self:end;padding-bottom:.25rem} .dw-exp .arr{grid-area:a} /* круглая кнопка: свечение мягче, без лаймового ореола на пол-экрана */ #mnav .mnav-add{box-shadow:0 4px 14px rgba(23,23,23,.18)} /* карточка поставщика: имя максимум в две строки, статус не наезжает */ .sup-card{border:0;padding:.9rem .75rem .9rem .9rem;border-radius:1.15rem} .sc-top{flex-wrap:wrap} .sc-top b{font-size:.98rem;flex:1 1 100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sc-top .pill{order:2} .sc-meta{margin-top:.45rem} .sc-meta .tag{background:var(--surface2);border:0;border-radius:999px;padding:.2rem .6rem;font-size:.76rem} .sup-card .sc-arr{align-self:center} } /* ---- v2.7.2: единый вид переключателей и фильтров на телефоне ---- */ @media(max-width:960px){ .tog{border:0;border-radius:999px;background:var(--surface2);padding:.2rem;overflow:visible} .tog button{border-radius:999px;background:transparent;color:var(--mut);font-weight:600;padding:.4rem .8rem} .tog button+button{border-left:0} .tog button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.09)} #sheet .prefs .lbl{font-size:.78rem;letter-spacing:.02em} /* фильтры — мягкие поля без рамок */ .toolbar select,.toolbar input[type=search],.toolbar input{border:0;background:var(--surface2);border-radius:.85rem} .toolbar .chip{border-radius:999px} } /* ---- v2.7.3: кнопка действия заметнее выступает над панелью ---- */ @media(max-width:960px){ #mnav .mnav-add{align-self:start;margin-top:-1.35rem} } /* ========================================================================== v3 — мобильный интерфейс 2026 Никаких «карточек с рамкой». Экран — это текст на фоне: крупный заголовок, подписи секций маленькими капителями, группы строк на мягкой поверхности с большим радиусом. Один шрифт (Onest), числа — табличные цифры того же шрифта, без моноширинного. Цвет — почти монохром; лайм — только у кнопки действия и одного акцента. Док внизу плавающий, не прибит к краям. ========================================================================== */ @media(max-width:960px){ :root{ --bg:#f4f4f2; --surface:#ffffff; --surface2:#ededea; --surface3:#e4e4e0; --field:#ededea; --line:#e9e9e6; --line2:#dcdcd8; --text:#111111; --text2:#3d3d3a; --mut:#75756f; --mut2:#9a9a94; --shadow:none; --r:1.375rem; --r-sm:1rem; --r-xs:.75rem; --mnav:calc(5.6rem + env(safe-area-inset-bottom)); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#0a0a0a; --surface:#161616; --surface2:#222222; --surface3:#2c2c2c; --field:#222222; --line:#242424; --line2:#333333; --text:#f4f4f1; --text2:#cfcfca; --mut:#8d8d87; --mut2:#6a6a65; }} :root[data-theme="dark"]{ --bg:#0a0a0a; --surface:#161616; --surface2:#222222; --surface3:#2c2c2c; --field:#222222; --line:#242424; --line2:#333333; --text:#f4f4f1; --text2:#cfcfca; --mut:#8d8d87; --mut2:#6a6a65; } html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{letter-spacing:-.011em;font-feature-settings:'ss01','cv11';font-variant-numeric:tabular-nums} .mono,.dw-sum,.hint{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em} h1,h2,h3{letter-spacing:-.03em} /* ---------- верх: почти пустой ---------- */ #top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:3rem;padding:.45rem .9rem 0} #top .mlogo-img{height:1.25rem;opacity:.9} #top .ghost.icon{width:2.4rem;height:2.4rem;border-radius:50%;background:transparent;color:var(--text2)} #top .ghost.icon svg{width:1.35rem;height:1.35rem;stroke-width:1.75} #page{padding:.5rem 1.1rem 1.6rem} /* заголовок страницы */ .page-h{padding:.25rem 0 1.2rem} .page-h h1{font-size:2.1rem;font-weight:600;letter-spacing:-.045em;line-height:1.05;color:var(--text)} .page-h p{margin-top:.4rem;font-size:.95rem;color:var(--mut);letter-spacing:-.01em} /* на рабочем экране заголовок заменён приветствием */ body[data-page="dashboard"][data-pagemode="work"] .page-h{display:none} .dash-head.dw-head{margin:.1rem 0 1.4rem} .dw-hd{margin:0 0 1.35rem} .dw-eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)} .dw-hi{font-size:2rem;font-weight:600;letter-spacing:-.045em;line-height:1.08;margin:.3rem 0 .45rem} .dw-sum{font-size:.95rem;color:var(--mut)} .dw-sum .badc{color:var(--bad);font-weight:600} /* ---------- сегментированный переключатель ---------- */ .tog,.dash-head .tog{background:var(--surface2);padding:.2rem;border-radius:999px} .tog button,.dash-head .tog button{padding:.5rem 1rem;font-size:.9rem;font-weight:500;color:var(--mut);min-height:2.3rem} .tog button.on,.dash-head .tog button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.05);font-weight:600} :root[data-theme="dark"] .tog button.on{background:var(--surface3)} /* ---------- секции: подпись + поверхность ---------- */ .dw-stack{gap:1.6rem;padding-bottom:1rem} .card.dw{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;overflow:visible} .card.dw>.card-h{padding:0 .35rem .6rem;margin:0;display:flex;align-items:baseline;justify-content:space-between} .card.dw>.card-h h3{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)} .card.dw>.card-h .hint{font-size:.8rem;color:var(--mut2);font-weight:500} .card.dw .dw-b{background:var(--surface);border-radius:var(--r);overflow:hidden} .dw-empty,.dw-ok{padding:1rem 1.1rem;font-size:.92rem;color:var(--mut)} .dw-ok b{font-weight:500;color:var(--text2)} /* строки */ .card.dw .dw-row,.card.dw .dw-task{padding:.85rem 1.1rem;min-height:3.4rem} .card.dw .dw-row+.dw-row::after,.card.dw .dw-task+.dw-task::after{left:1.1rem;background:var(--line)} .dw-row .a b,.dw-task .tx{font-weight:500;font-size:.98rem;letter-spacing:-.015em} .dw-row .a span{font-size:.82rem;color:var(--mut);margin-top:.05rem} .dw-row .arr,.dw-grp-h .arr{color:var(--line2)} .dw-row .b .st{font-size:.8rem;color:var(--mut)} /* пилюли: тише, меньше */ .dw-task .dd,.dw-row .b .mono,.dw-row.sil .mono{font-size:.72rem;font-weight:600;padding:.25rem .55rem;letter-spacing:0} .dw-task .dd{background:var(--surface2);color:var(--mut)} .dw-task.over .dd,.dw-row .mono.badc{background:var(--bad-soft);color:var(--bad)} .dw-row .mono.warnc{background:var(--warn-soft);color:var(--warn)} /* чекбокс — круглый */ .dw-task input{appearance:none;-webkit-appearance:none;width:1.45rem;height:1.45rem;border:1.5px solid var(--line2);border-radius:50%;background:transparent;margin:0;position:relative;flex:none} .dw-task input:checked{background:var(--text);border-color:var(--text)} .dw-task input:checked::after{content:'';position:absolute;left:.42rem;top:.2rem;width:.35rem;height:.65rem;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)} .dw-task .tx svg{color:var(--mut)} /* группы «Сегодня» */ .dw-grp-h{padding:.9rem 1.1rem .2rem;font-size:.8rem;color:var(--mut2)} .dw-grp-h b{font-size:.82rem;font-weight:600;color:var(--mut);text-transform:none} .dw-grp+.dw-grp{border-top:1px solid var(--line)} .dw-grp+.dw-grp .dw-grp-h{padding-top:.9rem} /* действия в строке обзвона — монохром */ .dw-ic{width:2.5rem;height:2.5rem;background:var(--surface2);color:var(--text2)} .dw-ic svg{stroke-width:1.75} .dw-more{padding:.7rem 1.1rem .95rem;font-weight:500;font-size:.9rem;color:var(--text2)} /* недавние фабрики — монохромные чипы */ .dw-rec{gap:.4rem;padding-bottom:1.5rem} .dw-chip{background:var(--surface);box-shadow:none;border:1px solid var(--line);padding:.3rem .8rem .3rem .3rem;font-weight:500} .dw-chip .av{background:var(--surface2);color:var(--text2)} .av{background:var(--surface2)!important;color:var(--text2)!important} /* мои расходы */ .card.dw-exp{background:var(--surface);border:0;box-shadow:none;border-radius:var(--r);padding:1rem 1.1rem;row-gap:.1rem} .dw-exp .k{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)} .dw-exp b{font-size:1.75rem;font-weight:600;letter-spacing:-.04em} .dw-exp .n{font-size:.82rem;color:var(--mut)} /* ---------- список поставщиков как группа строк ---------- */ .list-meta{font-size:.8rem;color:var(--mut2);margin:.25rem .35rem .5rem} .sup-cards{background:var(--surface);border-radius:var(--r);gap:0;overflow:hidden} .sup-card{background:transparent;border:0;box-shadow:none;border-radius:0;padding:.95rem 1rem;position:relative;align-items:center;gap:.8rem} .sup-card+.sup-card::before{content:'';position:absolute;left:4.2rem;right:0;top:0;height:1px;background:var(--line)} .sup-card:active{background:var(--surface2)} .sup-card .av{width:2.6rem;height:2.6rem;border-radius:.85rem;font-size:.78rem;font-weight:600} .sc-top{flex-wrap:nowrap;align-items:center;gap:.6rem} .sc-top b{font-size:.98rem;font-weight:500;letter-spacing:-.015em;-webkit-line-clamp:1;flex:1 1 auto} .sc-top .pill{order:0;font-size:.7rem;font-weight:600} .sc-meta{margin-top:.25rem;font-size:.8rem;gap:.35rem .55rem} .sc-meta .tag{background:transparent;padding:0;font-size:.8rem;color:var(--mut)} .sc-meta .tag::after{content:'·';margin-left:.55rem;color:var(--line2)} .sc-foot{margin-top:.3rem;font-size:.78rem;color:var(--mut2)} .sc-foot .bar{display:none} .sup-card .sc-arr{color:var(--line2)} /* фильтры-чипы: активный — чёрный */ .toolbar{gap:.5rem} .toolbar .chip{background:var(--surface);border:1px solid var(--line);color:var(--text2);font-weight:500;padding:.35rem .85rem;min-height:2.2rem;font-size:.86rem} .toolbar .chip.on{background:var(--text);color:var(--bg);border-color:var(--text)} .toolbar .chip .mono{opacity:.55;font-weight:500} .toolbar select{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.4rem 2rem .4rem .9rem;font-weight:500;font-size:.88rem;min-height:2.3rem} .toolbar button.primary{display:none} /* добавление — через кнопку действия */ .toolbar label{font-size:.85rem;color:var(--mut)} /* ---------- плавающий док + кнопка действия ---------- */ #mnav{display:flex;align-items:center;gap:.6rem;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom)); height:auto;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} #mnav .dock{flex:1;display:grid;grid-template-columns:repeat(4,1fr);height:4rem;border-radius:999px; background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px); box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06)} :root[data-theme="dark"] #mnav .dock,:root:not([data-theme="light"]) #mnav .dock{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 30px rgba(0,0,0,.5)} #mnav .dock button{height:100%;padding:0;gap:.2rem;font-size:.62rem;font-weight:500;color:var(--mut)} #mnav .dock button svg{width:1.4rem;height:1.4rem;stroke-width:1.75} #mnav .dock button.on{color:var(--text)} #mnav .dock button.on svg{stroke-width:2.2} #mnav .cnt{top:.45rem;left:calc(50% + .3rem);background:var(--text);color:var(--bg);font-size:.58rem;min-width:1rem;line-height:1rem;padding:0 .28rem} #mnav .mnav-add{flex:none;width:4rem;height:4rem;margin:0;border:0;border-radius:50%;background:var(--accent-fill);color:var(--accent-ink); box-shadow:0 10px 30px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.08);align-self:center} #mnav .mnav-add svg{width:1.7rem;height:1.7rem;stroke-width:2.2} #mnav .mnav-add:active{transform:scale(.93)} #main{padding-bottom:var(--mnav)} /* ---------- шторки, тост ---------- */ #modal .box{border-radius:1.75rem 1.75rem 0 0;padding:.5rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.18)} #modal .box h3{font-size:1.3rem;font-weight:600;letter-spacing:-.03em;margin:.6rem 0 1rem} #modal .box:before,#sheet .grab{width:2.25rem;height:.3rem;background:var(--line2);opacity:1;margin-bottom:.4rem} #modal .st-row{border:0;background:var(--surface2);border-radius:1rem;padding:.9rem 1rem;margin-bottom:.5rem;font-size:1rem;font-weight:500} #modal .st-row span svg{width:1.3rem;height:1.3rem;stroke-width:1.75} #sheet{border-radius:1.75rem 1.75rem 0 0;padding-top:.5rem} #sheet .nav-i{border-radius:1rem;font-weight:500} #sheet .nav-i.on{background:var(--surface2);color:var(--text)} #sheet .who .av{background:var(--text);color:var(--bg)} #toast{border-radius:999px;background:var(--text);color:var(--bg);font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.18)} /* ---------- поля и кнопки ---------- */ input,select,textarea{border-radius:var(--r-sm);border:0;background:var(--field)} input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--text) inset;outline:0} button.primary{border-radius:var(--r-sm);font-weight:600;letter-spacing:-.01em} .form-actions button{min-height:3rem;font-size:1rem} .fld label{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)} } /* ---- v3.0.1: правки по снимкам ---- */ @media(max-width:960px){ /* левый свес глифов (D, Y, J) не должен обрезаться overflow'ом */ .dw-row .a b,.dw-row .a span,.sc-top b,.dw-grp-h b,.dw-task .tx{padding-left:.1em;margin-left:0} /* имя фабрики — до двух строк, статус под ним, а не рядом */ .sc-top{flex-wrap:wrap;align-items:flex-start;gap:.25rem .6rem} .sc-top b{flex:1 1 100%;-webkit-line-clamp:2;line-height:1.25} .sc-top .pill{order:2} .sc-meta{margin-top:.35rem} .sc-foot{margin-top:.35rem} .sc-score{color:var(--text2);font-weight:600} .sc-foot .mono{color:var(--mut2)} /* счётчики в доке — чёрные, не лаймовые */ #mnav .dock button .cnt{background:var(--text);color:var(--bg);font-family:var(--sans);top:.4rem;left:calc(50% + .25rem)} } /* ---- v3.0.2: карточка поставщика на телефоне ---- */ @media(max-width:960px){ #top.detail{padding:.45rem .6rem 0} #top.detail .ttl{font-size:1rem;font-weight:600;letter-spacing:-.02em} /* шапка — не коробка, а заголовок страницы */ .hero.card{background:transparent;border:0;box-shadow:none;padding:.4rem 0 0;border-radius:0} .hero-top{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem 1rem;align-items:start} .hero-top .av.lg{width:3.4rem;height:3.4rem;border-radius:1.1rem;font-size:1rem;font-weight:600} .hero-main{grid-column:2/4;grid-row:2;min-width:0} .hero-top .av.lg{grid-row:1} .hero-side{grid-column:3;grid-row:1;justify-self:end} .hero-main .nm{font-size:1.7rem;font-weight:600;letter-spacing:-.04em;line-height:1.1;width:100%;padding:0;border:0;background:transparent;white-space:normal;height:auto} .hero-main .nm:focus{box-shadow:none;outline:0;background:transparent} .hero-meta{display:none} .hero-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem;align-items:center} .hero-chips .tag{background:transparent;padding:0;font-size:.9rem;color:var(--mut)} .hero-chips .hc-city{font-size:.9rem;color:var(--mut)} .hero-chips .hc-city::before{content:'·';margin:0 .35rem 0 0;color:var(--line2)} .hero-chips .pill{margin-left:.15rem} .hero-chips .hc-edit{font-size:.82rem;color:var(--text2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);margin-left:auto} .hero-acts{margin-top:.6rem;gap:.4rem} .hero-acts button{border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:500} .score-ring,.ring{width:2.9rem;height:2.9rem} .ring b,.ring .val{font-size:.72rem;font-weight:600} /* воронка статусов */ .pipe-bar{background:transparent;padding:0;margin-top:1.1rem} .pipe-bar i{height:.32rem;border-radius:999px;background:var(--surface3)} .pipe-bar i.done{background:var(--text)} .pipe-bar i.cur{background:var(--accent-fill);outline:0} .pipe-foot{background:transparent;padding:.7rem 0 0;font-size:.9rem;color:var(--mut)} .pipe-foot b{color:var(--text);font-weight:600} .pipe-foot button.primary{width:100%;margin-top:.7rem;min-height:3rem;border-radius:var(--r-sm);font-size:.98rem} .hero .pipe-bar,.hero .pipe-foot{margin-left:0;margin-right:0} /* вкладки */ .tabs{background:transparent;margin:1.3rem -1.1rem .9rem;padding:0 1.1rem;gap:.35rem;top:0;position:static;-webkit-mask-image:none;mask-image:none;overflow-x:auto;scrollbar-width:none;border:0} .tabs::-webkit-scrollbar{display:none} .tab{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.45rem .9rem;font-size:.88rem;font-weight:500;color:var(--text2);min-height:2.25rem} .tab.on{background:var(--text);color:var(--bg);border-color:var(--text)} .tab .cnt{background:transparent;color:inherit;opacity:.55;padding:0;margin-left:.3rem;font-family:var(--sans)} /* плитки чисел */ .mini-stats{grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.3rem} .ms{background:var(--surface);border:0;box-shadow:none;border-radius:1rem;padding:.9rem 1rem} .ms .k{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)} .ms .v{font-family:var(--sans);font-size:1.5rem;font-weight:600;letter-spacing:-.04em;margin-top:.15rem;font-variant-numeric:tabular-nums} .ms .v.good{color:var(--text)}.ms .v.warn{color:var(--warn)}.ms .v.bad{color:var(--bad)} /* секции внутри карточки: подпись сверху, строки на поверхности */ #page .card:not(.hero):not(.dw):not(.dw-exp){background:var(--surface);border:0;box-shadow:none;border-radius:var(--r);padding:1rem 1.1rem} #page .card-h h3{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)} #page .card-h{margin-bottom:.6rem} #page .card-h button.ghost,#page .card-h .btn-link{font-size:.85rem;font-weight:500;color:var(--text2)} .crow{padding:.75rem 0} .cic{width:2.4rem;height:2.4rem;border-radius:.8rem;background:var(--surface2);color:var(--text2)} .ct small{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mut2);font-weight:600} .ct b{font-size:1rem;font-weight:500;letter-spacing:-.015em} .cact{border-radius:999px;background:var(--surface2);border:0;font-weight:500;font-size:.82rem;padding:.35rem .75rem} /* моноширинный шрифт на телефоне не используется нигде */ .mono,.num,.kpi .v,td.num,.ms .v,.cnt,.pv-count{font-family:var(--sans)!important;font-variant-numeric:tabular-nums} } /* ---- v3.0.3: шапка карточки — имя во всю ширину, воронка без серой подложки ---- */ @media(max-width:960px){ .hero-main{grid-column:1/4} .hero-main .nm{font-size:1.45rem;letter-spacing:-.035em} .hero-chips .tag{border:0} .pipe{background:transparent;border:0;padding:1.1rem 0 0;margin:0} .pipe-foot{flex-direction:column;align-items:stretch;gap:.3rem} .pipe-foot button.primary{margin-top:.5rem} } @media(max-width:960px){ .hero-top{padding:0} .hero .pipe{padding-left:0;padding-right:0} } @media(max-width:960px){ .dw-row.sil .dw-ic{width:2.25rem;height:2.25rem} .dw-row.sil .acts{gap:.3rem} .dw-row.sil .dw-ic svg{width:.95rem;height:.95rem} } /* ---- v3.1.1: задачи — каждая отдельным кирпичиком ---- */ @media(max-width:960px){ /* контейнер секции прозрачный, заголовок — подпись-капитель */ #page .card:not(.hero):not(.dw):not(.dw-exp):has(> .task){background:transparent;border:0;box-shadow:none;padding:0;border-radius:0} #page .card:not(.hero):not(.dw):not(.dw-exp):has(> .task) .card-h{padding:0 .35rem .55rem;margin:0} #page .card:has(> .task) .card-h h3{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)} #page .card:has(> .task) .card-h h3.badc{color:var(--bad)} #page .card:has(> .task) .card-h h3.warnc{color:var(--warn)} #page .card:has(> .task) .card-h h3 .mono{color:var(--mut2);font-weight:500;margin-left:.2rem} .stack>.card:has(> .task)+.card:has(> .task){margin-top:1.4rem} /* сам кирпичик */ .task{background:var(--surface);border:0;border-radius:1.1rem;padding:.9rem 1rem .95rem;margin-bottom:.5rem;gap:.8rem;align-items:flex-start;position:relative} .task:last-child{margin-bottom:0} .task input[type=checkbox]{appearance:none;-webkit-appearance:none;width:1.45rem;height:1.45rem;border:1.5px solid var(--line2);border-radius:50%;background:transparent;margin:.1rem 0 0;position:relative;flex:none} .task input[type=checkbox]:checked{background:var(--text);border-color:var(--text)} .task input[type=checkbox]:checked::after{content:'';position:absolute;left:.42rem;top:.2rem;width:.35rem;height:.65rem;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)} .task .t b{font-size:1rem;font-weight:500;letter-spacing:-.015em;line-height:1.3;padding-right:3.6rem} .task .t b .rem-ic{vertical-align:-.15em;margin-right:.25rem;color:var(--mut)} .task .t .m{margin-top:.45rem;gap:.35rem .5rem;align-items:center;font-size:.82rem} .task .t .m a[data-sup]{flex:1 1 100%;color:var(--mut);font-weight:500!important;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .task .t .m .mono{padding:.2rem .55rem;border-radius:999px;background:var(--surface2);color:var(--mut);font-size:.74rem;font-weight:600;font-family:var(--sans)} .task .t .m .mono.due-over{background:var(--bad-soft);color:var(--bad)} .task .t .m .mono.due-soon{background:var(--warn-soft);color:var(--warn)} .task .t .m span:not(.mono){color:var(--mut2)} .task .t .m .pr-high{color:var(--bad);font-weight:600} .task .t .m .pr-low{color:var(--mut2)} .task .t .m span:not(.mono):not([class]):last-child{flex-basis:100%;color:var(--mut);margin-top:.15rem} /* карандаш и крестик — в правый верхний угол, тише */ .task>span:last-child{position:absolute;right:.5rem;top:.55rem;display:flex;gap:0} .task>span:last-child button{width:2rem;height:2rem;min-height:0;padding:0;border:0;background:transparent;color:var(--mut2)} .task>span:last-child button svg{width:.95rem;height:.95rem} .task.done{opacity:.55} /* панель над списком */ body[data-page="tasks"] .toolbar{margin-bottom:1rem} body[data-page="tasks"] .toolbar label{font-size:.88rem} body[data-page="tasks"] .toolbar button:not(.primary){border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:500} } @media(max-width:960px){ .task .t b{padding-right:4.6rem} .task .t .m span.pr-high{color:var(--bad);font-weight:600} .task .t b .rem-ic{background:var(--surface2);color:var(--mut)} } /* ---- трекинг посылок ---- */ .track{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem .2rem .45rem;border-radius:999px;background:var(--surface2);color:var(--text);text-decoration:none;font-family:var(--mono);font-size:.8rem;font-weight:600;max-width:100%;white-space:nowrap} .track:hover{background:var(--accent-soft);color:var(--accent)} .track svg{width:.85rem;height:.85rem;flex:none;color:var(--mut)} .track .tn{overflow:hidden;text-overflow:ellipsis} .track .tc{font-family:var(--sans);font-weight:500;color:var(--mut);font-size:.72rem;padding-left:.35rem;border-left:1px solid var(--line2)} .track.sm{font-size:.74rem;padding:.15rem .5rem .15rem .4rem} @media(max-width:960px){ .track{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums} .dw-row.has-trk{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:.5rem;align-items:center;cursor:default} .dw-ic.trk{width:2.25rem;height:2.25rem;background:var(--accent-fill);color:var(--accent-ink)} .dw-ic.trk svg{width:.95rem;height:.95rem;stroke-width:2.2} } /* ========================================================================== v4.0 — десктоп в стиле KAYF Stock (29.09.2026) Один визуальный язык на оба кабинета: тёмная боковая панель с группами разделов и лаймовым активным пунктом, Poppins, карточки без рамок с большим радиусом и лёгкой тенью, KPI-плитки «иконка + подпись / крупное число», круглые кнопки и поля. Логика и разметка не тронуты — только стили. ========================================================================== */ @media(min-width:961px){ :root{ --bg:#f4f4f2; --surface:#ffffff; --surface2:#f3f3f0; --surface3:#e9e9e5; --field:#ffffff; --line:#ececea; --line2:#dedddb; --text:#111111; --text2:#3a3a37; --mut:#7a7a75; --mut2:#a1a19b; --r:1.25rem; --r-sm:.9rem; --r-xs:.7rem; --shadow:0 1px 2px rgba(17,17,17,.03),0 8px 24px rgba(17,17,17,.045); --shadow-lg:0 14px 40px rgba(17,17,17,.12); --ctl:2.75rem; --ctl-sm:2.2rem; --nav-bg:#171717; --nav-bg2:#232323; --nav-text:#e8e8e4; --nav-mut:#8a8a85; --nav-line:#2b2b2b; /* серии графиков как в Stock: чёрный, лайм, синий — почти монохром */ --s1:#111111; --s2:#bbff00; --s3:#2a5bd7; --s4:#9a9a94; --s5:#eb6834; --s6:#1baf7a; --seq1:#e2e2de; --seq2:#c9c9c4; --seq3:#a3a39d; --seq4:#6f6f6a; --seq5:#3c3c39; --seq6:#111111; --grid:#ececea; --axis:#d6d6d2; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#0f0f0f; --surface:#1a1a1a; --surface2:#242424; --surface3:#2e2e2e; --field:#242424; --line:#262626; --line2:#363636; --text:#f2f2ef; --text2:#cbcbc6; --mut:#8e8e88; --mut2:#6b6b66; --nav-bg:#0a0a0a; --nav-bg2:#171717; --nav-line:#1f1f1f; --shadow:none; --shadow-lg:0 16px 48px rgba(0,0,0,.6); --s1:#f2f2ef; --s2:#bbff00; --s3:#5b8def; --s4:#7a7a75; --s5:#ef7a4a; --s6:#3ec49a; --seq1:#55554f; --seq2:#6e6e69; --seq3:#8a8a85; --seq4:#a8a8a3; --seq5:#cfcfca; --seq6:#f2f2ef; }} :root[data-theme="dark"]{ --bg:#0f0f0f; --surface:#1a1a1a; --surface2:#242424; --surface3:#2e2e2e; --field:#242424; --line:#262626; --line2:#363636; --text:#f2f2ef; --text2:#cbcbc6; --mut:#8e8e88; --mut2:#6b6b66; --nav-bg:#0a0a0a; --nav-bg2:#171717; --nav-line:#1f1f1f; --shadow:none; --shadow-lg:0 16px 48px rgba(0,0,0,.6); --s1:#f2f2ef; --s2:#bbff00; --s3:#5b8def; --s4:#7a7a75; --s5:#ef7a4a; --s6:#3ec49a; --seq1:#55554f; --seq2:#6e6e69; --seq3:#8a8a85; --seq4:#a8a8a3; --seq5:#cfcfca; --seq6:#f2f2ef; } body{font-family:var(--sans);letter-spacing:0} h1,h2,h3,h4{letter-spacing:0} /* --- боковая панель: всегда тёмная, в обеих темах --- */ #nav{background:var(--nav-bg);border-right:0;color:var(--nav-text);width:16.5rem;min-width:16.5rem;padding:.4rem .6rem .6rem} #brand{padding:1rem .7rem .6rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap} #brand .blogo{height:1.6rem} #brand .blogo.on-light{display:none!important}#brand .blogo.on-dark{display:block!important} #brand .who{margin:0;padding:0;border:0;width:auto} #brand .who b{display:inline-block;color:var(--accent-fill);background:#2a2a2a;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .55rem;border-radius:2rem;line-height:1.3} #nav-items{padding:.4rem 0} .nav-sec{color:var(--nav-mut);font-size:.68rem;letter-spacing:.14em;padding:1.1rem .85rem .35rem;font-weight:600} .nav-i{color:var(--nav-text);font-weight:500;font-size:.95rem;border-radius:.9rem;padding:.6rem .85rem;margin-bottom:.15rem;opacity:.86} .nav-i svg{opacity:.8;width:1.2rem;height:1.2rem} .nav-i:hover{background:var(--nav-bg2);color:#fff;opacity:1} .nav-i.on{background:var(--accent-fill);color:#111;font-weight:600;opacity:1} .nav-i.on svg{opacity:1} .nav-i .cnt{background:#2f2f2f;color:#d9d9d4;font-family:var(--sans);font-size:.72rem;padding:.12rem .55rem;border-radius:1rem} .nav-i.on .cnt{background:rgba(17,17,17,.14);color:#111} #nav-foot{border-top:0;padding:.5rem .2rem 0} #nav-foot .user-btn{background:var(--nav-bg2);border:0;border-radius:1rem;padding:.6rem .7rem;color:var(--nav-text);width:100%} #nav-foot .user-btn:hover{background:#2b2b2b} #nav-foot .user-btn .u b{color:#fff;font-weight:600} #nav-foot .user-btn .u small{color:var(--nav-mut)} #nav-foot .user-btn .chev{color:var(--nav-mut)} #nav-foot .av{background:var(--accent-fill);color:#111;font-weight:700} #nav .row,#nav-foot .row{color:var(--nav-mut)} /* --- шапка: без линии и стекла, крупный заголовок --- */ #top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;padding:1.5rem 2rem .4rem;gap:.75rem;position:static} #top h2{font-size:1.75rem;font-weight:600;letter-spacing:-.01em} #top .sub{font-size:.86rem;font-weight:400;color:var(--mut);margin-top:.15rem} #gsearch{width:16rem} .search-wrap input{border-radius:2rem;background:var(--surface);border-color:var(--line)} #save-chip{background:var(--surface);border-radius:2rem;padding:.35rem .8rem;box-shadow:var(--shadow);font-weight:500;font-size:.78rem} #page{padding:1rem 2rem 4rem;animation:none} #banner{border-radius:var(--r);margin:0 2rem;border:0} /* --- элементы управления: круглые --- */ input,select,textarea{border-radius:2rem;border-color:var(--line);background:var(--field);padding:.45em 1em} textarea{border-radius:var(--r-sm)} input:hover,select:hover,textarea:hover{border-color:var(--line2)} input:focus,select:focus,textarea:focus{border-color:#111;box-shadow:none} button{border-radius:2rem;border-color:var(--line);background:var(--surface);font-weight:500;padding:.4em 1.15em;box-shadow:0 1px 2px rgba(17,17,17,.04)} button:hover{border-color:var(--line2);background:var(--surface)} button.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#111;font-weight:600;box-shadow:none} button.primary:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)} button.ghost{box-shadow:none;border-color:transparent;background:transparent} button.ghost:hover{background:var(--surface2)} button.small{border-radius:2rem} .tog{border:0;background:var(--surface);border-radius:2rem;padding:.2rem;box-shadow:var(--shadow);gap:.1rem} .tog button{border-radius:2rem;border:0;padding:.35em .95em;font-weight:500;color:var(--mut);box-shadow:none} .tog button+button{border-left:0} .tog button.on{background:#111;color:#fff} :root[data-theme="dark"] .tog button.on{background:#f2f2ef;color:#111} .chip{border-radius:2rem;background:var(--surface);border-color:var(--line)} .chip.on{background:#111;border-color:#111;color:#fff} .lbl,.fld label{text-transform:none;letter-spacing:0;font-size:.82rem;font-weight:500;color:var(--mut)} /* --- карточки --- */ .card{border:0;border-radius:var(--r);padding:1.35rem 1.5rem;box-shadow:var(--shadow)} .card-h{margin-bottom:1rem} .card-h h3{font-size:1.05rem;font-weight:600} .card-h .hint{font-size:.85rem} .cols,.stack{gap:1.25rem} .kpis{gap:1.1rem} .kpi{border:0;border-radius:var(--r);padding:1.25rem 1.4rem;box-shadow:var(--shadow);transition:transform .15s var(--ease),box-shadow .15s} .kpi:hover{border:0;box-shadow:var(--shadow-lg);transform:translateY(-1px)} .kpi .k{text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:400;color:var(--mut);justify-content:flex-start;gap:.5rem} .kpi .ki{order:-1;width:1.35rem;height:1.35rem;background:transparent;color:var(--mut)} .kpi .ki svg{width:1.1rem;height:1.1rem} .kpi:hover .ki{background:transparent;color:var(--text)} .kpi .v{font-size:2.15rem;font-weight:600;letter-spacing:-.02em;margin-top:.55rem;font-variant-numeric:tabular-nums} .kpi .d{font-size:.86rem;margin-top:.35rem} /* одна тёмная плитка — как «На Amazon за 7 дней» в Stock */ .kpi.dark{background:#111;color:#fff} .kpi.dark .k,.kpi.dark .ki,.kpi.dark .d{color:#a1a19b} .kpi.dark .v{color:var(--accent-fill)} .kpi.dark:hover .ki{color:#fff} :root[data-theme="dark"] .kpi.dark{background:#f2f2ef;color:#111} :root[data-theme="dark"] .kpi.dark .v{color:#111} /* --- таблицы: без «шапки на фоне», тонкие разделители --- */ table{font-size:.92rem} th{font-size:.72rem;letter-spacing:.1em;font-weight:600;color:var(--mut);border-bottom:1px solid var(--line);padding:.8rem 1rem;background:transparent} td{padding:.85rem 1rem;border-bottom:1px solid var(--line)} tr.clickable:hover td{background:var(--surface2)} tfoot td{background:transparent;border-top:1px solid var(--line2)} .card>.tbl-wrap:first-child table{border-radius:0} .card[style*="padding:0"]{overflow:hidden} .num,.mono{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:500} .kpi .v.mono,.hb-v{font-family:var(--sans)} /* --- статусы, теги, значки --- */ .pill{font-weight:500;padding:.2em .8em} .tag{border-radius:2rem;border:0;background:var(--surface2);color:var(--text2);font-weight:500;padding:.15em .7em} .badge{border-radius:2rem;font-weight:500;padding:.2em .7em} .bar,.hb-t{background:var(--surface3)} .hb-l{font-weight:500} td.name,.nm-cell b{font-weight:600} /* --- «требует внимания», списки --- */ .attn{padding:.75rem .35rem;border-radius:0;border-bottom:1px solid var(--line)} .attn:last-child{border-bottom:0} .attn:hover{background:transparent} .attn:hover .t b{text-decoration:underline;text-underline-offset:.2em} .attn .ic{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--surface2);color:var(--text)} .attn.lv2 .ic{background:#fff3d6;color:#c98500}.attn.lv3 .ic{background:#fdeae5;color:#e5532b} .attn .t b{font-weight:600} .dash-head h3{font-size:1.05rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text)} .empty{padding:3rem 1.25rem} .empty b{font-weight:600} /* --- модальные окна, формы --- */ #modal .box{border-radius:1.5rem;border:0;box-shadow:var(--shadow-lg)} #modal h3{font-size:1.25rem;font-weight:600} .form-actions{gap:.5rem} #tip{border:0;border-radius:var(--r-xs);box-shadow:var(--shadow-lg)} /* --- карточка поставщика --- */ .det-head h2,.det-head h1{font-weight:600} .stepper{border:0;box-shadow:var(--shadow);border-radius:2rem;background:var(--surface)} .step{border-radius:2rem} .tabs button,.tabs .tab{border-radius:2rem} .av{font-weight:600} /* --- экран входа --- */ .auth-box{border:0;border-radius:1.5rem;box-shadow:var(--shadow)} } @media(min-width:961px){ /* v4.0 — правки по снимкам */ #top{flex-wrap:nowrap} #top h2{display:block;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #top h2 .badge{vertical-align:middle} #top .grow{flex:0 0 0} #page a{color:var(--text)} #page a:hover{color:var(--text);text-decoration:underline;text-underline-offset:.2em} td.right{white-space:nowrap} td button.icon{width:2rem;min-width:2rem;min-height:2rem;height:2rem;font-size:.9rem;box-shadow:none;border-color:transparent;background:transparent;color:var(--mut)} td button.icon:hover{background:var(--surface2);color:var(--text)} #page>.fab{display:none!important} #page .mono,#page .num,#page .kpi .v{font-family:var(--sans)!important;font-variant-numeric:tabular-nums} .task b,.task .t b,.attn .t b,td.name,.nm-cell b{font-weight:600} input[type=checkbox]{appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;border:1.5px solid var(--line2);border-radius:50%;background:var(--surface);display:inline-grid;place-items:center;cursor:pointer;padding:0;transition:background .15s,border-color .15s} input[type=checkbox]:hover{border-color:var(--mut)} input[type=checkbox]:checked{background:#111;border-color:#111} input[type=checkbox]:checked::after{content:'';width:.4rem;height:.65rem;border:solid var(--accent-fill);border-width:0 2px 2px 0;transform:translateY(-.08rem) rotate(45deg)} :root[data-theme="dark"] input[type=checkbox]:checked{background:var(--accent-fill);border-color:var(--accent-fill)} :root[data-theme="dark"] input[type=checkbox]:checked::after{border-color:#111} } @media(min-width:961px){ label input[type=checkbox]{margin-right:.45rem} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .kpi.dark{background:#f2f2ef;color:#111} :root:not([data-theme="light"]) .kpi.dark .v{color:#111} :root:not([data-theme="light"]) .kpi.dark .k,:root:not([data-theme="light"]) .kpi.dark .ki,:root:not([data-theme="light"]) .kpi.dark .d{color:#5a5a56} :root:not([data-theme="light"]) .tog button.on{background:#f2f2ef;color:#111} :root:not([data-theme="light"]) .chip.on{background:#f2f2ef;border-color:#f2f2ef;color:#111} :root:not([data-theme="light"]) input[type=checkbox]:checked{background:var(--accent-fill);border-color:var(--accent-fill)} :root:not([data-theme="light"]) input[type=checkbox]:checked::after{border-color:#111} } :root[data-theme="dark"] .chip.on{background:#f2f2ef;border-color:#f2f2ef;color:#111} :root[data-theme="dark"] .kpi.dark .k,:root[data-theme="dark"] .kpi.dark .ki,:root[data-theme="dark"] .kpi.dark .d{color:#5a5a56} } @media(min-width:961px){ .ms{border:0;box-shadow:var(--shadow);border-radius:var(--r);padding:1rem 1.15rem} .ms .k{text-transform:none;letter-spacing:0;font-size:.82rem;font-weight:400} .ms .v{font-family:var(--sans);font-size:1.45rem;font-weight:600;margin-top:.3rem;font-variant-numeric:tabular-nums} .viz .val,.viz text{font-family:var(--sans)} } /* v4.0.2 — iPhone с экрана «Домой»: статус-бар накрывал шапку (поиск, колокольчик). Отступ сверху = высота «чёлки» + обычный отступ. Док внизу «чёлку» учитывал и раньше. */ @media(max-width:960px){ #top{padding-top:calc(.45rem + env(safe-area-inset-top,0px))!important} #top.search-open{padding-top:calc(.45rem + env(safe-area-inset-top,0px))!important} .tabs{top:calc(3rem + env(safe-area-inset-top,0px))} } /* v4.0.3 — просмотр фото: картинка не вылезала за сцену (на десктопе обрезалась снизу, на телефоне накрывала панель с подписью и комментариями). Крестик закрытия теперь всегда виден поверх фото. */ .pv-box{overflow:hidden} .pv-stage{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden;height:100%} .pv-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .pv-x{position:absolute;top:.9rem;right:.9rem;z-index:2;width:2.6rem;height:2.6rem;min-height:0;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:none} .pv-x:hover{background:rgba(255,255,255,.26);color:#fff;border:0} .pv-x svg{width:1.1rem;height:1.1rem} @media(min-width:961px){.pv-x{display:none}} @media(max-width:960px){ .pv-box{grid-template-columns:1fr;grid-template-rows:minmax(0,46vh) minmax(0,1fr)} .pv-stage{padding:.6rem;padding-top:calc(3.4rem + env(safe-area-inset-top,0px))} .pv-x{top:calc(.6rem + env(safe-area-inset-top,0px))} .pv-side{min-height:0;overflow:hidden} .pv-cmts{-webkit-overflow-scrolling:touch} } /* v4.1 — просмотр фото на телефоне: упор на снимок. Фото занимает весь экран и масштабируется пальцами; подпись и комментарии — компактная шторка снизу, которая раскрывается по тапу. */ @media(max-width:960px){ .pv-box{display:block} .pv-stage{position:absolute;inset:0;padding:0;background:#000;touch-action:none;overflow:hidden} .pv-stage img{max-width:100%;max-height:100%;border-radius:0;box-shadow:none;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none;transition:transform .08s linear} .pv-stage.zoomed .pv-nav,.pv-stage.zoomed .pv-count{opacity:0;pointer-events:none} .pv-nav{opacity:.75;transition:opacity .2s} .pv-count{bottom:calc(6.2rem + env(safe-area-inset-bottom,0px))} .pv-side{position:absolute;left:0;right:0;bottom:0;top:auto;max-height:5.6rem;border-top:0;border-radius:1.25rem 1.25rem 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.35);transition:max-height .25s var(--ease);font-size:.86rem;padding-bottom:env(safe-area-inset-bottom,0px)} .pv-side.open{max-height:78%} .pv-handle{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem 1rem .35rem;cursor:pointer;color:var(--mut);font-size:.78rem;font-weight:500} .pv-handle i{width:2.4rem;height:.3rem;border-radius:1rem;background:var(--line2);display:block} .pv-head{padding:.35rem 1rem .55rem;border-bottom:0} .pv-who b{font-size:.88rem}.pv-who small{font-size:.72rem} .pv-head .row{gap:.1rem} .pv-cap{padding:.55rem 1rem .7rem} .pv-cap .lbl{font-size:.7rem;margin-bottom:.25rem} .pv-cap input{min-height:2.3rem;font-size:.86rem;padding:.3em .8em} .pv-cmts{padding:.5rem 1rem} .pv-cmts .lbl{font-size:.7rem} .pv-cmts .cmt{padding:.45rem 0} .pv-cmts .cmt-h b{font-size:.84rem} .pv-cmts .cmt-b{font-size:.86rem;line-height:1.4} .pv-post{padding:.6rem 1rem;padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px))} .pv-post textarea{min-height:2.8em;font-size:.86rem} .pv-post .chip,.pv-post button{min-height:1.9rem;font-size:.78rem;padding:.15em .7em} .pv-side:not(.open) .pv-cap,.pv-side:not(.open) .pv-cmts,.pv-side:not(.open) .pv-post{display:none} } @media(min-width:961px){.pv-handle{display:none}} /* ========================================================================== v4.1.1 — мобильные правки по тестированию (29.09.2026) ========================================================================== */ @media(max-width:960px){ /* Стрелки «‹ ›» и счётчик лежали под фотографией: у картинки will-change:transform создаёт слой, который рисуется поверх соседей без z-index. Поднимаем управление. */ .pv-nav,.pv-count{z-index:2} /* Стрелки — полноценная цель для пальца (44px), а не 38. */ .pv-nav{width:2.75rem;height:2.75rem} /* Сцена заканчивается над свёрнутой шторкой: низ снимка больше не прячется под ней, счётчик стоит у нижнего края сцены. height:100% из v4.0.3 перебивал bottom. */ .pv-stage{height:auto;bottom:calc(5.6rem + env(safe-area-inset-bottom,0px))} .pv-count{bottom:.6rem} /* Раскрытая шторка — поверх стрелок и счётчика (в ландшафте стрелка накрывала крестик в шапке шторки, счётчик просвечивал сквозь комментарии). */ .pv-side{z-index:3} /* Цели для пальца не меньше 40px: вкладки, чипы фильтров, переключатели, кружки связи в обзвоне, «Подробнее», сегменты аудита, карандаш/крестик задач. */ .tab{min-height:2.5rem} .toolbar .chip{min-height:2.5rem} .tog button,.dash-head .tog button{min-height:2.5rem} .dw-ic,.dw-row.sil .dw-ic,.dw-ic.trk{width:2.5rem;height:2.5rem} .tbl-wrap .m-more{min-height:2.5rem} .audit-item .seg button{min-height:2.5rem} .task>span:last-child button{width:2.5rem;height:2.5rem} .task>span:last-child{right:.3rem;top:.4rem} /* Тонкая полоска воронки — кнопка «сменить статус»: расширяем зону нажатия, не меняя вид */ .pipe-bar{padding:1.1rem 0;margin:0 0 -1.1rem} /* Маленькие кнопки («+ Заказ», «Снять фото», карандаш) — 40px вместо 36 */ :root{--ctl-sm:2.5rem} .toolbar select{min-height:2.5rem} /* Крестик у тега бренда */ .tagc .x{min-width:2rem;min-height:2rem} /* Кружок-чекбокс задачи: зона нажатия шире самого кружка (≈42px), вид прежний */ .task input[type=checkbox]::before,.dw-task input::before{content:'';position:absolute;inset:-.6rem} /* Контакты в обзоре: три пилюли (Позвонить · Копировать · WhatsApp) сжимали подпись и номер до нуля. Действия — отдельной строкой под значением. */ .crow{flex-wrap:wrap;row-gap:.5rem} .crow .ct{flex:1 0 calc(100% - 3.1rem)} .crow .ct+.cact{margin-left:3.1rem} .cact{min-height:2.5rem;display:inline-flex;align-items:center} /* «Последние фото» в обзоре: «Все фото», камера и галерея наезжали друг на друга — ряд кнопок уходит на свою строку под заголовком */ .card-h:has(button[data-act="ph-gal"]) .row{flex:1 1 100%} /* рядом с «Все фото (N)» камера и галерея — круглые иконки, чтобы подписи не резались */ .card-h .row:has([data-tab="photos"]) button[data-act^="ph-"]{flex:0 0 auto;width:2.5rem;min-width:2.5rem;padding:0;font-size:0;border-radius:50%;gap:0} .card-h .row:has([data-tab="photos"]) button[data-act^="ph-"] svg{width:1.15rem;height:1.15rem} /* Таблицы-карточки: decorateTables дописывает в строку кнопку «Подробнее», и ячейка с карандашом/крестиком переставала быть :last-child — в свёрнутой строке она прятались вместе с остальными. Ориентируемся на последнюю ячейку, а не последний узел. */ .tbl-wrap tr.m-collapsed td:nth-child(n+5):last-of-type{display:flex} .tbl-wrap td:last-of-type:has(button){justify-content:flex-end;padding-top:.5rem;gap:.4rem} .tbl-wrap td:last-of-type:has(button):before{display:none} /* трек-номер в сэмплах и ссылка на фабрику в задаче — выше зона нажатия */ .track.sm{min-height:2.25rem} .task .t .m a[data-sup]{padding:.35rem 0;margin:-.35rem 0} .brand-add{min-height:2.5rem} /* Настройки: поле курса CNY (width:100%) в ряду с кнопкой «обновить» растягивало страницу до ~495px и она открывалась «уменьшенной» с горизонтальной прокруткой. */ .sec,.sec-b,.sec-b .grid,.sec-b .fld{min-width:0} .sec-b .fld .row>input{flex:1 1 0;width:auto;min-width:0} .sec-b .fld .row>button{flex:none} /* Документы: бейдж срока, «Скачать», карандаш и крестик сжимали название и описание в столбик по одному слову. Текст — во всю ширину, действия — строкой ниже. */ .doc{flex-wrap:wrap;row-gap:.45rem} .doc .t{flex:1 1 calc(100% - 3.1rem)} .doc .t b{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .doc .badge{white-space:nowrap} .doc button.icon{width:2.5rem;min-width:2.5rem} .doc button.small{padding:.25em .6em} /* Подписи полей на телефоне переносятся, а не режутся троеточием («Считать поставщика «зависшим» через (…») */ .fld label{white-space:normal;overflow:visible;text-overflow:clip} /* Просмотр фото: тело страницы зафиксировано (iOS не уважает overflow:hidden на body) */ body.pv-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden} } /* Общее для стрелок «‹ ›»: button:active{transform:translateY(1px)} заменял их translateY(-50%) — при нажатии стрелка прыгала на полвысоты вниз, и тап/клик доставался фотографии, а не кнопке. Держим стрелку на месте. */ .pv-nav:active{transform:translateY(-50%)} /* v4.2 — документы поставщика */ .doc .badge.doc-noexp{cursor:pointer;border:1px dashed var(--line2);background:transparent;min-height:0;padding:.15em .6em;font-size:.78rem;box-shadow:none;border-radius:2rem} .doc .badge.doc-noexp:hover{border-color:var(--mut);color:var(--text)} @media(max-width:960px){ /* липкая шапка была прозрачной — контент просвечивал сквозь неё при прокрутке */ #top{background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} } .doc-a{display:flex;align-items:center;gap:.4rem;flex:none;white-space:nowrap} @media(max-width:960px){.doc-a{flex:1 1 100%;min-width:0;gap:.3rem;flex-wrap:wrap;white-space:normal}.doc-a .badge{margin-right:auto}.doc-a button.icon{width:2.4rem;min-width:2.4rem}} /* v4.3 — десктопный командный центр */ @media(min-width:961px){ .dwd-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:0 0 1.1rem;flex-wrap:wrap} .dwd-hd .dw-eyebrow{font-size:.8rem;color:var(--mut);text-transform:none;letter-spacing:0;margin:0 0 .15rem} .dwd-hd .dw-hi{font-size:1.6rem;font-weight:600;margin:0;letter-spacing:-.01em} .dwd-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end} .dwd-tools .dw-rec{margin:0;display:flex;gap:.4rem;flex-wrap:wrap;overflow:visible;padding:0} .dwd-tools .dw-chip{min-height:2.2rem;padding:.2rem .7rem .2rem .3rem;font-size:.85rem;border:0;background:var(--surface);box-shadow:var(--shadow);border-radius:2rem} .dwd-tools .dw-chip .av{width:1.6rem;height:1.6rem;font-size:.65rem} .dwd-tools .tog{margin:0} .dwd-kpis{grid-template-columns:repeat(6,1fr);gap:.9rem;margin-bottom:1.25rem} @media(max-width:1280px){.dwd-kpis{grid-template-columns:repeat(3,1fr)}} .dwd-kpis .kpi{text-align:left;padding:1.1rem 1.2rem;min-height:0;border:0;font:inherit;display:block;width:100%;cursor:pointer} .dwd-kpis .kpi .v{font-size:1.9rem;margin-top:.45rem} .dwd-kpis .kpi .v.bad{color:var(--bad)}.dwd-kpis .kpi .v.warn{color:var(--warn)} .dwd-kpis .kpi.dark .v.bad,.dwd-kpis .kpi.dark .v.warn{color:var(--accent-fill)} .dwd-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:1.25rem;align-items:start} @media(max-width:1200px){.dwd-grid{grid-template-columns:1fr}} .dwd-col{display:flex;flex-direction:column;gap:1.25rem;min-width:0} .dwd-col .card.dw{background:var(--surface);box-shadow:var(--shadow);padding:1.25rem 1.5rem;margin:0} .dwd-col .card.dw .card-h{margin-bottom:.4rem} .dwd-col .card.dw .card-h h3{font-size:1.05rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text)} .dwd-col .card.dw .card-h .hint{font-size:.85rem;color:var(--mut)} .dwd-col .dw-b{background:transparent;border-radius:0;padding:0;box-shadow:none} .dwd-col .dw-grp{margin:0} .dwd-col .dw-grp-h{padding:.7rem 0 .35rem;background:transparent;border:0;border-top:1px solid var(--line);font-size:.85rem;color:var(--mut);border-radius:0} .dwd-col .dw-grp:first-child .dw-grp-h{border-top:0;padding-top:.3rem} .dwd-col .dw-grp-h b{color:var(--text);font-weight:600} .dwd-col .dw-task{padding:.5rem 0;border:0;font-size:.95rem;min-height:0;gap:.7rem} .dwd-col .dw-task .dd{font-size:.8rem} .dwd-col .dw-row{padding:.7rem 0;border-top:1px solid var(--line);border-radius:0;background:transparent;gap:.8rem;min-height:0} .dwd-col .dw-row:first-child{border-top:0} .dwd-col .dw-row:hover{background:transparent} .dwd-col .dw-row:hover .a b{text-decoration:underline;text-underline-offset:.2em} .dwd-col .dw-row .a b{font-size:.95rem;font-weight:600} .dwd-col .dw-row .a span{font-size:.82rem} .dwd-col .dw-row .dw-ic{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--surface2);color:var(--text);display:grid;place-items:center;flex:none} .dwd-col .dw-row .dw-ic svg{width:1.05rem;height:1.05rem} .dwd-col .dw-row .dw-ic.badc{background:#fdeae5;color:#e5532b}.dwd-col .dw-row .dw-ic.warnc{background:#fff3d6;color:#c98500} .dwd-col .dw-row.att .acts{display:flex;gap:.3rem} .dwd-col .dw-row .b .mono{font-size:.85rem;font-weight:500} .dwd-col .dw-ok{padding:1.2rem 0} .dwd-col .dw-empty{padding:.6rem 0} :root[data-theme="dark"] .dwd-col .dw-row .dw-ic.badc{background:#3b1a1a;color:#e66767} :root[data-theme="dark"] .dwd-col .dw-row .dw-ic.warnc{background:#3a2f10;color:#fab219} #page .dwd-grid .fab,#dwfab{display:none} } @media(min-width:961px){ .dwd-col .dw-row.att{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:.8rem;text-align:left} .dwd-col .dw-row.att .a{min-width:0;display:flex;flex-direction:column;background:transparent;border:0;padding:0;box-shadow:none;text-align:left;min-height:0;width:auto} .dwd-col .dw-row.att .a b,.dwd-col .dw-row.att .a span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;padding-left:.1em} .dwd-col .dw-row.att .acts{display:flex;gap:.3rem} .dwd-col .dw-row.att .acts .cact,.dwd-col .dw-row.att .acts a,.dwd-col .dw-row.att .acts button{width:2.2rem;height:2.2rem;min-height:0;min-width:0;padding:0;border-radius:50%;display:grid;place-items:center} .dwd-col .dw-row.att .arr{color:var(--mut2)} } /* v4.3.1 — плитки дня на телефоне */ @media(max-width:960px){ .dwm-kpis{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin:0 -1rem 1.1rem;padding:0 1rem .15rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .dwm-kpis::-webkit-scrollbar{display:none} .dwm-kpi{flex:0 0 auto;min-width:7.4rem;scroll-snap-align:start;background:var(--surface);border:0;border-radius:var(--r);padding:.8rem .95rem .7rem;text-align:left;display:flex;flex-direction:column;gap:.25rem;min-height:0;box-shadow:none;font:inherit;color:var(--text)} .dwm-kpi .k{font-size:.72rem;color:var(--mut);font-weight:500;white-space:nowrap} .dwm-kpi b{font-size:1.5rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums} .dwm-kpi b.badc{color:var(--bad)}.dwm-kpi b.warnc{color:var(--warn)} .dwm-kpi.dark{background:#111;color:#fff}.dwm-kpi.dark .k{color:#a1a19b}.dwm-kpi.dark b{color:var(--accent-fill)} :root[data-theme="dark"] .dwm-kpi.dark{background:#f2f2ef;color:#111}:root[data-theme="dark"] .dwm-kpi.dark b{color:#111} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dwm-kpi.dark{background:#f2f2ef;color:#111}:root:not([data-theme="light"]) .dwm-kpi.dark b{color:#111}:root:not([data-theme="light"]) .dwm-kpi.dark .k{color:#5a5a56}} } @media(min-width:961px){.dwm-kpis{display:none}} /* v4.3.2 — жесты на телефоне */ @media(max-width:960px){ #sheet{touch-action:pan-y;will-change:transform;transition:transform .2s var(--ease)} #sheet .grab{width:3rem;height:.32rem;margin-bottom:.9rem;padding:0} #sheet-scrim{touch-action:none} .pv-side{touch-action:pan-y} .pv-handle,.pv-head{touch-action:none} .pv-stage img{transition:transform .12s ease-out} }