/* =====================================================================
   WTDA Pro UI layer - seller front (wtdachina.com)          v1.0 2026-09-28
   Framework: "app shell" pattern used by Airwallex / Stripe / Wise
   dashboards - fixed dark sidebar, slim white header, grey canvas,
   white bordered cards, one accent colour, line icons, 8px grid.

   SAFE BY DESIGN
   - Everything is scoped to html.wp (added by wtda-pro.js only when the
     seller front is showing). Buyer front (buy.wtdausa.com) is untouched.
   - No existing markup, ids or handlers are changed; the JS only adds a
     sidebar and moves #acctChip into the header.
   - Rollback: remove the two <link>/<script> tags, or visit ?pro=0.
   - Style rule honoured: no em dashes in any copy.
   ===================================================================== */

html.wp{
  /* design tokens */
  --wp-side:#0f1724;          /* sidebar */
  --wp-side-2:#162133;        /* sidebar raised */
  --wp-side-ink:#d5dce7;
  --wp-side-mute:#8391a7;
  --wp-side-line:rgba(255,255,255,.08);
  --wp-accent:#c1121f;        /* WTDA seller red - the ONE accent */
  --wp-accent-2:#9a0e18;
  --wp-accent-soft:#fdeef0;
  --wp-accent-line:#f5c6cb;
  --wp-canvas:#f5f6f8;
  --wp-card:#ffffff;
  --wp-line:#e4e7ec;
  --wp-line-2:#eef0f3;
  --wp-ink:#101828;
  --wp-ink-2:#344054;
  --wp-mute:#667085;
  --wp-ok:#067647;  --wp-ok-soft:#ecfdf3;
  --wp-warn:#b54708;--wp-warn-soft:#fffaeb;
  --wp-r:8px;                 /* set to 0 for fully square corners */
  --wp-r-sm:6px;
  --wp-shadow:0 1px 2px rgba(16,24,40,.05);
  --wp-shadow-hover:0 4px 12px -2px rgba(16,24,40,.10),0 2px 4px -2px rgba(16,24,40,.06);
  --wp-sidew:248px;
  --wp-headh:64px;
  --wp-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* re-map the site's own variables so every existing component follows */
  --bg:var(--wp-canvas);--surface:var(--wp-card);--surface-2:#f2f4f7;--border:var(--wp-line);
  --ink:var(--wp-ink);--muted:var(--wp-mute);
  --navy:var(--wp-accent);--navy-2:var(--wp-accent-2);--btn-bg:var(--wp-accent);
  --ring:rgba(193,18,31,.22);--shadow:var(--wp-shadow);--r:var(--wp-r);--maxw:1240px;
}
@media (prefers-color-scheme:dark){
  html.wp:not([data-theme="light"]){
    --wp-side:#0a0f18;--wp-side-2:#111a28;--wp-canvas:#0c121b;--wp-card:#121a26;--wp-line:#243244;--wp-line-2:#1a2535;
    --wp-ink:#e8eef6;--wp-ink-2:#c3cedc;--wp-mute:#93a1b5;--wp-accent:#ef5a64;--wp-accent-2:#d9434d;--wp-accent-soft:#2a1417;--wp-accent-line:#5a2328;
    --wp-ok:#47cd89;--wp-ok-soft:#0f2a1d;--wp-warn:#f5b048;--wp-warn-soft:#2b200c;
    --surface-2:#172131;--ring:rgba(239,90,100,.35);
  }
}
html.wp[data-theme="dark"]{
  --wp-side:#0a0f18;--wp-side-2:#111a28;--wp-canvas:#0c121b;--wp-card:#121a26;--wp-line:#243244;--wp-line-2:#1a2535;
  --wp-ink:#e8eef6;--wp-ink-2:#c3cedc;--wp-mute:#93a1b5;--wp-accent:#ef5a64;--wp-accent-2:#d9434d;--wp-accent-soft:#2a1417;--wp-accent-line:#5a2328;
  --surface-2:#172131;
}

/* ---------- base ---------- */
html.wp body{background:var(--wp-canvas);color:var(--wp-ink);font-family:var(--wp-font);padding-left:var(--wp-sidew);font-size:14px}
html.wp :is(h1,h2,h3){font-family:var(--wp-font);letter-spacing:-.01em}
html.wp #sellerFront .board-head h2{color:var(--wp-ink)}
html.wp button,html.wp input,html.wp select,html.wp textarea{font-family:var(--wp-font)}
html.wp #sellerFront .wrap{max-width:var(--maxw);padding-inline:32px}

