/* Karun portal — brand tokens from the Phase 1 design system; Vazirmatn self-hosted; logical properties only. */
@font-face { font-family: "Vazirmatn"; src: url("/static/fonts/Vazirmatn.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* Theme colours (overridable from admin → ظاهر). Everything else is derived with color-mix(). */
  color-scheme: light;
  --color-primary: #003366; --color-accent: #F2A516; --color-bg: var(--theme-bg, #F3F5F9); --color-text: var(--theme-text, #1F2937);
  /* --color-ink: the primary colour when used as text/links (lightened in dark mode); --mix-white: the tint base for subtle backgrounds. */
  --color-ink: var(--color-primary); --ink-strong: var(--brand-navy-900); --mix-white: white;
  --color-danger-ink: var(--color-danger); --color-success-ink: var(--color-success); --color-warning-ink: var(--color-warning); --color-info-ink: var(--color-info);
  --greet-from: #00264D; --greet-to: #0C4A8A;
  --brand-navy-900: color-mix(in srgb, var(--color-primary) 78%, black); --brand-navy-700: var(--color-primary);
  --brand-navy-500: color-mix(in srgb, var(--color-primary) 62%, white); --brand-navy-100: color-mix(in srgb, var(--color-primary) 11%, var(--mix-white));
  --brand-amber-500: var(--color-accent); --brand-amber-100: color-mix(in srgb, var(--color-accent) 20%, var(--mix-white)); --brand-lime-400: #C5DE3A;
  --neutral-0: #FFFFFF; --neutral-50: #F7F8FA; --neutral-100: #F0F2F6; --neutral-200: #E3E6EC; --neutral-500: #6B7280; --neutral-800: #1F2937;
  --color-surface: var(--neutral-0); --color-text-muted: var(--neutral-500);
  --color-border: var(--neutral-200); --color-on-primary: #FFFFFF;
  --color-on-accent: var(--brand-navy-900);
  --color-success: #1E7F4F; --color-warning: #B45309; --color-danger: #B42318; --color-info: #1D5FA8;
  --color-focus: var(--color-primary);
  --color-primary-subtle: var(--brand-navy-100); --color-primary-hover: var(--brand-navy-900);
  --color-accent-subtle: var(--brand-amber-100); --color-accent-subtle-hover: color-mix(in srgb, var(--color-accent) 32%, var(--mix-white));
  --color-surface-inverse: var(--color-primary); --color-on-inverse: #FFFFFF; --color-on-inverse-muted: rgba(255, 255, 255, 0.72); --color-inverse-border: rgba(255, 255, 255, 0.22);
  --color-decor: var(--brand-lime-400); --color-danger-subtle: #FDECEA; --color-success-subtle: #E3F1E9; --color-warning-subtle: #FBEEDF; --color-row-hover: var(--neutral-50);
  --tag-navy-bg: var(--brand-navy-100); --tag-navy-fg: var(--color-ink);
  --tag-amber-bg: var(--brand-amber-100); --tag-amber-fg: color-mix(in srgb, var(--color-accent) 62%, black);
  --tag-green-bg: #E3F1E9; --tag-green-fg: #16603C;
  --tag-blue-bg: #E4EDF8; --tag-blue-fg: #174E8C;
  --tag-orange-bg: #FBEEDF; --tag-orange-fg: #8A3F06;
  --tag-teal-bg: #DFF1EF; --tag-teal-fg: #0F5E58;
  --tag-yellow-bg: #FFF4C2; --tag-yellow-fg: #7A5400;
  --tag-red-bg: #FDE2E2; --tag-red-fg: #9B1C1C;
  --tag-grey-bg: #ECEEF2; --tag-grey-fg: #4B5563;
  --tag-white-bg: #FFFFFF; --tag-white-fg: #1F2937;
  --tag-pink-bg: #FCE4EF; --tag-pink-fg: #9D174D;
  --tag-purple-bg: #ECE4FA; --tag-purple-fg: #5B21B6;
  --tag-neutral-bg: var(--neutral-0); --tag-neutral-fg: var(--neutral-800);
  --font-sans: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --text-xs: 12px; --lh-xs: 1.8; --text-sm: 14px; --lh-sm: 1.8; --text-base: 15px; --lh-base: 1.9;
  --text-lg: 18px; --lh-lg: 1.7; --text-xl: 22px; --lh-xl: 1.6; --text-2xl: 28px; --lh-2xl: 1.5; --text-display: 48px; --text-display-lg: 60px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;
  --shadow-1: 0 1px 2px rgba(0, 38, 77, 0.05), 0 6px 20px -14px rgba(0, 38, 77, 0.25);
  --shadow-2: 0 12px 32px -12px rgba(0, 38, 77, 0.35);
  --topbar-h: 64px; --touch: 44px; --admin-nav-w: 248px;
}

/* ---------- Dark theme ----------
   Follows the OS setting unless the visitor picked one with the top-bar toggle (html[data-theme], kept in localStorage).
   Built on light-dark() (Chrome/Edge 123+, Firefox 120+, Safari 17.5+); older browsers simply stay light. */
:root[data-theme="dark"] { color-scheme: dark; }
@supports (color: light-dark(#000, #fff)) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: light dark; }
  :root:not([data-theme="light"]) {
    --mix-white: light-dark(white, #171D29);
    --neutral-0: light-dark(#FFFFFF, #171D29); --neutral-50: light-dark(#F7F8FA, #1C2331); --neutral-100: light-dark(#F0F2F6, #232C3B);
    --neutral-200: light-dark(#E3E6EC, #313B4D); --neutral-500: light-dark(#6B7280, #9AA4B5); --neutral-800: light-dark(#1F2937, #E7EBF2);
    --color-bg: light-dark(var(--theme-bg, #F3F5F9), #0F141D); --color-text: light-dark(var(--theme-text, #1F2937), #E7EBF2);
    --color-ink: light-dark(var(--color-primary), color-mix(in srgb, var(--color-primary) 35%, #E3ECF8));
    --ink-strong: light-dark(var(--brand-navy-900), #F2F5FA);
    --color-primary-hover: light-dark(var(--brand-navy-900), color-mix(in srgb, var(--color-primary) 72%, white));
    --color-focus: light-dark(var(--color-primary), var(--color-accent));
    --color-danger-ink: light-dark(#B42318, #F09A93); --color-success-ink: light-dark(#1E7F4F, #7DD3A3); --color-warning-ink: light-dark(#B45309, #F4B96E); --color-info-ink: light-dark(#1D5FA8, #93BEF0);
    --color-danger-subtle: light-dark(#FDECEA, #3B1D1B); --color-success-subtle: light-dark(#E3F1E9, #163222); --color-warning-subtle: light-dark(#FBEEDF, #3B2A14);
    --tag-amber-fg: light-dark(color-mix(in srgb, var(--color-accent) 62%, black), color-mix(in srgb, var(--color-accent) 80%, white));
    --tag-green-bg: light-dark(#E3F1E9, #173424); --tag-green-fg: light-dark(#16603C, #8FD9AE);
    --tag-blue-bg: light-dark(#E4EDF8, #1B2D47); --tag-blue-fg: light-dark(#174E8C, #9CC3F2);
    --tag-orange-bg: light-dark(#FBEEDF, #3D2615); --tag-orange-fg: light-dark(#8A3F06, #F3B98A);
    --tag-teal-bg: light-dark(#DFF1EF, #15302E); --tag-teal-fg: light-dark(#0F5E58, #8ADCD4);
    --tag-yellow-bg: light-dark(#FFF4C2, #3D3410); --tag-yellow-fg: light-dark(#7A5400, #F3D56A);
    --tag-red-bg: light-dark(#FDE2E2, #3F1C1C); --tag-red-fg: light-dark(#9B1C1C, #F5A3A3);
    --tag-grey-bg: light-dark(#ECEEF2, #2A3140); --tag-grey-fg: light-dark(#4B5563, #C3CAD6);
    --tag-white-bg: light-dark(#FFFFFF, #E9EEF5); --tag-white-fg: #1F2937;   /* a white tile stays white in the dark theme too */
    --tag-pink-bg: light-dark(#FCE4EF, #3F1A2C); --tag-pink-fg: light-dark(#9D174D, #F6A6C9);
    --tag-purple-bg: light-dark(#ECE4FA, #2B1F47); --tag-purple-fg: light-dark(#5B21B6, #C7B3F3);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-block-size: 100vh; display: flex; flex-direction: column; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-base); color: var(--color-text); background: var(--color-bg) radial-gradient(900px 320px at 50% -120px, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 70%) no-repeat; }
body > main { flex: 1; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-inline-size: 100%; }
[hidden], .hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.today :focus-visible, .btn-primary:focus-visible, .banner :focus-visible { outline-color: var(--color-accent); }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.icon { inline-size: 20px; block-size: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { inline-size: 16px; block-size: 16px; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }
.skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -120px; z-index: 100; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); text-decoration: none; }
.skip-link:focus { inset-block-start: var(--space-2); }
.muted { color: var(--color-text-muted); }
.ltr { direction: ltr; text-align: start; unicode-bidi: isolate; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* Tones and tiles */
.tone-navy { background: var(--tag-navy-bg); color: var(--tag-navy-fg); }
.tone-amber { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.tone-green { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.tone-blue { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.tone-orange { background: var(--tag-orange-bg); color: var(--tag-orange-fg); }
.tone-teal { background: var(--tag-teal-bg); color: var(--tag-teal-fg); }
.tone-yellow { background: var(--tag-yellow-bg); color: var(--tag-yellow-fg); }
.tone-red { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.tone-grey { background: var(--tag-grey-bg); color: var(--tag-grey-fg); }
.tone-white { background: var(--tag-white-bg); color: var(--tag-white-fg); box-shadow: inset 0 0 0 1px var(--color-border); }
.tone-pink { background: var(--tag-pink-bg); color: var(--tag-pink-fg); }
.tone-purple { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }
.tone-neutral { background: var(--tag-neutral-bg); color: var(--tag-neutral-fg); box-shadow: inset 0 0 0 1px var(--color-border); }
.tile { display: grid; place-items: center; flex-shrink: 0; inline-size: 44px; block-size: 44px; border-radius: 12px; }
.tile .icon { inline-size: 22px; block-size: 22px; }
.tile--sm { inline-size: 36px; block-size: 36px; border-radius: 10px; }
.tile--sm .icon { inline-size: 19px; block-size: 19px; }
.tile img { inline-size: 62%; block-size: 62%; object-fit: contain; }
.tile .emoji { font-size: 20px; line-height: 1; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-3); block-size: var(--topbar-h); padding-inline: var(--space-3); background: color-mix(in srgb, var(--neutral-0) 92%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid var(--color-border); }
@media (min-width: 768px) { .topbar { padding-inline: var(--space-5); } }
/* public pages: the bar's content shares the page container, so the logo and the icons line up with the boxes below */
.topbar--site { padding-inline: 0; }
.topbar-inner { display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; block-size: 100%; max-inline-size: 1320px; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .topbar-inner { padding-inline: var(--space-5); } }
@media (min-width: 1024px) { .topbar-inner { padding-inline: var(--space-6); } }
@media (min-width: 1500px) { .topbar-inner { max-inline-size: 1600px; } }
@media (min-width: 1800px) { .topbar-inner { max-inline-size: 1840px; } }
.brand { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--touch); text-decoration: none; flex-shrink: 0; }
.brand-logo { display: block; block-size: 30px; inline-size: auto; }
@media (min-width: 1024px) { .brand-logo { block-size: 36px; } }
.brand-sep { inline-size: 1px; block-size: 24px; background: var(--color-border); }
.brand-name { font-weight: 700; font-size: var(--text-base); line-height: 1; color: var(--color-ink); white-space: nowrap; }
@media (max-width: 479.98px) { .brand-sep, .brand-name { display: none; } }
.search { position: relative; flex: 1 1 120px; min-inline-size: 0; max-inline-size: 520px; margin-inline: auto; }
.search-field { display: flex; align-items: center; gap: var(--space-2); block-size: var(--touch); padding-inline: var(--space-3); background: var(--neutral-100); border: 1px solid transparent; border-radius: var(--radius-full); color: var(--color-text-muted); transition: background .15s, border-color .15s; }
.search-field:focus-within { background: var(--color-surface); border-color: var(--brand-navy-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-navy-500) 22%, transparent); }
.search-field input { flex: 1 1 0; inline-size: 100%; min-inline-size: 0; block-size: 100%; border: 0; background: transparent; outline: none; font-size: var(--text-sm); color: var(--color-text); }
.search-field input::placeholder { color: var(--color-text-muted); }
.search-field input::-webkit-search-cancel-button { display: none; }
.kbd { font-family: inherit; font-size: var(--text-xs); line-height: 1.6; padding-inline: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); }
@media (max-width: 767.98px) { .kbd { display: none; } }
.topbar-end { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; flex-shrink: 0; }
.icon-btn { display: inline-grid; place-items: center; inline-size: var(--touch); block-size: var(--touch); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--neutral-100); }
.topbar .link { padding-inline: var(--space-2); border-radius: var(--radius-md); }
.topbar .link:hover { background: var(--neutral-100); text-decoration: none; }
@media (max-width: 479.98px) { .topbar .link .lbl { display: none; } .topbar-end { gap: 0; } .topbar .link { padding-inline: 4px; } .topbar-end .bell { margin-inline-end: 0; } .link--me { gap: 0; } }

/* ---------- Page and panels ---------- */
.page { display: flex; flex-direction: column; gap: var(--space-5); max-inline-size: 1320px; margin-inline: auto; padding: var(--space-4); }
/* a shorter gap under the top bar than at the sides (the user found 32 px too much) */
@media (min-width: 768px) { .page { padding: var(--space-4) var(--space-5) var(--space-5); } }
@media (min-width: 1024px) { .page { padding: 20px var(--space-6) var(--space-7); } }
.page--narrow { max-inline-size: 880px; }
.panel { --panel-px: var(--space-4); --panel-py: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--panel-py) var(--panel-px); box-shadow: var(--shadow-1); }
@media (min-width: 768px) { .panel { --panel-px: var(--space-5); --panel-py: 20px; } }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-3); min-block-size: 36px; }
.block-title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--title-color, var(--color-ink)); }
/* section header band: distinguishes block titles from body text */
.panel > .block-head:first-child { margin: calc(-1 * var(--panel-py)) calc(-1 * var(--panel-px)) var(--space-3); padding: 10px var(--panel-px); background: var(--band-bg, linear-gradient(to left, var(--color-primary-subtle), color-mix(in srgb, var(--color-primary-subtle) 30%, transparent))); border-block-end: 1px solid var(--color-border); border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); }
.panel > .block-head:first-child .block-title { font-size: var(--text-base); }
@media (min-width: 768px) { .panel > .block-head:first-child .block-title { font-size: 17px; } }
.block-title .count { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.block-actions { display: flex; align-items: center; gap: var(--space-2); }
.block-foot { display: flex; justify-content: flex-end; margin-block-start: var(--space-2); padding-block-start: var(--space-1); border-block-start: 1px solid var(--color-border); }
.link { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--touch); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }
.admin-link { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 30px; padding-inline: var(--space-3); border-radius: var(--radius-full); background: var(--color-accent-subtle); color: var(--ink-strong); font-size: var(--text-xs); line-height: 1.6; font-weight: 500; text-decoration: none; white-space: nowrap; }
.admin-link:hover { background: var(--color-accent-subtle-hover); }
.page-head { display: grid; gap: var(--space-2); }
.title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.page-title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 700; }
@media (min-width: 768px) { .page-title { font-size: var(--text-2xl); line-height: var(--lh-2xl); } }
.page-desc { max-inline-size: 70ch; font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-text-muted); }
.title-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Buttons and tags */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--touch); padding-inline: var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); font-weight: 500; line-height: 1.6; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary) 60%, transparent); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn-secondary:hover { border-color: var(--brand-navy-500); }
.btn-ghost { background: transparent; color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-primary-subtle); }
.btn-danger { background: var(--color-danger-subtle); color: var(--color-danger-ink); }
.btn-danger:hover { background: #F9D9D5; }
.btn-sm { min-block-size: 34px; padding-inline: var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 10px; border-radius: var(--radius-full); font-size: var(--text-xs); line-height: 1.8; font-weight: 500; white-space: nowrap; }
.tag-ok { background: var(--color-success-subtle); color: var(--color-success-ink); }
.tag-warn { background: var(--color-warning-subtle); color: var(--color-warning-ink); }
.tag-err { background: var(--color-danger-subtle); color: var(--color-danger-ink); }

/* ---------- Home: greeting strip ---------- */
.today { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: 18px 22px; border-radius: var(--radius-lg); color: var(--color-on-inverse); background: linear-gradient(118deg, var(--greet-from) 0%, color-mix(in srgb, var(--greet-from) 50%, var(--greet-to)) 52%, var(--greet-to) 100%); box-shadow: var(--shadow-2); }
.today::before { content: ""; position: absolute; inset-block-end: -140px; inset-inline-end: 22%; inline-size: 300px; block-size: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 32%, transparent), transparent 64%); pointer-events: none; }
.today::after { content: ""; position: absolute; inset-block-start: -120px; inset-inline-start: -60px; inline-size: 260px; block-size: 260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand-navy-500) 50%, transparent), transparent 64%); pointer-events: none; }
.today > * { position: relative; z-index: 1; }
.today-greet { display: grid; gap: 2px; min-inline-size: 0; }
.today-greeting { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 700; }
.today-sub { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-on-inverse-muted); }
@media (min-width: 768px) { .today-sub { font-size: var(--text-base); } }
/* date as a desk-calendar card: a Jalali page over a Gregorian page. Every few seconds the top page lifts toward
   the viewer over the binding holes and fades, revealing the other page, which then becomes the top page. */
.today-date { display: flex; align-items: center; gap: var(--space-4); }
.cal-card { --cal-w: 84px; --cal-day: 40px; position: relative; display: grid; inline-size: var(--cal-w); perspective: 420px; }
.cal-card[data-cal-flip] { cursor: pointer; }
.cal-page { grid-area: 1 / 1; position: relative; z-index: 1; display: grid; justify-items: center; border-radius: 14px; overflow: hidden; background: #fff; color: var(--color-primary); text-align: center; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.4); transform-origin: 50% 0; backface-visibility: hidden; }
.cal-page.is-front { z-index: 2; }
.cal-page::before, .cal-page::after { content: ""; position: absolute; z-index: 1; inset-block-start: 6px; inline-size: 6px; block-size: 6px; border-radius: 50%; background: color-mix(in srgb, var(--brand-navy-900) 55%, transparent); }
.cal-page::before { inset-inline-start: 12px; }
.cal-page::after { inset-inline-end: 12px; }
.cal-month { justify-self: stretch; padding: 3px 0 2px; background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-sm); line-height: 1.6; font-weight: 700; }
.cal-day { padding-block-start: 4px; font-size: var(--cal-day); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.cal-weekday { padding-block: 1px 7px; font-size: var(--text-xs); line-height: 1.6; font-weight: 500; color: var(--color-text-muted); }
.cal-page--en .cal-month { background: #2563B0; color: #fff; letter-spacing: 0.16em; }
.cal-page--en .cal-day { font-weight: 700; }
.cal-page.is-leaving { z-index: 3; animation: cal-turn 0.95s cubic-bezier(0.45, 0.05, 0.4, 1) forwards; }
.cal-card.is-turning .cal-page:not(.is-leaving) { animation: cal-reveal 0.95s ease-out; }
@keyframes cal-turn {
  0%   { transform: rotateX(0); filter: brightness(1); opacity: 1; }
  14%  { transform: rotateX(-7deg) translateY(1px); }
  70%  { transform: rotateX(78deg); filter: brightness(1.12); opacity: 1; }
  100% { transform: rotateX(104deg); filter: brightness(1.2); opacity: 0; }
}
@keyframes cal-reveal {
  0%, 20% { filter: brightness(0.78); transform: scale(0.97); }
  100%    { filter: brightness(1); transform: scale(1); }
}
.cal-side { display: grid; line-height: 1.5; }
.cal-side-face { grid-area: 1 / 1; display: grid; gap: 2px; transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s; }
.cal-side-face b { font-size: var(--text-lg); font-weight: 700; }
.cal-side-face > span { font-size: var(--text-xs); color: var(--color-on-inverse-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cal-side-face--en, .today-date.is-greg .cal-side-face--fa { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.cal-side-face--en { transform: translateY(8px); }
.today-date.is-greg .cal-side-face--en { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cal-page.is-leaving, .cal-card.is-turning .cal-page:not(.is-leaving) { animation-duration: 0.6s; } }
/* top-bar logo: turns like the calendar card between the Persian logo and the English white logo on a navy card.
   Dark theme: the Persian logo sits on a white card and the white logo lies flat on the dark bar. */
.brand-flip { display: grid; perspective: 420px; }
.brand-page { grid-area: 1 / 1; z-index: 1; display: grid; place-items: center; padding: 3px 8px; border: 2px solid transparent; border-radius: 10px; transform-origin: 50% 0; backface-visibility: hidden; visibility: hidden; }
.brand-page--a { border-color: var(--greet-to); }   /* the Persian logo in a frame of the card's blue */
.brand-page.is-front, .brand-flip.is-turning .brand-page { visibility: visible; }
.brand-page.is-front { z-index: 2; }
.brand-page--b { background: linear-gradient(135deg, var(--greet-from), var(--greet-to)); box-shadow: 0 10px 22px -12px rgba(0, 38, 77, 0.65); }
.brand-img { display: block; block-size: 30px; inline-size: auto; }
@media (min-width: 1024px) { .brand-img { block-size: 36px; } }
.brand-page.is-leaving { z-index: 3; animation: cal-turn 0.95s cubic-bezier(0.45, 0.05, 0.4, 1) forwards; }
.brand-flip.is-turning .brand-page:not(.is-leaving) { animation: cal-reveal 0.95s ease-out; }
@media (prefers-reduced-motion: reduce) { .brand-page.is-leaving, .brand-flip.is-turning .brand-page:not(.is-leaving) { animation-duration: 0.6s; } }
@supports (color: light-dark(#000, #fff)) {
  :root[data-theme="dark"] .brand-page--a { background: linear-gradient(135deg, #FFFFFF, #E6ECF4); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.7); }
  :root[data-theme="dark"] .brand-page--b { background: none; box-shadow: none; border-color: var(--brand-navy-500); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-page--a { background: linear-gradient(135deg, #FFFFFF, #E6ECF4); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.7); }
    :root:not([data-theme="light"]) .brand-page--b { background: none; box-shadow: none; border-color: var(--brand-navy-500); }
  }
}
.today .admin-link { background: rgba(255, 255, 255, 0.08); color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-inverse-border); margin-block-start: var(--space-2); justify-self: start; }
.today .admin-link:hover { background: rgba(255, 255, 255, 0.14); }
@media (min-width: 768px) { .today { padding: 22px 28px; } .today-greeting { font-size: var(--text-2xl); line-height: var(--lh-2xl); } }
@media (min-width: 1200px) { .cal-card { --cal-w: 96px; --cal-day: 46px; } }

/* ---------- Home: three-column grid (links start, slideshow centre, news end) ---------- */
.home-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "center" "links" "news"; align-items: start; }
@media (min-width: 768px) { .home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "center center" "links news"; } }
@media (min-width: 1300px) { .home-grid { grid-template-columns: 280px minmax(0, 1fr) 340px; grid-template-areas: "links center news"; gap: var(--space-5); } }   /* three columns only when the centre keeps room for two tile columns (1920 at 150 % zoom = 1280 stays two-column) */
@media (min-width: 1400px) { .home-grid { grid-template-columns: 320px minmax(0, 1fr) 380px; } }
/* wide monitors: let the page breathe instead of leaving empty margins */
@media (min-width: 1500px) { .page, .site-footer .inner { max-inline-size: 1600px; } .home-grid { grid-template-columns: 350px minmax(0, 1fr) 430px; gap: var(--space-6); } .banner { max-block-size: 520px; } .lrow { min-block-size: 54px; } .lrow-text strong { font-size: 15px; } .feed-thumb { inline-size: 112px; block-size: 74px; } .feed-title { font-size: 15px; } }
@media (min-width: 1800px) { .page, .site-footer .inner { max-inline-size: 1840px; } .home-grid { grid-template-columns: 400px minmax(0, 1fr) 480px; } .banner { max-block-size: 580px; } .pins { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .today-greeting { font-size: 32px; } .cal-card { --cal-w: 108px; --cal-day: 54px; } }
.col-links { grid-area: links; display: grid; gap: var(--space-4); align-content: start; }
.col-center { grid-area: center; display: grid; gap: var(--space-4); align-content: start; }
.col-news { grid-area: news; display: grid; gap: var(--space-4); align-content: start; }

/* Link groups as compact rows */
.panel.lgroup > .block-head:first-child { margin-block-end: var(--space-2); }
.lgroup .block-title { font-size: var(--text-base); }
.lrows { display: grid; gap: 2px; }
.lrow { position: relative; display: flex; align-items: center; gap: var(--space-3); min-block-size: 50px; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .15s; }
.lrow:hover { background: var(--color-primary-subtle); }
.lrow:hover .lrow-text strong { color: var(--color-ink); }
.lrow-text { flex: 1; min-inline-size: 0; display: grid; }
.lrow-text strong { font-size: var(--text-sm); font-weight: 600; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-text small { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-ext { color: var(--color-text-muted); flex-shrink: 0; }
.no-results { display: none; }
.is-searching .no-results.show { display: block; }

/* Slideshow */
.banner { position: relative; inline-size: 100%; max-inline-size: 100%; aspect-ratio: 16 / 9; max-block-size: 460px; min-block-size: 200px; border-radius: var(--radius-lg); overflow: hidden; background: var(--brand-navy-900); box-shadow: var(--shadow-2); isolation: isolate; }
.banner-track, .banner-slide { position: absolute; inset: 0; }
.banner-slide { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.banner-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.banner-slide > a { display: block; block-size: 100%; color: inherit; text-decoration: none; }
.banner-slide img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6s ease-out; }
.banner-slide.is-active img { transform: scale(1.08); }
.banner-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 38, 77, 0.88) 0%, rgba(0, 38, 77, 0.35) 45%, rgba(0, 38, 77, 0) 75%); pointer-events: none; }
.banner-text { position: absolute; inset-inline-start: 0; inset-block-end: 0; max-inline-size: 100%; padding: var(--space-4) 44px 26px; display: grid; gap: 4px; color: var(--color-on-inverse); }
.banner-title { font-size: var(--text-lg); line-height: 1.5; font-weight: 700; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.banner-text p { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-on-inverse-muted); display: none; }
/* minimal controls: a plain chevron on each side, small dots centred at the bottom */
.banner-ctrl { display: contents; }
.banner-btn { position: absolute; z-index: 2; inset-block-start: 50%; transform: translateY(-50%); display: grid; place-items: center; inline-size: 40px; block-size: 64px; border: 0; border-radius: var(--radius-md); background: transparent; color: #fff; cursor: pointer; opacity: 0.85; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65)); transition: opacity .15s, background .15s; }
.banner-btn .icon { inline-size: 30px; block-size: 30px; stroke-width: 2.4; }
/* physical sides on purpose: the left arrow always points left, the right arrow right */
.banner-btn[data-prev] { left: 4px; }
.banner-btn[data-next] { right: 4px; }
.banner-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.dots { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); inset-block-end: 10px; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-full); background: rgba(0, 20, 40, 0.3); backdrop-filter: blur(4px); pointer-events: none; }  /* own backdrop: readable on any photo */
.dot { position: relative; pointer-events: auto; inline-size: 6px; block-size: 6px; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: inline-size .2s, background .2s; }
.dot::after { content: ""; position: absolute; inset: -12px -5px; }
.dot[aria-current="true"] { inline-size: 18px; background: var(--color-accent); }
@media (min-width: 768px) { .banner-text { max-inline-size: 100%; padding: var(--space-5) 56px 30px; gap: 6px; } .banner-title { font-size: var(--text-xl); } .banner-text p { display: block; } .banner-btn { inline-size: 48px; block-size: 80px; } .banner-btn .icon { inline-size: 34px; block-size: 34px; } .banner-btn[data-prev] { left: 8px; } .banner-btn[data-next] { right: 8px; } }

/* Pinned cards (centre column) */
.pins { display: grid; gap: var(--space-3); }
@media (min-width: 768px) and (max-width: 1299.98px) { .pins { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.pin { display: flex; align-items: flex-start; gap: 14px; padding: 14px var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-inline-start: 4px solid var(--color-accent); border-radius: 14px; text-decoration: none; box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s; }
.pin:hover { border-color: var(--brand-navy-500); border-inline-start-color: var(--color-accent); transform: translateY(-1px); }
.pin:hover .pin-title { text-decoration: underline; }
.pin-body { display: grid; gap: 2px; min-inline-size: 0; }
.pin-cat { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--brand-navy-500); }
.pin-title { font-size: var(--text-base); line-height: 1.7; font-weight: 700; }
.pin-text { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.welcome-card { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-primary-subtle); border: 1px dashed var(--brand-navy-500); color: var(--ink-strong); }
.welcome-card h2 { font-size: var(--text-lg); }

/* News feed */
.feed li + li { border-block-start: 1px solid var(--color-border); }
.feed-item { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-3); text-decoration: none; color: inherit; }
.feed-item:hover .feed-title { color: var(--color-ink); text-decoration: underline; }
.date-badge { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 50px; block-size: 54px; border-radius: 12px; background: var(--color-primary-subtle); color: var(--ink-strong); }
.date-badge b { font-size: var(--text-xl); line-height: 1.1; font-weight: 700; }
.date-badge span { font-size: 11px; line-height: 1.5; color: var(--color-text-muted); }
.feed-item.is-pinned .date-badge { background: var(--color-accent-subtle); }
.feed-body { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }
.feed-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--color-text-muted); }
.feed-title { font-size: var(--text-sm); line-height: 1.7; font-weight: 700; color: var(--color-text); }
.feed-excerpt { font-size: var(--text-xs); line-height: 1.8; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed--wide .feed-title { font-size: var(--text-base); }
.feed--wide .feed-excerpt { font-size: var(--text-sm); }

/* Article (news detail) */
.article { display: grid; gap: var(--space-4); }
.article-title { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 700; }
@media (min-width: 768px) { .article-title { font-size: var(--text-2xl); line-height: var(--lh-2xl); } }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.prose { font-size: var(--text-base); line-height: var(--lh-base); }
.prose p { margin-block: 0 var(--space-3); }
.prose p:last-child { margin-block-end: 0; }
.prose a { color: var(--color-ink); }

/* ---------- States ---------- */
.empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-3); text-align: center; }
.empty .tile { inline-size: 56px; block-size: 56px; border-radius: var(--radius-lg); }
.empty .tile .icon { inline-size: 26px; block-size: 26px; }
.empty-title { font-size: var(--text-base); line-height: 1.7; font-weight: 700; }
.empty-text { max-inline-size: 38ch; font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-text-muted); }
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border-inline-start: 4px solid var(--color-info); background: var(--color-primary-subtle); font-size: var(--text-sm); line-height: var(--lh-sm); }
.alert > .icon { margin-block-start: 3px; }
.alert-ok { background: var(--color-success-subtle); border-color: var(--color-success); color: #10391F; }
.alert-err { background: var(--color-danger-subtle); border-color: var(--color-danger); color: #5B1208; }
/* the dark text above is unreadable on the dark theme's tinted backgrounds: the status inks take over there */
@supports (color: light-dark(#000, #fff)) {
  .alert-ok { color: light-dark(#10391F, var(--color-success-ink)); }
  .alert-err { color: light-dark(#5B1208, var(--color-danger-ink)); }
}
.state-page { display: grid; justify-items: center; gap: var(--space-3); max-inline-size: 520px; margin-inline: auto; padding: var(--space-8) var(--space-4); text-align: center; }
.state-icon { display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-ink); }
.state-icon .icon { inline-size: 32px; block-size: 32px; }
.state-title { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 700; }
.state-text { color: var(--color-text-muted); }
.state-code { font-size: var(--text-display); line-height: 1; font-weight: 700; color: var(--color-ink); }

/* ---------- Footer ---------- */
.site-footer { margin-block-start: auto; border-block-start: 1px solid var(--color-border); background: var(--color-surface); }
.site-footer .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); max-inline-size: 1320px; margin-inline: auto; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--color-text-muted); }
@media (min-width: 1024px) { .site-footer .inner { padding-inline: var(--space-6); } }
.site-footer a { color: var(--color-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.field > span { font-weight: 500; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea, .table input:not([type="checkbox"]):not([type="file"]), .table select, .inline-form input:not([type="checkbox"]), .inline-form select { inline-size: 100%; min-block-size: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); }
.field input[type="file"] { padding: var(--space-2) 0; font-size: var(--text-sm); }
.field textarea { min-block-size: 200px; resize: vertical; line-height: var(--lh-base); }
.field input:focus, .field select:focus, .field textarea:focus, .table input:focus { border-color: var(--brand-navy-500); box-shadow: 0 0 0 4px rgba(79, 114, 183, 0.15); outline: none; }
.form-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch); font-size: var(--text-sm); cursor: pointer; }
.check input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--color-primary); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.help { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--color-text-muted); }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.inline-form input, .inline-form select { inline-size: auto; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--color-border); text-align: start; vertical-align: middle; }
.table th { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.table tbody tr:hover { background: var(--color-row-hover); }
.table tr:last-child td { border-block-end: 0; }
.table .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
.table .actions form { display: inline; }
.table .group-row td { background: var(--color-primary-subtle); color: var(--ink-strong); font-weight: 700; }
.table a { color: var(--color-ink); text-decoration: none; }
.table a:hover { text-decoration: underline; }
.thumb { display: block; inline-size: 128px; block-size: 72px; object-fit: cover; border-radius: var(--radius-md); background: var(--neutral-100); }

/* ---------- Auth ---------- */
.auth { max-inline-size: 420px; margin: var(--space-7) auto; }
.auth .panel { display: grid; gap: var(--space-4); padding: var(--space-5); }
.auth .auth-flash { margin: 0; font-size: var(--text-sm); line-height: 1.9; }
.auth .auth-flash > .icon { margin-block-start: 5px; flex-shrink: 0; }
.auth-head { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.auth-head .brand-logo { block-size: 40px; }

/* ---------- Admin shell ---------- */
.admin-shell { display: flex; align-items: flex-start; }
.admin-nav { display: none; }
@media (min-width: 1024px) { .admin-nav { display: flex; flex-direction: column; flex-shrink: 0; position: sticky; inset-block-start: var(--topbar-h); block-size: calc(100vh - var(--topbar-h)); inline-size: var(--admin-nav-w); padding: var(--space-3); background: var(--color-surface); border-inline-end: 1px solid var(--color-border); overflow-y: auto; } }
.nav-heading { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--color-text-muted); }
.admin-nav .nav-item + .nav-heading { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }
.nav-item { position: relative; display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--touch); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; text-decoration: none; text-align: start; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text); }
.nav-item .icon { inline-size: 22px; block-size: 22px; color: var(--brand-navy-500); }
.nav-item:hover { background: var(--color-bg); }
.nav-item[aria-current="page"] { background: var(--color-primary-subtle); color: var(--ink-strong); font-weight: 700; }
.nav-item[aria-current="page"] .icon { color: var(--color-ink); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 10px; inline-size: 3px; border-radius: var(--radius-full); background: var(--color-accent); }
.nav-foot { margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); display: grid; gap: var(--space-2); }
.nav-user { display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-3); font-size: var(--text-sm); }
.nav-user small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.5; }
.avatar { display: grid; place-items: center; inline-size: 36px; block-size: 36px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--ink-strong); font-weight: 700; font-size: var(--text-sm); line-height: 1; }
.admin-main { flex: 1; min-inline-size: 0; }
.admin-tag { display: inline-flex; align-items: center; padding-inline: 10px; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--ink-strong); font-size: var(--text-xs); line-height: 1.8; font-weight: 500; white-space: nowrap; }
.admin-mobile-nav { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) var(--space-4) 0; scrollbar-width: none; }
.admin-mobile-nav::-webkit-scrollbar { display: none; }
.admin-mobile-nav a { flex-shrink: 0; display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-sm); text-decoration: none; }
.admin-mobile-nav a[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
@media (min-width: 1024px) { .admin-mobile-nav { display: none; } }
/* admin top bar on phones: icon-only actions and a smaller logo, so the bar is never wider than the screen (it was 478 px) */
@media (max-width: 479.98px) {
  .topbar--admin { gap: var(--space-2); }
  .topbar--admin .brand-logo { block-size: 26px; }
  .topbar--admin .topbar-end .link, .topbar--admin .topbar-end .btn { inline-size: var(--touch); min-block-size: var(--touch); padding: 0; justify-content: center; border-radius: var(--radius-md); }
  .topbar--admin .topbar-end .link span, .topbar--admin .topbar-end .btn span { display: none; }
  .topbar--admin .topbar-end .icon-sm { inline-size: 20px; block-size: 20px; }
}
@media (max-width: 359.98px) { .topbar--admin .admin-tag { display: none; } }
/* public top bar on small phones (360 px): logo, home, theme, bell and the admin/login button need 386 px at full size */
@media (max-width: 379.98px) { .topbar-inner { gap: var(--space-2); } .brand-img { block-size: 24px; } .brand-page { padding: 2px 6px; } .topbar-end .bell { margin-inline-end: 4px; } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.stat { display: grid; gap: 2px; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; box-shadow: var(--shadow-1); }
.stat:hover { border-color: var(--brand-navy-500); }
.stat strong { font-size: var(--text-2xl); line-height: 1.2; font-weight: 700; color: var(--color-ink); }
.stat span { font-size: var(--text-sm); }
.stat small { font-size: var(--text-xs); color: var(--color-text-muted); }
.stat--bad { border-color: var(--color-danger); }
.stat--bad strong { color: var(--color-danger-ink); }
.health-problems { margin: var(--space-1) 0; padding-inline-start: var(--space-5); }

/* ---------- Drag-and-drop ordering (admin) ---------- */
.col-handle { inline-size: 36px; padding-inline: var(--space-1) !important; }
.drag-handle { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: grab; touch-action: none; }
.drag-handle:hover { background: var(--color-primary-subtle); color: var(--color-ink); }
.drag-handle:active { cursor: grabbing; }
.table--sortable tbody tr[data-id] { background: var(--color-surface); }
.drag-ghost { opacity: 0.35; }
.drag-chosen { background: var(--color-primary-subtle) !important; box-shadow: inset 4px 0 0 var(--color-accent); }
.sortable-drag { background: var(--color-surface); box-shadow: var(--shadow-2); }
.table tbody.is-empty .drop-hint td { padding-block: var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(79, 114, 183, 0.06) 10px 20px); border: 1px dashed var(--brand-navy-500); border-radius: var(--radius-md); }
.table tbody:not(.is-empty) .drop-hint { display: none; }
.toast { position: fixed; inset-inline: 0; inset-block-end: var(--space-5); z-index: 80; margin-inline: auto; inline-size: fit-content; max-inline-size: calc(100% - var(--space-6)); padding: 10px 18px; border-radius: var(--radius-full); background: var(--brand-navy-900); color: var(--neutral-0); font-size: var(--text-sm); box-shadow: var(--shadow-2); animation: toast-in .2s ease-out; }
.toast.is-error { background: var(--color-danger); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- News cover images ---------- */
.feed-thumb { flex-shrink: 0; inline-size: 96px; block-size: 64px; object-fit: cover; border-radius: 10px; background: var(--neutral-100); }
.feed--wide .feed-thumb { inline-size: 150px; block-size: 96px; border-radius: 12px; }
@media (max-width: 479.98px) { .feed--wide .feed-thumb { inline-size: 104px; block-size: 70px; } }
.pin-thumb { flex-shrink: 0; inline-size: 84px; block-size: 64px; object-fit: cover; border-radius: 10px; background: var(--neutral-100); }
.article-cover { display: block; inline-size: 100%; max-block-size: 360px; object-fit: contain; border-radius: 12px; background: var(--neutral-100); cursor: zoom-in; }   /* the whole picture, scaled down; click opens it full size */
.article-cover-link { display: block; border-radius: 12px; }
.article-figure--bottom { margin-block-start: var(--space-4); }
.article-zoom { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-full); background: rgba(0, 20, 40, 0.58); color: #fff; font-size: 11px; pointer-events: none; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(3, 10, 20, 0.88); cursor: zoom-out; }
.lightbox img { max-inline-size: 96vw; max-block-size: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); background: #fff; }
.lightbox-close { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; inline-size: 40px; block-size: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 22px; cursor: pointer; }

/* ---------- Tone picker, icon picker, appearance page ---------- */
.tone-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tone-opt { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 40px; padding: 4px 12px 4px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); cursor: pointer; font-size: var(--text-sm); }
.tone-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tone-opt .swatch { inline-size: 26px; block-size: 26px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.tone-opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-subtle); font-weight: 600; }
.tone-opt:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.icon-picker { display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--neutral-50); }
.ip-current { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ip-current .tile { background: var(--color-surface); }
.ip-current input { flex: 1 1 220px; min-block-size: 40px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; direction: ltr; text-align: start; }
.ip-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ip-tabs button { min-block-size: 36px; padding-inline: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); cursor: pointer; font-size: var(--text-sm); }
.ip-tabs button[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 600; }
.ip-search { inline-size: 100%; min-block-size: 40px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; max-block-size: 300px; overflow: auto; padding: 2px; }
.ip-item { display: grid; place-items: center; aspect-ratio: 1; min-block-size: 56px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; padding: 0; transition: border-color .12s, transform .12s; }
.ip-item:hover { border-color: var(--brand-navy-500); transform: translateY(-1px); }
.ip-item.is-selected { border: 2px solid var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); }
.ip-item .icon { inline-size: 24px; block-size: 24px; color: var(--color-ink); }
.ip-item img { inline-size: 28px; block-size: 28px; object-fit: contain; }
.ip-item.ip-upload { border-style: dashed; color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; flex-direction: column; gap: 2px; }
.ip-item.ip-upload .icon { inline-size: 20px; block-size: 20px; }
.ip-empty { grid-column: 1 / -1; padding: var(--space-3); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.color-field { display: grid; grid-template-columns: 52px 1fr; gap: var(--space-3); align-items: center; }
.color-field input[type="color"] { inline-size: 52px; block-size: 44px; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.color-field input[type="text"] { direction: ltr; text-align: start; font-family: ui-monospace, Consolas, monospace; }
.presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.preset { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 40px; padding: 4px 12px 4px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); cursor: pointer; font-size: var(--text-sm); }
.preset:hover { border-color: var(--brand-navy-500); }
.preset .dots-sw { display: inline-flex; gap: 2px; }
.preset .dots-sw span { inline-size: 14px; block-size: 14px; border-radius: 50%; }
.theme-preview { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg); border: 1px solid var(--color-border); }
.theme-preview .today { padding: 14px 18px; box-shadow: none; }
.theme-preview .today-greeting { font-size: var(--text-lg); }
.theme-preview .cal-card { --cal-w: 72px; --cal-day: 32px; }
.theme-preview .panel { padding: var(--space-3) var(--space-4); --panel-px: var(--space-4); --panel-py: var(--space-3); }
.theme-preview .lrow { min-block-size: 40px; }

