/* ─────────────────────────────────────────────────────────────────────────
   Wevelink Dashboard — light theme, matched to wevelink.com brand
   Brand green #2ECC71 / #27AE60, Inter, soft rounded surfaces.
   ───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --green:      #2ECC71;
  --green-dark: #27AE60;
  --green-deep: #0F1A12;
  --green-pale: #EAF8EF;
  --green-tint: #F3F9F5;

  --ink:        #0F1A12;   /* near-black green */
  --ink-mid:    #5b6b60;
  --ink-muted:  #8a978e;

  --bg:         #F6FAF7;   /* page */
  --surface:    #FFFFFF;   /* cards */
  --surface-2:  #F2F7F4;   /* hover / subtle */
  --border:     #E4EDE8;
  --border-2:   #EDF3EF;

  --amber:      #E67E22;
  --amber-bg:   #FDF3E7;
  --red:        #E5484D;
  --red-bg:     #FCECEC;
  --blue:       #2563EB;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,26,18,.04), 0 1px 3px rgba(15,26,18,.06);
  --shadow-md: 0 4px 24px rgba(15,26,18,.06);
  --shadow-lg: 0 18px 50px rgba(15,26,18,.10);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{ font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased }
a{ color:var(--green-dark); text-decoration:none }
a:hover{ color:var(--green) }
code,.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px }
.muted{ color:var(--ink-muted) }

/* ── Login ─────────────────────────────────────────────────────────── */
.login-body{ min-height:100vh; display:grid; place-items:center;
  background:
    radial-gradient(900px 500px at 50% -10%, var(--green-pale), transparent 60%),
    var(--bg);
  padding:24px }
.login-card{ width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:40px 36px; display:flex;
  flex-direction:column; gap:14px; text-align:center }
.login-logo{ width:64px; height:64px; object-fit:contain; margin:0 auto 4px;
  filter:drop-shadow(0 8px 20px rgba(46,204,113,.28)) }
.login-card h1{ font-size:21px; font-weight:800; letter-spacing:-.01em }
.login-card .sub{ color:var(--ink-muted); font-size:13.5px; margin-top:-6px }
.login-card .field{ text-align:left; display:flex; flex-direction:column; gap:6px }
.login-card label{ font-size:12px; font-weight:600; color:var(--ink-mid) }
.login-card input{ width:100%; padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  font-size:14px; font-family:var(--font); transition:border-color .15s, box-shadow .15s }
.login-card input:focus{ outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-pale) }
.btn-primary{ width:100%; padding:14px; border:none; border-radius:var(--r-sm);
  background:var(--green); color:#062; font-weight:700; font-size:14.5px;
  cursor:pointer; transition:transform .12s, box-shadow .2s, background .2s;
  box-shadow:0 6px 18px rgba(46,204,113,.3) }
.btn-primary:hover{ background:var(--green-dark); transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(46,204,113,.36) }
.btn-primary:disabled{ opacity:.65; cursor:default; transform:none }
.login-foot{ font-size:12px; color:var(--ink-muted); margin-top:2px }

/* ── App shell: sidebar + content ──────────────────────────────────── */
.shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh }
.sidebar{ background:linear-gradient(180deg,#fff,#fbfdfc);
  border-right:1px solid var(--border); padding:20px 14px;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh }
.side-brand{ display:flex; align-items:center; gap:12px; padding:8px 12px 22px }
.side-brand img{ width:36px; height:36px; object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(46,204,113,.25)) }
.side-brand b{ font-weight:800; font-size:16.5px; letter-spacing:-.01em; line-height:1.1 }
.side-brand small{ display:block; font-weight:500; font-size:11px; color:var(--ink-muted); margin-top:2px }
.nav-group{ font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-muted); padding:8px 14px 6px }
.side-link{ position:relative; display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:12px; color:var(--ink-mid); font-weight:600;
  font-size:14px; transition:background .14s, color .14s; margin-bottom:2px }
.side-link:hover{ background:var(--surface-2); color:var(--ink) }
.side-link.active{ background:var(--green-pale); color:var(--green-dark) }
.side-link.active::before{ content:""; position:absolute; left:-14px; top:50%;
  transform:translateY(-50%); width:4px; height:22px; border-radius:0 4px 4px 0;
  background:var(--green) }
.ic{ width:19px; height:19px; flex-shrink:0 }
.side-link .ic{ opacity:.85 }
.side-link.active .ic{ opacity:1 }
.side-nav{ flex:1; overflow-y:auto; margin:0 -6px; padding:0 6px }
.side-nav::-webkit-scrollbar{ width:6px }
.side-nav::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px }
.nav-group:first-child{ padding-top:2px }
.side-foot{ border-top:1px solid var(--border); padding-top:14px; margin-top:10px }
.side-user{ display:flex; align-items:center; gap:10px; padding:4px 8px 12px }
.side-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:14px; text-transform:uppercase }
.side-user-meta{ min-width:0 }
.side-user-meta b{ display:block; font-size:12.5px; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px }
.side-user-meta small{ font-size:11px; color:var(--ink-muted) }
.side-out{ display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:11px; color:var(--ink-mid); font-weight:600;
  font-size:13px; border:1px solid var(--border); background:var(--surface);
  transition:background .14s, color .14s, border-color .14s }
.side-out:hover{ background:var(--red-bg); color:var(--red); border-color:#f3c9ca }
.side-out .ic{ width:16px; height:16px }

.content{ padding:30px 40px; max-width:1600px; width:100% }
.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px }
.page-head h1{ font-size:24px; font-weight:800; letter-spacing:-.02em }
.page-head .subtitle{ color:var(--ink-muted); font-size:13.5px; margin-top:3px }
h2{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-muted); margin:22px 0 10px }

/* ── Stat cards ────────────────────────────────────────────────────── */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px }
.stat{ background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:13px 15px; box-shadow:var(--shadow-sm) }
.stat .n{ font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.05 }
.stat .n small{ font-size:12px; font-weight:700; color:var(--ink-muted); margin-left:3px }
.stat .l{ color:var(--ink-muted); font-size:12px; margin-top:5px }

/* ── Tables ────────────────────────────────────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-sm) }
.tbl th{ text-align:left; padding:12px 16px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted);
  border-bottom:1px solid var(--border); background:var(--surface-2) }
.tbl td{ padding:13px 16px; border-bottom:1px solid var(--border-2); vertical-align:middle }
.tbl tr:last-child td{ border-bottom:none }
.tbl tbody tr:hover{ background:var(--green-tint) }

.pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700 }
.pill.ok{ background:var(--green-pale); color:var(--green-dark) }
.pill.warn{ background:var(--amber-bg); color:var(--amber) }
.pill.crit{ background:var(--red-bg); color:var(--red) }
.tag{ font-size:12px; padding:2px 7px; border-radius:6px; background:var(--surface-2); color:var(--ink-mid) }

.alert{ padding:13px 16px; border-radius:var(--r-sm); margin:0 0 18px; font-size:13px; font-weight:500 }
.alert.ok{ background:var(--green-pale); color:var(--green-dark); border:1px solid #c9ecd6 }
.alert.warn{ background:var(--amber-bg); color:#a55a0f; border:1px solid #f5dcbd }
.alert.error{ background:var(--red-bg); color:#b3282c; border:1px solid #f3c9ca }

.filters,.search{ display:flex; gap:8px; margin-bottom:18px; align-items:center }
.filters a{ padding:7px 14px; border-radius:999px; background:var(--surface);
  border:1px solid var(--border); color:var(--ink-mid); font-weight:600; font-size:12.5px }
.filters a:hover{ background:var(--surface-2) }
.filters a.active{ background:var(--green); color:#062; border-color:var(--green) }
.export-group{ display:flex; gap:8px; align-items:center }

/* custom date range: two From / To pickers in the filter bar */
.filters .date-from-to{ display:inline-flex; align-items:center; gap:7px }
.filters .date-input{ padding:7px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface);
  font-size:13px; font-weight:600; color:var(--ink-mid); cursor:pointer; width:118px; text-align:center; font-family:var(--font) }
