:root{
  --red:#e30613;
  --dark:#171719;
  --text:#111214;
  --muted:#6f7378;
  --line:#e4e5e7;
  --bg:#f3f4f6;
  --white:#fff;
  --green:#118a44;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{min-height:100vh}
.app-shell{max-width:900px;margin:0 auto;min-height:100vh;background:var(--bg)}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:15px 18px;background:#fff;border-bottom:3px solid var(--red);box-shadow:0 2px 12px #0000000d
}
.brand{font-size:27px;font-weight:900;letter-spacing:-1px;color:var(--red)}
.subtitle{font-size:10px;font-weight:700;letter-spacing:1.2px;color:#555}
.admin-link{font-size:11px;color:#666;text-decoration:none;font-weight:800}
.page{padding:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px #00000008}
.narrow{max-width:440px;margin:25px auto}
.section-label{font-size:11px;font-weight:900;letter-spacing:1px;color:var(--red);margin-bottom:12px}
label{display:block;font-size:12px;font-weight:800;color:#444;margin:8px 0}
input,textarea{
  width:100%;margin-top:6px;border:1px solid #cfd2d6;border-radius:10px;background:white;color:#111;
  padding:13px 12px;font-size:16px;outline:none
}
input:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 2px #e3061315}
textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}.page{padding:10px}.topbar{padding:13px 14px}}
.small{font-size:11px}.muted{color:var(--muted)}
.search{margin:0 0 10px}
.product-list{display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow:auto}
.product-item{
  border:1px solid var(--line);background:#fff;border-radius:11px;padding:13px;text-align:left;color:#111;cursor:pointer
}
.product-item:active{transform:scale(.995);background:#fafafa}
.product-main{font-weight:800;font-size:15px;line-height:1.3}
.product-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:#666;font-size:11px;margin-top:6px}
.selected{background:#fafafa;border:1px solid #ddd;border-left:4px solid var(--red);border-radius:11px;padding:13px}
.selected-title{font-size:17px;font-weight:900}
.selected-meta{font-size:12px;color:#666;margin-top:5px}
.link-btn{border:0;background:transparent;color:var(--red);font-weight:800;padding:10px 0 0;cursor:pointer}
.action-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.action-btn{border:1px solid #ccc;border-radius:10px;background:#fff;color:#222;padding:14px;font-weight:900;cursor:pointer}
.action-btn.active{border-color:var(--red);background:var(--red);color:#fff}
.primary,.secondary{
  width:100%;border:0;border-radius:10px;padding:14px 16px;font-weight:900;font-size:14px;cursor:pointer
}
.primary{background:var(--red);color:#fff}
.secondary{background:#eceef0;color:#222}
.primary:disabled{opacity:.55}
.compact{width:auto;padding:10px 14px}
.message.success{border-left:4px solid var(--green)}
.message.error{border-left:4px solid var(--red);color:#9b1118}
.success-title{font-size:17px;font-weight:900;color:var(--green);margin-bottom:8px}
.hidden{display:none!important}
.empty{text-align:center;color:#888;padding:22px;font-size:13px}
.tabs{display:flex;gap:6px;margin-bottom:12px;position:sticky;top:70px;z-index:10;background:var(--bg);padding:6px 0}
.tab{flex:1;border:0;border-radius:9px;background:#e5e7ea;color:#444;padding:11px 8px;font-weight:900;cursor:pointer}
.tab.active{background:#18181b;color:#fff}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px}.toolbar .search{margin:0}
.admin-row{display:flex;gap:12px;align-items:center}.grow{flex:1}.inactive{opacity:.5}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pill{font-size:10px;font-weight:900;border-radius:100px;padding:5px 8px}.pill.in{background:#e6f6ec;color:#16723c}.pill.out{background:#fde9ea;color:#a2171f}
.modal{position:fixed;inset:0;z-index:100;background:#0008;display:flex;align-items:center;justify-content:center;padding:15px}
.modal-card{width:min(680px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;padding:18px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.x{border:0;background:#eee;border-radius:100%;width:34px;height:34px;font-size:22px;cursor:pointer}
.checkrow{display:flex;align-items:center;gap:8px;margin:12px 0}.checkrow input{width:auto;margin:0}.checkrow label{margin:0}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:200;padding:12px 16px;border-radius:10px;color:#fff;font-weight:800;box-shadow:0 6px 30px #0004}.toast.success{background:#16723c}.toast.error{background:#a2171f}



.topbar-left{display:flex;align-items:center;gap:12px}
.back-btn{border:0;background:#f0f1f3;color:#222;border-radius:9px;padding:9px 11px;font-weight:900;font-size:12px;cursor:pointer;white-space:nowrap}
.browse-title{font-size:14px;font-weight:900;margin:4px 0 10px}
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.category-card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:16px;text-align:left;cursor:pointer}
.category-card:active{background:#f7f7f8}
.category-name{font-weight:900;font-size:15px;line-height:1.25}
.category-count{font-size:11px;color:var(--muted);margin-top:5px}
.category-head{margin-bottom:10px}
.product-with-image{display:flex;gap:12px;align-items:center}
.product-content{flex:1;min-width:0}
.product-thumb{width:58px;height:58px;object-fit:contain;border:1px solid #ececef;border-radius:9px;background:#fff;flex:0 0 58px}
.placeholder-thumb{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;color:#bbb}
.selected-wrap{display:flex;gap:12px;align-items:center}
.selected-thumb{width:72px;height:72px;object-fit:contain;border:1px solid #ececef;border-radius:10px;background:#fff;flex:0 0 72px}
@media(max-width:620px){
  .category-grid{grid-template-columns:1fr}
  .topbar-left{gap:8px}
  .back-btn{padding:8px 9px;font-size:11px}
  .brand{font-size:24px}
  .subtitle{font-size:9px}
}




.topbar-actions{display:flex;align-items:center;gap:10px}
.lang-switch{display:flex;border:1px solid #d7d9dc;border-radius:9px;overflow:hidden;background:#fff}
.lang-btn{border:0;background:#fff;color:#555;font-weight:900;font-size:11px;padding:8px 9px;cursor:pointer}
.lang-btn + .lang-btn{border-left:1px solid #d7d9dc}
.lang-btn.active{background:#18181b;color:#fff}
@media(max-width:620px){
  .topbar-actions{gap:6px}
  .lang-btn{padding:7px 8px}
  .admin-link{font-size:10px}
}




.category-filter-card{padding:12px 14px}
.admin-category-filter{display:flex;flex-wrap:wrap;gap:7px}
.filter-chip{
  border:1px solid #d8dade;
  background:#fff;
  color:#333;
  border-radius:999px;
  padding:8px 11px;
  font-size:11px;
  font-weight:900;
  cursor:pointer
}
.filter-chip.active{background:#18181b;color:#fff;border-color:#18181b}
.admin-toolbar{align-items:stretch}
@media(max-width:620px){
  .admin-toolbar{flex-direction:column}
  .admin-toolbar .compact{width:100%}
}