/* ==========================================================================
   iMonetary — Surface Layer
   Additive stylesheet. Everything is namespaced `im-` and scoped to elements
   this layer creates, so nothing here can reach into style.css.
   ========================================================================== */

:root {
  /* Ink & field */
  --im-ink:          #04060C;
  --im-navy-900:     #071231;
  --im-navy-800:     #0A1A40;
  --im-navy-700:     #0E2455;
  --im-royal:        #1B3C8C;
  --im-royal-lift:   #2A54B8;

  /* Metal */
  --im-gold:         #C9A54E;
  --im-gold-bright:  #E8CE8A;
  --im-gold-deep:    #8A6E2A;

  /* Type */
  --im-parchment:    #EDE7DA;
  --im-mute:         #9AA4BE;
  --im-dim:          #6A7492;

  /* Glass */
  --im-glass:        rgba(255, 255, 255, .055);
  --im-glass-2:      rgba(255, 255, 255, .085);
  --im-hairline:     rgba(201, 165, 78, .22);
  --im-hairline-2:   rgba(255, 255, 255, .10);

  /* State */
  --im-danger:       #C2453D;
  --im-warn:         #D89A32;
  --im-ok:           #3E8E6B;

  /* System */
  --im-r-sm: 8px;
  --im-r:    14px;
  --im-r-lg: 22px;
  --im-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  --im-ease: cubic-bezier(.22, 1, .36, 1);

  --im-display: "Cormorant Garamond", "Vazirmatn", Georgia, "Times New Roman", serif;
  --im-body: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --im-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --im-lock-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M7.5 10V7.5a4.5 4.5 0 0 1 9 0V10' fill='none' stroke='black' stroke-width='2'/>\
<rect x='4.4' y='10' width='15.2' height='10.4' rx='2.6' fill='none' stroke='black' stroke-width='2'/></svg>");

  --im-z-gate: 2147483000;
  --im-z-flow: 2147482900;
  --im-z-toast: 2147483100;
}

/* Ambient field used behind every glass surface. Generated, not an asset —
   a low-frequency fractal grain that keeps large blurred panes from banding. */
:root {
  --im-grain: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='.34'/></svg>");
}

.im-layer,
.im-layer * { box-sizing: border-box; }

.im-layer {
  font-family: var(--im-body);
  -webkit-font-smoothing: antialiased;
  color: var(--im-parchment);
}

/* ── Shared bits ────────────────────────────────────────────────────────── */

.im-eyebrow {
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--im-gold);
  font-weight: 500;
}

.im-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--im-hairline) 18%, var(--im-hairline) 82%, transparent);
  margin: 0;
}

.im-btn {
  appearance: none;
  border: 1px solid var(--im-hairline);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  color: var(--im-parchment);
  font: 500 14px/1 var(--im-body);
  padding: 14px 22px;
  border-radius: var(--im-r-sm);
  cursor: pointer;
  transition: transform .22s var(--im-ease), border-color .22s, background .22s;
}
.im-btn:hover { border-color: rgba(201,165,78,.5); transform: translateY(-1px); }
.im-btn:active { transform: translateY(0); }
.im-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.im-btn:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 3px; }

.im-btn--gold {
  background: linear-gradient(180deg, var(--im-gold-bright), var(--im-gold));
  border-color: var(--im-gold);
  color: #191204;
  font-weight: 700;
  letter-spacing: .02em;
}
.im-btn--gold:hover { filter: brightness(1.06); }

.im-btn--ghost { background: transparent; color: var(--im-mute); }
.im-btn--ghost:hover { color: var(--im-parchment); }

.im-field { display: block; margin: 0 0 18px; }
.im-field > span {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--im-mute);
  margin-bottom: 8px;
}
.im-input {
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--im-hairline-2);
  border-radius: var(--im-r-sm);
  color: var(--im-parchment);
  font: 400 15px/1.4 var(--im-body);
  padding: 14px 15px;
  transition: border-color .2s;
}
.im-input:focus { outline: none; border-color: var(--im-gold); }
.im-input::placeholder { color: var(--im-dim); }

.im-note { font-size: 13px; line-height: 1.65; color: var(--im-mute); }
.im-err {
  font-size: 13px;
  color: #E9877F;
  margin: -6px 0 14px;
  min-height: 1em;
}

/* ── 1. Language gate ───────────────────────────────────────────────────── */

.im-gate {
  position: fixed;
  inset: 0;
  z-index: var(--im-z-gate);
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(27,60,140,.34), transparent 62%),
    rgba(4, 6, 12, .82);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  animation: im-fade .5s var(--im-ease) both;
  overflow-y: auto;
}

.im-gate__card {
  position: relative;
  width: min(640px, 100%);
  padding: 46px 42px 34px;
  border-radius: var(--im-r-lg);
  border: 1px solid var(--im-hairline);
  background:
    var(--im-grain),
    linear-gradient(165deg, rgba(14,36,85,.92), rgba(7,18,49,.96));
  background-blend-mode: overlay, normal;
  box-shadow: var(--im-shadow), inset 0 1px 0 rgba(255,255,255,.10);
  text-align: center;
  animation: im-rise .6s var(--im-ease) both .08s;
}

.im-gate__mark {
  width: 46px; height: 46px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--im-hairline);
  color: var(--im-gold);
  font: 700 15px/1 var(--im-display);
  letter-spacing: .04em;
}

.im-gate__title {
  font: 400 clamp(28px, 4.2vw, 40px)/1.12 var(--im-display);
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.im-gate__sub { margin: 0 auto 30px; max-width: 42ch; }

.im-gate__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}
@media (max-width: 520px) { .im-gate__grid { grid-template-columns: 1fr; } }

