html, body { height: 100%; }
    body { margin: 0; }

    body{
      background:#a0a0a0; 
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      display:flex;
      justify-content:center;
      align-items:stretch;
    }

    .login-app{
      width: min(430px, 100vw);    
      min-height: 100vh;
      background:#f9f9f9;
      position:relative;
      display:flex;
      flex-direction:column;
    }

    .login-topbar{
      background:#8899aa;
      padding-top: env(safe-area-inset-top);
      height: calc(60px + env(safe-area-inset-top));
      display:flex;
      align-items:flex-end;
      transition: transform 0.3s ease-in-out;
    }
    .login-topbar.hide{
      transform: translateY(-100%);
    }
    .login-topbar-row{
      height:60px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 16px;
      width:100%;
    }
    .app-logo{
      width:40px;
      height:40px;
      object-fit:contain;
    }
    .app-text{
      color:#fff;
      font-size:17px;
      font-weight:500;
      flex:1;
      margin-left:12px;
      text-align:center;
    }
    .download-btn{
      width:28px;height:28px;
      display:grid;place-items:center;
      border:0;background:transparent;
      padding:0; cursor:pointer;
      color:#fff;
    }

    .login-content{
      padding: 0px 0px 96px; /* bottom space for nav */
      overflow-y:auto;
      max-height: calc(100vh - 48px - 96px);
    }

    .welcome-section{
      text-align:center;
      padding:20px 16px 12px;
      background:#f9f9f9;
    }
    .welcome-text{
      color:#0051ff;
      font-size:23px;
      font-weight:500;
      margin:0;
      line-height:1.2;
    }
    .welcome-subtitle{
      color: grey;
      font-size:11px;
      font-weight:390;
      margin:6px 0 0;
    }

    .search-section{
      padding:16px;
      background:#f9f9f9
      position:sticky;
      top:0;
      z-index:50;
    }
    .search-box-container{
      display:flex;
      align-items:center;
      background:#fff;
      border:1px solid #e0e0e0;
      border-radius:4px;
      padding:0 12px;
      height:44px;
      box-shadow:0 3px 5px rgba(0,0,0,.05);
    }
    .search-icon{
      width:18px;
      height:18px;
      color:#bbb;
      flex-shrink:0;
    }
    .search-input{
      flex:1;
      border:0;
      outline:none;
      text-align: center;
      background:transparent;
      font-size:15px;
      color:#333;
      font-family:Helvetica, Arial, sans-serif;
    }
    .search-input::placeholder{
      color:#bbb;
      font-size:15px;
    }

    .search-page{
      background:#f5f5f5;
      padding-top:0;
      margin-top:20px;
    }
    .search-grid{
      background:#f5f5f5;
      padding:16px;
      gap:16px;
      grid-template-columns:1fr 1fr;
    }
    .search-grid .product-card{
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 8px rgba(0,0,0,.08);
    }
    .search-grid .product-image{
      background:#f9f9f9;
    }

    .slider-container{
      width:100%;
      height:320px;
      background:#f5f5f5;
      overflow:hidden;
      position:relative;
    }
    .slider{
      display:flex;
      height:100%;
      animation: slide 16s infinite linear;
    }
    .slider-img{
      width:100%;
      height:100%;
      object-fit:cover;
      flex-shrink:0;
    }
    @keyframes slide{
      0%{ transform: translateX(0); }
      20%{ transform: translateX(0); }
      25%{ transform: translateX(-100%); }
      45%{ transform: translateX(-100%); }
      50%{ transform: translateX(-200%); }
      70%{ transform: translateX(-200%); }
      75%{ transform: translateX(-300%); }
      95%{ transform: translateX(-300%); }
      100%{ transform: translateX(-400%); }
    }

    .products-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      padding:16px;
    }

    .product-card{
      background:#fff;
      border-radius:8px;
      overflow:hidden;
      box-shadow:0 2px 8px rgba(0,0,0,.08);
      transition:transform 0.2s, box-shadow 0.2s;
    }
    .product-card:hover{
      transform:translateY(-4px);
      box-shadow:0 4px 12px rgba(0,0,0,.12);
    }

    .product-image{
      width:100%;
      height:160px;
      background:#f5f5f5;
      overflow:hidden;
    }
    .product-image img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .product-info{
      padding:12px;
      text-align:center;
    }
    .product-name{
      font-size:12px;
      line-height:1.5;
      color:#666666;
      margin:0 0 8px;
      font-weight:400;
      word-wrap:break-word;
      word-break:break-word;
      text-align:center;
    }
    .product-price{
      font-size:14px;
      font-weight:550;
      color:#f37b1d;
      margin:0;
      text-align:left;
    }

    .login-nav{
      position:fixed;
      left:0; right:0; bottom:0;
      background:#fff;
      border-top:1px solid rgba(0,0,0,.08);
      padding: 2px 12px calc(8px + env(safe-area-inset-bottom));
      width:min(430px, 100vw);
      margin:0 auto;
      box-sizing:border-box;
    }
    .login-tabs{
      display:flex;
      justify-content:space-around;
      align-items:flex-end;
    }
    .login-tab{
      width:90px;
      text-decoration:none;
      color:#9aa0a6;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:0px;
      font-size:12px;
      padding: 6px 0;
    }
    .login-tab svg{ width:22px; height:22px; }
    .login-tab.active{ color:#0b84ff; }

    .floating-actions{
      position:fixed;
      bottom:110px;
      right:16px;
      display:flex;
      flex-direction:column;
      gap:12px;
      z-index:100;
    }
    .floating-btn{
      width:48px;
      height:48px;
      border-radius:50%;
      border:0;
      font-size:20px;
      cursor:pointer;
      box-shadow:0 4px 12px rgba(0,0,0,.15);
      transition:transform 0.2s;
    }
    .floating-btn:hover{
      transform:scale(1.1);
    }
    .floating-btn.chat{
      background:#0b84ff;
      color:#fff;
    }
    .floating-btn.close{
      background:#ff4444;
      color:#fff;
      font-size:24px;
      font-weight:bold;
    }