/* /plus surfaces (dashboard, profile, cards) and the header overlays.
   Prototype-feedback override: these now use the SITE's design language (the
   dc-theme.css tokens, light by default, and they follow the site's dark toggle)
   instead of a separate dark identity. Everything is prefixed .dcp-. RTL. */

body.dcp-page {
  margin: 0;
  background: var(--bg, #f0f2f5);
  color: var(--txt, #0a1a33);
  min-height: 100vh;
  line-height: 1.85;
}
body.dcp-page a { color: var(--ac, #0b5fff); text-decoration: none; }
/* The rule above wins over .dcp-btn-primary/.dcp-btn-danger's own `color: #fff`
   on any <a> (element+class beats a single class), so a link styled as a
   filled accent button rendered with accent-blue text on an accent-blue
   background — invisible (2026-07-30, /plus/'s "کارت برای مرور" button). These
   need the extra specificity to actually win. */
body.dcp-page a.dcp-btn { color: var(--txt, #0a1a33); }
body.dcp-page a.dcp-btn-primary,
body.dcp-page a.dcp-btn-danger { color: #fff; }

.dcp-page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border, rgba(2,35,96,.1));
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  backdrop-filter: blur(8px);
}
.dcp-page-brand { font-weight: 800; font-size: 1.1rem; color: var(--txt) !important; }
.dcp-page-back { color: var(--txt2, #4a5f85) !important; font-size: .9rem; }
.dcp-page-main { max-width: 900px; margin: 0 auto; padding: 18px 16px 60px; }

.dcp-loading, .dcp-empty, .dcp-gate { padding: 30px 6px; color: var(--txt2, #4a5f85); text-align: center; }
.dcp-gate { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.dcp-muted { color: var(--txt2, #4a5f85); }

/* ---- section cards ------------------------------------------------------- */
.dcp-dash-hello { font-size: 1.5rem; font-weight: 800; margin: 4px 2px 16px; }
.dcp-dash-sec {
  background: var(--card-bg, #fff); border: 1px solid var(--card-border, rgba(2,35,96,.09));
  border-radius: var(--r-lg, 18px); padding: 16px 18px; margin-bottom: 14px;
  box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07));
}
.dcp-dash-h2 { font-size: 1rem; font-weight: 800; margin: 0 0 4px; }

/* ---- "won a week of premium" banner (dashboard.js premiumGrantBanner) ---- */
.dcp-prize-banner {
  background: var(--card-bg, #fff); border: 1px solid var(--ac, #0b5fff);
  border-radius: var(--r-lg, 18px); padding: 16px 18px; margin-bottom: 14px;
  box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07));
}
.dcp-prize-h { font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; }
.dcp-prize-list { margin: 10px 0 14px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.dcp-prize-list li { color: var(--txt2, #4a5f85); font-size: .9rem; line-height: 1.7; }
.dcp-prize-list li b { color: var(--txt, #0a1a33); }
.dcp-sec-hint { color: var(--txt2, #4a5f85); font-size: .9rem; margin: 0 0 12px; }
/* A hint with a «؟» beside it (the reveal caption itself is dc-plus-scorecap,
   already styled - see home-card.js's own score/شیلد caption). */
.dcp-sec-hint-row { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.dcp-sec-hint-row .dcp-sec-hint { margin: 0; flex: 1 1 auto; }
.dcp-sec-hint-row .dc-plus-info { flex: none; margin-top: 1px; }

/* ---- streak (with explanation) ------------------------------------------- */
.dcp-streak-detail { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dcp-streak-flamebig { font-size: 2.4rem; filter: grayscale(1); opacity: .5; }
.dcp-streak-flamebig.is-active { filter: none; opacity: 1; }
.dcp-streak-nums { display: flex; flex-direction: column; }
.dcp-streak-num { font-size: 2rem; font-weight: 900; line-height: 1.1; }
.dcp-streak-unit { color: var(--txt2, #4a5f85); }
.dcp-streak-record { margin-inline-start: auto; text-align: center; background: var(--surface2, #f4f6fb); border-radius: var(--r-md, 14px); padding: 8px 16px; }
.dcp-streak-record b { font-size: 1.3rem; display: block; }
.dcp-streak-record span { color: var(--txt2, #4a5f85); font-size: .85rem; }

/* ---- last place you were --------------------------------------------------- */
.dcp-continue { color: var(--ac, #0b5fff) !important; font-weight: 700; }

/* ---- folder tree --------------------------------------------------------- */
.dcp-folders { display: flex; flex-direction: column; }
.dcp-folder {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 6px; border-bottom: 1px solid var(--border, rgba(2,35,96,.08));
  color: var(--txt) !important; font-weight: 600;
}
.dcp-folder:last-child { border-bottom: none; }
.dcp-folder:hover { color: var(--ac) !important; }
.dcp-folder-name::before { content: "📁"; margin-inline-end: 8px; opacity: .7; }
.dcp-folder-count { font-size: .85rem; font-weight: 700; color: var(--ac, #0b5fff); background: var(--chip-bg, rgba(11,95,255,.08)); border-radius: var(--r-f, 999px); padding: 2px 12px; white-space: nowrap; }
.dcp-folder-count.is-zero { color: var(--txt3, #62779a); background: transparent; font-weight: 400; }

/* ---- per-folder / per-pathway progress bars -------------------------------
   Two-line layout: name + percent share the first line, the track is forced
   onto its own full-width line via flex-basis:100%. This is deliberate -
   a single-row grid (name | track | percent) let a long label (pathway
   titles run a full sentence) claim the whole row and squeeze the track to
   nothing or push the percent outside the card. Wrapping keeps every row the
   same width no matter how long the label is. `order` re-sequences the
   existing DOM (name, track, percent) without any markup change. */
.dcp-progress-list { display: flex; flex-direction: column; gap: 14px; }
.dcp-progress-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 6px; }
.dcp-progress-name {
  order: 1; flex: 1 1 auto; min-width: 0; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.dcp-progress-name { color: inherit; text-decoration: none; }
/* Two shapes share this class: a linked name inside a plain, non-clickable
   row (dashboard's folder list - only the name itself is a link) and a
   plain-span name inside a row that's a whole-row link (قطب‌نمای مطالعه's
   pathway rows) - cover both without implying the coverage rows (plain
   <div>, never a link) are clickable. */
a.dcp-progress-name:hover, a.dcp-progress-row:hover .dcp-progress-name { color: var(--ac, #0b5fff); }
/* Marks the row with the most items READ (not the highest percent — the two
   diverge, which is exactly why the badge carries its own count) in
   قطب‌نمای مطالعه's «پوشش هر پیلار» - a sibling of .dcp-progress-name, own
   flex item, so it can never get clipped by the name's ellipsis overflow the
   way an ::after on the name itself would. */
.dcp-progress-badge {
  order: 2; flex: none; font-size: .68rem; font-weight: 700; white-space: nowrap;
  color: var(--ac, #0b5fff); background: var(--chip-bg, rgba(11,95,255,.08));
  border: 1px solid var(--chip-bd, rgba(11,95,255,.2)); border-radius: 999px; padding: 2px 9px;
}
.dcp-progress-badge b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* The badge is nowrap and the name ellipsizes at min-width:0, so on a narrow
   phone the count would be bought with «دندانپزشکی دیجی…». Giving the name a
   floor in badge-carrying rows only makes the badge wrap to its own line
   instead - the row already wraps (the track is always a line of its own), and
   pathway rows (long sentences, must ellipsize) are left untouched. */
.dcp-progress-row:has(.dcp-progress-badge) .dcp-progress-name { min-width: 9ch; }
.dcp-progress-val {
  order: 3; flex: none; font-weight: 800; color: var(--ac, #0b5fff);
  font-size: .85rem; font-variant-numeric: tabular-nums;
}
.dcp-progress-track {
  order: 4; flex: 0 0 100%; height: 7px;
  background: var(--surface3, #eaecf5); border-radius: 999px; overflow: hidden;
}
/* A soft accent gradient (not the flat brand blue) - the bar is the primary
   data in this list, so it earns the accent instead of staying a quiet gray
   line; a min-width keeps the rounded cap visible even at 1-2%. */
.dcp-progress-fill {
  height: 100%; min-width: 6px; border-radius: 999px; transition: width .4s;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ac, #0b5fff) 55%, var(--surface, #fff)), var(--ac, #0b5fff));
}
a.dcp-progress-row:hover { text-decoration: none; }

/* ---- section variants (قطب‌نمای مطالعه) -----------------------------------
   "ادامه در «X»" is the page's one recommendation - a soft accent wash marks
   it as the actionable card. "حوزه‌های دورمانده" gets a dashed border instead
   of a solid card - unread/uncharted territory, matching the compass theme. */
.dcp-dash-sec.is-spotlight { background: color-mix(in srgb, var(--ac, #0b5fff) 6%, transparent); border-color: color-mix(in srgb, var(--ac, #0b5fff) 22%, transparent); }
.dcp-dash-sec.is-spotlight .dcp-dash-h2 { color: var(--pr, #022360); }
.dcp-dash-sec.is-unexplored {
  background: transparent; box-shadow: none;
  border-style: dashed; border-color: color-mix(in srgb, var(--txt3, #62779a) 45%, transparent);
}

.dcp-pw-heading-row { display: flex; align-items: center; gap: 10px; }
.dcp-pw-heading-row .dcp-pw-heading { margin: 0; }
.dcp-compass-ico { flex: none; width: 28px; height: 28px; color: var(--ac, #0b5fff); }

/* ---- score --------------------------------------------------------------- */
.dcp-score-wrap { display: flex; flex-direction: column; gap: 8px; }
.dcp-score { display: flex; align-items: baseline; gap: 8px; }
.dcp-score-n { font-size: 1.8rem; font-weight: 900; color: var(--ac, #0b5fff); }
/* streak shields (سپر استریک) */
.dcp-freeze { display: flex; align-items: center; gap: 8px; }
.dcp-freeze-icons { display: inline-flex; gap: 2px; }
.dcp-freeze-ico { font-size: 1.15rem; line-height: 1; }
.dcp-freeze-ico.is-empty { filter: grayscale(1); opacity: .3; }
/* Same ink and weight as the rest of the card's text — the shield state lives in
   the icons, never in a lighter label. */
.dcp-freeze-label { color: var(--txt, #0a1a33); font-weight: 600; opacity: 1; }
.dcp-freeze-hint { margin: 0; color: var(--txt2, #4a5f85); font-size: .8rem; line-height: 1.7; }
/* Score breakdown: same muted voice as the shield hint, sits under the number. */
.dcp-score-parts { margin: 0; color: var(--txt2, #4a5f85); font-size: .8rem; line-height: 1.7; }

/* ---- recent highlights (each removable) ---------------------------------- */
.dcp-recent-list { display: flex; flex-direction: column; }
.dcp-recent-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border, rgba(2,35,96,.08)); }
.dcp-recent-row:last-child { border-bottom: none; }
.dcp-recent-link { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--txt) !important; }
.dcp-recent-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcp-recent-del { flex: none; width: 26px; height: 26px; line-height: 22px; text-align: center; font-size: 1.2rem; border-radius: 50%; border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff); color: var(--txt2, #4a5f85); cursor: pointer; }
.dcp-recent-del:hover { color: #c0392b; border-color: #c0392b; }
.dcp-recent-collect { flex: none; width: 26px; height: 26px; line-height: 24px; text-align: center; font-size: 1rem; border-radius: 50%; border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff); cursor: pointer; }
.dcp-recent-collect:hover { border-color: var(--ac, #0b5fff); }

/* ---- collections (dashboard "کالکشن‌ها" block) ----------------------------- */
/* A horizontal strip of Pinterest-style board covers (own overflow-x, never
   the page body) - same .dcp-cl-cover boardCover() builds for the catalog. */
.dcp-cl-dash-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.dcp-cl-dash-board { flex: 0 0 96px; display: flex; flex-direction: column; gap: 4px; color: var(--txt, #0a1a33) !important; text-decoration: none; }
.dcp-cl-dash-board .dcp-cl-cover { width: 96px; height: 96px; border-radius: var(--r-md, 14px); }
.dcp-cl-dash-name { font-size: .8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcp-cl-dash-count { font-size: .74rem; color: var(--txt2, #4a5f85); }
.dcp-recent-confirm { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; color: var(--txt2, #4a5f85); }

/* ---- pathway (dashboard "مسیر یادگیری" block) ----------------------------- */
.dcp-pw-dash { display: flex; flex-direction: column; gap: 10px; }
.dcp-pw-dash-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dcp-pw-dash-title { font-weight: 700; color: var(--txt) !important; }
.dcp-pw-dash-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--txt2, #4a5f85); }
.dcp-pw-dash-next { font-size: .82rem; color: var(--txt2, #4a5f85); }
.dcp-pw-alllink { color: var(--ac, #0b5fff) !important; font-weight: 600; white-space: nowrap; }

/* A free user's teaser for a LIVE premium feature (Leitner review, pathways,
   collections) - same section slot the real block occupies for premium; the
   section's own hint already explains it, so this is just a lock chip. The
   whole card links to the feature's own page, which does the actual
   "این ویژگی ویژه‌ی پریمیوم است" gating. */
.dcp-locked-card { display: inline-block; text-decoration: none; }

/* ---- «دستیار هوشمند» wizard (case-assistant.js) --------------------------
   Still a narrowing multiple-choice wizard, not free-form chat - but now
   reads like an actual AI product: a spark mark on every assistant turn, a
   typing indicator while /assistant/next is in flight, and the case text +
   past answers kept visible as a recap trail above the live turn (previously
   each step wiped the screen, so the exchange looked amnesiac). */
.dcp-assist-intro { display: flex; flex-direction: column; gap: 12px; }

.dcp-assist-avatar {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-md, 14px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ac, #0b5fff) 80%, white), var(--pr, #022360));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ac, #0b5fff) 35%, transparent);
}
.dcp-assist-avatar svg { width: 19px; height: 19px; fill: #fff; }
.dcp-assist-avatar.is-sm { width: 28px; height: 28px; border-radius: var(--r-sm, 10px); }
.dcp-assist-avatar.is-sm svg { width: 14px; height: 14px; }

.dcp-assist-thread { display: flex; flex-direction: column; gap: 14px; }

/* the clinician's own free-text case + past answers - quiet, no bubble of its
   own (this stays a wizard, not a two-party chat), indented to sit under the
   turn cards' avatar column. */
.dcp-assist-recap { display: flex; flex-direction: column; gap: 3px; padding-inline-end: 48px; }
.dcp-assist-recap-label { font-size: .74rem; font-weight: 700; color: var(--txt3, #62779a); }
.dcp-assist-recap-case { color: var(--txt); font-size: .92rem; background: var(--surface2, #f4f6fb); border-radius: var(--r-md, 14px); padding: 10px 14px; }
.dcp-assist-recap-text { color: var(--txt2, #4a5f85); font-size: .87rem; line-height: 1.75; }
.dcp-assist-recap-answer {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 5px;
  font-size: .84rem; font-weight: 700; color: var(--ac, #0b5fff);
  background: var(--chip-bg, rgba(11,95,255,.08)); border: 1px solid var(--chip-bd, rgba(11,95,255,.2));
  border-radius: var(--r-f, 999px); padding: 4px 12px;
}

/* the assistant's live turn - the one piece of chrome that actually reads
   "AI": avatar + a card with its corner nearest the avatar flattened, like a
   speech-bubble tail. Logical corner (not top-right) so it stays correct if
   the page is ever mirrored. */
.dcp-assist-turn { display: flex; gap: 12px; align-items: flex-start; }
.dcp-assist-card {
  flex: 1 1 auto; min-width: 0; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--r-lg, 18px); border-start-start-radius: 6px;
  padding: 14px 16px; box-shadow: var(--card-sh);
}
.dcp-assist-q { font-weight: 700; font-size: .98rem; margin: 0; color: var(--txt); }

.dcp-assist-thinking { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; }
.dcp-assist-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--txt3, #62779a); animation: dcpAssistDot 1.1s ease-in-out infinite; }
.dcp-assist-thinking span:nth-child(2) { animation-delay: .15s; }
.dcp-assist-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes dcpAssistDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* quick-reply chips, directly under the AI card they answer */
.dcp-assist-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-inline-start: 50px; }
.dcp-assist-opt {
  font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer;
  padding: 8px 16px; border-radius: var(--r-f, 999px); border: 1.5px solid var(--chip-bd, rgba(11,95,255,.2));
  background: var(--chip-bg, rgba(11,95,255,.08)); color: var(--ac, #0b5fff);
  transition: background var(--tr, .17s), color var(--tr, .17s), transform var(--tr, .17s);
}
.dcp-assist-opt:hover { background: var(--ac, #0b5fff); color: #fff; border-color: var(--ac, #0b5fff); }
.dcp-assist-opt:active { transform: scale(.96); }
.dcp-assist-more {
  font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-f, 999px); border: 1.5px dashed var(--border, rgba(2,35,96,.12));
  background: transparent; color: var(--txt2, #4a5f85);
}
.dcp-assist-more:hover { border-color: var(--txt3, #62779a); color: var(--txt); }

.dcp-assist-custom { display: flex; gap: 8px; margin-top: 10px; padding-inline-start: 50px; }
.dcp-assist-custom input {
  flex: 1 1 auto; font: inherit; font-size: .88rem; border: 1px solid var(--border, rgba(2,35,96,.12));
  background: var(--surface, #fff); color: var(--txt); border-radius: var(--r-f, 999px); padding: 9px 16px;
}
.dcp-assist-send {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--ac, #0b5fff); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dcp-assist-send svg { width: 16px; height: 16px; fill: currentColor; transform: scaleX(-1); }

/* composer - the case textarea, styled as a real chat input card */
.dcp-assist-composer {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-lg, 18px);
  box-shadow: var(--card-sh); padding: 6px 6px 6px 14px; display: flex; align-items: flex-end; gap: 10px;
}
.dcp-assist-composer textarea {
  flex: 1 1 auto; resize: vertical; min-height: 84px; font: inherit; font-size: .92rem; line-height: 1.8;
  border: 0; background: transparent; color: var(--txt); padding: 12px 8px; outline: none;
}
.dcp-assist-composer textarea::placeholder { color: var(--txt3, #62779a); }
.dcp-assist-composer-send {
  flex: none; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; border: 0;
  background: var(--ac, #0b5fff); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform var(--tr, .17s);
}
.dcp-assist-composer-send:hover { transform: scale(1.06); }
.dcp-assist-composer-send svg { width: 17px; height: 17px; fill: currentColor; transform: scaleX(-1); }

.dcp-assist-disclaimer { display: flex; align-items: center; gap: 6px; color: var(--txt3, #62779a); font-size: .78rem; margin-top: 4px; }

.dcp-assist-result-lead { font-weight: 700; color: var(--txt); margin: 0 0 10px; }
.dcp-assist-restart {
  font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; margin-top: 16px;
  padding: 8px 16px; border-radius: var(--r-f, 999px); border: 1px solid var(--border, rgba(2,35,96,.12));
  background: transparent; color: var(--txt2, #4a5f85);
}
.dcp-assist-restart:hover { color: var(--ac, #0b5fff); border-color: var(--ac, #0b5fff); }

/* ---- profile ------------------------------------------------------------- */
.dcp-field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dcp-field-row .dcp-input { flex: 1 1 180px; background: var(--surface, #fff); color: var(--txt); border: 1px solid var(--border, rgba(2,35,96,.12)); border-radius: 10px; padding: 10px 12px; font: inherit; }
.dcp-inline-msg { color: var(--txt2, #4a5f85); font-size: .85rem; }
.dcp-plan { display: inline-block; font: inherit; font-weight: 800; background: var(--chip-bg, rgba(11,95,255,.08)); color: var(--ac, #0b5fff); padding: 4px 14px; border-radius: 999px; border: 0; }
.dcp-plan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dcp-plan.is-soon { cursor: pointer; background: var(--chip-bg-muted, rgba(2,35,96,.06)); color: var(--txt2, #4a5f85); opacity: .65; }
.dcp-toggle-list { display: flex; flex-direction: column; gap: 12px; }
/* Sub-label spelling out what a switch covers — sits tight under its own switch,
   not a list item in its own right. */
.dcp-toggle-note { margin-top: -7px; font-size: .85rem; line-height: 1.8; }
.dcp-lock-ico { font-size: 1rem; line-height: 1; opacity: .7; }
/* messenger connection (coming soon: options visible but disabled) */
.dcp-messenger { display: flex; flex-direction: column; gap: 10px; }
.dcp-provider-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dcp-provider-opt { font: inherit; font-weight: 700; background: var(--surface2, #f4f6fb); color: var(--txt); border: 1px solid var(--border, rgba(2,35,96,.12)); padding: 8px 20px; border-radius: 12px; cursor: not-allowed; opacity: .55; }
.dcp-soon-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .8rem; background: var(--chip-bg-muted, rgba(2,35,96,.06)); color: var(--txt2, #4a5f85); padding: 4px 12px; border-radius: 999px; }
.dcp-records { display: flex; gap: 20px; flex-wrap: wrap; }
.dcp-records b { font-size: 1.4rem; display: block; }
.dcp-records span { color: var(--txt2, #4a5f85); font-size: .85rem; }
.dcp-cmp { display: flex; flex-direction: column; gap: 8px; }
.dcp-cmp-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.dcp-cmp-arrow.up { color: #1a9d5a; }
.dcp-cmp-arrow.down { color: #c0392b; }
.dcp-phone { font-weight: 700; }
.dcp-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* «کد معرف» — what it is and what it pays, above both states of the section.
   Padded-inline-start on the list rather than default markers so the numbers
   line up under an RTL bullet instead of hanging off the edge. */
.dcp-referral-about { margin: 0 0 12px; }
.dcp-referral-about p { margin: 0 0 6px; font-size: .82rem; font-weight: 700; }
.dcp-referral-about ul {
  margin: 0; padding-inline-start: 18px;
  font-size: .78rem; color: var(--txt2, #4a5f85); line-height: 1.95;
}

.dcp-referral-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dcp-referral-code-row code {
  font-weight: 800; font-size: 1.05rem; direction: ltr; unicode-bidi: isolate;
  background: var(--surface2, #f4f6fb); border-radius: 8px; padding: 4px 10px;
}

/* week strip: clear day cells with weekday letters + a filled dot on active days */
/* Force RTL so the week always reads شنبه (first) on the right, جمعه on the left,
   independent of any ambient direction. */
.dcp-week-strip { display: flex; gap: 8px; direction: rtl; }
.dcp-week-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border: 1px solid var(--border, rgba(2,35,96,.1)); border-radius: var(--r-md, 14px); background: var(--surface, #fff); }
.dcp-week-cell.is-today { outline: 2px solid var(--ac, #0b5fff); outline-offset: 1px; }
.dcp-week-cell.is-future { opacity: .45; }
.dcp-week-day { font-size: .95rem; font-weight: 800; }
.dcp-week-date { font-size: .72rem; opacity: .8; }
/* Completed day is marked by the streak flame, not a colour change. */
.dcp-week-flame { height: 1.15em; line-height: 1.15em; font-size: 1rem; }

.dcp-btn { font: inherit; font-weight: 600; padding: 10px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border, rgba(2,35,96,.12)); background: transparent; color: var(--txt); }
.dcp-btn-primary { background: var(--ac, #0b5fff); color: #fff; border-color: transparent; }
.dcp-btn-ghost { background: transparent; }

/* ---- header overlay (dashboard / profile open from the person menu) ------- */
.dcp-overlay { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; background: var(--bg, #f0f2f5); color: var(--txt); overflow: auto; }
.dcp-overlay-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border, rgba(2,35,96,.1)); background: color-mix(in srgb, var(--surface, #fff) 90%, transparent); backdrop-filter: blur(8px); z-index: 1; }
.dcp-overlay-title { font-weight: 800; font-size: 1.05rem; }
.dcp-overlay-close { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--txt); padding: 4px 8px; }
.dcp-overlay-body { max-width: 900px; width: 100%; margin: 0 auto; padding: 16px; box-sizing: border-box; }

/* Assistant result verdict — the two-button "was this useful?" asked at the
   moment the answer lands. Deliberately quiet: a thin separator and muted
   buttons, so it reads as an aside to the result and never competes with the
   article links above it. */
.dcp-assist-verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border, rgba(2,35,96,.12));
}
.dcp-assist-verdict-q { font-size: .85rem; color: var(--txt2, #4a5f85); margin-inline-end: 2px; }
.dcp-assist-verdict-btn {
  font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer;
  padding: 6px 12px; border-radius: var(--r-f, 999px);
  border: 1.5px solid var(--border, rgba(2,35,96,.12));
  background: transparent; color: var(--txt2, #4a5f85);
}
.dcp-assist-verdict-btn:hover { border-color: var(--txt3, #62779a); color: var(--txt); }
.dcp-assist-verdict-done { font-size: .85rem; color: var(--txt2, #4a5f85); }

/* Assistant "thinking" view — real site hashtags drifting past while the model
   works. The round can take 20-40s on the current gateway, and three dots for
   that long reads as stuck; these are the site's own tags, so the wait shows
   the actual work instead of a fake progress bar. Deliberately quiet: dimmed,
   fixed height so nothing jumps when a line swaps. */
.dcp-assist-scan-lbl { font-size: .8rem; color: var(--txt2, #4a5f85); margin-bottom: 6px; }
.dcp-assist-scan {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 26px; margin-bottom: 10px;
}
.dcp-assist-scan-t {
  font-size: .78rem; color: var(--txt3, #62779a); opacity: .55;
  border: 1px dashed var(--border, rgba(2,35,96,.12));
  border-radius: var(--r-f, 999px); padding: 2px 9px;
  animation: dcp-scan-in .42s ease both;
}
@keyframes dcp-scan-in { from { opacity: 0; transform: translateY(3px); } to { opacity: .55; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dcp-assist-scan-t { animation: none; }
}


/* ---- shared highlight surfaces (hl-view.js) --------------------------------
   The دفترچه (/plus/highlights.html) and a کالکشن board draw the SAME object —
   a saved highlight — so they share one card, one action pill, one editor and
   one skeleton. Anything prefixed .dcp-hlib- is that shared vocabulary, not
   the library page's private styling. */

/* Skeletons: a spinner says "wait", a skeleton says "this is what is coming". */
.dcp-skel-wrap { display: flex; flex-direction: column; gap: 12px; }
.dcp-skel-card {
  background: var(--card-bg, #fff); border: 1px solid var(--card-border, rgba(2,35,96,.09));
  border-radius: var(--r-lg, 18px); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.dcp-skel-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--txt2, #4a5f85) 12%, transparent),
    color-mix(in srgb, var(--txt2, #4a5f85) 22%, transparent),
    color-mix(in srgb, var(--txt2, #4a5f85) 12%, transparent));
  background-size: 200% 100%; animation: dcp-skel 1.4s ease-in-out infinite;
}
.dcp-skel-w70 { width: 70%; } .dcp-skel-w40 { width: 40%; }
@keyframes dcp-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .dcp-skel-line { animation: none; } }

/* The filter bar sticks: on a library of hundreds you must be able to change
   the filter without scrolling back to the top to find it. */
.dcp-hlib-controls {
  display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px;
  position: sticky; top: 56px; z-index: 5; padding: 10px 0 8px;
  background: color-mix(in srgb, var(--bg, #f0f2f5) 92%, transparent);
  backdrop-filter: blur(8px);
}
.dcp-hlib-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dcp-hlib-row-tools { gap: 8px; }
.dcp-hlib-controls .dcp-input, .dcp-cl-pickfilter {
  background: var(--surface, #fff); color: var(--txt);
  border: 1px solid var(--border, rgba(2,35,96,.12)); border-radius: 10px;
  padding: 10px 12px; font: inherit;
}
.dcp-hlib-search { flex: 1 1 220px; min-width: 0; }
.dcp-hlib-select { flex: 0 1 160px; }
.dcp-hlib-count { margin: 0; margin-inline-end: auto; color: var(--txt2, #4a5f85); font-size: .85rem; }
.dcp-hlib-count b { color: var(--txt, #0a1a33); }

.dcp-hlib-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dcp-hlib-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff);
  color: var(--txt2, #4a5f85); border-radius: var(--r-f, 999px);
  padding: 4px 12px; font: inherit; font-size: .82rem; cursor: pointer;
}
.dcp-hlib-chip.is-on { border-color: var(--ac, #0b5fff); color: var(--ac, #0b5fff); font-weight: 700; }
.dcp-hlib-chip[disabled] { opacity: .45; cursor: default; }
.dcp-hlib-chipn { font-size: .74rem; opacity: .75; }

/* Colour is how a reader files things while reading, so it filters as the
   swatches themselves — the same five the workbench toolbar offers. */
.dcp-hlib-sw {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border, rgba(2,35,96,.18)) inset;
}
.dcp-hlib-sw.is-on { border-color: var(--ac, #0b5fff); transform: scale(1.08); }

/* Jump list: with dozens of articles, "which article was that in" needs an
   index, not scrolling. */
.dcp-hlib-jump {
  display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto;
  background: var(--card-bg, #fff); border: 1px solid var(--card-border, rgba(2,35,96,.09));
  border-radius: var(--r-lg, 18px); padding: 8px; margin-bottom: 14px;
  box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07));
}
.dcp-hlib-jumpitem {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: transparent; border: none; border-radius: 10px; cursor: pointer;
  padding: 8px 10px; font: inherit; font-size: .88rem; color: var(--txt, #0a1a33); text-align: start;
}
.dcp-hlib-jumpitem:hover { background: var(--dcp-chip-bg, rgba(11,95,255,.07)); }
.dcp-hlib-jumpname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcp-hlib-jumpn { flex: none; color: var(--txt2, #4a5f85); font-size: .78rem; }

.dcp-hlib-list { display: flex; flex-direction: column; gap: 14px; }
.dcp-hlib-sentinel { height: 1px; }
.dcp-hlib-group {
  background: var(--card-bg, #fff); border: 1px solid var(--card-border, rgba(2,35,96,.09));
  border-radius: var(--r-lg, 18px); padding: 14px 16px;
  box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07));
  scroll-margin-top: 140px; /* the sticky filter bar must not cover a jump target */
}
.dcp-hlib-ghead { display: flex; align-items: flex-start; gap: 10px; }
.dcp-hlib-gmeta { flex: 1 1 auto; min-width: 0; }
.dcp-hlib-gtitle { font-weight: 800; color: var(--txt) !important; }
.dcp-hlib-gsub { display: flex; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--txt2, #4a5f85); margin-top: 2px; }
.dcp-hlib-folder { text-transform: uppercase; letter-spacing: .04em; }
.dcp-hlib-toggle {
  flex: none; width: 26px; height: 26px; line-height: 22px; text-align: center;
  border-radius: 50%; border: 1px solid var(--border, rgba(2,35,96,.12));
  background: var(--surface, #fff); color: var(--txt2, #4a5f85); cursor: pointer;
}

.dcp-hlib-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
/* In the flat (timeline) view the cards ARE the list, so they carry the card
   chrome themselves. */
.dcp-hlib-list > .dcp-hlib-card {
  background: var(--card-bg, #fff); border-color: var(--card-border, rgba(2,35,96,.09));
  box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07)); padding: 14px 16px;
}
.dcp-hlib-card {
  border: 1px solid var(--border, rgba(2,35,96,.08));
  border-radius: var(--r-md, 14px); padding: 10px 12px;
  background: color-mix(in srgb, var(--surface, #fff) 60%, transparent);
}
.dcp-hlib-src { display: flex; gap: 8px; align-items: baseline; font-size: .78rem; color: var(--txt2, #4a5f85) !important; margin-bottom: 8px; }
/* The mark keeps the user's own colour (mark.dcp-hl in plus.css); here it must
   wrap over as many lines as the text needs instead of behaving like a chip. */
.dcp-hlib-body mark.dcp-hl { cursor: default; line-height: 2; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.dcp-hlib-note {
  margin-top: 8px; padding-inline-start: 10px;
  border-inline-start: 3px solid var(--ac, #0b5fff);
  color: var(--txt2, #4a5f85); font-size: .88rem; line-height: 1.9;
}
.dcp-hlib-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dcp-hlib-act {
  border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff);
  color: var(--txt2, #4a5f85) !important; border-radius: var(--r-f, 999px);
  padding: 3px 11px; font: inherit; font-size: .78rem; cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.dcp-hlib-act:hover { border-color: var(--ac, #0b5fff); color: var(--ac, #0b5fff) !important; }
.dcp-hlib-del:hover { border-color: #c0392b; color: #c0392b !important; }
.dcp-hlib-card .dcp-recent-confirm, .dcp-cl-pin .dcp-recent-confirm { margin-top: 10px; font-size: .85rem; }

/* Inline editor: note + label + colour, one save. Editing a note where you are
   reading it is the whole point — never a trip back to the article. */
.dcp-hlib-editor {
  margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px dashed var(--border, rgba(2,35,96,.18));
}
.dcp-hlib-ta {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; line-height: 1.9;
  background: var(--surface, #fff); color: var(--txt);
  border: 1px solid var(--border, rgba(2,35,96,.14)); border-radius: 10px; padding: 8px 10px;
}
.dcp-hlib-erow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dcp-hlib-esave { margin-top: 2px; }
.dcp-hlib-msg { font-size: .8rem; color: #c0392b; }

.dcp-hlib-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dcp-hlib-empty-ico { font-size: 2.2rem; opacity: .5; }

/* Board pins carry the same card content as a library card (note, label,
   actions), so the two only differ in layout, never in what they show. */
.dcp-cl-pin-src { display: flex; gap: 8px; align-items: baseline; color: var(--txt2, #4a5f85) !important; min-width: 0; }
.dcp-cl-pin-src span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcp-cl-pin-actions { padding: 0 12px 12px; margin-top: 8px; }
.dcp-cl-pin .dcp-hlib-note { margin: 0 12px; }
.dcp-cl-pickfilter { width: 100%; box-sizing: border-box; margin-bottom: 8px; }

/* ---- text/reference pins («متن خودم» / «رفرنس») ---------------------------
   A snippet pin has no band (no highlighted mark, no content-type tile) — its
   own left-border accent + kind chip are what tell it apart at a glance. */
.dcp-cl-pin-note { border-inline-start: 3px solid var(--dcp-gold); }
.dcp-cl-pin-body { padding: 14px 12px 4px; }
.dcp-cl-pin-kind {
  display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700;
  border-radius: var(--dcp-radius-pill, 999px); padding: 2px 10px; margin-bottom: 8px;
}
.dcp-cl-pin-kind-text { color: var(--dcp-gold); background: var(--dcp-gold-bg); }
.dcp-cl-pin-kind-reference { color: var(--dcp-ref); background: var(--dcp-ref-bg); }
.dcp-cl-pin-note-title { margin: 0 0 4px; font-size: .95rem; font-weight: 700; color: var(--txt, #0a1a33); }
.dcp-cl-pin-note-body { margin: 0; font-size: .92rem; line-height: 1.9; white-space: pre-wrap; }

/* ---- «افزودن پین» chooser sheet: icon + title + description rows --------- */
.dcp-cl-addopt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: start;
  background: var(--surface2, #f4f6fb); border: 1px solid var(--border, rgba(2,35,96,.12));
  border-radius: var(--dcp-radius, 14px); padding: 12px 14px; margin-bottom: 10px;
  font: inherit; color: inherit; cursor: pointer; transition: border-color .15s ease;
}
.dcp-cl-addopt:hover { border-color: var(--ac, #0b5fff); }
.dcp-cl-addopt[disabled] { opacity: .55; cursor: not-allowed; }
.dcp-cl-addopt[disabled]:hover { border-color: var(--border, rgba(2,35,96,.12)); }
.dcp-cl-addopt-ico {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; font-size: 18px;
}
.dcp-cl-addopt-ico.gold { background: var(--dcp-gold-bg); }
.dcp-cl-addopt-ico.ref { background: var(--dcp-ref-bg); }
.dcp-cl-addopt-ico.blue { background: var(--dcp-chip-bg, rgba(11,95,255,.08)); }
.dcp-cl-addopt-txt { min-width: 0; }
.dcp-cl-addopt-txt b { display: block; font-size: .92rem; }
.dcp-cl-addopt-txt small { display: block; color: var(--txt2, #4a5f85); font-size: .78rem; line-height: 1.7; }
.dcp-cl-addopt-tag {
  font-size: .62rem; font-weight: 700; color: var(--dcp-gold);
  background: var(--dcp-gold-bg); border-radius: var(--dcp-radius-pill, 999px); padding: 0 8px;
  margin-inline-start: 6px; vertical-align: 2px;
}

/* ---- «متن خودم» composer ---------------------------------------------- */
.dcp-cl-note-count { margin: 4px 2px 12px; font-size: .74rem; color: var(--txt2, #4a5f85); font-variant-numeric: tabular-nums; }
.dcp-sheet-card > .dcp-input,
.dcp-hlib-editor > .dcp-input { display: block; width: 100%; box-sizing: border-box; }

/* ---- reference pin («رفرنس») card -------------------------------------- */
.dcp-cl-pin-ref { border-inline-start: 3px solid var(--dcp-ref); }
.dcp-cl-ref-title { margin: 0 0 4px; font-size: .9rem; font-weight: 700; line-height: 1.7; color: var(--txt, #0a1a33); }
.dcp-cl-ref-en { direction: ltr; text-align: left; }
.dcp-cl-ref-meta { margin: 0 0 9px; font-size: .8rem; color: var(--txt2, #4a5f85); }
.dcp-cl-doi {
  display: inline-block; direction: ltr; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; color: var(--dcp-ref); background: var(--dcp-ref-bg);
  border: 1px solid color-mix(in srgb, var(--dcp-ref) 30%, transparent);
  border-radius: 7px; padding: 1px 8px; margin-bottom: 9px; text-decoration: none;
}
.dcp-cl-doi:hover { filter: brightness(1.1); }

/* ---- «رفرنس» composer: DOI fetch + manual fallback --------------------- */
.dcp-cl-doi-row { display: flex; gap: 8px; }
.dcp-cl-doi-row .dcp-input { flex: 1 1 auto; width: auto; }
.dcp-cl-fetch-state { margin: 4px 0 10px; font-size: .84rem; color: var(--txt2, #4a5f85); }
.dcp-cl-ref-preview {
  border: 1px solid color-mix(in srgb, var(--dcp-ref) 30%, transparent); background: var(--dcp-ref-bg);
  border-radius: var(--dcp-radius, 14px); padding: 12px 15px; margin-bottom: 10px;
}
.dcp-cl-ref-preview-ok { margin: 0 0 6px; font-size: .76rem; font-weight: 700; color: #0f7b4d; }
.dcp-cl-ref-preview .dcp-cl-ref-title, .dcp-cl-ref-preview .dcp-cl-ref-meta { margin-bottom: 0; }
.dcp-cl-ref-preview .dcp-cl-ref-meta { margin-top: 4px; }
.dcp-cl-manual-toggle {
  display: block; border: 0; background: transparent; color: var(--ac, #0b5fff);
  font-size: .8rem; padding: 2px 0; margin-bottom: 10px; text-decoration: underline;
  text-underline-offset: 4px; cursor: pointer;
}
.dcp-cl-ref-manual[hidden] { display: none; }
.dcp-cl-ref-manual > .dcp-input { display: block; width: 100%; box-sizing: border-box; }

/* ---- «خروجی» export sheet ----------------------------------------------- */
.dcp-cl-order-note {
  display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; color: var(--txt2, #4a5f85);
  background: var(--surface2, #f4f6fb); border-radius: 10px; padding: 8px 12px; margin-top: 4px;
}

/* Dashboard entry point into the library (dashboard.js recentBlock). */
.dcp-recent-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; font-size: .85rem; color: var(--txt2, #4a5f85); }

/* `hidden` must win over the display values set above. The UA sheet's
   `[hidden] { display: none }` loses to any author rule that sets `display`,
   so every one of these toggles (the jump panel, a collapsed article group, a
   toolbar that only appears once there is something to filter) silently did
   nothing until this rule existed. */
.dcp-hlib-jump[hidden], .dcp-hlib-cards[hidden], .dcp-hlib-controls[hidden],
.dcp-hlib-row[hidden], .dcp-hlib-chips[hidden], .dcp-hlib-act[hidden],
.dcp-hlib-actions[hidden], .dcp-skel-wrap[hidden] { display: none !important; }

/* ---- a board's own identity (emoji / colour / description) -----------------
   A shelf of identical generated covers is a shelf you cannot scan. All three
   are optional: a board with none of them renders exactly as it did before. */
.dcp-cl-cover-emoji { display: flex; align-items: center; justify-content: center; background: var(--dcp-chip-bg, rgba(11,95,255,.07)); }
.dcp-cl-cover-emo { font-size: 2.4rem; line-height: 1; }
.dcp-cl-board-desc {
  margin: 0 0 2px; font-size: .78rem; color: var(--txt2, #4a5f85); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dcp-cl-title-emo { margin-inline-end: 8px; }
.dcp-cl-detail-desc { margin: 4px 0 0; color: var(--txt2, #4a5f85); font-size: .9rem; line-height: 1.8; }
.dcp-cl-editbox {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
  padding: 12px; border-radius: var(--r-md, 14px);
  border: 1px solid var(--border, rgba(2,35,96,.14));
  background: color-mix(in srgb, var(--surface, #fff) 70%, transparent);
}
.dcp-cl-editbox .dcp-input, .dcp-cl-editbox .dcp-hlib-ta {
  background: var(--surface, #fff); color: var(--txt);
  border: 1px solid var(--border, rgba(2,35,96,.14)); border-radius: 10px;
  padding: 9px 12px; font: inherit;
}
.dcp-cl-editbox .dcp-hlib-erow > .dcp-input:not(.dcp-cl-emoji-input) { flex: 1 1 180px; }
.dcp-cl-emoji-input { flex: 0 0 68px; text-align: center; font-size: 1.2rem; }

/* Arrange mode: the board becomes one column (in a masonry, "up" and "down"
   mean nothing) and every pin trades its actions for ↑/↓ + its position. */
.dcp-cl-pin-grid.is-arranging { column-count: 1 !important; }
.dcp-cl-arrange { justify-content: flex-start; }
.dcp-cl-arrange-pos { font-size: .78rem; color: var(--txt2, #4a5f85); }
.dcp-hlib-act.is-on { border-color: var(--ac, #0b5fff); color: var(--ac, #0b5fff) !important; font-weight: 700; }
.dcp-hlib-act[disabled] { opacity: .4; cursor: default; }
/* Page heading + its sibling-surface link on one line (the دفترچه ↔ کالکشن‌ها
   pair; neither is in the site nav, so each is the other's way in). */
.dcp-hlib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Pricing (/plus/pricing.html)

   A plan is a <button>, not a card with a link inside: choosing a term is a
   selection, not a navigation, and only the final button leaves the page. That
   also gets keyboard behaviour and :disabled for free, which is what the
   month's capacity ceiling needs — a plan that no longer fits must be visibly
   and actually unpressable, not merely faded.
--------------------------------------------------------------------------- */
.dcp-pricing { display: flex; flex-direction: column; gap: 14px; }
.dcp-price-title { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.dcp-price-sub { margin: 0; color: var(--txt2, #4a5f85); }
.dcp-price-h2 { font-size: 1.05rem; font-weight: 800; margin: 18px 0 0; }

.dcp-plans { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

.dcp-plan {
  position: relative; font: inherit; text-align: start; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 15px; border-radius: 14px;
  border: 1px solid var(--border, rgba(2,35,96,.11));
  background: var(--surface, #fff); color: var(--txt);
  transition: border-color .17s ease, box-shadow .17s ease, transform .17s ease;
}
.dcp-plan:hover:not([disabled]) { border-color: rgba(var(--ac-rgb, 11,95,255), .45); }
.dcp-plan:focus-visible { outline: 2px solid var(--ac, #0b5fff); outline-offset: 2px; }

.dcp-plan-term { font-weight: 700; font-size: 1rem; display: flex; flex-direction: column; gap: 1px; }
.dcp-plan-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dcp-plan-save {
  font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(23,138,79,.12); color: #178a4f;
}
.dcp-plan-why { font-weight: 400; font-size: .8rem; color: var(--txt3, #62779a); }
.dcp-plan-blocked { font-weight: 600; font-size: .76rem; color: #9a6206; }
.dcp-plan-price {
  font-weight: 800; font-size: 1.02rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.dcp-plan-unit { font-size: .78rem; font-weight: 600; color: var(--txt3, #62779a); margin-inline-start: 4px; }
.dcp-plan-rate { font-size: .74rem; font-weight: 600; color: var(--txt3, #62779a); }
/* The list price a «ستون» seat-holder is NOT paying, above their real price.
   Muted and struck through — .is-blocked already means "line-through = not
   buyable", so this one is small and grey to read as "not charged" instead. */
.dcp-plan-list {
  font-size: .74rem; font-weight: 600; color: var(--txt3, #62779a);
  text-decoration: line-through; text-decoration-thickness: 1px;
}

.dcp-plan.is-selected {
  border-color: rgba(var(--ac-rgb, 11,95,255), .6);
  box-shadow: 0 0 0 1px rgba(var(--ac-rgb, 11,95,255), .3);
}
.dcp-plan.is-featured {
  background:
    linear-gradient(180deg, rgba(var(--ac-rgb, 11,95,255), .055), transparent 70%),
    var(--surface, #fff);
}
.dcp-plan.is-featured.is-selected { box-shadow: 0 0 0 1px rgba(var(--ac-rgb, 11,95,255), .3), 0 10px 26px rgba(var(--ac-rgb, 11,95,255), .16); }
.dcp-plan-tag {
  position: absolute; top: -9px; inset-inline-start: 14px;
  background: var(--ac, #0b5fff); color: #fff; font-size: .68rem; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
}
.dcp-plan.is-blocked, .dcp-plan[disabled] {
  opacity: .55; cursor: not-allowed;
  background: var(--surface2, #f4f6fb);
}
.dcp-plan.is-blocked .dcp-plan-price { text-decoration: line-through; text-decoration-thickness: 1px; }

.dcp-price-action { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-top: 4px; }
.dcp-price-action .dcp-btn { width: 100%; padding: 13px 16px; }
.dcp-price-fine { margin: 0; text-align: center; font-size: .8rem; color: var(--txt3, #62779a); }
.dcp-price-msg:empty { display: none; }
.dcp-price-msg { margin: 0; text-align: center; font-size: .86rem; color: #b3261e; }

.dcp-price-notice { border-radius: 14px; padding: 12px 13px; font-size: .88rem; border: 1px solid; }
.dcp-price-notice b { display: block; font-size: .93rem; margin-bottom: 2px; }
.dcp-price-notice p { margin: 4px 0 0; }
/* The one notice that asks for something back (sign in, so your own discounts
   can be applied) rather than only reporting. Sized down and left in the flow:
   it sits inside a notice, not beside the pay button, and must not compete
   with it. */
.dcp-price-login { margin-top: 9px; font-size: .82rem; padding: 7px 14px; }
.dcp-price-notice.is-warn { background: rgba(154,98,6,.10); border-color: rgba(154,98,6,.26); }
.dcp-price-notice.is-warn b { color: #9a6206; }
.dcp-price-notice.is-ok { background: rgba(15,122,77,.10); border-color: rgba(15,122,77,.26); }
.dcp-price-notice.is-ok b { color: #0f7a4d; }
.dcp-price-notice.is-off { background: rgba(107,124,150,.10); border-color: var(--border, rgba(2,35,96,.11)); }
.dcp-price-notice.is-off b { color: var(--txt2, #4a5f85); }

.dcp-price-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dcp-price-list li { display: flex; flex-direction: column; gap: 1px; }
.dcp-price-list strong { font-size: .96rem; }
.dcp-price-list span { font-size: .86rem; color: var(--txt2, #4a5f85); }

/* کد معرف — between the plan grid and the buy button (decision 2.10). No new
   input chrome: reuses .dcp-field-row/.dcp-input from :324-325 and
   .dcp-input-code from plus.css. */
.dcp-referral { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.dcp-referral-msg:empty { display: none; }
.dcp-referral-msg.is-ok-text { color: #0f7a4d; text-align: start; }
.dcp-referral-msg.is-err-text { color: #b3261e; text-align: start; }

@media (prefers-color-scheme: dark) {
  .dcp-plan-blocked, .dcp-price-notice.is-warn b { color: #e8b45f; }
  .dcp-plan-save { background: rgba(95,211,155,.14); color: #5fd39b; }
  .dcp-price-notice.is-warn { background: rgba(232,180,95,.11); border-color: rgba(232,180,95,.28); }
  .dcp-price-notice.is-ok { background: rgba(95,211,155,.11); border-color: rgba(95,211,155,.28); }
  .dcp-price-notice.is-ok b { color: #5fd39b; }
  .dcp-price-msg { color: #f28079; }
  .dcp-referral-msg.is-ok-text { color: #5fd39b; }
  .dcp-referral-msg.is-err-text { color: #f28079; }
}

/* ---------------------------------------------------------------------------
   Payment result (/plus/pay-result.html)
   Three verdicts share one shape. The "warn" one is not a lesser success —
   it is the state where we genuinely do not know yet, and it has to read as
   calm rather than as an error.
--------------------------------------------------------------------------- */
.dcp-pay { display: flex; flex-direction: column; gap: 16px; max-width: 460px; margin: 10px auto 0; }
.dcp-pay-verdict { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.dcp-pay-glyph {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.7rem; font-weight: 700; border: 1.5px solid;
}
.is-ok   .dcp-pay-glyph { background: rgba(15,122,77,.10);  border-color: rgba(15,122,77,.26);  color: #0f7a4d; }
.is-warn .dcp-pay-glyph { background: rgba(154,98,6,.10);   border-color: rgba(154,98,6,.26);   color: #9a6206; }
.is-stop .dcp-pay-glyph { background: rgba(179,38,30,.09);  border-color: rgba(179,38,30,.24);  color: #b3261e; }
.dcp-pay-title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.dcp-pay-sub { margin: 0; color: var(--txt2, #4a5f85); max-width: 34ch; }

.dcp-pay-receipt {
  border: 1px dashed var(--border, rgba(2,35,96,.14)); border-radius: 14px;
  background: var(--surface2, #f4f6fb); padding: 12px 14px; font-size: .88rem;
}
.dcp-pay-receipt dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.dcp-pay-receipt dt { color: var(--txt3, #62779a); }
.dcp-pay-receipt dd { margin: 0; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-all; }

.dcp-pay-note {
  border: 1px solid rgba(154,98,6,.26); background: rgba(154,98,6,.10);
  border-radius: 14px; padding: 11px 13px; font-size: .87rem;
}
.dcp-pay-note p { margin: 0; }
.dcp-pay-actions { display: flex; flex-direction: column; gap: 8px; }
.dcp-pay-actions .dcp-btn { width: 100%; text-align: center; padding: 13px 16px; }
.dcp-pay-fine { margin: 0; text-align: center; font-size: .79rem; color: var(--txt3, #62779a); }

@media (prefers-color-scheme: dark) {
  .is-ok   .dcp-pay-glyph { background: rgba(95,211,155,.11); border-color: rgba(95,211,155,.28); color: #5fd39b; }
  .is-warn .dcp-pay-glyph { background: rgba(232,180,95,.11); border-color: rgba(232,180,95,.28); color: #e8b45f; }
  .is-stop .dcp-pay-glyph { background: rgba(242,128,121,.11); border-color: rgba(242,128,121,.26); color: #f28079; }
  .dcp-pay-note { border-color: rgba(232,180,95,.28); background: rgba(232,180,95,.11); }
}

/* Profile: the subscription line + its CTA, under the plan chips. */
.dcp-plan-block { display: flex; flex-direction: column; gap: 8px; }
.dcp-plan-until { margin: 0; font-size: .88rem; color: var(--txt2, #4a5f85); }
.dcp-plan-block > .dcp-btn { align-self: flex-start; }

/* A disabled action must LOOK refused. Without this, .dcp-btn-primary keeps its
   full brand blue and its shadow while being unclickable — the one styling bug
   that actively invites the click it is going to reject. */
.dcp-btn[disabled], .dcp-btn:disabled {
  cursor: not-allowed; box-shadow: none; transform: none;
  background: var(--surface2, #f4f6fb);
  color: var(--txt3, #62779a);
  border-color: var(--border, rgba(2,35,96,.11));
}

/* ---------------------------------------------------------------------------
   Renewal banner + the lapsed-reader line on a premium gate.

   Three tones, and the quiet one is the important design decision: a warning
   seven days out is information, not an emergency, and dressing it in red
   teaches people to ignore the one that arrives on the last day.
--------------------------------------------------------------------------- */
.dcp-renew {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px 16px; border-radius: 16px; margin-bottom: 14px;
  border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface2, #f4f6fb);
}
.dcp-renew-title { margin: 0; font-size: 1rem; font-weight: 800; }
.dcp-renew-body { margin: 0; font-size: .88rem; color: var(--txt2, #4a5f85); }
.dcp-renew .dcp-btn { margin-top: 2px; }

.dcp-renew-soon { background: var(--surface2, #f4f6fb); }
.dcp-renew-urgent { background: rgba(154,98,6,.10); border-color: rgba(154,98,6,.28); }
.dcp-renew-urgent .dcp-renew-title { color: #9a6206; }
/* Lapsed is deliberately NOT alarming: the message is that everything is safe. */
.dcp-renew-lapsed { background: rgba(var(--ac-rgb, 11,95,255), .06); border-color: rgba(var(--ac-rgb, 11,95,255), .22); }

.dcp-gate-lapsed {
  margin: 0 0 2px; padding: 10px 13px; border-radius: 12px; max-width: 46ch;
  background: rgba(var(--ac-rgb, 11,95,255), .06);
  border: 1px solid rgba(var(--ac-rgb, 11,95,255), .22);
  font-size: .88rem; color: var(--txt, #0a1a33);
}

@media (prefers-color-scheme: dark) {
  .dcp-renew-urgent { background: rgba(232,180,95,.11); border-color: rgba(232,180,95,.28); }
  .dcp-renew-urgent .dcp-renew-title { color: #e8b45f; }
}
/* Locked feature card: the lock chip and its quiet way out, side by side. */
.dcp-locked-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dcp-locked-link { display: inline-block; text-decoration: none; }
.dcp-locked-card .dcp-btn { padding: 6px 12px; font-size: .84rem; }

/* ---------------------------------------------------------------------------
   Gift card (paying from outside Iran).
   The reference tag is the one thing on this page somebody has to retype into
   another site, so it gets monospace, real size, and room to be selected.
--------------------------------------------------------------------------- */
.dcp-gift {
  margin-top: 20px; padding: 16px; border-radius: 16px;
  border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface2, #f4f6fb);
  display: flex; flex-direction: column; gap: 10px;
}
.dcp-gift .dcp-price-h2 { margin: 0; padding: 0; }
.dcp-gift-lead { margin: 0; font-size: .92rem; }
.dcp-gift-warn {
  margin: 0; font-size: .85rem; font-weight: 600; color: #9a6206;
  background: rgba(154,98,6,.10); border: 1px solid rgba(154,98,6,.26);
  border-radius: 10px; padding: 9px 11px;
}
.dcp-gift-ref {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface, #fff); border: 1px dashed rgba(var(--ac-rgb, 11,95,255), .5);
  border-radius: 12px; padding: 12px 14px;
}
.dcp-gift-ref-label { font-size: .82rem; color: var(--txt3, #62779a); }
.dcp-gift-ref-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr;
  font-size: 1.15rem; font-weight: 800; letter-spacing: .06em;
  color: var(--ac, #0b5fff); user-select: all;
}
.dcp-gift-steps { margin: 0; padding-inline-start: 1.15rem; display: flex; flex-direction: column; gap: 9px; }
.dcp-gift-steps li { font-size: .9rem; }
.dcp-gift-steps strong { display: block; }
.dcp-gift-steps span { color: var(--txt2, #4a5f85); font-size: .85rem; word-break: break-word; }
@media (prefers-color-scheme: dark) {
  .dcp-gift-warn { color: #e8b45f; background: rgba(232,180,95,.11); border-color: rgba(232,180,95,.28); }
}

/* The "I'm outside Iran" entry: a full-width row under the rial plans. It is
   deliberately not a small link — a reader who cannot use the gateway above has
   to be able to find this without knowing the words "gift card". */
.dcp-gift-toggle {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; box-sizing: border-box; margin-top: 14px; cursor: pointer;
  font: inherit; text-align: start; padding: 13px 15px; border-radius: 14px;
  background: var(--surface2, #f4f6fb); color: var(--txt);
  border: 1px dashed var(--border, rgba(2,35,96,.22));
}
.dcp-gift-toggle:hover { border-color: rgba(var(--ac-rgb, 11,95,255), .5); }
.dcp-gift-toggle:focus-visible { outline: 2px solid var(--ac, #0b5fff); outline-offset: 2px; }
.dcp-gift-toggle-main { font-weight: 700; font-size: .96rem; }
.dcp-gift-toggle-sub { font-size: .84rem; color: var(--txt2, #4a5f85); }

/* The gift plan wears the plan card, so the term and the price read the same
   way as the rial ones — but dashed, because it is paid for differently. */
.dcp-plan.is-gift {
  cursor: default; border-style: dashed;
  border-color: rgba(var(--ac-rgb, 11,95,255), .45);
  background: var(--surface, #fff);
}

/* ---------------------------------------------------------------------------
   Bank transfer (واریز به شبا) — reuses the gift-card rail's card look
   (.dcp-gift), plus its own IBAN row. The IBAN is a Latin string inside an
   RTL page: without dir=ltr the digit groups render out of order and a reader
   mistypes them by hand — see .dentcast/support-payment-handoff.md §3.
--------------------------------------------------------------------------- */
.dcp-bank-plan { font-weight: 700; font-size: .96rem; }
.dcp-bank-iban-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--surface, #fff); border: 1px dashed rgba(var(--ac-rgb, 11,95,255), .5);
  border-radius: 12px; padding: 12px 14px;
}
.dcp-bank-iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  unicode-bidi: isolate; font-size: 1rem; font-weight: 800; letter-spacing: .03em;
  color: var(--ac, #0b5fff); user-select: all;
}

/* ---------------------------------------------------------------------------
   The support Telegram handle, wherever it appears (both rails and the support
   page). Written out as TEXT rather than hidden behind a word, because a t.me
   link is the one door on these pages that routinely fails to open for the
   audience it is for — and the handle is what they can still type into
   Telegram's own search. `user-select: all` so one tap takes the whole thing;
   isolated for the same reason the IBAN is (a Latin run in an RTL line puts
   its «@» on the wrong end otherwise).
--------------------------------------------------------------------------- */
.dcp-tg-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  direction: ltr; unicode-bidi: isolate; user-select: all;
  font-weight: 800; white-space: nowrap;
}
.dcp-tg-fallback { margin: 6px 0 0; font-size: .82rem; }

/* ---------------------------------------------------------------------------
   Support page (/plus/support.html) — kind chips, the photo checkbox, the
   success panel and the per-thread code row.
--------------------------------------------------------------------------- */
.dcp-support-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 400px) { .dcp-support-kinds { grid-template-columns: 1fr; } }
.dcp-support-kind { width: 100%; box-sizing: border-box; text-align: start; }
/* The route chip is a door, not a choice — dashed border + a trailing › say
   so before it is ever pressed, so it never reads as a fourth selectable kind. */
.dcp-support-kind-route {
  border-style: dashed; text-decoration: none; color: var(--dcp-ink, inherit);
}
.dcp-support-photo-label {
  display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer;
}
.dcp-support-photo-note { margin: -4px 0 0; }
.dcp-support-success code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; font-weight: 800; }
/* Wraps: the row carries four things on a phone (label, code, کپی, and the
   Telegram door), and an unwrapped flex row pushes the last of them off the
   screen — which here is the one action the row exists to offer. */
.dcp-support-code-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem;
  background: var(--dcp-surface, #f4f6fb); border: 1px dashed rgba(var(--ac-rgb, 11,95,255), .4);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 8px;
}
.dcp-support-code-row code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; font-weight: 800; }

/* ===== profile: «افتخارات» ================================================
   Two metal scales meet in this one section — the league's seven dental
   materials (the medals) and the badges' bronze/silver/gold. They are kept
   apart by SHAPE, not by colour: a medal is the league's own tooth-shield
   (reusing .dcp-tier-t1..t7 from plus.css verbatim, so a medal can never drift
   from the tier badge it is meant to be), and a badge is a disc. The word
   «طلا» is written only in the medal row; on the wall a level is the ring
   colour and nothing else.

   Dark vs lit is one class on the disc, deliberately: every badge is the same
   monoline SVG in both states, so there is no second asset that could go stale
   and no way for an unearned badge to look like a different object. */
.dcp-ach-tally {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .84rem; font-weight: 700; color: var(--txt2, #4a5f85); margin: 2px 0 14px;
}
.dcp-ach-tally b { color: var(--txt, #0a1a33); font-size: .95rem; }
.dcp-ach-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border, rgba(2,35,96,.12)); }
.dcp-ach-metal { display: inline-flex; align-items: center; gap: 4px; }
.dcp-ach-pip { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dcp-ach-pip.is-b { background: linear-gradient(155deg, #e8c9a6, #b97a43); }
.dcp-ach-pip.is-s { background: linear-gradient(155deg, #dfe5ec, #8e9aa8); }
.dcp-ach-pip.is-g { background: linear-gradient(155deg, #f3dea1, #c99a2e); }

/* ---- medal row ---- */
.dcp-md-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;
  padding: 14px; border-radius: var(--r-md, 14px);
  background: var(--surface2, #f4f6fb); border: 1px solid var(--border2, rgba(2,35,96,.06));
}
.dcp-md {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: none; border: 0; padding: 4px; font: inherit; color: inherit; cursor: pointer;
}
.dcp-md-shield {
  position: relative; display: grid; place-items: center; width: 56px; height: 62px; color: #20303f;
  clip-path: polygon(50% 0, 100% 20%, 100% 64%, 50% 100%, 0 64%, 0 20%);
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .28)); transition: transform var(--tr, .17s);
}
.dcp-md-shield::before {
  content: ""; position: absolute; inset: 0; clip-path: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
}
.dcp-md-shield::after {
  content: ""; position: absolute; inset: 0; clip-path: inherit;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 0 3px rgba(0,0,0,.06);
}
.dcp-md-shield.is-dark { color: #f4f8ff; }
.dcp-md-shield.is-off {
  background: var(--surface3, #eaecf5); filter: none; opacity: .5; color: var(--txt3, #62779a);
}
.dcp-md-shield.is-off::before, .dcp-md-shield.is-off::after { opacity: .35; }
.dcp-md-ico { position: relative; z-index: 1; display: block; }
.dcp-md-ico svg { width: 26px; height: 26px; display: block; }
.dcp-md:hover .dcp-md-shield:not(.is-off) { transform: translateY(-2px); }
.dcp-md:focus-visible { outline: 2px solid var(--ac, #0b5fff); outline-offset: 2px; border-radius: 12px; }
.dcp-md-name { font-size: .84rem; font-weight: 800; line-height: 1.4; }
.dcp-md-name.is-off { color: var(--txt3, #62779a); font-weight: 700; }
.dcp-md-hint { font-size: .72rem; color: var(--txt3, #62779a); line-height: 1.6; max-width: 21ch; }

/* ---- badge wall ---- */
.dcp-bg-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 2px; }
@media (max-width: 380px) { .dcp-bg-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .dcp-bg-wall { grid-template-columns: repeat(5, 1fr); } }
.dcp-bg-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: 0; padding: 8px 2px 10px; border-radius: 12px;
  font: inherit; color: inherit; cursor: pointer; transition: background var(--tr, .17s);
}
.dcp-bg-tile:hover { background: var(--surface2, #f4f6fb); }
.dcp-bg-tile:focus-visible { outline: 2px solid var(--ac, #0b5fff); outline-offset: 2px; }
.dcp-bg-disc {
  position: relative; display: grid; place-items: center; border-radius: 50%;
  border: 2.5px solid var(--border, rgba(2,35,96,.12)); background: var(--surface2, #f4f6fb);
  transition: border-color var(--tr, .17s);
}
.dcp-bg-disc.is-sm { width: 56px; height: 56px; }
.dcp-bg-disc.is-md { width: 64px; height: 64px; }
.dcp-bg-ico { display: block; }
.dcp-bg-disc.is-sm .dcp-bg-ico svg { width: 25px; height: 25px; display: block; }
.dcp-bg-disc.is-md .dcp-bg-ico svg { width: 29px; height: 29px; display: block; }
.dcp-bg-disc.is-off { color: var(--txt3, #62779a); opacity: .42; border-style: dashed; }
.dcp-bg-disc.is-on { color: var(--txt, #0a1a33); }
.dcp-bg-disc.is-on.is-bronze {
  border-color: #b97a43;
  background: radial-gradient(circle at 32% 26%, rgba(185,122,67,.22), transparent 70%), var(--card-bg, #fff);
}
.dcp-bg-disc.is-on.is-silver {
  border-color: #8e9aa8;
  background: radial-gradient(circle at 32% 26%, rgba(142,154,168,.26), transparent 70%), var(--card-bg, #fff);
}
.dcp-bg-disc.is-on.is-gold {
  border-color: #c99a2e;
  background: radial-gradient(circle at 32% 26%, rgba(201,154,46,.26), transparent 70%), var(--card-bg, #fff);
  box-shadow: 0 0 0 4px rgba(201,154,46,.12);
}
/* A one-shot badge has no metal to show, so it wears the accent — earned, but
   plainly not part of the bronze/silver/gold ladder. */
.dcp-bg-disc.is-on.is-plain {
  border-color: var(--ac, #0b5fff);
  background: radial-gradient(circle at 32% 26%, rgba(var(--ac-rgb, 11,95,255), .16), transparent 70%), var(--card-bg, #fff);
}
.dcp-bg-disc.is-mystery {
  color: var(--txt3, #62779a); opacity: .5; border-style: dashed;
  font-size: 1.2rem; font-weight: 800;
}
.dcp-bg-disc.is-mystery.is-md { font-size: 1.5rem; }
.dcp-bg-name {
  font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.35;
  color: var(--txt, #0a1a33);
}
.dcp-bg-name.is-off { color: var(--txt3, #62779a); font-weight: 600; }
.dcp-bg-bar { width: 38px; height: 3px; border-radius: 2px; background: var(--border, rgba(2,35,96,.12)); overflow: hidden; }
.dcp-bg-bar i { display: block; height: 100%; background: var(--ac, #0b5fff); border-radius: 2px; }
.dcp-bg-bar-spacer { height: 3px; }

/* ---- the sheet a badge or a medal opens ---- */
.dcp-ach-sheet-hd { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.dcp-ach-grp { font-size: .74rem; color: var(--txt3, #62779a); font-weight: 700; }
.dcp-ach-lead { font-size: .95rem; line-height: 1.85; margin: 0; }
.dcp-ach-lead.is-locked { color: var(--txt2, #4a5f85); }
.dcp-ach-detail { font-size: .86rem; line-height: 1.85; color: var(--txt2, #4a5f85); margin: 10px 0 0; }
.dcp-ach-lv-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.dcp-ach-lv {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px;
  border-radius: var(--r-md, 14px); border: 1px solid var(--border2, rgba(2,35,96,.06));
  background: var(--surface2, #f4f6fb);
}
.dcp-ach-lv.is-done { border-color: var(--border, rgba(2,35,96,.12)); }
.dcp-ach-lv.is-next { border-color: var(--ac, #0b5fff); background: rgba(var(--ac-rgb, 11,95,255), .06); }
.dcp-ach-lv .dcp-ach-pip { width: 14px; height: 14px; margin-top: 4px; border: 1.5px solid var(--border, rgba(2,35,96,.12)); }
.dcp-ach-lv.is-pending .dcp-ach-pip { background: none; }
.dcp-ach-lv-txt { font-size: .85rem; line-height: 1.7; flex: 1; }
.dcp-ach-lv.is-pending .dcp-ach-lv-txt { color: var(--txt3, #62779a); }
.dcp-ach-lv-need { font-size: .74rem; color: var(--txt3, #62779a); font-weight: 700; white-space: nowrap; margin-top: 3px; }
.dcp-ach-lv-done { color: #1a9d5a; font-weight: 800; font-size: .8rem; white-space: nowrap; margin-top: 3px; }
.dcp-ach-prog { margin-top: 16px; }
.dcp-ach-prog-lbl {
  display: flex; justify-content: space-between; font-size: .78rem;
  color: var(--txt2, #4a5f85); font-weight: 700; margin-bottom: 6px;
}
.dcp-ach-prog-bar { height: 7px; border-radius: 4px; background: var(--surface3, #eaecf5); overflow: hidden; }
.dcp-ach-prog-bar i { display: block; height: 100%; background: var(--ac, #0b5fff); border-radius: 4px; }
.dcp-ach-close { margin-top: 20px; width: 100%; }

/* The metals are literal colours, not tokens, so they need their own dark
   values — the light bronze/silver/gold sit far too dark on #1e2c3a to read as
   metal at all. Keyed on [data-theme="dark"] rather than prefers-color-scheme
   because that is what dc-nav.js's toggle actually stamps on <html>: a reader
   on a light OS who switches the site to dark gets the dark tokens from
   dc-theme.css, and these rings have to follow them. */
[data-theme="dark"] .dcp-ach-pip.is-b { background: linear-gradient(155deg, #7a5330, #d0925a); }
[data-theme="dark"] .dcp-ach-pip.is-s { background: linear-gradient(155deg, #5b6672, #aab6c4); }
[data-theme="dark"] .dcp-ach-pip.is-g { background: linear-gradient(155deg, #7d6320, #e3b849); }
[data-theme="dark"] .dcp-bg-disc.is-on.is-bronze {
  border-color: #d0925a;
  background: radial-gradient(circle at 32% 26%, rgba(208,146,90,.22), transparent 70%), var(--card-bg, #1e2c3a);
}
[data-theme="dark"] .dcp-bg-disc.is-on.is-silver {
  border-color: #aab6c4;
  background: radial-gradient(circle at 32% 26%, rgba(170,182,196,.24), transparent 70%), var(--card-bg, #1e2c3a);
}
[data-theme="dark"] .dcp-bg-disc.is-on.is-gold {
  border-color: #e3b849;
  background: radial-gradient(circle at 32% 26%, rgba(227,184,73,.24), transparent 70%), var(--card-bg, #1e2c3a);
  box-shadow: 0 0 0 4px rgba(227,184,73,.14);
}
[data-theme="dark"] .dcp-ach-lv-done { color: #4bcb8b; }
/* The tier gradients are painted for a light ground; on dark they glare. A
   touch less brightness keeps the shield reading as the same object as the one
   on the league card without lighting up the whole section. */
[data-theme="dark"] .dcp-md-shield:not(.is-off) { filter: drop-shadow(0 4px 9px rgba(0,0,0,.45)) brightness(.94); }

/* ---- the money layer: one-time discount credits --------------------------
   Three additions to the wall, all reading from GET /achievements' discount
   data: the strip above the medals (what the next purchase is worth), the
   value tag on a disc (what this badge still holds), and the per-level chip
   in the sheet. All of them say a PERCENT and never a metal's name — a level
   stays a ring colour, not a word. Green marks money still spendable, the
   same green ✓ already means "done" in the sheet. */
.dcp-disc {
  border: 1px solid var(--border, rgba(2,35,96,.10)); border-radius: var(--r-md, 14px);
  background: var(--surface2, #f4f6fb); padding: 13px 14px; margin-bottom: 16px;
}
.dcp-disc-top { display: flex; align-items: center; gap: 13px; }
.dcp-disc-pct {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; border: 2.5px solid var(--ac, #0b5fff);
  background: radial-gradient(circle at 32% 26%, rgba(var(--ac-rgb, 11,95,255), .16), transparent 70%), var(--card-bg, #fff);
  font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.dcp-disc-pct.is-big {
  border-color: #c99a2e; box-shadow: 0 0 0 4px rgba(201,154,46,.12);
  background: radial-gradient(circle at 32% 26%, rgba(201,154,46,.26), transparent 70%), var(--card-bg, #fff);
}
.dcp-disc-t { min-width: 0; }
.dcp-disc-t h3 { margin: 0 0 2px; font-size: .93rem; font-weight: 800; }
.dcp-disc-t p { margin: 0; font-size: .79rem; color: var(--txt2, #4a5f85); line-height: 1.8; }
.dcp-disc-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
.dcp-disc-chip {
  display: inline-flex; align-items: center; font-size: .75rem; font-weight: 800;
  padding: 4px 11px; border-radius: 999px; font-variant-numeric: tabular-nums;
  background: var(--card-bg, #fff); border: 1px solid var(--border, rgba(2,35,96,.10));
  color: var(--txt2, #4a5f85);
}
.dcp-disc-op { font-size: .8rem; font-weight: 800; color: var(--txt3, #62779a); }
/* The itemized position — one row per credit (a badge, a founder grant, a
   کد معرف), named. Reuses .dcp-ach-lv-val for the percent pill so a spent
   credit reads exactly as it does on the badge wall's own level chips. */
.dcp-disc-items {
  display: flex; flex-direction: column; gap: 6px; margin-top: 11px;
}
.dcp-disc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-sm, 10px);
  background: var(--card-bg, #fff); border: 1px solid var(--border, rgba(2,35,96,.10));
}
.dcp-disc-item-label { font-size: .8rem; font-weight: 700; color: var(--txt2, #4a5f85); min-width: 0; }
/* The position: unspent / spent / what the next purchase takes. Three equal
   columns rather than prose, because the reader is comparing them. */
.dcp-disc-ledger {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px;
}
.dcp-disc-ledger > div {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px; border-radius: var(--r-sm, 10px);
  background: var(--card-bg, #fff); border: 1px solid var(--border, rgba(2,35,96,.10));
}
.dcp-disc-ledger b { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dcp-disc-ledger span { font-size: .68rem; color: var(--txt3, #62779a); text-align: center; }
.dcp-disc-foot { margin: 9px 2px 0; font-size: .72rem; color: var(--txt3, #62779a); line-height: 1.8; }
.dcp-disc-link {
  display: inline-block; margin-top: 6px; font-size: .78rem; font-weight: 800;
  color: var(--ac, #0b5fff); text-decoration: none;
}
.dcp-disc-link:hover { text-decoration: underline; }

.dcp-bg-val {
  position: absolute; bottom: -5px; inset-inline-end: -8px;
  font-size: .6rem; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 999px;
  background: var(--card-bg, #fff); border: 1.5px solid #1a9d5a; color: #1a9d5a;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dcp-bg-val.is-spent { border-color: var(--border, rgba(2,35,96,.12)); color: var(--txt3, #62779a); }

.dcp-ach-lv-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; margin-top: 3px;
}
.dcp-ach-lv-side .dcp-ach-lv-done, .dcp-ach-lv-side .dcp-ach-lv-need { margin-top: 0; }
.dcp-ach-lv-val {
  font-size: .69rem; font-weight: 800; white-space: nowrap; padding: 2.5px 9px; border-radius: 999px;
  border: 1.5px solid #1a9d5a; color: #1a9d5a; background: var(--card-bg, #fff);
  font-variant-numeric: tabular-nums;
}
.dcp-ach-lv-val.is-spent { border-color: var(--border, rgba(2,35,96,.12)); color: var(--txt3, #62779a); }
.dcp-ach-lv-val.is-future { border-style: dashed; border-color: var(--border, rgba(2,35,96,.12)); color: var(--txt3, #62779a); }

.dcp-cel-val {
  display: inline-flex; align-items: center; margin-top: 12px;
  font-size: .8rem; font-weight: 800; color: #1a9d5a;
  border: 1.5px solid #1a9d5a; border-radius: 999px; padding: 6px 15px;
  background: var(--card-bg, #fff);
}

/* Same dark-ground correction the ✓ already gets: the light green sits too
   dark on #1e2c3a to read as "spendable". */
[data-theme="dark"] .dcp-bg-val,
[data-theme="dark"] .dcp-ach-lv-val,
[data-theme="dark"] .dcp-cel-val { border-color: #4bcb8b; color: #4bcb8b; }
[data-theme="dark"] .dcp-bg-val.is-spent,
[data-theme="dark"] .dcp-ach-lv-val.is-spent,
[data-theme="dark"] .dcp-ach-lv-val.is-future {
  border-color: var(--border, rgba(255,255,255,.08)); color: var(--txt3, #6f8fb0);
}
[data-theme="dark"] .dcp-disc-pct.is-big {
  border-color: #e3b849; box-shadow: 0 0 0 4px rgba(227,184,73,.14);
  background: radial-gradient(circle at 32% 26%, rgba(227,184,73,.24), transparent 70%), var(--card-bg, #1e2c3a);
}

/* ===========================================================================
   اطلاعیه — the in-app inbox (plus/js/notices.js), and the badge celebration
   that shares its vocabulary.

   A notice row is a CARD, not a link. Most of these have nowhere useful to go
   (a streak nudge, a league result) and the ones that do say so with one small
   action — the same rule the highlight library and the collection boards
   already follow, so a saved object looks like the same kind of object
   everywhere in Plus.
   =========================================================================== */
.dcp-nt-list { display: flex; flex-direction: column; gap: 10px; }
.dcp-nt {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 11px;
  padding: 12px 13px; border-radius: var(--r-md, 14px);
  border: 1px solid var(--border2, rgba(2,35,96,.06));
  background: var(--card-bg, #fff); overflow: hidden;
}
/* Unread is a tinted ground plus a rail, not a bold title: the title is the
   message, and bolding it would make the same sentence look like two different
   sentences before and after the watermark moves. */
.dcp-nt.is-unread { background: rgba(var(--ac-rgb, 11,95,255), .05); border-color: var(--border, rgba(2,35,96,.12)); cursor: pointer; }
.dcp-nt.is-unread::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px; background: var(--ac, #0b5fff);
}
.dcp-nt-ico {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface2, #f4f6fb); border: 1px solid var(--border2, rgba(2,35,96,.06));
  font-size: 1rem; line-height: 1;
}
.dcp-nt-body { min-width: 0; }
.dcp-nt-title { margin: 0 0 3px; font-size: .93rem; font-weight: 700; line-height: 1.6; }
/* pre-line, because a founder broadcast is WRITTEN with its line breaks — a
   list of two new features collapses into one grey paragraph without it, and
   the body is set as textContent so there is no markup to carry the shape. The
   generated notices have no newlines at all, so nothing else changes. */
.dcp-nt-text {
  margin: 0; font-size: .85rem; line-height: 1.8; color: var(--txt2, #4a5f85);
  white-space: pre-line;
}
.dcp-nt-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 6px; font-size: .74rem; color: var(--txt3, #62779a);
}
.dcp-nt-kind {
  padding: 1px 7px; border-radius: 6px; font-weight: 700;
  background: var(--surface2, #f4f6fb); border: 1px solid var(--border2, rgba(2,35,96,.06));
}
.dcp-nt-go { color: var(--ac, #0b5fff); font-weight: 700; text-decoration: none; }
.dcp-nt-go:hover { text-decoration: underline; }

.dcp-nt-empty { padding: 34px 16px; text-align: center; }
.dcp-nt-empty-h { margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.dcp-nt-empty-p { margin: 0; font-size: .87rem; line-height: 1.9; color: var(--txt2, #4a5f85); }

/* ---- «نشانِ تازه»: the card that finally says a badge lit up ---- */
.dcp-cel-hd { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.dcp-cel-eyebrow {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  color: var(--ac, #0b5fff); margin-bottom: 2px;
}
.dcp-cel-why { margin: 0; font-size: .95rem; line-height: 1.9; }
.dcp-cel-count { margin-top: 10px; font-size: .76rem; font-weight: 700; color: var(--txt3, #62779a); }
.dcp-cel-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.dcp-cel-actions .dcp-btn { flex: 1 1 auto; text-align: center; text-decoration: none; }
/* The disc arrives at its metal rather than simply being there — one short
   settle, and nothing at all for a reader who asked for less motion. */
@keyframes dcp-cel-pop { 0% { transform: scale(.72); opacity: 0; } 62% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.dcp-cel-hd .dcp-bg-disc, .dcp-cel-hd .dcp-md-shield { animation: dcp-cel-pop .34s cubic-bezier(.34,1.4,.64,1) both; }
@media (prefers-reduced-motion: reduce) {
  .dcp-cel-hd .dcp-bg-disc, .dcp-cel-hd .dcp-md-shield { animation: none; }
}

[data-theme="dark"] .dcp-nt.is-unread { background: rgba(var(--ac-rgb, 91,156,246), .10); }

/* =====================================================================
   EXAMINE FLAT PASS (2026-08-11) — sync پیشخوان / پروفایل / all /plus
   pages and the header overlays with the flat homepage language, the
   same way the landings were synced: at the TOKEN level, not rule by
   rule. Every dcp surface already reads --card-sh / --r-lg / --bg, so
   re-scoping those four tokens flattens every card at once: no shadows,
   tighter radii, white ground in light mode. Deliberate identities are
   untouched — the league/badge metals, selection rings and focus
   feedback all use their own literals, not these tokens.
   ===================================================================== */
body.dcp-page,
.dcp-overlay {
  --card-sh: none;
  --card-sh2: none;
  --r-lg: 14px;
  --r-xl: 16px;
}
html:not([data-theme="dark"]) body.dcp-page,
html:not([data-theme="dark"]) .dcp-overlay {
  --bg: #ffffff;
}