.im-lang-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--im-r);
  border: 1px solid var(--im-hairline-2);
  background: var(--im-glass);
  color: inherit;
  cursor: pointer;
  text-align: start;
  font: inherit;
  transition: border-color .25s, background .25s, transform .25s var(--im-ease);
}
.im-lang-opt:hover:not([aria-disabled="true"]) {
  border-color: rgba(201,165,78,.55);
  background: var(--im-glass-2);
  transform: translateY(-2px);
}
.im-lang-opt:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 3px; }
.im-lang-opt[aria-pressed="true"] { border-color: var(--im-gold); background: rgba(201,165,78,.10); }
.im-lang-opt[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }

.im-flag {
  flex: 0 0 auto;
  width: 34px; height: 23px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 3px 10px rgba(0,0,0,.4);
}
.im-flag svg { display: block; width: 100%; height: 100%; }

.im-lang-opt__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.im-lang-opt__native { font-size: 16px; font-weight: 500; }
.im-lang-opt__en { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--im-dim); }

.im-soon {
  margin-inline-start: auto;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--im-gold);
  border: 1px solid var(--im-hairline);
  border-radius: 999px;
  padding: 5px 9px;
  white-space: nowrap;
}

.im-gate__foot { margin-top: 22px; font-size: 12px; color: var(--im-dim); }

/* ── 2. Language ───────────────────────────────────────────────────────── */
/* The surface layer renders no switcher of its own — the site already had one
   in the marketing footer, and a second control there would be duplication.
   See surface-lang.js. portal.html's own .lang-switch (login/OTP screens and
   every dashboard panel) is left alone per spec 1.3 — it used to be force-
   hidden here and by the block near "Review fixes" below; both are gone now,
   for the same reason at once. */

/* The shell's status pill, removed on request. */
#demo-pill { display: none !important; }

/* ── 3. Account flow (forced password change → 2FA) ─────────────────────── */

.im-flow {
  position: fixed;
  inset: 0;
  z-index: var(--im-z-flow);
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4,6,12,.86);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  overflow-y: auto;
  animation: im-fade .45s var(--im-ease) both;
}

.im-flow__card {
  width: min(560px, 100%);
  padding: 40px 38px 34px;
  border-radius: var(--im-r-lg);
  border: 1px solid var(--im-hairline);
  background:
    var(--im-grain),
    linear-gradient(165deg, rgba(14,36,85,.94), rgba(7,18,49,.97));
  background-blend-mode: overlay, normal;
  box-shadow: var(--im-shadow), inset 0 1px 0 rgba(255,255,255,.10);
  animation: im-rise .55s var(--im-ease) both .06s;
}

.im-flow__steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
}
.im-flow__step {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.10);
  border-radius: 2px;
  overflow: hidden;
}
.im-flow__step.is-done { background: var(--im-gold); }
.im-flow__step.is-now { background: linear-gradient(90deg, var(--im-gold), rgba(201,165,78,.15)); }

.im-flow__title {
  font: 400 clamp(24px, 3.4vw, 31px)/1.18 var(--im-display);
  margin: 10px 0 10px;
}
.im-flow__sub { margin: 0 0 26px; }

.im-strength { margin: -8px 0 18px; }
.im-strength__track {
  display: flex; gap: 5px; margin-bottom: 8px;
}
.im-strength__seg {
  flex: 1; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.10);
  transition: background .3s;
}
.im-strength__label { font-size: 12px; color: var(--im-mute); }
.im-strength[data-level="1"] .im-strength__seg:nth-child(-n+1) { background: var(--im-danger); }
.im-strength[data-level="2"] .im-strength__seg:nth-child(-n+2) { background: var(--im-warn); }
.im-strength[data-level="3"] .im-strength__seg:nth-child(-n+3) { background: #B7A44A; }
.im-strength[data-level="4"] .im-strength__seg { background: var(--im-ok); }

.im-checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 7px; }
.im-checks li {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--im-dim);
  transition: color .25s;
}
.im-checks li::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.im-checks li.is-met { color: var(--im-ok); }

.im-flow__actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.im-flow__actions .im-btn--gold { flex: 1; }

/* 2FA setup */
.im-qr-wrap {
  display: flex; gap: 22px; align-items: center;
  padding: 20px; margin-bottom: 20px;
  border-radius: var(--im-r);
  border: 1px solid var(--im-hairline-2);
  background: rgba(0,0,0,.28);
}
@media (max-width: 520px) { .im-qr-wrap { flex-direction: column; text-align: center; } }
.im-qr {
  flex: 0 0 auto;
  width: 148px; height: 148px;
  padding: 10px;
  border-radius: var(--im-r-sm);
  background: #fff;
  display: grid; place-items: center;
}
.im-qr img, .im-qr canvas { display: block; width: 100% !important; height: 100% !important; }
.im-key {
  font: 500 13px/1.6 var(--im-mono);
  letter-spacing: .14em;
  color: var(--im-gold-bright);
  word-break: break-all;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--im-hairline-2);
  border-radius: var(--im-r-sm);
  padding: 10px 12px;
  margin-top: 10px;
  cursor: copy;
}

.im-code-input {
  font: 600 26px/1 var(--im-mono);
  letter-spacing: .5em;
  text-align: center;
  padding: 18px 15px 18px 20px;
}

.im-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 18px;
  padding: 18px;
  border-radius: var(--im-r);
  border: 1px solid var(--im-hairline);
  background: rgba(0,0,0,.3);
  list-style: none;
}
.im-codes li {
  font: 500 14px/1.5 var(--im-mono);
  letter-spacing: .12em;
  color: var(--im-gold-bright);
  text-align: center;
}

.im-warnbox {
  display: flex; gap: 12px;
  padding: 14px 16px; margin-bottom: 20px;
  border-radius: var(--im-r-sm);
  border: 1px solid rgba(216,154,50,.35);
  background: rgba(216,154,50,.08);
  font-size: 13px; line-height: 1.6;
  color: #E8C88C;
}

/* ── 4. Panel locking ───────────────────────────────────────────────────── */

