:root{--bg:#f6f6f3;--ink:#16161d;--mute:#74747f;--line:rgba(22,22,40,.08);--e:cubic-bezier(.32,.72,0,1);
--new:#3b6df0;--in_progress:#d98a0b;--ordered:#7c4ddb;--received:#16a068;--rejected:#d4455a}
*{box-sizing:border-box;margin:0}
body{font-family:"Plus Jakarta Sans","Geist","SF Pro Display","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100dvh;padding:0 16px 96px;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto}
.nav{position:sticky;top:16px;z-index:10;width:max-content;max-width:100%;margin:16px auto 0;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px);box-shadow:0 0 0 1px var(--line),0 18px 40px -20px rgba(30,30,60,.25)}
.nav b{font-size:14px;letter-spacing:-.01em}.chip{font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.05);color:var(--mute)}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--ink);color:#fff;padding:8px 8px 8px 18px;border-radius:999px;font-size:13px;font-weight:600;transition:transform .5s var(--e)}
.btn:active{transform:scale(.97)}.btn i{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;transition:transform .5s var(--e)}
.btn:hover i{transform:translate(2px,-1px) scale(1.06)}.btn svg{width:14px;height:14px}
.hero{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:end;padding:72px 0 40px}
.eyebrow{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.05);margin-bottom:20px}
h1{font-size:clamp(36px,5.2vw,68px);line-height:1;letter-spacing:-.04em;font-weight:700}
.sub{color:var(--mute);margin-top:16px;font-size:15px;line-height:1.5;max-width:34ch}
.shell{padding:6px;border-radius:2rem;background:rgba(0,0,0,.04);box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.core{background:#fff;border-radius:calc(2rem - 6px);box-shadow:inset 0 1px 1px #fff,0 24px 48px -28px rgba(30,30,60,.22)}
.cnts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cnt{width:100%;text-align:left;border:0;cursor:pointer;background:none;padding:0;border-radius:2rem;transition:transform .6s var(--e)}
.cnt:active{transform:scale(.98)}.cnt .core{padding:18px 20px;transition:transform .6s var(--e),box-shadow .6s var(--e)}
.cnt:hover .core{transform:translateY(-3px)}.cnt.on .core{box-shadow:inset 0 0 0 2px var(--ink),0 24px 48px -28px rgba(30,30,60,.3)}
.cnt small{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute);font-weight:500}.cnt strong{display:block;font-size:34px;letter-spacing:-.04em;margin-top:6px;font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:var(--c,#999)}
.bar{display:grid;grid-template-columns:2fr repeat(4,1fr) auto;gap:10px;padding:14px}
.f{height:42px;border:0;border-radius:14px;padding:0 14px;background:#f5f5f3;box-shadow:inset 0 0 0 1px var(--line);outline:0;transition:box-shadow .4s var(--e),background-color .4s var(--e);min-width:0}
.f:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:600;padding:14px 14px 10px}
td{padding:14px;vertical-align:top;border-top:1px solid var(--line)}tr.row:hover td{background:#fafaf8}
.txt{color:var(--mute);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st{appearance:none;border:0;cursor:pointer;font-size:12px;font-weight:600;padding:8px 14px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);transition:transform .4s var(--e);max-width:100%}
.st:active{transform:scale(.97)}.st:disabled{opacity:.5}.st.ro{cursor:default}.st.ro:disabled{opacity:1;cursor:default;-webkit-text-fill-color:var(--c)}
.note{width:100%;min-width:170px}.ic{width:34px;height:34px;border:0;border-radius:50%;background:#f5f5f3;cursor:pointer;display:inline-grid;place-items:center;transition:transform .5s var(--e),background-color .4s var(--e)}
.ic:hover{background:#ebebe8}.ic:active{transform:scale(.94)}.ic svg{width:16px;height:16px;transition:transform .5s var(--e)}.ic.open svg{transform:rotate(180deg)}.ic.del:hover{background:#fbe3e7;color:var(--rejected)}
.acts{white-space:nowrap}.detail td{background:#fafaf8;color:var(--mute);font-size:13px;line-height:1.6}.detail q{display:block;color:var(--ink);font-size:15px;quotes:none;margin-bottom:8px;white-space:pre-wrap}
.dm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}.plink{flex:1;min-width:220px;max-width:460px;height:36px;font-size:13px}.pl{display:flex;align-items:center;gap:8px;flex:1;min-width:260px}
.lnk{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;font-size:12px;font-weight:600;color:#fff;background:var(--ink);padding:9px 14px;border-radius:999px;transition:transform .5s var(--e)}.lnk:active{transform:scale(.97)}
.msg{padding:64px 20px;text-align:center;color:var(--mute)}.msg h3{color:var(--ink);font-size:20px;letter-spacing:-.02em;margin-bottom:8px}.msg .btn{margin-top:18px}
.sk{height:16px;border-radius:8px;background:#ececE8;animation:p 1.4s var(--e) infinite}@keyframes p{50%{opacity:.4}}
.reveal{opacity:0;transform:translateY(40px);filter:blur(8px);transition:opacity .9s var(--e),transform .9s var(--e),filter .9s var(--e)}.reveal.in{opacity:1;transform:none;filter:none}
#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:30;width:max-content;max-width:92vw}
.toast{padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;animation:t .6s var(--e)}.toast.err{background:var(--rejected)}@keyframes t{from{opacity:0;transform:translateY(16px)}}
dialog{margin:auto;border:0;border-radius:2rem;padding:28px;max-width:360px;box-shadow:0 40px 80px -20px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(20,20,30,.35)}
dialog h3{letter-spacing:-.02em;margin-bottom:8px}dialog p{color:var(--mute);font-size:14px;margin-bottom:22px;line-height:1.5}.dr{display:flex;gap:8px;justify-content:flex-end}
.btn.g{background:#f0f0ed;color:var(--ink);padding:10px 18px}.btn.r{background:var(--rejected);padding:10px 18px}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:28px;padding:48px 0 28px}.bar{grid-template-columns:1fr 1fr}.bar .f:first-child{grid-column:1/-1}}
@media(max-width:760px){body{padding:0 12px 96px}.nav b{display:none}.cnts{grid-template-columns:repeat(2,1fr)}
thead{display:none}table,tbody,tr,td{display:block}tr.row{padding:14px;border-top:1px solid var(--line)}td{border:0;padding:6px 0;display:grid;grid-template-columns:96px 1fr;gap:8px}
td::before{content:attr(data-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:3px}tr.row:hover td{background:none}
.txt{white-space:normal;max-width:none}.detail td{display:block;padding:14px}.detail td::before{display:none}.detail{background:#fafaf8}}
@media(min-width:901px){.bar.guest{grid-template-columns:2fr 1fr 1fr auto}}
.wrap-guest{max-width:760px}.wrap-guest .hero{grid-template-columns:1fr;gap:28px;padding:56px 0 32px}
.df{display:flex;align-items:center;gap:8px;height:42px;padding-left:14px;min-width:0;border-radius:14px;background:#f5f5f3;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s var(--e),background-color .4s var(--e)}
.df[hidden]{display:none}
.df:focus-within{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.df span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.df .f,.df .f:focus{flex:1;min-width:0;height:100%;padding:0 12px 0 0;background:none;box-shadow:none}
@media(max-width:900px){#fs{order:1}.bar label:first-of-type{order:2}#sort{order:3}.bar label:last-of-type{order:4}#dir{order:5}}
#dir{width:42px;height:42px;border-radius:14px}
@media(max-width:900px){#dir{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:38px;font-size:13px;font-weight:600;color:var(--mute)}#dir::after{content:"Сначала новые"}#dir[data-dir="asc"]::after{content:"Сначала старые"}}
@supports (appearance:base-select){
select.f,select.st,select.f::picker(select),select.st::picker(select){appearance:base-select}
select.f{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}
select.st{display:inline-flex;align-items:center}
select.f::picker-icon{color:var(--mute);transition:transform .4s var(--e)}
select.f:open::picker-icon{transform:rotate(180deg)}
select.f:open{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
select.st::picker-icon{display:none}
select.f::picker(select),select.st::picker(select){margin:6px 0;padding:6px;border:0;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 28px 56px -20px rgba(30,30,60,.35);min-width:max(170px,anchor-size(width));opacity:0;transform:translateY(-6px);transition:opacity .3s var(--e),transform .3s var(--e),overlay .3s allow-discrete,display .3s allow-discrete}
select.f::picker(select):popover-open,select.st::picker(select):popover-open{opacity:1;transform:none}
@starting-style{select.f::picker(select):popover-open,select.st::picker(select):popover-open{opacity:0;transform:translateY(-6px)}}
select.f option,select.st option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink);cursor:pointer;transition:background-color .25s var(--e)}
select.f option::checkmark,select.st option::checkmark{display:none}
select.f option:hover,select.st option:hover{background:#f5f5f3}
select.f option:checked,select.st option:checked{background:#f0f0ed;font-weight:700}
option[value=new]{--d:var(--new)}option[value=in_progress]{--d:var(--in_progress)}option[value=ordered]{--d:var(--ordered)}option[value=received]{--d:var(--received)}option[value=rejected]{--d:var(--rejected)}
option[value=new]::before,option[value=in_progress]::before,option[value=ordered]::before,option[value=received]::before,option[value=rejected]::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--d)}
}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vmax 50vmax at 8% 0%,rgba(59,109,240,.16),transparent 60%),radial-gradient(55vmax 45vmax at 100% 10%,rgba(124,77,219,.14),transparent 60%),radial-gradient(60vmax 50vmax at 85% 100%,rgba(217,138,11,.12),transparent 60%),radial-gradient(50vmax 40vmax at 0% 95%,rgba(22,160,104,.10),transparent 60%)}
td small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.bar.trash{grid-template-columns:1fr}.bar.trash>:not(#q){display:none}
.err{min-height:80dvh;display:grid;place-content:center;justify-items:center;text-align:center;gap:16px;padding:48px 0}
.err .code{font-size:clamp(96px,24vw,220px);line-height:.9;letter-spacing:-.06em;font-weight:700;color:transparent;background:linear-gradient(135deg,var(--new),var(--ordered)) text;-webkit-background-clip:text}
.err h1{font-size:clamp(26px,4vw,40px);letter-spacing:-.03em}.err .sub{margin:0 auto}
.err .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
a.btn{text-decoration:none}