.filters .date-input:hover{ background:var(--surface-2) }
.filters .date-input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.filters .date-input::placeholder{ color:var(--ink-muted); font-weight:500 }
.filters .dft-sep{ font-size:12px; color:var(--ink-muted); font-weight:600 }
.flatpickr-calendar{ box-shadow:0 14px 44px rgba(15,42,30,.16); border-radius:14px; border:1px solid var(--border); padding:2px 4px 6px }
.flatpickr-months{ padding-top:4px }
.flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year, .flatpickr-current-month .numInputWrapper{ color:var(--ink) }
.flatpickr-weekday{ color:var(--ink-muted); font-weight:700; font-size:11px }
.flatpickr-day{ color:var(--ink); font-weight:600; border-radius:9px; height:38px; line-height:38px; border:1px solid transparent }
.flatpickr-day:hover{ background:var(--surface-2); border-color:var(--surface-2) }
.flatpickr-day.today{ border-color:var(--green); color:var(--green-dark) }
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.flatpickr-disabled{ color:var(--ink-muted); opacity:.5 }
/* endpoints: clean green circles */
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,
.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover{
  background:var(--green); border-color:var(--green); color:#fff; box-shadow:none }
/* the span between: one light connected strip, no stripes */
.flatpickr-day.inRange{ background:var(--green-pale); border-color:var(--green-pale); color:var(--green-dark); box-shadow:none; border-radius:0 }
.flatpickr-day.startRange{ border-radius:9px 0 0 9px }
.flatpickr-day.endRange{ border-radius:0 9px 9px 0 }
.flatpickr-day.startRange.endRange{ border-radius:9px }
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{ fill:var(--green-dark) }
.filters .export-group a{ border-radius:10px; padding:8px 16px; font-weight:700; font-size:13px; border:1px solid var(--border) }
.filters .export-group a.btn-green{ background:var(--green); color:#fff; border-color:var(--green) }
.filters .export-group a.btn-green:hover{ background:var(--green-dark) }
.filters .export-group a.btn-outline{ background:var(--surface); color:var(--ink) }
.filters .export-group a.btn-outline:hover{ background:var(--surface-2) }
.search input{ flex:1; max-width:360px; padding:11px 14px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--ink); font-family:var(--font) }
.search input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.search button{ padding:11px 20px; border:none; border-radius:var(--r-sm);
  background:var(--green); color:#062; font-weight:700; cursor:pointer }
.search button:hover{ background:var(--green-dark) }
.search .clear{ align-self:center; color:var(--ink-muted) }

/* ── Config toggles ────────────────────────────────────────────────── */
.cfg{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm) }
.cfg-row{ display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; border-bottom:1px solid var(--border-2); margin:0 }
.cfg-row:last-child{ border-bottom:none }
.cfg-label{ font-weight:600 }
.cfg-ctl select{ padding:8px 12px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-family:var(--font); font-weight:600 }
.switch{ padding:7px 18px; border:none; border-radius:999px; font-weight:700;
  cursor:pointer; background:#e2e8e5; color:var(--ink-mid); font-size:12px }
.switch.on{ background:var(--green); color:#062 }

.bar{ height:6px; background:var(--surface-2); border-radius:999px; margin-top:6px; overflow:hidden; width:120px }
.bar span{ display:block; height:100%; background:var(--green); border-radius:999px }

@media (max-width:820px){
  .shell{ grid-template-columns:1fr }
  .sidebar{ position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center }
  .side-spacer,.side-foot{ display:none }
  .content{ padding:20px }
}

/* ── Detail cards / user pages ─────────────────────────────────────── */
.back{ display:inline-block; color:var(--ink-mid); font-weight:600; font-size:13px; margin-bottom:16px }
.back:hover{ color:var(--green-dark) }
.detail-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:22px; box-shadow:var(--shadow-sm) }
.card-h{ display:flex; align-items:center; gap:14px; margin-bottom:18px }
.card-title{ font-size:15px; font-weight:800; letter-spacing:-.01em; margin-bottom:14px }
.card-h .card-title{ margin:0 }
.side-avatar.sm{ width:28px; height:28px; font-size:12px }
.side-avatar.lg{ width:52px; height:52px; font-size:20px; border-radius:14px }
.side-avatar.has-img{ background:none; overflow:hidden; cursor:zoom-in; }
.side-avatar.has-img img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
/* Fullscreen preview for a clicked profile photo */
.img-lightbox{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.82); padding:24px; cursor:zoom-out; }
.img-lightbox.in{ display:flex; }
.img-lightbox img{ width:auto; height:auto; min-width:min(420px,84vw); max-width:92vw; max-height:86vh;
  object-fit:contain; border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.5); cursor:default; }
.img-lightbox .ilb-x{ position:absolute; top:16px; right:20px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:0; font-size:22px; line-height:1; cursor:pointer; }
.img-lightbox .ilb-x:hover{ background:rgba(255,255,255,.26); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:13.5px }
.kv dt{ color:var(--ink-muted); font-weight:600 }
.kv dd{ text-align:right; word-break:break-word }
.kv dd.break{ font-size:11px; text-align:left }
.u-cell{ display:flex; align-items:center; gap:10px; font-weight:600 }
.row-link{ font-weight:700; font-size:13px; white-space:nowrap }
.break{ word-break:break-all }
.danger-row{ margin-top:20px; padding-top:16px; border-top:1px solid var(--border-2) }
.btn{ padding:11px 20px; border:none; border-radius:var(--r-sm); font-weight:700;
  font-size:13.5px; cursor:pointer; font-family:var(--font) }