.im-locked {
  position: relative !important;
  isolation: isolate;
  /* The shell's .panel carries no radius of its own, which is why the seal
     read as a hard-cornered rectangle. Round the locked element and clip its
     content to the same shape so the glass sits on a soft edge. */
  border-radius: 22px;
  overflow: hidden;
}
.im-locked > *:not(.im-seal) {
  filter: blur(4px) saturate(.4) brightness(.66);
  pointer-events: none;
  user-select: none;
  transition: filter .45s var(--im-ease);
}

.im-seal {
  position: absolute;
  /* Inset and rounded, so it reads as a pane of glass laid over the panel
     rather than a rectangle clipped to its corners. border-radius:inherit gave
     square corners here, because .panel carries no radius of its own. */
  inset: 10px;
  z-index: 40;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 18px;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  background:
    var(--im-grain),
    linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 46%, rgba(7,18,49,.34));
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(15px) saturate(135%);
  -webkit-backdrop-filter: blur(15px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 0 60px rgba(255,255,255,.05),
    0 10px 40px rgba(0,0,0,.34);
  font-family: var(--im-body);
  transition: backdrop-filter .4s var(--im-ease);
}

/* Feather the rim so the pane fades into the panel instead of ending on a line. */
.im-seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,255,255,.02) 45%, rgba(201,165,78,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Specular sweep — tracks the pointer across the pane. */
.im-seal::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    38% 38% at var(--im-mx, 50%) var(--im-my, 0%),
    rgba(255,255,255,.20), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--im-ease);
  pointer-events: none;
}
.im-locked:hover .im-seal::after,
.im-locked:focus-within .im-seal::after { opacity: 1; }

.im-seal__body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  justify-items: center;
  transform: translateY(6px);
  opacity: 0;
  transition: opacity .42s var(--im-ease), transform .42s var(--im-ease);
}
.im-locked:hover .im-seal__body,
.im-locked:focus-within .im-seal__body,
.im-locked.is-revealed .im-seal__body { opacity: 1; transform: translateY(0); }

.im-seal__lock {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--im-hairline);
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(0,0,0,.4);
}
.im-seal__lock svg { width: 24px; height: 24px; display: block; }

.im-seal__name {
  font: 400 17px/1.2 var(--im-display);
  letter-spacing: .02em;
  color: var(--im-parchment);
}
.im-seal__msg { font-size: 12px; line-height: 1.5; color: var(--im-mute); max-width: 26ch; }
.im-seal__tag {
  font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--im-gold);
}

/* Idle state: a single quiet lock, no copy, until the pointer arrives. */
.im-seal__idle {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--im-hairline);
  background: rgba(255,255,255,.08);
  transition: opacity .35s var(--im-ease);
}
.im-seal__idle svg { width: 12px; height: 12px; }
.im-locked:hover .im-seal__idle,
.im-locked:focus-within .im-seal__idle,
.im-locked.is-revealed .im-seal__idle { opacity: 0; }

/* Touch devices have no hover — show the full seal at rest. */
@media (hover: none) {
  .im-seal__body { opacity: 1; transform: none; }
  .im-seal__idle { opacity: 0; }
}

/* Locked navigation entries */
.im-nav-locked {
  opacity: .55;
  cursor: pointer;      /* clicking opens the panel, which is sealed */
  position: relative;
}
.im-nav-locked:hover { opacity: .8; }
.im-nav-locked::after {
  content: "";
  display: inline-block;
  width: 11px; height: 11px;
  margin-inline-start: 7px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: var(--im-lock-mask) center/contain no-repeat;
  mask: var(--im-lock-mask) center/contain no-repeat;
}

/* ── New modules: Sales Analysis & Petty Cash ───────────────────────────── */

.im-panel {
  position: relative;
  padding: 24px 26px 26px;
  border-radius: var(--im-r);
  border: 1px solid var(--im-hairline);
  background:
    var(--im-grain),
    linear-gradient(160deg, rgba(14,36,85,.55), rgba(7,18,49,.72));
  background-blend-mode: overlay, normal;
  box-shadow: 0 18px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.09);
  font-family: var(--im-body);
  color: var(--im-parchment);
  overflow: hidden;
}
.im-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 18px;
}
.im-panel__head > div:first-child { flex: 1 1 190px; min-width: 0; }
.im-panel__title { font: 400 21px/1.2 var(--im-display); margin: 6px 0 0; }
.im-panel__chips { display: flex; gap: 6px; }
.im-chip {
  font: 500 10px/1 var(--im-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--im-mute);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--im-hairline-2);
  background: transparent;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.im-chip[aria-pressed="true"] { color: var(--im-gold); border-color: var(--im-hairline); }
.im-chip:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 2px; }

.im-kpis {
  display: grid;
  /* auto-fit rather than a fixed repeat(3, …): Sales Analysis now renders
     five tiles (batch 16 adds Value YTD / MoM growth) while Petty Cash still
     renders three from this same class — a fixed column count would either
     crowd the five-tile row or leave the three-tile row with an odd gap. */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 560px) { .im-kpis { grid-template-columns: 1fr 1fr; } }
.im-kpi { display: flex; flex-direction: column; justify-content: space-between; }
.im-kpi__label {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.35;
  color: var(--im-dim);
  margin-bottom: 8px;
  min-height: 2.7em;          /* two lines, so every figure sits on one line */
}
.im-kpi__value {
  font: 400 25px/1 var(--im-display);
  color: var(--im-parchment);
  font-variant-numeric: tabular-nums;
}
.im-kpi__value.is-empty { color: var(--im-dim); }

.im-plotwrap {
  position: relative;
  border-radius: var(--im-r-sm);
  border: 1px solid var(--im-hairline-2);
  background: rgba(0, 0, 0, .18);
  overflow: hidden;
}
.im-plot { display: block; width: 100%; height: 132px; }
.im-plotwrap__caption {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--im-dim);
  pointer-events: none;
}

.im-ledger { width: 100%; border-collapse: collapse; font-size: 13px; }
.im-ledger th {
  text-align: start;
  font: 500 10px/1 var(--im-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--im-dim);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--im-hairline-2);
}
.im-ledger td {
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--im-dim);
  font-variant-numeric: tabular-nums;
}
.im-ledger td:last-child, .im-ledger th:last-child { text-align: end; }

