body{

   font-family:Arial;
   padding:0 20px 20px;
   max-width:720px;
   margin:0 auto;

}

.topbar{

   display:grid;
   grid-template-columns:1fr;
   row-gap:0;
   align-items:start;
   padding:8px 0 12px;
   border-bottom:1px solid #eee;

}

.topbar h1{

   margin:0 0 6px 0;
   line-height:1.1;
   font-size:28px;
   padding:0;

}

.header-actions{

   display:flex;
   align-items:center;
   gap:8px;
   flex-wrap:wrap;
   width:100%;
   margin:0;
   padding:0;

}

.header-actions button{

   background:#fafafa;
   color:#111;
   border:1px solid #ccc;
   border-radius:10px;
   font-size:14px;
   padding:10px 14px;
   min-height:36px;
   cursor:pointer;

}

.manage-button{

   background:#0074d9;
   color:#fff;
   border-color:#005bb5;

}

h1{

   flex:1 1 220px;
   margin:0;
   font-size:32px;
   line-height:1.15;

}

.grid{

   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:12px;

}

.control-row{

   display:flex;
   gap:12px;
   margin-bottom:12px;
}

.control-row .control-button{

   flex:1;
   min-height:130px;
}

.grid button,
.custom-cart-button{

   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   min-height:120px;
   font-size:30px;
   padding:22px;
   cursor:pointer;

}

.header-actions button{

   font-size:16px;
   min-height:0;
   padding:10px 14px;

}

.custom-cart-tile{

   display:grid;
   gap:8px;

}

.custom-cart-button{

   width:100%;

}

body.edit-mode .custom-cart-button {

   outline: 2px dashed #0074d9;
   outline-offset: 4px;

}

.custom-actions{

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

}

.edit-button,
.delete-button{

   min-height:0;
   padding:8px;
   font-size:14px;

}

.button-label{

   display:block;
   font-size:18px;
   line-height:1.2;
   text-align:center;

}

.button-label.product-label{

   font-size:14px;
   font-weight:600;
   margin-bottom:8px;
}

.product-image{

   width:72px;
   height:72px;
   object-fit:contain;

}

.cart-count{

   display:block;
   min-height:20px;
   margin-top:8px;
   font-size:16px;

}

.blank-button{

   cursor:default;
   opacity:.35;

}

.login-button,
.reset-button,
.add-button,
.scan-button{

   flex:0 0 auto;
   font-size:16px;
   padding:10px 14px;
   min-height:0;

}

.scan-button{

   background:#2f7a33;
   color:#fff;
   border-color:#256327;

}

.voice-button{

   background:#6a1b9a;
   color:#fff;
   border-color:#4a148c;

}

.status-login-button{

   background:#0074d9;
   color:#fff;
   border:none;
   border-radius:8px;
   padding:6px 10px;
   margin-left:8px;
   cursor:pointer;

}

dialog{

   border:1px solid #ccc;
   padding:0;
   width:min(420px, calc(100vw - 40px));

}

dialog::backdrop{

   background:rgba(0,0,0,.25);

}

.dialog-form{

   display:grid;
   gap:16px;
   padding:20px;

}

.scan-dialog{

   border:1px solid #ccc;
   padding:0;
   width:min(90vw, 420px);
   max-width:90vw;
}

.scan-dialog::backdrop{

   background:rgba(0,0,0,.35);

}

.scan-dialog-content{

   display:grid;
   gap:12px;
   padding:16px;
}

.scan-product-preview{
   display:grid;
   gap:12px;
   grid-template-columns: 96px auto;
   align-items: center;
}

.scan-product-preview img{
   width:96px;
   height:96px;
   object-fit: contain;
   border:1px solid #ddd;
   border-radius:12px;
   background:#fff;
}

.scan-product-name{
   font-size:18px;
   font-weight:700;
   margin:0;
}

.scan-product-upc{
   margin:0;
   color:#555;
   font-size:14px;
}

.scan-product-actions{
   justify-content:space-between;
}

#scan-video{

   width:100%;
   height:auto;
   background:#000;
   border-radius:14px;
}

.scan-dialog-actions{

   display:flex;
   justify-content:flex-end;
   gap:8px;
}

.dialog-form h2{

   margin:0;
   font-size:22px;

}

.dialog-form label{

   display:grid;
   gap:6px;
   font-size:16px;

}

.dialog-form input{

   font-size:18px;
   padding:10px;

}

.dialog-actions{

   display:flex;
   justify-content:flex-end;
   gap:8px;

}

.primary-button,
.secondary-button{

   font-size:16px;
   padding:10px 14px;
   min-height:0;

}