/* ---------- sidebar ---------- */
#wp-side{display:none}
html.wp #wp-side{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:var(--wp-sidew);background:var(--wp-side);color:var(--wp-side-ink);z-index:60;border-right:1px solid var(--wp-side-line)}
#wp-side .wp-org{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;border-bottom:1px solid var(--wp-side-line);cursor:pointer}
#wp-side .wp-org img{height:22px;width:auto;filter:brightness(0) invert(1);display:block}
#wp-side .wp-org-txt{min-width:0;border-left:1px solid var(--wp-side-line);padding-left:11px}
#wp-side .wp-org-txt b{display:block;font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wp-side .wp-org-txt small{display:block;font-size:11.5px;color:var(--wp-side-mute);margin-top:1px}
#wp-side nav{flex:1;overflow-y:auto;padding:10px 10px 16px}
#wp-side .wp-grp{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--wp-side-mute);padding:16px 12px 6px}
#wp-side .wp-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:var(--wp-side-ink);font:500 14px/1.2 var(--wp-font);padding:9px 12px;margin:1px 0;border-radius:var(--wp-r-sm)!important;cursor:pointer;text-align:left;position:relative}
#wp-side .wp-item svg{width:18px;height:18px;flex:none;stroke:currentColor;opacity:.85}
#wp-side .wp-item:hover{background:rgba(255,255,255,.06);color:#fff}
#wp-side .wp-item[aria-current="page"]{background:rgba(255,255,255,.09);color:#fff;font-weight:600}
#wp-side .wp-item[aria-current="page"]::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;background:var(--wp-accent);border-radius:0 3px 3px 0!important}
#wp-side .wp-item[aria-current="page"] svg{opacity:1;stroke:#ff8a93}
#wp-side .wp-item .wp-badge{margin-left:auto;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px!important;background:var(--wp-accent);color:#fff}
#wp-side .wp-item.wp-hide{display:none}
#wp-side .wp-foot{border-top:1px solid var(--wp-side-line);padding:12px 18px 16px;font-size:12px;color:var(--wp-side-mute);line-height:1.6}
#wp-side .wp-foot a{color:var(--wp-side-ink);text-decoration:none}
#wp-side .wp-foot a:hover{color:#fff}
#wp-side .wp-guest{margin:6px 10px 10px;padding:14px;background:var(--wp-side-2);border:1px solid var(--wp-side-line);border-radius:var(--wp-r)!important}
#wp-side .wp-guest p{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--wp-side-ink)}
#wp-side .wp-guest button{width:100%;border:0;background:var(--wp-accent);color:#fff;font:600 13px/1 var(--wp-font);padding:10px;border-radius:var(--wp-r-sm)!important;cursor:pointer}
#wp-side .wp-guest button:hover{background:var(--wp-accent-2)}
#wp-side .wp-trust{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--wp-side-mute)}
#wp-side .wp-trust svg{width:14px;height:14px;stroke:#47cd89;flex:none}

/* ---------- header ---------- */
html.wp .topbar{position:sticky;top:0;z-index:50;background:var(--wp-card);backdrop-filter:none;border-bottom:1px solid var(--wp-line)}
html.wp .topbar-inner{height:var(--wp-headh);max-width:none;padding-inline:32px}
html.wp .topbar .brand{display:none}
html.wp #wp-crumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--wp-mute);min-width:0}
html.wp #wp-crumb b{color:var(--wp-ink);font-weight:600;white-space:nowrap}
html.wp #wp-crumb svg{width:14px;height:14px;stroke:currentColor;flex:none}
html.wp #wp-menu{display:none}
html.wp .topright{gap:14px!important}
html.wp #acctChip{font-size:14px}
html.wp #acctChip #ac-login{background:var(--wp-accent)!important;color:#fff!important;padding:9px 16px!important;border-radius:var(--wp-r-sm)!important;font:600 13.5px/1 var(--wp-font)!important}
html.wp #acctChip #ac-login:hover{background:var(--wp-accent-2)!important}
html.wp #langSel select{height:36px;border:1px solid var(--wp-line);border-radius:var(--wp-r-sm)!important;background:var(--wp-card);color:var(--wp-ink);padding:0 30px 0 10px;font-size:13.5px}
/* the old horizontal seller tab bar is replaced by the sidebar (buttons stay in the DOM and keep working) */
html.wp #sellerFront > .subnav{display:none}