.im-empty {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--im-hairline-2);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--im-mute);
}
.im-empty b { color: var(--im-gold); font-weight: 500; }

/* ── Paused by iMonetary: a notice that stays on the sign-in card ────────── */

.im-paused-note {
  margin: 4px 0 18px;
  padding: 12px 14px;
  border-radius: var(--im-r-sm);
  border: 1px solid rgba(201,165,78,.38);
  background: rgba(201,165,78,.08);
  color: var(--im-parchment);
  font: 400 13.5px/1.6 var(--im-body);
  text-align: start;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */

.im-toast {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-start: 50%;
  transform: translate(-50%, 14px);
  z-index: var(--im-z-toast);
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: var(--im-r-sm);
  border: 1px solid var(--im-hairline);
  background: rgba(7,18,49,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--im-shadow);
  color: var(--im-parchment);
  font: 400 13.5px/1.5 var(--im-body);
  text-align: center;
  opacity: 0;
  transition: opacity .3s, transform .35s var(--im-ease);
  pointer-events: none;
}
[dir="rtl"] .im-toast { transform: translate(50%, 14px); }
.im-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
[dir="rtl"] .im-toast.is-on { transform: translate(50%, 0); }

/* ── Motion & locale ────────────────────────────────────────────────────── */

@keyframes im-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes im-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .im-layer *, .im-gate, .im-gate__card, .im-flow, .im-flow__card {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .im-seal__body { opacity: 1; transform: none; }
}

html[lang="fa"] .im-layer,
[dir="rtl"] .im-layer { font-family: "Vazirmatn", var(--im-body); }
html[lang="fa"] .im-flow__title,
html[lang="fa"] .im-gate__title,
html[lang="fa"] .im-panel__title,
html[lang="fa"] .im-seal__name { font-family: "Vazirmatn", var(--im-display); font-weight: 500; }
html[lang="fa"] .im-code-input,
html[lang="fa"] .im-key,
html[lang="fa"] .im-codes li { direction: ltr; }

.im-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

body.im-no-scroll { overflow: hidden !important; }

/* ── Review fixes (appended: these win over the rules above) ─────────────── */

/* The panels have square corners, so a seal pinned to inset:0 with an
   inherited radius ended in hard right angles. Float the glass inside the
   panel with its own radius so it reads as a pane resting on top. */
.im-seal {
  inset: 7px;
  border-radius: 20px;
  cursor: pointer;
  backdrop-filter: blur(11px) saturate(128%);
  -webkit-backdrop-filter: blur(11px) saturate(128%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    inset 0 0 0 1px rgba(201, 165, 78, .15),
    0 12px 38px rgba(0, 0, 0, .36);
}
.im-seal::before { border-radius: 20px; }

/* A locked entry stays clickable — clicking it is how a member reaches the
   sealed panel and sees why it is closed. Dimmed, never dead. */
.im-nav-locked { cursor: pointer !important; opacity: .62; }
.im-nav-locked:hover { opacity: .88; }

/* The auth screens must sit inside the viewport — a member typing their
   password should not meet a scrollbar first. --im-fit is set by
   surface-login.js only when the card genuinely overflows.
   Scoped to the three auth screens by id, not the bare .screen class —
   #screen-app carries that same class once it's the active screen, and a
   class-only selector here centered the whole dashboard shell instead of
   just the login card: #screen-app.active
    would size to its content
   (never triggering its own overflow) and center that oversized box inside
   #screen-app's fixed, clipped frame, so anything past the fold — the rest
   of a real Sales Analysis panel, say — was clipped with no scrollbar to
   reach it. Found while wiring live data into Sales Analysis, the first
   panel with enough content to hit this. */
.im-portal #screen-login,
.im-portal #screen-otp,
.im-portal #screen-channel { min-height: 100svh; }
.im-portal #screen-login.active,
.im-portal #screen-otp.active,
.im-portal #screen-channel.active {
  align-items: center;
  justify-content: center;
  padding-block: 18px;
}
.im-portal .auth-card {
  transform: scale(var(--im-fit, 1));
  transform-origin: center center;
  transition: transform .25s var(--im-ease);
}

/* Login code prompt, shown only when the member enabled an authenticator. */
.im-login-2fa { max-width: 420px; }

/* A sealed panel is a closed door, not a page. Left at full height the Team and
   Fraud panels became metre-tall blurred slabs you had to scroll past, and the
   sidebar scrolled out of view with them. Cap it: one glass card, no scrolling. */
.im-locked {
  max-height: min(58vh, 520px) !important;
  overflow: hidden !important;
}
.im-seal { align-content: center; }

/* ═══ Console fits the screen; only the panel area scrolls ════════════════
   The whole console was one long page, so the sidebar scrolled away and the
   member had to travel to see their own dashboard. Now the shell is exactly
   the height of the window, the sidebar and top bar are fixed, and scrolling
   happens inside the panel region — with a glass scrollbar, not the browser's. */

html.im-portal, html.im-portal body { height: 100%; overflow: hidden !important; }

.im-portal #screen-app.active {
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}
/* min-height:0 on every direct child (not just .main) collapsed the topbar's
   auto grid row toward zero — a grid item's automatic min-size is its
   content size, and this reset that to 0 for the topbar too, not just the
   panel region. The scoped version below (search "actually makes the
   console scroll internally") sets it on .main and .sidebar only; nothing
   here needs the wildcard. */

/* The panel region: the one place that scrolls. */
.im-portal .content,
.im-portal main,
.im-portal .main {
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 165, 78, .38) transparent;
}

/* Glass scrollbar, sitting inside the console rather than on the window. */
.im-portal .content::-webkit-scrollbar,
.im-portal main::-webkit-scrollbar,
.im-portal .main::-webkit-scrollbar { width: 10px; }