/* ---------- live notifications ---------- */
.bell { position: relative; color: var(--color-text-muted); }
.bell:hover { color: var(--color-ink); }
/* notifications on: amber rounded tile, navy bell, red dot top-right (same look as the guide slide) */
.bell.is-on { color: var(--brand-navy-900); border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 78%, white) 0%, var(--color-accent) 55%, color-mix(in srgb, var(--color-accent) 86%, #8A3F06) 100%); box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--color-accent) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.bell.is-on:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 70%, white) 0%, var(--color-accent) 60%); color: var(--brand-navy-900); }
.bell.is-on .icon { inline-size: 22px; block-size: 22px; stroke-width: 2.1; }
.bell.is-on::after { content: ""; position: absolute; top: 7px; right: 7px; inline-size: 9px; block-size: 9px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 60%, white); }
.bell.is-on.is-muted::after { background: #111; }   /* sound off: a black dot (the owner's choice), same in every browser and theme */
.bell.is-blocked { opacity: 0.45; }
.toast a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.toast a:hover { text-decoration: underline; }
.toast.toast-news { padding: 12px 22px; font-size: var(--text-base); max-inline-size: min(92vw, 720px); }
@keyframes pulse-news { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.col-news .panel.has-new { animation: pulse-news 1.6s ease-out 2; }

/* ---------- Essential-info box (home, centre column) ---------- */
.info-tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.info-tile { display: flex; align-items: center; gap: var(--space-3); min-block-size: 76px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: inherit; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
.info-tile:hover { border-color: var(--brand-navy-500); background: var(--color-primary-subtle); transform: translateY(-1px); }
.info-tile:hover strong { color: var(--color-ink); }
.info-tile-text { flex: 1; min-inline-size: 0; display: grid; gap: 1px; }
.info-tile-text strong { font-size: var(--text-base); line-height: 1.6; font-weight: 700; }
.info-tile-text small { font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); }
.info-tile-text .info-tile-meta { color: var(--brand-navy-500); font-weight: 600; }
.info-tile-go { color: var(--color-text-muted); }
.info-tile.is-off { cursor: default; opacity: 0.7; }   /* shown but not yet available (e.g. room booking) */
.info-tile.is-off:hover { border-color: var(--color-border); background: var(--color-surface); transform: none; }
.info-tile.is-off:hover strong, .info-tile.is-off:hover .info-tile-go { color: inherit; }
.info-tile:hover .info-tile-go { color: var(--color-ink); }
.info-updated { margin-block-start: var(--space-4); }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--color-text-muted); }
.crumbs a { color: var(--color-ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs--panel { margin-block-end: calc(-1 * var(--space-2)); font-size: var(--text-sm); }
/* «چیدمان نمایش» on «پرسنل» (panel): row numbers follow the drag */
.pp-order tbody { counter-reset: pp-n; }
.pp-order tbody tr { counter-increment: pp-n; }
.pp-order .col-n { inline-size: 3.5em; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pp-order tbody .col-n::before { content: counter(pp-n, persian); }
.pe-group--all { padding-block-start: var(--space-2); }
/* «چیدمان نمایش → بر اساس واحد»: units as draggable blocks, the people of each unit inside */
.ua-units { display: grid; gap: var(--space-3); }
.ua-unit { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.ua-unit--fixed { margin-block-start: var(--space-3); border-style: dashed; }
.ua-unit-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--neutral-50); border-block-end: 1px solid var(--color-border); }
.ua-unit-head .count { margin-inline-start: auto; padding: 0 8px; border-radius: var(--radius-full); background: var(--neutral-100); font-size: var(--text-xs); color: var(--color-text-muted); }
.ua-unit-handle--none { inline-size: 24px; }
.ua-people { list-style: none; margin: 0; padding: var(--space-1) var(--space-2); display: grid; }
.ua-people li { display: flex; align-items: center; gap: var(--space-2); min-block-size: 44px; padding: 4px var(--space-2); border-radius: var(--radius-md); background: var(--color-surface); }
.ua-people li + li { border-block-start: 1px dashed var(--color-border); }
.ua-people .avatar { inline-size: 30px; block-size: 30px; font-size: var(--text-xs); }
.ua-name { flex-shrink: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.ua-role { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.ua-empty { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.crumbs-back { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.crumbs--panel > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 60ch; }
/* the row you came back to (portal.js): marked for a moment */
.is-returned { animation: row-returned 2.4s ease-out; }
@keyframes row-returned { 0%, 35% { background-color: color-mix(in srgb, var(--color-accent) 24%, transparent); } 100% { background-color: transparent; } }

/* ---------- Phone directory page ---------- */
.phones-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.phone-search { flex: 1 1 320px; max-inline-size: 560px; background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-1); }
.phones-count { font-size: var(--text-sm); color: var(--color-text-muted); }
/* grid: row by row in the admin order (RTL: first unit top-right); columns: compact column flow */
.units--grid { display: grid; gap: var(--space-5); align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.units--columns { columns: 3 400px; column-gap: var(--space-5); }
.units--columns .unit { break-inside: avoid; margin-block-end: var(--space-5); }
@media (min-width: 768px) { .units--grid:not([data-cols="auto"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .units--columns:not([data-cols="auto"]) { columns: 2; } }
@media (min-width: 1200px) {
  .units--grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .units--grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .units--columns[data-cols="3"] { columns: 3; }
  .units--columns[data-cols="4"] { columns: 4; }
}
.units .unit.hidden { display: none; }
.ptable { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ptable th { padding: 0 8px 6px; font-size: 11px; font-weight: 500; color: var(--color-text-muted); text-align: start; white-space: nowrap; border-block-end: 1px solid var(--color-border); }
.ptable td { padding: 7px 8px; border-block-end: 1px solid var(--color-border); vertical-align: middle; }
.ptable tbody tr:last-child td { border-block-end: 0; }
.ptable tbody tr:hover { background: var(--color-row-hover); }
.ptable tr.hidden { display: none; }
.p-who strong { display: block; font-weight: 600; line-height: 1.6; }
.p-who small { display: block; font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); }
.ptable .p-ext { inline-size: 1%; text-align: center; white-space: nowrap; }
.ptable .p-lines { inline-size: 1%; white-space: nowrap; }
.ext { display: inline-block; min-inline-size: 56px; padding: 1px 10px; border-radius: 8px; background: var(--color-primary-subtle); color: var(--ink-strong); font-size: var(--text-base); line-height: 1.8; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.ext--sm { min-inline-size: 44px; font-size: var(--text-sm); }
.pline { display: flex; align-items: center; gap: 6px; color: var(--color-text); font-size: var(--text-sm); line-height: 1.9; text-decoration: none; }
.pline .icon { color: var(--color-text-muted); }
.pline:hover { color: var(--color-ink); text-decoration: underline; }
.pline-label { font-size: 11px; color: var(--color-text-muted); }

@media print {
  .topbar, .site-footer, .no-print, .skip-link, .toast, .crumbs { display: none !important; }
  body { background: #fff; }
  .page { padding: 0; max-inline-size: none; gap: 12px; }
  .panel { box-shadow: none; border-color: #bbb; }
  .units--grid, .units--grid[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .units--grid .unit { break-inside: avoid; }
  .units--columns, .units--columns[data-cols] { columns: 2; column-gap: 14px; }
  .units--columns .unit { margin-block-end: 12px; }
  .ext { background: none; border: 1px solid #999; }
  .pline, .pline .icon { color: #000; }
}
.unit-rename { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.table .unit-rename input { flex: 1 1 200px; inline-size: auto; max-inline-size: 360px; }
/* buttons rendered as links inside tables keep their own colours */
.table a.btn { text-decoration: none; }
.table a.btn-primary { color: var(--color-on-primary); }

/* ---------- admin: phone units as cards (drag the header to reorder) ---------- */
.ucards-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-3); }
.ucards-head .table { table-layout: fixed; min-inline-size: 760px; }
.ucards-head .table th { border-block-end: 0; padding-block: 0 var(--space-1); }
.ucards-head { border-inline: 1px solid transparent; }
@media (max-width: 767.98px) { .ucards-head { display: none; } }
.ucards { display: grid; gap: var(--space-3); }
.ucard { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow: hidden; }
.ucard-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-block-size: 46px; padding: 4px var(--space-2); background: var(--color-primary-subtle); border-block-end: 1px solid var(--color-border); }
.ucard-num { display: grid; place-items: center; min-inline-size: 26px; block-size: 26px; padding-inline: 6px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-xs); font-weight: 700; }
.ucard-title { font-size: var(--text-base); line-height: 1.6; font-weight: 700; color: var(--ink-strong); }
.ucard-count { font-size: var(--text-xs); color: var(--color-text-muted); }
.ucard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-inline-start: auto; }
.ucard-actions form { display: inline; }
.btn-icon { inline-size: 34px; padding-inline: 0; }
.unit-handle { inline-size: 36px; block-size: 36px; }
.ucard .table { table-layout: fixed; min-inline-size: 760px; }
.ucard .table tbody tr:last-child td { border-block-end: 0; }
.ucards.is-collapsed .ucard-body { display: none; }
.ucards.is-collapsed .ucard-head { border-block-end: 0; }
.ucards-head.is-hidden { display: none; }
.ucard.drag-ghost { opacity: 0.4; }
.ucard.drag-chosen { box-shadow: 0 0 0 2px var(--color-accent); background: var(--color-surface) !important; }
.ucard.is-moved { animation: unit-moved 0.9s ease-out; }
@keyframes unit-moved { from { box-shadow: 0 0 0 3px var(--color-accent); } to { box-shadow: 0 0 0 0 transparent; } }
.table tr:target td { background: var(--color-accent-subtle); }

/* layout picker with tiny order diagrams */
.layout-opts { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.layout-opt { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); cursor: pointer; }
.layout-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.layout-opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-subtle); box-shadow: inset 0 0 0 1px var(--color-primary); }
.layout-opt:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.layout-text { display: grid; gap: 2px; }
.layout-text strong { font-size: var(--text-sm); }
.layout-text small { font-size: var(--text-xs); line-height: 1.7; color: var(--color-text-muted); }
.lay-demo { flex-shrink: 0; display: grid; grid-template-columns: repeat(3, 22px); grid-auto-rows: 18px; gap: 3px; }
.lay-demo i { display: grid; place-items: center; border-radius: 4px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--brand-navy-500); color: var(--ink-strong); font-size: 10px; font-style: normal; font-weight: 700; }
.lay-demo--columns { grid-auto-flow: column; grid-template-rows: repeat(2, 18px); grid-template-columns: none; grid-auto-columns: 22px; }

/* ---------- Phone directory: lively look (hero bar + one colour per unit) ---------- */
.ut-navy   { --u: var(--color-primary); --u-on: #fff; --u-bg: var(--tag-navy-bg);   --u-fg: var(--tag-navy-fg); }
.ut-amber  { --u: var(--color-accent);  --u-on: var(--brand-navy-900); --u-bg: var(--tag-amber-bg); --u-fg: var(--tag-amber-fg); }
.ut-green  { --u: #1F8A55; --u-on: #fff; --u-bg: var(--tag-green-bg);  --u-fg: var(--tag-green-fg); }
.ut-blue   { --u: #2563B0; --u-on: #fff; --u-bg: var(--tag-blue-bg);   --u-fg: var(--tag-blue-fg); }
.ut-orange { --u: #CC5F14; --u-on: #fff; --u-bg: var(--tag-orange-bg); --u-fg: var(--tag-orange-fg); }
.ut-teal   { --u: #0F8577; --u-on: #fff; --u-bg: var(--tag-teal-bg);   --u-fg: var(--tag-teal-fg); }
.ut-yellow { --u: #E6B800; --u-on: var(--brand-navy-900); --u-bg: var(--tag-yellow-bg); --u-fg: var(--tag-yellow-fg); }
.ut-red    { --u: #C92A2A; --u-on: #fff; --u-bg: var(--tag-red-bg);    --u-fg: var(--tag-red-fg); }
.ut-grey   { --u: #6B7280; --u-on: #fff; --u-bg: var(--tag-grey-bg);   --u-fg: var(--tag-grey-fg); }
.ut-white  { --u: #FFFFFF; --u-on: var(--brand-navy-900); --u-bg: var(--tag-white-bg); --u-fg: var(--tag-white-fg); }
.ut-pink   { --u: #D6336C; --u-on: #fff; --u-bg: var(--tag-pink-bg);   --u-fg: var(--tag-pink-fg); }
.ut-purple { --u: #6F42C1; --u-on: #fff; --u-bg: var(--tag-purple-bg); --u-fg: var(--tag-purple-fg); }

.phones-hero { position: relative; overflow: hidden; display: grid; gap: var(--space-4); padding: 20px 22px; border-radius: var(--radius-lg); color: var(--color-on-inverse); background: linear-gradient(118deg, var(--greet-from) 0%, color-mix(in srgb, var(--greet-from) 50%, var(--greet-to)) 52%, var(--greet-to) 100%); box-shadow: var(--shadow-2); }
.phones-hero::before { content: ""; position: absolute; inset-block-end: -160px; inset-inline-end: 18%; inline-size: 340px; block-size: 340px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 34%, transparent), transparent 64%); pointer-events: none; }
.phones-hero::after { content: ""; position: absolute; inset-block-start: -130px; inset-inline-start: -70px; inline-size: 300px; block-size: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #2BB3A3 40%, transparent), transparent 64%); pointer-events: none; }
.phones-hero > * { position: relative; z-index: 1; }
.phones-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.phones-hero-head { display: flex; align-items: center; gap: var(--space-4); }
.phones-hero-tile { inline-size: 56px; block-size: 56px; border-radius: 16px; background: var(--color-accent); color: var(--brand-navy-900); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-accent) 80%, transparent); }
.phones-hero-tile .icon { inline-size: 28px; block-size: 28px; stroke-width: 2; }
.phones-hero-title { font-size: var(--text-xl); line-height: 1.5; font-weight: 800; }
.phones-hero-sub { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-on-inverse-muted); }
@media (min-width: 768px) { .phones-hero { padding: 24px 28px; } .phones-hero-title { font-size: var(--text-2xl); } }
.phones-hero .btn-secondary { background: rgba(255, 255, 255, 0.1); border-color: var(--color-inverse-border); color: #fff; }
.phones-hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); }
.phones-hero :focus-visible { outline-color: var(--color-accent); }
.phones-hero-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.phones-hero .phone-search { flex: 1 1 320px; max-inline-size: 600px; background: #fff; border-color: transparent; color: var(--color-text-muted); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.55); }
.phones-hero .phone-search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-stat { display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding-inline: 12px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px var(--color-inverse-border); font-size: var(--text-xs); white-space: nowrap; }
.hero-stat b { font-size: var(--text-base); font-weight: 800; color: var(--color-accent); }
.hero-stat .icon { color: var(--color-accent); }

.unit { --band-bg: linear-gradient(to left, var(--u-bg), color-mix(in srgb, var(--u-bg) 35%, var(--mix-white))); --title-color: var(--u-fg); overflow: hidden; border-block-start: 4px solid var(--u); transition: transform .15s, box-shadow .15s; }
.unit:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--u) 75%, transparent); }
.unit > .block-head:first-child { border-radius: 0; border-block-end-color: color-mix(in srgb, var(--u) 22%, var(--color-border)); }
.unit .block-title { gap: 10px; }
.unit-icon { display: grid; place-items: center; flex-shrink: 0; inline-size: 32px; block-size: 32px; border-radius: 10px; background: var(--u); color: var(--u-on); box-shadow: 0 6px 14px -8px var(--u); }
.unit-icon .icon { inline-size: 18px; block-size: 18px; stroke-width: 2; }
.unit-count { flex-shrink: 0; padding: 0 10px; border-radius: var(--radius-full); background: var(--neutral-0); color: var(--u-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--u) 35%, transparent); font-size: var(--text-xs); line-height: 1.9; font-weight: 600; }
.unit .ptable tbody tr:hover { background: color-mix(in srgb, var(--u-bg) 60%, var(--mix-white)); }
.unit .ext { background: var(--u); color: var(--u-on); box-shadow: 0 6px 12px -8px var(--u); letter-spacing: 0.02em; }
.unit .pline .icon, .unit .pline-label { color: var(--u); }
.unit .p-who strong { color: var(--color-text); }

@media print {
  .phones-hero { padding: 0; background: none; color: #000; box-shadow: none; }
  .phones-hero::before, .phones-hero::after { display: none; }
  .phones-hero-tile { display: none; }
  .phones-hero-sub { color: #444; }
  .unit { border-block-start-width: 2px; transform: none !important; }
  .unit .ext { background: none !important; color: #000 !important; border: 1px solid #888; box-shadow: none; }
  .unit-icon { display: none; }
}

/* admin: unit colour shown on its card and on the units page */
.ucard[class*="ut-"] { border-inline-start: 4px solid var(--u); }
.ucard[class*="ut-"] .ucard-num { background: var(--u); color: var(--u-on); }
.ucard[class*="ut-"] .ucard-head { background: linear-gradient(to left, var(--u-bg), color-mix(in srgb, var(--u-bg) 40%, var(--mix-white))); }
.unit-swatch { display: inline-block; inline-size: 22px; block-size: 22px; border-radius: 7px; background: var(--u); vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.unit-rename select { inline-size: auto; min-inline-size: 130px; }

/* ---------- News boxes: internal box above the general one; 3 items visible, scroll for more ---------- */
/* coloured box header: a home-page box (news, info, link group) with a tone picked in the portal settings.
   Uses the same tone variables as the phone units (.ut-*). */
.boxt { --band-bg: linear-gradient(to left, var(--u-bg), color-mix(in srgb, var(--u-bg) 30%, var(--mix-white))); --title-color: var(--u-fg); border-block-start: 3px solid var(--u); }
.boxt > .block-head .block-title .tile:has(> svg), .boxt .boxrow-head .tile:has(> svg) { background: var(--u); color: var(--u-on); box-shadow: 0 6px 14px -8px var(--u); }
.boxt .date-badge { background: var(--u-bg); color: var(--u-fg); }
.boxt .feed-item:hover .feed-title { color: var(--u); }
.feed-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-primary) 28%, transparent) transparent; padding-inline-end: 6px; margin-inline-end: -6px; }
.feed-scroll.is-scrollable {
  background:
    linear-gradient(var(--color-surface) 30%, rgba(255, 255, 255, 0)) top / 100% 28px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), var(--color-surface) 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 38, 77, 0.18), transparent) top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 38, 77, 0.18), transparent) bottom / 100% 12px no-repeat scroll;
}
.feed-scroll:focus-visible { outline-offset: -3px; border-radius: var(--radius-md); }
.feed-more { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text-muted); }
.empty--compact { padding-block: var(--space-3); }
.empty--compact .tile { inline-size: 44px; block-size: 44px; border-radius: 12px; }
.pins:empty { display: none; }

/* category tabs on the news list page */
.seg { justify-self: start; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-1); }
.seg a { display: inline-flex; align-items: center; min-block-size: 34px; padding-inline: 14px; border-radius: var(--radius-full); color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; }
.seg a:hover { color: var(--color-ink); background: var(--color-primary-subtle); }
.seg a[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); }

/* slides admin: timing row */
.interval-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.interval-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.interval-field input { inline-size: 84px; min-block-size: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-base); font-weight: 700; text-align: center; }
.interval-field input:focus { border-color: var(--brand-navy-500); box-shadow: 0 0 0 4px rgba(79, 114, 183, 0.15); outline: none; }
.interval-field input:disabled { opacity: 0.5; }
.interval-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { min-block-size: 32px; padding-inline: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); cursor: pointer; }
.chip:hover { border-color: var(--brand-navy-500); color: var(--color-ink); }
.chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* ---------- Bell: a silent "ring" every 15 s to catch the eye (JS toggles .is-ringing and adds sparkles) ---------- */
.bell .icon { transform-origin: 50% 10%; }
.bell.is-ringing .icon { animation: bell-swing 1.8s cubic-bezier(.36, .07, .19, .97) both; }
.bell.is-ringing:not(.is-on) { animation: bell-halo 1.8s ease-out both; color: var(--color-ink); }
.bell.is-on.is-ringing { animation: bell-pop-on 1.8s ease-out both; }
.bell.is-on.is-ringing::before { content: ""; position: absolute; top: 7px; right: 7px; inline-size: 9px; block-size: 9px; border-radius: 50%; background: #E5484D; animation: bell-dot-ripple .8s ease-out 2 both; pointer-events: none; }
@keyframes bell-swing {
  0% { transform: rotate(0); }
  5% { transform: rotate(26deg); }
  12% { transform: rotate(-24deg); }
  19% { transform: rotate(20deg); }
  26% { transform: rotate(-16deg); }
  33% { transform: rotate(12deg); }
  40% { transform: rotate(-8deg); }
  47% { transform: rotate(5deg); }
  54% { transform: rotate(-2deg); }
  60%, 100% { transform: rotate(0); }
}
@keyframes bell-halo {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); background: var(--color-accent-subtle); }
  10% { transform: translateY(-2px) scale(1.06); }
  25% { transform: none; }
  70% { box-shadow: 0 0 0 16px transparent; background: var(--color-accent-subtle); }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}
