/* ==========================================================
   BAZARANET — админка.
   Визуально повторяет присланный shadcn-компонент dashboard-sidebar:
   те же токены, размеры (сайдбар 260px, топбар 56px, текст 13px),
   те же состояния и анимации — но на чистом CSS, без Tailwind/React.
   ========================================================== */

:root{
  /* токены shadcn (light) */
  --background:0 0% 100%;
  --foreground:240 10% 3.9%;
  --card:0 0% 100%;
  --card-foreground:240 10% 3.9%;
  --popover:0 0% 100%;
  --muted:240 4.8% 95.9%;
  --muted-foreground:240 3.8% 46.1%;
  --primary:240 5.9% 10%;
  --primary-foreground:0 0% 98%;
  --accent:240 4.8% 95.9%;
  --border:240 5.9% 90%;
  --ring:240 5% 64.9%;
  --success:142 71% 40%;
  --warning:38 92% 50%;
  --danger:0 72% 51%;
  --info:221 83% 53%;

  --hover:rgba(0,0,0,.05);
  --hover-strong:rgba(0,0,0,.1);
  --ring-shadow:rgba(0,0,0,.05);
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  --radius:8px;
  --sidebar-w:260px;
}
html[data-theme="dark"]{
  --background:240 10% 3.9%;
  --foreground:0 0% 98%;
  --card:240 10% 3.9%;
  --card-foreground:0 0% 98%;
  --popover:240 10% 3.9%;
  --muted:240 3.7% 15.9%;
  --muted-foreground:240 5% 64.9%;
  --primary:0 0% 98%;
  --primary-foreground:240 5.9% 10%;
  --accent:240 3.7% 15.9%;
  --border:240 3.7% 15.9%;
  --ring:240 4.9% 83.9%;
  --success:142 69% 58%;
  --hover:rgba(255,255,255,.05);
  --hover-strong:rgba(255,255,255,.1);
  --ring-shadow:rgba(255,255,255,.05);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.5),0 8px 10px -6px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:hsl(var(--background)); color:hsl(var(--foreground));
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
svg{flex:none}
.no-sb{scrollbar-width:none; -ms-overflow-style:none}
.no-sb::-webkit-scrollbar{display:none}
:focus-visible{outline:2px solid hsl(var(--ring)); outline-offset:2px; border-radius:6px}

/* ---------- каркас ---------- */
.app{display:flex; height:100dvh; overflow:hidden; background:hsl(var(--background))}

/* ---------- сайдбар (точно как в компоненте) ---------- */
.sidebar{
  width:var(--sidebar-w); flex:none; height:100%; display:flex; flex-direction:column; padding:12px;
  background:hsl(var(--card)/.5); border-right:1px solid hsl(var(--border)/.5);
  transition:width .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease-in-out; overflow:hidden;
}
.app.collapsed .sidebar{width:0; opacity:0; padding-inline:0; border-right:0}

