/* ============================================================
   KEDAI ONLINE — gaya utama (mobile-first)
   Tukar warna jenama di --brand / --brand-dark
   ============================================================ */
:root {
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-soft: #ccfbf1;
  --accent: #f59e0b;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --card: #ffffff;
  --ok: #059669; --ok-bg: #d1fae5;
  --warn: #b45309; --warn-bg: #fef3c7;
  --bad: #dc2626; --bad-bg: #fee2e2;
  --info: #1d4ed8; --info-bg: #dbeafe;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       color: var(--text); background: var(--bg); font-size: 15px; line-height: 1.55; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.main { padding-top: 20px; padding-bottom: 40px; flex: 1 0 auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.hide { display: none !important; }

/* ---------- Topbar */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.topbar-in { display: flex; align-items: center; gap: 14px; height: 64px; }
.brand { font-weight: 800; font-size: 1.15rem; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.search { flex: 1; display: flex; max-width: 520px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.search input { flex: 1; border: 0; background: transparent; padding: 9px 14px; font-size: 14px; min-width: 0; outline: none; }
.search button { border: 0; background: transparent; padding: 0 14px; color: var(--muted); cursor: pointer; }
.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-weight: 600; font-size: 14px; }
.nav-link:hover { background: var(--bg); text-decoration: none; }
.admin-link { background: var(--text); color: #fff; }
.admin-link:hover { background: #1e293b; }
.nav-cart { position: relative; display: inline-flex; padding: 8px; color: var(--text); border-radius: 8px; }
.nav-cart:hover { background: var(--bg); }
.cart-count { position: absolute; top: 0; right: -2px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800;
              min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }

/* ---------- Butang & borang */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 10px;
       border: 1px solid transparent; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none !important;
       background: var(--brand); color: #fff; transition: background .15s; }
.btn:hover { background: var(--brand-dark); }
.btn-outline { background: var(--card); color: var(--text); border-color: var(--line); }
.btn-outline:hover { background: var(--bg); }
.btn-danger { background: var(--bad); } .btn-danger:hover { background: #b91c1c; }
.btn-accent { background: var(--accent); } .btn-accent:hover { background: #d97706; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search]:not(.search input),
select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
textarea { min-height: 100px; resize: vertical; }
.field { margin-bottom: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- Kad & susun atur */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 20px; }
.auth { max-width: 420px; margin: 20px auto; }
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; font-size: 14px; }
.a-success { background: var(--ok-bg); color: var(--ok); }
.a-error { background: var(--bad-bg); color: var(--bad); }
.a-info { background: var(--info-bg); color: var(--info); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.b-ok { background: var(--ok-bg); color: var(--ok); } .b-warn { background: var(--warn-bg); color: var(--warn); }
.b-bad { background: var(--bad-bg); color: var(--bad); } .b-info { background: var(--info-bg); color: var(--info); }
.b-muted { background: #f1f5f9; color: var(--muted); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 14px; gap: 12px; }
.section-head h2 { margin: 0; }

/* ---------- Hero */
.hero { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; border-radius: 16px; padding: 36px 24px;
        display: grid; gap: 14px; }
.hero h1 { font-size: 1.9rem; margin: 0; }
.hero p { margin: 0; opacity: .9; font-size: 1.05rem; }
.hero .btn { background: #fff; color: var(--brand-dark); justify-self: start; }
.hero .btn:hover { background: var(--brand-soft); }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.perk { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; text-align: center; }
.perk b { display: block; font-size: 14px; }

/* ---------- Grid produk */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
         color: var(--text); transition: box-shadow .15s, transform .15s; }
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.pcard-img { aspect-ratio: 1; background: #f1f5f9; position: relative; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard-tag { position: absolute; top: 8px; left: 8px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.pcard-tag.out { background: #334155; }
.pcard-body { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pcard-name { font-weight: 600; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.price { font-weight: 800; color: var(--brand-dark); font-size: 16px; }
.price-old { color: var(--muted); text-decoration: line-through; font-size: 13px; font-weight: 400; margin-left: 6px; }
.empty { text-align: center; padding: 50px 16px; color: var(--muted); }

/* ---------- Senarai produk */
.list-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.list-head h1 { margin: 0; font-size: 1.35rem; }
.list-head select { width: auto; padding: 8px 10px; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; text-align: center; background: var(--card); color: var(--text); }
.pager .on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Detail produk */
.pd { display: grid; gap: 20px; }
.pd-main { aspect-ratio: 1; background: #f1f5f9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.pd-thumbs button { border: 2px solid transparent; border-radius: 8px; padding: 0; width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; cursor: pointer; background: #f1f5f9; }
.pd-thumbs button.on { border-color: var(--brand); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd-info h1 { font-size: 1.45rem; }
.pd-price { font-size: 1.7rem; font-weight: 800; color: var(--brand-dark); }
.pd-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 8px 0 16px; }
.stock-ok { color: var(--ok); font-weight: 700; } .stock-low { color: var(--warn); font-weight: 700; } .stock-out { color: var(--bad); font-weight: 700; }
.qty { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.qty button { width: 42px; border: 0; background: var(--bg); font-size: 18px; cursor: pointer; }
.qty input { width: 56px; text-align: center; border: 0; border-radius: 0; padding: 10px 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0; }
.buy-row .btn { flex: 1; min-width: 150px; }
.pd-desc { white-space: pre-line; }
.sticky-buy { display: none; }

/* ---------- Troli & checkout */
.cart-layout { display: grid; gap: 20px; }
.citem { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.citem:last-child { border-bottom: 0; }
.citem img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: #f1f5f9; }
.citem-name { font-weight: 600; color: var(--text); }
.citem-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: 13px; padding: 0; }
.summary .srow { display: flex; justify-content: space-between; padding: 6px 0; }
.summary .stotal { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-weight: 800; font-size: 1.15rem; }
.paymethod { display: block; border: 2px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; cursor: pointer; font-weight: 400; }
.paymethod:has(input:checked) { border-color: var(--brand); background: #f0fdfa; }
.paymethod b { display: block; }
.paymethod input { margin-right: 8px; }

/* ---------- Akaun & pesanan */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 14px; }
.tabs a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.olist { display: grid; gap: 12px; }
.ocard { display: block; padding: 16px; color: var(--text); }
.ocard:hover { text-decoration: none; box-shadow: 0 6px 20px rgba(15,23,42,.1); }
.ocard-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.steps { display: flex; gap: 4px; margin: 14px 0; }
.steps div { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }
.steps div::before { content: ''; display: block; height: 6px; border-radius: 999px; background: var(--line); margin-bottom: 6px; }
.steps div.done { color: var(--brand-dark); font-weight: 700; }
.steps div.done::before { background: var(--brand); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.bankbox { background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 14px; margin: 12px 0; }
.bankbox b { font-size: 1.1rem; letter-spacing: .5px; }

/* ---------- Footer */
.footer { background: #0f172a; color: #cbd5e1; margin-top: 30px; }
.footer a { color: #e2e8f0; }
.footer-in { display: grid; gap: 20px; padding: 30px 16px; }
.footer strong { color: #fff; }
.footer p { margin: 6px 0 0; font-size: 14px; }
.copy { border-top: 1px solid #1e293b; padding: 14px 16px; font-size: 12px; color: #94a3b8; }

/* ---------- Responsive */
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .topbar-in { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .perks { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.5rem; }
  .sticky-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line);
                padding: 10px 16px; gap: 10px; z-index: 40; box-shadow: 0 -4px 16px rgba(15,23,42,.08); }
  .sticky-buy .btn { flex: 1; }
  body.has-sticky { padding-bottom: 76px; }
  .kv { grid-template-columns: 110px 1fr; }
}
@media (min-width: 641px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .footer-in { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd { grid-template-columns: 1fr 1fr; gap: 36px; }
  .cart-layout { grid-template-columns: 1fr 360px; align-items: start; }
  .hero { padding: 56px 48px; }
  .hero h1 { font-size: 2.4rem; }
}

/* ================= ADMIN ================= */
.admin-top { background: #0f172a; color: #fff; }
.admin-top .wrap { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.admin-top .brand { color: #fff; }
.admin-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: #1e293b; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a { color: #cbd5e1; padding: 11px 14px; white-space: nowrap; font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; }
.admin-nav a:hover { color: #fff; text-decoration: none; }
.admin-nav a.on { color: #fff; border-bottom-color: #2dd4bf; }
.admin-top .spacer { flex: 1; }
.admin-top a.ghost { color: #cbd5e1; font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: block; color: var(--text); }
.stat:hover { text-decoration: none; box-shadow: var(--shadow); }
.stat span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.stat b { font-size: 1.35rem; }
.stat.alert-stat { border-color: var(--warn); background: var(--warn-bg); }
.alist { display: grid; gap: 10px; }
.arow { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
        display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; color: var(--text); }
a.arow:hover { text-decoration: none; box-shadow: var(--shadow); }
.arow.noimg { grid-template-columns: 1fr auto; }
.arow img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: #f1f5f9; }
.arow .t { font-weight: 700; } .arow .s { font-size: 13px; color: var(--muted); margin-top: 2px; }
.arow .r { text-align: right; display: grid; gap: 4px; justify-items: end; }
.arow.off { opacity: .55; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gal { display: flex; gap: 10px; flex-wrap: wrap; }
.gal figure { margin: 0; width: 90px; text-align: center; }
.gal img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; margin-bottom: 10px; }
.check input { width: auto; }
.receipt-prev { max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--line); display: block; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 639px) { .arow { grid-template-columns: 48px 1fr; } .arow img { width: 48px; height: 48px; }
  .arow .r { grid-column: 1 / -1; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: space-between; } 
  .arow.noimg .r { grid-column: auto; } }
/* ================== HOMEPAGE MODERN APP v4 ================== */
:root{--brand:#7c3aed;--brand-dark:#5b21b6;--brand-soft:#f3e8ff;--bg:#f7f7fb;--line:#e9e7ef;--shadow:0 10px 30px rgba(35,20,70,.07)}
body{background:#f7f7fb}.main{padding-top:18px}
.app-hero{min-height:360px;border-radius:30px;overflow:hidden;position:relative;display:flex;align-items:center;padding:46px 48px;background:linear-gradient(120deg,#171329 0%,#39206b 48%,#7c3aed 100%);color:white;box-shadow:0 20px 55px rgba(76,29,149,.22);isolation:isolate}
.hero-copy{max-width:610px;position:relative;z-index:2}.hero-pill{display:inline-block;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.09);padding:7px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.12em}.app-hero h1{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.06em;margin:15px 0 12px}.app-hero p{max-width:540px;color:rgba(255,255,255,.78);font-size:1.03rem;line-height:1.75}.hero-cta{display:inline-flex;gap:12px;align-items:center;margin-top:22px;padding:13px 18px;border-radius:14px;background:white;color:#32135f;font-weight:800;box-shadow:0 10px 25px rgba(0,0,0,.16)}.hero-cta:hover{text-decoration:none;transform:translateY(-1px)}
.hero-visual{position:absolute;right:5%;top:0;width:370px;height:100%;opacity:.9}.hero-ring{position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%}.ring-a{width:360px;height:360px;right:-35px;top:0}.ring-b{width:245px;height:245px;right:30px;top:58px}.hero-orb{position:absolute;right:118px;top:112px;width:118px;height:118px;border-radius:34px;display:grid;place-items:center;font-size:54px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.3);box-shadow:0 25px 50px rgba(0,0,0,.2);transform:rotate(-8deg)}.hero-mini{position:absolute;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);font-size:24px}.m1{right:55px;top:70px}.m2{right:70px;bottom:65px}
.quick-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 30px}.quick-strip>div{display:flex;align-items:center;gap:12px;background:white;border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 5px 20px rgba(15,23,42,.04)}.quick-strip span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#f4f0ff;font-size:20px}.quick-strip b,.quick-strip small{display:block}.quick-strip b{font-size:13px}.quick-strip small{color:#7b8090;font-size:12px;margin-top:2px}
.home-block{margin:32px 0}.block-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:15px}.block-title small{font-size:10px;font-weight:900;letter-spacing:.15em;color:#8a7ca4}.block-title h2{margin:3px 0 0;font-size:1.55rem;letter-spacing:-.04em}.block-title a{font-size:13px;font-weight:800;color:#6d28d9}.cat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cat-card{background:white;border:1px solid var(--line);border-radius:20px;padding:18px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 5px 18px rgba(15,23,42,.035);transition:.2s}.cat-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 12px 28px rgba(76,29,149,.1);border-color:#d9ccf4}.cat-icon{font-size:24px;color:#7c3aed}.cat-card strong{font-size:14px;color:#171329}.cat-card>span:last-child{font-size:11px;color:#9692a0}
.modern-products{gap:14px}.modern-products .pcard{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 5px 18px rgba(15,23,42,.04);overflow:hidden;transition:.22s;display:flex;flex-direction:column}.modern-products .pcard:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(76,29,149,.12);text-decoration:none}.modern-products .pcard-img{position:relative;aspect-ratio:1;background:#f4f3f8;overflow:hidden}.modern-products .pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.modern-products .pcard:hover .pcard-img img{transform:scale(1.045)}.modern-products .pcard-body{padding:12px 13px 14px}.modern-products .pcard-name{font-size:14px;font-weight:750;min-height:2.7em}.modern-products .pcard-bottom{display:flex;align-items:baseline;gap:7px;margin-top:7px}.modern-products .price{font-size:17px;color:#5b21b6}.modern-products .price-old{font-size:11px}.modern-products .pcard-tag{top:10px;left:10px;background:#7c3aed;border-radius:8px;padding:5px 8px}.modern-products .pcard-heart{position:absolute;right:10px;top:10px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:#5b21b6;font-size:19px;box-shadow:0 3px 10px rgba(0,0,0,.08)}.pcard-view{display:block;margin-top:10px;padding-top:9px;border-top:1px solid #f0eef5;color:#918b9e;font-size:11px;font-weight:700}.modern-empty{background:#fff;border:1px dashed #d9d4e3;border-radius:20px;text-align:center;padding:55px 20px;color:#777}.modern-empty span{display:block;font-size:40px;margin-bottom:8px}.modern-empty b,.modern-empty a{display:block}.mobile-nav{display:none}
@media(max-width:700px){.main{padding:12px 12px 92px}.app-hero{min-height:390px;border-radius:24px;padding:32px 24px;align-items:flex-start}.app-hero h1{font-size:2.25rem;margin-top:12px}.app-hero p{font-size:.94rem}.hero-visual{right:-90px;top:105px;opacity:.6;transform:scale(.8)}.quick-strip{grid-template-columns:1fr;margin-bottom:25px}.quick-strip>div{padding:11px 13px}.cat-cards{display:flex;overflow:auto;gap:10px;padding-bottom:4px}.cat-card{min-width:145px;height:112px}.home-block{margin:25px 0}.block-title h2{font-size:1.25rem}.modern-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.modern-products .pcard-body{padding:10px}.modern-products .pcard-name{font-size:13px}.modern-products .price{font-size:15px}.pcard-view{font-size:10px}.mobile-nav{position:fixed;display:flex;left:10px;right:10px;bottom:10px;height:66px;background:rgba(255,255,255,.96);backdrop-filter:blur(15px);border:1px solid #e7e2f0;border-radius:20px;z-index:100;box-shadow:0 12px 35px rgba(25,15,50,.16);justify-content:space-around;padding:6px}.mobile-nav a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#85808f;font-size:10px;font-weight:700}.mobile-nav a:hover{text-decoration:none}.mobile-nav a span{font-size:21px;line-height:20px}.mobile-nav a.active{color:#6d28d9}.mobile-nav i{position:absolute;top:2px;margin-left:25px;background:#7c3aed;color:white;border-radius:99px;font-size:9px;min-width:16px;height:16px;display:grid;place-items:center;font-style:normal}.footer{padding-bottom:76px}}
@media(min-width:701px) and (max-width:899px){.cat-cards{grid-template-columns:repeat(3,1fr)}}


/* V3 SIDEBAR + MOBILE APP NAV */
.page-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}.page-content{min-width:0}.sidebar{position:sticky;top:92px;background:#fff;border:1px solid #e9e4f2;border-radius:22px;padding:14px;box-shadow:0 8px 28px rgba(15,23,42,.05)}.sidebar-title{padding:8px 12px 10px;color:#5b21b6;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.sidebar-title.small{margin-top:10px;color:#8b8495}.side-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;color:#514b5e;font-size:14px;font-weight:700;margin:2px 0}.side-link span{width:22px;text-align:center;font-size:17px}.side-link:hover{text-decoration:none;background:#f5f1fb;color:#6d28d9}.side-link.active{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;box-shadow:0 7px 18px rgba(109,40,217,.2)}.sidebar-divider{height:1px;background:#eeeaf4;margin:12px 8px}.admin-side{color:#7c3aed}.global-mobile-nav{display:none}
@media(max-width:900px){.page-layout{grid-template-columns:1fr}.sidebar{display:none}.global-mobile-nav{display:flex}.page-content{width:100%}}
@media(min-width:901px){.global-mobile-nav{display:none!important}}
@media(max-width:700px){.global-mobile-nav{position:fixed;display:flex;left:10px;right:10px;bottom:10px;height:66px;background:rgba(255,255,255,.96);backdrop-filter:blur(15px);border:1px solid #e7e2f0;border-radius:20px;z-index:100;box-shadow:0 12px 35px rgba(25,15,50,.16);justify-content:space-around;padding:6px}.global-mobile-nav a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#85808f;font-size:10px;font-weight:700}.global-mobile-nav a:hover{text-decoration:none}.global-mobile-nav a span{font-size:21px;line-height:20px}.global-mobile-nav a.active{color:#6d28d9}.global-mobile-nav i{position:absolute;top:2px;margin-left:25px;background:#7c3aed;color:white;border-radius:99px;font-size:9px;min-width:16px;height:16px;display:grid;place-items:center;font-style:normal}.footer{padding-bottom:86px}}

/* ============================================================
   DESKTOP FULL-PAGE SHOP LAYOUT
   ============================================================ */
@media (min-width: 1101px){
  body{background:#f6f5fa}
  .topbar{position:sticky;top:0}
  .topbar-in{max-width:none;width:100%;padding-left:28px;padding-right:28px}
  .topbar-in{height:72px;gap:22px}
  .brand{font-size:1.35rem;min-width:240px}
  .search{max-width:680px;height:44px}
  .nav{gap:8px}
  .main{width:100%;max-width:none;padding:24px 28px 48px}
  .page-layout{grid-template-columns:250px minmax(0,1fr);gap:28px;min-height:calc(100vh - 145px);align-items:stretch}
  .sidebar{position:sticky;top:96px;height:calc(100vh - 120px);min-height:600px;overflow:auto;border-radius:24px;padding:18px;background:rgba(255,255,255,.94);box-shadow:0 12px 35px rgba(35,20,70,.07)}
  .page-content{min-width:0;width:100%}
  .app-hero{min-height:390px;padding:56px 64px;border-radius:30px}
  .quick-strip{margin:18px 0 38px}
  .quick-strip>div{padding:18px 20px;border-radius:20px}
  .home-block{margin:40px 0}
  .block-title h2{font-size:1.75rem}
  .cat-cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
  .cat-card{min-height:135px;padding:20px;border-radius:20px}
  .modern-products{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .modern-products .pcard{border-radius:20px}
  .modern-products .pcard-body{padding:14px 15px 16px}
  .footer .wrap{max-width:none;padding-left:28px;padding-right:28px}
}
@media (min-width: 901px) and (max-width:1100px){
  .main{max-width:none}
  .page-layout{grid-template-columns:220px minmax(0,1fr)}
  .modern-products{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============================================================
   ADMIN UI 3.0 — desktop dashboard / mobile responsive
   ============================================================ */
.admin-body{background:#f5f6fa;color:#18202f;min-height:100vh;display:block}
.admin-app{min-height:100vh;display:flex}
.admin-sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:#17132b;color:#d8d4e8;padding:22px 14px;display:flex;flex-direction:column;z-index:200;box-shadow:10px 0 30px rgba(24,17,52,.08)}
.admin-brand{display:flex;align-items:center;gap:11px;padding:4px 10px 25px;border-bottom:1px solid rgba(255,255,255,.08)}
.admin-brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-size:20px;box-shadow:0 8px 22px rgba(124,58,237,.28)}
.admin-brand-text{display:flex;flex-direction:column;min-width:0}.admin-brand-text strong{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-brand-text span{font-size:10px;color:#9892ae;margin-top:2px;letter-spacing:.08em;text-transform:uppercase}
.admin-section-label{font-size:9px;font-weight:900;letter-spacing:.14em;color:#77718f;padding:22px 12px 8px}
.admin-menu{display:flex;flex-direction:column;gap:4px}.admin-menu-item{position:relative;display:flex;align-items:center;gap:11px;min-height:44px;padding:10px 12px;border-radius:12px;color:#aaa4bd;font-size:13px;font-weight:750;text-decoration:none;transition:.18s}.admin-menu-item:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}.admin-menu-item.active{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;box-shadow:0 9px 22px rgba(109,40,217,.22)}.admin-menu-icon{width:22px;text-align:center;font-size:17px;color:inherit}.admin-menu-badge{margin-left:auto;min-width:22px;height:21px;padding:0 6px;border-radius:99px;display:grid;place-items:center;background:#f59e0b;color:#fff;font-size:10px}
.admin-sidebar-spacer{flex:1}.admin-sidebar-card{margin:14px 4px 10px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.045)}.admin-sidebar-card-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(139,92,246,.18);color:#c4b5fd;margin-bottom:9px}.admin-sidebar-card strong,.admin-sidebar-card small{display:block}.admin-sidebar-card strong{font-size:12px;color:#fff}.admin-sidebar-card small{font-size:10px;color:#89839f;line-height:1.45;margin:3px 0 10px}.admin-sidebar-card a{font-size:10px;font-weight:800;color:#c4b5fd}.admin-logout{display:flex;gap:9px;align-items:center;padding:10px 12px;color:#9d97b1;font-size:12px;font-weight:700;border-radius:10px}.admin-logout:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.admin-content-shell{margin-left:252px;min-width:0;flex:1}.admin-header{height:78px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid #e8e8ef;display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:100}.admin-header-left{display:flex;align-items:center;gap:14px}.admin-breadcrumb{font-size:10px;color:#9995a5;font-weight:700;margin-bottom:2px}.admin-breadcrumb span{padding:0 5px;color:#c8c5cf}.admin-header h1{margin:0;font-size:20px;letter-spacing:-.02em;color:#171327}.admin-header-actions{display:flex;align-items:center;gap:12px}.admin-view-store{height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border:1px solid #e3e1e9;border-radius:10px;background:#fff;color:#514b62;font-size:12px;font-weight:800}.admin-view-store:hover{text-decoration:none;background:#faf9fc}.admin-avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#eee8ff;color:#6d28d9;font-weight:900;font-size:13px}.admin-mobile-toggle{display:none;border:0;background:#f1eff6;border-radius:10px;width:38px;height:38px;font-size:19px;color:#4b4459}
.admin-main{width:100%;max-width:1540px;margin:0 auto;padding:28px 34px 48px}.admin-alert{border-radius:12px;box-shadow:none}
.admin-main .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.admin-main .stat{border:1px solid #e7e5ed;border-radius:18px;background:#fff;padding:19px 20px;box-shadow:0 7px 24px rgba(31,24,56,.04);min-height:118px;position:relative;overflow:hidden}.admin-main .stat:before{content:"";position:absolute;right:-25px;top:-25px;width:95px;height:95px;border-radius:50%;background:#f4efff}.admin-main .stat span{position:relative;z-index:1;font-size:10px;letter-spacing:.08em;color:#918c9d;font-weight:900}.admin-main .stat b{position:relative;z-index:1;display:block;font-size:25px;letter-spacing:-.04em;margin-top:8px;color:#211b31}.admin-main .stat .small{position:relative;z-index:1;margin-top:4px;color:#8b8793}.admin-main .stat.alert-stat{border-color:#eadcff}.admin-main .stat.alert-stat b{color:#6d28d9}
.admin-main .section-head{margin:4px 0 13px}.admin-main .section-head h2{font-size:16px;color:#211b31}.admin-main .section-head a{font-size:12px;font-weight:800;color:#6d28d9}.admin-main .cart-layout{gap:18px}.admin-main .alist{border:1px solid #e8e6ee;border-radius:17px;background:#fff;overflow:hidden;box-shadow:0 7px 24px rgba(31,24,56,.035)}.admin-main .arow{padding:15px 17px;border-bottom:1px solid #f0eef4;min-height:70px}.admin-main .arow:last-child{border-bottom:0}.admin-main .arow:hover{background:#faf9fd}.admin-main .arow .t{font-weight:800;font-size:13px;color:#2b2538}.admin-main .arow .s{font-size:11px;color:#9893a1;margin-top:3px}.admin-main .arow .r{gap:7px}.admin-main .card{border:1px solid #e8e6ee;border-radius:17px;box-shadow:0 7px 24px rgba(31,24,56,.035)}.admin-main .card-pad{padding:19px}.admin-main .card h3{font-size:14px;color:#241e33}.admin-main .srow{border-bottom:1px solid #f1eff4;padding:9px 0!important}.admin-main .srow:last-child{border-bottom:0}.admin-main .list-head{margin-bottom:15px}.admin-main .list-head h1{font-size:19px;letter-spacing:-.03em}.admin-main .btn{border-radius:10px}.admin-main .btn-outline{background:#fff}.admin-main table{border-collapse:separate;border-spacing:0;width:100%;background:#fff;border:1px solid #e8e6ee;border-radius:16px;overflow:hidden}.admin-main th{background:#faf9fc;color:#8b8695;font-size:10px;text-transform:uppercase;letter-spacing:.07em;text-align:left;padding:12px 14px;border-bottom:1px solid #eceaf0}.admin-main td{padding:13px 14px;border-bottom:1px solid #f0eef4;font-size:13px}.admin-main tr:last-child td{border-bottom:0}.admin-main tr:hover td{background:#fcfbfe}.admin-main .field label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#726c7e}.admin-main input,.admin-main select,.admin-main textarea{border-color:#e2dfe9;border-radius:10px;box-shadow:none}.admin-main input:focus,.admin-main select:focus,.admin-main textarea:focus{outline:3px solid #ede5ff;border-color:#8b5cf6}.admin-main .tabs{background:#fff;border:1px solid #e8e6ee;padding:5px;border-radius:13px;display:inline-flex;gap:3px;margin-bottom:14px}.admin-main .tabs a{padding:8px 11px;border-radius:9px;font-size:11px;font-weight:800;color:#777182}.admin-main .tabs a.on{background:#eee8ff;color:#6d28d9}.admin-main .actions{gap:7px}.admin-main .receipt-prev{border:1px solid #e5e1eb!important;border-radius:15px!important}.admin-main .summary{border:1px solid #e8e6ee;border-radius:17px;background:#fff;padding:18px}.admin-main .citem{border-bottom:1px solid #efedf3}.admin-main .stock-low{color:#d97706}.admin-main .stock-out{color:#dc2626}
@media(min-width:901px){.admin-main .cart-layout{grid-template-columns:minmax(0,1fr) 350px}}
@media(max-width:1100px){.admin-sidebar{width:220px}.admin-content-shell{margin-left:220px}.admin-header{padding:0 22px}.admin-main{padding:24px 22px 42px}.admin-main .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.admin-sidebar{transform:translateX(-105%);transition:transform .2s;box-shadow:20px 0 45px rgba(20,12,45,.18)}.admin-menu-open .admin-sidebar{transform:translateX(0)}.admin-content-shell{margin-left:0}.admin-header{height:70px;padding:0 14px}.admin-mobile-toggle{display:block}.admin-header h1{font-size:17px}.admin-view-store span{display:none}.admin-main{padding:18px 14px 34px}.admin-main .stats{gap:10px}.admin-main .stat{min-height:105px;padding:15px}.admin-main .stat b{font-size:21px}.admin-main .cart-layout{grid-template-columns:1fr}.admin-main .alist{border-radius:14px}.admin-main table{display:block;overflow-x:auto;white-space:nowrap}.admin-main .tabs{max-width:100%;overflow:auto}.admin-main .row2{grid-template-columns:1fr}.admin-main .card-pad{padding:15px}}
@media(max-width:520px){.admin-main .stats{grid-template-columns:1fr 1fr}.admin-main .stat span{font-size:9px}.admin-main .stat b{font-size:18px}.admin-main .arow{padding:13px}.admin-header-actions{gap:7px}.admin-avatar{width:34px;height:34px}.admin-breadcrumb{display:none}}

/* J&T tracking */
.tracking-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn-jnt { background:#e31837; border-color:#e31837; color:#fff !important; }
.btn-jnt:hover { background:#c9142f; border-color:#c9142f; color:#fff !important; }

.admin-track { margin-top:4px; }
.admin-track a { color:#e31837; font-weight:700; text-decoration:none; }


/* J&T API */
.jnt-create-box{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;margin:12px 0;border:1px solid #f3c3cc;background:#fff7f8;border-radius:14px}
.jnt-create-box>div{display:flex;flex-direction:column;gap:3px}
.btn-jnt{background:#e31837;border-color:#e31837;color:#fff!important}
.btn-jnt:hover{background:#c9142f;border-color:#c9142f}
.tracking-actions form{display:inline-flex}
@media(max-width:640px){.jnt-create-box{align-items:stretch;flex-direction:column}.jnt-create-box form,.jnt-create-box .btn{width:100%}}