.btn-danger{ background:var(--red-bg); color:var(--red); border:1px solid #f3c9ca }
.btn-danger:hover{ background:var(--red); color:#fff }
.btn-green{ background:var(--green); color:#062 }
.btn-green:hover{ background:var(--green-dark) }
@media (max-width:900px){ .detail-grid{ grid-template-columns:1fr } }

/* provider config sections */
.cfg-provider{ margin-bottom:26px }
.cfg-provider .prov-head{ display:flex; align-items:center; gap:10px; margin:0 0 10px }
.cfg-provider .prov-head .dot{ width:9px; height:9px; border-radius:50% }
.dot.live{ background:var(--green) } .dot.sandbox{ background:var(--amber) } .dot.off{ background:#c4cdc7 }
.prov-title{ font-size:15px; font-weight:800 }

/* ── Overview extras ───────────────────────────────────────────────── */
.stat.highlight{ background:linear-gradient(135deg,var(--green-pale),#fff); border-color:#cdeed9 }
.stat .n .unit{ font-size:14px; font-weight:700; color:var(--ink-muted); margin-left:6px }
.two-col{ display:grid; grid-template-columns:1.3fr 1fr; gap:22px; margin-top:8px }
@media (max-width:1000px){ .two-col{ grid-template-columns:1fr } }

/* ── Charts ────────────────────────────────────────────────────────── */
.chart-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px }
.chart-card{ padding:15px 17px }
.chart-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px }
.chart-head span{ color:var(--ink-muted); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em }
.chart-head b{ font-size:17px; font-weight:800 }
.chart-head b small{ font-size:11px; font-weight:500; color:var(--ink-muted); margin-left:6px }
.chart{ width:100%; height:92px; display:block }
.chart-x{ display:flex; justify-content:space-between; margin-top:6px }
.chart-x span{ font-size:12px; color:var(--ink-muted); flex:1; text-align:center }
@media (max-width:1000px){ .chart-row{ grid-template-columns:1fr } }

/* ── Inline actions / creators / tickets ───────────────────────────── */
.creator{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  margin-bottom:16px; box-shadow:var(--shadow-sm) }
.creator summary{ padding:14px 18px; cursor:pointer; font-weight:700; color:var(--green-dark);
  list-style:none } .creator summary::-webkit-details-marker{ display:none }
.creator[open] summary{ border-bottom:1px solid var(--border) }
.form-grid{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; padding:18px }
.form-grid label{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--ink-mid) }
.form-grid input,.form-grid select{ padding:9px 12px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-family:var(--font); min-width:130px }
.form-grid input:focus,.form-grid select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.form-grid .chk{ flex-direction:row; align-items:center; gap:7px }
.inline{ display:inline; margin:0 }
.inline .mini{ width:74px; padding:6px 8px; border-radius:8px; border:1px solid var(--border); font-family:var(--font) }
.btn-mini{ padding:6px 13px; border:none; border-radius:8px; font-weight:700; font-size:12px; cursor:pointer }
.btn-mini-on{ background:var(--green); color:#062 } .btn-mini-on:hover{ background:var(--green-dark) }
.btn-mini-off{ background:var(--surface-2); color:var(--ink-mid); border:1px solid var(--border) }
.btn-mini-off:hover{ background:var(--red-bg); color:var(--red) }

.ticket{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow-sm) }
.ticket-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.ticket-body{ color:var(--ink); font-size:13.5px; line-height:1.55 }
.ticket-reply{ background:var(--green-tint); border-left:3px solid var(--green); border-radius:8px;
  padding:10px 14px; margin-top:12px; font-size:13px }
.ticket-form{ display:flex; gap:10px; margin-top:14px; align-items:flex-end }
.ticket-form textarea{ flex:1; padding:10px 13px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-family:var(--font); resize:vertical }
.ticket-form textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }

/* ── Notifications send / edit rows ────────────────────────────────── */
.send-card{ max-width:560px; margin-bottom:24px }
.send-card .seg{ display:inline-flex; background:var(--surface-2); border-radius:10px; padding:3px; margin-bottom:16px }
.send-card .seg-opt{ cursor:pointer }
.send-card .seg-opt input{ display:none }
.send-card .seg-opt span{ display:block; padding:7px 16px; border-radius:8px; font-weight:600; font-size:13px; color:var(--ink-mid) }
.send-card .seg-opt input:checked + span{ background:#fff; color:var(--green-dark); box-shadow:var(--shadow-sm) }
.send-card .fld{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px }
.send-card .fld label{ font-size:12px; font-weight:600; color:var(--ink-mid) }
.send-card input,.send-card select,.send-card textarea{ padding:11px 13px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-family:var(--font); resize:vertical }
.send-card input:focus,.send-card select:focus,.send-card textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.edit-row{ display:none } .edit-row.show{ display:table-row }
.edit-row td{ background:var(--green-tint) }

/* ═══ Front-end layer: progress, toasts, modal, dropdown, pager, update ═══ */

/* top progress bar */
.wv-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:10000;
  background:linear-gradient(90deg,var(--green),var(--green-dark)); box-shadow:0 0 8px rgba(46,204,113,.6); opacity:0 }

/* toasts */
.wv-toasts{ position:fixed; top:18px; right:18px; z-index:10001; display:flex; flex-direction:column; gap:10px }
.wv-toast{ display:flex; align-items:center; gap:11px; min-width:240px; max-width:380px;
  padding:13px 16px; border-radius:13px; background:#fff; color:var(--ink);
  box-shadow:0 12px 40px rgba(15,26,18,.16); border:1px solid var(--border); font-size:13.5px; font-weight:600;
  transform:translateX(120%); opacity:0; transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .3s }
.wv-toast.in{ transform:none; opacity:1 }
.wv-toast-ic{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:13px; flex-shrink:0 }
.wv-toast.ok .wv-toast-ic{ background:var(--green) }
.wv-toast.error .wv-toast-ic{ background:var(--red) }
.wv-toast.warn .wv-toast-ic{ background:var(--amber) }
.wv-toast.info .wv-toast-ic{ background:var(--blue) }
.wv-toast.error{ border-color:#f3c9ca } .wv-toast.ok{ border-color:#c9ecd6 }
/* Let long messages wrap inside the toast instead of forcing it wider than the
   screen (the text span must be allowed to shrink + break). */
.wv-toast > span:last-child{ min-width:0; flex:1 1 auto; overflow-wrap:anywhere; word-break:break-word }
/* Mobile: pin the stack to both edges with a gutter and drop the min/max width so
   a toast is never wider than the viewport (its text used to run off-screen). */
@media (max-width:600px){
  .wv-toasts{ left:12px; right:12px; top:12px }
  .wv-toast{ min-width:0; max-width:none; width:auto }
}

/* confirm modal */
.wv-modal{ position:fixed; inset:0; z-index:10002; display:grid; place-items:center;
  background:rgba(15,26,18,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s }
.wv-modal.in{ opacity:1; pointer-events:all }
.wv-modal-card{ background:#fff; border-radius:20px; padding:26px 26px 20px; max-width:380px; width:calc(100% - 40px);
  max-height:88vh; overflow-y:auto;
  box-shadow:0 24px 70px rgba(15,26,18,.25); transform:scale(.94); transition:transform .3s cubic-bezier(.34,1.56,.64,1) }
/* End on transform:none (not scale(1)): a settled transform still forms a
   containing block for position:fixed children, which threw the floating
   .wv-dd-list to the screen edge. none removes it so the list pins to the btn. */
.wv-modal.in .wv-modal-card{ transform:none }
.wv-modal-card h3{ font-size:18px; font-weight:800; margin-bottom:8px }
.wv-modal-card p{ color:var(--ink-mid); font-size:14px; line-height:1.55; margin-bottom:20px }
.wv-modal-actions{ display:flex; gap:10px; justify-content:flex-end }
.wv-btn-ghost{ padding:10px 18px; border-radius:11px; border:1px solid var(--border); background:#fff;
  color:var(--ink-mid); font-weight:700; font-size:13.5px; cursor:pointer; font-family:var(--font) }
.wv-btn-ghost:hover{ background:var(--surface-2) }
.wv-btn-solid{ padding:10px 20px; border-radius:11px; border:none; background:var(--green); color:#062;
  font-weight:700; font-size:13.5px; cursor:pointer; font-family:var(--font) }
.wv-btn-solid:hover{ background:var(--green-dark) }
.wv-btn-solid.danger{ background:var(--red); color:#fff } .wv-btn-solid.danger:hover{ background:#c8383c }

/* custom dropdown */
.wv-dd{ position:relative; display:inline-block; min-width:150px }
.form-grid .wv-dd,.send-card .wv-dd{ width:100%; display:block }
.wv-dd-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:var(--r-sm); border:1px solid var(--border); background:#fff;
  color:var(--ink); font-weight:600; font-size:13.5px; cursor:pointer; font-family:var(--font); text-align:left }
.wv-dd-btn:hover{ border-color:#cfe0d6 }
.wv-dd.open .wv-dd-btn{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.wv-dd.open{ z-index:200 }
.wv-dd-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.wv-dd-caret{ color:var(--ink-muted); font-size:11px; flex-shrink:0 }
.wv-dd-list{ position:absolute; top:calc(100% + 6px); left:0; right:auto; min-width:100%; width:max-content; max-width:360px; z-index:200; background:#fff;
  border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 44px rgba(15,26,18,.16);
  max-height:280px; overflow:auto; padding:5px; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s, transform .16s }
.wv-dd.open .wv-dd-list{ opacity:1; transform:none; pointer-events:all }
.wv-dd-search{ width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:9px; margin-bottom:5px;
  font-family:var(--font); font-size:13px }
.wv-dd-search:focus{ outline:none; border-color:var(--green) }
.wv-dd-opt{ padding:9px 11px; border-radius:9px; font-size:13.5px; cursor:pointer; color:var(--ink-mid); white-space:normal; overflow-wrap:anywhere; line-height:1.55 }
.wv-dd-opt:hover{ background:var(--surface-2); color:var(--ink) }
.wv-dd-opt.sel{ background:var(--green-pale); color:var(--green-dark); font-weight:700 }

/* pager */
.wv-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; font-size:13px; color:var(--ink-mid) }
.wv-pager button{ padding:8px 14px; border-radius:10px; border:1px solid var(--border); background:#fff;
  color:var(--ink); font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font) }
.wv-pager button:hover:not(:disabled){ background:var(--surface-2) }
.wv-pager button:disabled{ opacity:.4; cursor:default }

/* button loading state (used by AJAX forms) */
button.loading{ position:relative; color:transparent !important }
button.loading::after{ content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
  border:2.5px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite }
.switch.loading::after,.btn-mini.loading::after{ border-color:rgba(0,0,0,.25); border-top-color:var(--ink) }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ── .pill.info{ background:#eaf1ff; color:#2b59c3 }
.tag.warn{ background:var(--amber-bg); color:#a55a0f }
.user-chip{ display:inline-block; max-width:230px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:bottom; font-size:12.5px; color:var(--green-dark) }
.user-chip:hover{ text-decoration:underline }

.tabs{ display:flex; gap:6px; margin:0 0 18px; border-bottom:1px solid var(--border) }
.tab{ padding:9px 16px; border-radius:10px 10px 0 0; color:var(--ink-mid); font-weight:600;
  border:1px solid transparent; border-bottom:none; margin-bottom:-1px }
.tab:hover{ background:var(--surface-2) }
.tab.on{ background:var(--surface); color:var(--green-dark); border-color:var(--border);
  border-bottom:1px solid var(--surface) }

.sync-card{ margin-bottom:20px }
.sync-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.sync-prov{ border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:var(--surface-2) }
.sync-prov-h{ display:flex; align-items:center; gap:10px; margin-bottom:4px }
.sync-prov-h b{ margin-inline-start:auto; font-size:14px }
.sync-interval{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:16px;
  padding-top:16px; border-top:1px dashed var(--border) }
.sync-interval label{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-mid) }
.push-form{ display:flex; flex-direction:column; gap:8px }
.push-form input{ padding:9px 12px; border:1px solid var(--border); border-radius:9px; font-size:13.5px }
.push-form input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
@media (max-width:720px){ .sync-grid{ grid-template-columns:1fr } }

/* ── user detail: grouped actions ───────────────────────────────────── */
.actions{ margin-top:18px; border-top:1px solid var(--border); padding-top:6px }
.action-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border) }
.action-row:last-child{ border-bottom:none }
.action-row.col{ flex-direction:column; align-items:stretch }
.action-meta{ display:flex; flex-direction:column; gap:2px; flex:1 }
.action-meta b{ font-size:13.5px }
.action-meta span{ font-size:12px; color:var(--ink-mid) }
.action-row .push-form{ flex-direction:row; flex-wrap:wrap; margin-top:2px }
.action-row .push-form input{ flex:1; min-width:120px }
.action-row form{ margin:0 }

/* ── notifications: compose + live feed side by side ────────────────── */
.notif-layout{ display:grid; grid-template-columns:minmax(360px,460px) 1fr; gap:20px; align-items:start }
.notif-layout .send-card{ max-width:none; margin:0 }
.notif-recent{ min-width:0 }
.feed{ display:flex; flex-direction:column; gap:10px; max-height:70vh; overflow:auto; padding-right:2px }
.feed-item{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--surface) }
.feed-top{ display:flex; align-items:baseline; gap:10px }
.feed-top strong{ font-size:13.5px }
.feed-when{ margin-inline-start:auto; color:var(--ink-mid); font-size:11.5px; white-space:nowrap }
.feed-msg{ color:var(--ink-mid); font-size:12.5px; margin:4px 0 6px; line-height:1.5; word-break:break-word }
.feed-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-mid) }
@media (max-width:820px){ .notif-layout{ grid-template-columns:1fr } }

