/* Web / PWA additions: phone and tablet layout on top of the desktop styles. */
html.web .local-pill i{background:#2fbf71}
html.no-folder .add-folder{display:none!important}
.web-note{font-size:11px;line-height:1.6;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:10px 12px;margin:6px 0 14px}
.web-hidden{display:none!important}
@media (max-width:1150px) and (min-width:821px){body{min-width:0}}
@media (max-width:820px){
  html{font-size:15px;-webkit-text-size-adjust:100%}
  body{min-width:0!important;overflow-x:hidden}
  .ambient{display:none}
  .shell{display:block!important;padding:max(10px,env(safe-area-inset-top)) 10px 0!important}
  main{padding:0 0 calc(86px + env(safe-area-inset-bottom))!important}
  .sidebar{position:fixed!important;z-index:30;left:0;right:0;bottom:0;top:auto!important;height:auto!important;border-radius:20px 20px 0 0!important;
    flex-direction:row!important;align-items:stretch;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom))!important;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;box-shadow:0 -8px 28px #0718312e}
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar .brand,.sidebar .nav-label,.sidebar .small-glass,.sidebar .version,.nav-arrow,.new-badge{display:none!important}
  .sidebar nav{display:flex;flex:1 0 auto;gap:2px}
  .sidebar-bottom{display:flex;margin:0!important;gap:2px}
  .nav{flex-direction:column;justify-content:center;gap:3px!important;width:auto!important;min-width:58px;flex:1 0 58px;margin:0!important;padding:7px 3px!important;
    font-size:9.5px!important;line-height:1.1;text-align:center!important;border-radius:12px!important;white-space:normal}
  .nav .nav-icon{font-size:17px;margin:0!important}
  .topbar{height:auto!important;padding:4px 2px 0;gap:8px}
  .breadcrumb{font-size:12px}
  .local-pill{font-size:10px}
  .page-head{min-height:0!important;padding:10px 2px 14px!important}
  .page-head h1{font-size:24px!important;line-height:1.15;margin:4px 0 6px!important}
  .page-head .eyebrow{font-size:9px}
  .hero-symbol{display:none!important}
  .workflow-grid,.split-grid,.settings-grid,.dupes-grid{grid-template-columns:1fr!important;gap:12px!important}
  .filters-card,.output-card,.dnc-card{grid-column:auto!important}
  .filter-columns{grid-template-columns:1fr!important}
  .filter-columns>div+div{padding:16px 0 0!important;border:0!important;border-top:1px solid var(--line)!important}
  .card{padding:16px!important;border-radius:18px!important}
  .card-head{margin-bottom:14px!important}
  .file-zone{padding:18px 12px!important}
  .split-grid .file-zone{min-height:0!important}
  .button-row{flex-wrap:wrap}
  .button{min-height:44px}
  .chip,.text-button{min-height:34px}
  input,select,textarea{font-size:16px!important}
  .state-chips{max-height:120px}
  .action-bar{bottom:calc(78px + env(safe-area-inset-bottom))!important;margin:12px 0!important;padding:10px 12px!important;gap:10px!important}
  .action-bar .button.large{padding:12px 16px;font-size:13px;white-space:nowrap}
  .filter-footer{flex-wrap:wrap}
  .pending-bar{flex-wrap:wrap}
  .pending-bar>div{flex-basis:100%}
  footer{flex-direction:column;gap:4px;padding-bottom:8px}
  dialog{width:calc(100vw - 16px)!important;max-width:none!important;max-height:calc(100dvh - 24px)!important;padding:18px!important;border-radius:18px!important}
  .metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .metric strong{font-size:18px!important}
  .download-choice{flex-direction:column}
  .result-actions{flex-wrap:wrap;gap:10px!important}
  .result-file{flex-wrap:wrap;gap:6px}
  .table-wrap{max-height:55vh}
  .file-row{flex-wrap:nowrap}
  .file-info{min-width:0;flex:1}
  .file-info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:480px){
  .two-col,.duration-input{grid-template-columns:1fr!important}
  .split-visual{font-size:19px!important;padding:14px 8px!important}
  .input-mode{gap:10px!important}
}