.im-portal .content::-webkit-scrollbar-track,
.im-portal main::-webkit-scrollbar-track,
.im-portal .main::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .03);
  border-radius: 99px;
  margin-block: 10px;
}
.im-portal .content::-webkit-scrollbar-thumb,
.im-portal main::-webkit-scrollbar-thumb,
.im-portal .main::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: rgba(201, 165, 78, .30);
  backdrop-filter: blur(6px);
}
.im-portal .content:hover::-webkit-scrollbar-thumb,
.im-portal main:hover::-webkit-scrollbar-thumb,
.im-portal .main:hover::-webkit-scrollbar-thumb { background-color: rgba(201, 165, 78, .52); }

/* The sidebar holds its own ground and scrolls separately if it must. */
.im-portal #sidebar,
.im-portal .sidebar {
  height: 100svh;
  max-height: 100svh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 165, 78, .28) transparent;
}

/* A sealed panel is a closed door, not a page — it must never create scroll. */
.im-locked { max-height: min(52vh, 460px) !important; overflow: hidden !important; }

@media (max-width: 900px) {
  html.im-portal, html.im-portal body { overflow: auto !important; }
  .im-portal #screen-app.active { height: auto; max-height: none; overflow: visible; }
  .im-portal .content, .im-portal main, .im-portal .main { max-height: none; overflow: visible; }
  .im-portal #sidebar, .im-portal .sidebar { height: auto; max-height: none; }
}

/* ═══ Profile ════════════════════════════════════════════════════════════ */

.im-chip-profile { cursor: pointer; transition: border-color .25s, background .25s, transform .25s var(--im-ease); }
.im-chip-profile:hover { border-color: rgba(201,165,78,.55) !important; transform: translateY(-1px); }
.im-chip-profile:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 3px; }

.im-profile {
  position: fixed;
  inset: 0;
  z-index: 2147482800;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(27,60,140,.30), transparent 60%),
    rgba(4, 6, 12, .96);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  animation: im-fade .35s var(--im-ease) both;
  font-family: var(--im-body);
  color: var(--im-parchment);
}

.im-profile__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-block-end: 1px solid var(--im-hairline);
  background: rgba(7, 18, 49, .55);
}
.im-profile__title {
  font: 400 20px/1 var(--im-display);
  letter-spacing: .04em;
}

.im-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--im-hairline-2);
  background: var(--im-glass);
  color: var(--im-mute);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.im-icon-btn svg { width: 17px; height: 17px; }
.im-icon-btn:hover { color: var(--im-parchment); border-color: rgba(201,165,78,.45); background: var(--im-glass-2); }
.im-icon-btn:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 3px; }

.im-icon-btn--wide {
  width: auto; height: 38px;
  border-radius: 99px;
  padding: 0 16px;
  gap: 9px;
  grid-auto-flow: column;
  font: 500 12px/1 var(--im-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}

.im-profile__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 22px 60px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-content: start;
  max-width: 1080px;
  width: 100%;
  margin-inline: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,165,78,.38) transparent;
}

.im-pcard {
  padding: 22px 24px;
  border-radius: var(--im-r);
  border: 1px solid var(--im-hairline);
  background:
    var(--im-grain),
    linear-gradient(160deg, rgba(14,36,85,.58), rgba(7,18,49,.74));
  background-blend-mode: overlay, normal;
  box-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.09);
}
.im-pcard .im-eyebrow { display: block; margin-bottom: 16px; }

.im-prow {
  display: grid;
  grid-template-columns: 1fr auto 38px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-block-end: 1px solid rgba(255,255,255,.05);
}
.im-prow:last-of-type { border-block-end: 0; }
.im-prow__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--im-dim); }
.im-prow__value { font-size: 15px; color: var(--im-parchment); overflow-wrap: anywhere; text-align: end; }

.im-level { display: grid; align-content: start; }
.im-level__name { font: 400 34px/1 var(--im-display); color: var(--im-gold-bright); margin-bottom: 8px; }
.im-level__role { font-size: 10px; letter-spacing: .28em; color: var(--im-dim); }

.im-factor {
  padding: 16px 18px;
  margin-bottom: 12px;
  border-radius: var(--im-r-sm);
  border: 1px solid var(--im-hairline-2);
  background: rgba(0,0,0,.24);
  transition: border-color .25s;
}
.im-factor:last-of-type { margin-bottom: 0; }
.im-factor.is-on { border-color: rgba(62,142,107,.42); }

.im-factor__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.im-factor__dot {
  flex: 0 0 auto;
  width: 9px; height: 9px; margin-top: 5px;
  border-radius: 50%;
  background: var(--im-danger);
  box-shadow: 0 0 0 3px rgba(194,69,61,.16);
}
.im-factor.is-on .im-factor__dot {
  background: var(--im-ok);
  box-shadow: 0 0 0 3px rgba(62,142,107,.18);
}
.im-factor__title { font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.im-factor__blurb { font-size: 12.5px; line-height: 1.55; color: var(--im-mute); }
.im-factor__state {
  flex: 0 0 auto;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--im-dim);
  border: 1px solid var(--im-hairline-2);
  border-radius: 99px;
  padding: 5px 9px;
}
.im-factor.is-on .im-factor__state { color: var(--im-ok); border-color: rgba(62,142,107,.4); }

.im-factor__actions { display: flex; flex-wrap: wrap; gap: 9px; }
.im-factor__actions .im-btn { padding: 10px 16px; font-size: 12.5px; }

.im-otplink {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--im-gold);
  text-decoration: none;
  border-block-end: 1px solid var(--im-hairline);
  padding-block-end: 3px;
}
.im-otplink:hover { color: var(--im-gold-bright); }

[dir="rtl"] .im-prow__value { text-align: start; }

/* ═══ The bit that actually makes the console scroll internally ═══════════
   #screen-app is a CSS grid: grid-template-areas "side top" / "side main".
   Setting a height on it is not enough — with implicit auto rows the main
   area sizes to its content and pushes the page instead of scrolling. It
   needs an explicit 1fr row, and grid children need min-height:0 before
   overflow can take effect at all. That was the missing piece. */

