:root{
  --bg:#0b1020; --muted:#10162a; --text:#e6e9f2; --dim:#a9b3c7;
  --acc:#5eead4; --acc-ink:#062b27;
  --line:#26314a; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --card:#0f1529;
  --app-width:420px; /* phone width */
}

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,Segoe UI,Inter,Arial}

/* ---------- App shell (mobile-first, centered) ---------- */
.app{
  max-width:var(--app-width);
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg,#0e1427,rgba(14,20,39,.94));
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex; align-items:center; gap:.6rem;
  max-width:var(--app-width); margin:0 auto; padding:.65rem .9rem;
}
.burger{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; background:rgba(255,255,255,.02);
}
.brand{font-weight:700; letter-spacing:.2px}
.badge{margin-left:auto; font-size:.78rem; padding:.2rem .55rem; border-radius:999px; background:#243247; color:#cfe8ff}

/* ---------- Main wrapper ---------- */
.wrap{max-width:var(--app-width); margin:0 auto; padding:1rem .9rem; width:100%}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  margin:1rem 0;
}
.card h2{margin:.1rem 0  .6rem 0; font-size:1.15rem}

/* ---------- UI Elements ---------- */
.btn{
  background:var(--acc); color:var(--acc-ink); border:0;
  padding:.65rem 1rem; border-radius:999px; font-weight:700; cursor:pointer;
}
.btn.block{display:block; width:100%; text-align:center}
.btn.ghost{background:transparent; color:var(--acc); border:1px solid var(--acc)}
.btn.small{padding:.4rem .7rem; font-size:.86rem}
.btn.danger{background:var(--err); color:#fff}
a{color:var(--acc); text-decoration:none}

input,select,textarea{
  width:100%; background:#0b1122; color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem;
}
label{display:block; font-size:.9rem; color:var(--dim); margin:.5rem 0 .25rem}
.form-grid{display:grid; grid-template-columns:1fr; gap:.75rem}
.row{display:flex; gap:.6rem; align-items:center}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:.6rem}
.row-right{display:flex; justify-content:flex-end; gap:.6rem}

