/* ═══════════════════════════════════════
   MOBILE DEDICATED STYLES
   ═══════════════════════════════════════ */

/* Large Tablets & Below */
@media(max-width:1100px){
  /* Public Header Reset for Mobile */
  .public-header__inner{padding:10px 0; gap:16px}
  .public-nav-desktop{display:none !important}
  .public-menu-btn{display:flex !important; align-items:center; justify-content:center; width:36px; height:36px; font-size:1.1rem; background:var(--sf2); border:1px solid var(--line); border-radius:var(--r1); cursor:pointer}
  
  .brand strong{font-size:.95rem}
  .brand small{display:none}
  .brand__mark{width:34px; height:34px; font-size:.8rem}
  
  .public-nav-container{position:fixed; top:0; right:-100%; bottom:0; width:300px; background-color: #ffffff !important; opacity: 1 !important; flex-direction:column; align-items:stretch; padding:80px 24px 24px; border-right:1px solid var(--line); box-shadow: -10px 0 30px rgba(0,0,0,.15); display:flex !important; z-index:10001; transition:right .3s var(--ease)}
  .public-nav-container.show{right:0}
  
  .public-nav-overlay{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(15,23,42,.6); backdrop-filter:blur(4px); z-index:1000; display:none; opacity:0; transition:opacity .3s}
  .public-nav-overlay.show{display:block; opacity:1}
  
  .public-nav{flex-direction:column; width:100%; gap:12px; margin-bottom:24px; display: flex !important;}
  .public-nav a{display: block; width:100%; padding:14px 20px; background:var(--sf1); border:1px solid var(--line); border-radius:var(--r1); text-align:right; font-size: 1rem; color: var(--text)}
  
  .public-actions{flex-direction:column; width:100%; gap:12px; display: flex !important;}
  .public-actions .btn{width:100%; min-height:50px}
  
  .public-menu-close{position:absolute; top:12px; left:12px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--sf2); border:1px solid var(--line); border-radius:var(--r1); cursor:pointer; font-size:1rem; color:var(--text3)}
  
  /* Layout Adjustments */
  .hero-section{grid-template-columns:1fr;min-height:auto;padding:40px 0;gap:28px}
  .feature-grid,.steps-grid{grid-template-columns:repeat(2,1fr)}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .welcome-banner{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .welcome-banner-aside{text-align:right}
  
  .app-shell{display:block;width:100%;max-width:100vw;overflow-x:hidden}
  
  /* Off-canvas mobile sidebar */
  .app-sidebar{position:fixed;top:0;bottom:0;right:-280px;width:260px;height:100vh;z-index:9999;transition:right .3s var(--ease);box-shadow:-5px 0 25px rgba(0,0,0,.3);overflow-y:auto;padding-bottom:80px}
  .app-sidebar.show{right:0}
  
  /* Mobile Topbar & Overlay */
  .mobile-menu-btn{display:block !important; margin-left:12px; z-index:900}
  .app-shell::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
  .app-shell:has(.app-sidebar.show)::after{opacity:1;pointer-events:all}

  .app-section .stat-grid{grid-template-columns:repeat(2,1fr)}
  
  /* Tables horizontally scrollable */
  .table-list{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-row{min-width:600px}
}

/* Phones & Small Tablets */
@media(max-width:780px){
  /* Grids to 1 col */
  .feature-grid,.steps-grid,.grid-two,.grid-three,.form-row,.plan-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  
  /* Spacing */
  .app-content{padding:12px 8px}
  .app-topbar{padding:12px 16px;gap:8px}
  .app-topbar-search{flex:unset;width:40px;overflow:hidden;transition:all .3s}
  .app-topbar-search:focus-within{width:100%;flex:1}
  .app-topbar-search input{padding:8px;font-size:.85rem}
  
  /* Content formatting */
  .content-card{padding:16px;border-radius:12px}
  .page-title h1{font-size:1.6rem}
  .page-title p{font-size:.9rem}
  
  /* Tables completely stacked on narrow phones */
  .table-list{display:grid;gap:12px;overflow-x:hidden}
  .table-row{min-width:auto;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border:1px solid var(--bdr);border-radius:8px}
  .table-row > div:last-child{width:100%;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px dashed var(--bdr)}
  
  .section-block{margin-top:40px}
  .public-footer{margin-top:40px}
}

/* Small Phones */
@media(max-width:500px){
  .container{width:calc(100% - 24px)}
  .hero-copy h1{font-size:1.7rem;line-height:1.3}
  .hero-actions{flex-direction:column;gap:12px}
  .hero-actions .btn{width:100%}
  .stat-grid{grid-template-columns:1fr}
  .trust-bar{gap:14px;flex-wrap:wrap;justify-content:center}
  
  .app-topbar-profile{display:none} /* Hide profile name on very small screens, keep avatar */
  .app-topbar-right{gap:8px}
}