.im-portal #screen-app.active {
  grid-template-rows: auto 1fr;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}

.im-portal .main {
  grid-area: main;
  min-height: 0;                 /* without this, overflow-y never engages */
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.im-portal .sidebar {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.im-portal .topbar { position: relative; z-index: 3; }

/* Glass scrollbar on the panel region and the sidebar. */
.im-portal .main::-webkit-scrollbar,
.im-portal .sidebar::-webkit-scrollbar { width: 10px; }
.im-portal .main::-webkit-scrollbar-track,
.im-portal .sidebar::-webkit-scrollbar-track {
  background: rgba(255,255,255,.03);
  border-radius: 99px;
  margin-block: 12px;
}
.im-portal .main::-webkit-scrollbar-thumb,
.im-portal .sidebar::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: rgba(201,165,78,.30);
}
.im-portal .main:hover::-webkit-scrollbar-thumb,
.im-portal .sidebar:hover::-webkit-scrollbar-thumb { background-color: rgba(201,165,78,.55); }
.im-portal .main, .im-portal .sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(201,165,78,.38) transparent;
}

/* The member chip is the way into the profile. */
.im-portal .userchip.im-chip-profile { cursor: pointer; }

@media (max-width: 900px) {
  .im-portal #screen-app.active { grid-template-rows: auto auto; height: auto; max-height: none; overflow: visible; }
  .im-portal .main, .im-portal .sidebar { max-height: none; overflow: visible; }
}

/* Forgot-password link: present without competing with the gold sign-in button. */
.im-forgot {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--im-mute);
  font: 400 13px/1.4 var(--im-body);
  text-align: center;
  cursor: pointer;
  transition: color .2s;
}
.im-forgot:hover { color: var(--im-gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.im-forgot:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 3px; border-radius: 4px; }

/* ── Lost access ────────────────────────────────────────────────────────── */

.im-lost {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--im-dim);
  font: 400 12.5px/1.4 var(--im-body);
  text-align: center;
  cursor: pointer;
  transition: color .2s;
}
.im-lost:hover { color: var(--im-gold); text-decoration: underline; text-underline-offset: 3px; }
.im-lost:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 3px; border-radius: 4px; }

.im-steps-list {
  margin: 0 0 22px;
  padding-inline-start: 20px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--im-mute);
}
.im-steps-list li { margin-bottom: 8px; padding-inline-start: 4px; }
.im-steps-list li::marker { color: var(--im-gold); font-weight: 600; }

.im-textarea {
  min-height: 76px;
  resize: vertical;
  font-family: var(--im-body);
  line-height: 1.6;
}

.im-reference {
  margin: 0 0 20px;
  padding: 18px;
  border-radius: var(--im-r);
  border: 1px solid var(--im-hairline);
  background: rgba(0, 0, 0, .3);
  text-align: center;
}
.im-reference__code {
  margin-top: 8px;
  font: 600 26px/1 var(--im-mono);
  letter-spacing: .22em;
  color: var(--im-gold-bright);
}

/* ── Field validation ───────────────────────────────────────────────────── */

.im-input.is-invalid,
input.is-invalid {
  border-color: rgba(194, 69, 61, .65) !important;
  background-color: rgba(194, 69, 61, .06);
}
.im-input.is-valid,
input.is-valid { border-color: rgba(62, 142, 107, .5) !important; }

.im-vmsg {
  font-size: 12px;
  line-height: 1.5;
  min-height: 0;
  margin: -10px 0 12px;
  transition: color .2s;
}
.im-vmsg:empty { margin: 0; }
.im-vmsg.is-bad { color: #e9877f; }
.im-vmsg.is-ok { color: var(--im-dim); font-variant-numeric: tabular-nums; }
.im-vmsg.is-hint { color: var(--im-mute); }

.im-vfix {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--im-gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.im-vfix:hover { color: #fff; }
.im-vfix:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 2px; border-radius: 3px; }

/* ── Choosing a verification method ─────────────────────────────────────── */

.im-method {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 10px;
  padding: 16px 18px;
  border-radius: var(--im-r);
  border: 1px solid var(--im-hairline-2);
  background: var(--im-glass);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s var(--im-ease);
}
.im-method:hover {
  border-color: rgba(201, 165, 78, .5);
  background: var(--im-glass-2);
  transform: translateY(-1px);
}
.im-method:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 3px; }

.im-method__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--im-hairline);
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  color: var(--im-gold);
}
.im-method__icon svg { width: 19px; height: 19px; display: block; }

.im-method__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.im-method__name { font-size: 15px; font-weight: 500; }
.im-method__blurb { font-size: 12px; line-height: 1.5; color: var(--im-mute); }

/* ── One language per member (2026-09-24) ────────────────────────────────
   Signed in, the dashboard is held back until the member's own language is
   known (surface-core.js), and has no language picker: the language is their
   company's, set by imonetary.ir. The sign-in screens keep the picker. */
html.im-lang-wait #screen-app { visibility: hidden; }
html.im-signed-in .lang-switch { display: none !important; }

/* ── Reading in each language (2026-09-24) ────────────────────────────────
   Owner: every member reads iMonetary as if it were a platform of their own
   country. Fonts are served from this site (/fonts/fonts.css) — Google's are
   blocked in mainland China and unreliable elsewhere.

   Farsi and Chinese are never letter-spaced: Persian letters join, and
   spacing them apart breaks the words; Chinese is set solid. */
html[lang="fa"] body *, html[lang="zh"] body * { letter-spacing: 0 !important; }

/* Farsi: Vazirmatn throughout, a touch more line height. */
html[lang="fa"] {
  --sans: 'Vazirmatn', 'Inter', Tahoma, sans-serif;
  --serif: 'Vazirmatn', 'Cormorant Garamond', Tahoma, serif;
  --im-display: "Vazirmatn", "Cormorant Garamond", Tahoma, serif;
  --im-body: "Vazirmatn", "Inter", Tahoma, sans-serif;
}
html[lang="fa"] body { line-height: 1.8; }
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3 { font-weight: 700; }