@keyframes bell-pop-on {
  0% { transform: scale(1); box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--color-accent) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 0 color-mix(in srgb, var(--color-accent) 65%, transparent); }
  9% { transform: translateY(-3px) scale(1.13); }
  22% { transform: translateY(0) scale(.97); }
  32% { transform: scale(1); }
  75% { box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--color-accent) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 18px transparent; }
  100% { transform: scale(1); box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--color-accent) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 0 transparent; }
}
@keyframes bell-dot-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(3.6); opacity: 0; } }

/* sparkles: amber four-point stars of mixed sizes that twinkle out from the bell and vanish */
.bell-sparkles { position: absolute; top: 50%; left: 50%; inline-size: 0; block-size: 0; pointer-events: none; z-index: 2; }
.bell-sparkle { position: absolute; top: 0; left: 0; inline-size: var(--s); block-size: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); color: var(--c); opacity: 0; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-accent) 75%, transparent)); animation: bell-sparkle 1.15s cubic-bezier(.2, .7, .3, 1) var(--d) both; }
.bell-sparkle svg { display: block; inline-size: 100%; block-size: 100%; fill: currentColor; }
@keyframes bell-sparkle {
  0% { opacity: 0; transform: translate(calc(var(--x) * .3), calc(var(--y) * .3)) scale(0) rotate(0deg); }
  28% { opacity: 1; transform: translate(calc(var(--x) * .85), calc(var(--y) * .85)) scale(1.2) rotate(calc(var(--r) * .5)); }
  55% { opacity: 1; transform: translate(var(--x), var(--y)) scale(.85) rotate(var(--r)); }
  72% { opacity: .9; transform: translate(var(--x), var(--y)) scale(1.05) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 1.12), calc(var(--y) * 1.12)) scale(0) rotate(calc(var(--r) * 1.5)); }
}
/* "animations off" in Windows: a smaller swing and no pop, but the sparkles still twinkle so the bell stays noticeable */
/* reduced motion only softens the swing; the pop and the red-dot ripple the owner asked for stay (working agreement, rule 8) */
@media (prefers-reduced-motion: reduce) {
  .bell.is-ringing .icon { animation-name: bell-swing-soft; }
}
@keyframes bell-swing-soft {
  0% { transform: rotate(0); }
  8% { transform: rotate(16deg); }
  20% { transform: rotate(-13deg); }
  32% { transform: rotate(9deg); }
  44% { transform: rotate(-5deg); }
  56% { transform: rotate(2deg); }
  66%, 100% { transform: rotate(0); }
}

/* top bar: home and news links with a clear "you are here" state */
.topbar .nav-link { padding-inline: var(--space-2); border-radius: var(--radius-md); }
.topbar .nav-link:hover { background: var(--color-primary-subtle); text-decoration: none; }
.topbar .nav-link[aria-current="page"] { background: var(--color-primary-subtle); box-shadow: inset 0 -2px 0 var(--color-accent); }
/* pinned notices sit above the slideshow: keep them to one line of text */
.col-center > .pins .pin { padding-block: 12px; }
.col-center > .pins .pin-text { -webkit-line-clamp: 1; }
.topbar-end .bell { margin-inline-end: 8px; }

/* ---------- Portal settings: sections, live box-header rows, Persian number fields ---------- */
.settings-form { display: grid; gap: var(--space-5); }
.settings-form > .panel { margin: 0; }
.settings-form .field { align-content: start; }
.boxrows { display: grid; gap: var(--space-3); margin-block: var(--space-3); }
.boxrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--band-bg, linear-gradient(to left, var(--color-primary-subtle), color-mix(in srgb, var(--color-primary-subtle) 30%, transparent))); transition: background .2s, border-color .2s; }
.boxrow.boxt { border-block-start-width: 3px; border-block-start-color: var(--u); }
.boxrow-head { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.boxrow-head input { flex: 1; min-inline-size: 0; min-block-size: 40px; padding: 6px 10px; border: 1px dashed transparent; border-radius: var(--radius-md); background: color-mix(in srgb, var(--neutral-0) 55%, transparent); font: inherit; font-size: 17px; font-weight: 700; color: var(--title-color, var(--color-ink)); }
.boxrow-head input:hover { border-color: color-mix(in srgb, var(--title-color, var(--color-ink)) 35%, transparent); }
.boxrow-head input:focus { outline: none; border-style: solid; border-color: var(--brand-navy-500); background: var(--neutral-0); box-shadow: 0 0 0 4px rgba(79, 114, 183, 0.15); }
.boxrow-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); }
.boxrow-where { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.tone-dots { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.7); }
.tone-dot { position: relative; display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; cursor: pointer; }
.tone-dot input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tone-dot .unit-swatch { inline-size: 22px; block-size: 22px; border-radius: 50%; transition: transform .15s; }
.tone-dot:hover .unit-swatch { transform: scale(1.12); }
.tone-dot:has(input:checked) { box-shadow: inset 0 0 0 2px var(--color-primary); }
.tone-dot:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 1px; }
.unit-swatch.is-auto { background: linear-gradient(to left, var(--color-primary-subtle), var(--neutral-0)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 45%, transparent); }
.settings-save { position: sticky; inset-block-end: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(6px); box-shadow: 0 -8px 20px -14px rgba(0, 38, 77, 0.35); }
.inline-num { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.inline-num .num-input, .num-input { font-weight: 700; text-align: center; }
.settings-form .inline-num input.num-input { inline-size: 76px; min-block-size: var(--touch); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-base); }
.settings-form .inline-num input.num-input:disabled { opacity: 0.45; }
.field > .num-input { max-inline-size: 120px; }
.push-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-block: var(--space-3); }
.push-count { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-ink); font-size: var(--text-sm); }
.push-count b { font-size: 20px; }
.settings-hint { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-4); padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-primary-subtle); color: var(--color-text); font-size: var(--text-sm); }
@media (max-width: 760px) {
  .boxrow { grid-template-columns: minmax(0, 1fr); }
  .boxrow-side { justify-content: space-between; }
}

/* ---------- News agency: sections, credits, star ratings (public) ---------- */
.tag--section { padding-inline: 8px; font-size: 11px; line-height: 1.7; }
.article-meta a.tag { text-decoration: none; }
.article-meta a.tag:hover { box-shadow: inset 0 0 0 1px currentColor; }
.section-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.section-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding-inline: 12px 14px; border: 1px solid transparent; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.section-chip:hover { border-color: currentColor; }
.section-chip[aria-current="page"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; font-weight: 700; }
.article-figure { position: relative; margin: 0; }
.photo-credit { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; max-inline-size: calc(100% - 20px); padding: 2px 10px; border-radius: var(--radius-full); background: rgba(0, 20, 40, 0.58); color: #fff; font-size: 11px; line-height: 1.9; backdrop-filter: blur(4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-credit a { color: inherit; text-decoration: none; }
.photo-credit a:hover { text-decoration: underline; }
.article-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.article-sources a { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.article-sources a:hover { text-decoration: underline; }
.byline-ai { display: inline-flex; align-items: center; gap: 4px; color: var(--color-ink); font-weight: 600; }
.byline-ai .icon { inline-size: 1.15em; block-size: 1.15em; }
.ai-byline { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px dashed color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); border-radius: var(--radius-md); background: var(--color-primary-subtle); }
.ai-byline p { margin: 0; font-size: var(--text-sm); line-height: 1.9; color: var(--color-text); }
.ai-byline strong { color: var(--color-ink); }
.rate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: linear-gradient(to left, var(--color-accent-subtle), color-mix(in srgb, var(--color-accent-subtle) 25%, transparent)); }
.rate-q { font-size: var(--text-sm); font-weight: 600; color: var(--ink-strong); }
.rate-stars { display: inline-flex; gap: 2px; }  /* RTL: the first star sits on the right */
.rate-star { display: grid; place-items: center; inline-size: 36px; block-size: 36px; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: color-mix(in srgb, var(--color-accent) 55%, var(--neutral-500)); cursor: pointer; transition: transform .12s, color .12s; }
.rate-star .icon { inline-size: 26px; block-size: 26px; }
.rate-star.is-on, .rate-stars:hover .rate-star, .rate-star.is-hot { color: color-mix(in srgb, var(--color-accent) 85%, black); }
.rate-star.is-on .icon, .rate-stars:hover .rate-star .icon, .rate-star.is-hot .icon { fill: var(--color-accent); fill-opacity: 1; }
.rate-stars:hover .rate-star:hover ~ .rate-star:not(.is-hot) { color: color-mix(in srgb, var(--color-accent) 55%, var(--neutral-500)); }
.rate-stars:hover .rate-star:hover ~ .rate-star:not(.is-hot) .icon { fill: none; }
.rate-star:hover { transform: scale(1.12); }
.rate-star.is-pop { animation: star-pop .45s ease-out; }
@keyframes star-pop { 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
.rate-summary { font-size: var(--text-xs); color: var(--color-text-muted); }
.rate-summary.is-thanks { color: var(--color-success-ink); font-weight: 600; }

/* ---------- Newsroom control panel (admin) ---------- */
.seg--wrap { margin-block-end: var(--space-1); }
.nowrap { white-space: nowrap; }
.text-err { color: var(--color-danger-ink); }
.stars-inline { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: color-mix(in srgb, var(--color-accent) 70%, black); }
.stars-inline .icon { fill: var(--color-accent); fill-opacity: 1; }
.newsroom-stats .stat strong { display: flex; align-items: center; gap: var(--space-2); }
.stat .stat-text { font-size: var(--text-lg); line-height: 1.5; }
.stat .stat-model { font-size: var(--text-xs); color: var(--color-text-muted); text-align: end; overflow-wrap: anywhere; }
.dot-live { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 4px var(--color-success-subtle); }
.spinner { inline-size: 11px; block-size: 11px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.drafts { display: grid; }
.section-picks .day-pick span { display: inline-flex; align-items: center; gap: 6px; }
.ask-row { grid-template-columns: minmax(0, 1fr) 140px; align-items: start; }
@media (max-width: 640px) { .ask-row { grid-template-columns: 1fr; } }
.draft-day { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-4) 0 0; padding-block-end: var(--space-2); border-block-end: 2px solid var(--color-border); font-size: var(--text-sm); color: var(--ink-strong); }
.draft-day .count { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.tag--level { background: var(--neutral-100); color: var(--neutral-800); box-shadow: inset 0 0 0 1px var(--neutral-200); }
.draft { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--color-border); }
.draft:first-child { padding-block-start: 0; }
.draft:last-child { border-block-end: 0; padding-block-end: 0; }
.draft-thumb { inline-size: 168px; block-size: 106px; object-fit: cover; border-radius: 12px; background: var(--neutral-100); }
.draft-thumb--empty { display: grid; place-items: center; color: var(--neutral-500); }
.draft-thumb--empty .icon { inline-size: 32px; block-size: 32px; }
.draft-body { display: grid; gap: 6px; align-content: start; min-inline-size: 0; }
.draft-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); font-size: var(--text-xs); }
.draft-meta a.muted { text-decoration: none; }
.draft-meta a.muted:hover { color: var(--color-ink); text-decoration: underline; }
.score { display: inline-flex; color: var(--neutral-200); }
.score .icon { inline-size: 14px; block-size: 14px; }
.score .icon.is-on { color: var(--color-accent); fill: var(--color-accent); fill-opacity: 1; }
.draft-title { font-size: var(--text-base); font-weight: 700; line-height: 1.7; color: var(--color-text); text-decoration: none; }
.draft-title:hover { color: var(--color-ink); }
.draft-en { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.seg .count { margin-inline-start: 6px; padding: 0 7px; border-radius: var(--radius-full); background: var(--neutral-100); font-size: var(--text-xs); }
.seg a[aria-current] .count { background: color-mix(in srgb, var(--mix-white) 22%, transparent); }
/* the agent request form shares the class of the assistant's message box (.ask-form, a one-row flex bar): on narrow
   screens it stacks like any other form */
@media (max-width: 760px) { .page .form.ask-form { display: grid; align-items: stretch; padding: 0; border: 0; background: none; } }
.draft-text { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-text-muted); }
.draft-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: 2px; }
.draft-actions form { display: inline; }
@media (max-width: 639.98px) { .draft { grid-template-columns: 1fr; } .draft-thumb { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; } }
.runs { display: grid; gap: var(--space-2); }
.run details { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--neutral-50); }
.run summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); cursor: pointer; }
.run-when { font-weight: 600; }
.run-nums { color: var(--color-text-muted); }
.run-model { margin-inline-start: auto; font-size: var(--text-xs); }
.run-log { margin: 0; padding: var(--space-3); max-block-size: 340px; overflow: auto; border-block-start: 1px solid var(--color-border); background: var(--color-surface); font-family: var(--font-sans); font-size: 13px; line-height: 1.9; white-space: pre-wrap; border-end-start-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-2); }
.provider-opt { position: relative; display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.provider-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.provider-opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-subtle); box-shadow: inset 0 0 0 1px var(--color-primary); }
.provider-opt:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.provider-name { font-size: var(--text-sm); font-weight: 700; }
.provider-opt small { font-size: 11px; color: var(--color-text-muted); }
.input-with-btn { display: flex; gap: var(--space-2); align-items: center; }
.input-with-btn input { flex: 1; min-inline-size: 0; }
.input-with-btn .btn { flex-shrink: 0; min-block-size: var(--touch); }
.check--sm { min-block-size: 32px; font-size: var(--text-xs); }
.ai-test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ai-test-result { font-size: var(--text-sm); }
.ai-test-result.is-ok { color: var(--color-success-ink); font-weight: 600; }
.ai-test-result.is-err { color: var(--color-danger-ink); }
.day-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.day-pick { position: relative; }
.day-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.day-pick span { display: inline-flex; align-items: center; min-block-size: 38px; padding-inline: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--text-sm); cursor: pointer; }
.day-pick input:checked + span { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.day-pick input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.mode-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-2); }
.mode-pick { position: relative; display: grid; gap: 2px; padding: var(--space-3) var(--space-4); padding-inline-start: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.mode-pick input { position: absolute; inset-inline-start: 14px; inset-block-start: 16px; inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--color-primary); }
.mode-pick strong { font-size: var(--text-sm); }
.mode-pick small { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--color-text-muted); }
.mode-pick:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.field--narrow { max-inline-size: 320px; }
.checks--stack { flex-direction: column; gap: 0; }
.field textarea.textarea-sm { min-block-size: 96px; }
.sec-cell { display: flex; align-items: center; gap: var(--space-3); }
.sec-cell > span:last-child { display: grid; }
.sec-desc { max-inline-size: 52ch; font-size: var(--text-xs); line-height: 1.7; }
.sec-cell .tag { justify-self: start; margin-block-start: 4px; }
.weight { display: inline-flex; gap: 3px; vertical-align: middle; }
.weight-pip { inline-size: 14px; block-size: 6px; border-radius: 3px; background: var(--neutral-200); }
.weight-pip.is-on { background: var(--color-accent); }
.factor { font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.factor.is-up { color: var(--color-success-ink); }
.factor.is-down { color: var(--color-danger-ink); }
.weight-picks { display: flex; gap: 6px; }
.weight-pick { position: relative; }
.weight-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.weight-pick span { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-weight: 700; cursor: pointer; }
.weight-pick input:checked + span { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.weight-pick input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.icon-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-pick { position: relative; }
.icon-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.icon-pick .tile { cursor: pointer; border: 2px solid transparent; }
.icon-pick input:checked + .tile { border-color: var(--color-primary); }
.icon-pick input:focus-visible + .tile { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.src-url { display: block; max-inline-size: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.table tr.is-off td { opacity: .6; }
.field--wide { grid-column: span 2; }
@media (max-width: 639.98px) { .field--wide { grid-column: auto; } }
.feedback-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); }
.rank-list { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: 1.4em; font-size: var(--text-sm); }
.rank-list li { padding-block: 4px; }
.rank-list a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.rank-list a:hover { color: var(--color-ink); }
.rank-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); margin-block-start: 2px; font-size: var(--text-xs); }
.eff-bar { display: inline-block; inline-size: calc(var(--w, 0) * 90px); block-size: 8px; margin-inline-end: var(--space-2); border-radius: 4px; background: linear-gradient(to left, var(--color-accent), color-mix(in srgb, var(--color-accent) 50%, white)); vertical-align: middle; }
.eff-cell { white-space: nowrap; }
.source-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2); }
.source-row input { inline-size: 100%; min-block-size: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); }
.add-source { justify-self: start; }
.field > input + input { margin-block-start: 6px; }
.model-pick { margin-block-start: 6px; font-family: ui-monospace, Consolas, monospace; }

