body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
  
  .slideshow {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .slideshow li {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: imageAnimation 25s linear infinite 0s;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .slideshow li:nth-child(1) { 
    background-image: url('https://images.unsplash.com/photo-1568649929103-28ffbefaca1e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    animation-delay: 1s; 
  }
  .slideshow li:nth-child(2) { 
    background-image: url('https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    animation-delay: 6s; 
  }
  .slideshow li:nth-child(3) { 
    background-image: url('https://images.unsplash.com/photo-1461023058943-07fcbe16d735?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    animation-delay: 11s; 
  }
  .slideshow li:nth-child(4) { 
    background-image: url('https://images.unsplash.com/photo-1497935586351-b67a49e012bf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    animation-delay: 16s; 
  }
  .slideshow li:nth-child(5) { 
    background-image: url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    animation-delay: 21s; 
  }
  
  @keyframes imageAnimation { 
    0% {
      opacity: 0;
      animation-timing-function: ease-in;
    }
    8% {
      opacity: 1;
      animation-timing-function: ease-out;
    }
    17% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
    :root {
      --bg: #0f0a07;
      --bg-soft: #1a120e;
      --surface: #1f1712;
      --surface-2: #2a201a;
      --text: #f7efe8;
      --muted: #c8b9ad;
      --primary: #d79a62;   /* latte/caramel */
      --primary-600: #c6844a;
      --accent: #8b5e34;    /* roast brown */
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --ring: 0 0 0 3px rgba(215,154,98,.25);
      --blur: saturate(140%) blur(8px);
    }
    [data-theme="light"] {
      --bg: #faf6f2;
      --bg-soft: #fff9f5;
      --surface: #ffffff;
      --surface-2: #fff3ea;
      --text: #2d2000;
      --muted: #6b5a4a;
      --primary: #b86e36;
      --primary-600: #9e5d2f;
      --accent: #7a4a25;
      --shadow: 0 10px 30px rgba(155, 100, 60, .18);
      --ring: 0 0 0 3px rgba(184,110,54,.22);
    }

    /* Reset + base */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 10% -10%, rgba(215,154,98,.18), transparent 60%),
        radial-gradient(1000px 500px at 90% 10%, rgba(139,94,52,.18), transparent 60%),
        var(--bg);
      line-height:1.5;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button{font:inherit}

    .container{max-width:1200px; margin-inline:auto; padding-inline:20px}

    /* Header */
    .header{
      position:sticky; top:0; z-index:50;
      backdrop-filter: var(--blur);
      background: linear-gradient(to bottom, rgba(20,12,8,.75), rgba(20,12,8,.4));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;
    }
    .brand{
      display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px
    }
    .brand .logo{
      width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
      background: radial-gradient(80% 80% at 30% 20%, #ffd7a8, transparent 60%), var(--primary);
      color:#2a1607; box-shadow: var(--shadow);
    }
    .brand .title{font-size:1.15rem}
    .nav-actions{display:flex; align-items:center; gap:10px}
    .theme-toggle, .icon-btn{
      border:1px solid rgba(255,255,255,.08);
      background:var(--surface); color:var(--text);
      padding:10px 12px; border-radius:14px; cursor:pointer;
      display:inline-flex; align-items:center; gap:8px;
      box-shadow: var(--shadow); transition: transform .2s ease, background .2s ease;
    }
    .theme-toggle:hover, .icon-btn:hover{ transform: translateY(-2px) }
    .cart-badge{
      position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; border-radius:9px;
      background:var(--primary); color:#1a0f08; font-size:12px; font-weight:800;
      display:grid; place-items:center; border:2px solid var(--surface);
    }
    .nav-links{
      display:flex; align-items:center; gap:18px; list-style:none; padding:0; margin:0;
    }
    .nav-link{
      padding:8px 12px; border-radius:12px; color:var(--muted);
      transition:background .2s ease, color .2s ease, transform .2s ease;
    }
    .nav-link:hover{ background:rgba(255,255,255,.06); color:var(--text); transform:translateY(-1px)}
    .active-link{ color:var(--text); background:rgba(255,255,255,.09)}

    /* Mobile menu */
    .hamburger{display:none}
    @media (max-width: 900px){
      .nav-links{display:none}
      .hamburger{display:inline-flex}
      .drawer{
        position:fixed; inset:0 0 0 auto; width:min(82%, 360px); background:var(--surface);
        transform:translateX(110%); transition:transform .3s ease; z-index:60;
        box-shadow:-30px 0 60px rgba(0,0,0,.35);
        display:flex; flex-direction:column; padding:20px 18px; gap:10px
      }
      .drawer.open{ transform:translateX(0) }
      .drawer a{ padding:14px; border-radius:12px; color:var(--text)}
      .drawer a:hover{ background:rgba(255,255,255,.06)}
      .drawer .sep{ height:1px; background:rgba(255,255,255,.08); margin:10px 0}
      .drawer-close{
        align-self:flex-end; background:transparent; border:none; font-size:24px; color:var(--muted); cursor:pointer
      }
    }

    /* Hero with parallax */
    .hero{
      position:relative; overflow:hidden; border-radius: calc(var(--radius) + 6px);
      margin-top:18px; padding: 100px 0; text-align:center;
      background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%23c68a53"/><stop offset="1" stop-color="%23845734"/></linearGradient></defs><rect width="100%" height="100%" fill="url(%23g)"/></svg>') center/cover fixed;
      box-shadow: var(--shadow); isolation:isolate;
    }
    .hero::after{
      content:""; position:absolute; inset:auto 0 0 0; height:160px;
      background: linear-gradient(to bottom, transparent, var(--bg));
      z-index:-1;
    }
    .hero h1{
      font-size: clamp(2.2rem, 5vw, 3.8rem); margin:0 0 10px; letter-spacing:.5px
    }
    .hero p{ color:var(--muted); font-size: clamp(1rem, 2.3vw, 1.2rem); margin-bottom:22px}
    .cta{
      display:inline-flex; align-items:center; gap:10px; padding:12px 18px;
      border-radius:14px; background: linear-gradient(135deg, var(--primary), var(--primary-600));
      color:#1a0f08; font-weight:800; border:none; cursor:pointer; box-shadow: var(--shadow);
      transition: transform .2s ease;
    }
    .cta:hover{ transform: translateY(-2px)}
    .subcta{ margin-left:10px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:var(--surface); color:var(--text)}

    /* Pages */
    .main{ padding: 14px 0 60px }
    .page{ display:none; animation: fade .35s ease}
    .page.active{ display:block }
    @keyframes fade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

    /* Cards & grid */
    .section-title{ font-size:1.9rem; margin:24px 0 6px }
    .muted{ color:var(--muted) }
    .grid{
      display:grid; gap:18px;
      grid-template-columns: repeat(12, 1fr);
    }
    .col-12{ grid-column: span 12 }
    .col-6{ grid-column: span 6 }
    .col-4{ grid-column: span 4 }
    .col-3{ grid-column: span 3 }
    @media (max-width: 1000px){ .col-3{grid-column: span 4} .col-4{grid-column: span 6} }
    @media (max-width: 700px){ .col-6,.col-4,.col-3{grid-column: span 12} }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
      padding:16px; box-shadow: var(--shadow); backdrop-filter: var(--blur);
    }

    /* Menu items */
    .menu-grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top:12px }
    .menu-item{
      position:relative; overflow:hidden; padding:16px; border-radius:16px; background:var(--surface);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      border:1px solid rgba(255,255,255,.08);
    }
    .menu-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow) }
    .menu-head{ display:flex; align-items:start; justify-content:space-between; gap:12px }
    .menu-name{ font-weight:800; letter-spacing:.2px }
    .badge{
      font-size:.75rem; background: rgba(215,154,98,.18); color: var(--primary);
      border:1px dashed var(--primary); padding:4px 8px; border-radius:10px; white-space:nowrap
    }
    .menu-desc{ color:var(--muted); margin:8px 0 12px; min-height:48px }
    .price{ font-weight:900 }
    .menu-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px }
    .qty{
      display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.08);
      border-radius:12px; padding:6px 10px; background:var(--surface-2)
    }
    .qty button{ background:transparent; border:none; color:var(--text); font-size:18px; cursor:pointer }
    .add-btn{
      display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
      border:1px solid rgba(255,255,255,.1); background:linear-gradient(135deg, var(--primary), var(--primary-600));
      color:#1a0f08; font-weight:800; cursor:pointer
    }

    /* Auth + Dashboard */
    .auth, .dashboard{ max-width:880px; margin:18px auto }
    .form{
      display:grid; gap:12px; grid-template-columns: repeat(12, 1fr);
    }
    .field{ grid-column: span 12 }
    .field.half{ grid-column: span 6 }
    .label{ display:block; margin:2px 0 6px; color:var(--muted); font-weight:700; font-size:.92rem }
    input, select{
      width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
      background:var(--surface-2); color:var(--text)
    }
    input:focus, select:focus{ outline:none; box-shadow: var(--ring) }
    .btn{
      display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
      background:var(--surface); color:var(--text); cursor:pointer
    }
    .btn.primary{ background: linear-gradient(135deg, var(--primary), var(--primary-600)); color:#1a0f08; font-weight:800 }
    .inline-link{ color:var(--primary); font-weight:800; text-decoration:underline dotted }
    .pill{ padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.06); font-weight:700 }

    /* Cart drawer */
    .cart{
      position:fixed; inset:0 0 0 auto; width:min(92%, 420px); background:var(--surface); transform:translateX(110%);
      transition: transform .3s ease; z-index:70; box-shadow: -40px 0 80px rgba(0,0,0,.5); display:flex; flex-direction:column;
    }
    .cart.open{ transform:translateX(0) }
    .cart-head{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(255,255,255,.06) }
    .cart-items{ padding:14px; display:flex; flex-direction:column; gap:12px; overflow:auto }
    .cart-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-2); padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08) }
    .cart-foot{ padding:14px; border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent) }
    .total{ display:flex; align-items:center; justify-content:space-between; font-weight:900; margin-bottom:10px }
    .checkout{ width:100%; padding:12px; border-radius:12px; background: linear-gradient(135deg, var(--primary), var(--primary-600)); border:none; color:#1a0f08; font-weight:900; cursor:pointer }

    /* Footer */
    .footer{ color:var(--muted); text-align:center; padding:30px 0 50px }

    /* Utility */
    .hide{ display:none !important }
    .spacer{ height:8px }
    .w-full{ width:100% }