:root{--gold:#C09553;--gold-d:#a67b3c;--ink:#3D2B1F;--bg:#f6f1e9;--line:#e6dccb;--muted:#8a7a6c;--red:#b3372b;--green:#2f7a45}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);display:flex;min-height:100vh}
a{color:var(--gold-d)}
.side{width:220px;background:#2f2018;color:#e6d5bf;padding:1.2rem 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex:none}
.brand{font:700 1.5rem Georgia,serif;letter-spacing:.1em;color:var(--gold);padding:0 1.4rem 1.2rem}.brand small{display:block;font:500 .7rem sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#a8977f}
.side nav a,.side-foot a{display:flex;justify-content:space-between;align-items:center;padding:.65rem 1.4rem;color:#e6d5bf;text-decoration:none}
.side nav a:hover,.side-foot a:hover{background:#3b2a20}.side nav a.on{background:var(--gold);color:#fff}
.side-foot{margin-top:auto;border-top:1px solid #4a372b;padding-top:.5rem;font-size:.9rem}
.pill{background:var(--red);color:#fff;border-radius:10px;font-size:.7rem;padding:.05rem .5rem}
.main{flex:1;padding:1.5rem 2rem 3rem;min-width:0;max-width:1300px}
.top h1{margin:0 0 1.2rem;font:700 1.6rem Georgia,serif}
.box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.2rem 1.4rem;margin-bottom:1.2rem}
.box.flush{padding:0}.box h2{margin:0 0 .8rem;font-size:1.05rem}
.box.narrow{max-width:680px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.2rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem 1.2rem;border-top:3px solid var(--gold)}
.stat small{color:var(--muted);display:block}.stat b{font-size:1.5rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.two.wide{grid-template-columns:1.4fr 1fr;align-items:start}
.muted{color:var(--muted)}.r{text-align:right}
.tbl{width:100%;border-collapse:collapse}.tbl td,.tbl th{padding:.55rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl.big th{background:#faf6ee;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tbl td.r{text-align:right}.tbl tr.dim{opacity:.55}
.scroll{overflow-x:auto}
.thumb{width:52px;height:52px;object-fit:cover;border-radius:6px;background:#eee;display:block}
.tag{display:inline-block;font-size:.72rem;font-weight:600;padding:.12rem .55rem;border-radius:10px;background:#eee;color:#555;text-transform:capitalize}
.tag.out{background:#fbe3df;color:var(--red)}.tag.low{background:#fdebd6;color:#b5651d}.tag.in{background:#e0f1e5;color:var(--green)}
.st-new{background:#e3ecfb;color:#2856b0}.st-confirmed{background:#fdf3d0;color:#8a6a00}.st-shipped{background:#e6e0f7;color:#5a3fb0}.st-delivered{background:#e0f1e5;color:var(--green)}.st-cancelled{background:#fbe3df;color:var(--red)}
.btn{display:inline-block;background:var(--gold);color:#fff;border:1px solid var(--gold);padding:.6rem 1.2rem;border-radius:6px;font:600 .9rem system-ui,sans-serif;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--gold-d)}
.btn.sm{padding:.3rem .7rem;font-size:.8rem}.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{background:#f3ece0}
.btn.danger{background:#fff;color:var(--red);border-color:#efc4be}.btn.danger:hover{background:var(--red);color:#fff}
.btn.add{margin-left:auto}
.acts{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.acts form{margin:0}
.inline-stock{display:flex;gap:.3rem;margin:0 0 .2rem}.inline-stock input{width:72px}
input,select,textarea{font:inherit;padding:.5rem .6rem;border:1px solid #d9ccb9;border-radius:6px;background:#fffdfa;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #ecd9b7;border-color:var(--gold)}
input[type=checkbox]{width:auto}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.9rem}
label small{font-weight:400;color:var(--muted)}label input,label select,label textarea{margin-top:.3rem;font-weight:400}
label.check{display:flex;gap:.5rem;align-items:center}label.check input{margin:0}
.cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:.8rem}
.hint{background:#f7efe2;padding:.6rem .8rem;border-radius:6px;font-size:.85rem;margin:-.2rem 0 1rem}
.imgbox{border:1px dashed #d9ccb9;border-radius:8px;padding:.9rem;margin-bottom:1rem}
.preview{height:200px;background:#f4eee4;border-radius:6px;display:flex;align-items:center;justify-content:center;margin:.5rem 0 .8rem;overflow:hidden}.preview img{width:100%;height:100%;object-fit:cover}
.bar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:1rem 0 0;display:flex;gap:.6rem}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}.filters input,.filters select{width:auto;min-width:160px}
.chip{padding:.35rem .9rem;border-radius:16px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.85rem}.chip.on{background:var(--gold);border-color:var(--gold);color:#fff}
.order .ohead{display:flex;justify-content:space-between;margin-bottom:.6rem}.order p{margin:.2rem 0}.ostatus{display:flex;gap:.6rem;align-items:center;margin-top:.8rem;flex-wrap:wrap}.ostatus select{width:auto}
.inline-add{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.inline-add h2{width:100%}.inline-add input{max-width:320px}
.flash{padding:.7rem 1rem;border-radius:6px;margin-bottom:1rem;font-weight:600}.flash.ok{background:#e0f1e5;color:var(--green)}.flash.err{background:#fbe3df;color:var(--red)}
.login-body{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2f2018,#5a4030)}
.login-card{background:#fff;padding:2rem;border-radius:12px;width:360px;max-width:92vw}.login-card h1{margin:0;font:700 2rem Georgia,serif;color:var(--gold);text-align:center;letter-spacing:.1em}.login-card .sub{text-align:center;color:var(--muted);margin:.2rem 0 1.4rem}.login-card .btn{width:100%}
@media(max-width:900px){body{flex-direction:column}.side{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;padding:.5rem}.brand{padding:.3rem .8rem}.brand small{display:none}.side nav{display:flex;flex-wrap:wrap}.side nav a,.side-foot a{padding:.5rem .8rem}.side-foot{margin:0;border:0;display:flex;padding:0}.main{padding:1rem}.two,.two.wide{grid-template-columns:1fr}.cols{grid-template-columns:1fr}}

.st-awaiting_payment{background:#eee;color:#666}.st-payment_issue{background:#fbe3df;color:var(--red)}.pay-paid{color:var(--green)}.pay-failed{color:var(--red)}.hint code{background:#fff;padding:.1rem .3rem;border-radius:4px;word-break:break-all}

/* ===== Admin: mobile ===== */
img{max-width:100%}
@media(max-width:900px){
  .side{padding:.4rem .5rem;gap:.2rem;align-items:center;justify-content:space-between}
  .side nav{flex:1 1 100%;order:3;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;border-top:1px solid #4a372b;margin-top:.3rem}
  .side nav a{white-space:nowrap;padding:.7rem .9rem}
  .brand{order:1;padding:.2rem .6rem}
  .side-foot{order:2;flex-direction:row}
  .main{padding:1rem .9rem 5rem}
  .top h1{font-size:1.35rem;margin-bottom:.8rem}
  .stats{grid-template-columns:1fr 1fr}
  .filters input,.filters select{flex:1 1 140px;min-width:0}
  .btn.add{margin-left:0;flex:1 1 100%;text-align:center}
  .bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:.7rem .9rem;z-index:20}
  .bar .btn{flex:1;text-align:center}
}
@media(max-width:600px){
  input,select,textarea{font-size:16px}
  .btn{padding:.7rem 1.1rem}
  .btn.sm{padding:.5rem .8rem}
  .box{padding:1rem}
  .order .ohead{flex-direction:column;gap:.4rem}
  .acts{gap:.3rem}
  .tbl.big td,.tbl.big th{padding:.5rem .4rem;font-size:.9rem}
  .inline-stock input{width:64px}
  .ostatus select{flex:1}
  .preview{height:170px}
  .login-card{padding:1.5rem}
}