/* Chinese: the reader's own system fonts (PingFang on Apple, Microsoft YaHei
   on Windows, Noto/Source Han elsewhere); Latin letters and digits keep the
   site's fonts. No italics — Chinese has none. Tiny tracked-out labels are
   hard to read in Chinese, so nothing drops below 12px. */
html[lang="zh"] {
  --sans: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', 'WenQuanYi Micro Hei', sans-serif;
  --serif: 'Cormorant Garamond', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
  --im-display: "Cormorant Garamond", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --im-body: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}
html[lang="zh"] body { line-height: 1.7; }
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3,
html[lang="zh"] .im-flow__title, html[lang="zh"] .im-seal__name { font-weight: 600; }
html[lang="zh"] em, html[lang="zh"] i, html[lang="zh"] cite { font-style: normal; }
html[lang="zh"] .eyebrow, html[lang="zh"] .im-eyebrow, html[lang="zh"] .lab, html[lang="zh"] .k,
html[lang="zh"] .im-kpi__label, html[lang="zh"] .im-prow__label, html[lang="zh"] .im-level__role,
html[lang="zh"] .chip, html[lang="zh"] .im-chip, html[lang="zh"] .tag, html[lang="zh"] .rl,
html[lang="zh"] th, html[lang="zh"] .im-seal__tag { font-size: 12px; }

/* Rises and falls: green up, red down — except in Chinese, where finance
   reads red as up and green as down. */
html[lang="zh"] .delta.up { color: var(--bad); }
html[lang="zh"] .delta.down { color: var(--good); }
html[lang="zh"] td.amt.pos { color: var(--bad); }
html[lang="zh"] td.amt.neg { color: var(--good); }

/* A module that is coming says so, and what it will do, at rest. */
.im-coming .im-seal__body { opacity: 1; transform: none; }
.im-coming .im-seal__idle { display: none; }
.im-coming .im-seal__msg { max-width: 44ch; font-size: 13px; }

/* ── Profile tabs: Account · Contact us · Documents (2026-09-24) ─────── */
.im-ptabs {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 14px 16px 0; max-width: 1080px; width: 100%; margin-inline: auto;
}
.im-ptab {
  font: inherit; font-size: 13px; color: var(--im-mute); cursor: pointer;
  background: transparent; border: 1px solid var(--im-hairline-2); border-radius: 999px;
  padding: 8px 18px; transition: color .15s, border-color .15s, background .15s;
}
.im-ptab:hover { color: var(--im-parchment); border-color: var(--im-hairline); }
.im-ptab.is-on { color: #191204; background: var(--im-gold); border-color: var(--im-gold); font-weight: 600; }
.im-ptab:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 3px; }
.im-profile__body--wide { grid-template-columns: 1fr; max-width: 860px; }
.im-prow__note { margin: -4px 0 6px; }

.im-linkbtn {
  font: inherit; font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--im-gold); text-decoration: underline; text-underline-offset: 3px;
}
.im-linkbtn:hover { color: var(--im-gold-bright); }
.im-counter { font-size: 11px; color: var(--im-dim); text-align: end; margin: -12px 0 12px; font-variant-numeric: tabular-nums; }
.is-hidden { display: none !important; }
.im-btn--danger:hover { color: #f0a29c; border-color: rgba(194,69,61,.6); }

.im-pill {
  display: inline-flex; align-items: center; font-size: 11px; line-height: 1; padding: 5px 10px;
  border-radius: 999px; border: 1px solid var(--im-hairline-2); color: var(--im-mute);
}
.im-pill--open { color: var(--im-warn); border-color: rgba(216,154,50,.45); }
.im-pill--answered { color: #7fd1a4; border-color: rgba(62,142,107,.55); }
.im-pill--closed { color: var(--im-dim); }
.im-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--im-gold); color: #191204;
}

/* Contact us */
.im-support__bar { margin: 6px 0 18px; }
.im-support__list { display: grid; gap: 10px; }
.im-support__privacy { margin-top: 18px; font-size: 12px; }
.im-thread {
  display: block; width: 100%; text-align: start; font: inherit; cursor: pointer;
  padding: 14px 16px; border-radius: var(--im-r-sm); color: var(--im-parchment);
  background: var(--im-glass); border: 1px solid var(--im-hairline-2); transition: border-color .15s, background .15s;
}
.im-thread:hover { border-color: var(--im-hairline); background: var(--im-glass-2); }
.im-thread.is-unread { border-color: rgba(201,165,78,.55); }
.im-thread__top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.im-thread__subject { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.im-thread__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--im-dim); }
.im-thread-view { margin-top: 14px; }
.im-thread-view__head { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.im-thread-view__subject { margin: 0; font-family: var(--im-display); font-size: 22px; font-weight: 500; color: var(--im-parchment); overflow-wrap: anywhere; }
.im-msgs { display: grid; gap: 12px; margin-bottom: 18px; }
.im-msg { max-width: 86%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--im-hairline-2); }
.im-msg--member { justify-self: end; background: rgba(27,60,140,.28); border-end-end-radius: 4px; }
.im-msg--team { justify-self: start; background: rgba(201,165,78,.09); border-color: var(--im-hairline); border-end-start-radius: 4px; }
.im-msg__meta { display: flex; gap: 10px; align-items: baseline; font-size: 11.5px; color: var(--im-dim); margin-bottom: 6px; }
.im-msg__meta b { color: var(--im-gold); font-weight: 600; }
.im-msg__body { font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--im-parchment); }