/* переключатель «воркспейса» = магазина */
.ws{position:relative}
.ws-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px; margin-bottom:16px; border-radius:var(--radius); transition:background .15s; user-select:none;
}
.ws-btn:hover{background:var(--hover)}
.ws-l{display:flex; align-items:center; gap:12px; min-width:0}
.ws-ava{
  width:32px; height:32px; border-radius:6px; background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  display:grid; place-items:center; font-weight:600; font-size:13px; box-shadow:var(--shadow-sm); flex:none;
}
.ws-txt{display:flex; flex-direction:column; overflow:hidden; text-align:left}
.ws-txt b{font-size:13px; font-weight:500; line-height:1; margin-bottom:4px; max-width:120px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ws-txt span{font-size:11px; line-height:1; color:hsl(var(--muted-foreground))}
.ws-btn .chev{width:16px; height:16px; color:hsl(var(--muted-foreground)/.5); transition:color .15s}
.ws-btn:hover .chev{color:hsl(var(--foreground)/.7)}

.ws-menu{
  position:absolute; top:52px; left:0; width:100%; z-index:50; padding:4px 0;
  background:hsl(var(--card)); border:1px solid hsl(var(--border)/.5); border-radius:var(--radius);
  box-shadow:var(--shadow-xl); display:flex; flex-direction:column; gap:2px;
  animation:zoomIn .1s ease-out;
}
@keyframes zoomIn{from{opacity:0; transform:scale(.95)}}
.ws-menu button{margin:0 4px; padding:8px 12px; font-size:13px; border-radius:6px; text-align:left; transition:background .15s}
.ws-menu button:hover{background:var(--hover)}
.ws-menu .sep{height:1px; background:hsl(var(--border)/.5); margin:4px 8px}
.ws-menu .muted{color:hsl(var(--muted-foreground)); display:flex; align-items:center; gap:8px}
.ws-scrim{position:fixed; inset:0; z-index:40}

/* группы и пункты навигации */
.nav-scroll{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; margin-top:8px}
.nav-group{display:flex; flex-direction:column; gap:2px}
.nav-head{padding-inline:10px; margin-bottom:4px; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:hsl(var(--muted-foreground)/.5)}

.nav-item{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px; border-radius:6px; transition:all .2s; user-select:none; color:hsl(var(--muted-foreground));
}
.nav-item:hover{background:var(--hover); color:hsl(var(--foreground)/.9)}
.nav-item.active{background:var(--hover-strong); color:hsl(var(--foreground)); font-weight:500}
.nav-item-l{display:flex; align-items:center; gap:10px; min-width:0}
.nav-item-l svg{width:16px; height:16px; color:hsl(var(--muted-foreground)/.7); transition:color .15s}
.nav-item:hover .nav-item-l svg{color:hsl(var(--foreground)/.7)}
.nav-item.active .nav-item-l svg{color:hsl(var(--foreground))}
.nav-item-l span{font-size:13px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-item-r{display:flex; align-items:center; gap:8px}

kbd{
  display:none; align-items:center; justify-content:center; height:20px; padding:0 6px;
  font-size:10px; font-weight:500; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:hsl(var(--muted-foreground)/.6); background:hsl(var(--background)/.5);
  border:1px solid hsl(var(--border)/.5); border-radius:4px;
}
.nav-item:hover kbd{display:inline-flex}
.pill{display:flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  font-size:10px; font-weight:500; border-radius:999px; background:hsl(var(--primary)/.1); color:hsl(var(--primary))}
html[data-theme="dark"] .pill{background:hsl(var(--foreground)/.12); color:hsl(var(--foreground))}
.chev-r{width:14px; height:14px; color:hsl(var(--muted-foreground)/.5); transition:transform .2s}
.nav-item.open .chev-r{transform:rotate(90deg)}

.subnav{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .3s ease-in-out,opacity .3s ease-in-out}
.subnav.open{grid-template-rows:1fr; opacity:1}
.subnav-in{overflow:hidden; min-height:0; position:relative; display:flex; flex-direction:column; gap:2px; margin-top:2px}
.subnav-in::before{content:''; position:absolute; top:0; bottom:0; left:17.5px; border-left:1px solid var(--hover)}

.nav-bottom{margin-top:auto; padding-top:16px; border-top:1px solid hsl(var(--border)/.5);
  display:flex; flex-direction:column; gap:2px}

/* ---------- контент ---------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--hover); transition:all .3s}
.topbar{
  height:56px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 16px; background:hsl(var(--card)); border-bottom:1px solid hsl(var(--border)/.5);
}
.topbar-l{display:flex; align-items:center; gap:12px; min-width:0}
.icon-b{padding:6px; border-radius:6px; color:hsl(var(--muted-foreground)); transition:.15s; display:grid; place-items:center}
.icon-b:hover{background:var(--hover); color:hsl(var(--foreground))}
.icon-b svg{width:18px; height:18px}
.crumbs{display:flex; align-items:center; gap:8px; font-size:14px; color:hsl(var(--muted-foreground)); min-width:0}
.crumbs b{font-weight:500; color:hsl(var(--foreground)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-r{display:flex; align-items:center; gap:12px}
.fake-search{
  width:256px; height:32px; border-radius:6px; background:var(--hover); display:flex; align-items:center;
  gap:8px; padding:0 10px; font-size:13px; color:hsl(var(--muted-foreground)); transition:.15s
}
.fake-search:hover{background:var(--hover-strong)}
.fake-search svg{width:14px; height:14px}
.fake-search kbd{display:inline-flex; margin-left:auto}
.ava{width:32px; height:32px; border-radius:999px; background:hsl(var(--primary)/.1);
  border:1px solid hsl(var(--primary)/.2); display:grid; place-items:center; font-size:12px; font-weight:600}

.content{padding:24px; overflow-y:auto; flex:1}
@media (min-width:768px){ .content{padding:32px} }

/* ---------- типовые блоки ---------- */
.page-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.page-head h1{font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0}
.page-head p{margin:4px 0 0; font-size:13px; color:hsl(var(--muted-foreground))}

.card{background:hsl(var(--card)); border:1px solid hsl(var(--border)/.5); border-radius:12px;
  box-shadow:var(--shadow-sm)}
.card-p{padding:24px}
.card-head{padding:16px 20px; border-bottom:1px solid hsl(var(--border)/.5); display:flex;
  align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card-head h3{margin:0; font-size:15px; font-weight:600}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:24px}
.stat{background:hsl(var(--card)); border:1px solid hsl(var(--border)/.5); border-radius:12px; padding:18px 20px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.stat .lbl{font-size:12px; color:hsl(var(--muted-foreground)); display:flex; align-items:center; gap:7px; margin-bottom:10px}
.stat .lbl svg{width:14px; height:14px}
.stat .val{font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1}
.stat .sub{font-size:11.5px; color:hsl(var(--muted-foreground)); margin-top:7px}
.up{color:hsl(var(--success))}
.down{color:hsl(var(--danger))}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 14px;
  border-radius:6px; font-size:13px; font-weight:500; transition:.15s; border:1px solid transparent; white-space:nowrap}
.btn svg{width:15px; height:15px}
.btn-primary{background:hsl(var(--primary)); color:hsl(var(--primary-foreground))}
.btn-primary:hover{opacity:.9}
.btn-outline{border-color:hsl(var(--border)); background:hsl(var(--card))}
.btn-outline:hover{background:var(--hover)}
.btn-ghost{color:hsl(var(--muted-foreground))}
.btn-ghost:hover{background:var(--hover); color:hsl(var(--foreground))}
.btn-danger{background:hsl(var(--danger)); color:#fff}
.btn-danger:hover{opacity:.9}
.btn-sm{height:30px; padding:0 10px; font-size:12px}
.btn:disabled{opacity:.5; pointer-events:none}

.inp,.sel,.ta{width:100%; height:36px; padding:0 11px; font-size:13px; border-radius:6px;
  border:1px solid hsl(var(--border)); background:hsl(var(--background)); transition:.15s}
.ta{height:auto; padding:9px 11px; resize:vertical; min-height:80px; font-family:inherit; line-height:1.5}
.inp:focus,.sel:focus,.ta:focus{outline:none; border-color:hsl(var(--ring)); box-shadow:0 0 0 3px hsl(var(--ring)/.15)}
.lbl-f{display:block; font-size:12px; font-weight:500; color:hsl(var(--muted-foreground)); margin-bottom:6px}
.f{margin-bottom:14px}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.help{font-size:11.5px; color:hsl(var(--muted-foreground)); margin-top:5px}

.search-box{position:relative; flex:1; min-width:170px; max-width:280px}
.search-box svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px;
  color:hsl(var(--muted-foreground))}
.search-box .inp{padding-left:32px}

/* таблица */
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{text-align:left; font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:hsl(var(--muted-foreground)); padding:10px 16px; border-bottom:1px solid hsl(var(--border)/.5); white-space:nowrap}
.tbl td{padding:12px 16px; border-bottom:1px solid hsl(var(--border)/.4); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:var(--hover)}
.tbl .rowbtn{cursor:pointer}
.tbl-wrap{overflow-x:auto}
.thumb{width:40px; height:50px; border-radius:6px; object-fit:cover; background:var(--hover); flex:none}
.cell-prod{display:flex; align-items:center; gap:12px; min-width:0}
.cell-prod b{font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px}
.cell-prod span{font-size:11.5px; color:hsl(var(--muted-foreground))}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px}

.status{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px;
  font-size:11px; font-weight:500; white-space:nowrap}
.status::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor}
.st-new{background:hsl(var(--info)/.12); color:hsl(var(--info))}
.st-confirmed{background:hsl(var(--warning)/.14); color:hsl(38 92% 42%)}
.st-shipped{background:hsl(262 83% 58%/.14); color:hsl(262 83% 62%)}
.st-done{background:hsl(var(--success)/.14); color:hsl(var(--success))}
.st-canceled{background:hsl(var(--danger)/.12); color:hsl(var(--danger))}
.dot-ok{color:hsl(var(--success))}

