:root {
  --bg:#f6f7fb;
  --panel:#fff;
  --text:#172033;
  --muted:#6c7485;
  --line:#e6e9f1;
  --accent:#1f7a5c;
  --accent2:#145c45;
  --danger:#b42318;
  --shadow:0 18px 45px rgba(20,30,55,.08);
  --radius:22px;
  --radius-small:16px;
}

*{box-sizing:border-box}

html,
body{
    touch-action: manipulation;
}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

button,a.ghost{
  border:0;
  border-radius:var(--radius-small);
  padding:12px 14px;
  font-weight:800;
  font-size:.95rem;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

button:active{transform:scale(.98)}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:10px 18px;
}

h1,h2{margin:0}
h1{font-size:1.35rem}
h2{font-size:1.05rem}

.topbar p,
.hint {
    color: var(--muted);
    margin: .25rem 0 0;
}

.hint {
    font-size: 0.75rem;
    font-weight: 500;
}

.top-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ghost{
  background:#eef2f7;
  color:var(--text);
}

.layout{
  height:calc(100vh - 64px);
  display:grid;
  grid-template-columns:260px 1fr;
  gap:14px;
  padding:0 18px 14px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:14px;
}

.panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.products-panel{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;

  overflow-y:auto;
  overflow-x:hidden;

  /* flex:1; */
  min-height:0;

  padding-right:4px;
}

.product-card{
  min-height:72px;
  background:linear-gradient(180deg,#fff,#f7faf8);
  border:2px solid #dce9e3;
  color:var(--text);
  box-shadow:0 10px 22px rgba(31,122,92,.08);
  flex-direction:row;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
}

.product-card span{
  font-size:.95rem;
  text-align:left;
}

.product-card strong{
  font-size:1.15rem;
  color:var(--accent);
  white-space:nowrap;
}

.cart-panel{
    display:grid;
    grid-template-columns:1fr 260px;
    grid-template-areas:
      "head head"
      "cart pay"
      "cart pay"
      "total pay"
      "message pay";
    gap:10px 14px;
    align-self:start;
}

.cart-panel .panel-head{grid-area:head}
.cart-items{grid-area:cart}
.total-box{grid-area:total}
.message{grid-area:message}

.payment-grid,
.field,
.change-box,
.checkout{
  grid-column:2;
}

.payment-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.payment-grid button{
  background:#eef5f1;
  padding:12px 8px;
}

.field{
  display:block;
  margin-top:0;
}

.field span{
  display:block;
  color:var(--muted);
  font-weight:700;
  margin-bottom:6px;
}

input,select{
  width:100%;
  border:2px solid var(--line);
  border-radius:var(--radius-small);
  padding:12px 14px;
  font-size:1.35rem;
  font-weight:900;
  background:#fff;
  text-align:right;
  margin-bottom:6px;
}

input:focus,select:focus{
  outline:3px solid rgba(31,122,92,.15);
  border-color:var(--accent);
}

.numpad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:8px;
}

.numpad button{
  background:#eef5f1;
  font-size:1.35rem;
  padding:13px 8px;
  border-radius:var(--radius-small);
}

.small{
  padding:8px 10px;
  font-size:.85rem;
  background:#edf1f6;
  color:var(--text);
}

.danger{
  color:var(--danger);
  background:#fff0ee;
}

.cart-items{
  display:flex;
  flex-direction:column;
  gap:8px;

}

.empty{
  align-items:center;
  justify-content:center;
  border:2px dashed var(--line);
  border-radius:var(--radius-small);
  color:var(--muted);
}

.cart-row{
  display:grid;
  grid-template-columns:1fr auto 80px;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-small);
  background:#fbfcff;
}

.cart-row small{
  display:block;
  color:var(--muted);
  margin-top:2px;
  font-size:.8rem;
}

.qty-actions{
  display:flex;
  align-items:center;
  gap:5px;
}

.qty-actions button{
  width:34px;
  height:34px;
  padding:0;
  background:#edf5f1;
}

.qty-actions span{
  min-width:20px;
  text-align:center;
  font-weight:900;
}

.change-box{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:0;
  padding:10px 12px;
  border-radius:var(--radius-small);
  background:#f4f7fb;
}

.total-box{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:0;
  padding:10px 12px;
  border-radius:var(--radius-small);
  background:#f4f7fb;
  gap:8px;
}

.total-box strong{
  font-size:1.9rem;
}

.change-box strong{
  font-size:1.55rem;
  color:var(--accent);
}

.tip-buttons{
  display:flex;
  gap:6px;
}

.tip-buttons button{
  padding:7px 9px;
  background:#eef5f1;
  color:--var(--accent);
  font-size:.85rem;
  font-weight:800;
}

.tip-cart-row{
  background:#fff6e5;
  border-color:#f2c96b;
}

.tip-cart-row strong{
  color:--var(--accent);
}

.food{
  font-weight:700;
}

.tip{
  font-style:italic;
  color:--var(--accent);
}

.given{
  color:--var(--success);
  font-weight:700;
}

.change{
  color:--var(--danger);
  font-weight:700;
}

.total{
  font-weight:900;
}


.checkout{
  width:100%;
  margin-top:0;
  background:var(--accent);
  color:#fff;
  font-size:1.25rem;
  padding:16px;
}

.checkout:hover{background:var(--accent2)}

