:root{--brand:#315efb;--navy:#14213a;--ink:#182238;--muted:#6f7b91;--line:#e4e9f1;--surface:#fff;--canvas:#f4f6fa;--radius:16px;--shadow:0 8px 30px rgba(20,33,58,.06)}
*{box-sizing:border-box}body{background:var(--canvas);color:var(--ink)}button,input,select,textarea{font:inherit}.page{max-width:1600px;margin-inline-start:250px;padding:28px clamp(18px,2.3vw,36px) 48px}.card{border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}.heading{align-items:center;gap:16px;margin-bottom:22px}.heading h1{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.02em}.heading p{max-width:720px}.btn,.small-btn,.danger-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px!important}.btn.is-loading{opacity:.7;pointer-events:none}.top{height:72px;padding-inline:22px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(18px)}.top .logo{gap:11px}.top .logo .brand-mark{display:grid;place-items:center;width:43px;height:43px;padding:6px;border-radius:13px;background:#eef2ff;overflow:hidden}.brand-mark img{width:100%;height:100%;object-fit:contain}.side{top:72px;width:250px;padding:18px 13px;background:#14213a}.side nav{display:grid;gap:5px}.side nav a{min-height:45px;padding:10px 13px;border-radius:11px;color:#cbd5e5}.side nav a:hover{background:#ffffff0c}.side nav a.active{background:#315efb;color:#fff}.side form button{min-height:44px;border-radius:11px}.grid{gap:16px}.grid label,label{min-width:0}input,select,textarea{max-width:100%;border-radius:11px!important}.users-list article,.history article,.catalog-list article,.activity-list article{gap:13px;min-height:62px}.settings-layout{display:grid;gap:18px}.settings-section{padding:22px}.settings-section>.section-title{justify-content:flex-start}.settings-section>.section-title>i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#eef2ff;color:var(--brand);font-size:20px}.brand-upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.upload-tile{display:grid;grid-template-columns:72px 1fr;column-gap:14px;align-items:center;padding:16px;border:1px dashed #cbd3e1;border-radius:14px;background:#fafbfe;cursor:pointer}.upload-tile:hover{border-color:var(--brand);background:#f6f8ff}.upload-tile input{grid-column:2;margin-top:9px;padding:7px;background:#fff}.upload-tile b,.upload-tile small{grid-column:2}.upload-tile small{color:var(--muted)}.brand-preview{grid-row:1/4;display:grid;place-items:center;width:72px;height:72px;padding:8px;border-radius:16px;background:#fff;border:1px solid var(--line)}.brand-preview img{max-width:100%;max-height:100%;object-fit:contain}.favicon-preview{border-radius:22px}.form-actions{position:sticky;bottom:14px;z-index:5;display:flex;justify-content:flex-start;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fffffff0;backdrop-filter:blur(12px)}.auth{min-height:100dvh;padding:22px;background:radial-gradient(circle at 20% 10%,#e8edff,transparent 35%),linear-gradient(145deg,#f8f9fc,#eef2f8)}.auth-card{width:min(440px,100%);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 80px #17213a18}.auth-card .brand span{display:grid;place-items:center;width:52px;height:52px;padding:7px;border-radius:15px;background:#eef2ff}.auth-card .brand img{max-width:100%;max-height:100%}.filter-bar form{align-items:end}.notification-panel{z-index:100}.empty{min-height:100px;display:grid;place-items:center;text-align:center}
@media(max-width:1100px){.page{margin-inline-start:220px}.side{width:220px}.brand-upload-grid{grid-template-columns:1fr}.dashboard-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:759px){body{padding-bottom:env(safe-area-inset-bottom)}.top{height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));grid-template-columns:44px 1fr 44px}.top .logo{grid-column:3}.top .logo .brand-mark{width:42px;height:42px}.top .shell-actions{grid-column:2;justify-content:flex-start}.side{top:calc(64px + env(safe-area-inset-top));width:min(86vw,310px);padding-bottom:max(18px,env(safe-area-inset-bottom))}.page{margin:0;padding:16px 12px calc(34px + env(safe-area-inset-bottom));overflow-x:hidden}.heading{align-items:flex-start;margin-bottom:16px}.heading h1{font-size:25px}.heading p{font-size:13px}.heading>.btn{width:auto}.card{border-radius:14px!important;padding:14px}.grid{grid-template-columns:1fr!important;gap:12px}.brand-upload-grid{grid-template-columns:1fr}.upload-tile{grid-template-columns:58px 1fr;padding:12px}.brand-preview{width:58px;height:58px}.form-actions{bottom:calc(8px + env(safe-area-inset-bottom));padding:8px}.form-actions .btn{width:100%}.users-list article,.history article,.catalog-list article,.activity-list article{align-items:flex-start;flex-wrap:wrap}.users-list .grow,.history .grow,.catalog-list .grow,.activity-list .grow{min-width:calc(100% - 60px)}.users-list .role,.users-list .pill{margin-inline-start:0}.filter-bar form{display:grid!important;grid-template-columns:1fr!important}.filter-bar form>*{width:100%}.role-grid{grid-template-columns:1fr!important}.notification-panel{width:calc(100vw - 14px);left:7px}.dashboard-stats{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.auth{padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))}.auth-card{padding:23px 18px}}
@media(max-width:390px){.dashboard-stats{grid-template-columns:1fr}.shell-install:not([hidden]){display:flex!important}}
.app-update-toast{position:fixed;z-index:130;right:50%;bottom:22px;transform:translateX(50%);display:flex;align-items:center;gap:16px;width:min(440px,calc(100vw - 28px));padding:13px 14px;border:1px solid #d9e1ff;border-radius:15px;background:#fff;box-shadow:0 18px 55px #14213a2e}.app-update-toast[hidden]{display:none}.app-update-toast span{display:grid;grid-template-columns:30px 1fr;flex:1;min-width:0}.app-update-toast i{grid-row:1/3;align-self:center;color:#315efb;font-size:20px}.app-update-toast b,.app-update-toast small{display:block}.app-update-toast small{margin-top:2px;color:#6f7b91;font-size:11px}.app-update-toast button{flex:none;min-height:38px;padding:0 13px;border:0;border-radius:10px;background:#315efb;color:#fff;font-weight:700;cursor:pointer}
.notification-permission .push-test{background:#fff;color:#315efb;border:1px solid #cfd8ff}.notification-permission small.is-success{color:#14815a;font-weight:700}
.notification-item em{display:block;margin-top:2px;color:#66738a;font-size:12px;font-style:normal}.notification-item span{min-width:0}.notification-list{overscroll-behavior:contain}
@media(max-width:759px){
 body.notification-open{overflow:hidden}
 body.notification-open:before{content:"";position:fixed;z-index:99;inset:calc(64px + env(safe-area-inset-top)) 0 0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px)}
 .notification-panel{z-index:100;top:auto;right:7px;bottom:max(7px,env(safe-area-inset-bottom));left:7px;width:auto;max-height:min(78dvh,720px);display:flex;flex-direction:column;overflow:hidden;border-radius:24px;box-shadow:0 24px 70px rgba(15,23,42,.28)}
 .notification-panel[hidden]{display:none}
 .notification-head{flex:0 0 auto;padding:16px 18px}
 .notification-permission{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:12px;padding:12px}
 .notification-permission>span{grid-column:1/-1}
 .notification-permission button{min-height:40px}
 .notification-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 12px max(12px,env(safe-area-inset-bottom))}
 .notification-item{grid-template-columns:42px minmax(0,1fr);padding:13px 4px}
 .notification-item>i{grid-row:1}
 .notification-item time{grid-column:1;grid-row:2;text-align:center;font-size:10px}
 .notification-item span{grid-column:2;grid-row:1/3}
 .notification-item b{font-size:16px;line-height:1.35}
 .notification-item small{font-size:13px;line-height:1.45}
}
@media(min-width:760px) and (max-width:1180px){
 .page{width:auto;max-width:none;min-width:0;margin-inline-start:220px;padding-inline:20px;overflow-x:hidden}
 .dashboard-grid{grid-template-columns:1fr!important}
 .dashboard-side{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .dashboard-side>*{min-width:0}
}
@media(max-width:759px){.app-update-toast{bottom:max(12px,env(safe-area-inset-bottom));gap:10px;padding:11px}.app-update-toast button{padding-inline:10px}}

/* v1.5.6 — mobile shell hotfix: fully hide drawer and show the real horizontal logo */
@media(max-width:759px){
 html,body{max-width:100%;overflow-x:hidden}
 body.nav-open{overflow:hidden}
 .top{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) minmax(96px,128px);
  gap:10px;
 }
 .top .logo{
  grid-column:3;
  width:100%;
  min-width:0;
  overflow:hidden;
 }
 .top .logo .brand-mark{
  display:flex;
  width:100%;
  height:38px;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
 }
 .top .logo .brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right center;
 }
 .top .shell-actions{
  grid-column:2;
  min-width:0;
  overflow:visible;
 }
 .top>.menu{grid-column:1}
 .side{
  right:0!important;
  width:min(86vw,310px);
  transform:translateX(105%);
  visibility:hidden;
  pointer-events:none;
  transition:transform .24s ease,visibility 0s linear .24s;
  will-change:transform;
 }
 .nav-open .side{
  right:0!important;
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform .24s ease;
 }
 .nav-open:after{
  content:"";
  position:fixed;
  z-index:8;
  inset:calc(64px + env(safe-area-inset-top)) 0 0;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(2px);
 }
 .page{width:100%;min-width:0;margin:0!important;transform:none!important}
}