.tabs{display:flex; gap:4px; padding:3px; background:var(--hover); border-radius:8px; width:max-content; max-width:100%; overflow-x:auto}
.tabs button{padding:6px 12px; border-radius:6px; font-size:12.5px; font-weight:500;
  color:hsl(var(--muted-foreground)); transition:.15s; white-space:nowrap}
.tabs button.on{background:hsl(var(--card)); color:hsl(var(--foreground)); box-shadow:var(--shadow-sm)}

.empty-b{padding:56px 20px; text-align:center; color:hsl(var(--muted-foreground))}
.empty-b svg{width:36px; height:36px; margin-bottom:12px; color:hsl(var(--muted-foreground)/.4)}
.empty-b b{display:block; color:hsl(var(--foreground)); font-size:15px; margin-bottom:6px}

/* график */
.chart{display:flex; align-items:flex-end; gap:6px; height:180px; padding-top:10px}
.chart .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; height:100%}
.chart .bar{width:100%; max-width:34px; border-radius:5px 5px 2px 2px; background:hsl(var(--primary)/.85);
  min-height:3px; transition:height .5s cubic-bezier(.22,1,.36,1),background .15s; position:relative}
.chart .col:hover .bar{background:hsl(var(--primary))}
.chart .col small{font-size:10px; color:hsl(var(--muted-foreground))}
.chart .bar span{position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:hsl(var(--foreground)); color:hsl(var(--background)); font-size:10.5px; padding:3px 6px;
  border-radius:4px; opacity:0; pointer-events:none; transition:.15s; white-space:nowrap}