/* account chip -> avatar button (like the "AM" avatar in Airwallex) */
html.wp #ac-menu{display:inline-flex!important;align-items:center;gap:9px;border:1px solid var(--wp-line)!important;border-radius:999px!important;padding:4px 12px 4px 4px!important;color:var(--wp-ink)!important;background:var(--wp-card)!important}
html.wp #ac-menu::before{content:attr(data-ini);width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%!important;background:var(--wp-side);color:#fff;font:600 12px/1 var(--wp-font)}
html.wp #ac-menu:hover{background:#f9fafb!important}
html.wp .ddrop{background:var(--wp-card)!important;border-radius:var(--wp-r)!important;box-shadow:0 12px 24px -6px rgba(16,24,40,.18)!important}
html.wp .ddrop .ddi{border-radius:0!important}
html.wp #sellerFront{min-height:calc(100vh - var(--wp-headh) - 70px)}

/* ---------- page header (every view's .board-head) ---------- */
html.wp #sellerFront .board{padding-top:28px;padding-bottom:40px}
html.wp #sellerFront .board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px;padding:0 0 20px;border-bottom:1px solid var(--wp-line)}
html.wp #sellerFront .board-head h2{font-size:24px;line-height:1.3;font-weight:650}
html.wp #sellerFront .board-head p{font-size:14px;color:var(--wp-mute);margin:6px 0 0;line-height:1.6;max-width:760px}

/* ---------- cards ---------- */
html.wp #sellerFront :is(.req,.panel,.frow,.mkt-card,.mkt-tile,.serp-ptile,.kpanel,.pp-card,.mdemand,.dm-lead,[data-tool]){background:var(--wp-card)!important;border:1px solid var(--wp-line)!important;border-radius:var(--wp-r)!important;box-shadow:var(--wp-shadow)}
html.wp #sellerFront :is(.req,.frow,.mkt-tile,.serp-ptile,[data-tool]){transition:box-shadow .15s ease,border-color .15s ease}
html.wp #sellerFront :is(.req,.frow,.mkt-tile,.serp-ptile,[data-tool]):hover{box-shadow:var(--wp-shadow-hover)!important;border-color:#d0d5dd!important}
html.wp #sellerFront .panel{padding:28px;margin-block:24px}
html.wp #sellerFront .req{padding:20px;gap:14px}
html.wp #sellerFront .dm-lead{border-left:3px solid var(--wp-warn)!important}
html.wp #sellerFront :is(.pf-sec,.note,.empty,.imp){border-radius:var(--wp-r)!important}
html.wp #sellerFront :is(.mkt-img,.req-pics img,.thumb){border-radius:var(--wp-r-sm)!important}
html.wp .modal{background:var(--wp-card)!important;border-radius:12px!important;box-shadow:0 24px 48px -12px rgba(16,24,40,.25)!important}

