.mobile-tool-picker,.mobile-catalog-close,.mobile-catalog-backdrop{display:none}

@media(max-width:650px){
  .tools-page{width:100%;padding:14px 12px calc(116px + env(safe-area-inset-bottom,0px))}
  .tools-hero{display:none}
  .tools-hero:after{right:-72px;top:-76px;width:170px;height:170px}
  .tools-hero h1{margin:8px 0 10px;font-size:clamp(2rem,11vw,3.25rem);line-height:.94}
  .tools-hero>div>p:last-child{margin:0;font-size:.95rem;line-height:1.5}
  .tools-hero .eyebrow{font-size:.7rem}
  .tools-shell{display:block;margin-top:10px}

  .mobile-tool-picker{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:11px 12px 11px 16px;border:1px solid #55663a;border-radius:17px;background:linear-gradient(115deg,#182219,#11191d);color:#fff;text-align:left;box-shadow:0 14px 34px #0004;cursor:pointer}
  .mobile-tool-picker>span{display:grid;gap:3px;min-width:0;margin-right:auto}
  .mobile-tool-picker small{color:#84946b;font-size:.66rem;font-weight:900;letter-spacing:.13em}
  .mobile-tool-picker b{overflow:hidden;font-size:1rem;text-overflow:ellipsis;white-space:nowrap}
  .mobile-tool-picker>i{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:12px;background:var(--lime);color:#111}
  .mobile-tool-picker svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
  .mobile-tool-picker:active{transform:scale(.985)}

  .mobile-catalog-backdrop{position:fixed;z-index:1190;inset:0;display:block;background:#05090bc2;backdrop-filter:blur(5px);opacity:0;transition:opacity .25s}
  .mobile-catalog-backdrop[hidden]{display:none}
  .mobile-catalog-backdrop.is-visible{opacity:1}
  .tools-catalog{position:fixed!important;z-index:1200;inset:auto 0 0!important;width:100%;max-height:min(82dvh,760px)!important;overflow:hidden!important;border:1px solid #46565f!important;border-bottom:0!important;border-radius:26px 26px 0 0!important;background:#11191e;box-shadow:0 -22px 70px #000c!important;transform:translateY(calc(100% + 20px));visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s}
  .tools-catalog.is-mobile-open{transform:none;visibility:visible}
  .mobile-catalog-close{display:grid;width:100%;height:28px;place-items:center;border:0;background:transparent;cursor:pointer}
  .mobile-catalog-close span{width:42px;height:4px;border-radius:99px;background:#52616a}
  .tools-catalog>header{gap:10px;padding:4px 16px 14px}
  .tools-catalog>header>div>i{width:38px;height:38px}
  .tools-catalog>header>p{display:none}
  .tools-catalog>header b{font-size:1rem}
  .tools-catalog>header small{font-size:.63rem}
  .tools-catalog label{min-height:48px;margin-top:2px;padding:0 13px;border-radius:14px}
  .tools-catalog label input{font-size:1rem}
  .tools-catalog label kbd{display:none}
  .tools-catalog nav{display:block!important;max-height:calc(min(82dvh,760px) - 128px);padding:10px 12px calc(22px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
  .tool-group{margin-bottom:8px;border:1px solid #ffffff0d!important;border-radius:15px!important;background:#0c1216}
  .tool-group>summary{min-height:47px;padding:11px 12px;font-size:.7rem}
  .tools-catalog nav .tool-group button{min-height:58px;padding:8px 10px;border-radius:12px}
  .tools-catalog nav .tool-group button>i{width:40px;height:40px;border-radius:12px}
  .tools-catalog nav .tool-group button b{font-size:.88rem}
  .tools-catalog nav .tool-group button em{margin-top:3px;font-size:.72rem;line-height:1.25}
  .tool-favorite{width:38px!important;min-width:38px!important;height:38px!important}
  body.tools-mobile-drawer-open{overflow:hidden;touch-action:none}

  .tool-workspace{border-radius:20px!important;box-shadow:0 18px 45px #0005!important}
  .tool-workspace>header{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;min-height:0;padding:16px}
  .tool-workspace>header:has(.tool-heading-icon:empty){grid-template-columns:minmax(0,1fr)}
  .tool-workspace>header>.tool-heading-icon{width:44px;height:44px;border-radius:13px}
  .tool-workspace>header>.tool-heading-icon+div{min-width:0;margin:0}
  .tool-workspace h2{margin:3px 0 5px;font-size:1.55rem;line-height:1.08;letter-spacing:-.025em}
  .tool-workspace>header p{max-width:32rem;font-size:.86rem;line-height:1.45}
  .tool-workspace>header>.tool-usage,.tool-workspace>header>.tool-account-usage{grid-column:1/-1;width:100%;min-width:0!important;min-height:48px;justify-content:flex-start;border-radius:13px}
  .tool-workspace>header>.tool-usage{padding:8px 13px!important}
  .tool-workspace>header>.tool-usage>span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .tool-workspace>header>.tool-usage>span:before{width:100%;font-size:.55rem!important}
  .tool-workspace>header>.tool-usage b{font-size:.82rem!important}
  .tool-workspace>header>.tool-usage small{font-size:.68rem!important}
  .tool-stage{display:flex;min-height:0;flex-direction:column}
  .tool-upload{order:1;min-height:310px;padding:20px 16px;border-right:0;border-bottom:1px solid #34414a;touch-action:manipulation}
  .tool-upload [data-empty-preview]>i{width:64px;height:64px;margin-bottom:18px}
  .tool-upload [data-empty-preview] b{font-size:1.12rem}
  .tool-upload [data-empty-preview] span{max-width:240px;margin-top:8px;font-size:.9rem;line-height:1.4}
  .tool-upload [data-empty-preview] small{margin-top:12px;font-size:.7rem}
  .tool-upload canvas{max-height:52dvh}
  .tool-file-meta{font-size:.76rem}
  .tool-file-meta button{min-height:40px;padding:8px;color:#ff9aa7;font-size:.76rem}
  .tool-controls{order:2;max-height:none;gap:17px;padding:18px 16px 22px;overflow:visible}
  .tool-controls label{gap:9px;font-size:.82rem}
  .tool-controls label>span,.tool-controls label small{font-size:.72rem}
  .tool-controls select,.tool-controls input:not([type=range]){min-height:48px;padding:12px;font-size:1rem}
  .tool-controls input[type=range]{min-height:36px}
  .tool-control-row,.tool-color-pair,.tool-info-grid{grid-template-columns:1fr 1fr}
  .tool-control-buttons button,.tool-segments button,.tool-presets button{min-height:46px;font-size:.78rem}
  .tool-control-intro b{font-size:.88rem}.tool-control-intro small{font-size:.72rem}
  .tool-helper,.tool-note{font-size:.72rem!important;line-height:1.5}
  .tool-workspace>footer{position:relative;z-index:1;bottom:auto;padding:12px;border-top-color:#47565f;background:#10171b;box-shadow:none;backdrop-filter:none}
  .tool-workspace>footer>div{display:none}
  .tool-workspace>footer>button{width:100%;min-height:52px;font-size:.9rem}
}

@media(max-width:390px){
  .tools-page{padding-right:8px;padding-left:8px}
  .tools-hero{padding:19px 17px}
  .tool-control-row,.tool-color-pair,.tool-info-grid{grid-template-columns:1fr}
  .tool-upload{min-height:280px}
}

@media(prefers-reduced-motion:reduce){
  .tools-catalog,.mobile-catalog-backdrop,.mobile-tool-picker{transition:none!important}
}