/* ============================================================
   ADMIN · RESPONSIVE
   Split from css/app.css — screen-specific styles.
   ============================================================ */
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .menu-btn{display:grid}
  .icon-btn.menu-btn{display:grid}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:264px;z-index:90;
    transform:translateX(-100%);transition:transform .25s cubic-bezier(.3,.9,.3,1);
    box-shadow:0 0 60px rgba(0,0,0,.5);
  }
  .sidebar.open{transform:translateX(0)}
  .topbar{height:56px;padding:0 14px;gap:10px}
  .page-title{font-size:15px}
  .page-crumb{display:none}
  .search{display:none}
  .who{display:none}
  .topbar .avatar{width:34px;height:34px}
  .content{padding:16px 14px 60px}
  .section-tools{gap:7px}
  .section-tools .search{display:flex!important;width:100%!important;margin-left:0;order:5}
  .section-tools .btn{flex:1;justify-content:center;min-width:140px}
  .mod-item{flex-wrap:wrap;padding:13px 14px}
  .svc-grid{grid-template-columns:1fr}
  .svc-fields{grid-template-columns:1fr}
  .svc-foot{flex-wrap:wrap}
  .svc-last{margin-left:0;width:100%;text-align:left}
  .log-drawer{width:100%;max-width:100%;border-left:none}
  .mod-actions{flex-direction:row;width:100%;justify-content:flex-start;margin-top:4px}
  .mod-main{min-width:0}
  .trade-card{gap:14px}
  .pres-grid{grid-template-columns:1fr}
}@media (max-width:520px){
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:13px 14px}
  .kpi-val{font-size:21px;letter-spacing:-.6px}
  .kpi-label{font-size:10px}
  .kpi-head .kpi-ico{display:none}
  .kpi-delta{font-size:11px;flex-wrap:wrap}
  .content{padding:12px 11px 60px}
  .seg button{padding:5px 9px;font-size:11px}
  .chip{padding:5px 11px;font-size:11.5px}
  .section-tools .btn{min-width:0;flex:1 1 calc(50% - 7px)}
  .section-tools .btn:last-child{flex:1 1 100%}
  .grid-2,.grid-2b{gap:11px;margin-bottom:11px}
  .mod-name{font-size:13px}
  .mod-meta{flex-wrap:wrap;gap:8px}
  .mod-actions .btn{flex:1;justify-content:center}
  .tc-cell b{font-size:13px}
  .set-row{flex-wrap:wrap;gap:10px}
  .set-row p{max-width:100%}
  .tpl-row{flex-wrap:wrap}
  .tpl-acts{margin-left:0;width:100%}
  .tpl-acts .btn{flex:1;justify-content:center}
}
/* ============ SCREENS (landing / login / app) ============ */
body[data-screen="app"] .app{display:grid}