:root{
    --bg:#0b0b0f;
    --card:#121218;
    --soft:#181820;
    --line:#1f1f2b;
  
    --text:#f5f5f7;
    --muted:#a1a1aa;
  
    --gold:#d4af37;
    --gold2:#f5d76e;
  
    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;
  }
  
  *{box-sizing:border-box}
  html,body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  }
  
  a{color:inherit;text-decoration:none}
  
  .container{
    max-width:1080px;
    margin:0 auto;
    padding:16px;
    position:relative;
    z-index:1;
    padding-bottom:100px;
  }
  
  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
  }
  
  .soft{
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px;
  }
  
  /* ================= HEADER ================= */
  .topbar{
    position:sticky;
    top:0;
    background:rgba(11,11,15,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    z-index:100;
  }
  .topbar .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    gap:12px;
  }
  
  .brand{
    font-weight:900;
    letter-spacing:.5px;
    color:var(--gold);
  }
  
  .badge{
    font-size:12px;
    color:var(--muted);
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 10px;
  }
  
  /* ================= TYPO ================= */
  .h1{font-size:18px;font-weight:800;margin:0 0 10px}
  .h2{font-size:13px;color:var(--muted);margin:0}
  .small{font-size:12px;color:var(--muted)}
  .hr{height:1px;background:var(--line);margin:14px 0}
  
  /* ================= FORM ================= */
  .inp,
  input,
  select,
  textarea{
    width:100%;
    background:#0f1016;
    border:1px solid var(--line);
    color:var(--text);
    border-radius:14px;
    padding:12px 12px;
    font-size:14px;
  }
  
  textarea{
    min-height:90px;
    resize:vertical;
  }
  
  select{
    appearance:none;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23d4af37" d="M8 11L3 6h10z"/></svg>');
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:40px;
    cursor:pointer;
  }
  
  select:focus,
  input:focus,
  textarea:focus{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }
  
  /* ================= BUTTON ================= */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:14px;
    padding:12px 14px;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
  }
  
  .btn-gold{
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:#111;
  }
  
  .btn-outline{
    background:transparent;
    border:1px solid var(--line);
    color:var(--text);
  }
  
  .btn-danger{
    background:var(--danger);
    color:#fff;
  }
  
  .btn:disabled{
    opacity:.6;
    cursor:not-allowed;
  }
  
  /* ================= GRID ================= */
  .grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  @media(min-width:860px){
    .grid{grid-template-columns:340px 1fr}
  }
  
  /* ================= MENU ================= */
  .menu-item{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:14px;
    border-radius:16px;
    background:#0f1016;
    border:1px solid var(--line);
  }
  
  .menu-left{
    display:flex;
    gap:12px;
    align-items:flex-start;
  }
  
  .pic{
    width:72px;
    height:72px;
    border-radius:16px;
    background:#15182a;
    border:1px solid var(--line);
    overflow:hidden;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  .pic img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  .title{font-weight:900}
  .desc{
    font-size:12px;
    color:var(--muted);
    margin-top:3px;
    max-width:54ch;
  }
  
  .pill{
    display:inline-block;
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
    border:1px solid var(--line);
    padding:6px 10px;
    border-radius:999px;
  }
  
  .price{
    color:var(--gold2);
    font-weight:900;
  }
  
  /* ================= TOTAL ================= */
  .kv{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin:8px 0;
  }
  .kv .k{color:var(--muted)}
  .kv .v{font-weight:900}
  
  .total{
    font-size:18px;
    font-weight:1000;
    color:var(--gold2);
  }
  
  /* ================= CART BAR ================= */
  .cartbar{
    position:sticky;
    bottom:0;
    background:rgba(11,11,15,.95);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    z-index:200;
  }
  
  /* ================= TABLE ================= */
  .table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
  }
  .table th{
    font-size:12px;
    color:var(--muted);
    text-align:left;
    padding:0 10px;
  }
  .table td{
    background:#0f1016;
    border:1px solid var(--line);
    padding:12px 10px;
  }
  .table tr td:first-child{border-radius:14px 0 0 14px}
  .table tr td:last-child{border-radius:0 14px 14px 0}
  
  /* ================= QTY ================= */
  .qtybtn{
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--text);
    font-weight:900;
    cursor:pointer;
  }
  /* ===== Cart Floating Button ===== */
.cart-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,.9);
  background: #111827;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 14px 30px rgba(17,24,39,.22);
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.cart-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(17,24,39,.28);
}
.cart-fab:active{
  transform: translateY(0px) scale(.99);
}

.cart-fab .icon{
  width: 18px;
  height: 18px;
  display:inline-block;
  opacity: .95;
}
.cart-fab .label{
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.cart-fab .sub{
  display:block;
  font-size: 11px;
  font-weight: 800;
  opacity: .75;
  margin-top: 3px;
  letter-spacing: 0;
}

.cart-fab .badge{
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f59e0b; /* gold-ish */
  color: #111827;
  font-size: 12px;
  font-weight: 950;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 0 3px rgba(245,158,11,.22);
}

.cart-fab.is-empty{
  opacity: .7;
  background: #0b1220;
}
.cart-fab.is-empty .badge{
  background: #e5e7eb;
  box-shadow: none;
}

/* safe area for iPhone */
@supports (padding: max(0px)){
  .cart-fab{
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* hide on print */
@media print{
  .cart-fab{ display:none !important; }
}