.message{
  min-height:22px;
  margin-top:0;
  font-weight:800;
}

.message.ok{color:var(--accent)}
.message.error{color:var(--danger)}

.stats-panel{
  display:none;
}

.report-body{
  background:#eef2f7;
  overflow:auto;
}

.report-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:20px;
}

.report{
  max-width:900px;
  margin:0 auto 40px;
  background:#fff;
  padding:34px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.report-kpis{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:20px 0;
}

.report-kpis div{
  padding:16px;
  border-radius:var(--radius-small);
  background:#f7f9fc;
}

.report-kpis span{
  display:block;
  color:var(--muted);
  font-weight:700;
}

.report-kpis strong{
  font-size:1.6rem;
}

table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0 24px;
}

th,td{
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:10px;
}

th{background:#f7f9fc}

@media(max-width:980px){
  body{overflow:auto}

  .layout{
    height:auto;
    grid-template-columns:1fr;
  }

  .product-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .cart-panel{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "cart"
      "total"
      "pay"
      "message";
    height:auto;
  }

  .payment-grid,
  .field,
  .change-box,
  .checkout{
    grid-column:auto;
  }
}

@media(max-width:560px){
  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .product-grid{
    grid-template-columns:1fr 1fr;
  }

  .product-card{
    min-height:90px;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .cart-row{
    grid-template-columns:1fr;
  }
}

@media print{
  .no-print,.report-actions{display:none!important}
  body{background:#fff;overflow:auto}
  .report{
    box-shadow:none;
    margin:0;
    max-width:none;
    border-radius:0;
  }
  button{display:none}
}

.header-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.header-logo{
    height:48px;
    width:auto;
    object-fit:contain;
}

.header-brand h1{
    margin:0;
    line-height:1.1;
}

.header-brand p{
    margin:2px 0 0;
}

.header-brand{
    display:flex;
    align-items:center;
    gap:16px;
}

.header-info{
    display:flex;
    flex-direction:column;
}

.clock{
    margin-left:20px;
    font-size:2rem;
    font-weight:800;
    line-height:1;
    color:var(--accent);
    white-space:nowrap;
}



body.dark {
  --bg:#111827;
  --panel:#1f2937;
  --text:#f9fafb;
  --muted:#9ca3af;
  --line:#374151;
  --accent:#ef4444;
  --accent2:#dc2626;
}
body.dark .product-card,
body.dark input,
body.dark .cart-row{
  background:#111827;
  color:var(--text);
}

body.dark .ghost,
body.dark .small,
body.dark .payment-grid button,
body.dark .numpad button,
body.dark .tip-buttons button,
body.dark .qty-actions button{
  background:#374151;
  color:var(--text);
}
#darkModeBtn{
    width:48px;
    height:48px;
    padding:0;
    font-size:1.4rem;
}

.back-btn{
    background:var(--accent);
    color:#fff !important;
    font-weight:700;
    min-height:44px;
}

.back-btn:hover{
    background:var(--accent2);
}

body.dark .total-box{
    color:var(--bg);
}

body.dark .change-box{
    color:var(--accent);
}

body.dark .total-box strong{
    color:var(--bg);
}
body.dark .change-box strong{
    color:var(--accent);
}

.clock{
    cursor:pointer;
    user-select:none;
}
.clock:hover{
    opacity:.8;
}

.blue-light{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  display:none;
  background:
    linear-gradient(
      0deg,
      #0030a0 0%,
      #002880 25%,
      #001f60 55%,
      rgba(0,15,50,.25) 100%
    );
}
.blue-light.active{
  display:block;
  animation:blueFlash .18s infinite alternate;
}

@keyframes blueFlash{
  from{
    opacity:.25;
    filter:brightness(1);
  }
  to{
    opacity:.95;
    filter:brightness(1.8);
  }
}

.anniversary-logo{
    position:fixed;
    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    max-width:60vw;
    max-height:60vh;

    z-index:10000;

    display:none;

    pointer-events:none;

    filter:
        drop-shadow(0 0 30px rgba(255,255,255,.9))
        drop-shadow(0 0 60px rgba(255,255,255,.7));
}

.anniversary-logo.active{
    display:block;
    animation:logoPulse .18s infinite alternate;
}

@keyframes logoPulse{
    from{
        opacity:.6;
        transform:translate(-50%,-50%) scale(.95);
    }

    to{
        opacity:1;
        transform:translate(-50%,-50%) scale(1.03);
    }
}

.total{font-weight:900}
.tip{font-style:italic;color:--var(--accent)}
.given{color:#16a34a;font-weight:700}
.change{color:#dc2626;font-weight:700}


button[data-num="back"]{
    color:var(--danger);
    background:#fff0ee;
    font-weight:900;
}

body.dark button[data-num="back"]{
    color:var(--danger);
    background:#fff0ee;
}

body.dark .danger{
    color:var(--danger);
    background:#fff0ee;
}

.admin-form{
  display:grid;
  grid-template-columns:1fr 160px 1fr auto;
  gap:10px;
  margin-top:12px;
}

.admin-form input{
  text-align:left;
  font-size:1rem;
}

.admin-name,
.admin-category{
  text-align:left;
  font-size:1rem;
}

.admin-price{
  font-size:1rem;
}

.admin-active{
  width:auto;
  transform:scale(1.4);
}

@media(max-width:760px){
  .admin-form{
    grid-template-columns:1fr;
  }
}