/* ---------- Fun: games page and the portal's own games ---------- */
.fun-page { display: grid; gap: var(--space-5); }
.fun-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-accent-subtle), color-mix(in srgb, var(--color-primary-subtle) 70%, transparent)); }
.fun-hero-tile { inline-size: 56px; block-size: 56px; border-radius: var(--radius-lg); }
.fun-hero-tile .icon { inline-size: 30px; block-size: 30px; }
.fun-hero-title { margin: 0; font-size: var(--text-2xl); color: var(--ink-strong); }
.fun-hero-sub { margin: 4px 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.fun-hero-edit { margin-inline-start: auto; }
.fun-block { display: grid; gap: var(--space-3); }
.fun-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); }
.fun-block-head h2 { margin: 0; font-size: var(--text-lg); color: var(--ink-strong); }
.fun-block-head .muted { font-size: var(--text-xs); }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.game-card { display: flex; align-items: center; gap: var(--space-3); block-size: 100%; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); color: var(--color-text); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.game-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
.game-tile { inline-size: 52px; block-size: 52px; border-radius: var(--radius-md); flex-shrink: 0; }
.game-tile .icon { inline-size: 28px; block-size: 28px; }
.game-card--online .game-tile { inline-size: 40px; block-size: 40px; }
.game-card--online .game-tile .icon { inline-size: 22px; block-size: 22px; }
.game-body { display: grid; gap: 2px; min-inline-size: 0; }
.game-body strong { font-size: var(--text-base); color: var(--ink-strong); }
.game-body span { font-size: var(--text-xs); line-height: 1.8; color: var(--color-text-muted); }
.game-go { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.game-ext { margin-inline-start: auto; color: var(--color-text-muted); align-self: flex-start; }

/* ---------- software downloads page (/software) ---------- */
.sw-hero-text { flex: 1 1 320px; min-inline-size: 0; }
.sw-hero-search { flex: 1 1 220px; max-inline-size: 340px; margin-inline-start: auto; }
.sw-hero-search .search-field { background: var(--color-surface); border-color: var(--color-border); }
.sw-hero-edit { flex-shrink: 0; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.sw-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "tile body get"; align-items: center; gap: var(--space-3); block-size: 100%; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); transition: transform .15s, box-shadow .15s, border-color .15s; }
.sw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
.sw-tile { grid-area: tile; inline-size: 52px; block-size: 52px; border-radius: var(--radius-md); align-self: start; }
.sw-tile .icon { inline-size: 28px; block-size: 28px; }
.sw-tile img { inline-size: 30px; block-size: 30px; object-fit: contain; }
.sw-tile .emoji { font-size: 26px; }
.sw-body { grid-area: body; display: grid; gap: 4px; min-inline-size: 0; }
.sw-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sw-title strong { font-size: var(--text-base); color: var(--ink-strong); overflow-wrap: anywhere; }
.sw-desc { margin: 0; font-size: var(--text-xs); line-height: 1.8; color: var(--color-text-muted); }
.sw-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--text-xs); line-height: 1.8; color: var(--color-text-muted); }
.sw-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sw-meta .icon { inline-size: 14px; block-size: 14px; }
.sw-get { grid-area: get; align-self: center; }
@media (max-width: 479.98px) {
  .sw-card { grid-template-columns: auto 1fr; grid-template-areas: "tile body" "get get"; }
  .sw-get { inline-size: 100%; }
  .sw-hero-search { flex-basis: 100%; max-inline-size: none; margin-inline-start: 0; }
}
/* admin: source box and the upload progress bar of the software form */
.sw-src { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.sw-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--text-sm); }
.sw-file .icon { color: var(--color-ink); }
.sw-hash { font-size: 11px; overflow-wrap: anywhere; }
.sw-progress { display: grid; gap: 6px; font-size: var(--text-xs); color: var(--color-text-muted); }
.sw-progress.is-error { color: var(--color-danger); }
.sw-progress-bar { block-size: 8px; border-radius: var(--radius-full); background: var(--neutral-100); overflow: hidden; }
.sw-progress-bar i { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: inline-size .2s; }
/* admin: the file-server picker of the software form and the connection page */
.fs-browser { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.fs-bar { display: flex; align-items: center; gap: var(--space-2); min-block-size: 44px; padding: 2px 6px 2px 10px; background: var(--color-primary-subtle); border-block-end: 1px solid var(--color-border); }
.fs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; flex: 1; min-inline-size: 0; font-size: var(--text-xs); }
.fs-crumbs button { padding: 4px 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-ink); font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.fs-crumbs button:hover { background: var(--color-surface); }
.fs-crumbs button[aria-current="true"] { font-weight: 700; color: var(--ink-strong); cursor: default; }
.fs-crumbs .icon { inline-size: 14px; block-size: 14px; color: var(--color-text-muted); }
.fs-refresh { inline-size: 36px; block-size: 36px; flex-shrink: 0; }
.fs-list { margin: 0; padding: 4px; list-style: none; max-block-size: 340px; overflow-y: auto; }
.fs-item { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; min-block-size: 42px; padding: 6px 10px; border: 0; border-inline-start: 3px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-sm); text-align: start; cursor: pointer; }
.fs-item:hover { background: var(--color-bg); }
.fs-item .icon { color: var(--color-ink); }
.fs-item.is-dir .icon, .fs-sample .icon.is-dir { color: var(--color-warning-ink); }
.fs-name { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.fs-meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 479.98px) { .fs-item { flex-wrap: wrap; } .fs-meta { inline-size: 100%; padding-inline-start: 28px; } }
.fs-status { margin: 0; padding: 12px 14px; font-size: var(--text-sm); color: var(--color-text-muted); }
.fs-status.is-error { color: var(--color-danger-ink); }
.fs-sample { display: grid; gap: 2px; margin: var(--space-2) 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.fs-sample li { display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--color-bg); }
.fs-sample .muted { margin-inline-start: auto; font-size: var(--text-xs); }
.fs-guide { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding-inline-start: 22px; font-size: var(--text-sm); line-height: 1.9; }
.fun-switch { padding-block: var(--space-3); }
.game-panel { display: grid; gap: var(--space-4); }
.game-head { display: flex; align-items: center; gap: var(--space-3); }
.game-head p { margin: 0; font-size: var(--text-sm); }
.game-title { margin: 0; font-size: var(--text-xl); color: var(--ink-strong); }
.game-root { display: grid; gap: var(--space-3); justify-items: center; }
.game-root .help { justify-self: stretch; text-align: center; }
.game-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); inline-size: 100%; }
.seg button { display: inline-flex; align-items: center; min-block-size: 34px; padding-inline: 14px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.seg button:hover { color: var(--color-ink); background: var(--color-primary-subtle); }
.seg button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.game-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.game-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--neutral-100); font-size: var(--text-xs); color: var(--color-text-muted); }
.game-stat b { font-size: var(--text-sm); color: var(--ink-strong); }
.game-msg { min-block-size: 1.8em; margin: 0; font-weight: 700; color: var(--color-success-ink); text-align: center; }
.game-others { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* sudoku */
.sdk-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.sdk-board { display: grid; grid-template-columns: repeat(9, 1fr); inline-size: min(460px, calc(100vw - 64px)); aspect-ratio: 1; border: 2px solid var(--brand-navy-900); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.sdk-cell { display: grid; place-items: center; padding: 0; border: 0; border-inline-end: 1px solid var(--neutral-200); border-block-end: 1px solid var(--neutral-200); background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: clamp(16px, 4.2vw, 24px); font-weight: 500; cursor: pointer; }
.sdk-cell.br { border-inline-end: 2px solid var(--brand-navy-900); }
.sdk-cell.bb { border-block-end: 2px solid var(--brand-navy-900); }
.sdk-cell.is-given { color: var(--ink-strong); font-weight: 800; }
.sdk-cell.is-peer { background: var(--neutral-50); }
.sdk-cell.is-same { background: var(--color-primary-subtle); }
.sdk-cell.is-sel { background: color-mix(in srgb, var(--color-accent) 35%, var(--mix-white)); }
.sdk-cell.is-wrong { color: var(--color-danger-ink); background: var(--color-danger-subtle); }
.sdk-cell:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.sdk-pad { display: grid; grid-template-columns: repeat(5, 56px); gap: 8px; align-content: start; }
.sdk-key { display: grid; place-items: center; gap: 0; block-size: 56px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--ink-strong); font: inherit; font-size: 22px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-1); }
.sdk-key small { font-size: 10px; font-weight: 500; color: var(--color-text-muted); line-height: 1; }
.sdk-key:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.sdk-key:disabled { opacity: .35; cursor: default; }
.sdk-erase { color: var(--color-danger-ink); }
@media (min-width: 900px) { .sdk-pad { grid-template-columns: repeat(2, 60px); } .sdk-key { block-size: 60px; } }
/* memory pairs */
.mem-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 10px; inline-size: min(calc(var(--cols, 4) * 104px), calc(100vw - 64px)); }
.mem-card { aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; }
.mem-inner { position: relative; display: block; inline-size: 100%; block-size: 100%; transition: transform .35s; transform-style: preserve-3d; }
.mem-card.is-open .mem-inner { transform: rotateY(180deg); }
.mem-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--radius-md); backface-visibility: hidden; }
.mem-down { background: linear-gradient(135deg, var(--color-primary), var(--brand-navy-900)); color: rgba(255, 255, 255, .55); font-size: 28px; font-weight: 800; box-shadow: var(--shadow-1); }
.mem-up { transform: rotateY(180deg); border: 2px solid currentColor; }
.mem-up .icon { inline-size: 46%; block-size: 46%; }
.mem-card.is-match .mem-up { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 45%, transparent); }
.mem-card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-md); }
/* typing */
.type-box { display: grid; gap: var(--space-3); inline-size: min(760px, 100%); }
.type-target { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--neutral-50); border: 1px solid var(--color-border); font-size: 22px; line-height: 2.1; color: var(--color-text-muted); }
.type-target .ok { color: var(--color-success-ink); }
.type-target .bad { color: var(--color-danger-ink); background: var(--color-danger-subtle); border-radius: 3px; }
.type-target .cur { color: var(--ink-strong); box-shadow: inset 0 -3px 0 var(--color-accent); }
.type-input { inline-size: 100%; min-block-size: 56px; padding: 0 var(--space-4); border: 2px solid var(--color-border); border-radius: var(--radius-md); font: inherit; font-size: 20px; }
.type-input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-primary-subtle); }
/* dooz */
.dooz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; inline-size: min(330px, calc(100vw - 64px)); }
.dooz-cell { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-1); cursor: pointer; }
.dooz-cell:hover:not(:disabled) { background: var(--color-primary-subtle); }
.dooz-cell:disabled { cursor: default; }
.dooz-cell svg { inline-size: 62%; block-size: 62%; fill: none; stroke-width: 2.6; stroke-linecap: round; }
.dooz-cell.is-x svg { stroke: var(--color-primary); }
.dooz-cell.is-o svg { stroke: color-mix(in srgb, var(--color-accent) 80%, black); }
.dooz-cell.is-line { background: color-mix(in srgb, var(--color-success) 16%, var(--mix-white)); border-color: var(--color-success); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(.3); }
.ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ask-status { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ask-status.is-busy { padding: 6px 14px; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-ink); font-weight: 600; }
.ask-status [data-ask-text] { overflow-wrap: anywhere; }
.tag-new { background: var(--color-success-subtle); color: var(--color-success-ink); font-weight: 700; }
.game-frame { display: block; inline-size: 100%; block-size: 820px; border: 0; border-radius: var(--radius-md); background: #faf8ef; }
.game-credit { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.game-credit a { color: var(--color-ink); font-weight: 600; }
.tag--own { background: var(--color-warning-subtle); color: var(--color-warning-ink); }

/* ---------- Employee services: contact forms and the inbox ---------- */
.nav-badge { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; margin-inline-start: auto; padding-inline: 6px; border-radius: var(--radius-full); background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.seg a .nav-badge { margin-inline-start: 6px; }
.contact-panel { display: grid; gap: var(--space-4); }
.contact-head { display: flex; align-items: center; gap: var(--space-3); }
.contact-head p { margin: 2px 0 0; font-size: var(--text-sm); }
.contact-title { margin: 0; font-size: var(--text-xl); color: var(--ink-strong); }
.contact-intro { color: var(--color-text); }
.contact-privacy { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--neutral-50); border: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.contact-privacy p { margin: 0; line-height: 1.9; }
.contact-privacy.is-anon { background: var(--color-success-subtle); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); color: color-mix(in srgb, var(--color-success) 70%, black); }
.contact-privacy .icon { flex-shrink: 0; margin-block-start: 4px; }
.contact-form textarea { min-block-size: 180px; }
.contact-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-done { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-success-subtle); }
.contact-done p { margin: 4px 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.inbox { display: grid; margin: 0; padding: 0; list-style: none; }
.msg { display: grid; gap: var(--space-2); padding: var(--space-4); border-block-end: 1px solid var(--color-border); border-inline-start: 3px solid transparent; }
.msg.is-new { border-inline-start-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary-subtle) 45%, transparent); }
.msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); font-size: var(--text-xs); }
.msg-from { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-muted); }
.msg-subject { margin: 0; font-size: var(--text-base); color: var(--ink-strong); }
.msg-body { font-size: var(--text-sm); }
.msg-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.box-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.box-card-text { flex: 1 1 280px; min-inline-size: 0; }
.box-card-title { margin: 0; font-size: var(--text-base); color: var(--ink-strong); }
.box-card-text p { margin: 2px 0 0; font-size: var(--text-sm); }
.box-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mail-status { display: flex; align-items: flex-start; gap: var(--space-2); margin-block-end: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.9; }
.mail-status.is-ready { background: var(--color-success-subtle); color: var(--color-success-ink); }
.mail-status.is-off { background: var(--color-warning-subtle); color: var(--color-warning-ink); }
.mail-status .icon { flex-shrink: 0; margin-block-start: 4px; }
.mail-status.is-err { background: var(--color-danger-subtle); color: var(--color-danger-ink); }
.mail-forms { display: grid; gap: 6px; margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: var(--text-sm); }
.mail-forms li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mail-test { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.mail-test .field { flex: 1 1 260px; }
.mail-note { display: flex; align-items: center; gap: 6px; }
.contact-off { background: var(--color-warning-subtle); }

/* ---------- Theme toggle (top bar) and dark-mode touches ---------- */
.theme-toggle .icon-sun { display: none; }
@supports (color: light-dark(#000, #fff)) {
  :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
  :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
  :root[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
    :root:not([data-theme="light"]) .brand-logo { filter: brightness(0) invert(1); }
  }
}
/* the phone-directory search box stays white on the navy hero in both themes */
.phones-hero .phone-search, .phones-hero .phone-search input { color: #1F2937; }
.phones-hero .phone-search .icon { color: #6B7280; }
@media print { :root, :root[data-theme="dark"] { color-scheme: light; } }

/* ---------- «از هوشیار بپرس»: the assistant button in the home greeting strip, and its chat panel ---------- */
.ask-dock { display: flex; align-items: center; justify-content: center; margin-inline-start: auto; margin-inline-end: var(--space-3); }
@media (max-width: 767.98px) { .ask-dock { margin-inline-end: 0; } }
.ask-fab { display: grid; justify-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ask-fab-icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border: 2px solid var(--color-accent); border-radius: 14px; background: color-mix(in srgb, var(--color-primary) 70%, #0B1A33); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08); transition: border-width 0.12s, box-shadow 0.2s, transform 0.15s; }
.ask-fab img { inline-size: 28px; block-size: 28px; filter: brightness(0) invert(1); pointer-events: none; }
.ask-fab:hover .ask-fab-icon, .ask-fab:focus-visible .ask-fab-icon, .ask-fab.is-open .ask-fab-icon { border-width: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 32%, transparent), 0 0 26px color-mix(in srgb, var(--color-accent) 75%, transparent), 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.ask-fab:focus-visible { outline: none; }
.ask-fab:active .ask-fab-icon { transform: scale(0.95); }
.ask-fab-label { font-size: var(--text-xs); line-height: 1.4; font-weight: 700; color: var(--color-accent); white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); animation: ask-wink 1.6s ease-in-out infinite; }
@keyframes ask-wink { 0%, 100% { opacity: 1; text-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 80%, transparent), 0 1px 10px rgba(0, 0, 0, 0.45); } 50% { opacity: 0.18; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); } }
.ask-panel { position: fixed; right: 20px; top: 84px; z-index: 61; display: flex; flex-direction: column; inline-size: 400px; max-inline-size: calc(100vw - 24px); block-size: min(580px, calc(100vh - 24px)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent); overflow: hidden; }
.ask-panel.is-sheet { inset: auto 0 0 0 !important; inline-size: auto !important; max-inline-size: none; block-size: min(85vh, 640px); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ask-head { display: flex; align-items: center; gap: var(--space-2); padding: 10px 10px 10px 14px; background: var(--color-surface-inverse); color: var(--color-on-inverse); }
.ask-avatar { display: grid; place-items: center; flex-shrink: 0; inline-size: 36px; block-size: 36px; border-radius: 10px; background: var(--color-accent); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); }
.ask-avatar img { inline-size: 20px; block-size: 20px; filter: brightness(0); }
.ask-head-text { display: grid; flex: 1; min-inline-size: 0; line-height: 1.4; }
.ask-head-text strong { font-size: var(--text-base); }
.ask-head-text small { font-size: var(--text-xs); color: var(--color-on-inverse-muted); }
.ask-tool { display: inline-flex; align-items: center; gap: 4px; min-block-size: 32px; padding-inline: 10px; border: 1px solid var(--color-inverse-border); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); color: inherit; font-size: var(--text-xs); cursor: pointer; }
.ask-tool:hover { background: rgba(255, 255, 255, 0.18); }
.ask-head .icon-btn { color: inherit; }
.ask-head .icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.ask-log { flex: 1; overflow: auto; padding: 14px; display: grid; gap: 10px; align-content: start; background: var(--color-bg); overscroll-behavior: contain; }
.ask-msg { position: relative; display: grid; gap: 2px; justify-items: start; max-inline-size: 92%; }
.ask-msg--user { justify-self: end; justify-items: end; }
.ask-bubble { padding: 9px 12px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--text-sm); line-height: 1.9; overflow-wrap: anywhere; }
.ask-msg--assistant .ask-bubble { border-start-start-radius: 4px; }
.ask-msg--user .ask-bubble { background: var(--color-primary); color: var(--color-on-primary); border-color: transparent; border-start-end-radius: 4px; }
.ask-bubble p { margin: 0 0 6px; }
.ask-bubble p:last-child { margin-block-end: 0; }
.ask-bubble ul, .ask-bubble ol { margin: 4px 0 6px; padding-inline-start: 18px; }
.ask-bubble ul { list-style: disc; }
.ask-bubble ol { list-style: decimal; }
.ask-bubble li { margin: 2px 0; }
.ask-bubble code { padding: 0 4px; border-radius: 4px; background: var(--neutral-100); font-family: ui-monospace, Consolas, monospace; font-size: 12px; direction: ltr; unicode-bidi: isolate; }
.ask-bubble pre { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--neutral-100); direction: ltr; text-align: left; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow: auto; }
.ask-bubble a { color: var(--color-ink); font-weight: 600; }
.ask-msg--user .ask-bubble a, .ask-msg--user .ask-bubble code { color: inherit; background: rgba(255, 255, 255, 0.15); }
.ask-copy { position: absolute; inset-inline-end: -2px; inset-block-start: 4px; display: grid; place-items: center; inline-size: 26px; block-size: 26px; border: 0; border-radius: 6px; background: var(--color-surface); color: var(--color-text-muted); opacity: 0; cursor: pointer; box-shadow: var(--shadow-1); }
.ask-msg:hover .ask-copy, .ask-copy:focus-visible { opacity: 1; }
.ask-copy.is-done { color: var(--color-success-ink); opacity: 1; }
.ask-status { font-size: var(--text-xs); color: var(--color-text-muted); padding-inline: 4px; }
.ask-status:empty { display: none; }
.ask-typing { display: inline-flex; gap: 4px; padding: 6px 2px; }
.ask-typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--color-text-muted); animation: ask-blink 1.2s infinite; }
.ask-typing i:nth-child(2) { animation-delay: 0.2s; }
.ask-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes ask-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: var(--color-bg); }
.ask-chip { border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); padding: 4px 12px; font-size: var(--text-xs); line-height: 1.8; color: var(--color-ink); cursor: pointer; }
.ask-chip:hover { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.ask-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-block-start: 1px solid var(--color-border); background: var(--color-surface); }
.ask-form textarea { flex: 1; min-inline-size: 0; min-block-size: 40px; max-block-size: 140px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--neutral-50); resize: none; line-height: 1.7; font-size: var(--text-sm); }
.ask-form textarea:focus { outline: none; border-color: var(--brand-navy-500); box-shadow: 0 0 0 4px rgba(79, 114, 183, 0.15); }
.ask-send { display: grid; place-items: center; flex-shrink: 0; inline-size: 40px; block-size: 40px; border: 0; border-radius: 12px; background: var(--color-primary); color: var(--color-on-primary); cursor: pointer; }
.ask-send:hover { background: var(--color-primary-hover); }
.ask-send:disabled { opacity: 0.45; cursor: default; }
.ask-send .icon { transform: scaleX(-1); }
.ask-note { margin: 0; padding: 0 14px 10px; font-size: 11px; line-height: 1.7; color: var(--color-text-muted); background: var(--color-surface); }
.ask-err { color: var(--color-danger-ink); }
/* the label keeps winking under reduced motion too: the user asked for it, like the slideshow */
@media print { .ask-fab, .ask-panel { display: none !important; } }