/* ---------- buttons ---------- */
html.wp .btn{border-radius:var(--wp-r-sm)!important;font:600 14px/1 var(--wp-font);padding:10px 16px;box-shadow:none}
html.wp .btn-sm{padding:8px 12px;font-size:13px}
html.wp .btn-primary{background:var(--wp-accent);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.08)}
html.wp .btn-primary:hover{background:var(--wp-accent-2)}
html.wp .btn-ghost{background:var(--wp-card);border:1px solid #d0d5dd;color:var(--wp-ink-2);box-shadow:0 1px 2px rgba(16,24,40,.05)}
html.wp .btn-ghost:hover{background:#f9fafb}
html.wp .btn:focus-visible,html.wp #wp-side .wp-item:focus-visible{outline:2px solid var(--wp-accent);outline-offset:2px}

/* ---------- filters / tags (segmented, like Airwallex task tabs) ---------- */
html.wp #sellerFront .pill{background:var(--wp-card);border:1px solid var(--wp-line);color:var(--wp-ink-2);border-radius:var(--wp-r-sm)!important;padding:8px 14px;font:500 13px/1 var(--wp-font)}
html.wp #sellerFront .pill:hover{border-color:#d0d5dd;background:#f9fafb}
html.wp #sellerFront .pill[aria-pressed="true"]{background:var(--wp-accent-soft);border-color:var(--wp-accent-line);color:var(--wp-accent);font-weight:600}
html.wp #sellerFront :is(.cat,.autobadge){border-radius:var(--wp-r-sm)!important;background:#f2f4f7;border-color:var(--wp-line)}
html.wp #sellerFront :is(.sm-chip,.dm-chip,.cbchip){border-radius:999px!important}

/* ---------- forms ---------- */
html.wp #sellerFront :is(input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input[type=url],select,textarea){border:1px solid #d0d5dd;border-radius:var(--wp-r-sm)!important;background:var(--wp-card);color:var(--wp-ink);box-shadow:0 1px 2px rgba(16,24,40,.05)}
html.wp #sellerFront :is(input,select,textarea):focus{outline:none;border-color:var(--wp-accent);box-shadow:0 0 0 4px var(--ring)}

/* ---------- smart tools grid ---------- */
html.wp #toolsPanel [data-tool]{padding:18px!important;gap:14px!important;align-items:flex-start!important}
html.wp #toolsPanel .wp-tico{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--wp-r)!important;background:var(--wp-accent-soft);color:var(--wp-accent);border:1px solid var(--wp-accent-line)}
html.wp #toolsPanel .wp-tico svg{width:20px;height:20px;stroke:currentColor}
html.wp #toolsPanel [data-tool] > div:last-child > div:first-child{font-size:15px!important;font-weight:600!important;line-height:1.45;color:var(--wp-ink)}
html.wp #toolsPanel [data-tool] > div:last-child > div:last-child{font-size:13px!important;color:var(--wp-mute)!important;line-height:1.6!important;margin-top:5px!important}
html.wp #toolsPanel [data-tool] span{border-radius:999px!important;font-weight:600!important;white-space:nowrap;display:inline-block;margin-top:2px;padding:2px 8px!important;font-size:11px!important}
html.wp #toolsPanel > div[style*="grid"]{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))!important;gap:16px!important}

/* ---------- footer ---------- */
html.wp footer{background:var(--wp-card);border-top:1px solid var(--wp-line)}
html.wp footer .wrap{max-width:var(--maxw);padding-inline:32px}

/* ---------- tables anywhere in seller views ---------- */
html.wp #sellerFront table{border-collapse:separate;border-spacing:0;background:var(--wp-card);border:1px solid var(--wp-line);border-radius:var(--wp-r)!important;overflow:hidden}
html.wp #sellerFront th{background:#f9fafb;color:var(--wp-mute);font-weight:600;font-size:12px;text-align:left;border-bottom:1px solid var(--wp-line)}

/* ---------- responsive: sidebar becomes a drawer ---------- */
#wp-scrim{display:none}
@media (max-width:960px){
  html.wp body{padding-left:0}
  html.wp #wp-side{transform:translateX(-100%);transition:transform .2s ease;box-shadow:none;width:280px}
  html.wp.wp-open #wp-side{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)}
  html.wp.wp-open #wp-scrim{display:block;position:fixed;inset:0;background:rgba(15,23,36,.45);z-index:55}
  html.wp #wp-menu{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--wp-line);background:var(--wp-card);border-radius:var(--wp-r-sm)!important;color:var(--wp-ink);cursor:pointer;flex:none}
  html.wp #wp-menu svg{width:20px;height:20px;stroke:currentColor}
  html.wp .topbar-inner{padding-inline:16px;height:56px}
  html.wp #sellerFront .wrap,html.wp footer .wrap{padding-inline:16px}
  html.wp #sellerFront .board{padding-top:20px}
  html.wp #sellerFront .board-head h2{font-size:20px}
  html.wp #wp-crumb span.wp-root{display:none}
  html.wp #langSel svg,html.wp #langSel > span{display:none}
  html.wp #sellerFront .req{padding:14px;gap:10px}
  html.wp #ac-menu{max-width:150px!important}
}
@media print{html.wp #wp-side,html.wp .topbar{display:none}html.wp body{padding-left:0}}