/* ---------- Flash ---------- */
.flash{padding:.6rem .8rem; border-radius:12px; border:1px solid; margin:.6rem 0}
.flash.ok{background:#0e2118; border-color:#1a6f3b}
.flash.err{background:#2b1113; border-color:var(--err)}

/* ---------- Filters bar ---------- */
.filters{
  display:grid; grid-template-columns:1fr; gap:.6rem; margin:.4rem 0 .8rem;
}
.filters .btn{width:100%}

/* ---------- Mobile list for products (guest) ---------- */
.list{display:grid; gap:.6rem}
.product-card{
  background:#0c1326; border:1px solid var(--line); border-radius:16px; padding:.8rem .9rem;
}
.product-card .name{font-weight:700}
.product-card .meta{color:var(--dim); font-size:.86rem; margin:.15rem 0}
.price{
  margin-top:.4rem; font-size:1.2rem; font-weight:800; color:var(--acc);
}

/* ---------- Table (admin) ---------- */
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:14px}
.tbl{width:100%; border-collapse:collapse; min-width:700px}
.tbl th,.tbl td{padding:.6rem .5rem; border-bottom:1px solid var(--line); text-align:left}
.tbl thead th{font-size:.85rem; color:var(--dim)}
.actions{display:flex; gap:.4rem}

/* ---------- Pagination ---------- */
.pagination{display:flex; gap:.4rem; justify-content:center; margin-top:.6rem}
.page{display:inline-block; padding:.35rem .6rem; border:1px solid var(--line); border-radius:10px}
.page.active{background:var(--acc); color:var(--acc-ink); border-color:transparent}

/* ---------- Footer spacer ---------- */
footer{height:24px}
/* Make header container relative so the menu can anchor to it */
.topbar__inner{ position:relative }

/* Burger already styled earlier; ensure it's a button */
.burger{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; background:rgba(255,255,255,.02); cursor:pointer;
}

/* Dropdown menu */
.menu{
  display:none; flex-direction:column; gap:.55rem;
  position:absolute; top:52px; right:10px; z-index:50;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:.7rem .9rem; min-width:170px; box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.menu.open{ display:flex; }
.menu a{ color:var(--text); text-decoration:none; padding:.35rem .2rem; border-radius:8px }
.menu a:hover{ background:rgba(255,255,255,.04) }
.thumb-img{
  width:56px; height:56px; border-radius:12px; object-fit:cover; border:1px solid var(--line); background:#0b1122;
}
.thumb-placeholder{
  width:56px; height:56px; border-radius:12px; border:1px dashed var(--line);
  background:#0b1122; color:var(--dim); font-weight:700;
}
.thumb-lg{ width:88px; height:88px } /* used in editor preview */
/* ---------- Hamburger visibility & menu on left ---------- */
.burger{
  width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
  display:grid;place-items:center;background:rgba(255,255,255,.06);
  color:#cfe8ff; cursor:pointer; font-weight:900;
}
.burger:focus{outline:2px solid var(--acc)}
.topbar__inner{ position:relative; overflow:visible }
.menu{
  display:none; flex-direction:column; gap:.55rem;
  position:absolute; top:52px; left:10px; right:auto; z-index:50;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:.7rem .9rem; min-width:170px; box-shadow:0 8px 20px rgba(0,0,0,.35)
}
.menu.open{ display:flex }
.menu a{ color:var(--text); text-decoration:none; padding:.35rem .2rem; border-radius:8px }
.menu a:hover{ background:rgba(255,255,255,.05) }

/* ---------- Upload box (centered icon) ---------- */
.upload-box{
  width:110px; height:110px; border-radius:16px; border:1px dashed var(--line);
  background:#0b1122; display:grid; place-items:center; position:relative; overflow:hidden;
}
.upload-box img{ width:100%; height:100%; object-fit:cover; display:block }
.upload-box .placeholder{
  color:var(--dim); font-size:.85rem; display:grid; place-items:center; gap:.2rem; text-align:center;
}
.upload-hint{ color:#a9b3c7; font-size:.85rem; margin-top:.35rem }

/* ---------- Thumbs ---------- */
.thumb-img{ width:56px; height:56px; border-radius:12px; object-fit:cover; border:1px solid var(--line); background:#0b1122 }
.thumb-placeholder,.thumb-na{
  width:56px;height:56px;border-radius:12px;border:1px dashed var(--line);
  background:#0b1122;color:var(--dim);display:grid;place-items:center;font-weight:700
}
.thumb-na{ font-size:.8rem }

/* ---------- Grid cards (Shopee-like) ---------- */
.viewbar{ display:flex; align-items:center; justify-content:flex-end; gap:.6rem; margin:-.2rem 0 .4rem }
.viewbar label{ color:var(--dim); font-size:.9rem }
.grid-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}


.card-tile{
  background:#0c1326;border:1px solid var(--line);border-radius:14px;padding:.6rem;
  display:flex;flex-direction:column;gap:.45rem
}
.card-tile img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; border:1px solid var(--line) }
.card-tile .na{ width:100%; aspect-ratio:1/1; display:grid; place-items:center; border-radius:10px; border:1px dashed var(--line); color:var(--dim); background:#0b1122 }
.card-tile .title{ font-weight:700; font-size:.95rem; line-height:1.2; max-height:2.4em; overflow:hidden }
.card-tile .price{ font-weight:800; font-size:1.05rem; color:var(--acc) }
.card-tile .actions{ display:flex; gap:.4rem; margin-top:.2rem }

/* ---------- Hide/show list vs grid ---------- */
.is-grid .table-wrap{ display:none }
.is-list .grid-cards{ display:none }
.card-tile .title{ font-weight:700; font-size:.95rem; line-height:1.2; max-height:2.4em; overflow:hidden }
.card-tile .price{ font-weight:800; font-size:1.05rem; color:var(--acc) }

/* Suppliers: tighter, cleaner layout */
.form-rows { display:flex; flex-direction:column; gap:.6rem }
.form-rows .row3 { display:grid; grid-template-columns:1fr; gap:.6rem }
@media (min-width:500px){
  .form-rows .row3 { grid-template-columns: 1.1fr .9fr .8fr; }
}
.tbl td, .tbl th { vertical-align: middle; }

/* Force fixed Actions column */
.tbl th:last-child,
.tbl td:last-child {
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  text-align: right;
}


.actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .4rem;
  width: 100%;
}
.actions form {
  margin: 0;
  display: contents; /* important */
}