/* ---------- Backgammon «تخته نرد»: board themes are sets of variables on .bg[data-theme] ---------- */
.bg { display: grid; gap: var(--space-3); }
.bg[data-theme="karun"] { --bg-frame-hi: #1C4F8A; --bg-frame-lo: #00213F; --bg-pt-a2: #3A5A96; --bg-pt-b2: #D98F0E; --bg-ck0-hi: #4A7AC0; --bg-ck0-lo: #061A35; --bg-ck1-hi: #FFFFFF; --bg-ck1-lo: #C9BB98; --bg-dice-hi: #FFFFFF; --bg-dice-side: #D6D9DE; --bg-dice-side2: #B9BEC6; --bg-frame: #003366; --bg-inner: #0B2B55; --bg-field: #F8F1E1; --bg-field2: #F0E4CB; --bg-pt-a: #4F72B7; --bg-pt-b: #F2A516; --bg-bar: #061A35; --bg-tray: #082347; --bg-ck0: #12325E; --bg-ck0-edge: #3D6AA8; --bg-ck1: #F3ECD9; --bg-ck1-edge: #CBBE9E; --bg-dice: #FFFFFF; --bg-pip: #003366; --bg-num: #B8C4D6; --bg-hl: #2BB673; --bg-sel: #F2A516; }
.bg[data-theme="wood"] { --bg-frame-hi: #8A5A33; --bg-frame-lo: #2E1708; --bg-pt-a2: #5E2F10; --bg-pt-b2: #D8C29A; --bg-ck0-hi: #5C5048; --bg-ck0-lo: #0C0A08; --bg-ck1-hi: #FFFFFF; --bg-ck1-lo: #C7BBA6; --bg-dice-hi: #FFFFFF; --bg-dice-side: #DAD3C4; --bg-dice-side2: #BBB2A1; --bg-frame: #4A2814; --bg-inner: #6B3A1E; --bg-field: #E9D3A6; --bg-field2: #D9BF8A; --bg-pt-a: #8B4A1E; --bg-pt-b: #F4E3C1; --bg-bar: #3B1F0E; --bg-tray: #4A2814; --bg-ck0: #231D19; --bg-ck0-edge: #5A4D44; --bg-ck1: #F7F2E8; --bg-ck1-edge: #CFC3AE; --bg-dice: #FBF7EE; --bg-pip: #2B1B10; --bg-num: #E6D2AA; --bg-hl: #2E9E5B; --bg-sel: #F2A516; }
.bg[data-theme="green"] { --bg-frame-hi: #6B5039; --bg-frame-lo: #1F160E; --bg-pt-a2: #E0D1AE; --bg-pt-b2: #8E2A2B; --bg-ck0-hi: #FFFFFF; --bg-ck0-lo: #B9AE9A; --bg-ck1-hi: #5A5755; --bg-ck1-lo: #050505; --bg-dice-hi: #FFFFFF; --bg-dice-side: #D9D9D9; --bg-dice-side2: #BDBDBD; --bg-frame: #3A2A1D; --bg-inner: #4E3A29; --bg-field: #1F7A44; --bg-field2: #19653A; --bg-pt-a: #F4E8CB; --bg-pt-b: #B9393B; --bg-bar: #2A1D13; --bg-tray: #3A2A1D; --bg-ck0: #F6F1E7; --bg-ck0-edge: #CBC2B0; --bg-ck1: #1C1B1A; --bg-ck1-edge: #4B4745; --bg-dice: #FFFFFF; --bg-pip: #111; --bg-num: #D8CBB6; --bg-hl: #F2A516; --bg-sel: #F2A516; }
.bg[data-theme="turquoise"] { --bg-frame-hi: #2C7B8F; --bg-frame-lo: #072A34; --bg-pt-a2: #0F7D7D; --bg-pt-b2: #B8880F; --bg-ck0-hi: #F0686E; --bg-ck0-lo: #6E0A10; --bg-ck1-hi: #FFFFFF; --bg-ck1-lo: #CDBFA3; --bg-dice-hi: #FFFFFF; --bg-dice-side: #D5DEE0; --bg-dice-side2: #B7C3C6; --bg-frame: #0F4C5C; --bg-inner: #146070; --bg-field: #F5ECD8; --bg-field2: #EDE0C4; --bg-pt-a: #19A3A3; --bg-pt-b: #D6A51B; --bg-bar: #0B3A46; --bg-tray: #0F4C5C; --bg-ck0: #B5121B; --bg-ck0-edge: #E0555C; --bg-ck1: #F8F4E8; --bg-ck1-edge: #D2C7AE; --bg-dice: #FFFFFF; --bg-pip: #0F4C5C; --bg-num: #BFE6E6; --bg-hl: #1E7F4F; --bg-sel: #D6A51B; }
.bg[data-theme="night"] { --bg-frame-hi: #2B3548; --bg-frame-lo: #04070D; --bg-pt-a2: #1D4ED8; --bg-pt-b2: #B45309; --bg-ck0-hi: #FFFFFF; --bg-ck0-lo: #9CA3AF; --bg-ck1-hi: #4B5563; --bg-ck1-lo: #030712; --bg-dice-hi: #FFFFFF; --bg-dice-side: #D1D5DB; --bg-dice-side2: #9CA3AF; --bg-frame: #0B1220; --bg-inner: #161F2E; --bg-field: #2A3446; --bg-field2: #222B3B; --bg-pt-a: #3B82F6; --bg-pt-b: #F59E0B; --bg-bar: #0B1220; --bg-tray: #0F172A; --bg-ck0: #E5E7EB; --bg-ck0-edge: #9CA3AF; --bg-ck1: #1F2937; --bg-ck1-edge: #6B7280; --bg-dice: #F9FAFB; --bg-pip: #111827; --bg-num: #9CA3AF; --bg-hl: #34D399; --bg-sel: #F59E0B; }
/* board on the right (RTL start), controls in a column on its left; one column on narrow screens, board first */
.bg-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "side"; gap: var(--space-4); align-items: start; }
@media (min-width: 1024px) { .bg-layout { grid-template-columns: 272px minmax(0, 1fr); grid-template-areas: "side board"; } }   /* controls on the right of the board (owner, 2026-11-03) */
.bg-board-wrap { grid-area: board; }
.bg-side { grid-area: side; }
.bg-board .bg-mover { pointer-events: none; }   /* the computer's checker while it glides */
.bg-side { display: grid; gap: var(--space-3); align-content: start; }
.bg-head { display: flex; align-items: center; gap: var(--space-2); }
.bg-head .game-title { font-size: var(--text-lg); }
.bg-prefs { display: grid; gap: var(--space-2); padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border); }
.game-panel:has(.bg-layout) { --panel-py: var(--space-3); }
.bg-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.bg-modes { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--radius-full); background: var(--neutral-100); }
.bg-chip { border: 0; border-radius: var(--radius-full); padding: 6px 14px; background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.bg-chip.is-on { background: var(--color-primary); color: var(--color-on-primary); }
.bg-level { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.bg-level select { padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: inherit; font: inherit; font-size: var(--text-sm); }
.bg-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-theme { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 10px 4px 6px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.bg-theme.is-on { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-subtle); }
.bg-theme-dot { inline-size: 16px; block-size: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.bg-theme-dot--karun { background: linear-gradient(135deg, #003366 50%, #F2A516 50%); }
.bg-theme-dot--wood { background: linear-gradient(135deg, #6B3A1E 50%, #E9D3A6 50%); }
.bg-theme-dot--green { background: linear-gradient(135deg, #1F7A44 50%, #B9393B 50%); }
.bg-theme-dot--turquoise { background: linear-gradient(135deg, #19A3A3 50%, #D6A51B 50%); }
.bg-theme-dot--night { background: linear-gradient(135deg, #0B1220 50%, #3B82F6 50%); }
.bg-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.bg-status { min-block-size: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: 1.8; }
.bg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }   /* right after the turn status, not at the far end */
/* game buttons look like real push buttons: lit top, a solid lower edge, and they sink when pressed */
.bg-actions .btn { border-radius: 12px; transition: transform 0.08s, box-shadow 0.08s; }
.bg-actions .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 70%, white) 0%, var(--color-primary) 55%, color-mix(in srgb, var(--color-primary) 85%, black) 100%); box-shadow: 0 5px 0 color-mix(in srgb, var(--color-primary) 55%, black), 0 8px 14px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.bg-actions .btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 60%, white) 0%, var(--color-primary) 55%, color-mix(in srgb, var(--color-primary) 85%, black) 100%); }
.bg-actions .btn-secondary { background: linear-gradient(180deg, #FFFFFF 0%, #EEF1F6 100%); box-shadow: 0 5px 0 #B9C0CC, 0 8px 14px -6px rgba(0, 0, 0, 0.35), inset 0 1px 0 #fff; border-color: #D5DAE3; }
/* auto-roll switch next to the roll button */
.bg-auto { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); cursor: pointer; user-select: none; }
.bg-auto input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.bg-auto-track { position: relative; inline-size: 38px; block-size: 22px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-text-muted) 45%, var(--mix-white)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); transition: background 0.15s; }
.bg-auto-track::after { content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 0.15s; }
.bg-auto input:checked + .bg-auto-track { background: var(--color-primary); }
.bg-auto input:checked + .bg-auto-track::after { transform: translateX(-16px); }   /* RTL page: the knob slides to the inline end */
.bg-auto input:focus-visible + .bg-auto-track { outline: 2px solid var(--brand-navy-500); outline-offset: 2px; }
.bg-actions .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
/* the roll button glows whenever it is the player's turn to roll (also under reduced motion: the owner asked for it) */
.bg-roll { position: relative; animation: bg-roll-glow 1.5s ease-in-out infinite; }   /* outline + glow, so the 3D edge shadow stays */
@keyframes bg-roll-glow { 0%, 100% { outline: 0 solid color-mix(in srgb, var(--color-accent) 70%, transparent); outline-offset: 0; filter: drop-shadow(0 0 0 transparent); } 50% { outline: 4px solid color-mix(in srgb, var(--color-accent) 55%, transparent); outline-offset: 3px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-accent) 90%, transparent)); } }
.bg-status .pill { border-radius: var(--radius-full); padding: 3px 12px; background: var(--color-primary-subtle); color: var(--color-ink); font-weight: 600; font-size: var(--text-xs); }
.bg-status .pill.is-win { background: var(--color-success-subtle); color: var(--color-success-ink); }
.bg-board-wrap { inline-size: 100%; }
.bg-board { display: block; inline-size: 100%; block-size: auto; border-radius: 18px; box-shadow: var(--shadow-2); font-family: inherit; user-select: none; -webkit-user-select: none; }
.bg-board .num { font-size: 13px; fill: var(--bg-num); }
.bg-board .hit { cursor: pointer; fill: transparent; }
.bg-board .hit.is-src { cursor: grab; }
.bg-board .ring { fill: none; stroke: var(--bg-sel); stroke-width: 4; }
.bg-board .target { fill: color-mix(in srgb, var(--bg-hl) 22%, transparent); stroke: var(--bg-hl); stroke-width: 4; stroke-dasharray: 7 6; pointer-events: none; }
.bg-board .target-off { fill: color-mix(in srgb, var(--bg-hl) 25%, transparent); stroke: var(--bg-hl); stroke-width: 4; stroke-dasharray: 7 6; rx: 8; pointer-events: none; }
.bg-board .ck0 { fill: var(--bg-ck0); stroke: var(--bg-ck0-edge); stroke-width: 3; }
.bg-board .ck1 { fill: var(--bg-ck1); stroke: var(--bg-ck1-edge); stroke-width: 3; }
.bg-board .ck-shine { fill: #fff; opacity: 0.32; pointer-events: none; }
.bg-board .ck-count { font-size: 15px; font-weight: 700; pointer-events: none; }
.bg-board .die { stroke: rgba(0, 0, 0, 0.22); stroke-width: 1; }
.bg-board .die-pip { fill: var(--bg-pip); }
.bg-board .die.is-used, .bg-board .die-used { opacity: 0.35; }
.bg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bg-pips { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.bg-pips b { color: var(--color-ink); }
.bg .btn[hidden] { display: none; }
@media (max-width: 639.98px) { .bg-board { border-radius: 10px; } }

/* ---------- Rich text editor (Quill) and editor-made content ---------- */
.rte-wrap .ql-toolbar.ql-snow { border: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--neutral-50); direction: rtl; }
.rte-wrap .ql-container.ql-snow { border: 1px solid var(--color-border); border-block-start: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); font-family: inherit; font-size: var(--text-base); background: var(--color-surface); }
.rte-wrap .ql-editor { min-block-size: 280px; direction: rtl; text-align: right; line-height: 1.9; color: var(--color-text); }
.rte-wrap--ltr .ql-editor { direction: ltr; text-align: left; line-height: 1.7; }
.rte-wrap--ltr .ql-toolbar.ql-snow { direction: ltr; }
.inv-nocard { display: grid; gap: var(--space-3); }
.inv-nocard[hidden] { display: none; }
.en-version { border-inline-start: 4px solid var(--brand-navy-500, var(--color-primary)); }
.en-version .block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.en-review.is-due { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-warning-subtle); color: var(--color-warning-ink); font-weight: 500; }
.rte-wrap .ql-editor.ql-blank::before { right: 15px; left: auto; font-style: normal; color: var(--color-text-muted); }
.rte-wrap .ql-snow .ql-picker { color: var(--color-text); }
.rte-wrap .ql-snow .ql-stroke { stroke: var(--color-text); }
.rte-wrap .ql-snow .ql-fill { fill: var(--color-text); }
.rte-wrap .ql-snow.ql-toolbar button:hover .ql-stroke, .rte-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--color-ink); }
.rte-wrap .ql-snow .ql-picker-options { background: var(--color-surface); border-color: var(--color-border); }
.rte-wrap .ql-snow .ql-tooltip { direction: ltr; background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); box-shadow: var(--shadow-2); }
.rte-wrap .ql-snow .ql-tooltip input[type="text"] { background: var(--neutral-50); color: inherit; border-color: var(--color-border); }
.rte-wrap .ql-snow .ql-picker.ql-font { inline-size: 122px; }
.rte-wrap .ql-snow .ql-picker.ql-size { inline-size: 70px; }
.rte-wrap .ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before, .rte-wrap .ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before { content: attr(data-label); }
.rte-wrap .ql-snow .ql-picker.ql-font .ql-picker-label[data-value]::before, .rte-wrap .ql-snow .ql-picker.ql-font .ql-picker-item[data-value]::before { content: attr(data-value); font-family: attr(data-value); }
.rte-wrap .ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before, .rte-wrap .ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before { content: 'وزیرمتن'; }
.rte-wrap .ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before, .rte-wrap .ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before { content: 'عادی'; }
.rte-wrap .ql-snow .ql-picker.ql-header .ql-picker-label::before, .rte-wrap .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'متن'; }
.rte-wrap .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .rte-wrap .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'تیتر بزرگ'; }
.rte-wrap .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .rte-wrap .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'تیتر کوچک'; }
/* editor classes on public pages */
.prose .ql-align-center { text-align: center; }
.prose .ql-align-left { text-align: left; }
.prose .ql-align-right { text-align: right; }
.prose .ql-align-justify { text-align: justify; }
.prose .ql-direction-ltr { direction: ltr; }
.prose .ql-direction-rtl { direction: rtl; }
.prose .ql-indent-1 { padding-inline-start: 3em; } .prose .ql-indent-2 { padding-inline-start: 6em; } .prose .ql-indent-3 { padding-inline-start: 9em; } .prose .ql-indent-4 { padding-inline-start: 12em; }
.prose h2 { font-size: var(--text-xl); line-height: var(--lh-xl); margin: var(--space-4) 0 var(--space-2); }
.prose h3 { font-size: var(--text-lg); line-height: var(--lh-lg); margin: var(--space-3) 0 var(--space-1); }
.prose ul, .prose ol { margin: var(--space-2) 0; padding-inline-start: 1.6em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin: 2px 0; }
.prose blockquote { margin: var(--space-3) 0; padding: var(--space-2) var(--space-4); border-inline-start: 4px solid var(--color-accent); background: var(--neutral-50); border-radius: var(--radius-sm); }
.prose img { max-inline-size: 100%; block-size: auto; border-radius: 10px; }
.prose a { color: var(--color-ink); }
/* AI help box in the news form */
.ai-help { display: grid; gap: var(--space-3); }
.ai-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ai-help-actions select { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: inherit; font: inherit; font-size: var(--text-sm); }
.ai-out-text { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--neutral-50); }
.ai-titles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ai-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.ai-image { padding: 0; border: 3px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; overflow: hidden; }
.ai-image img { display: block; inline-size: 100%; block-size: auto; border-radius: 9px; }
.ai-image.is-on { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent); }
/* editor in RTL: picker labels clear of the arrow, list markers on the right like the public page */
.rte-wrap .ql-snow .ql-picker-label { padding-inline-start: 22px; padding-inline-end: 8px; }
.rte-wrap .ql-snow .ql-picker.ql-header { inline-size: 100px; }
.rte-wrap .ql-editor ol, .rte-wrap .ql-editor ul { padding-inline-start: 1.5em; padding-left: 0; }
.rte-wrap .ql-editor li { padding-left: 0; padding-inline-start: 1.5em; }
.rte-wrap .ql-editor li > .ql-ui::before { margin-left: 0.3em; margin-right: -1.5em; text-align: left; }
.rte-wrap .ql-editor li[data-list="bullet"] > .ql-ui::before { content: '•'; }
.prose ol { list-style: persian; }
.prose li[data-list="bullet"] { list-style-type: disc; }
/* the grid field gives .rte-wrap a definite height, so Quill's height:100% pushed the container over the next panel */
.rte-wrap .ql-container.ql-snow, .rte-wrap .ql-editor { block-size: auto; }
/* colour tools with a visible label */
.rte-wrap .ql-snow .ql-color-picker { inline-size: auto; }
.rte-wrap .ql-snow .ql-color-picker .ql-picker-label { display: inline-flex; align-items: center; gap: 5px; inline-size: auto; padding: 2px 6px; }
.rte-wrap .ql-snow .ql-color-picker .ql-picker-label::after { font-size: 13px; line-height: 1; white-space: nowrap; }
.rte-wrap .ql-snow .ql-color .ql-picker-label::after { content: 'رنگ متن'; }
.rte-wrap .ql-snow .ql-background .ql-picker-label::after { content: 'رنگ زمینه'; }
.rte-wrap .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }
/* services tiles: the column count follows the box width (complete rows of 2 or 3), rows are equal, texts clamp */
.info-box { container-type: inline-size; }
.info-tiles { grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
@supports (container-type: inline-size) {
  .info-tiles { grid-template-columns: minmax(0, 1fr); }
  @container (min-width: 400px) { .info-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (min-width: 700px) { .info-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}
.info-tile-text strong, .info-tile-text small:not(.info-tile-meta) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* home news on phones: part of the page, four items and a button for the rest (see portal.js) */
@media (hover: none) { .feed-scroll { overscroll-behavior: auto; } }
@media (max-width: 767.98px) { .feed-scroll { overflow: visible; overscroll-behavior: auto; } .feed-scroll.is-collapsed > li:nth-child(n+5) { display: none; } }
.feed-more-btn { inline-size: 100%; justify-content: center; margin-block-start: var(--space-2); }
/* File server: the read-speed result in «آزمایش اتصال» */
.fs-speed { margin-block: var(--space-3); }
.fs-speed p { margin: var(--space-2) 0 0; }
.fs-speed-checks { display: grid; gap: 2px; margin: var(--space-1) 0 0; padding-inline-start: 20px; list-style: disc; }
/* Software form: ticking files and folders on the file server, and the «انتخاب‌شده‌ها» lists (file server, uploads) */
.fs-row { display: flex; align-items: stretch; border-inline-start: 3px solid transparent; border-radius: var(--radius-sm); }
.fs-row:hover { background: var(--color-bg); }
.fs-row.is-checked { background: var(--color-primary-subtle); border-inline-start-color: var(--color-accent); }
.fs-row.is-checked .fs-name { font-weight: 700; }
.fs-row .fs-item { flex: 1; min-inline-size: 0; border-inline-start: 0; padding-inline-start: 4px; background: transparent; }
.fs-row .fs-item:hover { background: transparent; }
.fs-check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; inline-size: 40px; cursor: pointer; }
.fs-check input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.fs-item.is-dir .fs-open { color: var(--color-text-muted); flex-shrink: 0; }
.fs-tray { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.fs-tray[hidden] { display: none; }
.fs-tray-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.fs-tray-head strong { color: var(--ink-strong); }
.fs-tray ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fs-tray .help { margin: 0; }
.fs-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--color-bg); }
.fs-pick > .icon { color: var(--color-ink); }
.fs-pick.is-dir > .icon { color: var(--color-warning-ink); }
.fs-pick input[type="text"] { inline-size: 100%; min-block-size: 38px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.fs-pick-name { font-size: var(--text-sm); font-weight: 700; color: var(--ink-strong); overflow-wrap: anywhere; }
.fs-pick small { grid-column: 2; font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.fs-pick small.is-error { color: var(--color-danger-ink); }
.fs-pick .icon-btn { grid-row: 1; grid-column: 3; }
/* Software page: a folder card opens to the list of its files */
.sw-card--folder.is-open { grid-column: 1 / -1; grid-template-areas: "tile body get" "files files files"; }
.sw-card--folder.is-open:hover { transform: none; }
.sw-chev { transform: rotate(90deg); transition: transform .2s; }
.sw-card--folder.is-open .sw-chev { transform: rotate(-90deg); }
.sw-files { grid-area: files; display: grid; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }
.sw-files[hidden] { display: none; }
.sw-files ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.sw-files ul:empty { display: none; }
.sw-frow { display: flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: var(--text-sm); text-decoration: none; }
.sw-frow:hover { background: var(--color-primary-subtle); }
.sw-frow > .icon { inline-size: 18px; block-size: 18px; flex-shrink: 0; color: var(--color-ink); }
.sw-fname { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.sw-fdir { color: var(--color-text-muted); }
.sw-frow .muted { font-size: var(--text-xs); white-space: nowrap; }
.sw-fget { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; border-radius: var(--radius-sm); color: var(--color-info-ink); }
.sw-files-status { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-files-status.is-error { color: var(--color-danger-ink); }
@media (max-width: 479.98px) {
  .sw-card--folder.is-open { grid-template-areas: "tile body" "get get" "files files"; }
  .sw-files ul { grid-template-columns: 1fr; }
}

/* ───────── staff accounts: sign-in, activation, second step, «حساب من», the admin accounts page ───────── */
.alert-warn { background: var(--color-warning-subtle); border-color: var(--color-warning); color: var(--color-warning-ink); }
.alert-warn a { color: inherit; font-weight: 600; }
.avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--text-xs); }
.avatar--lg { inline-size: 44px; block-size: 44px; font-size: var(--text-base); margin-inline-end: var(--space-2); vertical-align: middle; }
.link--me { gap: var(--space-2); }
/* language switch «فا | EN» (app/i18n.py): two segments; on phones only the other language, as one round button */
.lang-switch { display: inline-flex; align-items: center; padding: 3px; margin-inline-end: var(--space-1); border-radius: var(--radius-full); background: var(--neutral-100); border: 1px solid var(--color-border); font-size: 13px; font-weight: 600; line-height: 1; }
.lang-switch a { display: grid; place-items: center; min-inline-size: 38px; block-size: 30px; padding-inline: 8px; border-radius: var(--radius-full); color: var(--color-text-muted); text-decoration: none; font-family: inherit; }
.lang-switch a:hover { color: var(--ink-strong); text-decoration: none; }
.lang-switch a[aria-current] { background: var(--color-surface); color: var(--ink-strong); box-shadow: var(--shadow-1); }
.lang-switch a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
@media (max-width: 479.98px) {
  .lang-switch { padding: 0; background: none; border: 0; margin-inline-end: 2px; }
  .lang-switch a[aria-current] { display: none; }
  .lang-switch a { min-inline-size: 34px; block-size: 34px; padding-inline: 0; border: 1px solid var(--color-border); background: var(--neutral-100); }
}
/* phones: the logo is the way home and the avatar opens the menu, so the extra home icon and the menu arrow give their
   room to the language switch */
@media (max-width: 479.98px) { .topbar .nav-link--home { display: none; } .me-caret { display: none; } }
/* account menu under the name in the top bar */
.me-menu { position: relative; }
button.link--me { border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); cursor: pointer; }
button.link--me:hover, button.link--me[aria-expanded="true"] { background: var(--neutral-100); text-decoration: none; }
.me-caret { inline-size: 14px; block-size: 14px; color: var(--color-text-muted); transform: rotate(90deg); transition: transform .18s ease; }
.link--me[aria-expanded="true"] .me-caret { transform: rotate(-90deg); }
.me-pop { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 40; display: grid; gap: 2px; min-inline-size: 250px; max-inline-size: min(320px, calc(100vw - 24px)); padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); transform-origin: top; animation: me-pop-in .16s ease-out; }
.me-pop[hidden] { display: none; }
@keyframes me-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.me-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); margin-block-end: var(--space-1); border-block-end: 1px solid var(--color-border); }
.me-who { display: grid; min-inline-size: 0; }
.me-who strong { font-size: var(--text-sm); color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-who small { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-pop form { display: contents; }
.me-item { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; min-block-size: 40px; padding-inline: var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--color-ink); font: inherit; font-size: var(--text-sm); text-align: start; text-decoration: none; cursor: pointer; }
.me-item:hover, .me-item:focus-visible { background: var(--neutral-100); text-decoration: none; outline: none; }
.me-item .icon { color: var(--color-text-muted); }
.me-item--out, .me-item--out .icon { color: var(--color-danger-ink); }
.me-item--out:hover, .me-item--out:focus-visible { background: var(--color-danger-subtle); }
.auth--acc { max-inline-size: 440px; }
.auth--wide { max-inline-size: 560px; }
.acc-pw { position: relative; display: block; }
.acc-pw input { padding-inline-start: 44px !important; }
.acc-eye { position: absolute; inset-block-start: 50%; inset-inline-end: 4px; transform: translateY(-50%); display: grid; place-items: center; inline-size: 36px; block-size: 36px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; }
.acc-eye:hover { color: var(--color-ink); background: var(--color-primary-subtle); }
.acc-eye.is-on { color: var(--color-info-ink); }
.acc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.acc-row--center { justify-content: center; text-align: center; }
.acc-row a { color: var(--color-info-ink); text-decoration: none; }
.acc-row a:hover { text-decoration: underline; }
.acc-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-primary-subtle); color: var(--color-text); font-size: var(--text-xs); line-height: 1.9; }
.acc-note .icon { flex-shrink: 0; inline-size: 16px; block-size: 16px; margin-block-start: 3px; color: var(--color-info-ink); }
.acc-flag { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-warning-subtle); color: var(--color-warning-ink); font-size: var(--text-xs); line-height: 1.9; }
.acc-flag .icon { flex-shrink: 0; inline-size: 16px; block-size: 16px; }
.panel[id] { scroll-margin-block-start: calc(var(--topbar-h) + var(--space-3)); }   /* #password etc. land below the sticky bar */
.acc-btn { inline-size: 100%; justify-content: center; }
.acc-center { text-align: center; }
.acc-mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.08em; text-align: center; }
.acc-text { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: var(--lh-sm); }
.auth-head .tile { inline-size: 52px; block-size: 52px; border-radius: 14px; }
.auth-head .tile .icon { inline-size: 26px; block-size: 26px; }
/* six-digit code: one real input (transparent, on top) and six boxes that mirror it */
.acc-otp { position: relative; display: flex; justify-content: center; gap: var(--space-2); direction: ltr; }
.acc-otp input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; font-size: 26px; letter-spacing: 2em; cursor: text; }
.acc-otp span { display: grid; place-items: center; inline-size: 48px; block-size: 56px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); font-size: 26px; font-weight: 700; pointer-events: none; }
.acc-otp:focus-within span.is-cur { border-color: var(--brand-navy-500); box-shadow: 0 0 0 4px rgba(79, 114, 183, 0.15); }
.acc-otp:focus-within span.is-cur:empty::after { content: ""; inline-size: 2px; block-size: 26px; background: var(--color-ink); animation: acc-blink 1s steps(1) infinite; }
@keyframes acc-blink { 50% { opacity: 0; } }
.acc-person { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-primary-subtle) 45%, var(--color-surface)); }
.acc-person .avatar { inline-size: 44px; block-size: 44px; font-size: var(--text-base); }
.acc-person strong { display: block; font-size: var(--text-base); color: var(--color-ink); }
.acc-person small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.9; }
.acc-meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 4px; margin-block-start: 6px; }
.acc-meter i { block-size: 5px; border-radius: 3px; background: var(--color-border); }
.acc-meter[data-level="1"] i:nth-child(-n+1) { background: var(--color-danger-ink); }
.acc-meter[data-level="2"] i:nth-child(-n+2) { background: var(--color-warning-ink); }
.acc-meter[data-level="3"] i:nth-child(-n+3), .acc-meter[data-level="4"] i { background: var(--color-success-ink); }
.acc-meter b { margin-inline-start: 6px; min-inline-size: 3em; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.acc-meter[data-level="1"] b { color: var(--color-danger-ink); }
.acc-meter[data-level="2"] b { color: var(--color-warning-ink); }
.acc-meter[data-level="3"] b, .acc-meter[data-level="4"] b { color: var(--color-success-ink); }
.acc-rules { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.acc-rules li { display: flex; align-items: center; gap: 6px; }
.acc-rules .icon { inline-size: 15px; block-size: 15px; opacity: 0.35; }
.acc-rules li.is-ok { color: var(--color-success-ink); }
.acc-rules li.is-ok .icon { opacity: 1; }
/* second-step setup and backup codes */
.acc-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0 var(--space-4) 0 0; font-size: var(--text-sm); }
.acc-steps li { display: grid; gap: var(--space-2); }
.acc-steps li::marker { font-weight: 700; color: var(--ink-strong); }
.acc-steps small { color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.9; }
.acc-qr { display: grid; place-items: center; inline-size: 196px; block-size: 196px; padding: 10px; margin-inline: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; color: #0B2A4A; }
.acc-qr svg { inline-size: 100%; block-size: 100%; }
.acc-secret { font-family: ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: 0.05em; color: var(--color-ink); }
.acc-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-family: ui-monospace, Consolas, monospace; font-size: 17px; }
.acc-codes li { padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); text-align: center; letter-spacing: 0.06em; }
/* «حساب من» */
.acc-page { max-inline-size: 1100px; margin-inline: auto; }
.acc-page .page-title { display: flex; align-items: center; }
.acc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; margin-block-start: var(--space-4); }
.acc-details { margin-block-start: var(--space-2); font-size: var(--text-sm); }
.acc-details summary { cursor: pointer; color: var(--color-info-ink); font-weight: 500; }
.acc-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-block-start: var(--space-2); }
.acc-inline .field { flex: 1 1 180px; }
.acc-devices { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.acc-devices li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); }
.keep-note { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--touch); color: var(--color-success-ink); font-size: var(--text-sm); }
.acc-dev-text { display: grid; min-inline-size: 0; }
/* «اعلان‌ها»: this device on one side, what to be told about on the other, the devices below; full width under the four panels */
.acc-notify { grid-column: 1 / -1; }
.acc-notify-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.acc-notify-col { display: grid; align-content: start; gap: var(--space-2); min-inline-size: 0; }
.acc-notify-col .acc-text, .acc-notify-col .help { margin: 0; }
.acc-notify-col .form-actions { margin-block-start: var(--space-2); }
.acc-notify .check span { display: grid; }
.acc-notify .check small { font-size: var(--text-xs); color: var(--color-text-muted); }
.acc-notify .acc-sub { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.acc-notify-keep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-warning-subtle); color: var(--color-warning-ink); font-size: var(--text-xs); line-height: 1.9; }
.acc-notify-keep[hidden] { display: none; }
.acc-notify-keep span { flex: 1 1 220px; }
.acc-notify > .acc-sub.acc-sub { margin-block: var(--space-4) var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
.acc-steps { margin: 0; padding-inline-start: var(--space-5); font-size: var(--text-sm); line-height: var(--lh-sm); }
.acc-notify-result { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-primary-subtle); color: var(--color-ink); font-size: var(--text-sm); line-height: var(--lh-sm); }
.acc-notify-result.is-ok { background: var(--color-success-subtle); color: var(--color-success-ink); }
.acc-notify-result.is-err { background: var(--color-warning-subtle); color: var(--color-warning-ink); }
@media (max-width: 760px) { .acc-notify-grid { grid-template-columns: 1fr; } }
.acc-dev-text small { color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.9; }
.acc-h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--ink-strong); }
.acc-actions { display: grid; gap: var(--space-3); }
.acc-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.acc-actions .help { flex: 1 1 240px; }
/* admin: invitation form, list, access policy */
.acc-switch { border-inline-start: 4px solid var(--color-warning); }
.acc-switch.is-on { border-inline-start-color: var(--color-success); }
.acc-switch-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.acc-switch-form > .icon { flex-shrink: 0; inline-size: 26px; block-size: 26px; color: var(--color-warning-ink); }
.acc-switch.is-on .acc-switch-form > .icon { color: var(--color-success-ink); }
.acc-switch-text { flex: 1 1 320px; font-size: var(--text-sm); }
.acc-switch-text small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.9; }
.acc-send { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); }
.acc-send .provider-name { display: flex; align-items: center; gap: 6px; }
.acc-send .provider-name .icon { inline-size: 16px; block-size: 16px; }
.acc-send .provider-opt:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.acc-send .provider-opt small a { color: var(--color-info-ink); }
.acc-invite { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.acc-preview { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--color-text-muted); }
.acc-preview > small { font-weight: 600; }
.acc-bubble { padding: var(--space-3); border-radius: 14px; border-start-start-radius: 4px; background: var(--color-primary-subtle); color: var(--color-text); line-height: 2; }
.acc-bubble bdi { color: var(--color-info-ink); overflow-wrap: anywhere; }
.acc-who { display: flex; align-items: center; gap: var(--space-2); }
.acc-who > span:last-child { white-space: nowrap; }
.acc-who .avatar { inline-size: 32px; block-size: 32px; font-size: var(--text-xs); }
.acc-who small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.acc-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.acc-sub { display: block; margin-block-start: 2px; font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
/* the lock of an account (owner, 2026-11-10): open and quiet while the account works, closed and red when it is disabled */
.acc-h-lock, .acc-c-lock { text-align: center; }
.acc-lock { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border: 1px solid transparent; border-radius: 50%; background: none;
  color: var(--color-text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; }
.acc-lock:hover { background: var(--color-danger-subtle); color: var(--color-danger-ink); transform: scale(1.06); }
.acc-lock.is-locked { border-color: color-mix(in srgb, var(--color-danger-ink) 35%, transparent); background: var(--color-danger-subtle); color: var(--color-danger-ink); }
.acc-lock.is-locked:hover { background: color-mix(in srgb, var(--color-danger-ink) 20%, var(--color-surface)); }
.acc-lock .icon { inline-size: 19px; block-size: 19px; }
.acc-table tr.is-off .acc-who { opacity: 0.6; }
.acc-m { display: none !important; }
.acc-pages { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.col-check { inline-size: 36px; }
/* in-person link cards (printable) */
.acc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.acc-card { display: grid; gap: var(--space-3); justify-items: center; text-align: center; break-inside: avoid; }
.acc-card-head { display: flex; align-items: center; gap: var(--space-2); justify-self: stretch; text-align: start; }
.acc-card-head strong { display: block; color: var(--color-ink); }
.acc-card-head small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.acc-card-text { margin: 0; font-size: var(--text-sm); }
.acc-link { display: block; max-inline-size: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-subtle); font-family: ui-monospace, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; color: var(--color-ink); }
@media print { .topbar, .admin-nav, .admin-mobile-nav, .acc-noprint, .site-footer, .title-actions, .alert { display: none !important; } .admin-shell, .admin-main, .page { display: block; padding: 0; } .acc-qr { color: #000; } .acc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .acc-invite, .acc-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .acc-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .auth--acc { margin: var(--space-5) var(--space-3); } .acc-codes { font-size: 15px; } }
@media (max-width: 420px) { .acc-otp { gap: 6px; } .acc-otp span { inline-size: 42px; block-size: 50px; font-size: 22px; } }
@media (max-width: 640px) {
  .acc-table thead { display: none; }
  .acc-table, .acc-table tbody { display: block; }
  .acc-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--color-border); }
  .acc-table tr:last-child { border-block-end: 0; }
  .acc-table td { display: block; padding: 0; border: 0; }
  .acc-table .acc-c-hide { display: none; }
  .acc-table .acc-c-who { grid-column: 1; grid-row: 1; }
  .acc-table .acc-c-last { grid-column: 2; grid-row: 1; font-size: var(--text-xs); color: var(--color-text-muted); }
  .acc-table .acc-c-lock { grid-column: 3; grid-row: 1; }
  .acc-table .acc-c-state, .acc-table .acc-c-act { grid-column: 1 / -1; }
  .acc-table .acc-c-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-inline-start: 42px; }
  .acc-table .acc-c-act .actions { justify-content: flex-start; padding-inline-start: 42px; }
  .acc-who > span:last-child { white-space: normal; }
  .acc-d { display: none !important; }
  .acc-m { display: block !important; }
}

/* ───────── organisational chat «گفت‌وگو» (/chat): list, conversation, info panel ───────── */
body.is-chat .site-footer { display: none; }
body.is-chat main { display: block; }
.chat { --chat-h: calc(100dvh - 65px); display: grid; grid-template-columns: 300px minmax(0, 1fr) 292px; block-size: var(--chat-h); max-inline-size: 1600px; margin-inline: auto; border-inline: 1px solid var(--color-border); background: var(--color-surface); }
.chat-side { display: flex; flex-direction: column; min-block-size: 0; border-inline-start: 1px solid var(--color-border); }
.chat-list { border-inline-start: 0; border-inline-end: 1px solid var(--color-border); }
.chat-side-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); }
.chat-side-head h2 { flex: 1; margin: 0; font-size: var(--text-lg); font-weight: 800; color: var(--color-ink); }
.chat-search { margin: 0 var(--space-3) var(--space-2); }
.chat-search label { display: flex; align-items: center; gap: var(--space-2); min-block-size: 38px; padding-inline: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-text-muted); font-size: var(--text-sm); }
.chat-search .icon { inline-size: 16px; block-size: 16px; }
.chat-sec { padding: var(--space-3) var(--space-3) 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text-muted); display: flex; align-items: center; justify-content: space-between; }
.chat-sec a { font-weight: 500; color: var(--color-info-ink); text-decoration: none; }
.chat-items { flex: 1; overflow: auto; padding-block-end: var(--space-2); }
.chat-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 var(--space-2); padding: 8px var(--space-2); border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.chat-item:hover { background: var(--color-primary-subtle); }
.chat-item.is-active { background: var(--color-primary-subtle); box-shadow: inset 3px 0 0 var(--color-primary); }
.chat-item .avatar { inline-size: 40px; block-size: 40px; font-size: var(--text-sm); position: relative; }
.chat-item .avatar .icon { inline-size: 18px; block-size: 18px; }
/* presence: a green ring around the avatar of someone online (owner, 2026-11-09; was a small dot under the picture). The outline
   follows the round corners and leaves a see-through gap, so it reads the same on white, tinted and dark rows. */
