/* ELLSMS — پنل هوشمند پیامک
طراحی بر پایه‌ی رنگ‌های لوگو: بنفش‌آبی (indigo) تا آبی روشن، با تایپوگرافی
فارسی یکدست (وزیرمتن) که سلسله‌مراتب را با وزن و اندازه می‌سازد، نه با
ترکیب چند فونت. اعداد تاریخ و زمان همیشه فارسی؛ شماره‌موبایل و اعداد خام
(اعتبار، کد) به‌صورت لاتین و چپ‌به‌راست ایزوله می‌مانند تا خوانا و
کپی‌پذیر بمانند. */
/* Self-hosted Vazirmatn. This was previously an external webfont import; the
font is now served from this application's own assets, so the panel has no
runtime dependency on any third-party font service. All @font-face rules live
in fonts.css and nowhere else. */
@import url('/assets/css/fonts.css');
:root {
--indigo: #4a32e8;
--blue: #2e63f6;
--ink: #0b1023;
--muted: #5c657d; /* ≥4.5:1 on --card, --canvas, --tint and --line (was #666f87: 4.46 on --tint) */
--line: #e6e4f5;
--canvas: #f7f7fb;
--tint: #eef1ff;
--card: #ffffff;
--ok: #157347; --ok-bg: #e7f8ef;
--warn: #b45309; --warn-bg: #fdf3e3;
--err: #c0223a; --err-bg: #fdeaee;
--grad: linear-gradient(120deg, var(--indigo), var(--blue));
/* --lp-accent is a text/icon accent for the public marketing pages only.
It defaults to --indigo (a no-op everywhere else) and is overridden to a
brighter violet inside .lp-body's dark theme below, where plain --indigo
text would not have enough contrast against a near-black page. */
--lp-accent: var(--indigo);
/* --font-ui is THE default typeface of the panel. Everything that renders
prose, labels, buttons, tables and form controls resolves to this. Tahoma
is the first fallback because it ships with Windows and covers Persian, so
a failed font load degrades to something readable rather than to a Latin
face that cannot draw Persian at all. */
--font-ui: 'Vazirmatn', 'Segoe UI', Tahoma, Arial, sans-serif;
/* --font-mono is for DIAGNOSTIC values only: provider_message_id, API keys,
hashes, request IDs, JSON. These need fixed-width digits so a 19-digit
reference can be read and compared character by character. Vazirmatn is
deliberately NOT in this stack — it is proportional, and listing it first
(as this variable previously did) meant "monospace" values were never
actually monospaced. */
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
/* --font-num is for DISPLAY numerals: dashboard stat values, price amounts,
chart labels. These are branded headline numbers, not diagnostic strings —
they want the UI face, kept LTR and tabular so digits align in a column.
This is what the old --mono was actually being used for at those sites, so
they keep their exact current appearance. */
--font-num: var(--font-ui);
/* Legacy aliases, kept so existing call sites work without renaming unrelated
CSS. --mono maps to --font-num (its historical behaviour: Vazirmatn first)
rather than to --font-mono, so repointing diagnostics to a true monospace
does not silently restyle the dashboard's headline numbers. */
--font: var(--font-ui);
--mono: var(--font-num);
/* ====================================================================
TYPE SCALE — the panel's only permitted font sizes.
--------------------------------------------------------------------
Before this existed the panel used about twenty hardcoded sizes, five
of them half-pixel values (11.5, 12.5, 13.5, 14.5, 15.5). Differences
that small are invisible on their own but read, collectively, as an
interface that was never measured: nothing lines up with anything, and
hierarchy comes out of nowhere. These eight steps are a real scale —
each one is distinguishable from its neighbour, and every panel rule
below resolves to one of them. Adding a ninth size, or writing a px
value at a call site, puts the panel back where it started.
The landing pages (.lp-*) are a separate, display-oriented layout and
deliberately keep their own larger sizes; this scale is for the panel. */
--fs-2xs: 11px; /* micro meta: chart axis labels, field provenance */
--fs-xs: 12px; /* table headers, hints, badges, captions */
--fs-sm: 13px; /* form labels, small buttons, pills */
--fs-base: 14px; /* table cells — the panel's densest running text */
--fs-md: 15px; /* body prose, form controls */
--fs-lg: 17px; /* card titles */
--fs-xl: 20px; /* page title */
--fs-2xl: 26px; /* dashboard stat values */
/* LINE HEIGHTS. One global value cannot serve both a paragraph of Persian
prose and a table of delivery statuses. 1.85 everywhere (the previous
setting) made every dense surface sprawl. Three named values instead,
each applied where it belongs. */
--lh-tight: 1.3; /* stat values, page title — single-line display text */
--lh-snug: 1.5; /* tables, labels, controls, badges — dense UI */
--lh-base: 1.65; /* running prose and hints, still comfortable in Persian */
/* SPACING — a 4px grid, for the same reason the type scale exists. */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { direction: rtl; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
font-size: var(--fs-md);
line-height: var(--lh-base);
color: var(--ink);
font-feature-settings: "ss01" 1;
background:
radial-gradient(circle at 6% 4%, rgba(74,50,232,.05), transparent 32%),
radial-gradient(circle at 96% 96%, rgba(46,99,246,.05), transparent 32%),
var(--canvas);
overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* GLOBAL TYPOGRAPHY FLOOR.
Form controls are the reason this block exists: browsers do NOT inherit
font-family into ,