/* ── inline row actions (reviews, support) ──────────────────────────── */
.row-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.btn-mini-del{ background:var(--red-bg); color:var(--red) }
.btn-mini-del:hover{ background:var(--red); color:#fff }

/* ── packages table ─────────────────────────────────────────────────── */
.pkg-tbl th.ar,.pkg-tbl td.ar{ text-align:right }
.pkg-cell{ display:flex; align-items:center; gap:11px }
.pkg-flag{ width:30px; height:22px; border-radius:4px; object-fit:cover; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) }
.pkg-flag.ph{ display:grid; place-items:center; background:var(--surface-2); color:var(--ink-mid);
  font-size:12px; font-weight:700 }
.pkg-meta{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.pkg-name{ font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.pkg-sub{ font-size:11.5px; color:var(--ink-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px }

/* ── packages: sync panel + pager bar ───────────────────────────────── */
.sync-collapse{ margin-bottom:16px }
.sync-collapse .sync-body{ padding:16px 18px }
.pkg-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:.5rem 0 .4rem; flex-wrap:wrap }
.pkg-bar.end{ margin:14px 0 0; justify-content:flex-end }
.pkg-pager{ display:inline-flex; align-items:center; gap:12px; font-size:12.5px }
.pkg-pager .btn-mini{ text-decoration:none }
.btn-mini.disabled{ opacity:.4; pointer-events:none }

/* ── packages: toolbar, sync modal, margin ──────────────────────────── */
.pkg-toolbar{ display:flex; align-items:center; gap:14px; margin:2px 0 16px; flex-wrap:wrap }
.wv-modal-card.wide{ max-width:620px }
.wv-modal-card.xl{ max-width:900px }
.wv-modal-card.wide p{ margin-bottom:18px }
.wv-modal-x{ position:absolute; top:14px; right:16px; border:none; background:none; font-size:26px;
  line-height:1; color:var(--ink-mid); cursor:pointer; padding:0 }
.wv-modal-x:hover{ color:var(--ink) }
.wv-modal-card{ position:relative }
.margin-chip{ display:inline-block; margin-inline-start:6px; font-size:12px; font-weight:700;
  color:var(--green-dark); background:var(--green-pale); padding:1px 6px; border-radius:6px }

/* ── dashboard: mode banner, insights ───────────────────────────────── */
.mode-banner{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:12px;
  margin-bottom:14px; border:1px solid var(--border) }
.quick-links{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px }
.quick-links .ql-cap{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); margin-inline-end:2px }
.quick-links a{ padding:6px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--border);
  font-size:12.5px; font-weight:600; color:var(--ink); transition:background .15s, border-color .15s }