.avatar.is-online { outline: 2.5px solid #22A862; outline-offset: 2px; }
.chat-item-text { display: grid; min-inline-size: 0; }
.chat-item-text strong { font-size: var(--text-sm); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-text small { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.8; }
.chat-item-text small.is-typing { color: var(--color-info-ink); }
.chat-item-meta { display: grid; justify-items: end; gap: 4px; font-size: 11px; color: var(--color-text-muted); }
.ch-badge { min-inline-size: 20px; padding-inline: 6px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--ink-strong, #0B2A4A); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.ch-badge--muted { background: var(--color-border); color: var(--color-text-muted); }
.chat-item .icon-pin { inline-size: 12px; block-size: 12px; color: var(--color-text-muted); }
.chat-me { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-block-start: 1px solid var(--color-border); font-size: var(--text-sm); }
.chat-me .avatar { inline-size: 34px; block-size: 34px; font-size: var(--text-xs); position: relative; }
.chat-me small { display: block; font-size: 11px; color: var(--color-success-ink); }
.chat-me .icon-btn { margin-inline-start: auto; }

/* conversation */
.chat-room { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; background: color-mix(in srgb, var(--color-primary-subtle) 35%, var(--color-bg)); }
.chat-head { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); background: var(--color-surface); border-block-end: 1px solid var(--color-border); }
.chat-head .avatar { inline-size: 40px; block-size: 40px; }
.chat-head .avatar .icon { inline-size: 18px; block-size: 18px; }
.chat-head-text { flex: 1; min-inline-size: 0; }
.chat-head-text strong { display: block; font-size: var(--text-base); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-text small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.chat-head-text small b { color: var(--color-success-ink); font-weight: 600; }
.chat-head .icon-btn { inline-size: 40px; block-size: 40px; }
.chat-head .btn-call { display: inline-flex; align-items: center; gap: 6px; min-block-size: 38px; padding-inline: 14px; border-radius: var(--radius-full); background: var(--color-success-subtle); color: var(--color-success-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.chat-head .btn-call .icon { inline-size: 18px; block-size: 18px; }
.chat-back { display: none; }
.chat-pin { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-4); background: var(--color-surface); border-block-end: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text); }
.chat-pin .icon { inline-size: 14px; block-size: 14px; color: var(--color-warning-ink); flex-shrink: 0; }
.chat-pin b { color: var(--color-warning-ink); font-weight: 600; }
.chat-pin span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-log { flex: 1; overflow: auto; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.chat-day { align-self: center; margin-block: var(--space-2); padding: 2px 12px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); font-size: 11px; color: var(--color-text-muted); }
.ch-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-2); max-inline-size: 72%; align-items: end; }
.ch-msg .avatar { inline-size: 34px; block-size: 34px; font-size: var(--text-xs); align-self: end; }
.ch-msg.is-own { grid-template-columns: minmax(0, 1fr); align-self: flex-end; }
.ch-msg.is-follow { grid-template-columns: 34px minmax(0, 1fr); }
.ch-msg.is-follow .avatar { visibility: hidden; }
.ch-bubble { position: relative; padding: 8px 12px 6px; border-radius: 16px; border-end-start-radius: 4px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-1); font-size: var(--text-sm); line-height: 1.9; color: var(--color-text); }
.is-own .ch-bubble { border-end-start-radius: 16px; border-end-end-radius: 4px; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); }
.ch-bubble .who { display: block; margin-block-end: 2px; font-size: 12px; font-weight: 700; }
.ch-bubble .quote { display: block; margin-block-end: 6px; padding: 4px 10px; border-inline-start: 3px solid var(--color-accent); border-radius: 6px; background: color-mix(in srgb, var(--color-accent) 12%, transparent); font-size: 12px; color: var(--color-text-muted); }
.ch-bubble .quote b { display: block; color: var(--color-ink); font-weight: 600; }
.ch-bubble .time { display: inline-flex; align-items: center; gap: 3px; float: inline-end; margin: 10px 0 0 0; margin-inline-start: 10px; font-size: 10.5px; color: var(--color-text-muted); }
.ch-bubble .time .icon { inline-size: 14px; block-size: 14px; color: var(--color-info-ink); }
.ch-bubble .mention { color: var(--color-info-ink); font-weight: 600; }
.ch-bubble img { display: block; inline-size: 100%; max-inline-size: 360px; border-radius: 10px; margin-block: 2px 6px; }
.ch-file { display: flex; align-items: center; gap: var(--space-2); margin-block: 2px 6px; padding: 8px 10px; border-radius: 10px; background: var(--color-bg); border: 1px solid var(--color-border); }
.ch-file .tile { inline-size: 38px; block-size: 38px; border-radius: 9px; }
.ch-file .tile .icon { inline-size: 18px; block-size: 18px; }
.ch-file strong { display: block; font-size: 13px; color: var(--color-ink); }
.ch-file small { font-size: 11px; color: var(--color-text-muted); }
.ch-file .icon-btn { margin-inline-start: auto; inline-size: 34px; block-size: 34px; color: var(--color-info-ink); }
.ch-reacts { display: flex; gap: 4px; margin-block-start: 4px; }
.ch-reacts span { display: inline-flex; align-items: center; gap: 3px; padding: 0 8px; border-radius: var(--radius-full); background: var(--color-bg); border: 1px solid var(--color-border); font-size: 11.5px; line-height: 22px; }
.ch-reacts span.is-mine { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.ch-typing { display: flex; align-items: center; gap: 8px; margin-inline-start: 42px; font-size: 12px; color: var(--color-text-muted); }
.ch-typing i { display: inline-flex; gap: 3px; }
.ch-typing i::before, .ch-typing i::after, .ch-typing i b { content: ""; display: block; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--color-text-muted); animation: chat-typing 1.2s infinite; }
.ch-typing i b { animation-delay: 0.2s; } .ch-typing i::after { animation-delay: 0.4s; }
@keyframes chat-typing { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; transform: translateY(-2px); } }
.ch-composer { display: flex; align-items: center; gap: 6px; padding: 10px var(--space-4) 12px; background: var(--color-surface); border-block-start: 1px solid var(--color-border); }
.ch-composer .icon-btn { inline-size: 40px; block-size: 40px; color: var(--color-text-muted); }
.ch-composer .box { flex: 1; display: flex; align-items: center; min-block-size: 44px; padding-inline: 14px; border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-bg); color: var(--color-text-muted); font-size: var(--text-sm); }
.ch-composer .send { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-1); }
.ch-composer .send .icon { inline-size: 20px; block-size: 20px; transform: scaleX(-1); }

/* info panel */
.chat-info { overflow: auto; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-4); align-content: start; }
.chat-info h3 { margin: 0 0 var(--space-2); font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.chat-info-top { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding-block: var(--space-2); }
.chat-info-top .avatar { inline-size: 64px; block-size: 64px; border-radius: 18px; }
.chat-info-top .avatar .icon { inline-size: 28px; block-size: 28px; }
.chat-info-top strong { font-size: var(--text-base); color: var(--color-ink); }
.chat-info-top small { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.8; }
.chat-info-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.chat-info-actions .btn { justify-content: center; gap: 6px; font-size: var(--text-sm); }
.chat-info-actions .icon { inline-size: 16px; block-size: 16px; }
.ch-members { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ch-members li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.ch-members .avatar { inline-size: 30px; block-size: 30px; font-size: 11px; position: relative; }
.ch-members .avatar.is-online { outline-width: 2px; outline-offset: 1.5px; }
.ch-members small { color: var(--color-text-muted); font-size: 11px; margin-inline-start: auto; }
.ch-members .tag { font-size: 10px; line-height: 1.6; padding-inline: 6px; }
.ch-files { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ch-files li { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; }
.ch-files .tile { inline-size: 32px; block-size: 32px; border-radius: 8px; }
.ch-files .tile .icon { inline-size: 15px; block-size: 15px; }
.ch-files span { display: grid; min-inline-size: 0; }
.ch-files strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-ink); font-weight: 600; }
.ch-files small { color: var(--color-text-muted); font-size: 11px; }
.chat-more { font-size: 12px; color: var(--color-info-ink); text-decoration: none; }

/* phones: either the list or the room is shown */
@media (max-width: 1100px) { .chat { grid-template-columns: 280px minmax(0, 1fr); } .chat-info { display: none; } }
@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; border-inline: 0; }
  .chat--room .chat-list, .chat--list .chat-room { display: none; }
  .chat-back { display: inline-grid; }
  .chat-head { padding-inline: var(--space-2) var(--space-3); }
  .chat-head .btn-call span { display: none; }
  .chat-head .btn-call { padding-inline: 10px; }
  .chat-head > .avatar, .chat-head .icon-btn:not(.chat-back):not([aria-label='تماس صوتی']) { display: none; }
  .chat-head { gap: var(--space-2); }
  .ch-msg { max-inline-size: 88%; }
  .chat-log { padding-inline: var(--space-3); }
  .ch-composer { padding-inline: var(--space-2); }
}

/* chat: pieces beyond the mockup (textarea composer, tools, modals, badge) */
.topbar .link--chat { position: relative; justify-content: center; inline-size: var(--touch); padding-inline: 0; }
/* the chat's own drawn bubble (static/icons/chat-karun.svg) instead of a label (the owner, 2026-11-10); the green dot gives
   way to the unread badge */
.chat-mark { inline-size: 30px; block-size: 30px; transition: transform .15s; }
.chat-mark-bubble { fill: var(--mix-white); stroke: var(--brand-navy-900); }
.chat-mark-k { fill: var(--brand-navy-900); }
.chat-mark-dot { stroke: var(--neutral-0); }
.link--chat:hover .chat-mark { transform: translateY(-1px) scale(1.05); }
.link--chat:has(.topbar-badge:not([hidden])) .chat-mark-dot { display: none; }
@supports (color: light-dark(#000, #fff)) {
  .chat-mark-bubble { fill: light-dark(#FFFFFF, #E4ECF8); stroke: light-dark(var(--brand-navy-900), #E4ECF8); }
  .chat-mark-k { fill: light-dark(var(--brand-navy-900), #003366); }
}
.topbar-badge { position: absolute; inset-block-start: 1px; inset-inline-start: -2px; min-inline-size: 18px; padding-inline: 5px; border-radius: 9px; background: var(--color-accent); color: var(--ink-strong); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-style: normal; }
.ch-pane { flex: 1; display: flex; flex-direction: column; min-block-size: 0; }
.ch-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-6); text-align: center; }
.ch-empty .tile { inline-size: 64px; block-size: 64px; border-radius: 18px; }
.ch-empty .tile .icon { inline-size: 30px; block-size: 30px; }
.chat-log { scroll-behavior: smooth; }
.chat-log > div[data-log-items] { display: flex; flex-direction: column; gap: 6px; }
.ch-older { align-self: center; margin-block-end: var(--space-2); }
.ch-unread { display: flex; align-items: center; gap: var(--space-2); margin-block: var(--space-2); font-size: 11px; color: var(--color-info-ink); }
.ch-unread::before, .ch-unread::after { content: ""; flex: 1; border-block-start: 1px solid var(--color-info-ink); opacity: 0.4; }
.ch-bubble .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-bubble .text a { color: var(--color-info-ink); }
.ch-bubble .text.is-deleted { color: var(--color-text-muted); font-style: italic; }
.ch-bubble .time .pin { color: var(--color-warning-ink); }
.ch-bubble audio { display: block; inline-size: 260px; max-inline-size: 100%; margin-block: 4px 6px; }
.ch-bubble video { display: block; inline-size: 100%; max-inline-size: 360px; border-radius: 10px; margin-block: 2px 6px; }
.ch-bubble .ch-img { cursor: zoom-in; }
.ch-tools { position: absolute; inset-block-start: -16px; inset-inline-end: 8px; display: none; gap: 1px; padding: 2px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-1); z-index: 2; }
.ch-bubble:hover .ch-tools, .ch-msg.is-tools .ch-tools { display: inline-flex; }
.ch-tools button { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 15px; line-height: 1; }
.ch-tools button:hover { background: var(--color-primary-subtle); color: var(--color-ink); }
.ch-tools .icon { inline-size: 15px; block-size: 15px; }
.ch-tools .sep { inline-size: 1px; margin-block: 6px; background: var(--color-border); }
.ch-replybar, .ch-attach { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-4); background: var(--color-surface); border-block-start: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); }
.ch-replybar > span, .ch-attach > span:not(.tile) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-replybar .icon-btn, .ch-attach .icon-btn { inline-size: 32px; block-size: 32px; }
.ch-replybar .icon-sm { color: var(--color-info-ink); flex-shrink: 0; }
.ch-emoji { display: flex; gap: 4px; padding: 6px var(--space-4); background: var(--color-surface); border-block-start: 1px solid var(--color-border); }
.ch-emoji button { border: 0; background: none; font-size: 22px; line-height: 1; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.ch-emoji button:hover { background: var(--color-primary-subtle); }
.ch-composer .box { resize: none; max-block-size: 140px; padding-block: 10px; line-height: 1.7; font-family: inherit; color: var(--color-text); }
.ch-composer .box::placeholder { color: var(--color-text-muted); }
.ch-composer [data-mic].is-rec { color: var(--color-danger-ink); background: var(--color-danger-subtle); inline-size: auto; padding-inline: 10px; gap: 4px; }
.ch-rec { font-size: 11px; font-weight: 700; }
.ch-search-results .chat-item small { white-space: normal; }
.ch-search-results .chat-item-text em { font-style: normal; color: var(--color-ink); }
.ch-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--space-4); background: rgba(10, 20, 35, 0.45); }
.ch-modal-box { inline-size: min(460px, 100%); max-block-size: 86vh; display: flex; flex-direction: column; gap: var(--space-3); }
.ch-modal-box > .block-head:first-child { margin-block-end: 0; }
.ch-modal-search { min-block-size: 40px; padding-inline: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font-size: var(--text-sm); font-family: inherit; }
.ch-people { overflow: auto; display: grid; gap: 2px; min-block-size: 80px; }
.ch-person { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; padding: 6px var(--space-2); border: 0; border-radius: var(--radius-md); background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.ch-person:hover { background: var(--color-primary-subtle); }
.ch-person .avatar { inline-size: 34px; block-size: 34px; font-size: var(--text-xs); position: relative; flex-shrink: 0; }
.ch-person > span { display: grid; min-inline-size: 0; }
.ch-person strong { font-size: var(--text-sm); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-person small { font-size: 11px; color: var(--color-text-muted); }
.ch-person input { margin-inline-start: auto; inline-size: 18px; block-size: 18px; accent-color: var(--color-primary); flex-shrink: 0; }
.ch-none { padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.chat-info .btn-leave { justify-self: start; }
.ch-member-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.ch-member-group { display: grid; gap: 2px; margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ch-member-group legend { padding-inline: 6px; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.ch-icons .provider-name .icon { inline-size: 18px; block-size: 18px; }
tr.is-dim { opacity: 0.6; }
.chat-item { cursor: pointer; }
.ch-lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(5, 10, 20, 0.85); cursor: zoom-out; }
.ch-lightbox img { max-inline-size: 94vw; max-block-size: 92vh; border-radius: 8px; }
@media (max-width: 1100px) {
  .chat-info { display: none; position: fixed; inset-block: 65px 0; inset-inline-start: 0; inline-size: min(320px, 92vw); z-index: 40; background: var(--color-surface); border-inline-end: 1px solid var(--color-border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
  .chat-info.is-open { display: grid; }
}
.chat-search input { flex: 1; min-inline-size: 0; border: 0; background: none; padding: 0; font: inherit; color: var(--color-text); outline: none; }
.chat-search input::placeholder { color: var(--color-text-muted); }
.tile img[src*="chat-karun"] { inline-size: 78%; block-size: 78%; }   /* the chat tile's drawn icon has its own margins */
/* personnel cards: photos in avatars, the person form and its account box */
.avatar { overflow: hidden; }
.avatar img { inline-size: 100%; block-size: 100%; aspect-ratio: 1; min-block-size: 0; object-fit: cover; border-radius: inherit; }
.avatar--xl { inline-size: 96px; block-size: 96px; font-size: var(--text-2xl); border-radius: 22px; }
.pp-cell { display: flex; align-items: center; gap: var(--space-2); }
.pp-cell > span:last-child { display: block; }
.pp-cell .avatar .icon { inline-size: 14px; block-size: 14px; }
.pp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.pp-photo { display: flex; align-items: center; gap: var(--space-3); }
.pp-photo img { inline-size: 96px; block-size: 96px; border-radius: 22px; object-fit: cover; border: 1px solid var(--color-border); }
.pp-photo > span { display: grid; gap: 4px; min-inline-size: 0; flex: 1; }
.pp-photo input[type=file] { max-inline-size: 100%; }
.pp-bio { min-block-size: 90px !important; }
.tone-neutral { background: var(--neutral-100); color: var(--neutral-800); }
@media (max-width: 900px) { .pp-layout { grid-template-columns: 1fr; } }
/* unit picker with «+», and the Jalali date picker (inputs with data-jdate) */
.field-head { display: flex; align-items: center; gap: 6px; }
.icon-btn--xs { inline-size: 26px; block-size: 26px; border-radius: var(--radius-sm); color: var(--color-info-ink); background: var(--color-primary-subtle); }
.icon-btn--xs:hover { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)); }
.unit-new { display: flex; align-items: center; gap: 6px; margin-block-start: 6px; }
.unit-new input { flex: 1; }
.jdp-wrap { position: relative; display: flex; align-items: center; }
.jdp-wrap input[data-jdate-view] { padding-inline-end: 44px !important; cursor: pointer; }
.jdp-btn { position: absolute; inset-inline-end: 4px; inset-block-start: 50%; transform: translateY(-50%); display: grid; place-items: center; inline-size: 36px; block-size: 36px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; }
.jdp-btn:hover { color: var(--color-ink); background: var(--color-primary-subtle); }
.jdp { position: absolute; z-index: 40; inset-block-start: calc(100% + 6px); inset-inline-start: 0; inline-size: 296px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 12px 32px rgba(0, 20, 50, 0.18); }
.jdp-head { display: flex; align-items: center; gap: 4px; margin-block-end: var(--space-2); }
.jdp-head select { flex: 1; min-block-size: 34px; padding-inline: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.jdp-nav { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); cursor: pointer; }
.jdp-nav:hover { background: var(--color-primary-subtle); }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jdp-grid b { padding-block: 4px; text-align: center; font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.jdp-grid button { display: grid; place-items: center; block-size: 34px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.jdp-grid button:hover { background: var(--color-primary-subtle); }
.jdp-grid button.is-today { box-shadow: inset 0 0 0 1px var(--color-accent); }
.jdp-grid button.is-selected { background: var(--color-primary); color: var(--color-on-primary); }
.jdp-grid button.is-friday { color: var(--color-danger-ink); }
.jdp-grid button.is-selected.is-friday { color: var(--color-on-primary); }
.jdp-grid button:disabled { visibility: hidden; }
.jdp-foot { display: flex; justify-content: space-between; gap: var(--space-2); margin-block-start: var(--space-2); }
.jdp-foot button { border: 0; background: none; color: var(--color-info-ink); font: inherit; font-size: var(--text-xs); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); }
.jdp-foot button:hover { background: var(--color-primary-subtle); }
/* tabs on panel pages, inline field errors */
.tabbar { display: flex; flex-wrap: wrap; gap: 4px; margin-block-end: var(--space-4); border-block-end: 2px solid var(--color-border); }
.tabbar a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 42px; margin-block-end: -2px; padding-inline: 14px; border-block-end: 2px solid transparent; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.tabbar a:hover { color: var(--color-ink); }
.tabbar a[aria-current="page"] { color: var(--color-ink); border-block-end-color: var(--color-primary); }
.tabbar .count { padding-inline: 7px; border-radius: var(--radius-full); background: var(--color-primary-subtle); font-size: 11px; font-weight: 700; }
.field-error { color: var(--color-danger-ink); font-size: var(--text-xs); }
.field input.is-invalid { border-color: var(--color-danger); }
/* «معرفی همکاران»: personnel cards by unit or by location (tones come from the unit's .ut-* class: --u, --u-fg) */
.tile img[src*="people-karun"] { inline-size: 80%; block-size: 80%; }
.pe-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block: var(--space-3) var(--space-4); }
.pe-hero .page-title { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.pe-hero .page-desc { margin-block-start: 4px; }
.pe-hero .title-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pe-search { min-inline-size: min(360px, 100%); background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-1); }
.pe-search input { flex: 1; min-inline-size: 0; border: 0; background: none; font: inherit; color: var(--color-text); outline: none; }
.pe-toolbar { display: grid; gap: var(--space-3); margin-block-end: var(--space-4); }
.pe-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); inline-size: max-content; max-inline-size: 100%; }
.pe-switch button { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding-inline: 16px; border: 0; border-radius: var(--radius-full); background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.pe-switch button.is-active { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-1); }
/* phones: the three views share the row equally (icons drop) */
@media (max-width: 560px) {
  .pe-switch { display: flex; inline-size: 100%; }
  .pe-switch button { flex: 1 1 0; justify-content: center; min-inline-size: 0; padding-inline: 6px; font-size: 13px; white-space: nowrap; }
  .pe-switch button .icon { display: none; }
}
.pe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-chips a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding-inline: 14px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); text-decoration: none; }
.pe-chips a .n { padding-inline: 7px; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-ink); font-size: 11px; font-weight: 700; }
.pe-chips a.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.pe-chips a.is-active .n { background: rgba(255, 255, 255, .2); color: inherit; }
.pe-group { margin-block-end: var(--space-5); }
.pe-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3); }
.pe-group-mark { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 10px; background: color-mix(in srgb, var(--u) 14%, var(--mix-white)); color: var(--u-fg); }
.pe-group-mark .icon { inline-size: 18px; block-size: 18px; }
.pe-group-head h2 { margin: 0; font-size: var(--text-lg); font-weight: 800; color: var(--color-ink); }
.pe-group-count { font-size: var(--text-xs); color: var(--color-text-muted); }
.pe-group-side { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pe-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 var(--space-3) var(--space-3); border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); box-shadow: var(--shadow-1); text-align: center; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.pe-card:hover, .pe-card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--u) 45%, var(--color-border)); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); outline: none; }
.pe-band { inline-size: calc(100% + 2 * var(--space-3)); block-size: 56px; margin-inline: calc(-1 * var(--space-3)); border-radius: 17px 17px 0 0; background: linear-gradient(135deg, color-mix(in srgb, var(--u) 26%, var(--mix-white)), color-mix(in srgb, var(--u) 8%, var(--mix-white))); }
.pe-photo-wrap { position: relative; margin-block-start: -44px; }
.pe-photo { display: block; inline-size: 88px; block-size: 88px; border-radius: 50%; border: 4px solid var(--color-surface); object-fit: cover; background: var(--color-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.pe-photo--initial { display: grid; place-items: center; background: color-mix(in srgb, var(--u) 16%, var(--mix-white)); color: var(--u-fg); font-size: 32px; font-weight: 800; }
.pe-online { position: absolute; inset-inline-end: 5px; inset-block-end: 6px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: #22A862; border: 2.5px solid var(--color-surface); }
.pe-main { display: grid; gap: 2px; justify-items: center; margin-block-start: 8px; min-inline-size: 0; }
.pe-name { font-size: var(--text-base); font-weight: 800; color: var(--color-ink); }
.pe-role { font-size: var(--text-sm); color: var(--color-text-muted); }
.pe-where { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 4px; padding: 2px 10px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--u) 12%, var(--mix-white)); color: var(--u-fg); font-size: 11.5px; font-weight: 600; }
.pe-where .icon { inline-size: 13px; block-size: 13px; }
.pe-rows { display: grid; gap: 4px; inline-size: 100%; margin: 10px 0 0; padding: 10px 0 0; border-block-start: 1px dashed var(--color-border); list-style: none; }
.pe-rows li { display: flex; align-items: center; justify-content: center; gap: 6px; min-inline-size: 0; font-size: 12.5px; color: var(--color-text); }
.pe-rows li a { color: inherit; text-decoration: none; }
.pe-rows li bdi { display: inline-block; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.pe-rows .icon { flex-shrink: 0; inline-size: 14px; block-size: 14px; color: var(--color-text-muted); }
.pe-actions { display: flex; gap: 6px; margin-block-start: auto; padding-block-start: 10px; }
.pe-actions .btn-sm { min-block-size: 32px; padding-inline: 14px; font-size: 12.5px; }
.pe-none { margin-block-start: var(--space-4); }
.pe-dialog { inline-size: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 22px; background: var(--color-surface); color: var(--color-text); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.pe-dialog::backdrop { background: rgba(0, 20, 50, .45); backdrop-filter: blur(3px); }
.pe-dialog-band { position: relative; block-size: 92px; background: linear-gradient(135deg, color-mix(in srgb, var(--u) 34%, var(--mix-white)), color-mix(in srgb, var(--u) 10%, var(--mix-white))); }
.pe-dialog-close { position: absolute; inset-inline-end: 10px; inset-block-start: 10px; }
.pe-dialog-body { display: grid; justify-items: center; gap: 6px; padding: 0 var(--space-4) var(--space-4); text-align: center; }
.pe-dialog-photo { position: relative; margin-block-start: -56px; }
.pe-dialog-photo img, .pe-dialog-photo .pe-photo--initial { display: grid; inline-size: 112px; block-size: 112px; border-radius: 50%; border: 5px solid var(--color-surface); object-fit: cover; font-size: 40px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.pe-dialog-photo .pe-online { inline-size: 18px; block-size: 18px; inset-inline-end: 8px; inset-block-end: 8px; }
.pe-dialog-name { margin: 6px 0 0; font-size: var(--text-xl, 1.35rem); font-weight: 800; color: var(--color-ink); }
.pe-dialog-role { margin: 0; color: var(--color-text-muted); }
.pe-dialog-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-block-start: 4px; }
.pe-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--u) 12%, var(--mix-white)); color: var(--u-fg); font-size: 12px; font-weight: 600; }
.pe-tag .icon { inline-size: 13px; block-size: 13px; }
.pe-dialog-bio { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.9; }
.pe-dialog-rows { display: grid; gap: 8px; inline-size: 100%; margin: 10px 0 0; padding: 12px 0 0; border-block-start: 1px dashed var(--color-border); list-style: none; }
.pe-dialog-rows li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.pe-dialog-rows li span { color: var(--color-text-muted); }
.pe-dialog-rows li bdi, .pe-dialog-rows li a { margin-inline-start: auto; color: var(--color-ink); font-weight: 600; text-decoration: none; }
.pe-dialog-rows .icon { inline-size: 15px; block-size: 15px; color: var(--color-text-muted); }
.pe-dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 12px; }
@media (max-width: 600px) {
  .pe-hero .title-actions, .pe-search { inline-size: 100%; }
  .pe-grid { grid-template-columns: 1fr; }
  .pe-card { display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "photo main" "rows rows" "actions actions"; column-gap: var(--space-3); align-items: center; padding: var(--space-3); text-align: start; border-inline-start: 4px solid var(--u); }
  .pe-band { display: none; }
  .pe-photo-wrap { grid-area: photo; margin: 0; }
  .pe-photo { inline-size: 64px; block-size: 64px; border-width: 2px; box-shadow: none; }
  .pe-photo--initial { font-size: 24px; }
  .pe-main { grid-area: main; margin: 0; justify-items: start; }
  .pe-rows { grid-area: rows; }
  .pe-rows li { justify-content: flex-start; }
  .pe-actions { grid-area: actions; }
  .pe-group-side { display: none; }
}
[data-hr-form] .form-row { align-items: start; }   /* a «+» box under one field must not stretch its neighbours */
/* picture code on the login and forgot forms; access modes on the accounts page */
.captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.captcha-row img { inline-size: 180px; block-size: auto; border: 1px solid var(--color-border); border-radius: 10px; background: #f6f8fc; }
.captcha-row input { flex: 1; min-inline-size: 140px; letter-spacing: .2em; }
.acc-modes { display: grid; gap: 6px; margin-block-end: var(--space-2); }

/* «امنیت»: the status cards */
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-block-end: var(--space-3); }
.sec-stat { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--color-border); border-inline-start: 4px solid var(--tag-green-fg); border-radius: 12px; background: var(--color-surface); }
.sec-stat.is-warn { border-inline-start-color: var(--tag-amber-fg); }
.sec-k { font-size: var(--text-xs); color: var(--color-text-muted); }
.sec-stat strong { font-size: var(--text-base); color: var(--color-ink); }
.sec-stat small { font-size: var(--text-xs); color: var(--color-text-muted); }

