/* CorpSakha v1.3 · responsive layer — turns fixed design frames into fluid, device-ready layouts */
html,body{margin:0;min-height:100%}
body.dev{display:block;padding:0;background:var(--bg)}
.dev .sb{display:none}
/* ---------- mobile app screens ---------- */
.dev .phone{width:100%;height:auto;min-height:100dvh;border-radius:0;box-shadow:none;overflow:visible}
.dev .phone>.bg{position:fixed}
.dev .scr{position:relative;inset:auto;min-height:100dvh;box-sizing:border-box;overflow:visible;
  padding:max(16px,var(--safe-area-inset-top,env(safe-area-inset-top))) 0 max(20px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom)))}
.dev .scr>*:not(.tabs){width:100%;max-width:var(--content-max,560px);margin-inline:auto;box-sizing:border-box}
.dev .scr:has(.tabs){padding-bottom:calc(110px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom)))}
.dev .tabs{position:fixed;margin:0;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:532px;bottom:max(16px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom)));z-index:20}
.dev .bottom{position:sticky;bottom:0;padding-top:12px;padding-bottom:max(24px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom)))}
.dev img{max-width:100%}
@media (min-width:768px){ /* tablet: roomier spacing, centred column */
  :root{--content-max:600px}
  .dev .pad{padding-inline:28px}
  .dev .h1{font-size:34px}
}
@media (min-width:1024px){ /* desktop web: tab bar becomes a left rail */
  .dev .tabs{left:24px;top:50%;bottom:auto;transform:translateY(-50%);width:88px;height:auto;flex-direction:column;gap:18px;padding:20px 0}
  .dev .scr:has(.tabs){padding-bottom:40px;padding-left:120px}
  :root{--content-max:640px}
}
/* ---------- admin console ---------- */
.dev .desk{width:100%;height:auto;min-height:100dvh;border-radius:0;box-shadow:none;overflow:visible}
.dev .desk>.bg{position:fixed}
.dev .side{position:sticky;top:14px;align-self:flex-start;max-height:calc(100dvh - 28px);overflow:auto}
.dev .amain{min-width:0;overflow:visible}
.dev .tbl{overflow-x:auto}.dev .tbl table{min-width:640px}
@media (max-width:1180px){.dev .kpis{grid-template-columns:repeat(2,1fr)}.dev .g2c{grid-template-columns:1fr}.dev .modgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .dev .desk{flex-direction:column}
  .dev .side{position:sticky;top:0;z-index:20;width:auto;max-height:none;margin:0;border-radius:0 0 18px 18px;flex-direction:row;align-items:center;overflow-x:auto;gap:6px;padding:12px}
  .dev .side .xs2{display:none}.dev .side .wm{margin-right:10px;flex:none}.dev .an{flex:none}
  .dev .amain{padding:16px}
  .dev .atop{flex-wrap:wrap;gap:12px}.dev .atop .in{width:100%!important}
  .dev .modgrid{grid-template-columns:repeat(2,1fr)}.dev .mc img{height:220px}
}
@media (max-width:560px){.dev .kpis{grid-template-columns:1fr}.dev .modgrid{grid-template-columns:1fr}.dev .lgn .card{width:auto!important;margin:16px}}
/* dark-theme brand fixes */
body:not(.light) .brand,body:not(.light) .wm{color:#F4F6FF}
/* dev preview helper */
.theme-toggle{position:fixed;right:12px;bottom:130px;opacity:.75;z-index:99;font:600 12px Inter,system-ui;padding:8px 12px;border-radius:20px;border:1px solid var(--gb);background:var(--gl);color:var(--t1);backdrop-filter:blur(12px);cursor:pointer}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,255,255,.92)!important}body:not(.light) .glass{background:rgba(20,26,60,.94)!important}}