.quick-links a:hover{ background:var(--green-pale); border-color:var(--green); color:var(--green-dark) }
.mode-banner.test{ background:var(--amber-bg); border-color:#f5dcbd }
.mode-banner.live{ background:var(--green-pale); border-color:#c9ecd6 }
.mode-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0 }
.mode-banner.test .mode-dot{ background:var(--amber) }
.mode-banner.live .mode-dot{ background:var(--green); box-shadow:0 0 0 4px rgba(46,204,113,.18) }
.mode-txt{ display:flex; flex-direction:column; gap:1px; flex:1 }
.mode-txt b{ font-size:13.5px } .mode-txt span{ font-size:12px; color:var(--ink-mid) }
.grid.kpi{ margin-top:14px }

.insight-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0 8px }
@media (max-width:820px){ .insight-row{ grid-template-columns:1fr } }
.destrow{ display:flex; align-items:center; gap:10px; margin:9px 0 }
.destname{ width:130px; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0 }
.destbar{ flex:1; height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden }
.destbar>span{ display:block; height:100%; background:var(--green); border-radius:99px }
.destn{ width:28px; text-align:right; font-size:12.5px; color:var(--ink-mid); font-weight:700 }
.split-bar{ display:flex; height:12px; border-radius:99px; overflow:hidden; background:var(--surface-2) }
.split-bar .ea{ background:var(--green) } .split-bar .al{ background:#2b59c3 }
.split-legend{ display:flex; gap:18px; margin-top:10px; font-size:12.5px; color:var(--ink-mid) }
.split-legend .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-end:5px }
.split-legend .dot.ea{ background:var(--green) } .split-legend .dot.al{ background:#2b59c3 }

/* ── packages sync: trigger button + modal (redesign) ───────────────── */
.pkg-toolbar{ justify-content:space-between }
.btn-outline{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--green-dark);
  border:1px solid #cfe6d8; padding:9px 16px; border-radius:11px; font-weight:700; font-size:13.5px; cursor:pointer;
  transition:background .15s, border-color .15s, transform .1s }
.btn-outline:hover{ background:var(--green-pale); border-color:var(--green); transform:translateY(-1px) }
.btn-sm{ padding:8px 16px; font-size:13px }

.sync-modal{ max-width:560px }
.sync-modal h3{ margin-bottom:6px }
.sync-modal>p{ margin-bottom:20px }
.prov-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px }
.prov-card{ display:flex; align-items:center; gap:14px; padding:15px 16px; border:1px solid var(--border);
  border-radius:14px; background:var(--surface-2) }
.prov-left{ display:flex; align-items:center; gap:13px; flex:1; min-width:0 }
.prov-count{ font-size:17px; font-weight:800; line-height:1.1 }
.prov-count span{ font-size:12px; font-weight:600; color:var(--ink-mid) }
.prov-meta{ font-size:11.5px; color:var(--ink-mid); margin-top:2px }
.prov-card form{ margin:0 }

.sched-form{ border-top:1px solid var(--border); padding-top:18px }
.sched-title{ font-size:13px; font-weight:700; margin-bottom:12px }
.sched-fields{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.sched-fields .field{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:150px }
.sched-fields .field span{ font-size:12px; font-weight:600; color:var(--ink-mid) }
.sched-fields .btn{ flex-shrink:0 }

.sched-fields .field .wv-dd{ width:100%; display:block }

/* ── home hero editor ───────────────────────────────────────────────── */
.hero-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch }
@media (max-width:1000px){ .hero-cards{ grid-template-columns:1fr } }
.hero-form{ display:flex; flex-direction:column; gap:12px }
.hero-form .fld{ display:flex; flex-direction:column; gap:5px }
.hero-form .fld span{ font-size:12px; font-weight:600; color:var(--ink-mid) }
.hero-form input{ padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:13.5px; font-family:var(--font) }
.hero-form input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.fld-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px }
.fld-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.switch-row{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; padding:4px 0 6px }
.switch-row input{ flex:0 0 18px; width:18px; height:18px; accent-color:var(--green) }
.hero-form .btn{ align-self:flex-start; margin-top:4px }
@media (max-width:520px){ .fld-2,.fld-3{ grid-template-columns:1fr } }

/* ── home hero: editor + live preview ───────────────────────────────── */
.hero-block{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); padding:20px 22px; margin-bottom:20px }
.hero-block-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px }
.hero-block-head .pill{ margin-inline-start:auto; flex:none }
.hero-h2{ font-size:16px; margin:0 }
.hero-editor{ display:block }

.color-fld .color-row{ display:flex; align-items:center; gap:8px }
.color-fld input[type=color]{ flex:none; width:38px; height:38px; padding:0; border:1px solid var(--border);
  border-radius:9px; background:none; cursor:pointer }
.color-fld input[type=color]::-webkit-color-swatch-wrapper{ padding:3px }
.color-fld input[type=color]::-webkit-color-swatch{ border:none; border-radius:6px }
.color-fld .color-hex{ flex:1; min-width:0; text-transform:uppercase }

/* ── wave1: loyalty give, notif feed head, support reply block ──────── */
.give-card{ margin-bottom:22px }
.give-form{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.give-form .fld{ display:flex; flex-direction:column; gap:5px; min-width:200px }
.give-form .fld.grow{ flex:1; min-width:180px }
.give-form .fld span{ font-size:12px; font-weight:600; color:var(--ink-mid) }
.give-form input{ padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:13.5px; font-family:var(--font) }
.give-form input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.give-form .btn{ flex-shrink:0 }
.feed-head{ display:flex; align-items:center; justify-content:space-between; margin:0 0 12px }
.feed-top .btn-mini-del{ margin-inline-start:8px; padding:2px 8px; line-height:1.2 }
.reply-block{ margin-top:18px; border-top:1px solid var(--border); padding-top:16px }
.reply-note{ font-size:12px; color:var(--ink-mid); margin-bottom:8px }
.reply-block textarea{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border);
  font-family:var(--font); font-size:14px; resize:vertical }
.reply-block textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.reply-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap }

/* ── packages price editing + loss ──────────────────────────────────── */
.pkg-toolbar-btns{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.btn-loss{ background:var(--red-bg); color:var(--red); border:1px solid #f3c9ca; font-weight:700 }
.btn-loss:hover{ background:var(--red); color:#fff }
.sell-cell{ display:flex; align-items:center; justify-content:flex-end; gap:8px }
.sell-cell strong.is-loss{ color:var(--red) }
.loss-tag{ display:inline-block; font-size:12px; font-weight:800; color:#fff; background:var(--red);
  padding:1px 6px; border-radius:6px; margin-inline-start:4px; text-transform:uppercase; letter-spacing:.03em }
.lock-chip{ display:inline-block; font-size:12px; font-weight:700; color:var(--ink-mid);
  background:var(--surface-2); border:1px solid var(--border); padding:1px 6px; border-radius:6px; margin-inline-start:4px }
.price-edit{ border:1px solid var(--border); background:#fff; color:var(--ink-mid); cursor:pointer;
  width:26px; height:26px; border-radius:8px; flex-shrink:0; font-size:13px; line-height:1 }
.price-edit:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-pale) }
.pm-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0 }
.pm-row span{ color:var(--ink-mid) }
.loss-list{ max-height:60vh; overflow:auto }
.loss-list .tbl{ box-shadow:none }