/* v1.5.7 — one responsive app shell and a correctly anchored menu control */
.top-actions{display:flex;align-items:center;gap:8px}
@media(min-width:1025px){
 .top>.logo{flex:0 0 auto}
 .top>.top-actions{flex:0 0 auto}
 .top>.shell-actions{margin-inline-start:auto;margin-inline-end:0}
}
@media(max-width:1024px){
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 body.nav-open{overflow:hidden;touch-action:none}
 .top{
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  height:calc(64px + env(safe-area-inset-top));
  min-height:calc(64px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  padding-right:max(12px,env(safe-area-inset-right));
  padding-left:max(12px,env(safe-area-inset-left));
 }
 .top>.logo{
  order:1;
  flex:0 1 150px;
  width:auto;
  min-width:92px;
  max-width:150px;
  margin:0;
 }
 .top>.top-actions{order:2;flex:0 0 42px}
 .top>.shell-actions{
  order:3;
  display:flex;
  flex:0 0 auto;
  min-width:0;
  margin-inline-start:auto;
  margin-inline-end:0;
 }
 .top .desktop-nav-toggle{display:none!important}
 .top .menu{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  z-index:auto!important;
  display:grid!important;
  place-items:center;
  width:42px;
  height:42px;
  margin:0;
  padding:0;
  border-radius:11px;
 }
 .top .logo span{display:none}
 .top .logo .brand-mark{
  display:flex;
  width:100%;
  height:38px;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
 }
 .top .logo .brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right center;
 }
 .side{
  top:calc(64px + env(safe-area-inset-top));
  right:0!important;
  left:auto!important;
  width:min(86vw,310px);
  max-width:310px;
  padding-bottom:max(18px,env(safe-area-inset-bottom));
  transform:translate3d(105%,0,0);
  visibility:hidden;
  pointer-events:none;
  transition:transform .24s ease,visibility 0s linear .24s;
  will-change:transform;
 }
 .nav-open .side{
  transform:translate3d(0,0,0);
  visibility:visible;
  pointer-events:auto;
  transition:transform .24s ease;
 }
 .nav-open:after{
  content:"";
  position:fixed;
  z-index:8;
  inset:calc(64px + env(safe-area-inset-top)) 0 0;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(2px);
 }
 .page{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0!important;
  padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));
  overflow-x:hidden;
  transform:none!important;
 }
 body.nav-compact .page{margin:0!important}
}
@media(min-width:760px) and (max-width:1024px){
 .top .logo{flex-basis:170px;max-width:170px}
 .page{padding-top:22px}
 .dashboard-grid{grid-template-columns:1fr!important}
 .dashboard-side{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:480px){
 .top{gap:7px}
 .top>.logo{flex-basis:112px;max-width:112px}
 .shell-install:not([hidden]){display:flex!important}
}

/* v1.6.6 — keep the installed iOS app header below the system status area */
@media(max-width:1024px) and (display-mode:standalone){
 :root{--ios-app-safe-top:max(20px,env(safe-area-inset-top))}
 .top{
  height:calc(64px + var(--ios-app-safe-top));
  min-height:calc(64px + var(--ios-app-safe-top));
  padding-top:var(--ios-app-safe-top)
 }
 .side{top:calc(64px + var(--ios-app-safe-top))}
 .nav-open:after{inset:calc(64px + var(--ios-app-safe-top)) 0 0}
 body.notification-open:before{inset:calc(64px + var(--ios-app-safe-top)) 0 0}
}

/* v1.5.8 — full brand logo and desktop content that follows the sidebar */
@media(min-width:1025px){
 .top>.logo{width:210px;min-width:210px;max-width:210px}
 .top .logo .brand-mark{display:flex;width:150px;height:42px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
 .top .logo .brand-mark img{width:100%;height:100%;object-fit:contain;object-position:right center}
 .top .logo>span{display:none}
 .page{width:auto;max-width:none;min-width:0;margin-right:250px;margin-left:0;transition:margin-right .2s ease}
 body.nav-compact .page{margin-right:82px}
 body:not(.nav-compact) .dashboard-grid{grid-template-columns:minmax(0,1.45fr) minmax(285px,.7fr)}
 body:not(.nav-compact) .dashboard-side{min-width:0}
}
@media(min-width:1025px) and (max-width:1280px){
 body:not(.nav-compact) .dashboard-grid{grid-template-columns:1fr}
 body:not(.nav-compact) .dashboard-side{grid-template-columns:repeat(2,minmax(0,1fr))}
}