* {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: Arial, sans-serif;
      background: #111;
      color: #222;
    }

    .app {
      width: 100%;
      max-width: 480px;
      height: 100dvh;
      margin: 0 auto;
      background: #fff;
      overflow: hidden;
      position: relative;
    }

    .welcome-screen {
      width: 100%;
      height: 100dvh;
      overflow: hidden;
      position: relative;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #fff;
      background:
        linear-gradient(180deg, rgba(35, 22, 12, .18), rgba(18, 10, 5, .88)),
        url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=900&auto=format&fit=crop");
      background-size: cover;
      background-position: center;
    }

    .welcome-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 25% 15%, rgba(255, 190, 110, .34), transparent 38%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 100%);
      z-index: 0;
      pointer-events: none;
    }

    .welcome-screen>* {
      position: relative;
      z-index: 2;
    }

    .top-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .restaurant-logo {
      width: 58px;
      height: 58px;
      border-radius: 18px;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, .75);
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    }

    .brand-text h1 {
      margin: 0;
      font-size: 21px;
      line-height: 1.1;
      font-weight: 900;
    }

    .brand-text span {
      font-size: 12px;
      opacity: .85;
    }

    .hero-content {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 12px;
    }

    .welcome-label {
      display: inline-block;
      width: fit-content;
      padding: 7px 12px;
      border-radius: 99px;
      background: rgba(255, 255, 255, .16);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-size: 12px;
      margin-bottom: 12px;
      border: 1px solid rgba(255, 255, 255, .18);
    }

    .hero-title {
      font-size: clamp(29px, 8vw, 38px);
      line-height: 1.05;
      margin: 0 0 10px;
      font-weight: 900;
      letter-spacing: -0.8px;
    }

    .hero-desc {
      font-size: 14px;
      line-height: 1.45;
      opacity: .92;
      margin: 0;
      max-width: 330px;
    }

    .sponsor-card {
      display: none;
      background: rgba(255, 255, 255, .15);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 22px;
      padding: 12px;
      margin-bottom: 12px;
      box-shadow: 0 16px 42px rgba(0, 0, 0, .22);
      cursor: pointer;
    }

    .sponsor-inner {
      display: flex;
      gap: 11px;
      align-items: center;
    }

    .sponsor-img {
      width: 62px;
      height: 62px;
      border-radius: 16px;
      object-fit: cover;
      flex-shrink: 0;
    }

    .sponsor-small {
      font-size: 10px;
      letter-spacing: .7px;
      opacity: .72;
      margin-bottom: 4px;
    }

    .sponsor-title {
      font-size: 14px;
      font-weight: 900;
      margin-bottom: 3px;
    }

    .sponsor-desc {
      font-size: 11px;
      line-height: 1.3;
      opacity: .86;
    }

    .action-panel {
      background: rgba(255, 255, 255, .94);
      border-radius: 26px;
      padding: 12px;
      box-shadow: 0 22px 60px rgba(0, 0, 0, .36);
    }

    .action-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .action-btn {
      border: none;
      border-radius: 20px;
      padding: 17px 8px;
      min-height: 58px;
      font-size: 16px;
      font-weight: 900;
      cursor: pointer;
    }

    .btn-menu {
      background: linear-gradient(135deg, #dba35a, #8c4d1f);
      color: #fff;
    }

    .btn-staff {
      background: #fff4e4;
      color: #7a4016;
      border: 1px solid #e8c891;
    }

    .menu-screen {
      display: none;
      height: 100dvh;
      overflow-y: auto;
      padding-bottom: 86px;
      background:
        linear-gradient(180deg, #fff8ee 0%, #ffffff 42%, #ffffff 100%);
      -webkit-overflow-scrolling: touch;
    }

    .menu-hero {
      position: relative;
      padding: 16px 16px 22px;
      color: #fff;
      background:
        linear-gradient(180deg, rgba(35, 22, 12, .34), rgba(80, 42, 14, .92)),
        url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=900&auto=format&fit=crop");
      background-size: cover;
      background-position: center;
      border-bottom-left-radius: 28px;
      border-bottom-right-radius: 28px;
      overflow: hidden;
    }

    .menu-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 20% 15%, rgba(255, 202, 126, .32), transparent 42%);
      pointer-events: none;
    }

    .menu-hero>* {
      position: relative;
      z-index: 2;
    }

    .menu-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .menu-logo {
      width: 54px;
      height: 54px;
      border-radius: 17px;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, .75);
      background: #fff;
      box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
    }

    .menu-brand h2 {
      margin: 0;
      font-size: 21px;
      font-weight: 900;
      line-height: 1.1;
    }

    .menu-brand span {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      opacity: .86;
    }

    .menu-title {
      margin: 0;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -0.7px;
    }

    .menu-subtitle {
      margin: 6px 0 0;
      font-size: 14px;
      opacity: .9;
      line-height: 1.4;
    }

    .menu-ad {
      margin: -14px 14px 14px;
      border-radius: 22px;
      background: rgba(255, 255, 255, .96);
      display: none;
      align-items: center;
      gap: 12px;
      padding: 11px;
      box-shadow: 0 14px 35px rgba(91, 49, 18, .16);
      position: relative;
      z-index: 3;
      cursor: pointer;
    }

    .menu-ad.bottom-sponsor {
      margin: 8px 14px 18px;
      border: 1px solid rgba(150, 96, 42, .12);
    }

    .menu-ad img {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      object-fit: cover;
    }

    .menu-ad small {
      display: block;
      font-size: 10px;
      letter-spacing: .6px;
      color: #a36a2f;
      font-weight: 900;
      margin-bottom: 4px;
    }

    .menu-ad strong {
      display: block;
      font-size: 15px;
      color: #2b1b10;
    }

    .menu-ad span {
      display: block;
      font-size: 12px;
      color: #73563d;
      margin-top: 4px;
      line-height: 1.35;
    }

    .categories {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 4px 14px 12px;
      background: transparent;
      position: sticky;
      top: 0;
      z-index: 5;
    }

    .categories::-webkit-scrollbar {
      display: none;
    }

    .category-btn {
      border: none;
      background: #f2e5d5;
      color: #6d3c17;
      padding: 10px 14px;
      border-radius: 22px;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }

    .category-btn.active {
      background: linear-gradient(135deg, #dba35a, #8c4d1f);
      color: #fff;
      box-shadow: 0 8px 20px rgba(140, 77, 31, .22);
    }

    .menu-list {
      padding: 0 14px 14px;
    }

    .product-card {
      display: flex;
      gap: 12px;
      padding: 12px;
      margin-bottom: 10px;
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(70, 38, 16, .08);
      border: 1px solid rgba(150, 96, 42, .08);
    }

    .product-image {
      width: 88px;
      height: 88px;
      border-radius: 18px;
      object-fit: cover;
      background: #ddd;
      flex-shrink: 0;
    }

    .product-name {
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 5px;
      color: #25170d;
    }

    .product-desc {
      color: #735f4a;
      font-size: 13px;
      line-height: 1.4;
      margin-bottom: 8px;
    }

    .product-price {
      color: #9b5c22;
      font-size: 16px;
      font-weight: 900;
    }

    .bottom-bar {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid rgba(150, 96, 42, .14);
      padding: 12px;
      z-index: 50;
    }

    .bottom-inner {
      max-width: 480px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .bottom-btn {
      border: none;
      border-radius: 16px;
      padding: 14px;
      font-weight: 900;
      cursor: pointer;
    }

    .bottom-home {
      background: #f2e5d5;
      color: #6d3c17;
    }

    .bottom-staff {
      background: linear-gradient(135deg, #dba35a, #8c4d1f);
      color: #fff;
    }

    .toast {
      display: none;
      position: fixed;
      left: 50%;
      bottom: 90px;
      transform: translateX(-50%);
      background: #222;
      color: #fff;
      padding: 12px 18px;
      border-radius: 12px;
      font-size: 14px;
      z-index: 1000;
    }

    .sponsor-popup {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(0, 0, 0, .64);
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    .sponsor-popup-box {
      width: 100%;
      max-width: 420px;
      background: #fff;
      border-radius: 26px;
      padding: 16px;
      position: relative;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
    }

    .sponsor-popup-close {
      position: absolute;
      right: 14px;
      top: 12px;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 50%;
      background: rgba(0, 0, 0, .65);
      color: #fff;
      font-size: 24px;
      cursor: pointer;
      z-index: 2;
    }

    .popup-sponsor-image {
      width: 100%;
      height: 210px;
      object-fit: cover;
      border-radius: 20px;
      background: #eee;
    }

    .popup-sponsored-label {
      margin-top: 12px;
      font-size: 10px;
      letter-spacing: .8px;
      font-weight: 900;
      color: #a36a2f;
    }

    .sponsor-popup-box h3 {
      margin: 6px 0 6px;
      font-size: 22px;
      color: #24160c;
    }

    .sponsor-popup-box p {
      margin: 0;
      font-size: 14px;
      color: #6b5440;
      line-height: 1.45;
      white-space: pre-line;
    }

    .popup-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      margin-top: 14px;
    }

    .popup-action-btn {
      display: block;
      text-align: center;
      text-decoration: none;
      border: none;
      border-radius: 16px;
      padding: 13px;
      font-size: 14px;
      font-weight: 900;
      color: #fff;
      background: linear-gradient(135deg, #dba35a, #8c4d1f);
      cursor: pointer;
    }

    .popup-action-secondary {
      background: #f2e5d5;
      color: #6d3c17;
    }

    .popup-waiter-note {
      padding: 10px 12px;
      border-radius: 16px;
      background: #fff4e4;
      color: #704119;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 10px;
    }