@media(max-width:900px){
  body{padding-bottom:70px}
  aside{position:sticky;top:0;z-index:20;height:auto;padding:10px 14px;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;background:#eef2edf5;box-shadow:0 2px 12px #17231e12}
  aside>.brand{font-size:16px}
  aside>.brand span{width:30px;height:30px}
  .aside-bottom{margin:0 0 0 auto;display:flex;align-items:flex-end;gap:8px}
  .aside-bottom label{display:block;max-width:min(48vw,260px)}
  .aside-bottom select{height:42px;margin-top:2px}
  .aside-bottom .ghost{min-height:42px;padding:10px 12px}
  nav{position:fixed;left:0;right:0;bottom:0;z-index:30;order:4;width:100%;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:visible;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  nav button{min-width:0;min-height:58px;padding:8px 4px;text-align:center;font-size:12px;border-radius:0;white-space:normal}
  nav button.active{background:var(--mint);box-shadow:none}
  main{padding:18px 16px}
  header{margin-bottom:16px}
  header h1{font-size:28px}
  .compose-grid{display:flex;flex-direction:column}
  .tools{display:block;order:2;padding:14px}
  .tools>p{margin:0 0 8px}
  .tools>.block{display:inline-flex;width:calc(50% - 6px);min-height:52px;margin:4px 2px;padding:9px;vertical-align:top;cursor:pointer;touch-action:manipulation}
  .tools>.block small{display:none}
  .tools hr,.tools h3:nth-of-type(2){display:none}
  .tools .tokens{margin-top:8px}
  .studio{order:1;min-width:0}
  .actions{position:sticky;bottom:70px;z-index:15;display:grid;grid-template-columns:1fr 1fr;background:var(--cream);padding:10px 0 4px;margin-top:8px}
  .actions button{min-height:46px}
  #chooseRecipients{grid-column:1/-1}
  .card{padding:18px}
  .table-card{padding:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-card table{min-width:660px}
  .table-head{align-items:stretch;gap:10px}
  .table-head input{width:min(48vw,240px)}
  dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto;border-radius:14px}
  dialog form{padding:20px}
  dialog input,dialog select{width:100%;min-height:46px;margin-bottom:10px;border:1px solid var(--line);padding:12px;border-radius:9px}
  .dialog-actions{position:sticky;bottom:-20px;background:#fff;padding:12px 0 4px}
  .recipient-list{max-height:45dvh}
  .recipient-list label{min-height:48px;align-items:center}
}
@media(max-width:600px){
  .auth-card{padding:26px 22px;border-radius:18px}
  .auth h1{margin-top:30px}
  aside>.brand{width:100%}
  .aside-bottom{width:100%;margin:0}
  .aside-bottom label{flex:1;max-width:none}
  header small{font-size:10px}
  .field-row{gap:8px}
  .field-row input,#templatePicker{min-height:46px}
  .canvas-shell{margin-left:-8px;margin-right:-8px;border-radius:9px}
  .canvas{width:100%;min-height:420px;margin:0;padding:14px;box-shadow:none}
  .empty{height:360px}
  .email-block{padding:18px 5px 8px;margin:14px 0}
  .actions{grid-template-columns:1fr}
  .actions button,#chooseRecipients{grid-column:1}
  .split{gap:14px}
  .account-card{gap:10px;align-items:flex-start}
  .account-card>div:last-child{display:grid;gap:4px}
  .table-head{flex-direction:column}
  .table-head input{width:100%}
  #toast{left:12px;right:12px;top:12px;text-align:center}
}
@media(hover:none),(pointer:coarse){
  .email-block .remove,.email-block .move-handle{display:block;min-width:32px;min-height:32px}
  .email-block .image-controls,.email-block .content-controls{display:flex!important;top:-12px!important}
  .email-block .image-controls button,.email-block .content-controls button{min-width:34px;min-height:32px;padding:4px 8px!important}
}