:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e2230;
  --border: #2a2f3d;
  --text: #e6e9f0;
  --muted: #8b93a7;
  --accent: #4f8cff;
  --green: #34c98e;
  --red: #f0616d;
  --orange: #f5a95c;
  --purple: #a78bfa;
}

/* ---- Light mode ---- */
:root[data-theme="light"] {
  --bg: #f3f5f9;
  --panel: #ffffff;
  --panel-2: #e9edf4;
  --border: #d5dbe7;
  --text: #1c2434;
  --muted: #63708a;
  --accent: #2f6de0;
  --green: #128a5c;
  --red: #d43f4f;
  --orange: #c96f1a;
  --purple: #7a5cd6;
}
:root[data-theme="light"] .badge.new { background: #dbe5ff; color: #2f56c4; }
:root[data-theme="light"] .badge.confirmed { background: #d3f2e4; color: #0f7a50; }
:root[data-theme="light"] .badge.no_answer.na-1 { background: #ffeccd; color: #9a6414; }
:root[data-theme="light"] .badge.no_answer.na-2 { background: #ffdda8; color: #8a5203; }
:root[data-theme="light"] .badge.no_answer.na-3 { background: #ffc97e; color: #7a4300; }
:root[data-theme="light"] .badge.postponed { background: #d5e8fb; color: #1d6fc2; }
:root[data-theme="light"] .badge.cancelled { background: #fbdadd; color: #c22736; }
:root[data-theme="light"] .badge.didnt_order { background: #1c2434; color: #ffffff; border: 1px solid #1c2434; }
:root[data-theme="light"] tbody tr.row-didnt_order { background: rgba(28, 36, 52, 0.10); }
:root[data-theme="light"] .badge.shipped { background: #d3ecf8; color: #146d99; }
:root[data-theme="light"] .badge.delivered { background: #d3f2e4; color: #0f7a50; }
:root[data-theme="light"] .badge.returned { background: #fbdadd; color: #c22736; }
:root[data-theme="light"] .statusmenu .mi-na1 { color: #b07514; }
:root[data-theme="light"] .statusmenu .mi-na2 { color: #9a5f07; }
:root[data-theme="light"] .statusmenu .mi-na3 { color: #855000; }
:root[data-theme="light"] .statusmenu .mi-blue { color: #1d6fc2; }
:root[data-theme="light"] .statusmenu { box-shadow: 0 10px 30px rgba(30, 40, 70, 0.18); }
:root[data-theme="light"] .msg.err { background: #fbdadd; color: #b02231; }
:root[data-theme="light"] .msg.ok { background: #d3f2e4; color: #0f7a50; }
:root[data-theme="light"] .msg.warn { background: #ffeccd; color: #9a6414; }
:root[data-theme="light"] button.good { color: #ffffff; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

button {
  font: inherit;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.good { background: var(--green); border-color: var(--green); color: #08281b; font-weight: 600; }
button.danger { background: transparent; border-color: var(--red); color: var(--red); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }

/* ---- Login ---- */
.login-wrap { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  width: 340px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 28px;
}
.login-card h1 { font-size: 20px; margin-bottom: 4px; }
.login-card p { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.login-card button { width: 100%; margin-top: 16px; }
/* "New here?" divider + Create-account button on the login card */
.login-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-signup {
  display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 12px 14px; border-radius: 11px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: background .15s, transform .1s;
}
.login-signup:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.login-signup:active { transform: translateY(1px); }
.login-trial { text-align: center; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
/* Logout sits in the far-left corner, apart from the nav + theme/language
   controls, so it isn't pressed by mistake. */
.logout-btn { margin-inline-end: 8px; padding-inline: 16px; }
.login-forgot { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted); text-decoration: none; }
.login-forgot:hover { color: var(--accent); text-decoration: underline; }

/* ---- Subscription-ended lock screen (client) ---- */
.lock-wrap { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 20px; }
/* A faux, heavily-blurred dashboard behind the card = the app is there but locked. */
.lock-blur { position: absolute; inset: -40px; filter: blur(16px); opacity: .5; display: flex; flex-direction: column; gap: 22px; padding: 40px;
  background: linear-gradient(160deg, var(--accent) 0%, #4a2fd0 100%); }
.lock-blur .lb-row { height: 42px; border-radius: 12px; background: rgba(255,255,255,.35); }
.lock-blur .lb-row:nth-child(odd) { width: 70%; }
.lock-blur .lb-row:nth-child(even) { width: 90%; background: rgba(255,255,255,.22); }
.lock-blur::after { content: ''; position: absolute; inset: 0; background: rgba(10,10,20,.35); }
.lock-card { position: relative; z-index: 1; width: 100%; max-width: 440px; text-align: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 34px 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.4); animation: authUp .4s ease both; }
.lock-ic { font-size: 46px; line-height: 1; }
.lock-card h1 { font-size: 23px; font-weight: 800; margin: 12px 0 8px; }
.lock-body { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-bottom: 16px; }
.lock-store { background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  color: var(--text); font-size: 13px; line-height: 1.55; border-radius: 12px; padding: 12px 14px; text-align: start; margin-bottom: 20px; }
.lock-renew { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #25D366; color: #fff; border: none; border-radius: 12px; padding: 15px; font-size: 16px; font-weight: 800; cursor: pointer; transition: filter .15s, transform .1s; }
.lock-renew:hover { filter: brightness(1.06); } .lock-renew:active { transform: translateY(1px); }
.lock-reload { width: 100%; margin-top: 10px; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.lock-reload:hover { background: var(--panel-2); }
.lock-foot { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.lock-foot button, .lock-foot select { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 9px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.lock-wa-link { display: inline-flex; align-items: center; gap: 6px; color: #25D366 !important; border-color: color-mix(in srgb, #25D366 45%, transparent) !important; font-weight: 700 !important; }
/* Pricing table on the lock screen */
.lock-card-pricing { max-width: 780px; }
.pr-head { font-weight: 800; font-size: 16px; margin: 20px 0 12px; }
.pr-periods { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.pr-per { position: relative; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .15s; }
.pr-per:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.pr-per.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pr-peroff { display: inline-block; margin-inline-start: 6px; background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.pr-per.on .pr-peroff { background: rgba(255,255,255,.25); color: #fff; }
.pr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pr-card { position: relative; text-align: center; border: 1px solid var(--border); border-radius: 14px; padding: 18px 12px 16px; background: var(--panel-2); transition: transform .15s, border-color .15s, box-shadow .15s; display: flex; flex-direction: column; }
.pr-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.pr-card.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pr-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.pr-orders { font-size: 15px; font-weight: 800; line-height: 1.05; }
.pr-orders span { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; text-transform: none; }
.pr-price { font-size: 24px; font-weight: 900; margin: 12px 0 2px; }
.pr-price b { font-size: 14px; font-weight: 800; color: var(--muted); }
.pr-sub { font-size: 11.5px; color: var(--muted); min-height: 30px; line-height: 1.4; }
.pr-off { color: var(--green); font-weight: 800; }
.pr-buy { width: 100%; margin-top: auto; background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 11px; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: filter .15s, transform .1s; }
.pr-buy:hover { filter: brightness(1.07); } .pr-buy:active { transform: translateY(1px); }
.pr-card.best .pr-buy { background: #25D366; }
@media (max-width: 680px) { .pr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .pr-grid { grid-template-columns: 1fr; } }
/* Accepted payment methods */
.pay-head { font-weight: 800; font-size: 15px; margin: 22px 0 12px; }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pay-m { display: flex; align-items: center; gap: 11px; text-align: start; border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; background: var(--panel-2); transition: transform .15s, border-color .15s, box-shadow .15s; }
.pay-m:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.pay-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none; color: #fff; overflow: hidden; }
.pay-logo { display: none; }
/* When a real brand logo is present: show it on a clean white chip (logos are
   designed for white), with the small label underneath. The generic icon and
   brand name (already in the logo) are hidden. */
.pay-m.has-logo { flex-direction: column; align-items: center; gap: 7px; background: #fff; border-color: rgba(0,0,0,.08); padding: 14px 12px; }
.pay-m.has-logo .pay-logo { display: block; max-height: 46px; max-width: 92%; object-fit: contain; }
.pay-m.has-logo .pay-ic { display: none; }
.pay-m.has-logo .pay-tx { align-items: center; text-align: center; }
.pay-m.has-logo .pay-tx b { color: #1c2434; }
.pay-m.has-logo .pay-tx i { color: #5a6172; }
.pay-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pay-tx b { font-size: 14.5px; font-weight: 800; }
.pay-tx i { font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pay-m.baridi { border-color: color-mix(in srgb, #f4b400 45%, var(--border)); }
.pay-m.baridi .pay-ic { background: linear-gradient(150deg, #f7c331, #e8a200); }
.pay-m.ccp { border-color: color-mix(in srgb, #1a6cc9 45%, var(--border)); }
.pay-m.ccp .pay-ic { background: linear-gradient(150deg, #2a86e0, #145bb0); }
.pay-m.redot { border-color: color-mix(in srgb, #e2333f 45%, var(--border)); }
.pay-m.redot .pay-ic { background: linear-gradient(150deg, #ef4a54, #cf2530); }
.pay-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 12px; text-align: center; }
@media (max-width: 560px) { .pay-methods { grid-template-columns: 1fr; } }

/* ---- Support chat widget (client ↔ owner), pinned bottom-left ---- */
.sup-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0,0,0,.28);
  transition: transform .15s, box-shadow .15s; animation: supPop .4s cubic-bezier(.2,.9,.3,1.3) both; }
.sup-launcher:hover { transform: translateY(-2px) scale(1.05); }
@keyframes supPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.sup-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--panel); }
.sup-badge.sm { position: static; box-shadow: none; }
.sup-panel { position: fixed; right: 20px; bottom: 88px; z-index: 60; width: 370px; max-width: calc(100vw - 40px); height: 72vh; max-height: 620px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden; animation: supUp .28s cubic-bezier(.2,.8,.3,1) both; }
@keyframes supUp { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.sup-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #4f8cff, #2f6de0); }
.sup-head .sup-head-tx { flex: 1; min-width: 0; line-height: 1.25; }
.sup-head b { font-size: 15px; font-weight: 800; display: block; }
.sup-head i { font-style: normal; font-size: 12px; opacity: .9; }
.sup-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.2); }
.sup-x, .sup-back, .sup-x2 { background: transparent; border: none; color: inherit; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.sup-x:hover, .sup-back:hover { background: rgba(255,255,255,.18); }
.sup-back { font-size: 26px; }
.sup-x2 { color: var(--muted); }
.sup-note { padding: 10px 14px; font-size: 12.5px; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--border); }
.sup-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.sup-empty { margin: auto; text-align: center; color: var(--muted); font-size: 13px; padding: 20px; }
.sup-msg { max-width: 80%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; position: relative; word-break: break-word; }
.sup-msg.them { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.sup-msg.mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.sup-msg audio { display: block; max-width: 220px; margin-top: 2px; }
.sup-t { display: block; font-size: 10.5px; opacity: .7; margin-top: 3px; text-align: end; }
.sup-ack { align-self: center; text-align: center; font-size: 12px; color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); border-radius: 10px; padding: 7px 12px; max-width: 92%; animation: supUp .3s ease both; }
.sup-compose { display: flex; align-items: center; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--panel); }
.sup-compose input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font-size: 14px; }
.sup-compose input:focus { outline: none; border-color: var(--accent); }
.sup-mic { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 16px; flex: none; }
.sup-mic.recording { background: var(--red); border-color: var(--red); }
.sup-send { background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 9px 16px; font-weight: 700; cursor: pointer; flex: none; }
.sup-rectime { font-weight: 700; font-size: 13px; }
.sup-recdot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: supBlink 1s infinite; }
@keyframes supBlink { 50% { opacity: .3; } }
.sup-inbox { padding: 10px; gap: 9px; }
.sup-thread { width: 100%; text-align: start; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; cursor: pointer; }
.sup-thread:hover { border-color: var(--accent); }
.sup-th-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sup-th-top b { font-size: 14px; font-weight: 700; }
.sup-th-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.sup-th-prev { font-size: 12.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .sup-panel { left: 12px; right: 12px; width: auto; bottom: 84px; height: 74vh; } .sup-launcher { right: 14px; bottom: 14px; } }

/* ---- Professional two-panel auth (login) ---- */
@keyframes authUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes authFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.auth-wrap { display: flex; min-height: 100vh; }
.auth-brand {
  flex: 1.05; position: relative; overflow: hidden; color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 48px 44px;
  background: linear-gradient(160deg, #4f8cff 0%, #2f6de0 55%, #1e50c8 100%);
  background-size: 100% 180%; animation: authBg 14s ease-in-out infinite alternate;
}
@keyframes authBg { from { background-position: 0 0; } to { background-position: 0 100%; } }
.auth-brand::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 320px at 82% 8%, rgba(255,255,255,.16), transparent),
              radial-gradient(500px 300px at 10% 100%, rgba(255,255,255,.08), transparent); }
.auth-brand-in { max-width: 440px; width: 100%; position: relative; z-index: 1; }
.auth-brand-in > * { animation: authUp .6s cubic-bezier(.2,.7,.3,1) both; }
.auth-logo { font-size: 32px; font-weight: 800; letter-spacing: .5px; animation: authFloat 5s ease-in-out infinite; }
.auth-logo span { color: #bcd6ff; }
.auth-tag { margin: 16px 0 26px; font-size: 16px; opacity: .92; line-height: 1.6; animation-delay: .06s; }
.auth-stats { display: flex; gap: 10px; margin-bottom: 26px; animation-delay: .1s; }
.auth-stat { flex: 1; text-align: center; border-radius: 12px; padding: 12px 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px); }
.auth-stat b { display: block; font-size: 20px; font-weight: 900; line-height: 1; }
.auth-stat b span { opacity: .6; }
.auth-stat i { font-style: normal; font-size: 11.5px; opacity: .85; display: block; margin-top: 5px; }
.auth-feats { display: flex; flex-direction: column; gap: 12px; }
.auth-feat { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px;
  border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  animation: authUp .6s cubic-bezier(.2,.7,.3,1) both; transition: transform .18s, background .18s; }
.auth-feat:hover { transform: translateX(4px); background: rgba(255,255,255,.16); }
.auth-feats .auth-feat:nth-child(1) { animation-delay: .16s; }
.auth-feats .auth-feat:nth-child(2) { animation-delay: .24s; }
.auth-feats .auth-feat:nth-child(3) { animation-delay: .32s; }
.auth-feat-ic { font-size: 20px; line-height: 1; }
.auth-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 34px 30px; background: var(--bg); }
.auth-card { width: 100%; max-width: 370px; animation: authUp .5s ease both; animation-delay: .12s; }
.auth-card h1 { font-size: 26px; margin-bottom: 4px; }
.auth-card p { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.auth-card button.primary { width: 100%; margin-top: 16px; }
.auth-card .remember-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.auth-card .remember-row input { width: auto; margin: 0; flex: none; }

/* Onboarding example-data bar (client only) */
.example-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; border-radius: 11px; background: rgba(79, 140, 255, .1); border: 1px solid rgba(79, 140, 255, .38); font-size: 13px; color: var(--text); }
.example-bar .ex-txt { flex: 1; min-width: 180px; }
.example-bar .ex-clear { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; cursor: pointer; }

/* First-time onboarding tour */
.tour-ov { position: fixed; inset: 0; z-index: 4000; background: transparent; }
.tour-ov.tour-dim { background: rgba(10, 15, 28, 0.62); }
.tour-spot { position: fixed; border-radius: 10px; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(10, 15, 28, 0.62), 0 0 0 4px rgba(79, 140, 255, 0.35); transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.tour-card { position: fixed; width: min(340px, calc(100vw - 24px)); background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); animation: tourIn .22s ease both; }
.tour-card.tour-center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); text-align: center; padding: 26px 24px 18px; }
@keyframes tourIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tour-card.tour-center { animation: tourCenterIn .22s ease both; }
@keyframes tourCenterIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.tour-card .tour-step { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .5px; margin-bottom: 6px; }
.tour-card h3 { font-size: 18px; margin: 0 0 6px; }
.tour-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-actions .grow { flex: 1; }
.tour-actions button { padding: 8px 14px; border-radius: 9px; font-size: 13px; cursor: pointer; }
.tour-actions .tour-skip { background: transparent; border: 0; color: var(--muted); padding-inline: 4px; }
.tour-actions .tour-skip:hover { color: var(--text); border: 0; }
.tour-langs { display: flex; gap: 8px; margin: 2px 0 14px; }
.tour-lang { flex: 1; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.tour-lang:hover { border-color: var(--accent); }
.tour-lang.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Reveal-password (eye) toggle */
.pw-wrap { position: relative; width: 100%; }
.pw-wrap > input { padding-inline-end: 42px; }
.pw-toggle { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; color: var(--muted); cursor: pointer; }
.pw-toggle:hover { color: var(--text); border: 0; }
@media (max-width: 860px) {
  .auth-wrap { flex-direction: column; }
  .auth-brand { flex: none; padding: 30px 24px; }
  .auth-brand-in { max-width: none; }
  .auth-feats { display: none; }
  .auth-panel { flex: none; padding: 26px 22px 40px; }
}

/* ---- Layout ---- */
header {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
  /* Wrap instead of pushing the right-hand controls (log out, theme, language)
     off-screen once the nav + store switcher outgrow one line. */
  flex-wrap: wrap;
}
header .logo { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
header .logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
header .logo span { color: var(--accent); }
/* The OrderDesk icon already carries its own blue tile and rounded corners —
   it needs no plate behind it, in either theme. */
header .brandmark { height: 32px; width: 32px; display: block; }
nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav button { border: none; background: transparent; color: var(--muted); padding: 7px 12px; }
nav button.active { background: var(--panel-2); color: var(--text); border-radius: 8px; }
header .spacer { flex: 1; }
header .who { color: var(--muted); font-size: 13px; }
/* Always-on "N days left" subscription chip in the header (client admin only). */
.sub-chip { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer; white-space: nowrap; }
.sub-chip:hover { color: var(--text); border-color: var(--accent); }
.sub-chip.warn { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
/* Days-left and orders-left sit side by side and wrap together. */
.sub-chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Orders-left pill: neutral while there is plenty, amber as an early warning,
   red at the low mark (~30 on a 300-order plan), solid red once it hits zero. */
.sub-chip-orders.soon { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.sub-chip-orders.low { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); }
.sub-chip-orders.out { color: #fff; border-color: transparent; background: var(--red); }
.sub-chip-orders.soon:hover, .sub-chip-orders.low:hover { color: var(--text); }
.sub-chip-orders.out:hover { color: #fff; border-color: transparent; }

main { padding: 20px 24px; width: 100%; }

/* ---- Toolbar / filters ---- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar input[type="search"] { width: 240px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border); background: var(--panel); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; color: var(--muted); cursor: pointer;
}
.chip.active { border-color: var(--accent); color: var(--text); background: var(--panel-2); }
.chip b { color: var(--text); }

/* Optional calendar date-range (sits beside the quick date dropdown) */
.daterange { display: inline-flex; align-items: center; gap: 4px; }
.daterange .dr-cal { font-size: 15px; line-height: 1; }
.daterange .dr-sep { color: var(--muted); font-size: 12px; }
.daterange input[type="date"] { width: auto; padding: 6px 8px; font-size: 12.5px; color-scheme: dark; }
:root[data-theme="light"] .daterange input[type="date"] { color-scheme: light; }
.daterange.active input[type="date"] { border-color: var(--accent); }
.daterange .dr-clear { padding: 2px 7px; }

/* ---- Orders table ---- */
.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: 8px 7px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 13px; }
th:first-child, td:first-child { padding-left: 12px; }
/* Selection column leads the row, just before the status badge. */
th.selcol, td.selcol { text-align: center; padding-inline: 12px 4px; width: 1%; }
th { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr { cursor: pointer; }
/* Orders list: each order is ONE box (columns flush — 0 horizontal spacing), with
   only a hair of space between same-day orders and a taller `.day-head` date header
   between days. A little side padding on the wrap keeps the boxes off the panel border. */
.orders-table { border-collapse: separate; border-spacing: 0 3px; }
.orders-wrap { padding-inline: 8px; }
.orders-table thead th { border-bottom: 0; }
.orders-table tbody tr[data-id] > td { border-block: 1px solid var(--border); }
.orders-table tbody tr[data-id] > td:first-child { border-inline-start: 1px solid var(--border); }
.orders-table tbody tr[data-id] > td:last-child { border-inline-end: 1px solid var(--border); }
/* Date header leading each day's group: the bigger gap sits ABOVE it (separating
   days) and it hugs the orders directly below (small bottom gap) so the chip reads
   as heading that day's orders. The first day's header has no gap above it. */
.orders-table tbody tr.day-head > td { padding: 16px 12px 4px; border: 0; background: transparent; }
.orders-table tbody tr.day-head.first > td { padding-top: 2px; }
.orders-table .day-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: var(--text); padding: 4px 12px 4px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); }
.orders-table .day-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #4f8cff); flex: 0 0 auto; }
/* Each order box tinted by status — clean, consistent, theme-aware (mixed into the
   panel so it reads right in light & dark). On the cells (opaque) so hover can't
   wipe it. Intensity is steady ~8-15%, with no_answer getting hotter per attempt. */
.orders-table tbody tr.row-new > td { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.orders-table tbody tr.row-confirmed > td { background: color-mix(in srgb, var(--green) 13%, var(--panel)); }
.orders-table tbody tr.row-delivered > td { background: color-mix(in srgb, var(--green) 8%, var(--panel)); }
.orders-table tbody tr.row-postponed > td { background: color-mix(in srgb, #58a6f0 11%, var(--panel)); }
.orders-table tbody tr.row-shipped > td { background: color-mix(in srgb, #58c4f0 11%, var(--panel)); }
.orders-table tbody tr.row-cancelled > td { background: color-mix(in srgb, var(--red) 12%, var(--panel)); }
.orders-table tbody tr.row-returned > td { background: color-mix(in srgb, var(--red) 8%, var(--panel)); }
.orders-table tbody tr.row-didnt_order > td { background: color-mix(in srgb, #8a93a6 12%, var(--panel)); }
.orders-table tbody tr.row-no_answer.na-1 > td { background: color-mix(in srgb, #f2b45a 9%, var(--panel)); }
.orders-table tbody tr.row-no_answer.na-2 > td { background: color-mix(in srgb, #f2a03c 15%, var(--panel)); }
.orders-table tbody tr.row-no_answer.na-3 > td { background: color-mix(in srgb, var(--orange) 22%, var(--panel)); }
tbody tr:hover { background: var(--panel-2); }
td.wrap { white-space: normal; max-width: 190px; }
/* Desktop only: every order box the SAME height (content kept to one line so it
   can't grow), plus a subtle hover that keeps the status tint. The mobile card
   layout (max-width:640px, stacked & wrapping) is left untouched. */
@media (min-width: 641px) {
  .orders-table tbody tr[data-id] > td { height: 46px; vertical-align: middle; overflow: hidden; transition: border-color .15s, filter .15s; }
  .orders-table td.wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Keep every cell to ONE line so the fixed height can't be pushed taller: the
     "confirmed by" name and the tracking number sit inline instead of wrapping. */
  .orders-table .byline, .orders-table .cstrack { display: inline-block; margin: 0 0 0 6px; vertical-align: middle;
    max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .orders-table td.statuscell { white-space: nowrap; }
  .orders-table tbody tr[data-id]:hover > td { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); filter: brightness(1.05); }
}

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.new { background: #2a3550; color: #9db8ff; }
.badge.confirmed { background: #14382a; color: var(--green); }
/* No answer: darker & hotter with each attempt */
.badge.no_answer.na-1 { background: #3a2d18; color: #f2c583; }
.badge.no_answer.na-2 { background: #4d340e; color: #f5a95c; }
.badge.no_answer.na-3 { background: #613608; color: #ff8b26; }
.badge.postponed { background: #16324d; color: #58a6f0; }
.badge.cancelled { background: #40222a; color: var(--red); cursor: help; }
.badge.didnt_order { background: #000000; color: #b8bfce; border: 1px solid #3a3f4c; }
.badge.shipped { background: #123344; color: #58c4f0; }
.badge.delivered { background: #14382a; color: var(--green); }
.badge.returned { background: #40222a; color: var(--red); }
.badge.abandoned { background: #3a2f16; color: #e6b34d; border: 1px solid #6b551f; }
:root[data-theme="light"] .badge.abandoned { background: #fdf1d6; color: #9a6b00; border-color: #e7cf93; }

/* Abandoned-cart chip: amber, set slightly apart from the real-order chips. */
.chip.chip-abandoned.active { border-color: #c9922b; }
.chip.chip-abandoned b { color: #e6b34d; }

/* Persistent "recovered from an abandoned cart" tag next to the status badge */
.ab-mark { font-size: 13px; cursor: help; vertical-align: middle; }
.ab-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: #3a2f16; color: #e6b34d; border: 1px solid #6b551f; cursor: help; white-space: nowrap; vertical-align: middle; }
:root[data-theme="light"] .ab-tag { background: #fdf1d6; color: #9a6b00; border-color: #e7cf93; }

/* Shared stat cards (Normal orders + Abandoned recovery) — a matched pair */
.stat-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; margin: 4px 0 20px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; animation: statIn .28s ease both; }
.stat-card h3 { margin: 0 0 12px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.stat-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 8px; text-align: center; transition: transform .12s ease, border-color .12s ease;
  animation: statIn .32s ease both; }
.stat-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.stat-tile.ok { border-color: #2b6b4a; }
.stat-tile.bad { border-color: #6b2b2b; }
.stat-tile.save { border-color: #6b551f; }
.stat-tile .stat-n { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-tile .stat-n small { font-size: 12px; font-weight: 600; color: var(--muted); }
.stat-tile .stat-l { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stat-tile .src-ico { margin-bottom: 6px; line-height: 0; }
.brand-ico { width: 26px; height: 26px; display: inline-block; vertical-align: middle; }
.brand-ico.tt { color: var(--text); }
@keyframes statIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* section headings on the Stats page, so each group owns its space */
.stat-head { margin: 22px 0 12px; font-size: 15px; font-weight: 700; }
.stat-head:first-child { margin-top: 4px; }

/* Store sub-tabs (Products / Settings) */
/* Segmented store-type switcher: both themes shown side by side, active lifted. */
.store-switch { display: inline-flex; gap: 4px; padding: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; }
.store-switch .ss-opt { border: none; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s, color .15s; }
.store-switch .ss-opt:hover:not(.active) { color: var(--text); }
.store-switch .ss-opt.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
:root[data-theme="light"] .store-switch .ss-opt.active { box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.store-tabs { display: inline-flex; gap: 6px; margin-inline-start: 14px; }
.store-tab {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 600;
}
.store-tab.active { border-color: var(--accent); color: var(--text); }

/* ---- Modal ---- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: grid; place-items: center; z-index: 10; padding: 20px;
}
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  width: min(720px, 100%); max-height: 90vh; overflow-y: auto; padding: 24px;
}
.modal h2 { font-size: 17px; margin-bottom: 2px; }
.modal .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.timeline { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 10px; }
.timeline h3 { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.timeline .ev { font-size: 12.5px; color: var(--muted); padding: 3px 0; }
.timeline .ev b { color: var(--text); font-weight: 600; }
.timeline .ev-time { float: inline-end; }

.langsel { width: auto; padding: 7px 8px; }

/* ---- Profit breakdown ---- */
.pf-line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.pf-line span:last-child { font-variant-numeric: tabular-nums; }
.pf-earn {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: rgba(52, 201, 142, 0.12); color: var(--green);
  font-weight: 700; font-size: 17px;
}
.pf-earn.pf-loss { background: rgba(240, 97, 109, 0.12); color: var(--red); }
.pf-sub { border-bottom: none; color: var(--muted); font-size: 12.5px; }

/* Special-offer orders: product name in heavy bold so the team spots them */
td.offer-bold { font-weight: 800; color: var(--text); }

/* ---- Offer switcher in the order form ---- */
.offers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.offer-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: start; padding: 8px 12px; max-width: 260px;
}
.offer-chip .offer-name { font-size: 12.5px; white-space: normal; }
.offer-chip .offer-price { font-size: 13px; font-weight: 700; color: var(--green); }
.offer-chip.active { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 1px var(--accent) inset; }

/* ---- Delivery price line in the order form ---- */
.pricebox { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.price-line { font-size: 13px; color: var(--muted); }
.price-line b { color: var(--green); font-size: 14px; }
.price-hint { font-size: 12.5px; color: var(--muted); }

/* Settings section headings — group the cards (Store / Delivery / …) */
.set-group { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.set-group:first-child { margin-top: 4px; }
/* Delivery-prices viewer table — compact: the three columns sit next to each other,
   the table only as wide as its content, and you scroll DOWN through the wilayas. */
#tarifsCard { grid-column: 1 / -1; max-width: 520px; }
.tarifs-scroll { display: inline-block; max-width: 100%; max-height: 520px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.tarifs-table { width: auto; border-collapse: collapse; font-size: 13.5px; }
.tarifs-table th, .tarifs-table td { padding: 8px 16px; text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tarifs-table thead th { position: sticky; top: 0; background: var(--panel-2); font-weight: 700; z-index: 1; }
.tarifs-table tbody tr:last-child td { border-bottom: none; }
.tarifs-table tbody tr:hover { background: var(--panel-2); }
.tarifs-table td:not(:first-child), .tarifs-table th:not(:first-child) { text-align: end; font-variant-numeric: tabular-nums; }

/* ---- Settings / cards ---- */
/* ---- Clients console (owner only) ---- */
.owner-nav { color: var(--purple) !important; }
.clients-view { max-width: 900px; }
.cl-intro { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.55; margin-bottom: 4px; }
.cl-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.cl-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.cl-own { opacity: .85; }
.cl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.cl-name { font-weight: 800; font-size: 17px; }
.cl-self { font-size: 11px; font-weight: 600; background: var(--panel-2); color: var(--muted); padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.cl-contact { color: var(--muted); font-size: 13px; margin-top: 3px; }
.cl-status { font-weight: 700; font-size: 14px; }
.cl-status.ok { color: var(--green); }
.cl-status.warn { color: var(--orange); }
.cl-status.bad { color: var(--red); }
.cl-flag { background: rgba(245,169,92,.14); color: var(--orange); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-top: 10px; }
.cl-give { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cl-give-label { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.cl-plans { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cl-plan, .cl-ord { padding: 9px 16px; border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
.cl-plan:hover, .cl-ord:hover { background: var(--accent); color: #fff; }
.cl-ordtotal { margin: 6px 0 2px; font-weight: 700; }
.cl-custom-btn { border-color: var(--border) !important; color: var(--muted) !important; font-weight: 600 !important; }
.cl-custom-btn:hover { background: var(--panel-2) !important; color: var(--text) !important; }
.cl-amount-wrap { font-size: 13px; color: var(--muted); }
.cl-amount { width: 100px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.cl-custom { margin-top: 10px; font-size: 13px; }
.cl-custom input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.cl-date-set { padding: 7px 14px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 8px; cursor: pointer; }
.cl-quick { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cl-payments { margin-top: 12px; font-size: 13px; background: var(--panel-2); border-radius: 8px; padding: 10px 12px; }
.cl-pay-head { font-weight: 700; margin-bottom: 6px; }
.cl-pay-row { padding: 5px 0; border-bottom: 1px dashed var(--border); }

/* ---- Clients console: redesign ---- */
.clients-view { max-width: 1000px; }
.cl-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
.cl-sm { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; text-align: center; }
.cl-sm b { display: block; font-size: 22px; font-weight: 900; line-height: 1; }
.cl-sm i { font-style: normal; font-size: 12px; color: var(--muted); display: block; margin-top: 5px; }
.cl-sm.ok b { color: var(--green); } .cl-sm.warn b { color: var(--orange); } .cl-sm.bad b { color: var(--red); }
.cl-sm.money b { color: var(--accent); font-size: 18px; }
.cl-search-row { margin: 6px 0 12px; }
.cl-search { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-size: 14px; }
.cl-search:focus { border-color: var(--accent); outline: none; }
.cl-list { animation: authUp .3s ease both; }
.cl-card { transition: box-shadow .15s, border-color .15s; }
.cl-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.cl-id { min-width: 0; }

/* ---- Clients console: collapsible dropdown per account ---- */
details.cl-card { padding: 0; overflow: hidden; }
.cl-sumrow { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; }
.cl-sumrow::-webkit-details-marker { display: none; }
.cl-caret { color: var(--muted); font-size: 12px; transition: transform .15s ease; }
details[open] > .cl-sumrow .cl-caret { transform: rotate(90deg); }
.cl-sum-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cl-sum-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-sum-l1 .cl-name { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-sum-l2 { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-sum-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.cl-sum-status { display: flex; align-items: center; gap: 8px; }
.cl-sum-when { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.cl-sum-paid { font-size: 12.5px; font-weight: 700; color: var(--accent); }
@media (max-width: 560px) { .cl-sum-l2 { max-width: 46vw; } }
.cl-body { padding: 6px 18px 16px; border-top: 1px solid var(--border); }
.cl-body .cl-dom { color: var(--muted); font-size: 13px; margin-top: 10px; }
.cl-kind-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cl-kind-badge.friend { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.cl-kind-badge.client { background: var(--panel-2); color: var(--muted); }

/* Client / Friend selector */
.cl-kind { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.cl-kind-q { font-size: 13px; color: var(--muted); font-weight: 600; }
.cl-kind-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cl-kind-opt { padding: 8px 15px; border: none; background: transparent; color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; }
.cl-kind-opt + .cl-kind-opt { border-inline-start: 1px solid var(--border); }
.cl-kind-opt.on { background: var(--accent); color: #fff; }

/* Grant panel (paying client + friend) */
.cl-grant { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.cl-grant-friend .cl-give-label { color: var(--accent); }
.cl-grant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; align-items: end; margin-bottom: 12px; }
.cl-fld { display: flex; flex-direction: column; gap: 6px; }
.cl-fld > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.cl-fld input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); width: 100%; }
.cl-plan.on, .cl-ord.on { background: var(--accent); color: #fff; }
.cl-grant-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cl-custom { align-items: center; gap: 8px; flex-wrap: wrap; }
.clp { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.clp.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.clp.warn { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
.clp.bad { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.cl-dom { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.cl-del { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 9px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; flex: none; }
.cl-del:hover { border-color: var(--red); color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.cl-sub { margin-top: 12px; border-radius: 11px; padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--border); }
.cl-sub.ok { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.cl-sub.warn { border-color: color-mix(in srgb, var(--orange) 40%, var(--border)); }
.cl-sub.bad { border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.cl-sub-h { font-weight: 800; font-size: 15px; }
.cl-sub-s { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cl-bar { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 9px; }
.cl-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.cl-bar-fill.ok { background: var(--green); } .cl-bar-fill.warn { background: var(--orange); } .cl-bar-fill.bad { background: var(--red); }
.cl-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin-top: 13px; }
.cl-inf { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.cl-inf span { color: var(--muted); } .cl-inf b { font-weight: 700; text-align: end; word-break: break-word; }
.cl-config { margin-top: 22px; }
.cl-config > summary { cursor: pointer; font-weight: 700; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; list-style: none; }
.cl-config > summary::-webkit-details-marker { display: none; }
.cl-config[open] > summary { border-radius: 12px 12px 0 0; }
.cl-email { max-width: 660px; }
.cl-em-status { font-weight: 700; font-size: 13.5px; margin: 8px 0 12px; }
.cl-em-status.ok { color: var(--green); }
.cl-em-status.warn { color: var(--orange); }
.cl-email select, .cl-email input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); }
.cl-em-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.cl-em-actions input { width: auto; flex: 1; min-width: 160px; }
.cl-wa { max-width: 660px; }
.cl-wa input { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font-size: 15px; }
.cl-wa-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
#clWaOpen { background: #25D366; color: #fff; border: none; }

/* ---- Client subscription-ending popup (small corner card) ---- */
/* Bottom-LEFT so it never covers the support chat widget, which is fixed
   bottom-right (.sup-launcher / .sup-panel) in every text direction. */
.sub-banner { position: fixed; bottom: 18px; left: 18px; z-index: 200; width: 232px; background: var(--panel); border: 1px solid var(--orange); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 34px -10px rgba(0,0,0,.45); animation: subIn .25s ease; }
@keyframes subIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sub-banner .sub-x { position: absolute; top: 5px; inset-inline-end: 8px; background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.sub-b-title { font-weight: 700; font-size: 12.5px; color: var(--orange); margin-bottom: 4px; padding-inline-end: 14px; }
.sub-b-count { font-size: 20px; font-weight: 800; letter-spacing: .5px; color: var(--text); margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.sub-b-renew { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 7px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; width: 100%; }
.sub-b-renew:hover { filter: brightness(1.08); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.card h2 { font-size: 15px; margin-bottom: 4px; }
.card .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 8px; }
/* "How you sell" selling-mode chooser — the selected option is the accent colour,
   so its title AND hint must be white; the unselected one uses normal panel text. */
.sellmode { width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.sellmode:hover { border-color: var(--accent); }
.sellmode b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.sellmode .sub { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.sellmode.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.sellmode.primary .sub { color: rgba(255, 255, 255, .9); }
.card .status-ok { color: var(--green); font-size: 12.5px; }
.card .status-warn { color: var(--orange); font-size: 12.5px; }
.card button { margin-top: 12px; }

/* ---- Status dropdown menu ---- */
.badge-btn { cursor: pointer; user-select: none; }
.badge-btn:hover { filter: brightness(1.25); }
.statusmenu {
  position: fixed; z-index: 50; min-width: 170px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.statusmenu button {
  border: none; background: transparent; text-align: start;
  padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
}
.statusmenu button:hover { background: var(--panel); border: none; }
.statusmenu .mi-green { color: var(--green); }
.statusmenu .mi-na1 { color: #f2c583; }
.statusmenu .mi-na2 { color: #f5a95c; }
.statusmenu .mi-na3 { color: #ff8b26; }
.statusmenu .mi-blue { color: #58a6f0; }
.statusmenu .mi-red { color: var(--red); }
.statusmenu .mi-black { color: var(--text); }

/* ---- Bulk action bar ---- */
.bulkbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px;
}
.bulk-hint { color: var(--muted); font-size: 12.5px; }
.rowcheck, #selectAll { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---- Stats tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.tile-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tile-value { font-size: 28px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Who confirmed the order, under its status badge. */
.byline { font-size: 11px; color: var(--muted); margin-top: 3px; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; }

/* ---- Product research Board ---- */
/* Research: Local 🇩🇿 / China 🇨🇳 tabs */
.board-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.board-tab {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.board-tab .flag { font-size: 17px; line-height: 1; }
.board-tab.active { border-color: var(--accent); color: var(--text); background: var(--panel-2); }
.bcard-flag { font-size: 14px; line-height: 1; }

/* Origin toggle inside the product modal */
.origin-toggle { display: flex; gap: 8px; }
.origin-opt {
  display: inline-flex; align-items: center; gap: 6px; flex: 1; justify-content: center;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  border-radius: 10px; padding: 8px 10px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.origin-opt .flag { font-size: 16px; line-height: 1; }
.origin-opt.active { border-color: var(--accent); color: var(--text); background: var(--panel-2); }

.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.bcolumn { flex: 0 0 260px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.bcolumn-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.bcolumn-head b { color: var(--muted); font-weight: 600; margin-inline-start: 4px; }
.bcol-add { padding: 0 8px; font-size: 16px; line-height: 1.6; }
.bcolumn-body { min-height: 60px; padding: 10px; display: flex; flex-direction: column; gap: 10px; transition: background .15s; border-radius: 0 0 12px 12px; }
.bcolumn-body.drop-over { background: var(--panel-2); outline: 2px dashed var(--accent); outline-offset: -4px; }
.bcard { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: grab; }
.bcard:active { cursor: grabbing; }
.bcard.dragging { opacity: .45; }
.bcard-thumb { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--bg); }
.bcard-thumb.none { display: grid; place-items: center; font-size: 30px; color: var(--muted); }
.bcard-body { padding: 8px 10px 10px; }
.bcard-name { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.bcard-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--muted); }
.btag { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--text); }
.bverdict { border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.bverdict.v-winner { background: rgba(52,201,142,.15); color: var(--green); }
.bverdict.v-killed { background: rgba(240,97,109,.15); color: var(--red); }
.bverdict.v-needs_more_testing { background: rgba(245,169,92,.15); color: var(--orange); }

/* Product editor modal */
.modal.pmodal { width: min(760px, 100%); max-height: 90vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.pmodal .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.pmodal .modal-head h2 { margin: 0; }
.pmodal .modal-scroll { overflow-y: auto; padding: 16px 20px; }
.pmodal .modal-foot { display: flex; gap: 8px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); }
.pm-section { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 10px; }
.pm-section:first-child { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .field.span2 { grid-column: 1 / -1; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.money-input { display: flex; gap: 6px; }
.money-input input { flex: 1; }
.money-input select { width: auto; }
.dims-input { display: flex; gap: 6px; align-items: center; }
.dims-input input { width: 100%; }
.dims-input span { color: var(--muted); }
.linkrow { display: flex; gap: 6px; margin-bottom: 6px; }
.linkrow .lk-label { flex: 0 0 130px; }
.linkrow .lk-url { flex: 1; }
.iconbtn { padding: 4px 9px; }
.pm-add { margin-top: 4px; font-size: 13px; }
.pm-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pm-mitem { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.pm-mitem img { width: 100%; height: 90px; object-fit: cover; display: block; }
.pm-mitem .m-del { position: absolute; top: 3px; inset-inline-end: 3px; background: rgba(0,0,0,.6); border-color: transparent; color: #fff; padding: 1px 6px; }
.pm-vlink { display: grid; place-items: center; height: 90px; background: var(--panel-2); }
.pm-vlink a { color: var(--accent); font-size: 12px; text-decoration: none; }
.pm-media-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* landing (long) image preview: show the whole tall image, not a square crop */
.pm-longmedia { grid-template-columns: repeat(auto-fill, minmax(120px, 160px)); }
.pm-longitem img { height: auto; max-height: 320px; object-fit: contain; background: var(--panel-2); }

/* Image dropzone (works before the product is saved — files are staged). */
.pm-drop { border: 1.5px dashed var(--border); border-radius: 12px; padding: 12px; margin-bottom: 6px;
  transition: border-color .15s, background .15s; }
.pm-drop.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pm-dropbtn { display: block; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); color: var(--text); font-weight: 700; cursor: pointer; }
.pm-dropbtn:hover { border-color: var(--accent); }

/* Sizes: removable chips + an add row. */
.pm-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.pm-sizes:empty { display: none; }
.sz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); font-weight: 700; font-size: 14px; }
.sz-chip .sz-del { border: 0; background: rgba(0,0,0,.12); color: inherit; border-radius: 50%;
  width: 20px; height: 20px; line-height: 1; padding: 0; cursor: pointer; font-size: 12px; }
.pm-size-add { display: flex; gap: 8px; align-items: center; }
.pm-size-add input { width: 140px; }

/* ---- Find Product: Telegram panel ---- */
.tgqr { display: block; margin-top: 6px; border-radius: 10px; background: #fff; padding: 8px; width: 200px; }
.tgtoggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tgtoggle input { width: auto; }
.tgprogress { margin-top: 12px; }
.tgbar { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin-bottom: 6px; }
.tgbar-fill { height: 100%; background: var(--accent); transition: width .4s; }

/* ---- Find Product ---- */
.finddrop { border: 2px dashed var(--border); border-radius: 12px; padding: 26px; margin-top: 12px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.finddrop:hover, .finddrop.over { border-color: var(--accent); background: var(--panel-2); }
.finddrop-icon { font-size: 26px; margin-bottom: 6px; }
.findquery { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.findquery img { height: 74px; width: 74px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.findgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
.findcard { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.findcard img { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--panel-2); }
.findcard-noimg { height: 160px; display: grid; place-items: center; color: var(--muted); background: var(--panel-2); }
.findcard-body { padding: 9px 11px 11px; }
.findcard-match { font-weight: 700; font-size: 15px; color: var(--muted); }
.findcard-match.warm { color: var(--orange); }
.findcard-match.hot { color: var(--green); }
.findcard-price { font-size: 13px; margin-top: 2px; }
.findcard-channel { font-size: 12px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.findcard-link { display: inline-block; margin-top: 7px; font-size: 12.5px; color: var(--accent); text-decoration: none; }
.findcard-link:hover { text-decoration: underline; }

/* ---- Confirmation / delivery dials ---- */
.dialbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dialbar .chip { font: inherit; font-size: 13px; }
.dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin-bottom: 18px; }
.dial { display: flex; align-items: center; gap: 18px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.donut { width: 120px; height: 120px; flex: none; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--border); stroke-width: 14; }
.donut-arc { fill: none; stroke-width: 14; }
.donut-centre, .donut-sub { transform: rotate(90deg); transform-origin: 60px 60px;
  text-anchor: middle; fill: var(--text); }
.donut-centre { font-size: 26px; font-weight: 700; }
.donut-sub { font-size: 10px; fill: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.dial-body { min-width: 0; }
.dial-body h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
/* Whose numbers these are — right on the circle. */
.dial-who { color: var(--text); background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px; margin-inline-start: 6px;
  text-transform: none; letter-spacing: 0; font-size: 12px; }
.dial-big { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dial-big span { font-size: 13px; font-weight: 500; color: var(--muted); }
.dial-count { font-size: 14px; margin: 2px 0 8px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 1px 0; }
.legend-row i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-row span { color: var(--muted); }
.legend-row b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.dial-note { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ---- Product stock / remaining / mode (Stats table) ---- */
.stockinput { width: 74px; padding: 5px 8px; text-align: end; font-variant-numeric: tabular-nums; }
.modesel { padding: 4px 11px; font-size: 12px; font-weight: 600; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.modesel.testing { border-color: var(--orange); color: var(--orange); background: rgba(245, 169, 92, 0.10); }
.modesel.launched { border-color: var(--green); color: var(--green); background: rgba(52, 201, 142, 0.10); }
.modesel:hover { filter: brightness(1.15); }
/* Test / Launch chooser menu — descriptions shown instantly on open. */
.modemenu { max-width: 300px; }
.modemenu button.modeitem { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; white-space: normal; }
.modemenu .mi-label { font-weight: 600; }
.modemenu .mi-desc { font-size: 11.5px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.modemenu button.modeitem.current { background: var(--panel); }

/* Stock-number dropdown: shows the total as-is + an obvious ▾ that opens the
   per-colour/size tracking popover (reuses .statusmenu float + click-away). */
/* Looks like a select box so it's unmistakably a dropdown: the value, then a
   divided, accent-tinted ▾ chevron segment that flips when open. */
.stockdrop { display: inline-flex; align-items: stretch; padding-block: 0; padding-inline: 11px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700; font-size: 13px; line-height: 26px; cursor: pointer; overflow: hidden; transition: background .15s, border-color .15s, box-shadow .15s; }
.stockdrop:hover { background: var(--panel); border-color: var(--accent, #4f8cff); box-shadow: 0 0 0 3px rgba(79,140,255,.12); }
.stockdrop.sd-open { background: var(--panel); border-color: var(--accent, #4f8cff); }
.stockdrop-caret { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; margin-inline-start: 10px; padding-inline: 7px; border-inline-start: 1px solid var(--border); background: rgba(79,140,255,.12); font-size: 11px; color: var(--accent, #4f8cff); transition: transform .15s ease, background .15s, border-color .15s; }
.stockdrop:hover .stockdrop-caret, .stockdrop.sd-open .stockdrop-caret { background: rgba(79,140,255,.22); border-color: var(--accent, #4f8cff); }
.stockdrop.sd-open .stockdrop-caret { transform: rotate(180deg); }
.stockmenu { min-width: 200px; max-width: min(320px, 90vw); padding: 12px 14px; gap: 10px; animation: stockmenu-in .13s ease-out; }
.stockmenu-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
@keyframes stockmenu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* "Testing" tag on the admin's own order rows (agents never see these rows) */
.testtag { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--orange);
  border: 1px solid var(--orange); background: rgba(245, 169, 92, 0.10); vertical-align: middle; }
.rem-cell { font-variant-numeric: tabular-nums; }
.rem-cell.rem-ok b { color: var(--green); }
.rem-cell.rem-low b { color: var(--orange); }
.rem-cell.rem-out b { color: var(--red); }

.statnote { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.hidebtn { padding: 3px 10px; font-size: 12px; }
.hiddenwrap { margin-top: 18px; }
.hiddenwrap summary { color: var(--muted); font-size: 13px; cursor: pointer; margin-bottom: 8px; }
.hiddenwrap summary:hover { color: var(--text); }

.msg { margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.msg.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000; margin: 0; max-width: min(560px, 92vw); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.msg.err { background: #40222a; color: var(--red); }
.msg.ok { background: #14382a; color: var(--green); }
.msg.warn { background: #3d2f1b; color: var(--orange); }

/* ---- Customer history dot (green = good, red = bad, dark red = super bad) ---- */
.cust-dot {
  display: inline-block; min-width: 20px; text-align: center;
  border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 800;
  margin-inline-start: 6px; color: #ffffff; cursor: help; vertical-align: middle;
}
.cust-dot.good { background: #128a5c; }
.cust-dot.bad { background: #d43f4f; }
.cust-dot.superbad { background: #7a0c16; box-shadow: 0 0 0 1px #ff8b8b inset; }
.cust-dot.neutral { background: #5f6b81; }

/* "20/6" pair badge: green delivered / red returned, border = verdict */
.cust-pair {
  display: inline-block; border-radius: 999px; padding: 1px 8px;
  font-size: 11.5px; font-weight: 800; margin-inline-start: 6px;
  background: rgba(0, 0, 0, 0.35); cursor: help; vertical-align: middle;
  border: 1.5px solid transparent; color: var(--muted);
}
:root[data-theme="light"] .cust-pair { background: rgba(28, 36, 52, 0.07); }
.cust-pair .cp-g { color: #22b57f; }
.cust-pair .cp-r { color: #ff5d6b; }
:root[data-theme="light"] .cust-pair .cp-g { color: #0f7a50; }
:root[data-theme="light"] .cust-pair .cp-r { color: #c22736; }

/* Repeat-order flags on an order row: 'double' (red) = re-ordered within 5 days;
   'shipping' (blue) = customer already has a parcel in transit. */
.dup-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; vertical-align: middle; cursor: help; white-space: nowrap; }
.dup-badge.dup-double { background: rgba(239, 68, 68, .18); color: #f0757f; border: 1px solid rgba(239, 68, 68, .5); }
.dup-badge.dup-ship { background: rgba(59, 130, 246, .2); color: #7fb0f5; border: 1px solid rgba(59, 130, 246, .55); }
:root[data-theme="light"] .dup-badge.dup-double { background: #fde8e8; color: #c22736; border-color: #f2b8be; }
:root[data-theme="light"] .dup-badge.dup-ship { background: #e6f0fe; color: #1f5fbf; border-color: #b9d3f7; }
tbody tr.dup-row-double { background: rgba(239, 68, 68, .06); }
tbody tr.dup-row-shipping { background: rgba(59, 130, 246, .06); }
.cust-pair.good { border-color: #128a5c; }
.cust-pair.warn { border-color: #c96f1a; }
.cust-pair.bad { border-color: #d43f4f; }
.cust-pair.superbad { border-color: #7a0c16; background: rgba(122, 12, 22, 0.35); }

/* ---- Click-to-call ---- */
.phone-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
.phone-link:hover { text-decoration: underline; }
.callbtn { padding: 7px 10px; flex-shrink: 0; }

/* ---- Team performance ---- */
.agtitle { font-size: 15px; margin: 0; }
.agentwrap .tablewrap { margin-top: 4px; }

.empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* ---- Team chat ---- */
.navbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle;
}
.chat { display: flex; gap: 14px; height: calc(100vh - 130px); }
.chat-list { flex: 0 0 280px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow-y: auto; }
.chat-list-head { padding: 12px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--border); }
.chat-contact { width: 100%; text-align: start; border: none; border-bottom: 1px solid var(--border); background: transparent; border-radius: 0; padding: 11px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.chat-contact:hover { background: var(--panel-2); border-color: var(--border); }
.chat-contact.active { background: var(--panel-2); }
.cc-name { font-weight: 600; font-size: 14px; }
.cc-off { font-weight: 400; font-size: 11px; color: var(--muted); }
.cc-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-badges { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.navbadge.problem { background: var(--orange); }

/* Problem report cards */
.chat-problem { align-self: stretch; max-width: 100%; border-radius: 12px; padding: 12px 14px; border: 1px solid; }
.chat-problem.open { background: rgba(240, 97, 109, .12); border-color: var(--red); }
.chat-problem.resolved { background: rgba(52, 201, 142, .12); border-color: var(--green); }
.cp-head { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.chat-problem.open .cp-head { color: var(--red); }
.chat-problem.resolved .cp-head { color: var(--green); }
.cp-desc { font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.cp-phone { margin-top: 8px; font-size: 14px; }
.cp-meta { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.cp-by { font-size: 12px; color: var(--muted); }
.cp-fixed { margin-top: 6px; font-size: 12.5px; color: var(--green); }
.cp-actions { margin-top: 10px; }

/* Problem form (shown above the composer for agents) */
.chat-problem-form { border-top: 1px solid var(--border); background: rgba(240, 97, 109, .06); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-problem-form[hidden] { display: none; }
.cpf-title { font-weight: 700; font-size: 13px; color: var(--red); }
.chat-problem-form textarea { resize: vertical; }
.cpf-actions { display: flex; gap: 8px; justify-content: flex-end; }
.chat-problem-btn { flex: none; width: 44px; padding: 8px 0; text-align: center; font-size: 16px; border-color: var(--red); color: var(--red); }
.chat-problem-btn:hover { background: rgba(240, 97, 109, .12); border-color: var(--red); }
.chat-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.chat-thread .empty { margin: auto; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.chat-back { display: none; padding: 4px 11px; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; flex-direction: column; max-width: 78%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.chat-msg.theirs .chat-bubble { background: var(--panel-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg.mine .chat-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble audio { display: block; max-width: 230px; height: 40px; }
.chat-time { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.chat-report { align-self: center; max-width: 92%; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.chat-report pre { font: inherit; white-space: pre-wrap; margin: 0; font-size: 13.5px; line-height: 1.5; }
.chat-report .chat-time { display: block; text-align: end; margin-top: 6px; }
.chat-compose { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); }
.chat-compose #chatInput { flex: 1; }
.chat-mic { flex: none; width: 44px; padding: 8px 0; text-align: center; font-size: 16px; }
.chat-mic.recording { background: var(--red); border-color: var(--red); color: #fff; }
.chat-rectime { font-variant-numeric: tabular-nums; font-weight: 600; }
.chat-recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: cblink 1s infinite; }
@keyframes cblink { 50% { opacity: .3; } }

/* ---- Live courier-status badge (list + order pop-up) ---- */
.cstatus { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--tc); border: none; cursor: pointer; white-space: nowrap; line-height: 1.5; }
.cstatus:hover { filter: brightness(1.12); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 35%, transparent); }
.cstrack { font-size: 11px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.cstatus-row { margin: 8px 0 4px; }

/* ---- Delivery history popup (opened from the badge) ---- */
.trackmodal { width: min(460px, 100%); }
.trackmodal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.trackmodal-head h2 { font-size: 17px; margin: 0; }
.track-loading { color: var(--muted); font-size: 13px; }
.track-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.track-title { font-weight: 700; font-size: 14px; }
.track-badge { color: #fff; background: var(--tc); border-radius: 999px; padding: 3px 12px;
  font-size: 12.5px; font-weight: 700; }
.track-meta { color: var(--muted); font-size: 12px; margin-inline-start: auto; }
.track-line { display: flex; flex-direction: column; gap: 0; }
.track-step { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.track-step:last-child { padding-bottom: 0; }
/* the vertical connector between dots */
.track-step:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 6px; top: 16px;
  bottom: 0; width: 2px; background: var(--border); }
.track-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--tc); flex: none; margin-top: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 25%, transparent); z-index: 1; }
.track-stepbody { min-width: 0; }
.track-step.now .track-label { font-weight: 700; }
.track-label { font-size: 13.5px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.track-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.track-sits { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.track-sit { font-size: 12.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 9px; }

/* Mobile-only "select all" — the desktop header checkbox is hidden on phones */
.selectall-m { display: none; }

@media (max-width: 640px) {
  main { padding: 12px 12px 40px; }

  /* Chat becomes single-pane: agent list OR the open thread */
  .chat { height: calc(100vh - 230px); min-height: 360px; gap: 0; }
  .chat-list { flex: 1 1 auto; }
  .chat.viewing .chat-list { display: none; }
  .chat:not(.viewing) .chat-thread { display: none; }
  .chat-back { display: inline-block; }

  .selectall-m {
    display: flex; align-items: center; gap: 10px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 11px 14px; margin-bottom: 10px; font-size: 14px; font-weight: 600;
    cursor: pointer; user-select: none;
  }
  .selectall-m input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
  .grid2, .form-grid { grid-template-columns: 1fr; }
  .modal { padding: 18px; }
  .overlay { padding: 10px; }

  /* ---- Header: compact, and the nav wraps so EVERY tab is reachable ---- */
  header { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  header .logo { font-size: 15px; }
  header .brandmark { height: 28px; width: 28px; }
  header .spacer { display: none; }
  /* Nav drops to its own full-width row and wraps onto as many lines as needed */
  nav { order: 5; width: 100%; flex-wrap: wrap; gap: 6px; }
  nav button { padding: 8px 12px; font-size: 14px; }
  header .who { font-size: 12px; order: 1; }
  header .langsel { order: 2; }
  header #themeBtn { order: 3; }
  header #logoutBtn { order: 4; }

  /* ---- Toolbar: full-width search so it's easy to tap ---- */
  .toolbar { gap: 8px; }
  .toolbar .spacer { display: none; }
  .toolbar input[type="search"] { width: 100%; }
  .toolbar #daysFilter { flex: 1; }
  .toolbar #newOrderBtn, .toolbar #syncBtn { flex: 1; }

  /* ---- Orders: the wide table becomes one tappable card per order ---- */
  .orders-wrap { background: transparent; border: none; border-radius: 0; overflow: visible; }
  .orders-table, .orders-table tbody { display: block; width: 100%; }
  .orders-table thead { display: none; }
  .orders-table tbody tr {
    display: block; position: relative;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; margin-bottom: 10px; padding: 2px 0;
  }
  /* Cards are already framed on mobile; the date header shows as a small heading
     above that day's stack of cards. */
  .orders-table tbody tr.day-head { display: block; background: transparent; border: 0; margin: 14px 2px 6px; padding: 0; }
  .orders-table tbody tr.day-head.first { margin-top: 2px; }
  .orders-table tbody tr.day-head > td { display: block; border: 0; padding: 0; text-align: start; min-height: 0; }
  .orders-table tbody tr.day-head > td::before { content: none; }
  .orders-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    white-space: normal; border: none; border-bottom: 1px solid var(--border);
    padding: 9px 14px; font-size: 14px; text-align: end; min-height: 40px;
  }
  .orders-table td:last-child { border-bottom: none; }
  .orders-table td::before {
    content: attr(data-label); flex: none; text-align: start;
    color: var(--muted); font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
  }
  .orders-table td.wrap { max-width: none; }
  /* Status is the card's header: badge on the left, big, no label */
  .orders-table td.statuscell {
    justify-content: flex-start; padding: 12px 14px 10px 14px; padding-inline-end: 44px;
    background: rgba(255, 255, 255, 0.02);
  }
  .orders-table td.statuscell::before { content: none; }
  .orders-table td.statuscell .badge { font-size: 13.5px; padding: 4px 12px; }
  .orders-table .byline { max-width: none; margin-inline-start: 8px; }
  /* Selection checkbox tucks into the card's top corner (admins only) */
  .orders-table td.selcol {
    position: absolute; top: 12px; inset-inline-end: 12px; padding: 0; border: none; min-height: 0;
  }
  .orders-table td.selcol::before { content: none; }
  .orders-table .rowcheck { width: 22px; height: 22px; }
  /* The phone and total are what agents reach for — make them pop */
  .orders-table td[data-label="#"] { font-size: 12.5px; color: var(--muted); }
  .orders-table .phone-link { font-size: 15px; font-weight: 600; }
}

/* ---------- Storefront (admin) ---------- */

/* Per-store identity banner (both tabs). Two distinct looks so the store types
   read as clearly different stores. */
.store-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-radius: 14px; margin: 14px 0 2px;
}
.store-hero .sh-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.store-hero img { height: 46px; width: auto; max-width: 130px; object-fit: contain; border-radius: 9px; }
.store-hero .sh-ico { font-size: 32px; line-height: 1; }
.store-hero .sh-name { font-weight: 800; font-size: 18px; }
.store-hero .sh-sub { font-size: 13px; margin-top: 2px; }
.store-hero .sh-visit {
  background: rgba(255, 255, 255, .16); color: #fff; padding: 9px 14px;
  border-radius: 10px; font-weight: 700; font-size: 13px; white-space: nowrap; transition: background .15s;
}
.store-hero .sh-visit:hover { background: rgba(255, 255, 255, .28); }
/* Multiproduct: solid brand-coloured storefront strip (bg set inline). */
.store-hero--multi { color: #fff; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .5); }
.store-hero--multi .sh-sub { opacity: .85; }
/* Product page: light card with an indigo left accent — deliberately different. */
.store-hero--single {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-inline-start: 4px solid #6366f1;
}
.store-hero--single .sh-ico { color: #6366f1; }
.store-hero--single .sh-name { font-size: 17px; }
.store-hero--single .sh-sub { color: var(--muted); }

/* Store picker (Level 1): two distinct store cards; nothing loads until pressed. */
.store-pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-top: 16px; max-width: 760px; }
.store-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: start;
  padding: 22px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel);
  color: var(--text); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.store-pick:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .55); }
.store-pick .sp-ico { font-size: 34px; line-height: 1; }
.store-pick .sp-title { font-weight: 800; font-size: 20px; }
.store-pick .sp-desc { color: var(--muted); font-size: 13.5px; }
.store-pick .sp-go { margin-top: 6px; font-weight: 700; font-size: 13px; opacity: .9; }
.store-pick--single { border-inline-start: 4px solid #6366f1; }
.store-pick--single .sp-ico { color: #6366f1; }
/* Default brand background so the white text is always readable even when the
   store hasn't set a primary_color (an inline style="background:…" overrides it). */
.store-pick--multi { color: #fff; border: none; background: linear-gradient(135deg, #2f6de0, #1e3a8a); }
.store-pick--multi .sp-desc { color: rgba(255, 255, 255, .85); }
.store-pick--multi .sp-current { background: rgba(255, 255, 255, .22); color: #fff; }
.store-pick--multi:hover { filter: brightness(1.06); }
.store-pick .sp-current { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }

.store-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px; margin-top: 14px;
}
.store-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s;
}
.store-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.store-thumb { height: 140px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; }
.store-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-noimg { font-size: 40px; opacity: .5; }
.store-cardbody { padding: 10px 12px 12px; }
.store-cardtitle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-cardmeta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.store-price { font-weight: 700; font-size: 13.5px; }
.store-status { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.store-status.draft { background: rgba(255, 190, 80, .16); color: #e5a93d; }
.store-status.published { background: rgba(70, 200, 140, .16); color: #3fbf87; }
:root[data-theme="light"] .store-status.draft { background: #ffeccd; color: #9a6414; }
:root[data-theme="light"] .store-status.published { background: #d3f2e4; color: #0f7a50; }
.store-slug { font-size: 12px; color: var(--muted); margin-top: 4px; direction: ltr; text-align: start; }

/* Store look — palettes, live preview, logo */
.store-palettes { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.store-swatch { display: flex; width: 48px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; }
.store-swatch i { flex: 1; display: block; }
.store-swatch:hover { border-color: var(--accent); }
.store-swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.store-preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; max-width: 340px; margin: 4px 0 14px; }
.store-preview .sp-cod { padding: 6px 10px; text-align: center; color: #fff; font-size: 12px; font-weight: 700; }
.store-preview .sp-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #fff; font-weight: 800; font-size: 16px; }
.store-preview .sp-logo img { height: 26px; width: auto; max-width: 90px; object-fit: contain; border-radius: 5px; display: block; }
.store-preview .sp-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px; }
.store-preview .sp-price { font-weight: 800; font-size: 17px; }
.store-preview .sp-btn { padding: 7px 14px; border-radius: 8px; font-weight: 700; font-size: 13px; }
.store-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 4px; }
.store-logo-preview { width: 130px; height: 52px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.store-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Connect-your-domain: numbered steps + the DNS record card */
.domain-steps { margin: 0 0 14px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; }
.domain-steps li { line-height: 1.5; }
.dns-rec { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel-2); max-width: 380px; }
.dns-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.dns-row:last-child { border-bottom: none; }
.dns-row > span { color: var(--muted); font-size: 12.5px; min-width: 74px; }
.dns-row > b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.dns-row #srvIp { flex: 1; }

.store-statusrow { display: flex; gap: 8px; margin-bottom: 4px; }
.store-statusopt {
  flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--muted); font-weight: 600; cursor: pointer;
}
.store-statusopt.active { border-color: var(--accent); color: var(--text); background: var(--panel); }

.store-themes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.store-swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; padding: 0;
}
.store-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }
.store-custcolor { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.store-custcolor input[type="color"] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }

.store-vrow {
  display: grid; grid-template-columns: 1fr 1fr 110px 130px 32px;
  gap: 8px; margin-bottom: 8px; align-items: center;
}
.pm-mitem .m-left, .pm-mitem .m-right {
  position: absolute; bottom: 3px; background: rgba(0,0,0,.6); border-color: transparent;
  color: #fff; padding: 1px 6px;
}
.pm-mitem .m-left { inset-inline-start: 3px; }
.pm-mitem .m-right { inset-inline-end: 3px; }

/* Client session recordings */
.sess-toggle { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.sess-toggle input { width: auto; }
.sess-list { display: flex; flex-direction: column; gap: 8px; }
.sess-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.sess-row:hover { border-color: var(--accent); }
.sess-dev { font-size: 20px; }
.sess-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sess-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-meta { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sess-ok { color: #16a34a; font-weight: 700; }
.sess-left { color: var(--muted); }
.sess-timeline { display: flex; flex-direction: column; gap: 2px; }
.sess-ev { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.sess-t { color: var(--muted); min-width: 56px; font-variant-numeric: tabular-nums; }

/* Storefront visitor funnel + grouped list (Sessions modal) */
.funnel { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.funnel-head { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.funnel-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.funnel-label { flex: 0 0 118px; font-size: 13px; color: var(--muted); }
.funnel-bar { flex: 1; height: 14px; background: var(--border); border-radius: 7px; overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: var(--accent); border-radius: 7px; }
.funnel-n { flex: 0 0 74px; text-align: end; font-size: 13px; font-variant-numeric: tabular-nums; }
.funnel-n small { color: var(--muted); }
.funnel-drop { flex: 0 0 44px; text-align: end; font-size: 12px; color: #dc2626; font-variant-numeric: tabular-nums; }
.funnel-row.worst .funnel-bar i { background: #dc2626; }
.funnel-row.worst .funnel-label { color: var(--text); font-weight: 700; }
.funnel-note { margin-top: 8px; font-size: 13px; }
.funnel-note.sub { color: var(--muted); }
.sess-tabs { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.sess-tab { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
.sess-tab b { color: var(--text); }
.sess-tab.active { border-color: var(--accent); color: var(--text); }
.sess-stage { padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; background: var(--border); color: var(--text); font-size: 11.5px; font-weight: 600; }
.sess-stage.stage-3 { background: transparent; border-color: var(--accent); color: var(--accent); }
.sess-stage.stage-4 { background: transparent; border-color: #16a34a; color: #16a34a; }
.sess-visits { color: var(--accent); font-weight: 600; }
.sess-bounce-toggle { margin-top: 10px; background: transparent; border: 1px dashed var(--border); color: var(--muted); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 12.5px; width: 100%; }

@media (max-width: 640px) {
  .store-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .store-vrow { grid-template-columns: 1fr 1fr; }
  .sess-row { flex-wrap: wrap; }
  .sess-meta { flex-wrap: wrap; }
  .funnel-label { flex-basis: 90px; }
}

/* Per-agent product picker (Team view) */
.prodpick { margin-top: 8px; }
.prodpick-summary { margin-bottom: 8px; min-height: 26px; }
.prodchip { display: inline-flex; align-items: center; gap: 6px; }
.prodchip-x { padding: 0 2px; margin: 0; background: transparent; border: 0; color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; }
.prodchip-x:hover { color: var(--text); border: 0; }
.prodpick-search { width: 100%; margin: 0 0 8px; }
.prodpick-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.prodpick-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.prodpick-row:last-child { border-bottom: 0; }
.prodpick-row:hover { background: var(--panel); }
.prodpick-row input { width: auto; margin: 0; flex: none; }
.prodpick-empty { padding: 14px 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---- Plan usage limits (products + Telegram searches) ---- */
.usage-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 12px 14px; margin: 0 auto 14px; max-width: 640px; }
.usage-head { font-weight: 700; margin-bottom: 8px; }
.usage-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.usage-row:first-of-type { border-top: none; }
.usage-row span { color: var(--muted); }
.usage-row b { font-variant-numeric: tabular-nums; }
.usage-row.over b { color: var(--red); }
.store-usage, .find-usage { display: inline-block; font-size: 13px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.store-usage.over, .find-usage.over { color: var(--red); border-color: var(--red); }
.pr-limits { list-style: none; margin: 8px 0 12px; padding: 0; font-size: 12px; color: var(--muted); text-align: start; display: grid; gap: 4px; }
.pr-limits li { display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.pr-limits li::before { content: "✓"; color: var(--green); font-weight: 700; flex: none; }
.limit-modal .sub { color: var(--muted); }
.board-usage { display: inline-flex; align-items: center; font-size: 13px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; margin-inline-start: 8px; font-variant-numeric: tabular-nums; }
.board-usage.over { color: var(--red); border-color: var(--red); }

/* ---- Custom domain live status ---- */
.dom-status { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); font-size: 13px; line-height: 1.5; }
.dom-status.waiting { border-color: var(--orange); color: var(--text); }
.dom-status.issuing { border-color: var(--accent); color: var(--text); }
.dom-status.live    { border-color: var(--green);  color: var(--text); }

/* ---- Domain setup: per-provider DNS guide ---- */
.dns-guide { margin-top: 8px; }
.dns-path { font-size: 13px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
.dns-note { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--panel-2); border: 1px solid var(--orange); border-radius: 8px; padding: 8px 10px; }

/* Plan card: per-month basis under the period total, and the period explainer. */
.pr-basis { font-size: 11.5px; color: var(--muted); text-align: center; margin: -2px 0 4px; }
.pr-note { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5; margin: 6px auto 14px; max-width: 620px; }

/* Telegram group picker — the client chooses which groups get indexed. Sized so
   a long account list scrolls inside the panel instead of pushing it off-screen. */
.tglist { max-height: 320px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line, #2a2a33); border-radius: 8px; }
.tgrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.tgrow + .tgrow { border-top: 1px solid var(--line, #2a2a33); }
.tgrow:hover { background: rgba(127, 127, 127, .08); }
.tgrow input { flex: none; width: auto; }   /* the global input rule is width:100% — same fix as .tgtoggle */
/* Full group name, wrapped rather than cut off — a truncated name is the one
   thing that makes a group hard to recognise. */
.tgrow-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tgavatar { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
            background: var(--panel-2); display: grid; place-items: center; }
.tgavatar::before { content: attr(data-letter); font-size: 14px; font-weight: 600; color: var(--muted); }
.tgavatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tgrow-count { flex: none; opacity: .6; font-size: 12px; }

/* Owner console: which plan an account runs under. "No plan" is a warning, not a
   neutral state — it means every limit falls back to unlimited. */
.cl-kind-badge.plan { background: rgba(88,132,255,.14); color: #6f9bff; }
.cl-kind-badge.noplan { background: rgba(230,120,60,.16); color: #e0873f; }

/* API keys and tokens. Deliberately NOT type="password": Chrome's password
   manager attaches to that type and kept offering the saved account login,
   which risked a client saving their own password as an API secret. This masks
   the characters exactly like a password field while leaving Chrome nothing to
   hook onto. */
.secretfield { -webkit-text-security: disc; text-security: disc; }

/* ---- Launch gate ---------------------------------------------------------
   Uses the app's standard .pmodal skeleton (.modal-head / .modal-scroll /
   .modal-foot), so padding, scrolling and the pinned footer come from there.
   Logical properties throughout, so it mirrors cleanly in Arabic. */
.modal.pmodal.launchmodal { width: min(480px, 100%); }

.lg-explain {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.lg-explain > div + div { margin-top: 8px; }
.lg-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-inline-end: 4px;
  color: var(--text);
}
.lg-badge.test { background: rgba(230,150,60,.16); }
.lg-badge.live { background: rgba(80,170,120,.18); }

.lg-fld { display: block; margin-bottom: 18px; }
.lg-fld > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.lg-fld input[type=number] { width: 100%; }

.lg-yn { display: flex; gap: 8px; }
.lg-yn button {
  flex: 1;
  padding: 9px 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.lg-yn button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.lg-vars {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}
.lg-varhint { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.lg-norows {
  font-size: 12.5px; color: var(--muted);
  background: var(--panel-2); border-radius: 8px; padding: 10px 12px;
}
.lg-group + .lg-group { margin-top: 18px; }
.lg-grouphead {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.lg-row {
  display: grid;
  grid-template-columns: 1fr 88px auto 30px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.lg-row-name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px;
}
.lg-row input[type=number] { width: 100%; text-align: center; }
.lg-used {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; text-align: end; min-width: 48px;
}

/* Amber, not red: nothing is broken — the client simply hasn't finished yet. */
.lg-missing {
  background: rgba(230,150,60,.12);
  color: var(--orange, #e0a04f);
  border-radius: 9px;
  padding: 10px 12px;
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.7;
}
.lg-missing div::before { content: "• "; }

/* Add a colour / size — a name box + a ＋, matching the app's input styling. */
.lg-addrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.lg-add-input { width: 100%; font-size: 13px; }
.lg-add-btn {
  flex: none; width: 40px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel-2); color: var(--text); font-size: 18px; line-height: 1;
  cursor: pointer;
}
.lg-add-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Per-row remove — subtle until hovered, so the rows stay calm. */
.lg-rm {
  width: 28px; height: 28px; padding: 0; font-size: 13px;
  opacity: .45; flex: none;
}
.lg-rm:hover { opacity: 1; color: var(--red, #e05656); }

.launchmodal .modal-foot .lg-go { flex: 1; }
.launchmodal .modal-foot .lg-go[disabled] { opacity: .5; cursor: not-allowed; }
.launchmodal .modal-foot .lg-later {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel-2); color: var(--text); cursor: pointer; white-space: nowrap;
}

/* Organiser: which shape the product's variants take. */
.lg-organiser { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; border-top: 1px solid var(--border); padding-top: 16px; }
.lg-organiser .lg-modebtn {
  padding: 8px 4px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel-2); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.lg-organiser .lg-modebtn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.lg-modehint { font-size: 12px; color: var(--muted); margin: 10px 0 14px; line-height: 1.5; }
.lg-total-auto { padding: 9px 12px; border: 1px dashed var(--border); border-radius: 9px; background: var(--panel-2); }
.lg-total-auto b { font-size: 16px; }
.lg-total-auto .sub { margin-inline-start: 6px; }
.vgrid-total { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); margin-inline-start: 8px; }
.vgrid-total b.rem-out { color: var(--red, #e05656); } .vgrid-total b.rem-low { color: var(--orange, #e0a04f); } .vgrid-total b.rem-ok { color: var(--green, #50aa78); }

/* Colour card (colours-with-sizes mode): a colour and its own sizes. */
.lg-ccard { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.lg-ccard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lg-ccard-name { font-weight: 700; font-size: 13.5px; }
.lg-srow { padding-inline-start: 4px; }
.lg-addcolor { margin-top: 4px; }

/* Team-facing per-variant stock (expand under a product row). */
.varcaret { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 4px 0 0; transition: transform .15s; display: inline-block; }
.varcaret.open { transform: rotate(90deg); }
.vardetail > td { background: var(--panel-2); padding: 12px 16px; }
.vgrid-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.vgrid { display: flex; flex-direction: column; gap: 10px; }
.vcard { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.vcard-name { font-weight: 700; font-size: 12.5px; min-width: 70px; }
.vchips { display: flex; gap: 6px; flex-wrap: wrap; }
.varchip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); }
.varchip.rem-out { background: rgba(230,90,90,.15); border-color: rgba(230,90,90,.4); }
.varchip.rem-low { background: rgba(230,150,60,.15); border-color: rgba(230,150,60,.4); }
.varchip.rem-ok  { background: rgba(80,170,120,.14); border-color: rgba(80,170,120,.35); }

/* Collapsible Stats drawers — fold the per-product table and the tracking list into
   dropdowns once the client has many products (start collapsed). Uses logical props
   so the caret/count sit correctly in RTL. */
.stat-drawer { margin: 22px 0 4px; }
.stat-drawer > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; font-weight: 700; font-size: 15px; transition: background .15s; }
.stat-drawer > summary::-webkit-details-marker { display: none; }
.stat-drawer > summary:hover { background: var(--panel); }
.stat-drawer[open] > summary { border-radius: 12px 12px 0 0; }
.stat-drawer .sd-caret { color: var(--muted); font-size: 12px; transition: transform .18s ease; }
.stat-drawer[open] > summary .sd-caret { transform: rotate(90deg); }
.stat-drawer .sd-sub { color: var(--muted); font-weight: 600; font-size: 12.5px; margin-inline-start: auto; }
.stat-drawer .sd-body { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; padding: 12px 14px; background: var(--panel); }
.stat-drawer .sd-body .tablewrap { border: 0; border-radius: 0; }
.stat-drawer .sd-body > .statnote { margin-bottom: 0; }
.stat-drawer .sd-body > .track-grid { margin: 0; }

/* Stock-tracking cards — colours / sizes / quantity left, side by side on desktop,
   stacking on mobile. Inner .vgrid / .varchip chips are already styled above. */
.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.track-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.track-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.track-name { font-weight: 700; font-size: 14px; }
.track-left { font-size: 12px; color: var(--muted); white-space: nowrap; }
.track-left b.rem-out { color: var(--red, #e05656); } .track-left b.rem-low { color: var(--orange, #e0a04f); } .track-left b.rem-ok { color: var(--green, #50aa78); }

/* The 🧪 tag in Orders opens the product's launch panel — a subtle pill, not a button. */
.testtag {
  cursor: pointer;
  border: 1px solid rgba(230,150,60,.35);
  background: rgba(230,150,60,.12);
  color: var(--orange, #e0a04f);
  font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px;
  vertical-align: middle;
}
.testtag:hover { background: rgba(230,150,60,.22); }

/* The shared stock/variants editor embedded in the product form. */
.pm-stock { margin-top: 6px; }
.pm-stock .lg-fld:first-child { margin-top: 0; }