:root{--bd:#e5e7eb;--fg:#111827;--muted:#6b7280;--bg:#f9fafb;--card:#fff;--pri:#111827;--pri-fg:#fff;}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg);}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:16px;}
.nav{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:20}
.nav .brand{display:flex;gap:10px;align-items:center;font-weight:700}
.nav img{height:28px;width:28px;border-radius:8px;object-fit:cover}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;}
.grid{display:grid;gap:12px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.prod-grid{}
@media (max-width:900px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}

  /* www 客户端：商品列表移动端至少 2 列 */
  body.client .prod-grid{grid-template-columns:repeat(2,1fr) !important}
  body.client .prod-grid .prod img{height:140px}
}
.muted{color:var(--muted);font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bd);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--pri);color:var(--pri-fg);border-color:var(--pri)}
.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.input, textarea, select{border:1px solid var(--bd);border-radius:10px;padding:8px 10px;background:#fff;min-width:180px}
textarea{min-width:260px}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--bd);border-radius:14px;overflow:hidden}
.table th,.table td{border-bottom:1px solid var(--bd);padding:10px;text-align:left;font-size:14px;vertical-align:top}
.table th{background:#f3f4f6}
.pill{display:inline-block;padding:2px 8px;border:1px solid var(--bd);border-radius:999px;font-size:12px;background:#fff}
.kf-float{position:fixed;right:14px;bottom:96px;display:flex;flex-direction:column;gap:10px;z-index:999}
.kf-btn{width:52px;height:52px;border-radius:999px;border:1px solid var(--bd);background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.08);cursor:pointer}
.kf-btn img{width:26px;height:26px}
.banner{border-radius:16px;overflow:hidden;border:1px solid var(--bd);background:#fff}
.banner img{width:100%;height:320px;object-fit:cover;display:block}
@media (max-width:560px){.banner img{height:190px}}
.prod{display:flex;flex-direction:column;gap:8px}
.prod img{width:100%;height:200px;object-fit:cover;border-radius:12px;border:1px solid var(--bd);background:#fff}
.price{font-weight:800}


/* ---- Biz sidebar layout ---- */
.layout{display:flex;min-height:100vh}
.sider{width:220px;background:#fff;border-right:1px solid var(--bd);padding:16px;display:flex;flex-direction:column;gap:10px;position:sticky;top:0;height:100vh}
.sider-brand{font-weight:900;font-size:16px}
.sider-sub{font-size:12px}
.menu{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.menu-item{display:block;padding:10px 12px;border-radius:12px;color:var(--fg);text-decoration:none;border:1px solid transparent}
.menu-item:hover{background:var(--bg);border-color:var(--bd)}
.menu-item.active{background:#eef2ff;border-color:#c7d2fe;font-weight:800}
.main{flex:1;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--bd);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
.content{padding:18px}

/* ---- Report cards ---- */
.report-card{min-height:420px}
.report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.report-metrics{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.kv{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--bd);border-radius:14px;background:var(--bg);flex:1;min-width:150px}
.report-form{margin-top:10px}
.report-results{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}

/* ---- Client content pages ---- */
.img-content{width:100%;max-width:100%;height:auto;display:block;object-fit:contain;border-radius:14px;border:1px solid var(--bd);background:#fff}
.richtext{font-size:15px;line-height:1.75}
.richtext p{margin:0 0 10px}
.richtext h1,.richtext h2,.richtext h3{margin:16px 0 8px;line-height:1.25}
.richtext ul,.richtext ol{padding-left:22px;margin:0 0 10px}
.richtext img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--bd);display:block;margin:10px 0;background:#fff}
.richtext a{color:var(--pri);text-decoration:underline}

/* ---- Simple rich editor (admin pages) ---- */
.editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.editor-toolbar .btn{padding:8px 10px}
.editor-box{min-height:260px;border:1px solid var(--bd);border-radius:14px;padding:12px;background:#fff;outline:none}
.editor-box:focus{box-shadow:0 0 0 3px rgba(99,102,241,.18)}


/* ===== Client bottom navigation ===== */
.bottomnav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.08);
  z-index: 50;
}
.bottomnav a{
  padding: 12px 8px;
  text-align: center;
  font-weight: 800;
  color: var(--muted);
  text-decoration: none;
}
.bottomnav a.active{
  color: var(--fg);
}
.avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(0,0,0,0.08);
}
.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .grid2{ grid-template-columns: 1fr; }
}
.alert{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 196, 0, 0.18);
  border: 1px solid rgba(255, 196, 0, 0.35);
  color: var(--fg);
}
.card-link{ text-decoration:none; color: inherit; }
.card-link:hover{ box-shadow: 0 10px 24px rgba(0,0,0,0.10); transform: translateY(-1px); transition: all .12s ease; }



.logo{height:28px;width:28px;border-radius:8px;object-fit:cover;display:block}


/* ===== Admin theme ===== */
body.admin{--pri:#22c55e;--pri-fg:#ffffff;--bg:#f5f6f8;--card:#ffffff;--fg:#0f172a;--muted:#64748b;}
body.admin .sider{background:#0b1220;border-right:1px solid rgba(255,255,255,0.10)}
body.admin .sider-brand{color:#ffffff}
body.admin .sider-sub{color:rgba(255,255,255,0.70)}
body.admin .menu-item{color:rgba(255,255,255,0.80)}
body.admin .menu-item:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.10)}
body.admin .menu-item.active{background:rgba(34,197,94,0.18);border-color:rgba(34,197,94,0.35);color:#ffffff;font-weight:900}
body.admin .topbar{background:#ffffff}
body.admin .pill{background:rgba(255,255,255,0.06)}
body.admin .table th{background:#f1f5f9}

/* Bottomnav icons */
.bottomnav .nav-ico{display:block;font-size:18px;line-height:1;margin-bottom:4px}
.bottomnav .nav-txt{display:block;font-size:12px;font-weight:900;letter-spacing:.2px}

/* Client "My" menu */
.my-menu{display:flex;flex-direction:column;gap:10px}
.my-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--bd);border-radius:14px;background:#fff;text-decoration:none}
.my-item:hover{box-shadow:0 10px 24px rgba(0,0,0,0.08)}
.my-item .left{display:flex;align-items:center;gap:10px}
.my-item .ico{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.06);font-size:18px}
.my-item .ttl{font-weight:900}
.my-item .sub{font-size:12px;color:var(--muted)}

/* Address cards */
.addr-card{border:1px solid var(--bd);border-radius:16px;padding:12px 14px;background:#fff}
.addr-card .addr-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.addr-card .addr-name{font-weight:900}
.addr-card .addr-badge{font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid var(--bd);background:#f8fafc}

/* Product badges */
.badge-jp{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid rgba(34,197,94,0.35);background:rgba(34,197,94,0.12);font-size:12px;font-weight:900}
.badge-jp .dot{width:6px;height:6px;border-radius:999px;background:var(--pri)}



/* ===== Client My: list rows ===== */
.list-row{display:flex;justify-content:space-between;align-items:center;padding:12px 12px;border:1px solid var(--border);border-radius:14px;background:var(--card);text-decoration:none;color:inherit}
.list-row:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,0.06)}
.list-row .left{display:flex;align-items:center;gap:12px}
.list-row .ico{width:38px;height:38px;border-radius:14px;background:rgba(34,197,94,0.14);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.list-row .right{color:var(--muted);font-size:12px}