/* video meetings inside the chat: Jitsi draws the video and its own toolbar (since 2026-11-09); the frame, the «meeting in
   progress» card and the call toast are ours */
.btn-call { display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding-inline: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-success-subtle, color-mix(in srgb, #22A862 14%, var(--mix-white))); color: var(--color-success-ink, var(--tag-green-fg)); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.btn-call .icon { inline-size: 18px; block-size: 18px; }
.meet { display: flex; flex-direction: column; min-block-size: 0; flex: 0 0 56%; border-block-end: 1px solid var(--color-border); background: #0f1623; }
.meet-stage { position: relative; flex: 1; min-block-size: 220px; }
.meet-frame, .meet-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.meet-wait { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; justify-items: center; color: #cbd5e1; font-size: var(--text-sm); background: #0f1623; }
.meet-wait .spinner { inline-size: 28px; block-size: 28px; border: 3px solid rgba(255, 255, 255, .2); border-block-start-color: #fff; border-radius: 50%; animation: meet-spin .9s linear infinite; }
@keyframes meet-spin { to { transform: rotate(360deg); } }
.meet-live { display: inline-flex; align-items: center; gap: 5px; color: var(--tag-green-fg); font-weight: 700; }
.meet-live i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #22A862; box-shadow: 0 0 0 3px color-mix(in srgb, #22A862 25%, transparent); }
.meet-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, #22A862 40%, var(--color-border)); border-radius: 14px; background: color-mix(in srgb, #22A862 8%, var(--color-surface)); }
.meet-card-text { flex: 1; min-inline-size: 160px; display: grid; gap: 3px; }
.meet-card-text strong { color: var(--color-ink); }
.meet-card-text small { color: var(--color-text-muted); font-size: 11.5px; }
.chat--meeting .chat-log { flex: 1; min-block-size: 120px; }
.call-toast { position: fixed; inset-block-start: 76px; inset-inline: 0; margin-inline: auto; inline-size: max-content; max-inline-size: calc(100vw - 32px); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); animation: call-ring 1.2s ease-in-out infinite; }
@keyframes call-ring { 0%, 100% { box-shadow: 0 16px 40px rgba(0, 0, 0, .25), 0 0 0 0 color-mix(in srgb, #22A862 40%, transparent); } 50% { box-shadow: 0 16px 40px rgba(0, 0, 0, .25), 0 0 0 10px transparent; } }
.call-toast-text { display: grid; min-inline-size: 120px; } .call-toast-text strong { color: var(--color-ink); } .call-toast-text small { color: var(--color-text-muted); font-size: 11.5px; }
.call-toast-btn { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 0; border-radius: 50%; color: #fff; cursor: pointer; }
.call-toast-btn .icon { inline-size: 18px; block-size: 18px; } .call-toast-btn.accept { background: #22A862; } .call-toast-btn.decline { background: #e53935; }
@media (max-width: 760px) {
  .chat--meeting .meet { flex: 1; border: 0; }
  .chat--meeting .chat-log, .chat--meeting .ch-composer, .chat--meeting .chat-pin, .chat--meeting .ch-emoji { display: none; }
}
/* own messages that follow own messages keep the single bubble column (is-follow must not add the avatar column) */
.ch-msg.is-own.is-follow { grid-template-columns: minmax(0, 1fr); }

/* ───────── chat, design 1 «سرمه‌ای کارون» (the owner chose it from three mockups, 2026-11-10) ─────────
   The list is a navy rail in the greeting band's colours (darker in the dark theme), with who is online on top; the
   conversation sits on a light dotted ground, other people's messages are white cards and one's own navy bubbles; a floating
   composer with the amber send button; a welcome with shortcuts while nothing is open; the info panel only on demand. */
.chat { --rail-from: var(--greet-from); --rail-to: var(--greet-to); --rail-text: #DCE6F4; --rail-muted: rgba(220, 230, 244, 0.64);
  --rail-faint: rgba(220, 230, 244, 0.5); --rail-hover: rgba(255, 255, 255, 0.07); --rail-active: rgba(255, 255, 255, 0.12);
  --rail-field: rgba(255, 255, 255, 0.09); --rail-accent: color-mix(in srgb, var(--color-accent) 55%, white); --rail-live: #7EE2A8;
  --room-bg: color-mix(in srgb, var(--color-primary) 5%, #F3F6FA); --room-dot: color-mix(in srgb, var(--color-primary) 9%, transparent);
  --room-bar: rgba(255, 255, 255, 0.9); --bubble: #FFFFFF; --bubble-shade: rgba(16, 40, 80, 0.2);
  --own-from: var(--greet-to); --own-to: var(--color-primary); --own-shade: color-mix(in srgb, var(--color-primary) 60%, transparent);
  --own-muted: rgba(219, 232, 248, 0.8); --meet-from: var(--greet-from); --meet-to: var(--greet-to);
  --on-amber: color-mix(in srgb, var(--color-primary) 80%, black);
  grid-template-columns: 340px minmax(0, 1fr); max-inline-size: none; border-inline: 0; background: var(--room-bg); }
@supports (color: light-dark(#000, #fff)) {
  .chat { --rail-from: light-dark(var(--greet-from), #0B1322); --rail-to: light-dark(var(--greet-to), #11223B);
    --room-bg: light-dark(color-mix(in srgb, var(--color-primary) 5%, #F3F6FA), #121926);
    --room-dot: light-dark(color-mix(in srgb, var(--color-primary) 9%, transparent), rgba(157, 187, 230, 0.07));
    --room-bar: light-dark(rgba(255, 255, 255, 0.9), rgba(23, 29, 41, 0.92));
    --bubble: light-dark(#FFFFFF, #1C2433); --bubble-shade: light-dark(rgba(16, 40, 80, 0.2), rgba(0, 0, 0, 0.45));
    --own-from: light-dark(var(--greet-to), color-mix(in srgb, var(--greet-to) 75%, #4A6FA0));
    --own-to: light-dark(var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #4A6FA0));
    --own-shade: light-dark(color-mix(in srgb, var(--color-primary) 60%, transparent), transparent);
    --meet-from: light-dark(var(--greet-from), #13294A); --meet-to: light-dark(var(--greet-to), #1B3A66); }
}
@media (min-width: 1101px) {
  .chat .chat-info { display: none; }
  .chat.is-info { grid-template-columns: 340px minmax(0, 1fr) 300px; }
  .chat.is-info .chat-info { display: grid; background: var(--color-surface); }
}
@media (min-width: 761px) and (max-width: 1279.98px) {
  .chat { grid-template-columns: 300px minmax(0, 1fr); }
  .chat.is-info { grid-template-columns: 300px minmax(0, 1fr) 280px; }
}
body.is-chat .topbar .link--chat { background: var(--neutral-100); }

/* the rail */
.chat-list { background: linear-gradient(180deg, var(--rail-from) 0%, color-mix(in srgb, var(--rail-from) 50%, var(--rail-to)) 55%, var(--rail-to) 100%);
  color: var(--rail-text); border-inline-end: 0; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.chat-list .chat-side-head { padding: 18px 18px 10px; }
.chat-list .chat-side-head h2 { color: #FFFFFF; font-size: 20px; }
.chat-list .chat-side-head .icon-btn { inline-size: 36px; block-size: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.chat-list .chat-side-head .icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
.chat-list .chat-search { margin: 0 16px 4px; }
.chat-list .chat-search label { min-block-size: 42px; border-color: rgba(255, 255, 255, 0.08); background: var(--rail-field); color: var(--rail-muted); }
.chat-list .chat-search label:focus-within { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); background: rgba(255, 255, 255, 0.13); }
.chat-list .chat-search input { color: #FFFFFF; }
.chat-list .chat-search input::placeholder { color: var(--rail-muted); }
/* «اعلان روی این دستگاه خاموش است»: a quiet strip on the rail, under the search */
.chat-list .ch-notify { display: flex; align-items: center; gap: 8px; margin: 6px 16px 4px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--rail-text); font-size: var(--text-xs); line-height: 1.8; }
.chat-list .ch-notify[hidden] { display: none; }
.chat-list .ch-notify > .icon { flex-shrink: 0; inline-size: 16px; block-size: 16px; color: var(--rail-accent); }
.chat-list .ch-notify span { flex: 1; min-inline-size: 0; }
.chat-list .ch-notify a { color: var(--rail-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.chat-list .ch-notify a:hover { text-decoration: underline; }
.chat-list .ch-notify .icon-btn { flex-shrink: 0; inline-size: 28px; block-size: 28px; min-block-size: 0; color: var(--rail-muted); background: none; }
.chat-list .ch-notify .icon-btn .icon { inline-size: 14px; block-size: 14px; }
.chat-item-text strong .ch-muted { inline-size: 12px; block-size: 12px; margin-inline-start: 5px; vertical-align: -1px; opacity: 0.65; }
.chat-info .ch-mute { display: grid; justify-items: start; gap: 4px; }
.chat-info .ch-mute small { font-size: var(--text-xs); color: var(--color-text-muted); }
.chat-list .chat-sec { padding-inline: 18px; color: var(--rail-faint); }
.chat-list .chat-sec a { color: var(--rail-accent); }
.chat-list .chat-item { position: relative; grid-template-columns: 44px minmax(0, 1fr) auto; padding: 8px 10px; border-radius: 14px; }
.chat-list .chat-item .avatar { inline-size: 44px; block-size: 44px; }
.chat-list .chat-item:hover { background: var(--rail-hover); }
.chat-list .chat-item.is-active { background: var(--rail-active); box-shadow: none; }
.chat-list .chat-item.is-active::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-2)); inset-block: 10px; inline-size: 4px;
  border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--color-accent); }
.chat-list .chat-item-text strong { color: #FFFFFF; }
.chat-list .chat-item-text small, .chat-list .chat-item-meta { color: var(--rail-muted); }
.chat-list .chat-item-text small.is-typing { color: #9FD0FF; }
.chat-list .chat-item-text em { color: var(--rail-accent); }
.chat-list .meet-live { color: var(--rail-live); }
.chat-list .avatar:has(> .icon) { border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: var(--rail-accent); }
.chat-list .ch-badge--muted { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.chat-list .ch-none { color: var(--rail-muted); }
.chat-list .chat-me { padding: 12px 16px; border-block-start: 0; background: rgba(0, 0, 0, 0.18); color: #FFFFFF; }
.chat-list .chat-me .avatar { inline-size: 38px; block-size: 38px; }
.chat-list .chat-me small { color: var(--rail-live); }
.chat-list .chat-me .icon-btn { color: rgba(255, 255, 255, 0.72); }
.chat-list .chat-me .icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
/* who is online: a row of faces on the rail, the whole group on the welcome */
.ch-online { display: flex; justify-content: space-between; gap: 4px; padding: 2px 14px 8px; }
.ch-online.is-all { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
.ch-on { display: grid; justify-items: center; align-content: start; gap: 5px; flex: 0 0 54px; padding: 4px 0; border: 0; border-radius: 12px; background: none;
  color: inherit; font: inherit; font-size: 11.5px; text-decoration: none; cursor: pointer; }
.ch-on .avatar { inline-size: 46px; block-size: 46px; font-size: var(--text-sm); }
.ch-on > span:last-child { max-inline-size: 54px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-on:hover { text-decoration: none; }
.chat-list .ch-on { color: rgba(220, 230, 244, 0.86); }
.chat-list .ch-on:hover { background: var(--rail-hover); }
.ch-on-more .avatar { background: color-mix(in srgb, var(--greet-to) 70%, #6E9BE0); color: #FFFFFF; font-weight: 800; }
.ch-on-more .avatar .icon { inline-size: 18px; block-size: 18px; }

/* the conversation */
.chat-room { background-color: var(--room-bg); background-image: radial-gradient(var(--room-dot) 1.2px, transparent 1.4px); background-size: 22px 22px; }
.chat-head { position: relative; z-index: 2; padding: 12px 22px; background: var(--room-bar); backdrop-filter: blur(8px); }
.chat-head > .avatar { inline-size: 44px; block-size: 44px; }
.chat-head > .avatar:has(> .icon) { border-radius: 14px; background: linear-gradient(135deg, var(--rail-from), var(--rail-to)); color: var(--rail-accent); }
.chat-head-text strong { font-size: 16px; }
.chat-head-stack { display: flex; }
.chat-head-stack:empty { display: none; }
.chat-head-stack .avatar { inline-size: 30px; block-size: 30px; margin-inline-start: -8px; border: 2px solid var(--color-surface); font-size: 11px; }
.chat-head-stack .avatar:first-child { margin-inline-start: 0; }
.chat-head-stack .ch-more { background: var(--color-primary-subtle); color: var(--color-ink); font-weight: 800; font-size: 10.5px; }
.chat-head .btn-call { min-block-size: 40px; padding-inline: 16px; font-weight: 700; }
.chat-head .icon-btn { border-radius: 50%; background: var(--neutral-100); }
.chat-head .icon-btn[aria-expanded="true"] { background: var(--color-primary-subtle); color: var(--color-ink); }
.chat-pin { background: var(--room-bar); }
.chat-log { padding: 18px 28px 8px; }
.chat-day { padding: 3px 14px; border: 0; background: color-mix(in srgb, var(--color-ink) 10%, transparent); color: var(--color-ink); font-size: 12px; font-weight: 700; }
.ch-msg { grid-template-columns: 36px auto; justify-content: start; gap: 10px; max-inline-size: min(66%, 760px); align-self: flex-start; }
.ch-msg .avatar { inline-size: 36px; block-size: 36px; }
.ch-msg.is-follow { grid-template-columns: 36px auto; }
.ch-msg.is-own, .ch-msg.is-own.is-follow { grid-template-columns: auto; justify-content: end; align-self: flex-end; }
.ch-bubble { padding: 9px 14px 7px; border: 0; border-radius: 18px; border-end-start-radius: 6px; background: var(--bubble);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bubble-shade) 35%, transparent), 0 6px 18px -10px var(--bubble-shade); }
.ch-file { border: 0; border-radius: 12px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
.is-own .ch-bubble { border: 0; border-radius: 18px; border-end-end-radius: 6px; background: linear-gradient(135deg, var(--own-from) 0%, var(--own-to) 100%);
  color: #FFFFFF; box-shadow: 0 10px 20px -12px var(--own-shade); }
.is-own .ch-bubble .time { color: var(--own-muted); }
.is-own .ch-bubble .time .icon { color: #8CC8FF; }
.is-own .ch-bubble .text a, .is-own .ch-bubble .mention { color: #FFFFFF; text-decoration: underline; }
.is-own .ch-bubble .text.is-deleted { color: var(--own-muted); }
.is-own .ch-bubble .quote { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); }
.is-own .ch-bubble .quote b { color: #FFFFFF; }
.is-own .ch-file { background: rgba(255, 255, 255, 0.1); }
.is-own .ch-file strong, .is-own .ch-file .icon-btn { color: #FFFFFF; }
.is-own .ch-file small { color: var(--own-muted); }
.is-own .ch-reacts span { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.is-own .ch-reacts span.is-mine { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.26); }
.ch-typing { margin-inline-start: 46px; }
.meet-card { align-self: center; inline-size: min(100%, 560px); border: 0; border-radius: 18px; padding: 12px 14px;
  background: linear-gradient(120deg, var(--meet-from), var(--meet-to)); color: #FFFFFF; box-shadow: 0 16px 30px -18px var(--own-shade); }
.meet-card .tile { background: rgba(255, 255, 255, 0.12); color: var(--rail-live); }
.meet-card-text strong { color: #FFFFFF; }
.meet-card-text small { color: rgba(219, 232, 248, 0.8); }
.meet-card .btn-primary { border-radius: var(--radius-full); background: #22A862; color: #FFFFFF; box-shadow: 0 8px 16px -8px rgba(34, 168, 98, 0.8); }
.meet-card .btn-primary:hover { background: #1E9657; }
.ch-composer { margin: 6px 24px 18px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 26px; background: var(--color-surface);
  box-shadow: 0 10px 30px -14px var(--bubble-shade); }
.ch-composer .box { min-block-size: 40px; padding-inline: 8px; border: 0; background: transparent; }
.ch-composer .box:focus, .ch-composer .box:focus-visible { outline: 0; box-shadow: none; }
.ch-composer:focus-within { border-color: color-mix(in srgb, var(--color-ink) 45%, var(--color-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 28%, transparent), 0 10px 30px -14px var(--bubble-shade); }
.ch-composer .send { inline-size: 46px; block-size: 46px; flex-shrink: 0; color: var(--on-amber);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 60%, white), var(--color-accent));
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--color-accent) 90%, transparent); }
.chat-room .ch-replybar, .chat-room .ch-attach, .chat-room .ch-emoji { margin: 0 24px -2px; border: 1px solid var(--color-border); border-radius: 16px;
  background: var(--color-surface); box-shadow: 0 6px 18px -12px var(--bubble-shade); }

/* the welcome while no conversation is open */
.ch-welcome { grid-template-columns: minmax(0, 640px); justify-content: center; gap: 6px; overflow: auto; align-content: safe center; }
.ch-welcome-me { inline-size: 86px; block-size: 86px; margin-block-end: 8px; font-size: 28px; }
.ch-welcome-me.is-online { outline-width: 3px; outline-offset: 3px; }
.ch-hello { margin: 4px 0 0; font-size: 26px; font-weight: 800; color: var(--color-ink); }
.ch-welcome .empty-text { max-inline-size: none; margin: 0 0 18px; }
.ch-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 190px)); justify-content: center; gap: 14px; inline-size: 100%; }
.ch-q { display: grid; justify-items: start; align-content: start; gap: 2px; padding: 16px; border: 1px solid var(--color-border); border-radius: 18px;
  background: var(--color-surface); box-shadow: 0 12px 24px -16px var(--bubble-shade); color: inherit; font: inherit; text-align: start; text-decoration: none;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.ch-q:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px var(--bubble-shade); text-decoration: none; }
.ch-q-ic { display: grid; place-items: center; inline-size: 42px; block-size: 42px; margin-block-end: 8px; border-radius: 12px; }
.ch-q-ic--navy { background: var(--color-primary-subtle); color: var(--color-ink); }
.ch-q-ic--amber { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.ch-q-ic--green { background: var(--color-success-subtle); color: var(--color-success-ink); }
.ch-q b { color: var(--color-ink); font-size: var(--text-sm); }
.ch-q small { color: var(--color-text-muted); font-size: 12px; }
.ch-welcome-online { inline-size: 100%; margin-block-start: 22px; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: 18px;
  background: var(--color-surface); box-shadow: 0 12px 24px -18px var(--bubble-shade); }
.ch-welcome-online h3 { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); text-align: start; }
.ch-welcome-online .ch-online { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; }
.ch-welcome .ch-on { color: var(--color-text); }
.ch-welcome .ch-on:hover { background: var(--color-primary-subtle); }

@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; }
  .chat-head { padding: 10px 12px; }
  .chat-head-stack { display: none; }
  .chat-log { padding: 14px 12px 6px; }
  .ch-msg { max-inline-size: 86%; }
  .ch-composer { margin: 4px 10px 12px; }
  .chat-room .ch-replybar, .chat-room .ch-attach, .chat-room .ch-emoji { margin-inline: 10px; }
}
/* the admin's top bar on a narrow phone (one link more than staff): smaller buttons and logo instead of overflowing */
@media (max-width: 420px) {
  .topbar-inner { padding-inline: var(--space-3); gap: var(--space-2); }
  .topbar-end { gap: 2px; }
  .topbar-end .icon-btn { inline-size: 36px; block-size: 36px; min-inline-size: 36px; }
  .topbar-end .link { padding-inline: 2px; }
  .brand-img { block-size: 26px; }
}

/* «حساب من» facts for colleagues (read-only); the created-accounts key block */
.acc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin: 0; }
.acc-facts div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-primary-subtle); }
.acc-facts dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.acc-facts dd { margin: 0; font-weight: 700; color: var(--color-ink); }
.acc-created-key { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-end: var(--space-3); }
.acc-created-key div { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-primary-subtle); }
.acc-created-key span { font-size: var(--text-xs); color: var(--color-text-muted); }
.acc-created-key strong { color: var(--color-ink); font-size: var(--text-base); }
@media print { .no-print, .topbar, .admin-nav, .sidebar { display: none !important; } }

/* «گزارش رویدادها» (/admin/logs): filters in a wrapping row, a dense table */
.log-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.log-filters .field { margin: 0; min-inline-size: 140px; flex: 1 1 140px; }
.log-filter-actions { display: flex; gap: var(--space-2); padding-block-end: 2px; }
.log-table td { vertical-align: top; font-size: 12.5px; }
.log-when { white-space: nowrap; color: var(--color-text-muted); }
.log-when b { color: var(--color-ink); font-weight: 600; }
.log-dev { min-inline-size: 140px; }
.log-detail { display: flex; flex-wrap: wrap; gap: 4px 10px; max-inline-size: 420px; }
.log-detail span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.log-detail b { color: var(--color-text-muted); font-weight: 600; margin-inline-end: 2px; }
.log-cat { font-size: 10.5px; }
.log-cat--chat { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.log-cat--meet { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.log-cat--stream { background: var(--tag-grey-bg); color: var(--tag-grey-fg); }
.log-cat--client { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }
.log-cat--error { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.log-cat--access { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }

/* ---- panel groups «گروه‌ها و دسترسی‌ها» (2026-11-10) ---- */
.access-table td { vertical-align: top; }
.access-sub { display: block; margin-block-start: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
.access-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.access-tags .tag .icon { color: var(--color-warning-ink); vertical-align: -3px; }
.access-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); }
.access-perm { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer; }
.access-perm:has(input:checked) { border-color: color-mix(in srgb, var(--color-ink) 45%, var(--color-border)); background: var(--color-primary-subtle); }
.access-perm input { inline-size: 18px; block-size: 18px; margin-block-start: 3px; flex-shrink: 0; accent-color: var(--color-primary); }
.access-perm span { display: grid; gap: 2px; }
.access-perm strong { font-size: var(--text-sm); color: var(--color-ink); }
.access-perm small { font-size: var(--text-xs); line-height: 1.8; color: var(--color-text-muted); }
.access-filter { max-inline-size: 320px; min-block-size: 40px; margin-block-end: var(--space-2); padding-inline: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.access-picks { display: grid; gap: 6px; }
.access-picks .check small { margin-inline-start: 6px; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 640px) {   /* phones: each group is a card, not a row squeezed into four columns */
  .access-table thead { display: none; }
  .access-table, .access-table tbody { display: block; }
  .access-table tr { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-block-end: 1px solid var(--color-border); }
  .access-table tr:last-child { border-block-end: 0; }
  .access-table td { display: block; padding: 0; border: 0; }
}
.log-pages { display: flex; gap: var(--space-2); justify-content: center; margin-block-start: var(--space-3); }
.login-tabs { margin-block-end: var(--space-3); }
.login-table .tag { font-size: 10.5px; }
.log-cat--auth { background: var(--tag-teal-bg); color: var(--tag-teal-fg); }
.log-cat--accounts { background: var(--tag-navy-bg, var(--color-primary-subtle)); color: var(--color-ink); }

/* ───────────── «گزارش‌ها»: the reports' home page and the pages behind its tiles (app/reports.py) ───────────── */
.rp { display: grid; gap: var(--space-4); }
.rp-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); }
.rp-find { display: flex; align-items: center; gap: var(--space-2); block-size: 42px; flex: 0 0 300px; padding-inline: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); }
.rp-find:focus-within { border-color: var(--brand-navy-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-navy-500) 22%, transparent); }
.rp-find input { flex: 1 1 0; min-inline-size: 0; block-size: 100%; border: 0; background: transparent; outline: none; font: inherit; font-size: var(--text-sm); color: var(--color-text); }
.rp-find input::placeholder { color: var(--color-text-muted); }
.rp-find input::-webkit-search-cancel-button { display: none; }
.rp-count { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 24px; block-size: 24px; padding-inline: 7px; margin-inline-start: 6px; border-radius: var(--radius-full); background: var(--color-danger-subtle); color: var(--color-danger-ink); font-size: var(--text-xs); font-weight: 700; vertical-align: middle; }
.rp-attn { display: grid; }
.rp-attn-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 10px 0; border-block-end: 1px solid var(--color-border); }
.rp-attn-row:first-child { padding-block-start: 2px; }
.rp-attn-row:last-child { border-block-end: 0; padding-block-end: 2px; }
.rp-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--color-warning); }
.rp-dot.is-err { background: var(--color-danger); }
.rp-dot.is-info { background: var(--color-info); }
.rp-attn-text { display: grid; gap: 2px; min-inline-size: 0; }
.rp-attn-text strong { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.rp-attn-text span { font-size: var(--text-xs); line-height: 1.8; color: var(--color-text-muted); }
.rp-attn-row .link { font-size: var(--text-sm); white-space: nowrap; }
.rp-calm { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-success-ink); }
.rp-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: stretch; }
.rp-cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.rp-chartbox { display: flex; flex-direction: column; }
.rp-chart { direction: ltr; flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); align-items: end; gap: 4px; min-block-size: 190px; padding-block-start: var(--space-2); border-block-end: 1px solid var(--color-border); }
.rp-chart--one { min-block-size: 150px; }
.rp-col { display: flex; align-items: flex-end; justify-content: center; gap: 3px; block-size: 100%; }
.rp-bar { inline-size: min(14px, 42%); min-block-size: 2px; border-radius: 4px 4px 0 0; background: var(--color-success); }
.rp-bar.is-fail { background: var(--color-danger); }
.rp-bar.is-plain { inline-size: min(22px, 70%); background: var(--brand-navy-500); }
.rp-bar.is-zero { background: var(--color-border); }
.rp-axis { direction: ltr; display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); gap: 4px; margin-block-start: 6px; font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.rp-axis.is-dense span:nth-child(even) { visibility: hidden; }
.rp-legend { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.rp-legend i { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; margin-inline-end: 6px; background: var(--color-success); }
.rp-legend i.is-fail { background: var(--color-danger); }
.rp-feed { display: grid; margin: 0; padding: 0; list-style: none; }
.rp-feed li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3); padding: 8px 0; border-block-end: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-ink); }
.rp-feed li:last-child { border-block-end: 0; }
.rp-feed li.is-bad > div > bdi { color: var(--color-danger-ink); }
.rp-feed time { color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.9; }
.rp-feed small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.rp-h { margin: var(--space-2) 0 0; font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); }
.rp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.rp-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); text-decoration: none; transition: border-color .15s; }
.rp-tile:hover, .rp-tile:focus-visible { border-color: var(--brand-navy-500); }
.rp-ico { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-md); background: var(--color-primary-subtle); color: var(--color-ink); }
.rp-tile-body { display: grid; gap: 4px; min-inline-size: 0; }
.rp-tile-body strong { font-size: var(--text-base); font-weight: 700; color: var(--color-ink); }
.rp-tile-body span { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }
.rp-tile-body em { font-style: normal; font-size: var(--text-xs); font-weight: 600; color: var(--color-ink); }
.rp-tile-links { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); }
.rp-tile-links .link { min-block-size: 0; padding: 0; font-size: var(--text-xs); font-weight: 600; line-height: 1.9; }
.rp-states { margin-block: var(--space-3); }
.rp-states b { margin-inline-start: 4px; font-weight: 700; opacity: .8; }
.rp-people-filters .field { flex: 0 1 380px; }
.rp-who { display: flex; align-items: center; gap: var(--space-3); color: var(--color-ink); text-decoration: none; }
.rp-who:hover > span:last-child { text-decoration: underline; }
.rp-who small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.rp-who .avatar { inline-size: 32px; block-size: 32px; font-size: var(--text-xs); }
.rp-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
td.rp-tags { display: table-cell; }
td.rp-tags .tag { margin-block: 2px; margin-inline-end: 4px; }
.rp-verdict-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rp-verdict-list li { display: flex; align-items: flex-start; gap: var(--space-2); padding: 10px var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.9; background: var(--color-warning-subtle); color: var(--color-warning-ink); }
.rp-verdict-list li > .icon { margin-block-start: 5px; flex-shrink: 0; }
.rp-verdict-list li.is-ok { background: var(--color-success-subtle); color: var(--color-success-ink); }
.rp-verdict-list li.is-err { background: var(--color-danger-subtle); color: var(--color-danger-ink); }
.rp-verdict-list li.is-info { background: var(--color-primary-subtle); color: var(--color-ink); }
.rp-sub { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.rp-mini { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.rp-mini li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.rp-direct td { border-block-start: 2px solid var(--color-border); }
.rp-devices th, .rp-devices td { white-space: nowrap; }
.rp-devices .tag:not([class*='tag-']) { background: var(--neutral-100); color: var(--color-text-muted); }
@media (max-width: 900px) {
  .rp-cols, .rp-cols--even { grid-template-columns: minmax(0, 1fr); }
  .rp-tiles { grid-template-columns: minmax(0, 1fr); }
  .rp-tools { flex-wrap: wrap; inline-size: 100%; }
  .rp-find { flex: 1 1 100%; }
  .rp-attn-row { grid-template-columns: 10px minmax(0, 1fr); }
  .rp-attn-row .link { grid-column: 2; }
  .rp-people-filters .field { flex: 1 1 100%; }
}

/* ───────────── a list's own search box and sorting (admin/_list_tools.html, portal.js) ───────────── */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-3); }
.list-find { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 280px; max-inline-size: 440px; block-size: 40px; padding-inline: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); }
.list-find:focus-within { border-color: var(--brand-navy-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-navy-500) 22%, transparent); }
.list-find input { flex: 1 1 0; min-inline-size: 0; block-size: 100%; border: 0; background: transparent; outline: none; font: inherit; font-size: var(--text-sm); color: var(--color-text); }
.list-find input::placeholder { color: var(--color-text-muted); }
.list-find input::-webkit-search-cancel-button { display: none; }
.list-sort { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.list-sort select { block-size: 40px; min-inline-size: 150px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: var(--text-sm); }
.list-sort select:focus { border-color: var(--brand-navy-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-navy-500) 22%, transparent); outline: none; }
.list-dir { block-size: 40px; inline-size: 40px; min-inline-size: 40px; padding: 0; justify-content: center; }
.list-dir .icon { transition: transform .15s; transform: none; }
.list-dir.is-up .icon { transform: rotate(180deg); }
.list-count { margin-inline-start: auto; font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }
.list-none { margin: var(--space-3) 0 0; }
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover, th.th-sort:focus-visible { color: var(--color-ink); }
th.th-sort::after { content: "↕"; margin-inline-start: 6px; font-size: 11px; opacity: .35; }
th.th-sort[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--color-ink); }
th.th-sort[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--color-ink); }
@media (max-width: 640px) {
  .list-find { flex: 1 1 100%; max-inline-size: none; }
  .list-sort { flex: 1 1 auto; }
  .list-sort select { flex: 1 1 auto; min-inline-size: 0; }
}

/* ───────────── a person's photo: «حساب من» and the account form ───────────── */
.acc-photo { display: flex; align-items: center; gap: var(--space-4); margin-block-end: var(--space-4); }
.acc-photo .avatar { margin: 0; flex-shrink: 0; overflow: hidden; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.acc-photo .avatar--xl { border-radius: 50%; }
.acc-photo .avatar img { min-block-size: 0; aspect-ratio: 1; }
.acc-photo-side { display: grid; gap: var(--space-2); min-inline-size: 0; }
.acc-photo-side .help { margin: 0; }
.acc-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.acc-photo-actions form { margin: 0; }
.acc-photo-actions label.btn { cursor: pointer; }
.acc-photo-actions label.btn.is-busy { opacity: .6; pointer-events: none; }
.acc-photo-field .acc-photo { margin-block-end: 0; }
.acc-photo-field input[type=file] { max-inline-size: 100%; font-size: var(--text-sm); }

/* ───────────── the chat page on the chat core v2 (templates/im.html, static/js/im/): what its modules draw beyond the pieces
   of the present chat — the state of a message that is on its way, several files, marks for invisible characters ───────────── */
/* each paragraph orders its own letters (dir="auto"); it stays on the bubble's side, and the last one is inline so that
   the time sits at the end of its last line, as it always did */
.ch-bubble .text .p { display: block; text-align: match-parent; }
.ch-bubble .text .p:last-child { display: inline; }
.ch-bubble img.ch-img { block-size: auto; }
.ch-ctl { display: inline-block; margin-inline: 1px; padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--color-ink) 12%, transparent);
  color: var(--color-text-muted); font-size: 9px; font-weight: 700; line-height: 1.5; vertical-align: middle; direction: ltr; unicode-bidi: isolate; }
.ch-tick { display: inline-flex; align-items: center; }
.ch-tick .icon + .icon { margin-inline-start: -9px; }
.ch-bubble .time .ch-tick.is-pending .icon { color: var(--own-muted); }
.ch-bubble .time .ch-tick.is-failed .icon { color: #FFB4A8; }
.ch-msg.is-pending .ch-bubble { opacity: 0.86; }
.ch-failed { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; font-size: 12px; color: var(--color-danger-ink); }
.ch-failed .icon { inline-size: 14px; block-size: 14px; flex-shrink: 0; }
.ch-failed .chat-more, .chat--im .chat-info .chat-more { min-block-size: 24px; padding: 2px 6px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--color-info-ink); cursor: pointer; }
.ch-failed .chat-more:hover, .chat--im .chat-info .chat-more:hover { background: var(--color-primary-subtle); }
.ch-sys { align-self: center; max-inline-size: 90%; padding: 2px 12px; font-size: 12px; color: var(--color-text-muted); text-align: center; }
.ch-reacts { flex-wrap: wrap; }
.ch-reacts button { display: inline-flex; align-items: center; gap: 3px; min-block-size: 24px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-bg); color: var(--color-text); font: inherit; font-size: 11.5px; line-height: 22px; cursor: pointer; }
.ch-reacts button.is-mine { border-color: var(--color-primary); background: var(--color-primary-subtle); color: var(--color-ink); }
.ch-msg:focus-within .ch-tools { display: inline-flex; }
/* A message's menu (static/js/im/view/menu.js). Nothing opens over a message because the mouse passed it: one small
   button beside the bubble — on the free side of the conversation, never on the text — opens the menu. The button is a
   child of the bubble, so the bubble stays «hovered» while the mouse goes over to it; its ::before closes the gap.
   Its class is `.ch-dots`: `.ch-more` is taken — the «+n» chip beside the faces in a room's head. */
.ch-dots { position: absolute; inset-block-start: 50%; inset-inline-start: calc(100% + 8px); translate: 0 -50%; display: none; place-items: center; inline-size: 30px; block-size: 30px; padding: 0;
  border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text-muted); box-shadow: var(--shadow-1); cursor: pointer; }
.ch-dots::before { content: ""; position: absolute; inset: -7px -12px; }
.ch-msg.is-own .ch-dots { inset-inline-start: auto; inset-inline-end: calc(100% + 8px); }
.ch-bubble:hover .ch-dots, .ch-bubble:focus-within .ch-dots, .ch-msg.is-menu .ch-dots { display: grid; }
.ch-dots:hover, .ch-msg.is-menu .ch-dots { background: var(--color-primary-subtle); color: var(--color-ink); }
.ch-dots:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ch-dots .icon { inline-size: 17px; block-size: 17px; }
@media (hover: none), (pointer: coarse) { .ch-dots { display: none !important; } }      /* a touch on the message opens the menu there */
.ch-menu { position: fixed; z-index: 75; min-inline-size: 232px; max-inline-size: calc(100vw - 16px); padding: 6px; border: 1px solid var(--color-border); border-radius: 14px;
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-2), 0 2px 8px rgba(0, 0, 0, 0.08); font-size: var(--text-sm); }
.ch-menu-reacts { display: flex; justify-content: space-between; gap: 2px; padding: 2px 2px 6px; margin-block-end: 4px; border-block-end: 1px solid var(--color-border); }
.ch-menu-reacts button { display: grid; place-items: center; inline-size: 36px; block-size: 36px; padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
.ch-menu-reacts button:hover, .ch-menu-reacts button:focus-visible { background: var(--color-primary-subtle); outline: 0; }
.ch-menu-reacts button.is-mine { background: var(--color-primary-subtle); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.ch-menu-item { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 38px; padding: 6px 10px; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ch-menu-item:hover, .ch-menu-item:focus-visible { background: var(--color-primary-subtle); outline: 0; }
.ch-menu-item .icon { flex-shrink: 0; inline-size: 17px; block-size: 17px; color: var(--color-text-muted); }
.ch-menu.is-sheet { inset-inline: 0; inset-block-end: 0; min-inline-size: 0; max-inline-size: none; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border: 0; border-block-start: 1px solid var(--color-border);
  border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.22); }
.ch-menu.is-sheet .ch-menu-reacts button { inline-size: 44px; block-size: 44px; font-size: 23px; }
.ch-menu.is-sheet .ch-menu-item { min-block-size: 46px; font-size: var(--text-md, 15px); }
.ch-copy-box { position: fixed; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px; opacity: 0; }
/* The conversation's filters (static/js/im/view/filter.js): one row under the head, there only while its button is on. */
.chat-head [data-filter-toggle].is-on { background: var(--color-primary-subtle); color: var(--color-ink); }
.ch-filter { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px var(--space-4); border-block-end: 1px solid var(--color-border); background: var(--color-surface);
  overflow-x: auto; scrollbar-width: none; font-size: var(--text-xs); }
.ch-filter[hidden], .ch-results[hidden] { display: none; }
.ch-filter::-webkit-scrollbar { display: none; }
.ch-filter-find { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 200px; min-inline-size: 150px; max-inline-size: 320px; padding-inline: 10px; block-size: 32px; border: 1px solid var(--color-border);
  border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-text-muted); }
.ch-filter-find:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
.ch-filter-find .icon { flex-shrink: 0; inline-size: 15px; block-size: 15px; }
.ch-filter-q { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: none; color: var(--color-text); font: inherit; }
.ch-filter-q::-webkit-search-cancel-button { display: none; }
.ch-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; block-size: 32px; padding-inline: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text); font: inherit; white-space: nowrap; cursor: pointer; }
.ch-chip:hover { background: var(--color-primary-subtle); }
.ch-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ch-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.ch-chip .icon { inline-size: 15px; block-size: 15px; }
.ch-chip b { font-weight: 600; opacity: 0.72; }
select.ch-chip { max-inline-size: 190px; padding-inline: 10px; }
select.ch-chip.is-on option { color: var(--color-text); background: var(--color-surface); }
.ch-filter-day { margin-inline-start: auto; }
.ch-filter-clear { border-style: dashed; color: var(--color-text-muted); }
.ch-pane.is-filtering .chat-log, .ch-pane.is-filtering .chat-pin { display: none; }
@media (max-width: 760px) {      /* a phone's head keeps few buttons (the rule above hides the others); the filter is one of the few */
  .chat--im .chat-head .icon-btn[data-filter-toggle]:not([hidden]) { display: inline-grid; }
  .ch-filter { padding-inline: var(--space-3); }
  .ch-filter-find { flex: 0 0 170px; }
  .ch-filter-day { margin-inline-start: 0; }
  .ch-results { padding: var(--space-3); }
}
.ch-results { flex: 1; min-block-size: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.ch-results .ch-msg.is-result { cursor: pointer; }
.ch-results .ch-msg.is-result:hover .ch-bubble { box-shadow: 0 0 0 2px var(--color-accent); }
.ch-results .ch-dots { display: none !important; }
.ch-results .chat-day { align-self: center; }
.ch-results-more { align-self: center; margin-block: var(--space-2); }
.ch-cal { position: fixed; z-index: 75; inline-size: 272px; padding: 10px 12px 12px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-2); }
.ch-cal header { display: flex; align-items: center; justify-content: space-between; margin-block-end: 6px; }
.ch-cal header strong { font-size: var(--text-sm); color: var(--color-ink); }
.ch-cal header .icon-btn { inline-size: 30px; block-size: 30px; }
.ch-cal header .icon-btn[disabled] { opacity: 0.3; cursor: default; }
.ch-cal .ch-cal-next .icon { rotate: 180deg; }
.ch-cal-week, .ch-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ch-cal-week span { padding-block: 4px; font-size: 11px; color: var(--color-text-muted); }
.ch-cal-grid button { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: var(--text-xs); cursor: pointer; }
.ch-cal-grid button:hover:not([disabled]), .ch-cal-grid button:focus-visible { background: var(--color-primary-subtle); outline: 0; }
.ch-cal-grid button.is-today { box-shadow: inset 0 0 0 1.5px var(--color-primary); font-weight: 700; }
.ch-cal-grid button[disabled] { opacity: 0.3; cursor: default; }
/* «جزئیات پیام» */
.ch-shade { position: fixed; inset: 0; z-index: 76; display: grid; place-items: center; padding: var(--space-4); background: rgba(5, 10, 20, 0.45); }
.ch-detail { inline-size: min(420px, 100%); max-block-size: calc(100vh - 2 * var(--space-4)); overflow: auto; padding: 16px 20px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-2); font-size: var(--text-sm); }
.ch-detail:focus { outline: 0; }
.ch-detail header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: 10px; }
.ch-detail h3 { margin: 0; font-size: var(--text-md, 16px); color: var(--ink-strong, var(--color-ink)); }
.ch-detail-quote { margin: 0 0 14px; padding: 9px 12px; border-radius: 12px; background: var(--color-primary-subtle); line-height: 1.9; overflow-wrap: anywhere; }
.ch-detail-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.ch-detail-rows dt { color: var(--color-text-muted); }
.ch-detail-rows dd { margin: 0; grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ch-detail-rows dd small { color: var(--color-text-muted); font-size: var(--text-xs); }
.ch-detail-rows dd.is-none { color: var(--color-text-muted); }
.ch-detail-seen { margin-block-start: 14px; padding-block-start: 14px; border-block-start: 1px solid var(--color-border); }
.ch-detail-seen[hidden] { display: none; }
/* «دربارهٔ گفت‌وگو» (static/js/im/view/info.js): the conversation's name in the head is the way in, and what opens is a
   small card under it — not a column of the page (the owner, 2026-11-11: smaller, and nicer). */
.chat-head-who { display: flex; align-items: center; gap: var(--space-3); flex: 0 1 auto; min-inline-size: 0; margin-block: -6px; margin-inline: -10px auto; padding: 6px 10px; border: 0; border-radius: 16px;
  background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.chat-head-who:hover, .chat-head-who[aria-expanded="true"] { background: color-mix(in srgb, var(--color-ink) 7%, transparent); }
.chat-head-who:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.chat-head-who > .avatar { flex-shrink: 0; inline-size: 44px; block-size: 44px; }
.chat-head-who > .avatar:has(> .icon) { border-radius: 14px; background: linear-gradient(135deg, var(--rail-from), var(--rail-to)); color: var(--rail-accent); }
.chat-head-who .chat-head-text { display: block; }
@media (max-width: 760px) { .chat-head-who > .avatar { display: none; } .chat-head-who { margin-block: -4px; margin-inline: -6px auto; padding: 4px 6px; } }
.ch-about { position: fixed; z-index: 74; display: grid; gap: 14px; inline-size: 320px; max-inline-size: calc(100vw - 16px); max-block-size: min(74vh, 580px); overflow: auto; padding: 16px;
  border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-2), 0 2px 8px rgba(0, 0, 0, 0.08); font-size: var(--text-sm); }
.ch-about[hidden] { display: none; }
.ch-about:focus { outline: 0; }
.ch-about-top { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.ch-about-top > .avatar { flex-shrink: 0; inline-size: 56px; block-size: 56px; font-size: 20px; }
.ch-about-top > .avatar:has(> .icon) { border-radius: 16px; background: linear-gradient(135deg, var(--rail-from), var(--rail-to)); color: var(--rail-accent); }
.ch-about-top > .avatar .icon { inline-size: 26px; block-size: 26px; }
.ch-about-top > div { min-inline-size: 0; }
.ch-about-top strong { display: block; font-size: 16px; color: var(--color-ink); overflow-wrap: anywhere; }
.ch-about-top small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.9; }
.ch-about-top small b { color: var(--color-success-ink); font-weight: 600; }
.ch-about-top p { margin: 2px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.8; }
.ch-about-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.ch-about-acts button { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-bg); color: var(--color-text);
  font: inherit; font-size: 12px; cursor: pointer; }