.type-group{ margin:2px 0 }
.hero-form select{ padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:13.5px; font-family:var(--font) }

/* ── price edit modal ───────────────────────────────────────────────── */
.price-form{ display:flex; flex-direction:column; gap:16px }
.pm-summary{ background:var(--surface-2); border-radius:12px; padding:12px 15px; display:flex; flex-direction:column; gap:9px }
.pm-line{ display:flex; justify-content:space-between; align-items:center; font-size:13.5px }
.pm-line span{ color:var(--ink-mid) }
.pm-line b{ font-weight:800; font-size:15px }
.pf-field{ display:flex; flex-direction:column; gap:6px }
.pf-field span{ font-size:12px; font-weight:600; color:var(--ink-mid) }
.pf-field input{ padding:12px 14px; border:1px solid var(--border); border-radius:11px; font-size:17px; font-weight:800; font-family:var(--font) }
.pf-field input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.pf-lock{ display:flex; align-items:flex-start; gap:11px; font-size:13px; line-height:1.4; color:var(--ink); cursor:pointer }
.pf-lock input{ width:18px; height:18px; margin-top:1px; accent-color:var(--green); flex-shrink:0 }
.price-form>.btn{ align-self:flex-start; margin-top:2px }

/* ── packages loss filter toggle ────────────────────────────────────── */
.loss-toggle{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  color:var(--ink-mid); padding:0 10px; cursor:pointer; white-space:nowrap }
.loss-toggle input{ width:16px; height:16px; accent-color:var(--red) }
.loss-toggle:hover{ color:var(--red) }

/* ── user detail: send-notification form (restyle) ──────────────────── */
.action-row.col .push-form{ display:flex; flex-direction:column; gap:12px; width:100%; margin-top:4px }
.action-row.col .push-form .pf-field{ display:flex; flex-direction:column; gap:6px }
.action-row.col .push-form .pf-field span{ font-size:12px; font-weight:600; color:var(--ink-mid) }
.action-row.col .push-form input,
.action-row.col .push-form textarea{ width:100%; padding:11px 13px; border:1px solid var(--border);
  border-radius:11px; font-size:13.5px; font-family:var(--font); background:#fff; resize:vertical }
.action-row.col .push-form input:focus,
.action-row.col .push-form textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.action-row.col .push-form .btn{ align-self:flex-start }

/* ── delete-with-reason modal ───────────────────────────────────────── */
.reason-label{ display:block; text-align:left; font-size:12px; font-weight:700; color:var(--ink-mid); margin-bottom:6px }
.reason-label span{ font-weight:500; color:var(--ink-muted) }
.reason-input{ width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:11px;
  font-family:var(--font); font-size:14px; resize:vertical; margin-bottom:6px }
.reason-input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.reason-err{ display:none; color:var(--red); font-size:12px; margin:0 0 6px }
.reason-err.show{ display:block }

/* ── live table filter ──────────────────────────────────────────────── */
.table-tools{ display:flex; align-items:center; gap:12px; margin:0 0 12px }
.table-filter{ flex:1; max-width:440px; padding:10px 14px; border:1px solid var(--border);
  border-radius:11px; font-size:13.5px; font-family:var(--font); background:#fff;
  transition:border-color .15s, box-shadow .15s }
.table-filter:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.table-count{ font-size:12.5px; color:var(--ink-muted); white-space:nowrap }

/* ── rich audit log ─────────────────────────────────────────────────── */
.audit-stats{ margin-bottom:16px }
.audit-list{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-sm) }
.audit-row{ border-bottom:1px solid var(--border-2) }
.audit-row:last-child{ border-bottom:none }
.audit-row>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:11px 16px }
.audit-row>summary::-webkit-details-marker{ display:none }
.audit-row>summary:hover{ background:var(--surface-2) }
.au-avatar{ width:31px; height:31px; border-radius:50%; color:#fff; display:grid; place-items:center;
  font-weight:800; font-size:13px; flex-shrink:0 }
.au-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.au-line{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13px }
.au-badge{ text-transform:none; font-weight:700 }
.au-target{ font-weight:600; color:var(--ink) }
.au-sub{ font-size:11.5px; color:var(--ink-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.au-area{ font-weight:600 }
.au-time{ font-size:12px; color:var(--ink-muted); white-space:nowrap }
.au-chev{ color:var(--ink-muted); font-size:11px; transition:transform .2s; flex-shrink:0 }
.audit-row[open] .au-chev{ transform:rotate(180deg) }
.au-body{ padding:0 16px 16px 59px }
.wc-title{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); margin:6px 0 8px }
.diff{ width:100%; border-collapse:separate; border-spacing:8px 6px; font-size:12.5px; margin-left:-8px }
.diff th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:700; padding:0 8px }
.diff td{ padding:7px 10px; vertical-align:top; border-radius:9px; word-break:break-word; background:var(--surface-2); color:var(--ink) }
.diff td.before{ background:var(--red-bg); color:#b02a2f }
.diff td.after{ background:var(--green-pale); color:var(--green-dark) }
.diff.snapshot td:first-child{ background:none; color:var(--ink-mid); font-weight:700; width:150px }
.au-reason{ margin-top:12px; font-size:13px }
.au-reason i{ color:var(--ink) }
.au-kv{ font-size:13px; color:var(--ink); line-height:1.5 }
.audit-foot{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:12px; padding-top:10px;
  border-top:1px dashed var(--border); font-size:12px; color:var(--ink-mid) }
.audit-foot b{ color:var(--ink-muted); font-weight:700; margin-inline-end:5px; text-transform:uppercase; font-size:12px; letter-spacing:.04em }
@media (max-width:640px){ .au-body{ padding-left:20px } .au-time{ display:none } }

.hero-form input:not([type=checkbox]),.hero-form select{ width:100%; min-width:0 }

/* ── announcement image upload + app preview ────────────────────────── */
.img-req{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  font-size:12.5px; color:var(--ink-mid); line-height:1.55 }
.img-req b{ color:var(--ink) }
.img-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin:12px 0 6px; align-items:start }
.img-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:130px;
  border:1.5px dashed var(--border); border-radius:14px; cursor:pointer; color:var(--ink-mid); text-align:center; padding:14px; background:#fff }
.img-drop:hover{ border-color:var(--green); background:var(--green-pale); color:var(--green-dark) }
.img-drop input{ display:none }
.img-drop-ico{ font-size:26px; line-height:1 }
.img-drop-hint{ font-size:12.5px; word-break:break-word }
.img-preview{ display:flex; flex-direction:column; gap:6px }
.ip-card{ position:relative; width:100%; aspect-ratio:2.3/1; border-radius:16px; overflow:hidden;
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border) }
.ip-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.ip-card img:not([src]){ display:none }
.ip-fade{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.05) 55%, transparent) }
.ip-title{ position:absolute; left:12px; right:12px; bottom:10px; color:#fff; font-weight:800; font-size:14px;
  text-shadow:0 1px 5px rgba(0,0,0,.55); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ip-caption{ font-size:11px; color:var(--ink-muted); text-align:center }
.img-warn{ font-size:11.5px; color:var(--amber); line-height:1.45 }
.img-warn .ok{ color:var(--green-dark) }
@media (max-width:560px){ .img-row{ grid-template-columns:1fr } }

/* ── team / RBAC ────────────────────────────────────────────────────── */
.team-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px }
.team-card{ display:flex; flex-direction:column }
.team-form{ margin-top:14px }
.team-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border) }
.team-actions .pill{ margin-inline-end:auto }
.role-legend{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:11px 15px; font-size:12.5px; line-height:1.6; margin-bottom:16px }
.del-switch{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--border) }
.team-perms-ro{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.team-perms-ro .pill{ font-size:12px }
.perm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin:12px 0 14px }
.perm-item{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-mid); cursor:pointer }
.perm-item input{ width:16px; height:16px; accent-color:var(--green); flex:0 0 16px }
.perm-item input:disabled{ opacity:.4 }
@media (max-width:480px){ .perm-grid{ grid-template-columns:1fr } }

