*{box-sizing:border-box}
:root{
  font-family:"Noto Sans Myanmar","Inter","Plus Jakarta Sans",system-ui,sans-serif;
  color:#0f172a;
  background:#f6f7fa;
  --hm-navy:#0b2e6f;
  --hm-orange:#ff8a00;
  --hm-radius-md:14px;
  --hm-radius-lg:16px;
  --hm-shadow-card:0 8px 24px rgba(15,23,42,.06);
  --hm-ease:cubic-bezier(.22,1,.36,1);
  --hm-btn-h:44px;
  --hm-input-h:44px;
}
body{margin:0;-webkit-font-smoothing:antialiased}

/* Topbar — same pattern as IN SHOP */
.topbar{height:56px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:12px;padding:0 14px;position:sticky;top:0;z-index:20}
.back{text-decoration:none;color:#0b2e6f;font-weight:800;font-size:13px;white-space:nowrap;padding:8px 12px;border-radius:10px;border:1px solid #e8eef8;background:#eef3fb}
.back:hover{background:#e8eef8}
.brand{font-weight:900;font-size:14px}
.pill{background:#e8eef8;color:#15448d;font-size:10px;padding:3px 8px;border-radius:999px;margin-left:6px}
.menu-toggle{display:none;border:1px solid #e2e8f0;background:#fff;border-radius:10px;width:40px;height:40px;font-size:18px;cursor:pointer}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon{border:1px solid #e2e8f0;background:#fff;border-radius:10px;width:36px;height:36px;cursor:pointer}
.user{text-align:right;line-height:1.2}.user b{display:block;font-size:12px}.user small{color:#64748b;font-size:11px}

/* App shell */
.app{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 56px)}
.sidebar{background:#0b1220;color:#e2e8f0;padding:12px 8px 28px;overflow:auto;position:sticky;top:56px;height:calc(100vh - 56px)}
.shop-chip{background:rgba(255,255,255,.06);border-radius:12px;padding:10px;margin:0 4px 10px}
.shop-chip b{display:block;font-size:13px}.shop-chip small{color:#94a3b8;font-size:11px}
.g-label{font-size:10px;font-weight:800;letter-spacing:.06em;color:#64748b;padding:12px 10px 4px}
.nav{display:block;width:100%;border:0;background:transparent;color:#e2e8f0;text-align:left;padding:10px 12px;border-radius:10px;font-weight:650;font-size:12.5px;cursor:pointer;margin:2px 0;text-decoration:none;transition:background .18s ease,color .18s ease}
.nav:hover{background:rgba(255,255,255,.06)}.nav.active{background:#0b2e6f;color:#fff}
.nav.inshop-entry{color:#ffb12a}.nav.logout{color:#fca5a5;margin-top:8px}
.nav[hidden]{display:none!important}

.main{padding:18px 20px 48px}
.panel{display:none}.panel.active{display:block}

/* Hero — match IN SHOP */
.hero{display:flex;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#0f172a,#0b2e6f);color:#fff;border-radius:16px;padding:18px;margin-bottom:12px;flex-wrap:wrap}
.tag{font-size:10px;font-weight:900;background:rgba(255,255,255,.15);padding:3px 8px;border-radius:999px}
.hero h1{margin:8px 0 4px;font-size:22px}.hero p{margin:0;opacity:.9;font-size:13px}
.hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.hero-meta{background:rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;font-size:12px}
.inshop-cta{border:0;background:#fff;color:#0b2e6f;border-radius:10px;padding:10px 14px;font-weight:800;font-size:12px;cursor:pointer}
.inshop-cta[hidden]{display:none!important}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.kpis article{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px;box-shadow:0 4px 14px rgba(15,23,42,.04);transition:box-shadow .22s cubic-bezier(.22,1,.36,1)}.kpis article:hover{box-shadow:0 8px 22px rgba(15,23,42,.07)}
.kpis small{color:#64748b;font-size:11px}.kpis strong{display:block;font-size:18px;margin:4px 0}
.kpis em{font-style:normal;font-size:11px;color:#64748b}.kpis em.up{color:#16a34a}

.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;margin-bottom:12px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:0 4px 14px rgba(15,23,42,.04);transition:box-shadow .22s cubic-bezier(.22,1,.36,1)}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;flex-wrap:wrap}
.card-h h2{margin:0;font-size:16px;font-weight:800;font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif}
.muted{color:#64748b;font-size:12px;margin:2px 0 0}
.link{border:0;background:none;color:#0b2e6f;font-weight:700;font-size:12px;cursor:pointer}

.seg{display:flex;gap:4px}
.seg button{border:1px solid #e2e8f0;background:#f8fafc;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700;cursor:pointer}
.seg button.on{background:#0b2e6f;color:#fff;border-color:#0b2e6f}

.chart-meta{display:flex;gap:20px;margin-bottom:8px;flex-wrap:wrap}
.chart-meta span{display:block;font-size:11px;color:#64748b}
.chart-meta strong{font-size:15px}
.chart-meta .up{color:#16a34a}.chart-meta .down{color:#dc2626}
.chart-box{height:160px;background:#fafbfc;border-radius:10px;border:1px solid #e2e8f0}
.chart-box svg{width:100%;height:100%}
.chart-legend{display:flex;gap:12px;margin-top:8px;font-size:11px;color:#64748b}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:middle}

.status-col{display:grid;gap:8px}
.status-box{border:1px solid #e2e8f0;border-radius:12px;padding:12px;background:#f8fafc}
.status-box b{display:block;font-size:11px;color:#64748b}
.status-box strong{display:block;font-size:22px;margin:4px 0}
.status-box span{font-size:11px;color:#94a3b8}
.status-box.pending{background:#fffbeb}.status-box.prep{background:#eef3fb}.status-box.ready{background:#ecfdf5}

.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{text-align:left;color:#64748b;font-size:11px;padding:8px 6px;border-bottom:1px solid #e2e8f0}
.tbl td{padding:10px 6px;border-bottom:1px solid #f1f5f9}
.empty-td{text-align:center;color:#64748b;padding:20px!important}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.b,.badge{padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800}
.badge.pending{background:#fef3c7;color:#b45309}
.badge.preparing{background:#e8eef8;color:#15448d}
.badge.ready{background:#dcfce7;color:#15803d}
.action-btn{border:1px solid #e2e8f0;background:#fff;border-radius:8px;padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer}
.action-btn.primary{background:#0b2e6f;color:#fff;border-color:#0b2e6f}

.stock-list{display:grid;gap:8px}
.stock,.low-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e2e8f0;border-radius:10px;padding:10px}
.stock b,.low-item .name{font-size:13px;font-weight:700}
.stock span,.low-item .meta{font-size:12px;color:#64748b}
.stock em,.low-item .stock{font-style:normal;font-size:11px;font-weight:800}
.stock.warn,.low-item.warn{background:#fffbeb}
.stock.danger,.low-item.danger{background:#fef2f2}

.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.quick button{border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:12px;font-weight:700;font-size:12px;cursor:pointer;text-align:left}
.quick button:hover{border-color:#ffb12a;background:#eef3fb}

.panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.panel-h h2{margin:0}
.primary{border:0;background:#0b2e6f;color:#fff;border-radius:10px;padding:10px 16px;font-weight:800;font-size:13px;cursor:pointer}
.placeholder,.hint{background:#fff;border:1px dashed #cbd5e1;border-radius:12px;padding:16px;color:#64748b;font-size:13px}
.hint{border-style:solid;margin-top:10px}
.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;font-weight:700;color:#64748b;margin-bottom:12px}

.form-card{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card label{display:grid;gap:4px;font-size:12px;font-weight:700;color:#334155}
.form-card input,.form-card select,.form-card textarea{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;font:inherit;background:#f8fafc}
.form-card .wide{grid-column:1/-1}
.role-grid{display:grid;gap:8px}
.role-chip{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.role-chip b{min-width:80px}.role-chip span{font-size:12px;color:#64748b}
.setting-list{display:grid;gap:8px}
.setting-list div{display:flex;justify-content:space-between;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;font-size:13px;font-weight:600}
.setting-list span{color:#64748b;font-weight:500}

.order-toast{position:fixed;right:16px;bottom:16px;z-index:50;background:#0f172a;color:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:10px;min-width:260px;max-width:calc(100vw - 32px)}
.order-toast[hidden]{display:none}
.toast-body strong{display:block;font-size:12px;opacity:.8}
.toast-body span{font-size:13px;font-weight:700}
.toast-actions{display:flex;gap:8px;justify-content:flex-end}
.toast-actions .ghost{border:1px solid #475569;background:transparent;color:#e2e8f0;border-radius:8px;padding:6px 10px;cursor:pointer;font-weight:700;font-size:12px}
.toast-actions .primary{border:0;background:#0b2e6f;color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font-weight:700;font-size:12px}

/* Mobile */
@media(max-width:960px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:56px;bottom:0;width:min(280px,85vw);z-index:30;
    transform:translateX(-105%);transition:transform .2s ease;
    height:auto;box-shadow:8px 0 30px rgba(0,0,0,.25)
  }
  .sidebar.open{transform:translateX(0)}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .grid-2,.kpis{grid-template-columns:1fr 1fr}
  .quick{grid-template-columns:1fr 1fr}
  .form-card{grid-template-columns:1fr}
  .user{display:none}
}
@media(max-width:560px){
  .kpis,.grid-2,.quick{grid-template-columns:1fr}
  .hero{flex-direction:column}
  .hero-actions{align-items:stretch}
  .back{font-size:12px;padding:6px 10px}
  .brand{font-size:13px}
  .main{padding:12px 10px 32px}
  .tbl{font-size:11px}
  .action-btn{padding:4px 8px}
}


/* Premium seller polish */
.topbar{backdrop-filter:blur(12px);background:rgba(255,255,255,.95)}
.nav:hover{background:rgba(255,255,255,.08)}
.nav.active{box-shadow:0 4px 12px rgba(37,99,235,.25)}
button, .back, .icon{transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease}
button:active:not(:disabled), .back:active, .icon:active{transform:scale(.97)}


/* Brand unified seller */
.back{color:#0b2e6f;border-color:#d6e0f0;background:#eef3fb}
.back:hover{background:#e0eaf8}
.pill{background:#fff3e0;color:#c45f00}
.nav.active{background:#0b2e6f;color:#fff;box-shadow:0 4px 14px rgba(11,46,111,.28)}
.nav.inshop-entry{color:#ffb12a}
.seg button.on{background:#0b2e6f;color:#fff;border-color:#0b2e6f}
.kpis article,.card{border-radius:16px}
.hm-fade-in{animation:hm-fade-in .32s cubic-bezier(.16,1,.3,1) both}
@keyframes hm-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}


/* sticky table polish */
.table-wrap, .tbl-wrap { overflow:auto; border-radius:14px; border:1px solid #e2e8f0; background:#fff; }
.tbl thead th { position:sticky; top:0; z-index:1; background:#f8fafc; }
.tbl tbody tr:hover { background:#f8fafc; }
.tbl td, .tbl th { padding:11px 10px; }

/* Followers + Shop Chat */
.msg-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.4fr);gap:12px;align-items:start}
@media(max-width:800px){.msg-layout{grid-template-columns:1fr}}
.msg-threads{max-height:min(70vh,560px);overflow:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
.msg-thread-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 12px;border:1px solid #e8eef6;border-radius:12px;background:#fff;cursor:pointer;font:inherit}
.msg-thread-item:hover{border-color:#cbd5e1;background:#f8fafc}
.msg-thread-item b{font-size:13px;color:#0f172a}
.msg-thread-item .muted,.msg-thread-item span{font-size:12px;color:#64748b}
.msg-thread-item small{font-size:10px;color:#94a3b8}
.msg-thread{display:flex;flex-direction:column;min-height:360px;max-height:min(70vh,560px);padding:0;overflow:hidden}
.msg-thread-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #e8eef6}
.msg-thread-body{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#f8fafc}
.msg-thread-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #e8eef6}
.msg-thread-form input{flex:1;height:42px;border-radius:12px;border:1px solid #e2e8f0;padding:0 12px;font:inherit}
.msg-thread-form button{height:42px;padding:0 16px}
.sf-chat-bubble{max-width:85%;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.4;word-break:break-word}
.sf-chat-bubble.me{align-self:flex-end;background:#0b2e6f;color:#fff;border-bottom-right-radius:4px}
.sf-chat-bubble.them{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:4px}
#followerCountPill{background:#fff1f2;color:#be123c;font-weight:800}

/* Shop logo/cover upload + live preview */
.shop-media-block{margin-top:12px;padding-top:12px;border-top:1px solid #e8eef6}
.shop-media-title{font-size:13px;font-weight:800;color:#0b2e6f;margin-bottom:8px}
.shop-upload-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.shop-upload-row{grid-template-columns:1fr}}
.shop-upload-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.shop-upload-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.shop-logo-preview{width:72px;height:72px;border-radius:18px;background:#e8eef8;overflow:hidden;display:grid;place-items:center;font-size:28px;font-weight:800;color:#0b2e6f;border:2px solid #fff;box-shadow:0 4px 12px rgba(15,23,42,.08)}
.shop-logo-preview img{width:100%;height:100%;object-fit:cover}
.shop-cover-preview{width:100%;aspect-ratio:16/7;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#c7d7f0,#e8eef8);position:relative}
.shop-cover-preview img{width:100%;height:100%;object-fit:cover;display:block}
.shop-cover-fallback{position:absolute;inset:0;background:linear-gradient(135deg,#9db5de,#d6e2f5)}

.sf-preview{border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.06);max-width:420px}
.sf-preview-cover{position:relative;height:120px;background:linear-gradient(135deg,#9db5de,#d6e2f5)}
.sf-preview-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sf-preview-cover-fallback{position:absolute;inset:0;background:linear-gradient(135deg,#9db5de,#d6e2f5)}
.sf-preview-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.35),transparent 55%)}
.sf-preview-status{position:absolute;top:10px;right:10px;background:#16a34a;color:#fff;font-size:10px;font-weight:800;padding:4px 8px;border-radius:999px}
.sf-preview-status.is-closed{background:#94a3b8}
.sf-preview-id{display:flex;gap:12px;align-items:center;padding:12px 14px 4px}
.sf-preview-logo{width:52px;height:52px;border-radius:14px;background:#e8eef8;overflow:hidden;display:grid;place-items:center;font-weight:800;color:#0b2e6f;border:2px solid #fff;margin-top:-28px;box-shadow:0 4px 12px rgba(15,23,42,.12);flex:none}
.sf-preview-logo img{width:100%;height:100%;object-fit:cover}
.sf-preview-name{font-size:15px;font-weight:800;color:#0f172a}
.sf-preview-meta{font-size:11px;color:#64748b;margin-top:2px}
.sf-preview-desc{padding:0 14px 14px;font-size:12px;color:#64748b;margin:0}


/* Unified back button — identical to Customer .screen-title button */
a.hm-back, .hm-back{
  flex:none !important;
  width:38px !important;
  height:38px !important;
  min-width:38px;
  max-width:38px;
  display:inline-grid !important;
  place-items:center;
  border-radius:12px !important;
  background:#fff !important;
  border:1px solid #e2e8f0 !important;
  color:#0b2e6f !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1;
  text-decoration:none !important;
  padding:0 !important;
  box-shadow:none;
  transition:background .15s ease, transform .12s ease;
}
a.hm-back:hover, .hm-back:hover{background:#f1f5f9 !important}
a.hm-back:active, .hm-back:active{transform:scale(.96)}

/* Hide legacy text back styles if any class conflict */
.topbar .back{display:none !important}

/* Mobile-first shop media */
@media(max-width:720px){
  .shop-upload-row{grid-template-columns:1fr}
  .sf-preview{max-width:100%}
  .top-actions .user small{display:none}
  .brand{font-size:13px}
  .panel-h{flex-direction:column;align-items:flex-start}
  .form-card label{display:block}
  .shop-upload-card{width:100%}
  .shop-cover-preview{aspect-ratio:16/8}
}
@media(max-width:900px){
  .msg-layout{grid-template-columns:1fr}
}


/* Mobile seller shell */
@media(max-width:768px){
  .topbar{padding:0 10px;gap:8px;height:52px}
  .top-actions .user{display:none}
  .menu-toggle{display:inline-grid}
  .sidebar{
    position:fixed;left:0;top:52px;bottom:0;z-index:30;
    transform:translateX(-105%);
    transition:transform .22s ease;
    width:min(86vw,280px);
    box-shadow:8px 0 28px rgba(15,23,42,.18);
  }
  .sidebar.open{transform:translateX(0)}
  .main{padding:12px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .form-card{display:flex;flex-direction:column;gap:10px}
  .form-card label{width:100%}
  .form-card input,.form-card select,.form-card textarea{
    width:100%;min-height:44px;font-size:16px; /* prevent iOS zoom */
  }
  .shop-upload-row{grid-template-columns:1fr}
  .primary, .ghost{min-height:44px}
  #previewStorefront{width:100%;justify-content:center}
}


/* H-MARKET system back — same as customer .screen-title > button */
a.hm-back, .hm-back, #sellerBackBtn{
  flex:none !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:12px !important;
  background:#fff !important;
  border:1px solid #e2e8f0 !important;
  color:#0b2e6f !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  cursor:pointer;
}
a.hm-back:hover, .hm-back:hover{ background:#f1f5f9 !important; }
a.hm-back:active, .hm-back:active{ transform:scale(.96); }
.topbar .brand{ display:flex; align-items:center; gap:10px; }

/* Searchable location combo */
.loc-combo{position:relative}
.loc-combo input[type=text]{
  width:100%;height:42px;border-radius:12px;border:1px solid #e2e8f0;
  padding:0 12px;font:inherit;background:#fff;
}
.loc-combo input[type=text]:disabled{background:#f8fafc;color:#94a3b8}
.loc-combo-list{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;
  max-height:220px;overflow:auto;background:#fff;border:1px solid #e2e8f0;
  border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.12);padding:6px;
}
.loc-combo-list button{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:10px 12px;border-radius:10px;font:inherit;cursor:pointer;color:#0f172a;
}
.loc-combo-list button:hover,.loc-combo-list button.is-active{background:#eef4ff;color:#0b2e6f}
.loc-combo-list .loc-empty{padding:12px;color:#94a3b8;font-size:13px;text-align:center}

/* Save feedback */
#saveShopBtn.is-saved{
  background:#059669 !important;
  border-color:#059669 !important;
  color:#fff !important;
}
.shop-save-msg.is-ok{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#047857;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
}
.shop-save-msg.is-err{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#b91c1c;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
}
.shop-save-toast{
  position:fixed;
  top:72px;
  left:50%;
  transform:translateX(-50%);
  z-index:10050;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:14px;
  box-shadow:0 12px 40px rgba(15,23,42,.18);
  font:700 14px/1.3 system-ui,sans-serif;
  max-width:min(420px, calc(100vw - 24px));
}
.shop-save-toast[hidden]{display:none !important}
.shop-save-toast.is-ok{background:#059669;color:#fff}
.shop-save-toast.is-err{background:#b91c1c;color:#fff}
.shop-save-toast .toast-check{
  width:28px;height:28px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.2);font-size:16px;flex-shrink:0;
}


/* ===== Seller bottom nav (customer-style) ===== */
.seller-bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:64px; padding-bottom:env(safe-area-inset-bottom,0);
  display:flex; align-items:stretch; justify-content:space-around;
  background:rgba(255,255,255,.98);
  border-top:1px solid #e8eef6;
  box-shadow:0 -6px 24px rgba(10,33,69,.06);
}
a.s-nav-item{text-decoration:none;color:inherit}
.s-nav-item{
  flex:1; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size:10px; font-weight:800; color:#6f7c91;
  padding:6px 4px;
}
.s-nav-item .s-nav-ico{ font-size:18px; line-height:1; }
.s-nav-item.active{ color:#0b2e6f; }
.app{ padding-bottom:76px; }
body{ padding-bottom:0; }

.seller-account-card{
  background:#fff; border:1px solid #e8eef6; border-radius:16px; padding:16px;
  box-shadow:0 6px 20px rgba(10,33,69,.04);
}
.seller-account-profile{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  padding-bottom:14px; border-bottom:1px solid #eef2f7;
}
.seller-account-avatar{
  width:52px; height:52px; border-radius:16px;
  background:linear-gradient(145deg,#0b2e6f,#1d4ed8);
  color:#fff; display:grid; place-items:center; font-weight:900; font-size:20px;
}
.seller-account-profile b{ display:block; font-size:15px; color:#0b2e6f; }
.seller-account-profile small{ color:#6f7c91; font-size:11px; }
.seller-account-menu{ display:grid; gap:8px; }
.seller-account-row{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; text-align:left; padding:12px 13px;
  border:1px solid #e8eef6; border-radius:13px; background:#fff;
  font-size:12px; font-weight:800; color:#0b2e6f; cursor:pointer;
}
.seller-account-row:hover{ background:#f7faff; border-color:#cbdaf1; }
.seller-account-row span{ color:#94a3b8; }
.seller-logout-btn{
  width:100%; margin-top:14px; padding:12px; border-radius:13px;
  border:1px solid #fecaca; background:#fff5f5; color:#b91c1c;
  font-weight:900; font-size:13px; cursor:pointer;
}
.hm-back-spacer{ width:40px; height:40px; display:inline-block; }

@media (min-width:901px){
  /* Desktop: keep sidebar, bottom nav still useful on tablet */
  .seller-bottom-nav{ height:60px; }
}


/* ===== Mobile-first Seller Account UI (customer-style) ===== */
.seller-top{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e8eef6;
  backdrop-filter:blur(10px);
}
.seller-top-inner{
  max-width:560px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
}
.seller-brand{display:flex; align-items:center; gap:10px}
.seller-brand img{border-radius:10px}
.seller-brand b{display:block; font-size:15px; color:#0b2e6f; font-weight:900}
.seller-brand small{font-size:10px; color:#6f7c91; font-weight:700}
.seller-icon-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid #e8eef6;
  background:#fff; font-size:16px; cursor:pointer;
}

.seller-app-mobile .sidebar{ display:none !important; }
.seller-app-mobile .main{
  max-width:560px;
  margin:0 auto;
  padding:12px 12px 88px;
  width:100%;
}
.seller-app-mobile{
  display:block !important;
  min-height:100vh;
  background:#f4f7fb;
}

.sd-wrap{ display:flex; flex-direction:column; gap:12px; }
.sd-profile-card{
  display:flex; gap:12px; align-items:center;
  background:#fff; border:1px solid #e8eef6; border-radius:18px;
  padding:14px; box-shadow:0 6px 20px rgba(10,33,69,.04);
}
.sd-avatar{
  width:56px; height:56px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(145deg,#0b2e6f,#1d4ed8);
  color:#fff; display:grid; place-items:center; font-weight:900; font-size:22px;
}
.sd-profile-info{ min-width:0; }
.sd-profile-info h2{ margin:0; font-size:16px; color:#0b2e6f; font-weight:900; }
.sd-profile-info p{ margin:2px 0 0; font-size:12px; color:#6f7c91; }
.sd-shop-line{ font-size:11px !important; color:#94a3b8 !important; }

.sd-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.sd-stat{
  background:#fff; border:1px solid #e8eef6; border-radius:14px;
  padding:10px 6px; text-align:center;
}
.sd-stat b{ display:block; font-size:15px; color:#0b2e6f; font-weight:900; }
.sd-stat small{ font-size:9px; color:#6f7c91; font-weight:700; }

.sd-menu-group{
  background:#fff; border:1px solid #e8eef6; border-radius:16px;
  overflow:hidden; box-shadow:0 4px 14px rgba(10,33,69,.03);
}
.sd-group-title{
  padding:10px 14px 6px; font-size:11px; font-weight:900;
  color:#64748b; letter-spacing:.02em;
}
.sd-menu-item{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border:0; border-top:1px solid #f1f5f9;
  background:#fff; font-size:14px; font-weight:800; color:#0b2e6f;
  cursor:pointer; text-align:left;
}
.sd-menu-item:active{ background:#f5f8fc; }
.sd-menu-item span:last-child{ color:#94a3b8; font-weight:700; }
.sd-logout{ color:#b91c1c !important; }

.sd-inshop-btn{
  width:100%; padding:12px; border-radius:14px; border:0;
  background:#0b2e6f; color:#fff; font-weight:900; font-size:13px;
}

.sd-back{
  width:36px; height:36px; border-radius:10px; border:1px solid #e8eef6;
  background:#fff; font-size:16px; cursor:pointer; margin-right:8px;
  flex-shrink:0;
}
.panel-h{
  display:flex !important; align-items:center; gap:4px;
  margin-bottom:12px;
}
.panel .panel-h h2{ font-size:17px; }

/* hide old wide desktop chrome when present */
.topbar, .hero, .kpis, .grid-2, .chart-box{ }
body{ background:#f4f7fb; }

@media (min-width:700px){
  .seller-app-mobile .main{ padding:16px 16px 88px; }
}