.chart .col:hover .bar span{opacity:1}

/* прогресс */
.bar-line{height:6px; border-radius:999px; background:var(--hover); overflow:hidden}
.bar-line i{display:block; height:100%; background:hsl(var(--primary)); border-radius:999px}

/* ---------- модалки ---------- */
.scrim{position:fixed; inset:0; z-index:60; background:hsl(var(--background)/.5); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto}
.scrim.on{display:flex}
.dialog{width:min(720px,100%); margin:6vh 0; background:hsl(var(--card)); border:1px solid hsl(var(--border)/.5);
  border-radius:12px; box-shadow:var(--shadow-xl); animation:zoomIn .2s ease-out; overflow:hidden}
.dialog-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px;
  border-bottom:1px solid hsl(var(--border)/.5)}
.dialog-head h3{margin:0; font-size:15px; font-weight:600}
.dialog-body{padding:20px; max-height:70dvh; overflow-y:auto}
.dialog-foot{padding:14px 20px; border-top:1px solid hsl(var(--border)/.5); display:flex; justify-content:flex-end; gap:8px}

/* командная палитра (⌘K) */
.cmdk{position:fixed; inset:0; z-index:70; display:none; align-items:flex-start; justify-content:center;
  padding:15vh 16px 16px; background:hsl(var(--background)/.4); backdrop-filter:blur(4px)}
.cmdk.on{display:flex}
.cmdk-box{position:relative; width:min(576px,100%); background:hsl(var(--card));
  border:1px solid hsl(var(--border)/.5); border-radius:12px; box-shadow:var(--shadow-xl); overflow:hidden;
  animation:zoomIn .2s ease-out}
.cmdk-in{display:flex; align-items:center; padding:0 16px; border-bottom:1px solid hsl(var(--border)/.5)}
.cmdk-in > svg{width:18px; height:18px; margin-right:12px; color:hsl(var(--muted-foreground)/.7)}
.cmdk-in input{flex:1; background:none; border:0; outline:none; padding:16px 0; font-size:14px}
.cmdk-in input::placeholder{color:hsl(var(--muted-foreground)/.5)}
.cmdk-in kbd{display:inline-flex; margin-left:8px; cursor:pointer}
.cmdk-list{max-height:320px; overflow-y:auto; padding:6px}
.cmdk-row{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:6px;
  font-size:13px; text-align:left; color:hsl(var(--foreground)/.85)}
.cmdk-row svg{width:15px; height:15px; color:hsl(var(--muted-foreground))}
.cmdk-row:hover,.cmdk-row.sel{background:var(--hover)}
.cmdk-row small{margin-left:auto; color:hsl(var(--muted-foreground)); font-size:11px}
.cmdk-empty{padding:32px 8px; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:hsl(var(--muted-foreground)); font-size:13px; font-weight:500}
.cmdk-empty svg{width:24px; height:24px; color:hsl(var(--muted-foreground)/.3)}