/* Documents */
.im-docs__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.im-drop {
  margin: 8px 0 16px; padding: 26px 18px; text-align: center; cursor: pointer;
  border: 1.5px dashed rgba(201,165,78,.45); border-radius: var(--im-r); background: rgba(201,165,78,.04);
  transition: background .15s, border-color .15s;
}
.im-drop:hover, .im-drop.is-over { background: rgba(201,165,78,.1); border-color: var(--im-gold); }
.im-drop:focus-visible { outline: 2px solid var(--im-gold-bright); outline-offset: 3px; }
.im-drop__line { font-size: 14px; color: var(--im-parchment); }
.im-drop__types { margin-top: 8px; font-size: 12px; color: var(--im-dim); }
.im-docs__pending { display: grid; gap: 12px; }
.im-docs__privacy { font-size: 12px; margin-top: 14px; }
.im-upfile { padding: 14px 16px; border-radius: var(--im-r-sm); border: 1px solid var(--im-hairline-2); background: var(--im-glass); }
.im-upfile.is-refused, .im-upfile.is-failed { border-color: rgba(194,69,61,.5); }
.im-upfile.is-done { border-color: rgba(62,142,107,.55); }
.im-upfile__head { display: flex; align-items: center; gap: 12px; }
.im-upfile__name { flex: 1 1 auto; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.im-upfile__size { font-size: 12px; color: var(--im-dim); white-space: nowrap; }
.im-upfile__x { width: 30px; height: 30px; font-size: 18px; line-height: 1; }
.im-upfile__fields { display: grid; gap: 0 14px; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr); margin-top: 12px; }
.im-upfile__desc { grid-column: 1 / -1; }
.im-upfile__fields .im-field { margin-bottom: 12px; }
.im-upfile__ok { margin-top: 8px; color: #7fd1a4; font-size: 13px; }
.im-select { appearance: auto; }
.im-progress { height: 6px; border-radius: 999px; background: var(--im-glass-2); margin: 12px 0 6px; overflow: hidden; }
.im-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--im-gold-deep), var(--im-gold-bright)); transition: width .2s; }
.im-docs-list__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.im-docs-list__bar .im-select { max-width: 320px; }
.im-docrow { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--im-hairline-2); }
.im-docrow__main { flex: 1 1 auto; min-width: 0; }
.im-docrow__name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.im-docrow__desc { font-size: 13px; color: var(--im-mute); margin-top: 3px; overflow-wrap: anywhere; }
.im-docrow__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--im-dim); }
.im-docrow__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.im-docrow__actions .im-btn { padding: 8px 14px; font-size: 12.5px; }
@media (max-width: 640px) {
  .im-upfile__fields { grid-template-columns: 1fr; }
  .im-docrow { flex-direction: column; align-items: stretch; }
  .im-docrow__actions { justify-content: flex-start; }
  .im-msg { max-width: 100%; }
}

/* The bell: the member's own notifications */
.im-bellmenu {
  position: fixed; z-index: 2147482800; width: min(340px, calc(100vw - 24px));
  padding: 16px; border-radius: var(--im-r); border: 1px solid var(--im-hairline);
  background: linear-gradient(160deg, rgba(14,36,85,.97), rgba(7,18,49,.98)); box-shadow: var(--im-shadow);
  color: var(--im-parchment); font-family: var(--im-body);
}
.im-bellmenu .im-eyebrow { display: block; margin-bottom: 10px; }
.im-bellmenu__item {
  display: block; width: 100%; text-align: start; font: inherit; font-size: 13px; line-height: 1.6; cursor: pointer;
  color: var(--im-parchment); background: var(--im-glass); border: 1px solid var(--im-hairline-2);
  border-radius: var(--im-r-sm); padding: 10px 12px; margin-top: 8px;
}
.im-bellmenu__item:hover { border-color: var(--im-hairline); }
.im-bellmenu__when { display: block; font-size: 11.5px; color: var(--im-dim); margin-top: 4px; }
.im-guide-btn { font-weight: 700; font-size: 15px; color: var(--gold, #c9a227); }

/* The guided tour */
.im-guide { position: fixed; inset: 0; z-index: 2147482850; }
.im-guide__shade { position: absolute; inset: 0; background: rgba(3,5,12,.66); }
.im-guide__spot {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--im-gold), 0 0 0 9999px rgba(3,5,12,.66);
  transition: left .25s var(--im-ease), top .25s var(--im-ease), width .25s var(--im-ease), height .25s var(--im-ease);
}
.im-guide__pop {
  position: fixed; width: min(360px, calc(100vw - 24px)); padding: 20px 22px 18px;
  border-radius: var(--im-r); border: 1px solid var(--im-hairline); color: var(--im-parchment);
  background: var(--im-grain), linear-gradient(160deg, rgba(14,36,85,.98), rgba(7,18,49,.99));
  background-blend-mode: overlay, normal; box-shadow: var(--im-shadow); font-family: var(--im-body);
}
.im-guide__pop.is-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); }
.im-guide__count { display: block; margin-bottom: 8px; }
.im-guide__title { margin: 0 0 8px; font-family: var(--im-display); font-size: 22px; font-weight: 500; color: var(--im-gold-bright); }
.im-guide__body { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--im-parchment); }
.im-guide__actions { display: flex; align-items: center; gap: 8px; }
.im-guide__actions .im-btn { padding: 9px 16px; font-size: 13px; }
.im-guide__skip { margin-inline-end: auto; font-size: 12.5px; color: var(--im-mute); }
html[lang="fa"] .im-guide__title, html[lang="fa"] .im-thread-view__subject { font-family: "Vazirmatn", var(--im-display); font-weight: 700; font-size: 20px; }
html[lang="zh"] .im-guide__title, html[lang="zh"] .im-thread-view__subject { font-weight: 600; font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .im-guide__spot { transition: none; } }

/* The brand's wordmark is a name: it keeps its own face in every language. */
.wordmark[translate="no"], .side-brand .name[translate="no"] { font-family: 'Cormorant Garamond', Georgia, serif !important; }
.im-ltr { unicode-bidi: isolate; }
html[dir="rtl"] .im-prow__value.im-ltr { text-align: left; }
/* Names, dates and sizes side by side: each keeps its own direction, so a
   Farsi name next to a French date never runs into it. */
.im-docrow__meta > *, .im-thread__meta > *, .im-msg__meta > *, .im-bellmenu__item > * { unicode-bidi: isolate; }