.ch-about-acts button:hover { background: var(--color-primary-subtle); }
.ch-about-acts button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ch-about-acts button[aria-pressed="true"] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.ch-about-acts .icon { inline-size: 19px; block-size: 19px; color: var(--color-ink); }
.ch-about h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.ch-about .chat-more { min-block-size: 24px; padding: 2px 8px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--color-info-ink); cursor: pointer; }
.ch-about .chat-more:hover { background: var(--color-primary-subtle); }
.ch-about .ch-members { max-block-size: 204px; overflow: auto; padding: 4px; padding-inline-end: 2px; margin: -4px; margin-inline-end: 0; }      /* room for the ring of who is online: a list that scrolls cuts what is outside its box */
.ch-about .ch-members li { min-block-size: 34px; }
/* ── groups (docs/CHAT-DESIGN.md §20): a group for announcements, its card, the windows that make and change one,
   removing a message. Every part appears only for the person and the group it concerns. ── */
.ch-kind { display: inline-flex; margin-inline-start: 5px; vertical-align: -2px; color: var(--color-text-muted); }
.ch-kind .icon { inline-size: 13px; block-size: 13px; }
.chat-item.is-active .ch-kind, .chat-list .ch-kind { color: inherit; opacity: 0.7; }
.ch-seen { align-self: flex-end; display: inline-flex; align-items: center; gap: 5px; flex-basis: 100%; justify-content: flex-end; margin: -2px 6px 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--color-text-muted); cursor: pointer; }
.ch-seen:hover span, .ch-seen:focus-visible span { text-decoration: underline; }
.ch-seen:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; }
.ch-seen .icon { inline-size: 13px; block-size: 13px; }
.ch-msg:has(> .ch-seen) { flex-wrap: wrap; }
.ch-oneway { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 24px 18px; padding: 8px 8px 8px 14px; border: 1px solid var(--color-border); border-radius: 26px; background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm); }
.ch-oneway[hidden], .ch-composer[hidden] { display: none; }
.ch-oneway > span { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }
.ch-oneway > span .icon { flex-shrink: 0; inline-size: 18px; block-size: 18px; }
.ch-oneway button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-block-size: 40px; padding-inline: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); cursor: pointer; }
.ch-oneway button:hover { background: var(--color-primary-subtle); }
.ch-oneway button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ch-oneway button[aria-pressed="true"] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.ch-oneway button .icon { inline-size: 16px; block-size: 16px; }
.ch-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: var(--text-sm); }
.ch-facts dt { color: var(--color-text-muted); }
.ch-facts dd { margin: 0; color: var(--color-ink); font-weight: 600; }
.ch-members--few { max-block-size: none; }
.ch-edit { display: flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 40px; border: 1px solid var(--color-border); border-radius: 12px; background: none; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); cursor: pointer; }
.ch-edit:hover { background: var(--color-primary-subtle); }
.ch-edit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ch-edit .icon { inline-size: 16px; block-size: 16px; }
.ch-menu-sep { block-size: 1px; margin: 4px 2px; background: var(--color-border); }
.ch-menu-item.is-danger, .ch-menu-item.is-danger .icon { color: var(--color-danger-ink); }
.ch-reason { display: grid; gap: 6px; margin-block-end: 12px; font-size: var(--text-sm); }
.ch-reason span { color: var(--color-text-muted); }
.ch-reason textarea { min-block-size: 76px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); font: inherit; line-height: 1.8; color: var(--color-text); resize: none; }
.ch-note { margin: 0 0 14px; font-size: 12px; line-height: 1.9; color: var(--color-text-muted); }
.ch-acts { display: flex; gap: 8px; justify-content: flex-start; }
.ch-group .ch-modal-box { inline-size: min(520px, 100%); max-block-size: 94vh; overflow: auto; }
.ch-group textarea { min-block-size: 64px; resize: none; line-height: 1.8; }
.ch-group [data-room-pick] { display: grid; gap: 8px; margin-block-start: 8px; }
.ch-group [data-room-pick][hidden], .ch-group [data-room-all-note][hidden] { display: none; }
.ch-group [data-room-pick] .ch-people { max-block-size: 190px; overflow: auto; }
.ch-group [data-room-all-note] { display: block; margin-block-start: 8px; color: var(--color-text-muted); font-size: 12px; line-height: 1.9; }
.ch-pic-row { display: flex; align-items: center; gap: 14px; }
.ch-pic-row .avatar { inline-size: 64px; block-size: 64px; flex-shrink: 0; }
.ch-pic-row .avatar .icon { inline-size: 28px; block-size: 28px; }
.ch-pic-row small { display: block; margin-block-start: 4px; color: var(--color-text-muted); font-size: 12px; }
/* the panel's side of groups: who makes them, who manages each */
.chat-faces { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: var(--space-3); }
.chat-faces--row { margin: 0; gap: 6px 12px; }
.chat-face { display: inline-flex; align-items: center; gap: 8px; min-block-size: 36px; padding: 3px 10px 3px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-ink); }
.chat-faces--row .chat-face { padding: 0; border: 0; background: none; min-block-size: 0; }
.chat-face .avatar { inline-size: 28px; block-size: 28px; font-size: 11px; flex-shrink: 0; }
.chat-pick { margin-block-end: var(--space-3); }
.chat-pick > summary { inline-size: fit-content; margin-block-end: var(--space-3); padding: 6px 12px; border: 1px dashed var(--color-border); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; color: var(--color-info-ink); cursor: pointer; list-style: none; }
.chat-pick > summary::-webkit-details-marker { display: none; }
.check .chat-hours { display: inline-block; box-sizing: border-box; inline-size: 78px; min-block-size: 36px; margin-inline: 8px; padding: 2px 10px; text-align: center; font-weight: 600; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-family: inherit; }
@media (max-width: 760px) {
  .ch-oneway { margin: 6px 10px 10px; }
}
.ch-about-leave { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 8px; margin: -2px -8px -4px; border: 0; border-radius: 10px; background: none;
  color: var(--color-danger-ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.ch-about-leave:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.ch-about-leave .icon { inline-size: 15px; block-size: 15px; }
.ch-about.is-sheet { inset-inline: 0; inset-block-end: 0; inline-size: auto; max-inline-size: none; max-block-size: 82vh; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border: 0;
  border-block-start: 1px solid var(--color-border); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.22); }
.ch-bubble:focus-visible, .ch-bubble .quote:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ch-bubble .quote { cursor: pointer; }
.ch-msg.is-flash .ch-bubble, .ch-sys.is-flash { animation: im-flash 1.6s ease-out; }
@keyframes im-flash { 0%, 55% { box-shadow: 0 0 0 3px var(--color-accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.ch-tray { display: grid; gap: 4px; }
.ch-tray[hidden] { display: none; }
.ch-tray .ch-attach progress { flex-shrink: 0; inline-size: 72px; block-size: 6px; accent-color: var(--color-primary); }
.chat--im .chat-pin { inline-size: 100%; border: 0; border-block-end: 1px solid var(--color-border); font: inherit; font-size: var(--text-xs); text-align: start; cursor: pointer; }
.chat--im .chat-pin[hidden] { display: none; }
/* the mark of a pinned message beside its time: the present chat calls it `.pin`, which is also the news card of the home
   page — its box, border and hover were drawn around the mark; the new page has a name of its own */
.ch-bubble .time .pin, .ch-bubble .time .pin:hover { display: inline; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
.ch-bubble .time .ch-pinmark { color: var(--color-warning-ink); }
.ch-badge--dot { min-inline-size: 10px; inline-size: 10px; block-size: 10px; padding: 0; }
.ch-composer .send:disabled { opacity: 0.45; box-shadow: none; cursor: default; }
/* the emoji picker above the box (the owner's sample, 2026-11-11): groups along the top, a grid below; the device's own emoji */
.chat--im .ch-composer { position: relative; }
.ch-picker { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 16px; z-index: 30; display: flex; flex-direction: column;
  inline-size: min(392px, calc(100% - 32px)); block-size: min(340px, 52vh); border: 1px solid var(--color-border); border-radius: 18px;
  background: var(--color-surface); box-shadow: 0 18px 40px -18px var(--bubble-shade), var(--shadow-1); overflow: hidden;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.ch-picker[hidden] { display: none; }
.ch-picker-tabs { display: flex; flex-shrink: 0; padding-inline: 6px; border-block-end: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-ink) 4%, var(--color-surface)); }
.ch-picker-tabs button { flex: 1; min-inline-size: 0; block-size: 44px; padding: 0; border: 0; border-block-end: 3px solid transparent; background: none; font: inherit; font-size: 20px; line-height: 1;
  cursor: pointer; filter: grayscale(0.6); opacity: 0.75; }
.ch-picker-tabs button:hover { filter: none; opacity: 1; }
.ch-picker-tabs button[aria-selected=true] { border-block-end-color: var(--color-accent); filter: none; opacity: 1; }
.ch-picker-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); align-content: start; gap: 2px; padding: 8px; overscroll-behavior: contain; }
.ch-picker-grid button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.ch-picker-grid button:hover, .ch-picker-grid button:focus-visible { background: var(--color-primary-subtle); }
.ch-picker-grid .ch-none { grid-column: 1 / -1; font-family: var(--font-sans, inherit); }
.ch-picker button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ch-lightbox-save { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; inline-size: 44px; block-size: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #FFFFFF; cursor: pointer; }
.ch-lightbox-save:hover { background: rgba(255, 255, 255, 0.26); }