html{width:100%;min-height:100%;overflow-x:clip}
body{width:100%;min-height:100vh;overflow-x:clip}
.shell{width:100%;max-width:none;min-height:100vh;margin:0;padding:clamp(16px,2vw,32px)}
.table-wrap{width:100%;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.stats{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
table{min-width:760px}
img,video,canvas,svg{max-width:100%}
dialog{max-width:min(94vw,1000px)}

@media(max-width:900px){
  .shell{padding:16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:16px}
  .top{align-items:flex-start}
  .top>.actions{justify-content:flex-end}
  .table-wrap{border:1px solid #e6ebf2;border-radius:12px}
  table{min-width:680px}
}

@media(max-width:600px){
  body{font-size:13px}
  .shell{padding:10px}
  .grid{grid-template-columns:1fr}
  .wide{grid-column:auto}
  .top{align-items:stretch;flex-direction:column;gap:12px;margin-bottom:14px}
  .top h1{font-size:22px}
  .top>.actions{
    display:flex;
    flex-wrap:nowrap;
    overflow:auto;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    gap:8px;
    width:100%;
    padding-bottom:2px;
    margin-right:-2px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .top>.actions .btn,.top>.actions form,.top>.actions form .btn{width:auto;min-width:max-content;text-align:center;scroll-snap-align:start}
  .card{padding:13px;margin-bottom:12px;border-radius:13px}
  .actions{align-items:stretch}
  .actions .btn{min-height:40px}
  .check{margin-top:4px}
  input,textarea,select{font-size:16px}
  dialog{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100vh - 16px);margin:8px!important;padding:14px!important}
  table{min-width:620px}
  th,td{padding:9px 7px}
  .login{width:100%;max-width:none;margin:4vh auto}
  .stats{grid-template-columns:1fr;gap:10px}
  .stats .card{margin-bottom:0}
  .stats strong{font-size:28px}
  .profile-list{grid-template-columns:1fr;gap:3px}
  .profile-list dd{margin-bottom:10px}
  .tabs{gap:5px;margin:14px 0}
  .tabs a{padding:9px 6px}
}

@media(max-width:380px){
  .top>.actions{padding-bottom:4px}
  .shell{padding:7px}
  .card{padding:11px;border-radius:11px}
}