/* картинки товара */
.imgs{display:flex; gap:10px; flex-wrap:wrap}
.img-slot{position:relative; width:74px; height:92px; border-radius:8px; overflow:hidden;
  border:1px solid hsl(var(--border)); background:var(--hover)}
.img-slot img{width:100%; height:100%; object-fit:cover}
.img-slot button{position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:5px;
  background:hsl(var(--danger)); color:#fff; display:grid; place-items:center; font-size:12px; line-height:1}
.drop{width:74px; height:92px; border-radius:8px; border:1.5px dashed hsl(var(--border)); display:grid;
  place-items:center; color:hsl(var(--muted-foreground)); transition:.15s; font-size:11px; text-align:center; gap:4px}
.drop:hover,.drop.over{border-color:hsl(var(--ring)); background:var(--hover); color:hsl(var(--foreground))}
.drop svg{width:18px; height:18px; margin:0 auto}

.chiplist{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.chip-x{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 8px; border-radius:6px;
  background:var(--hover); font-size:12px}
.chip-x button{color:hsl(var(--muted-foreground)); font-size:14px; line-height:1}
.chip-x button:hover{color:hsl(var(--danger))}
.swatch{width:16px; height:16px; border-radius:4px; border:1px solid hsl(var(--border))}

/* тосты */
.toaster{position:fixed; z-index:100; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px;
  width:min(340px,calc(100vw - 32px))}
.tst{background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:8px; padding:12px 14px;
  font-size:13px; box-shadow:var(--shadow-xl); animation:tstIn .25s ease-out; display:flex; gap:10px; align-items:flex-start}
.tst svg{width:16px; height:16px; margin-top:1px}
.tst.ok svg{color:hsl(var(--success))}
.tst.err{border-color:hsl(var(--danger)/.5)}
.tst.err svg{color:hsl(var(--danger))}
@keyframes tstIn{from{opacity:0; transform:translateY(10px)}}

/* экран входа */
.login{min-height:100dvh; display:grid; place-items:center; padding:20px; background:hsl(var(--background))}
.login-box{width:min(380px,100%); background:hsl(var(--card)); border:1px solid hsl(var(--border)/.5);
  border-radius:12px; padding:32px; box-shadow:var(--shadow-xl); text-align:center}
.login-box .ws-ava{width:44px; height:44px; border-radius:10px; font-size:18px; margin:0 auto 18px}
.login-box h1{font-size:19px; font-weight:600; margin:0 0 6px}
.login-box p{font-size:13px; color:hsl(var(--muted-foreground)); margin:0 0 22px}
.login-box .inp{height:40px; text-align:center; margin-bottom:12px}
.login-box .btn{width:100%; height:40px}

.warn{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:8px; font-size:12.5px;
  background:hsl(var(--warning)/.1); border:1px solid hsl(var(--warning)/.3); color:hsl(38 92% 38%); margin-bottom:20px}
html[data-theme="dark"] .warn{color:hsl(38 92% 65%)}
.warn svg{width:16px; height:16px; flex:none; margin-top:1px}

/* ---------- мобильный ---------- */
.scrim-nav{position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.45); display:none}
.scrim-nav.on{display:block}
@media (max-width:860px){
  .sidebar{position:fixed; z-index:50; top:0; left:0; bottom:0; background:hsl(var(--card));
    transform:translateX(-100%); transition:transform .3s ease-in-out; width:var(--sidebar-w); opacity:1; padding:12px}
  .app.navopen .sidebar{transform:none}
  .app.collapsed .sidebar{width:var(--sidebar-w); opacity:1; padding:12px}
  .fake-search{display:none}
  .content{padding:16px}
  .stats{grid-template-columns:repeat(2,1fr); gap:10px}
  .stat{padding:14px}
  .stat .val{font-size:20px}
  .f-row{grid-template-columns:1fr}
  .dialog{margin:0; border-radius:12px 12px 0 0; align-self:flex-end; min-height:88dvh}
  .scrim{padding:0; align-items:flex-end}
  .dialog-body{max-height:calc(88dvh - 120px)}
  .page-head h1{font-size:19px}
  .tbl th:nth-child(n+4),.tbl td:nth-child(n+4){display:none}
  .toaster{right:8px; left:8px; bottom:8px; width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}