/* ── finance/reports print + shared ─────────────────────────────────── */
.tbl td.ar,.tbl th.ar{ text-align:right }
.print-head{ display:none; font-size:17px; font-weight:800; margin-bottom:14px }
@media print{
  .sidebar,.page-head,.filters,.table-tools,.wv-modal,.wv-toasts,.wv-progress,.pkg-toolbar,.pkg-pager,button,.btn,.side-out{ display:none !important }
  .shell{ display:block } .content{ padding:0; max-width:none; width:100% }
  body{ background:#fff }
  .print-head{ display:block !important }
  .card,.tbl,.stat{ box-shadow:none !important; break-inside:avoid }
}

.pill.gold{ background:#FBF3D9; color:#9A7B12 }

/* ── two-factor auth ────────────────────────────────────────────────── */
.twofa-wrap{ max-width:540px }
.twofa-steps{ margin:14px 0 4px; padding-inline-start:18px; display:flex; flex-direction:column; gap:12px; font-size:13.5px; line-height:1.55 }
.twofa-secret{ margin-top:8px; background:var(--surface-2); border:1px dashed var(--border); border-radius:10px;
  padding:12px 14px; font-size:18px; letter-spacing:1px; font-weight:800; word-break:break-all }
.side-2fa{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:11px; color:var(--ink-mid);
  font-weight:600; font-size:12.5px; margin-bottom:6px; transition:background .14s, color .14s }
.side-2fa:hover{ background:var(--surface-2); color:var(--ink) }
.side-2fa .ic{ width:16px; height:16px }

/* ── two-factor redesign ────────────────────────────────────────────── */
.twofa-grid{ display:grid; grid-template-columns:200px 1fr; gap:24px; margin-top:16px; align-items:start }
.twofa-qr{ display:flex; flex-direction:column; gap:8px }
.qr-box{ width:200px; height:200px; background:#fff; border:1px solid var(--border); border-radius:14px;
  display:grid; place-items:center; padding:10px; box-shadow:var(--shadow-sm) }
.qr-box svg{ width:100%; height:100%; display:block }
.twofa-manual{ display:flex; flex-direction:column; gap:12px }
.tw-step{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink); line-height:1.5 }
.tw-n{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--green-pale); color:var(--green-dark);
  font-weight:800; font-size:12px; display:grid; place-items:center; margin-top:1px }
.twofa-secret{ background:var(--surface-2); border:1px dashed var(--border); border-radius:10px; padding:12px 14px;
  font-family:ui-monospace,Menlo,monospace; font-size:16px; font-weight:700; letter-spacing:1px; word-break:break-all }
.code-input{ padding:11px 14px; border:1px solid var(--border); border-radius:11px; font-size:18px; font-weight:700;
  letter-spacing:5px; text-align:center; width:150px; font-family:var(--font) }
.code-input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale) }
.verify-form,.disable-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.twofa-on{ display:flex; gap:18px; align-items:flex-start }
.twofa-shield{ font-size:34px; flex-shrink:0; line-height:1 }
@media (max-width:560px){ .twofa-grid{ grid-template-columns:1fr } .qr-box{ margin:0 auto } }

/* ── finance statement table ────────────────────────────────────────── */
.fin-tbl td{ padding:9px 14px }
.fin-tbl .ar{ font-variant-numeric:tabular-nums }
.fin-sub td{ background:var(--surface-2) }
.fin-total td{ border-top:2px solid var(--border); background:var(--green-tint) }

