/* Mobile optimization — stacks nav/cards/grids, full-width inputs & buttons */
/* Reuses theme tokens: --bg #050508, --neon-cyan #00f3ff, --neon-gold #ffb700,
   --neon-pink #ff00aa, --line rgba(0,243,255,.28); fonts Inter/Righteous/VT323/Heebo */

*,*::before,*::after{box-sizing:border-box}
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;padding:10px;background:var(--neon-gold);color:var(--bg);z-index:10005;border-radius:8px;box-shadow:0 0 15px var(--neon-gold);font-weight:700;text-decoration:none}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe,canvas{max-width:100%;height:auto}
*{-webkit-tap-highlight-color:transparent}

/* === Tablet / large phone (<=768px) === */
@media (max-width:768px){
  .container{padding:12px}
  /* Nav collapses: logo + hamburger on the first row, full-width panel below. */
  .nav{flex-wrap:wrap;align-items:center;gap:10px}
  .nav-toggle{display:-webkit-flex;display:flex}
  /* Slide-in mobile menu from right with overlay */
  .nav-menu{position:fixed;top:0;right:0;z-index:300;width:300px;max-width:85vw;
    height:100vh;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;gap:12px;
    padding:76px 16px 24px;background:rgba(var(--bg-rgb),.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-left:1px solid var(--line);border-top:none;margin-top:0;
    -webkit-transform:translateX(100%);transform:translateX(100%);
    -webkit-transition:-webkit-transform .3s ease;transition:transform .3s ease;
    box-shadow:-4px 0 20px rgba(0,0,0,.5)}
  .nav-menu.open{-webkit-transform:translateX(0);transform:translateX(0)}
  .nav-menu::before{content:'';position:fixed;inset:0;z-index:-1;
    background:rgba(var(--bg-rgb),.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    opacity:0;pointer-events:none;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}
  .nav-menu.open::before{opacity:1;pointer-events:auto}
  .nav-links{flex-direction:column;align-items:stretch;gap:8px;width:100%}
  .nav-links .btn-outline{width:100%;min-width:0;font-size:15px;padding:12px 14px;min-height:44px;justify-content:flex-start}
  /* Dropdown panel becomes inline (no floating) inside the collapsed menu. */
  .nav-dropdown{width:100%}
  .nav-dropdown-toggle{width:100%;justify-content:flex-start;min-height:44px}
  .nav-dropdown-menu{position:static;width:100%;box-shadow:none;
    border-radius:8px;margin-top:4px;padding:10px}
  .nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto}
  .nav-dropdown-menu .btn-outline{width:100%;min-height:44px;justify-content:flex-start;padding:12px 14px}
  /* Meta cluster stacks full width; auth CTAs + logout = full-width tap targets. */
  .nav-meta{display:-webkit-flex;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}
  .nav-meta .btn-gold,.nav-meta .btn-outline{width:100%;min-height:44px;justify-content:center}
  .lang-switch{justify-content:center;margin-bottom:2px}
  .tier-badge{align-self:center;text-align:center}
  .card{padding:14px;margin:10px 0}
  .guides-grid{grid-template-columns:1fr;gap:12px}
  .cat-grid{grid-template-columns:1fr;gap:12px}
  .guide-card{width:100%}
  /* Guides category bar: left sidebar collapses to a horizontal scroll row
     above the grid (no vertical stretch, no overflow >=320px). */
  .guide-layout{flex-direction:column;gap:12px;margin-top:12px}
  .guide-cats{flex:0 0 auto;width:100%;max-height:none;overflow-x:auto;overflow-y:hidden;
    position:static;flex-direction:row;align-items:center;gap:8px;padding:10px}
  .guide-cats-title{display:none}
  .guide-cats-list{flex-direction:row;flex-wrap:nowrap;gap:8px;width:max-content}
  .guide-cat{width:auto;flex:0 0 auto;justify-content:center;white-space:nowrap}
  .asset-card{width:100%}
  .model-row{flex-direction:column;align-items:stretch;gap:10px}
  .model-row .btn-outline,.model-row .btn-gold{width:100%}
  input,textarea,select{width:100%;font-size:16px;min-height:44px;padding:10px 12px}
  .btn-gold,.btn-outline,.enter-btn{width:100%;font-size:16px;min-height:44px;padding:12px 16px}
  .footer-links{display:-webkit-flex;display:flex;flex-direction:column;gap:10px;align-items:center}
  .text-micro{margin-left:0}
  .loader-tagline{margin:8px 0;letter-spacing:.04em}
  .cat-card{min-height:64px}
  /* Post-login / generate / admin: tap targets + overflow safety.
     !important defeats JS inline styles (generate.js sets ff-view-btn min-height:36px,
     admin.js sets user/asset rows display:flex). */
  .ff-view-btn,.vp-btn{min-height:44px!important;padding:10px 14px!important}
  .admin-users .card,.admin-assets .card{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}
  .admin-users .card .admin-tier,.admin-assets .card button[data-asset]{width:100%!important}
  .sb-step{min-width:0}
  .settings-card,.keys-card,.about-card,.legal-card,.pricing-card{overflow-wrap:break-word;word-break:break-word}
  .pricing-table{table-layout:fixed;width:100%}
  .pricing-table th,.pricing-table td{overflow-wrap:break-word;word-break:break-word}
}

/* === Small phone (<=480px) === */
@media (max-width:480px){
  .container{padding:8px}
  .logo{font-size:18px;text-align:center}
  .nav-links{gap:6px}
  .nav-links .btn-outline{font-size:14px;padding:10px 12px}
  .card{padding:12px;margin:8px 0}
  .cat-grid{gap:10px}
  .guide-img{height:120px}
  .guide-head{font-size:15px}
  .text-potato{font-size:40px}
  .text-micro{font-size:20px;letter-spacing:12px}
  .potato-svg{width:100px;height:133px}
  .field{margin-bottom:12px}
  .field label{display:block;font-size:14px;margin-bottom:4px}
  .enter-btn{padding:14px 20px}
  .btn-gold,.btn-outline{padding:12px 16px}
  .footer{padding:20px 12px}
  .footer-links{gap:8px}
  .loader-tagline{font-size:13px;letter-spacing:.03em}
  /* Post-login injected content: no overflow, wrap long words */
  .about-card,.legal-card,.keys-card,.settings-card,.pricing-card{overflow-wrap:break-word;word-break:break-word}
  .pricing-table{table-layout:fixed;width:100%;font-size:12px}
  .pricing-table th,.pricing-table td{padding:8px 10px}
}

/* === Tiny phone (<=360px) — tighten balance, keep >=44px targets === */
@media (max-width:360px){
  .container{padding:6px}
  .card{padding:10px;margin:6px 0}
  .text-potato{font-size:34px}
  .text-micro{font-size:18px;letter-spacing:8px}
  .potato-svg{width:84px;height:112px}
  .logo{font-size:16px}
  .section-title{font-size:22px}
}