:root .sig--web-orders { display: flex; container-type: inline-size; padding: clamp(14px, 3.4cqw, 30px); }
:root .sig--web-orders svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:root .sig--web-orders .wo { flex: 1; display: grid; grid-template-columns: clamp(52px, 26%, 172px) 1fr; border-radius: 16px; overflow: hidden; background: #f3f2f5; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); text-align: left; }
:root .sig--web-orders .wo__side { padding: 14px 10px; background: #1e1b22; color: #d8d2de; }
:root .sig--web-orders .wo__wp { width: 30px; height: 30px; display: grid; place-items: center; margin: 0 6px 16px; border-radius: 50%; background: #2d2933; color: #fff; font-size: 20px; }
:root .sig--web-orders .wo__side ul { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
:root .sig--web-orders .wo__side li { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 8px; font: 500 12.5px/1 var(--f-body); }
:root .sig--web-orders .wo__side li svg { font-size: 16px; color: #a69fae; }
:root .sig--web-orders .wo__side li.on { background: var(--v); color: #fff; }
:root .sig--web-orders .wo__side li.on svg { color: #fff; }
:root .sig--web-orders .wo__count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: #5a00a0; font: 700 10.5px/1 var(--f-display); }
:root .sig--web-orders .wo__main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(12px, 2.4cqw, 20px); color: #221f26; }
:root .sig--web-orders .wo__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
:root .sig--web-orders .wo__top b { font: 700 clamp(15px, 2.8cqw, 20px)/1 var(--f-display); letter-spacing: -.035em; }
:root .sig--web-orders .wo__tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: #e6e3ea; }
:root .sig--web-orders .wo__tabs i { padding: 5px 10px; border-radius: 999px; color: #5e5866; font: 500 11px/1 var(--f-display); font-style: normal; white-space: nowrap; }
:root .sig--web-orders .wo__tabs i.on { background: #fff; color: #221f26; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
:root .sig--web-orders .wo__th, :root .sig--web-orders .wo__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
:root .sig--web-orders .wo__th { padding: 0 12px 8px; color: #6e6876; font: 600 10px/1 var(--f-display); letter-spacing: .09em; text-transform: uppercase; }
:root .sig--web-orders .wo__th span:last-child { width: 118px; }
:root .sig--web-orders .wo__rows { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
:root .sig--web-orders .wo__r { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .7s var(--ease-out), opacity .5s .1s; flex: none; }
:root .sig--web-orders .wo__r.on { grid-template-rows: 1fr; opacity: 1; }
:root .sig--web-orders .wo__in { min-height: 0; overflow: hidden; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(20, 0, 40, .06); transition: box-shadow .5s, background .5s; }
:root .sig--web-orders .fresh .wo__in { box-shadow: 0 0 0 1.5px var(--v), 0 12px 24px -14px rgba(161, 0, 255, .6); background: #fcf8ff; }
:root .sig--web-orders .hl .wo__in { box-shadow: 0 0 0 1.5px #2f9e5b, 0 12px 24px -14px rgba(47, 158, 91, .5); }
:root .sig--web-orders .wo__in > .wo__av { display: none; }
:root .sig--web-orders .wo__who { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; min-width: 0; }
:root .sig--web-orders .wo__in { grid-template-columns: 32px minmax(0, 1.5fr) minmax(0, 1fr) auto; }
:root .sig--web-orders .wo__in > .wo__av { display: grid; }
:root .sig--web-orders .wo__who { display: block; }
:root .sig--web-orders .wo__av { width: 32px; height: 32px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--t) 22%, #fff); color: color-mix(in srgb, var(--t) 55%, #000); font: 700 11px/1 var(--f-display); text-transform: uppercase; }
:root .sig--web-orders .wo__th { grid-template-columns: 32px minmax(0, 1.5fr) minmax(0, 1fr) auto; }
:root .sig--web-orders .wo__th span:first-child { grid-column: 1 / 3; }
:root .sig--web-orders .wo__who b { display: block; font: 600 12.5px/1.2 var(--f-display); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .sig--web-orders .wo__who small { color: #6e6876; font-size: 11px; }
:root .sig--web-orders .wo__it { color: #4a4450; font: 400 12px/1.25 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .sig--web-orders .wo__st { width: 118px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border-radius: 999px; font: 600 10.5px/1 var(--f-display); white-space: nowrap; }
:root .sig--web-orders .wo__st[data-s="proc"] { background: #fff1d6; color: #7a4a00; }
:root .sig--web-orders .wo__st[data-s="sent"] { background: #dff5e7; color: #17643a; }
:root .sig--web-orders .wo__toast { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #1b1b1b; color: #fff; box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(14px) scale(.95); transition: opacity .35s, transform .6s var(--ease-out); }
:root .sig--web-orders .wo__toast.on { opacity: 1; transform: none; }
:root .sig--web-orders .wo__toast > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #2f9e5b; font-size: 15px; }
:root .sig--web-orders .wo__toast b { display: block; font: 600 12.5px/1.2 var(--f-display); }
:root .sig--web-orders .wo__toast small { color: #cfc8d6; font-size: 11.5px; }
@container (max-width: 560px){:root .sig--web-orders .wo { grid-template-columns: 50px 1fr; }
:root .sig--web-orders .wo__side li span, :root .sig--web-orders .wo__side li .wo__count { display: none; }
:root .sig--web-orders .wo__side li { justify-content: center; }
:root .sig--web-orders .wo__side li.on .wo__count { display: grid; position: absolute; right: -4px; top: -4px; min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
:root .sig--web-orders .wo__wp { margin: 0 auto 14px; }
:root .sig--web-orders .wo__tabs i:not(.on) { display: none; }
:root .sig--web-orders .wo__in, :root .sig--web-orders .wo__th { grid-template-columns: 30px minmax(0, 1fr) auto; }
:root .sig--web-orders .wo__it, :root .sig--web-orders .wo__th span:nth-child(2) { display: none; }
:root .sig--web-orders .wo__st, :root .sig--web-orders .wo__th span:last-child { width: auto; }
:root .sig--web-orders .wo__st { padding: 6px; }

}
:root .sig--web-orders .wo__rows { padding: 3px 3px 0; margin: -3px -3px 0; }
:root .sig--web-orders { text-align: left; }