/* ── finance dashboard ──────────────────────────────────────────────── */
.fin-kpis{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:12px; margin-bottom:18px }
@media(max-width:900px){ .fin-kpis{ grid-template-columns:1fr 1fr } }
.fin-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px 17px; box-shadow:var(--shadow-sm) }
.fin-kpi.big{ background:linear-gradient(135deg,var(--green-pale),#fff); border-color:#cdeed9 }
.k-l{ font-size:11.5px; color:var(--ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em }
.k-n{ font-size:23px; font-weight:800; letter-spacing:-.02em; margin-top:6px; line-height:1.05 }
.k-n span{ font-size:12px; font-weight:700; color:var(--ink-muted) }
.k-sar{ font-size:12.5px; color:var(--ink-mid); margin-top:3px }
.fin-kpi .delta{ margin-top:9px }
.delta{ font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:7px; display:inline-block }
.delta.up{ background:var(--green-pale); color:var(--green-dark) }
.delta.down{ background:var(--red-bg); color:var(--red) }
.delta.flat{ background:var(--surface-2); color:var(--ink-mid) }
.fin-head td{ background:var(--surface-2); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); padding:8px 14px !important }
.fin-tbl .neg{ color:var(--red) }
.destn.mono{ width:auto; min-width:60px; text-align:right }

/* ── finance currency picker ────────────────────────────────────────── */
.fin-cur{ display:inline-flex; align-items:center; gap:8px }
.fin-cur-cap{ font-size:12.5px; color:var(--ink-muted); font-weight:600 }
.fin-cur .wv-dd{ min-width:170px }
.cur-choices{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.cur-choice{ display:flex; flex-direction:column; gap:3px; padding:16px; border:1.5px solid var(--border);
  border-radius:14px; text-align:center; color:var(--ink); transition:border-color .15s, background .15s }
.cur-choice:hover{ border-color:var(--green); background:var(--green-pale) }
.cur-choice.on{ border-color:var(--green); background:var(--green-pale) }
.cur-choice b{ font-size:20px; color:var(--green-dark) }
.cur-choice span{ font-size:11.5px; color:var(--ink-mid) }

/* ── finance: net-profit line, profit KPI, pass-through card ─────────── */
.fin-kpi.profit{ background:linear-gradient(135deg,var(--green-pale),#fff); border-color:#bfe8cf }
.fin-kpi.profit .k-n{ color:var(--green-dark) }
.fin-net td{ border-top:2px solid var(--green); background:var(--green-tint) }
.fin-net td strong{ color:var(--green-dark); font-size:15px }
.fin-net .mono strong{ font-size:16px }
.passthru-card{ margin:16px 0 18px; border-style:dashed }
.passthru-card .card-title{ margin-bottom:10px }
.passthru-card .fin-total td{ background:var(--surface-2); border-top:1.5px solid var(--border) }

/* ── inline info tooltip (the little “i”) ───────────────────────────── */
.ii{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border); color:var(--ink-muted); font-size:12px; font-weight:800;
  font-style:normal; font-family:Georgia,'Times New Roman',serif; cursor:help; position:relative; vertical-align:middle;
  margin-inline-start:2px; line-height:1; user-select:none }
.ii:hover, .ii:focus{ background:var(--green); border-color:var(--green); color:#fff; outline:none }
.ii::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:-12px; transform:none;
  background:#0f172a; color:#fff; padding:9px 12px; border-radius:9px; font-size:12px; font-weight:500; line-height:1.7;
  width:250px; direction:rtl; text-align:right; white-space:normal; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .12s; z-index:70; box-shadow:0 10px 30px rgba(0,0,0,.22) }
.ii::before{ content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%) rotate(45deg);
  width:9px; height:9px; background:#0f172a; opacity:0; visibility:hidden; transition:opacity .12s; z-index:70 }
.ii:hover::after, .ii:focus::after, .ii:hover::before, .ii:focus::before{ opacity:1; visibility:visible }

/* ── App Splash page (splash.php) ─────────────────────────────────────── */
.sp-wrap{ max-width:1000px; }
.sp-lead{ color:var(--ink-mid); font-size:13.5px; line-height:1.7; background:var(--green-pale);
  border:1px solid #c9ecd6; border-radius:12px; padding:12px 15px; margin-bottom:18px; }
.sp-lead b{ color:var(--green-dark); }
.sp-active{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.sp-preview{ position:relative; width:120px; height:214px; border-radius:16px; overflow:hidden; background:#0F1A12;
  border:1px solid var(--border); flex:0 0 auto; display:grid; place-items:center; box-shadow:0 8px 26px rgba(15,26,18,.16); }
.sp-preview::after{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:34px; height:4px; border-radius:99px; background:rgba(255,255,255,.55); z-index:2; }
.sp-preview video,.sp-preview img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sp-preview.coded{ background:radial-gradient(circle at 50% 40%, #EAF8EF, #F6FAF7); }
.sp-preview.coded img{ position:static; width:52px; height:52px; object-fit:contain; }
.sp-active-meta{ flex:1; min-width:220px; }
.sp-active-meta h3{ font-size:16px; margin:0 0 4px; }
.sp-active-meta .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.sp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin-top:8px; }
.sp-card{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.sp-card .thumb{ height:200px; background:#0F1A12; position:relative; overflow:hidden; }
.sp-card .thumb video,.sp-card .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sp-card .badge-active{ position:absolute; top:8px; inset-inline-start:8px; background:var(--green); color:#063a20;
  font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; }
.sp-card .type-chip{ position:absolute; top:8px; inset-inline-end:8px; background:rgba(0,0,0,.55); color:#fff;
  font-size:12px; font-weight:700; padding:3px 8px; border-radius:999px; text-transform:uppercase; }
.sp-card .meta{ padding:11px 13px; }
.sp-card .meta b{ font-size:13px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-card .meta small{ color:var(--ink-muted); font-size:11px; }
.sp-card .acts{ display:flex; gap:8px; padding:0 13px 13px; }
.sp-up{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px; margin:18px 0; box-shadow:var(--shadow-sm); }
.sp-up .fld{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.sp-up input[type=text]{ padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-family:var(--font); min-width:180px; }
.sp-up input[type=file]{ font-size:13px; }
.sp-hint{ color:var(--ink-muted); font-size:12.5px; margin-top:8px; }

/* ── Home hero ad cards (hero.php) ────────────────────────────────────── */
.hc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; margin-top:6px; }
.hc-card{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.hc-thumb{ position:relative; height:150px; background:#0B1B12; overflow:hidden; }
.hc-thumb video,.hc-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hc-scrim{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.5)); }
.hc-tx{ position:absolute; inset-inline:12px; bottom:10px; color:#fff; }
.hc-tx b{ display:block; font-size:13px; font-weight:800; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.hc-tx small{ font-size:11px; opacity:.9; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.hc-badges{ position:absolute; top:8px; inset-inline-start:8px; display:flex; gap:6px; }
.hc-badges span{ font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.hc-b-on{ background:var(--green); color:#063a20; } .hc-b-off{ background:rgba(0,0,0,.55); color:#fff; }
.hc-b-type{ background:rgba(0,0,0,.55); color:#fff; }
.hc-meta{ padding:11px 13px; } .hc-meta .lk{ color:var(--ink-muted); font-size:11.5px; margin-top:2px; word-break:break-all; }
.hc-acts{ display:flex; gap:6px; padding:0 12px 12px; flex-wrap:nowrap; align-items:center; }
.hc-acts form{ margin:0; }
.hc-acts .btn-mini{ padding:6px 10px; font-size:11.5px; white-space:nowrap; }
/* App Popups: portrait tiles (phone-shaped), media fills the whole tile. */
.pc-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,220px)); justify-content:start; }
.pc-thumb{ position:relative; width:100%; aspect-ratio:3/4; background:#0B1B12; overflow:hidden; }
.pc-thumb img,.pc-thumb video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hc-edit{ margin:0 13px 13px; }
.hc-edit summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--green-dark); list-style:none; }
.hc-edit summary::-webkit-details-marker{ display:none; }
.hc-edit[open]{ border-top:1px solid var(--border-2); padding-top:12px; }

/* ── Dashboard upload modal (data-upload: preview + progress) ─────────── */
.wv-up{ position:fixed; inset:0; z-index:10050; display:grid; place-items:center;
  background:rgba(15,26,18,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s; }
.wv-up.in{ opacity:1; pointer-events:all; }
.wv-up-card{ background:#fff; border-radius:18px; padding:22px 22px 20px; width:calc(100% - 40px); max-width:420px;
  box-shadow:0 24px 70px rgba(15,26,18,.25); transform:scale(.95); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.wv-up.in .wv-up-card{ transform:scale(1); }
.wv-up-card h3{ font-size:16px; font-weight:800; margin-bottom:14px; }
.wv-up-prev{ border-radius:12px; overflow:hidden; background:#0F1A12; margin-bottom:14px; max-height:260px; display:grid; place-items:center; }
.wv-up-prev video,.wv-up-prev img{ width:100%; max-height:260px; object-fit:contain; display:block; }
.wv-up-bar{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.wv-up-bar span{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--green-dark)); transition:width .15s ease; }
.wv-up-status{ display:flex; justify-content:space-between; align-items:center; margin-top:9px; font-size:12.5px; color:var(--ink-mid); }
.wv-up-status .pct{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.wv-up-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }



/* Partner language switch (English / العربية) — topbar pill + floating pill on
   the public partner pages (login, signup, set-password, payment result). */
.lang-switch{margin:0;display:inline-flex}
.lang-switch button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid #dce9df;border-radius:11px;background:#fff;color:#2f5a3d;font:700 12px 'IBM Plex Sans Arabic',var(--font,system-ui),sans-serif;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.lang-switch button:hover{background:#f2f8f3;border-color:#c3ddc9;color:#0f6b3f}
.lang-switch svg{flex:none}
.lang-switch-float{position:fixed;top:14px;inset-inline-end:14px;z-index:60}
.lang-switch-float button{height:auto;padding:7px 13px;border-radius:999px;box-shadow:0 6px 18px rgba(20,63,38,.08)}
@media(max-width:480px){.topbar-lang button span{display:none}.topbar-lang button{padding:0 10px}}
/* Customer cell: name, then email and phone stacked. */
.user-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;white-space:normal;max-width:260px;vertical-align:middle;line-height:1.35}
.user-chip b{font-weight:700;font-size:12.5px;color:#21462f}
.user-chip small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:#6f8578}
.user-chip b+small,.user-chip small+small{margin-top:1px}
.user-chip bdi{unicode-bidi:isolate}