/* ==========================================================================
Udeyou OTP: core design system
Royal blue + cyan on deep ink, IBM Plex Sans Arabic + JetBrains Mono.
Light and dark themes ([data-theme="dark"] on ).
Files: style.css (core, this file) · pages.css · auth.css · app.css · docs.css
========================================================================== */
/* ---------- 1. Tokens (light — 10% lighter than dark mode) ---------- */
:root {
color-scheme: dark;
/* Ink (deep navy surfaces, used by the hero, footer, code and dark theme) */
--ink-950: #060A1C;
--ink-900: #0A1030;
--ink-800: #121A44;
--ink-700: #1C2659;
/* Brand */
--brand: #3358FF;
--brand-600: #2645E0;
--brand-700: #1D37B8;
--brand-50: rgba(51, 88, 255, .16);
--brand-100: rgba(138, 162, 255, .26);
--brand-200: rgba(138, 162, 255, .38);
--brand-300: #8AA2FF; /* brand tint for text/links on dark */
--cyan: #22C7E8;
--cyan-300: #5FDDF3;
--grad: linear-gradient(135deg, #3358FF 0%, #22C7E8 100%);
--grad-text: linear-gradient(90deg, #22C7E8 0%, #7C95FF 100%);
--grad-text-light: linear-gradient(90deg, #8AA2FF 0%, #5FDDF3 100%);
/* Status (base colours + text-safe tones + soft surfaces) */
--ok: #12B981;
--ok-text: #5BE0B0;
--ok-bg: rgba(18, 185, 129, .14);
--ok-line: rgba(18, 185, 129, .34);
--warn: #F5A524;
--warn-text: #F5C46B;
--warn-bg: rgba(245, 165, 36, .14);
--warn-line: rgba(245, 165, 36, .32);
--danger: #E5484D;
--danger-text: #FF9EA1;
--danger-bg: rgba(229, 72, 77, .15);
--danger-line: rgba(229, 72, 77, .36);
--info-text: #B4C3FF;
--info-bg: rgba(51, 88, 255, .17);
--info-line: rgba(138, 162, 255, .30);
/* Neutrals (10% less dark than [data-theme="dark"]) */
--text: #ECEFF9;
--heading: #F7F9FF;
--muted: #AAB6D8;
--subtle: #929FC4;
--line: rgba(255, 255, 255, .10);
--line-strong: rgba(255, 255, 255, .16);
--bg: #131C42;
--surface: #192452;
--surface-2: #1F2C61;
--surface-3: #263570;
--hover: rgba(138, 162, 255, .09);
--link: #94ACFF;
--link-hover: #BCCBFF;
/* Inputs */
--input-bg: #151F47;
--input-line: rgba(255, 255, 255, .16);
--input-line-hover: rgba(255, 255, 255, .26);
--placeholder: #7D8AB2;
/* Inline code */
--code-bg: rgba(138, 162, 255, .12);
--code-text: #D0DAFF;
--code-line: rgba(138, 162, 255, .20);
/* Text on dark surfaces (hero, footer, dark sections) */
--on-dark: #FFFFFF;
--on-dark-muted: rgba(222, 229, 255, .74);
--on-dark-subtle: rgba(222, 229, 255, .64);
--on-dark-line: rgba(255, 255, 255, .09);
/* Header */
--header-bg: rgba(19, 28, 66, .84);
--header-line: rgba(255, 255, 255, .10);
/* Type */
--font-sans: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
--font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
/* Shape */
--radius-xs: 8px;
--radius-sm: 10px;
--radius: 14px;
--radius-lg: 20px;
--radius-xl: 24px;
--radius-pill: 999px;
/* Elevation */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, .32);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 12px -4px rgba(0, 0, 0, .38);
--shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 28px -8px rgba(0, 0, 0, .50);
--shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 56px -18px rgba(0, 0, 0, .65);
--shadow-xl: 0 4px 12px rgba(0, 0, 0, .38), 0 40px 80px -24px rgba(0, 0, 0, .75);
--ring: 0 0 0 4px rgba(138, 162, 255, .24);
/* Layout */
--container: 1200px;
--gutter: 24px;
--header-h: 68px;
--section-y: 104px;
/* Legacy aliases (main's views/inline styles keep working) */
--ink: var(--text);
--card: var(--surface);
--accent: var(--brand);
--navy: var(--ink-900);
--err: var(--danger-text);
--line-2: var(--line-strong);
--emerald: var(--brand);
--emerald-2: var(--brand-600);
--mint: var(--brand-50);
--mint-2: var(--surface-2);
--forest: var(--ink-900);
--forest-2: var(--ink-800);
--forest-3: var(--ink-700);
--gold: var(--warn);
--gold-2: var(--warn-text);
--gold-soft: var(--warn-bg);
--focus: var(--ring);
}
/* ---------- 1b. Tokens (dark) ---------- */
[data-theme="dark"] {
color-scheme: dark;
/* الليلي يبقى أزرق الموقع — تجاوزات صريحة بعد تحول النهاري للأخضر */
--brand: #3358FF;
--brand-600: #2645E0;
--brand-700: #1D37B8;
--grad: linear-gradient(135deg, #3358FF 0%, #22C7E8 100%);
--grad-text-light: linear-gradient(90deg, #8AA2FF 0%, #5FDDF3 100%);
--ring: 0 0 0 4px rgba(51, 88, 255, .18);
--brand-50: rgba(51, 88, 255, .14);
--brand-100: rgba(138, 162, 255, .24);
--brand-200: rgba(138, 162, 255, .36);
--ok-text: #5BE0B0;
--ok-bg: rgba(18, 185, 129, .12);
--ok-line: rgba(18, 185, 129, .32);
--warn-text: #F5C46B;
--warn-bg: rgba(245, 165, 36, .12);
--warn-line: rgba(245, 165, 36, .30);
--danger-text: #FF9EA1;
--danger-bg: rgba(229, 72, 77, .13);
--danger-line: rgba(229, 72, 77, .34);
--info-text: #B4C3FF;
--info-bg: rgba(51, 88, 255, .15);
--info-line: rgba(138, 162, 255, .28);
--text: #E8ECF8;
--heading: #F4F6FD;
--muted: #9AA6C8;
--subtle: #8792B5;
--line: rgba(255, 255, 255, .08);
--line-strong: rgba(255, 255, 255, .14);
--bg: #060A1C;
--surface: #0A1030;
--surface-2: #0D1438;
--surface-3: #121A44;
--hover: rgba(138, 162, 255, .07);
--link: #8AA2FF;
--link-hover: #B4C3FF;
--input-bg: #070C22;
--input-line: rgba(255, 255, 255, .14);
--input-line-hover: rgba(255, 255, 255, .24);
--placeholder: #6F7AA0;
--code-bg: rgba(138, 162, 255, .10);
--code-text: #C9D4FF;
--code-line: rgba(138, 162, 255, .18);
--header-bg: rgba(6, 10, 28, .80);
--header-line: rgba(255, 255, 255, .08);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -4px rgba(0, 0, 0, .45);
--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -8px rgba(0, 0, 0, .6);
--shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 56px -18px rgba(0, 0, 0, .75);
--shadow-xl: 0 4px 12px rgba(0, 0, 0, .4), 0 40px 80px -24px rgba(0, 0, 0, .8);
--ring: 0 0 0 4px rgba(138, 162, 255, .22);
}
/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: clip;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.75;
color: var(--text);
background:
radial-gradient(1100px 520px at 50% -220px, rgba(51, 88, 255, .14), transparent 70%),
var(--bg);
background-repeat: no-repeat;
background-color: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
[data-theme="dark"] body {
background:
radial-gradient(1100px 520px at 50% -220px, rgba(51, 88, 255, .16), transparent 70%),
var(--bg);
background-repeat: no-repeat;
background-color: var(--bg);
}
h1, h2, h3, h4 { font-weight: 700; line-height: 1.35; color: var(--heading); }
h1 { font-size: clamp(26px, 3vw, 32px); }
h2 { font-size: clamp(21px, 2.4vw, 25px); }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
p { margin: 0; }
img, svg, video { max-width: 100%; }
img { height: auto; }
img, svg { vertical-align: middle; }
a { color: var(--link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
b, strong { font-weight: 700; }
small { font-size: .85em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(34, 211, 238, .35); }
[data-theme="dark"] ::selection { background: rgba(138, 162, 255, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[data-theme="dark"] :focus-visible { outline-color: var(--brand-300); }
[hidden] { display: none !important; }
.skip-link {
position: absolute; z-index: 300; top: -64px; inset-inline-start: 16px;
padding: 10px 16px; border-radius: var(--radius-sm);
background: var(--ink-900); color: #fff; font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; text-decoration: none; }
/* ---------- 3. Layout ---------- */
.container, .wrap {
width: 100%;
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.site-main { flex: 1 0 auto; width: 100%; }
.page-body { padding-block: 40px 80px; }
.page-body.fluid { max-width: calc(1320px + var(--gutter) * 2); }
.page-body > h1:first-child { margin-bottom: 20px; }
/* Full-bleed band inside the normal page container */
.band { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
/* ---------- 4. Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--header-bg);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--header-line);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand {
display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
color: var(--heading); font-weight: 700; text-decoration: none;
}
.brand:hover { color: var(--heading); text-decoration: none; }
.brand-mark {
display: block; width: 34px; height: 34px; border-radius: 9px;
box-shadow: 0 6px 24px rgba(8, 145, 178, .10);
}
.brand-name { direction: ltr; font-size: 21px; line-height: 1; letter-spacing: -.01em; }
.brand-tag {
direction: ltr; padding: 4px 6px; border-radius: 6px;
font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em;
color: var(--brand); background: var(--brand-50); border: 1px solid rgba(8, 145, 178, .35);
}
.nav-panel { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 20px; min-width: 0; }
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a, .nav-link, .site-header button.link {
padding: 8px 12px; border-radius: 8px;
font-size: 15px; font-weight: 500; line-height: 1.4; white-space: nowrap;
color: var(--muted); text-decoration: none;
transition: color .15s, background-color .15s;
}
.main-nav a:hover, .nav-link:hover, .site-header button.link:hover {
color: var(--text); background: var(--hover); text-decoration: none;
}
.main-nav a[aria-current="page"], .nav-link[aria-current="page"] { color: var(--heading); font-weight: 600; }
.main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand); border-radius: 8px 8px 2px 2px; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-actions form { display: inline-flex; margin: 0; }
.header-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Theme toggle (moon in light, sun in dark) */
.theme-toggle {
display: inline-grid; place-items: center; flex-shrink: 0;
width: 38px; height: 38px; padding: 0;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface); color: var(--muted); cursor: pointer;
box-shadow: var(--shadow-xs);
transition: color .15s, background-color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--brand); border-color: var(--line-strong); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
.nav-toggle {
display: none; place-items: center; flex-shrink: 0;
width: 40px; height: 40px; padding: 0;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text); cursor: pointer;
}
.nav-toggle-bars { position: relative; display: block; width: 18px; height: 12px; }
.nav-toggle-bars span {
position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: currentColor;
transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
.menu-open .nav-toggle-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.menu-open .nav-toggle-bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
/* Dark header (pages that open with a dark hero) and every header in dark theme */
.site-header.is-dark { background: rgba(6, 10, 28, .72); border-bottom-color: var(--on-dark-line); }
.site-header.is-dark .brand, .site-header.is-dark .brand:hover { color: #fff; }
.site-header.is-dark .brand-tag,
[data-theme="dark"] .brand-tag { color: #A9BBFF; background: rgba(51, 88, 255, .16); border-color: rgba(143, 168, 255, .22); }
.site-header.is-dark .main-nav a,
.site-header.is-dark .nav-link,
.site-header.is-dark button.link { color: var(--on-dark-muted); }
.site-header.is-dark .main-nav a:hover,
.site-header.is-dark .nav-link:hover,
.site-header.is-dark button.link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.site-header.is-dark .main-nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--cyan); }
.site-header.is-dark .theme-toggle,
.site-header.is-dark .nav-toggle,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .nav-toggle { color: #DDE4FF; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.site-header.is-dark .theme-toggle:hover,
[data-theme="dark"] .theme-toggle:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
[data-theme="dark"] .brand-mark { box-shadow: 0 6px 18px -6px rgba(51, 88, 255, .9); }
/* ---------- 5. Footer ---------- */
.site-footer {
position: relative;
margin-top: auto;
padding: 72px 0 28px;
background:
radial-gradient(640px 280px at 100% 0%, rgba(51, 88, 255, .10), transparent 70%),
var(--ink-950);
color: var(--on-dark-subtle);
font-size: 14.5px;
}
.site-footer::before {
content: ""; position: absolute; inset: 0 0 auto; height: 1px;
background: linear-gradient(90deg, transparent, rgba(51, 88, 255, .55), rgba(34, 199, 232, .5), transparent);
}
[data-theme="dark"] .site-footer { background: radial-gradient(640px 280px at 100% 0%, rgba(51, 88, 255, .10), transparent 70%), #04071A; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.footer-brand .brand, .footer-brand .brand:hover { color: #fff; }
.footer-brand .brand-tag { color: #A9BBFF; background: rgba(51, 88, 255, .16); border-color: rgba(143, 168, 255, .22); }
.footer-desc { margin-top: 18px; color: #fff; font-weight: 600; }
.footer-note { margin-top: 6px; max-width: 360px; line-height: 1.85; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
display: grid; place-items: center; width: 40px; height: 40px;
border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px;
color: #DDE4FF; background: rgba(255, 255, 255, .03);
transition: background-color .15s, border-color .15s, color .15s;
}
.footer-social a:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); text-decoration: none; }
.footer-social svg { width: 19px; height: 19px; }
.footer-col h2 { margin-bottom: 14px; font-size: 14px; font-weight: 600; color: #fff; }
.footer-col a, .footer-col span { display: block; width: fit-content; padding: 5px 0; color: var(--on-dark-subtle); line-height: 1.6; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--on-dark-line);
font-size: 13.5px;
}
.footer-legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.footer-legal > span + span::before {
content: ""; display: inline-block; vertical-align: middle;
width: 1px; height: 12px; margin-inline: 12px; background: rgba(255, 255, 255, .22);
}
.footer-links { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--on-dark-subtle); }
.footer-links a:hover { color: #fff; text-decoration: none; }
.site-footer :focus-visible { outline-color: var(--cyan); }
/* ---------- 6. Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 0 20px;
border: 1px solid transparent; border-radius: var(--radius-sm);
background: var(--brand); color: #fff;
font: 600 15px/1.2 var(--font-sans);
white-space: nowrap; text-decoration: none; cursor: pointer;
box-shadow: 0 2px 6px rgba(4, 8, 20, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.btn:hover {
background: var(--brand-600); color: #fff; text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(10, 16, 48, .14), inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 24px -10px rgba(51, 88, 255, .8);
}
.btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn svg, .btn .ic { width: 18px; height: 18px; flex-shrink: 0; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-600); }
.btn.grad { background: var(--grad); border: 0; }
.btn.grad:hover { background: linear-gradient(135deg, #2645E0 0%, #1BB3D3 100%); }
.btn.ink { background: var(--ink-900); color: #fff; box-shadow: 0 8px 18px -10px rgba(10, 16, 48, .7); }
.btn.ink:hover { background: var(--ink-800); }
.btn.secondary {
background: var(--surface); color: var(--text); border-color: var(--line-strong);
box-shadow: var(--shadow-xs);
}
.btn.secondary:hover { background: var(--surface); color: var(--text); border-color: var(--input-line-hover); box-shadow: var(--shadow-sm); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); box-shadow: none; }
.btn.ghost:hover { background: var(--hover); color: var(--text); border-color: var(--input-line-hover); box-shadow: none; }
.btn.light { background: #fff; color: var(--ink-900); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .5); }
.btn.light:hover { background: var(--brand-50); color: var(--ink-900); }
[data-theme="dark"] .btn.light:hover { background: #E7ECFF; }
.btn.gold { background: var(--warn); color: #2B1A00; box-shadow: 0 8px 18px -8px rgba(245, 165, 36, .7); }
.btn.gold:hover { background: #E6951A; color: #2B1A00; }
.btn.danger { background: var(--surface); color: var(--danger-text); border-color: var(--danger-line); box-shadow: none; }
.btn.danger:hover { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); box-shadow: none; }
.btn.danger.solid { background: var(--danger); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -8px rgba(229, 72, 77, .7); }
.btn.danger.solid:hover { background: #CF3A3F; color: #fff; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
.btn.small svg, .btn.small .ic { width: 16px; height: 16px; }
.btn.xs { min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn.large { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 12px; }
.btn.full { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
/* Buttons on dark surfaces (hero, CTA panels, dark sections, dark header) */
.on-dark .btn.ghost, .is-dark .btn.ghost, .hero .btn.ghost, .cta-panel .btn.ghost, .cta-band .btn.ghost, .page-hero .btn.ghost, .section.dark .btn.ghost,
[data-theme="dark"] .btn.ghost {
color: #fff; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .2);
}
.on-dark .btn.ghost:hover, .is-dark .btn.ghost:hover, .hero .btn.ghost:hover, .cta-panel .btn.ghost:hover, .cta-band .btn.ghost:hover, .page-hero .btn.ghost:hover, .section.dark .btn.ghost:hover,
[data-theme="dark"] .btn.ghost:hover {
color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32);
}
[data-theme="dark"] .btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px -12px rgba(51, 88, 255, .9); }
[data-theme="dark"] .btn:hover, [data-theme="dark"] .btn.primary:hover { background: #4766FF; }
[data-theme="dark"] .btn.secondary { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); box-shadow: none; }
[data-theme="dark"] .btn.secondary:hover { background: #18225A; }
[data-theme="dark"] .btn.ghost, [data-theme="dark"] .btn.danger { box-shadow: none; }
[data-theme="dark"] .btn.danger { background: transparent; color: var(--danger-text); border-color: var(--danger-line); }
[data-theme="dark"] .btn.danger:hover { background: var(--danger-bg); color: #FFC2C4; }
[data-theme="dark"] .btn.light, [data-theme="dark"] .btn.gold { box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .7); }
[data-theme="dark"] .btn.ink { background: var(--surface-3); border-color: var(--line-strong); }
/* Text-style button (logout etc.) */
button.link {
padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; color: var(--link);
}
button.link:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
button.link.danger { color: var(--danger-text); }
.site-header button.link:hover { text-decoration: none; }
/* Secondary full-width action (e.g. "login with a code instead") */
.btn-alt {
display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px; padding: 10px 16px;
border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text);
font-size: 14.5px; font-weight: 600; text-align: center;
transition: border-color .15s, background-color .15s, color .15s;
}
.btn-alt:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); text-decoration: none; }
[data-theme="dark"] .btn-alt:hover { color: #fff; }
/* ---------- 7. Forms ---------- */
label { display: block; margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--text); }
/* :where() keeps this at element specificity so component classes can override it */
input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"], [type="range"], [type="color"])),
select, textarea {
display: block; width: 100%; min-height: 46px; margin-top: 8px; padding: 10px 14px;
border: 1px solid var(--input-line); border-radius: var(--radius-sm);
background: var(--input-bg); color: var(--text);
font: 400 15px/1.5 var(--font-sans);
box-shadow: var(--shadow-xs);
transition: border-color .15s, box-shadow .15s, background-color .15s;
}
textarea { min-height: 120px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
select {
-webkit-appearance: none; appearance: none; cursor: pointer;
padding-inline-end: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6787' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-size: 18px; background-position: left 14px center;
}
[data-theme="dark"] select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA6C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select option { background: var(--surface); color: var(--text); }
input:hover, select:hover, textarea:hover { border-color: var(--input-line-hover); }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--brand-300); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); width: 17px; height: 17px; vertical-align: middle; cursor: pointer; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--subtle); cursor: not-allowed; }
input[type="file"] {
display: block; width: 100%; max-width: 100%; margin-top: 8px;
font-size: 13.5px; color: var(--muted); cursor: pointer;
}
input[type="file"]::file-selector-button {
margin-inline-end: 12px; padding: 7px 14px;
border: 1px solid var(--line-strong); border-radius: 8px;
background: var(--surface); color: var(--text);
font: 600 13px/1.4 var(--font-sans); cursor: pointer;
transition: border-color .15s, background-color .15s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--brand); background: var(--brand-50); }
.field-hint { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.row > label { flex: 1 1 180px; margin-bottom: 0; }
.row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.row select { flex: 1 1 170px; width: auto; margin-top: 0; }
.row select { flex: 0 1 200px; }
.row .btn { flex: none; }
.row.tight { gap: 6px; margin-bottom: 0; align-items: center; }
.row.tight input:not([type="hidden"]), .row.tight select { min-height: 36px; padding-block: 6px; font-size: 14px; }
.short { max-width: 120px; }
/* Password visibility toggle */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-inline-end: 50px; }
.pw-toggle {
position: absolute; inset-inline-end: 5px; bottom: 5px;
display: grid; place-items: center; width: 36px; height: 36px;
border: 0; border-radius: 8px; background: none;
color: var(--subtle); cursor: pointer;
transition: color .15s, background-color .15s;
}
.pw-toggle:hover { color: var(--brand); background: var(--brand-50); }
[data-theme="dark"] .pw-toggle:hover { color: var(--brand-300); }
.pw-toggle svg, .pw-toggle .ic { width: 19px; height: 19px; }
.pw-toggle[aria-pressed="true"] { color: var(--brand); }
[data-theme="dark"] .pw-toggle[aria-pressed="true"] { color: var(--brand-300); }
/* Checkbox row ("keep me signed in") */
.check-row {
display: flex !important; align-items: center; gap: 10px;
margin-bottom: 18px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface-2);
font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer;
transition: border-color .15s, background-color .15s;
}
.check-row:hover { border-color: var(--line-strong); }
.check-row:has(input:checked) { border-color: var(--brand-200); background: var(--brand-50); }
.check-row .check-input, .check-input {
flex: none; width: 18px; height: 18px; min-height: 0; margin: 0;
accent-color: var(--brand); cursor: pointer;
}
/* One-time-code input */
.code-input {
min-height: 60px; border-radius: 12px;
font: 600 26px/1 var(--font-mono) !important; letter-spacing: .4em; text-align: center !important;
direction: ltr; padding-inline-start: calc(14px + .4em);
background: var(--surface-2);
}
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--subtle); font-size: 13px; font-weight: 500; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* ---------- 8. Cards ---------- */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 28px;
margin-bottom: 20px;
min-width: 0;
}
.card.narrow { max-width: 460px; margin-inline: auto; }
.card.flat { box-shadow: none; }
.card h1 { font-size: 22px; margin-bottom: 16px; }
.card h2 { font-size: 18px; margin-bottom: 14px; }
.card h3 { font-size: 16px; margin-bottom: 8px; }
.card p + p { margin-top: 10px; }
.card > * + h2 { margin-top: 28px; }
.card > * + h3 { margin-top: 20px; }
.card > ul, .card > ol { margin-block: 10px; padding-inline-start: 22px; }
.card > table { margin-block: 8px 16px; }
.card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.card-head h2 { margin: 0; }
.card.stat { display: flex; align-items: center; gap: 16px; min-height: 104px; margin-bottom: 0; }
.card.stat strong { display: block; font: 700 28px/1.25 var(--font-sans); color: var(--heading); font-variant-numeric: tabular-nums; }
.card.stat span { color: var(--muted); font-size: 13px; }
.card.stat small { color: var(--subtle); font-size: 12px; }
[data-theme="dark"] .card { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .03); }
/* Empty state */
.empty { padding: 36px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.empty b { display: block; margin-bottom: 4px; color: var(--text); font-size: 15px; }
.empty .icon-tile { margin-bottom: 12px; }
/* ---------- 9. Alerts and banners ---------- */
.alert {
position: relative;
margin-bottom: 16px; padding: 13px 16px;
border: 1px solid var(--info-line); border-radius: var(--radius-sm);
background: var(--info-bg); color: var(--info-text);
font-size: 14.5px; font-weight: 500; line-height: 1.75;
}
.alert a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.alert b, .alert strong { font-weight: 700; }
.alert.ok, .alert.success { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-line); }
.alert.error, .alert.danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-line); }
.alert.warn, .alert.warning { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-line); }
.alert.info { background: var(--info-bg); color: var(--info-text); border-color: var(--info-line); }
[data-theme="dark"] .alert.error { color: #FFB8BA; }
/* Alert with a leading icon: */
.alert.has-icon { display: flex; align-items: flex-start; gap: 12px; }
.alert.has-icon > svg { flex: none; width: 20px; height: 20px; margin-top: 3px; }
/* Prominent banner (trial / suspension): add .banner to an .alert */
.alert.banner {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 16px 18px; border-radius: var(--radius);
border-inline-start-width: 4px;
}
.alert.banner.ok { border-inline-start-color: var(--ok); }
.alert.banner.error { border-inline-start-color: var(--danger); }
.alert.banner.warn { border-inline-start-color: var(--warn); }
.alert.banner.info { border-inline-start-color: var(--brand); }
/* ---------- 10. Tables ---------- */
.table-wrap {
overflow-x: auto; -webkit-overflow-scrolling: touch;
background: var(--surface);
border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-xs);
}
.card .table-wrap { box-shadow: none; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th {
padding: 11px 16px; text-align: start; white-space: nowrap;
font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted);
background: var(--surface-2); border-bottom: 1px solid var(--line);
}
td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .12s; }
tbody tr:hover td { background: var(--hover); }
tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--brand); }
/* Inactive rows (revoked keys, processed orders, suspended clients): a quiet surface and muted
text instead of opacity, so every cell keeps AA contrast in both themes. */
tr.revoked { background-color: var(--surface-2); }
tr.revoked td { color: var(--muted); }
tr.revoked td b, tr.revoked td strong { color: var(--muted); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
[data-theme="dark"] th { background: rgba(255, 255, 255, .025); }
[data-theme="dark"] tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--brand-300); }
/* Modern table cells */
.tid {
max-width: 170px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; vertical-align: middle; cursor: help;
}
.c-time { white-space: nowrap; color: var(--subtle); font-size: 13px; }
.c-email { color: var(--muted); direction: ltr; unicode-bidi: isolate; }
.amt {
display: inline-block; min-width: 56px; padding: 3px 10px; border-radius: 8px;
font: 600 13px/1.5 var(--font-mono); text-align: center; direction: ltr;
}
.amt.pos { color: var(--ok-text); background: var(--ok-bg); }
.amt.neg { color: var(--danger-text); background: var(--danger-bg); }
.key { word-break: break-all; }
/* ---------- 11. Badges (pill + dot) ---------- */
.badge, .tag {
display: inline-flex; align-items: center; gap: 6px;
min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill);
font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
color: #D0D8F0; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
}
.badge::before {
content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.badge.no-dot::before { display: none; }
.badge .dot { display: none; }
/* Message status: sent / verified / pending / expired / failed / locked */
.badge.sent, .badge.brand, .badge.review, .tag.review, .tag.brand { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-100); }
.badge.verified, .badge.ok, .badge.approved, .badge.active, .badge.topup, .badge.signup_bonus, .badge.refund,
.tag.ok, .tag.approved, .tag.active { color: var(--ok-text); background: var(--ok-bg); border-color: var(--ok-line); }
.badge.pending, .badge.warn, .badge.soon, .badge.adjustment,
.tag.soon, .tag.pending, .tag.warn { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-line); }
.badge.failed, .badge.danger, .badge.locked, .badge.rejected, .badge.suspended, .badge.otp_send,
.tag.err, .tag.rejected, .tag.suspended { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); }
.badge.expired, .badge.neutral, .badge.revoked, .tag.neutral { color: #B4C0DE; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
/* Key / message mode */
.tag.live { color: #fff; background: var(--brand); border-color: var(--brand); }
.badge.live { color: #fff; background: var(--brand); border-color: var(--brand); }
.tag.test { color: #B4C0DE; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.tag.wa { color: #8FE3C0; background: rgba(56, 178, 122, .16); border-color: rgba(56, 178, 122, .35); }
.tag { font-family: var(--font-sans); }
/* Dark theme */
[data-theme="dark"] .badge, [data-theme="dark"] .tag { color: #C3CBE4; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] .badge.sent, [data-theme="dark"] .badge.brand, [data-theme="dark"] .badge.review,
[data-theme="dark"] .tag.review, [data-theme="dark"] .tag.brand { color: #B4C3FF; background: rgba(51, 88, 255, .16); border-color: rgba(138, 162, 255, .28); }
[data-theme="dark"] .badge.verified, [data-theme="dark"] .badge.ok, [data-theme="dark"] .badge.approved, [data-theme="dark"] .badge.active,
[data-theme="dark"] .badge.topup, [data-theme="dark"] .badge.signup_bonus, [data-theme="dark"] .badge.refund,
[data-theme="dark"] .tag.ok, [data-theme="dark"] .tag.approved, [data-theme="dark"] .tag.active { color: var(--ok-text); background: var(--ok-bg); border-color: var(--ok-line); }
[data-theme="dark"] .badge.pending, [data-theme="dark"] .badge.warn, [data-theme="dark"] .badge.soon, [data-theme="dark"] .badge.adjustment,
[data-theme="dark"] .tag.soon, [data-theme="dark"] .tag.pending, [data-theme="dark"] .tag.warn { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-line); }
[data-theme="dark"] .badge.failed, [data-theme="dark"] .badge.danger, [data-theme="dark"] .badge.locked, [data-theme="dark"] .badge.rejected,
[data-theme="dark"] .badge.suspended, [data-theme="dark"] .badge.otp_send,
[data-theme="dark"] .tag.err, [data-theme="dark"] .tag.rejected, [data-theme="dark"] .tag.suspended { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); }
[data-theme="dark"] .badge.expired, [data-theme="dark"] .badge.neutral, [data-theme="dark"] .badge.revoked,
[data-theme="dark"] .tag.neutral, [data-theme="dark"] .tag.test { color: #AAB3CF; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] .tag.live, [data-theme="dark"] .badge.live { color: #fff; background: var(--brand); border-color: var(--brand); }
[data-theme="dark"] .tag.wa { color: #8FE3C0; background: rgba(56, 178, 122, .14); border-color: rgba(56, 178, 122, .35); }
/* ---------- 12. Code ---------- */
code, .mono {
font-family: var(--font-mono);
direction: ltr; unicode-bidi: isolate;
}
code {
padding: .12em .45em; border-radius: 6px;
font-size: .86em; color: var(--code-text);
background: var(--code-bg); border: 1px solid var(--code-line);
overflow-wrap: anywhere;
}
.mono { font-size: .92em; }
pre {
direction: ltr; text-align: left;
margin: 12px 0 18px; padding: 18px 20px; overflow-x: auto;
background: var(--ink-900); color: #D5DEFA;
border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px;
font: 13.5px/1.8 var(--font-mono);
}
pre code { display: block; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; white-space: pre; overflow-wrap: normal; }
[data-theme="dark"] pre { background: #070C24; border-color: rgba(255, 255, 255, .08); }
/* Code window: dark editor-style panel (reusable) */
.code-window {
position: relative; overflow: hidden;
direction: ltr; text-align: left;
background: linear-gradient(180deg, #111946 0%, #0A1030 100%);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 18px;
box-shadow: 0 0 0 1px rgba(3, 8, 30, .35), 0 34px 80px -28px rgba(3, 8, 30, .8), 0 0 120px -50px rgba(51, 88, 255, .7);
color: #C9D4F5;
}
.code-window::before {
content: ""; position: absolute; inset: 0 0 auto; height: 1px;
background: linear-gradient(90deg, transparent, rgba(124, 149, 255, .7), rgba(34, 199, 232, .5), transparent);
}
.code-window-bar {
display: flex; align-items: center; gap: 14px;
min-height: 46px; padding: 0 14px;
background: rgba(255, 255, 255, .025);
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.dots { display: inline-flex; gap: 7px; flex: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #2A3466; }
.dots i:nth-child(1) { background: #EE6A5F; }
.dots i:nth-child(2) { background: #F2B544; }
.dots i:nth-child(3) { background: #3DBE6C; }
.code-window-meta { margin-left: auto; font: 12px var(--font-mono); color: rgba(201, 212, 245, .62); }
.code-window-body {
padding: 18px 0 20px; overflow-x: auto;
font: 13.5px/1.9 var(--font-mono);
counter-reset: ln;
}
.code-line { display: block; padding-right: 20px; white-space: pre; }
.code-line::before {
counter-increment: ln; content: counter(ln);
display: inline-block; width: 46px; padding-right: 18px;
text-align: right; color: rgba(201, 212, 245, .22);
-webkit-user-select: none; user-select: none;
}
.code-sep { height: 1px; margin: 14px 20px; background: rgba(255, 255, 255, .07); }
.code-status { display: flex; align-items: center; gap: 10px; margin: 0 20px 10px 46px; font: 12px var(--font-mono); }
.status-pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 3px 10px; border-radius: var(--radius-pill);
font: 600 12px/1.5 var(--font-mono); color: #4BE3A4;
background: rgba(18, 185, 129, .12); border: 1px solid rgba(18, 185, 129, .3);
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.t-method { color: var(--cyan-300); font-weight: 600; }
.t-path { color: #fff; }
.t-head { color: #8FA0CF; }
.t-key { color: #9DB4FF; }
.t-str { color: #7EE2C5; }
.t-num, .t-bool { color: #FFC46B; }
.t-punc { color: rgba(201, 212, 245, .66); }
.t-dim, .t-comment { color: rgba(201, 212, 245, .66); }
.caret {
display: inline-block; width: 8px; height: 16px; margin-left: 4px;
vertical-align: -3px; border-radius: 1px; background: var(--cyan);
}
[data-theme="dark"] .code-window { background: linear-gradient(180deg, #0F1640 0%, #080D28 100%); border-color: rgba(138, 162, 255, .16); }
/* Tabbed code blocks (home + docs): .code-tabs > button.code-tab[.on][data-pane] + .code-pane[.on] > pre.code-box */
.code-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.code-tab {
padding: 6px 12px; border: 1px solid transparent; border-radius: 8px;
background: none; color: rgba(201, 212, 245, .66);
font: 500 12.5px/1.4 var(--font-mono); cursor: pointer;
transition: color .15s, background-color .15s, border-color .15s;
}
.code-tab:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.code-tab.on, .code-tab.is-active, .code-tab[aria-selected="true"] {
color: #fff; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .08);
}
.code-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.code-pane { display: none; position: relative; }
.code-pane.on { display: block; }
pre.code-box {
margin: 0; padding: 20px 22px; overflow-x: auto;
background: var(--ink-900); color: #D5DEFA;
border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px;
font: 13.5px/1.9 var(--font-mono); direction: ltr; text-align: left;
tab-size: 4;
}
pre.code-box code { display: block; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; white-space: pre; }
pre.code-box .tc, .code-window .tc { color: rgba(201, 212, 245, .66); font-style: normal; }
pre.code-box .tk, .code-window .tk { color: #9DB4FF; }
pre.code-box .ts, .code-window .ts { color: #7EE2C5; }
.code-window pre.code-box { border: 0; border-radius: 0; background: transparent; }
[data-theme="dark"] pre.code-box { background: #070C24; border-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .code-window pre.code-box { background: transparent; }
.copy-btn {
position: absolute; top: 10px; left: 10px; z-index: 3;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
background: rgba(10, 16, 48, .82); color: #C9D4F5;
font: 600 12px/1.4 var(--font-sans); cursor: pointer;
transition: color .15s, border-color .15s, background-color .15s;
}
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.copy-btn.done { color: #4BE3A4; border-color: rgba(18, 185, 129, .45); }
/* ---------- 13. Icons and icon tiles ---------- */
.ic { width: 18px; height: 18px; flex: none; }
.ic-lg { width: 24px; height: 24px; }
.ic-sm { width: 15px; height: 15px; }
.ic-inline { width: 15px; height: 15px; vertical-align: -2px; color: var(--brand); }
[data-theme="dark"] .ic-inline { color: var(--brand-300); }
.icon-tile {
display: inline-grid; place-items: center; flex-shrink: 0;
width: 48px; height: 48px; border-radius: 13px;
color: var(--brand);
background: linear-gradient(135deg, rgba(51, 88, 255, .10), rgba(34, 199, 232, .12));
box-shadow: inset 0 0 0 1px rgba(51, 88, 255, .14);
}
.icon-tile svg { width: 24px; height: 24px; }
.icon-tile.sm { width: 38px; height: 38px; border-radius: 10px; }
.icon-tile.sm svg { width: 20px; height: 20px; }
.icon-tile.lg { width: 56px; height: 56px; border-radius: 16px; }
.icon-tile.lg svg { width: 28px; height: 28px; }
.icon-tile.solid { color: #fff; background: var(--grad); box-shadow: 0 10px 22px -10px rgba(51, 88, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .2); }
.icon-tile.on-dark { color: var(--brand-300); background: rgba(51, 88, 255, .14); box-shadow: inset 0 0 0 1px rgba(143, 168, 255, .2); }
.icon-tile.ok { color: var(--ok-text); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.icon-tile.warn { color: var(--warn-text); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.icon-tile.danger { color: var(--danger-text); background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-line); }
.icon-tile.muted { color: var(--subtle); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .icon-tile:not(.solid):not(.ok):not(.warn):not(.danger):not(.muted) { color: var(--brand-300); background: linear-gradient(135deg, rgba(51, 88, 255, .18), rgba(34, 199, 232, .10)); box-shadow: inset 0 0 0 1px rgba(138, 162, 255, .2); }
/* ---------- 14. KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi-grid.kpi-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid.kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 14px; min-width: 0;
padding: 18px 20px;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-xs);
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.kpi::after {
content: ""; position: absolute; inset: 0 0 auto; height: 2px;
background: var(--grad); opacity: 0; transition: opacity .2s;
}
.kpi:hover { border-color: var(--brand-200); transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi:hover::after { opacity: 1; }
.kpi-ic {
display: grid; place-items: center; flex: none;
width: 46px; height: 46px; border-radius: 13px;
color: var(--brand);
background: linear-gradient(135deg, rgba(51, 88, 255, .10), rgba(34, 199, 232, .12));
box-shadow: inset 0 0 0 1px rgba(51, 88, 255, .14);
}
.kpi-ic svg { width: 22px; height: 22px; }
.kpi-ic img { display: block; width: 46px; height: 46px; border-radius: 13px; object-fit: contain; }
.kpi-ic.gold, .kpi-ic.warn { color: var(--warn-text); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.kpi-ic.ok { color: var(--ok-text); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.kpi-thumb { flex: none; display: block; width: 52px; height: 52px; border-radius: 14px; object-fit: contain; }
.kpi > div { min-width: 0; }
.kpi b {
display: block; font: 700 26px/1.25 var(--font-sans); color: var(--heading);
letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.kpi span { display: block; color: var(--muted); font-size: 13px; line-height: 1.6; }
.kpi small { display: block; color: var(--subtle); font-size: 12px; }
.kpi-rate {
display: inline-block !important; margin-inline-start: 8px; padding: 1px 8px;
border-radius: var(--radius-pill); background: var(--ok-bg); color: var(--ok-text) !important;
font: 600 12px/1.7 var(--font-mono) !important; vertical-align: 4px;
}
.kpi-warn { border-color: var(--danger-line); }
.kpi-warn .kpi-ic { color: var(--danger-text); background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-line); }
[data-theme="dark"] .kpi { background: linear-gradient(180deg, #0D1438 0%, #0A1030 100%); }
[data-theme="dark"] .kpi-ic:not(.gold):not(.warn):not(.ok) { color: var(--brand-300); background: linear-gradient(135deg, rgba(51, 88, 255, .2), rgba(34, 199, 232, .1)); box-shadow: inset 0 0 0 1px rgba(138, 162, 255, .2); }
[data-theme="dark"] .kpi:hover { border-color: rgba(138, 162, 255, .3); }
[data-count] { font-variant-numeric: tabular-nums; }
/* ---------- 15. 14-day chart (render_daily_chart) ---------- */
.chart-card {
margin-top: 18px; padding: 18px 20px 12px;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface-2);
}
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.chart-legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 4px; }
.chart-legend .dot.sent { background: var(--brand-200); box-shadow: inset 0 0 0 1px rgba(51, 88, 255, .25); }
.chart-legend .dot.verified { background: var(--grad); }
.chart-note { margin-inline-start: auto; color: var(--subtle) !important; font-size: 12.5px !important; font-weight: 500 !important; }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 176px; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.chart .num { height: 20px; font: 600 11px/20px var(--font-mono); color: var(--subtle); }
.chart .bars {
position: relative; flex: 1; width: 100%;
display: flex; align-items: flex-end; justify-content: center;
background-image: linear-gradient(var(--line) 1px, transparent 1px);
background-size: 100% 25%; background-position: 0 0;
}
.chart .bar {
position: relative; overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-end;
width: min(68%, 26px); min-height: 3px; border-radius: 7px 7px 3px 3px;
background: var(--brand-200);
box-shadow: inset 0 0 0 1px rgba(51, 88, 255, .18);
transition: filter .15s, transform .15s;
}
.chart .bar.green, .chart .bar.brand { background: var(--brand-200); }
.chart .bar.cyan { background: rgba(34, 199, 232, .3); }
.chart .col:hover .bar { filter: brightness(1.06) saturate(1.2); }
.chart .fill { width: 100%; }
.chart .verified-part { background: var(--grad); background: linear-gradient(0deg, #3358FF 0%, #2C8FF0 60%, #22C7E8 100%); }
.chart .day { height: 20px; padding-top: 6px; font-size: 11px; font-weight: 600; color: var(--subtle); }
[data-theme="dark"] .chart-card { background: rgba(255, 255, 255, .02); }
[data-theme="dark"] .chart .bar, [data-theme="dark"] .chart .bar.green, [data-theme="dark"] .chart .bar.brand { background: rgba(138, 162, 255, .22); box-shadow: inset 0 0 0 1px rgba(138, 162, 255, .2); }
[data-theme="dark"] .chart-legend .dot.sent { background: rgba(138, 162, 255, .3); box-shadow: inset 0 0 0 1px rgba(138, 162, 255, .3); }
/* ---------- 16. Utilities ---------- */
.muted { color: var(--muted); font-size: 14px; }
.subtle { color: var(--subtle); }
.center { text-align: center; }
.small { font-size: 13px; }
.inline { display: inline; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; }
.gold { color: var(--warn-text); }
.text-ok { color: var(--ok-text); }
.text-danger { color: var(--danger-text); }
.text-grad {
background: var(--grad-text);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
p.muted.center + p.muted.center { margin-top: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stack > * + * { margin-top: 12px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; color: var(--subtle); font-size: 13.5px; }
.breadcrumb a { font-weight: 600; }
/* ---------- 17. Sections (reusable on every page) ---------- */
.section { position: relative; padding-block: var(--section-y); }
.section.tight { padding-block: 72px; }
.section.alt { background: rgba(25, 36, 82, .65); border-block: 1px solid var(--line); }
.section.dark {
color: var(--on-dark-muted);
background:
radial-gradient(700px 420px at 0% 0%, rgba(51, 88, 255, .18), transparent 65%),
radial-gradient(600px 420px at 100% 100%, rgba(34, 199, 232, .10), transparent 65%),
var(--ink-900);
border-block: 1px solid var(--line);
}
.section.dark :focus-visible, .hero :focus-visible, .cta-panel :focus-visible, .cta-band :focus-visible, .page-hero :focus-visible, .site-header.is-dark :focus-visible { outline-color: var(--cyan); }
[data-theme="dark"] .section.alt { background: rgba(10, 16, 48, .55); }
[data-theme="dark"] .section.dark {
background:
radial-gradient(700px 420px at 0% 0%, rgba(51, 88, 255, .16), transparent 65%),
radial-gradient(600px 420px at 100% 100%, rgba(34, 199, 232, .08), transparent 65%),
#0A1030;
border-block: 1px solid var(--line);
}
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow, .kicker {
display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
font-size: 14px; font-weight: 600; color: var(--brand-300);
}
.eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); }
.kicker i { display: inline-block; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); font-style: normal; }
[data-theme="dark"] .eyebrow, [data-theme="dark"] .kicker { color: var(--brand-300); }
.section-title { font-size: clamp(27px, 3.2vw, 38px); line-height: 1.3; font-weight: 700; color: var(--heading); text-wrap: balance; }
.section-sub { margin-top: 14px; font-size: 17.5px; line-height: 1.85; color: var(--muted); text-wrap: pretty; }
.section.dark .section-title, .section.dark h2, .section.dark h3 { color: #fff; }
.section.dark .section-sub { color: var(--on-dark-muted); }
.section.dark .eyebrow { color: var(--brand-300); }
.section-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
/* Main's section head: */
.sec-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.sec-head h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.3; margin-bottom: 12px; text-wrap: balance; }
.sec-head p { font-size: 17px; line-height: 1.85; color: var(--muted); }
.sec-side .kicker { margin-bottom: 12px; }
.sec-side h2 { font-size: clamp(25px, 2.8vw, 34px); line-height: 1.3; margin-bottom: 12px; }
.sec-side p { color: var(--muted); font-size: 16px; line-height: 1.85; }
.sec-side p + p { margin-top: 12px; }
.features { margin-bottom: 72px; }
/* Feature cards (main: .feat-grid/.feat-card; ours: .feature-grid/.feature-card) */
.feature-grid, .feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-card, .feat-card {
position: relative; overflow: hidden;
padding: 28px 26px;
background: linear-gradient(180deg, #1F2C61 0%, #192452 100%);
border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card::before, .feat-card::before {
content: ""; position: absolute; inset: 0 0 auto; height: 2px;
background: var(--grad); opacity: 0; transition: opacity .25s ease;
}
.feature-card:hover, .feat-card:hover { transform: translateY(-3px); border-color: rgba(138, 162, 255, .28); box-shadow: var(--shadow-lg); }
.feature-card:hover::before, .feat-card:hover::before { opacity: 1; }
.feature-card h3, .feat-card h3 { margin: 20px 0 8px; font-size: 18px; }
.feature-card p, .feat-card p { font-size: 15px; line-height: 1.85; color: var(--muted); }
.feat-card > :first-child { margin-top: 0; }
.feat-icon {
display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px;
color: var(--brand-300); background: linear-gradient(135deg, rgba(51, 88, 255, .20), rgba(34, 199, 232, .12));
box-shadow: inset 0 0 0 1px rgba(138, 162, 255, .22);
}
.feat-icon svg { width: 24px; height: 24px; }
.feat-ico-img {
display: block; width: 52px; height: 52px; border-radius: 14px; object-fit: contain;
background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.feat-media {
display: flex; align-items: center; justify-content: center;
margin: -6px -4px 0; padding: 10px; border-radius: 16px;
background:
radial-gradient(ellipse at 50% 40%, rgba(51, 88, 255, .18), transparent 70%),
#151F47;
box-shadow: inset 0 0 0 1px rgba(138, 162, 255, .16);
}
.feat-media img { display: block; width: auto; max-width: 100%; height: 150px; object-fit: contain; }
.feat-media .art-light { mix-blend-mode: multiply; }
.feat-media .trim-b { clip-path: inset(0 0 15% 0); transform: translateY(11px); } /* source art has a stray shape along its bottom edge */
.art-frame {
margin: 0; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--radius-lg);
background: var(--surface); box-shadow: var(--shadow);
}
.art-frame img { display: block; width: 100%; height: auto; object-fit: contain; }
[data-theme="dark"] .feature-card, [data-theme="dark"] .feat-card { background: linear-gradient(180deg, #0D1438 0%, #0A1030 100%); }
[data-theme="dark"] .feature-card:hover, [data-theme="dark"] .feat-card:hover { border-color: rgba(138, 162, 255, .26); }
[data-theme="dark"] .feat-icon { color: var(--brand-300); background: linear-gradient(135deg, rgba(51, 88, 255, .2), rgba(34, 199, 232, .1)); box-shadow: inset 0 0 0 1px rgba(138, 162, 255, .2); }
/* Inner-page hero (generic; pages.css may refine) */
.page-hero {
position: relative; isolation: isolate; overflow: hidden;
margin-bottom: 44px; padding: 52px 52px;
border-radius: var(--radius-xl);
color: var(--on-dark-muted);
background:
radial-gradient(620px 360px at 0% 0%, rgba(51, 88, 255, .38), transparent 65%),
radial-gradient(520px 320px at 100% 100%, rgba(34, 199, 232, .16), transparent 65%),
linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
box-shadow: var(--shadow-xl);
}
.page-hero::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse 60% 80% at 20% 30%, #000 20%, transparent 75%);
mask-image: radial-gradient(ellipse 60% 80% at 20% 30%, #000 20%, transparent 75%);
}
.page-hero h1 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.3; margin-bottom: 12px; text-wrap: balance; }
.page-hero h1 span {
background: var(--grad-text);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.page-hero p { max-width: 640px; font-size: 17px; line-height: 1.9; color: var(--on-dark-muted); }
.page-hero .kicker, .page-hero .eyebrow { color: var(--brand-300); }
[data-theme="dark"] .page-hero { border: 1px solid var(--line); }
/* CTA band (main's class) and CTA panel (ours) */
.cta-band, .cta-panel {
position: relative; isolation: isolate; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 32px;
padding: 56px 56px; border-radius: var(--radius-xl);
color: var(--on-dark-muted);
background:
radial-gradient(520px 320px at 0% 100%, rgba(34, 199, 232, .28), transparent 65%),
radial-gradient(620px 360px at 100% 0%, rgba(51, 88, 255, .45), transparent 65%),
var(--ink-900);
box-shadow: var(--shadow-xl);
}
.cta-band::before, .cta-panel::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background-image:
linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.cta-band h2, .cta-copy h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.35; color: #fff; margin-bottom: 8px; }
.cta-band p, .cta-copy p { font-size: 17px; line-height: 1.85; color: var(--on-dark-muted); }
.cta-band .btn:not(.ghost) { background: #fff; color: var(--ink-900); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .5); }
.cta-band .btn:not(.ghost):hover { background: var(--brand-50); color: var(--ink-900); }
[data-theme="dark"] .cta-band .btn:not(.ghost):hover { background: #E7ECFF; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
[data-theme="dark"] .cta-band, [data-theme="dark"] .cta-panel { border: 1px solid rgba(138, 162, 255, .16); }
/* ---------- 18. Home ---------- */
/* Hero */
.hero {
position: relative; isolation: isolate; overflow: hidden;
padding: 96px 0 128px;
color: var(--on-dark-muted);
background:
radial-gradient(760px 520px at 18% 30%, rgba(51, 88, 255, .30), transparent 62%),
radial-gradient(640px 420px at 88% -10%, rgba(34, 199, 232, .14), transparent 60%),
linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
}
.is-bleed .site-main > .hero:first-child {
margin-top: calc(-1 * var(--header-h) - 1px);
padding-top: calc(var(--header-h) + 88px);
}
.hero-art {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-size: cover; background-position: center top; background-repeat: no-repeat;
opacity: .8;
-webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .55) 35%, #000 70%);
mask-image: linear-gradient(270deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .55) 35%, #000 70%);
}
.hero:not(.has-art)::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000 25%, transparent 75%);
mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000 25%, transparent 75%);
}
.hero::after {
content: ""; position: absolute; inset: auto 0 0; height: 1px; z-index: -1;
background: linear-gradient(90deg, transparent, rgba(124, 149, 255, .35), transparent);
}
.hero-grid {
display: grid; align-items: center; gap: 64px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.hero-copy { max-width: 590px; }
.hero-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px; border-radius: var(--radius-pill);
font-size: 13.5px; font-weight: 500; color: rgba(222, 229, 255, .88);
background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 185, 129, .2); }
.hero-title {
margin: 24px 0 20px;
font-size: clamp(34px, 4.3vw, 54px); line-height: 1.24; font-weight: 700;
color: #fff; text-wrap: balance;
}
.hero-lead { max-width: 560px; font-size: 18.5px; line-height: 1.9; color: var(--on-dark-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-facts {
list-style: none; padding: 26px 0 0; margin-top: 40px;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px;
border-top: 1px solid var(--on-dark-line);
}
.hero-facts li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(222, 229, 255, .88); }
.fact-ico {
display: inline-grid; place-items: center; flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
color: var(--cyan-300); background: rgba(34, 199, 232, .14); box-shadow: inset 0 0 0 1px rgba(34, 199, 232, .25);
}
.fact-ico svg { width: 13px; height: 13px; stroke-width: 2.4; }
/* Hero visual: request window + delivered email */
.hero-visual { position: relative; padding-bottom: 188px; }
.hero-visual .code-window { margin-right: 72px; } /* physical: the window itself is LTR */
.code-response { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .07); }
.mail-card {
position: absolute; bottom: 0; inset-inline-start: 0; z-index: 2;
width: 330px; padding: 18px 20px 20px;
direction: rtl; text-align: right;
color: #ECEFF9; background: #1F2C61;
border-radius: 18px;
box-shadow: 0 0 0 1px rgba(138, 162, 255, .22), 0 36px 70px -24px rgba(3, 8, 30, .75);
}
.mail-head { display: flex; align-items: center; gap: 12px; }
.mail-avatar {
display: grid; place-items: center; flex-shrink: 0;
width: 40px; height: 40px; border-radius: 50%;
font-size: 17px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, #FF6F91 0%, #FF9B6A 100%);
}
.mail-from { flex: 1; min-width: 0; line-height: 1.45; }
.mail-from b { display: block; font-size: 15px; }
.mail-from span { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #AAB6D8; }
.mail-from span svg { width: 13px; height: 13px; color: var(--ok); stroke-width: 2.2; }
.mail-time { align-self: flex-start; font-size: 12px; color: #929FC4; }
.mail-subject { margin-top: 14px; font-size: 14.5px; font-weight: 600; }
.mail-text { margin-top: 2px; font-size: 13.5px; color: #AAB6D8; }
.otp-digits { display: flex; justify-content: center; gap: 8px; margin: 14px 0 12px; direction: ltr; }
.otp-digits span {
display: grid; place-items: center;
width: 40px; height: 48px; border-radius: 10px;
font: 600 22px/1 var(--font-mono); color: #fff;
background: #131C42; border: 1px solid rgba(138, 162, 255, .26);
}
.mail-expiry { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #AAB6D8; }
.mail-expiry svg { width: 15px; height: 15px; }
.verified-chip {
position: absolute; top: -20px; inset-inline-start: 20px;
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px 6px 6px; border-radius: var(--radius-pill);
font-size: 13.5px; font-weight: 600; color: #5BE0B0;
background: #192452;
box-shadow: 0 0 0 1px rgba(18, 185, 129, .4), 0 14px 30px -12px rgba(3, 8, 30, .65);
}
.chip-ico {
display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
color: #fff; background: var(--ok);
}
.chip-ico svg { width: 14px; height: 14px; stroke-width: 2.4; }
[data-theme="dark"] .mail-card { color: #E8ECF8; background: #121A44; box-shadow: 0 0 0 1px rgba(138, 162, 255, .18), 0 36px 70px -24px rgba(0, 0, 0, .85); }
[data-theme="dark"] .mail-from span, [data-theme="dark"] .mail-text, [data-theme="dark"] .mail-expiry { color: #9AA6C8; }
[data-theme="dark"] .mail-time { color: #8792B5; }
[data-theme="dark"] .otp-digits span { color: #fff; background: #0A1030; border-color: rgba(138, 162, 255, .22); }
[data-theme="dark"] .verified-chip { color: #5BE0B0; background: #0D1438; box-shadow: 0 0 0 1px rgba(18, 185, 129, .4), 0 14px 30px -12px rgba(0, 0, 0, .7); }
/* Trust strip (1px grid gaps draw the dividers at every column count) */
.trust { --trust-bg: #16204A; background: var(--trust-bg); border-bottom: 1px solid var(--line); }
.trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.trust-item {
display: flex; align-items: center; gap: 12px;
padding: 20px 22px;
background: var(--trust-bg);
font-size: 14.5px; font-weight: 500; line-height: 1.6; color: var(--text);
}
[data-theme="dark"] .trust { --trust-bg: #080D27; }
/* Feature cards with artwork */
.feature-card .feat-media { margin: -8px -6px 18px; height: 172px; }
.feature-card .feat-media img { height: 150px; }
.feature-card .feat-media + h3 { margin-top: 0; }
.feat-media .art-dark { display: none; }
.feat-media.has-dark .art-light { display: none; }
.feat-media.has-dark .art-dark { display: block; }
.feat-media.has-dark { padding: 0; overflow: hidden; }
.feature-card .feat-media.has-dark { height: auto; aspect-ratio: 3 / 2; }
.feat-media.has-dark img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="dark"] .feat-media { background: radial-gradient(ellipse at 50% 40%, rgba(51, 88, 255, .16), transparent 70%), #0B1236; box-shadow: inset 0 0 0 1px rgba(138, 162, 255, .12); }
/* Channels */
.channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.channel-card {
padding: 28px;
background: rgba(255, 255, 255, .03);
border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.channel-card.is-live {
background: linear-gradient(180deg, rgba(51, 88, 255, .18) 0%, rgba(25, 36, 82, .9) 70%);
border-color: rgba(138, 162, 255, .38);
box-shadow: 0 0 0 4px rgba(51, 88, 255, .10), var(--shadow);
}
.channel-card.is-soon .icon-tile { color: #AAB6D8; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); }
.channel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.channel-card h3 { margin: 22px 0 8px; font-size: 18px; }
.channel-card p { font-size: 15px; line-height: 1.85; color: var(--muted); }
.channel-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--subtle); }
.channel-meta span { display: inline-flex; align-items: center; gap: 6px; }
.channel-meta svg { width: 15px; height: 15px; color: var(--brand-300); }
[data-theme="dark"] .channel-card { background: rgba(255, 255, 255, .02); }
[data-theme="dark"] .channel-card.is-live { background: linear-gradient(180deg, rgba(51, 88, 255, .14) 0%, rgba(10, 16, 48, .9) 70%); border-color: rgba(138, 162, 255, .34); box-shadow: 0 0 0 4px rgba(51, 88, 255, .1), var(--shadow); }
[data-theme="dark"] .channel-card.is-soon .icon-tile { color: #9AA6C8; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .channel-meta svg { color: var(--brand-300); }
/* Steps */
.steps {
list-style: none; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.step { position: relative; }
.step:not(:last-child)::after {
content: ""; position: absolute; top: 27px; height: 2px;
inset-inline-start: 76px; inset-inline-end: -16px;
background: repeating-linear-gradient(90deg, rgba(138, 162, 255, .34) 0 6px, transparent 6px 12px);
}
[data-theme="dark"] .step:not(:last-child)::after { background: repeating-linear-gradient(90deg, rgba(138, 162, 255, .3) 0 6px, transparent 6px 12px); }
.step-num {
position: relative; z-index: 1;
display: grid; place-items: center;
width: 56px; height: 56px; border-radius: 16px;
font: 600 20px/1 var(--font-mono); color: #fff;
background: var(--grad);
box-shadow: 0 14px 30px -10px rgba(51, 88, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(138, 162, 255, .35);
}
.step h3 { margin: 24px 0 8px; font-size: 19px; }
.step p { max-width: 340px; font-size: 15.5px; line-height: 1.9; color: var(--muted); }
.step p code { white-space: nowrap; }
/* Developers */
.dev-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.dev-copy .section-head { margin-bottom: 28px; }
.check-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.75; }
.check-list .ck {
display: inline-grid; place-items: center; flex-shrink: 0;
width: 22px; height: 22px; margin-top: 3px; border-radius: 50%;
color: var(--brand-300); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100);
}
.check-list .ck svg { width: 13px; height: 13px; stroke-width: 2.4; }
[data-theme="dark"] .check-list .ck { color: var(--brand-300); }
.lang-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.lang-chip {
direction: ltr; padding: 6px 12px; border-radius: 8px;
font: 500 13px/1.4 var(--font-mono); color: var(--text);
background: var(--bg); border: 1px solid var(--line);
}
.dev-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.dev-code .code-window-body, .dev-code pre.code-box { font-size: 13px; }
.dev-code .code-window-bar { gap: 12px; }
.dev-code .code-pane pre.code-box { padding: 18px 22px 22px; min-height: 330px; }
.dev-code .code-tabs { flex-wrap: nowrap; }
.cw-copy {
display: inline-flex; align-items: center; gap: 6px; flex: none;
margin-left: auto; padding: 5px 11px;
border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
background: rgba(255, 255, 255, .04); color: #C9D4F5;
font: 600 12.5px/1.4 var(--font-sans); cursor: pointer;
transition: color .15s, border-color .15s, background-color .15s;
}
.cw-copy svg { width: 14px; height: 14px; }
.cw-copy:hover { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); }
.cw-copy.done { color: #4BE3A4; border-color: rgba(18, 185, 129, .45); }
.cw-copy:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Security (dark section) */
.security-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.security-grid .section-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
.sec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sec-item {
padding: 24px;
background: rgba(255, 255, 255, .03);
border: 1px solid var(--on-dark-line); border-radius: 16px;
transition: background-color .2s, border-color .2s;
}
.sec-item:hover { background: rgba(255, 255, 255, .05); border-color: rgba(143, 168, 255, .22); }
.sec-item h3 { margin: 16px 0 6px; font-size: 16.5px; color: #fff; }
.sec-item p { font-size: 14.5px; line-height: 1.85; color: var(--on-dark-muted); }
.sec-item code { color: #C9D4FF; background: rgba(138, 162, 255, .1); border-color: rgba(138, 162, 255, .18); }
/* Pricing teaser */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan {
position: relative; display: flex; flex-direction: column;
padding: 30px 28px 28px;
background: linear-gradient(180deg, #1F2C61 0%, #192452 100%);
border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan.is-featured {
border-color: rgba(138, 162, 255, .45);
background: linear-gradient(180deg, rgba(51, 88, 255, .20) 0%, #192452 55%);
box-shadow: 0 0 0 4px rgba(51, 88, 255, .10), var(--shadow);
}
.plan-flag {
position: absolute; top: -13px; inset-inline-start: 24px;
padding: 4px 12px; border-radius: var(--radius-pill);
font-size: 12.5px; font-weight: 600; color: #fff; background: var(--grad);
box-shadow: 0 8px 18px -8px rgba(51, 88, 255, .8);
}
.plan-name { font-size: 15px; font-weight: 600; color: var(--muted); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 4px; }
.plan-price b { font-size: 40px; line-height: 1.1; font-weight: 700; color: var(--heading); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.plan-price .cur { font-size: 17px; font-weight: 600; color: var(--heading); }
.plan-price .per { font-size: 14.5px; color: var(--muted); }
.plan-desc { font-size: 14.5px; line-height: 1.8; color: var(--muted); padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--line-strong); }
.plan-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; flex: 1; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.7; }
.plan-list li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--brand-300); stroke-width: 2.2; }
.pricing-note { margin-top: 26px; text-align: center; font-size: 14.5px; color: var(--muted); }
[data-theme="dark"] .plan { background: linear-gradient(180deg, #0D1438 0%, #0A1030 100%); }
[data-theme="dark"] .plan.is-featured { background: linear-gradient(180deg, rgba(51, 88, 255, .18) 0%, #0A1030 55%); border-color: rgba(138, 162, 255, .4); box-shadow: 0 0 0 4px rgba(51, 88, 255, .1), var(--shadow); }
[data-theme="dark"] .plan-list li svg { color: var(--brand-300); }
/* Home FAQ (accordion) */
.qa {
max-width: 840px; margin-inline: auto; padding: 4px 32px;
background: var(--surface);
border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.qa-item + .qa-item { border-top: 1px solid var(--line); }
.qa-item summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 22px 0; cursor: pointer; list-style: none;
font-size: 17px; font-weight: 600; color: var(--heading);
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary:hover { color: var(--brand-600); }
[data-theme="dark"] .qa-item summary:hover { color: var(--brand-300); }
.qa-toggle {
position: relative; flex-shrink: 0;
width: 28px; height: 28px; border-radius: 8px;
background: var(--bg); border: 1px solid var(--line);
}
.qa-toggle::before, .qa-toggle::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px;
background: var(--muted); transition: transform .2s ease;
}
.qa-toggle::after { transform: rotate(90deg); }
.qa-item[open] .qa-toggle { background: var(--brand-50); border-color: var(--brand-100); }
[data-theme="dark"] .qa-item:not([open]) .qa-toggle { background: var(--surface-3); }
.qa-item[open] .qa-toggle::before, .qa-item[open] .qa-toggle::after { background: var(--brand); }
[data-theme="dark"] .qa-item[open] .qa-toggle::before, [data-theme="dark"] .qa-item[open] .qa-toggle::after { background: var(--brand-300); }
.qa-item[open] .qa-toggle::after { transform: rotate(0deg); }
.qa-item p { max-width: 720px; padding: 0 0 24px; font-size: 15.5px; line-height: 1.95; color: var(--muted); }
/* Final CTA */
.cta-section { padding-top: 0; }
/* ---------- 19. Motion ---------- */
@keyframes udy-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes udy-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes udy-pop { from { opacity: 0; transform: translateY(6px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes udy-blink { 50% { opacity: 0; } }
@keyframes udy-pulse {
0% { box-shadow: 0 0 0 0 rgba(18, 185, 129, .55); }
70% { box-shadow: 0 0 0 9px rgba(18, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(18, 185, 129, 0); }
}
@keyframes udy-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Scroll reveal: hidden only when JS runs and motion is allowed (layout adds .in) */
@media (prefers-reduced-motion: no-preference) {
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.2, .7, .2, 1), transform .65s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.hero-copy { animation: udy-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-visual .code-window { animation: udy-rise .8s .15s cubic-bezier(.2, .7, .2, 1) both; }
.code-response { animation: udy-fade .6s .95s ease both; }
.mail-card { animation: udy-rise .8s 1.35s cubic-bezier(.2, .7, .2, 1) both; }
.verified-chip { animation: udy-pop .45s 2.1s cubic-bezier(.3, 1.4, .5, 1) both; }
.caret { animation: udy-blink 1.1s steps(1) infinite; }
.hero-badge-dot { animation: udy-pulse 2.4s ease-out infinite; }
.menu-open .nav-panel { animation: udy-drop .2s ease both; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* ---------- 20. Scrollbar ---------- */
html { scrollbar-color: #32407A #131C42; }
[data-theme="dark"] { scrollbar-color: #2A3466 #060A1C; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #32407A; border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #415296; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #26305E; border-color: #060A1C; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #34407A; }
/* ---------- 21. Responsive ---------- */
@media (max-width: 1180px) {
.hero-grid { gap: 44px; }
.hero-visual .code-window { margin-right: 48px; }
.trust-item { padding-inline: 16px; font-size: 14px; }
.mail-card { width: 300px; padding: 16px 16px 18px; }
.otp-digits span { width: 36px; height: 44px; font-size: 20px; }
.main-nav a, .site-header .nav-link, .site-header button.link { padding: 8px 9px; font-size: 14.5px; }
.header-inner { gap: 20px; }
.footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1060px) {
:root { --section-y: 84px; }
.hero { padding: 64px 0 88px; }
.is-bleed .site-main > .hero:first-child { padding-top: calc(var(--header-h) + 56px); }
.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
.hero-copy { max-width: 680px; }
.hero-visual { max-width: 600px; width: 100%; margin-inline: auto; }
.trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust-item { padding: 18px 16px; }
.feature-grid, .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* three plans stay side by side (2 + 1 would orphan a card) until they stack at 860px */
.plan-grid { gap: 16px; }
.plan { padding: 26px 20px 22px; }
.plan-price b { font-size: 34px; }
.dev-grid, .security-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.security-grid .section-head { position: static; }
.cta-panel, .cta-band { grid-template-columns: minmax(0, 1fr); padding: 48px 40px; }
.kpi-grid, .kpi-grid.kpi-6, .kpi-grid.kpi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-hero { padding: 44px 36px; }
}
/* Header collapses into the menu button */
@media (max-width: 1000px) {
.nav-toggle { display: inline-grid; }
.header-tools { margin-inline-start: auto; }
.nav-panel {
position: absolute; top: 100%; inset-inline: 0;
display: none; flex-direction: column; align-items: stretch; gap: 8px;
max-height: calc(100vh - var(--header-h)); overflow-y: auto;
padding: 12px var(--gutter) 20px;
background: var(--surface);
border-bottom: 1px solid var(--line);
box-shadow: 0 24px 40px -24px rgba(10, 16, 48, .35);
}
.menu-open .nav-panel { display: flex; }
.main-nav { flex-direction: column; align-items: stretch; gap: 2px; }
.main-nav a { padding: 12px; font-size: 16px; }
.main-nav a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--brand); border-radius: 8px; background: var(--hover); }
.header-actions { flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.header-actions .btn { flex: 1 1 100%; min-height: 46px; font-size: 15px; order: 9; }
.header-actions .nav-link, .header-actions form { flex: 1 1 auto; }
.header-actions .nav-link, .header-actions button.link { display: block; width: 100%; padding: 12px; font-size: 16px; text-align: start; }
.site-header.is-dark .nav-panel, [data-theme="dark"] .nav-panel { background: var(--ink-900); border-bottom-color: var(--on-dark-line); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .7); }
.site-header.is-dark .header-actions, [data-theme="dark"] .header-actions { border-top-color: var(--on-dark-line); }
[data-theme="dark"] .site-header:not(.is-dark) .main-nav a, [data-theme="dark"] .site-header:not(.is-dark) .nav-link { color: var(--muted); }
}
@media (max-width: 860px) {
.plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; gap: 24px; }
}
@media (max-width: 760px) {
.channel-grid { grid-template-columns: minmax(0, 1fr); }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.step:not(:last-child)::after {
top: 68px; bottom: -28px; inset-inline-start: 27px; inset-inline-end: auto;
width: 2px; height: auto;
background: repeating-linear-gradient(180deg, rgba(138, 162, 255, .34) 0 6px, transparent 6px 12px);
}
[data-theme="dark"] .step:not(:last-child)::after { background: repeating-linear-gradient(180deg, rgba(138, 162, 255, .3) 0 6px, transparent 6px 12px); }
.step { padding-inline-start: 80px; }
.step-num { position: absolute; inset-inline-start: 0; top: 0; }
.step h3 { margin-top: 12px; }
.grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
:root { --gutter: 16px; --section-y: 72px; --header-h: 62px; }
body { font-size: 15.5px; }
.brand-name { font-size: 19px; }
.brand-mark { width: 32px; height: 32px; }
.page-body { padding-block: 24px 56px; }
.card { padding: 22px 18px; border-radius: var(--radius); }
.card:has(> table), .card:has(> .table-wrap) { overflow-x: auto; }
table { min-width: 600px; }
.hero { padding: 44px 0 72px; }
.is-bleed .site-main > .hero:first-child { padding-top: calc(var(--header-h) + 36px); }
.hero-title { margin: 20px 0 16px; }
.hero-lead { font-size: 16.5px; }
.hero-actions .btn { flex: 1 1 auto; }
.hero-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
.hero-visual { padding-bottom: 0; }
.hero-visual .code-window { margin-right: 0; }
.code-window { border-radius: 14px; }
.code-window-bar { min-height: 42px; padding: 0 12px; gap: 10px; }
.code-window-meta { display: none; }
.code-window-body { font-size: 12px; padding: 14px 0 16px; }
.code-line { padding-right: 14px; }
.code-line::before { width: 30px; padding-right: 12px; }
.code-status { margin-left: 30px; }
pre.code-box { font-size: 12.5px; padding: 16px; }
.dev-code .code-pane pre.code-box { min-height: 0; }
.mail-card {
position: relative; bottom: auto; inset-inline-start: auto;
width: auto; max-width: 340px; margin: -34px 12px 0 auto;
}
.otp-digits { gap: 6px; }
.otp-digits span { width: 36px; height: 44px; font-size: 20px; }
.trust-row { grid-template-columns: minmax(0, 1fr); }
.trust-item { padding: 14px 2px; }
.section-head, .sec-head { margin-bottom: 34px; }
.section-sub, .sec-head p { font-size: 16px; }
.feature-grid, .feat-grid, .sec-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.feature-card, .feat-card, .channel-card, .plan { padding: 24px 20px; }
.feature-card .feat-media { height: 150px; }
.feature-card .feat-media img { height: 128px; }
.qa { padding: 2px 20px; }
.qa-item summary { font-size: 16px; padding: 18px 0; }
.cta-panel, .cta-band { padding: 36px 22px; border-radius: 20px; }
.cta-actions .btn, .cta-band .btn { flex: 1 1 auto; }
.dev-actions .btn { flex: 1 1 auto; }
.page-hero { padding: 34px 22px; border-radius: 20px; margin-bottom: 32px; }
.page-hero p { font-size: 16px; }
.kpi-grid, .kpi-grid.kpi-6, .kpi-grid.kpi-3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kpi { padding: 15px 16px; }
.chart { height: 140px; gap: 3px; }
.chart .num { font-size: 9.5px; }
.chart .day { font-size: 9.5px; }
.chart-note { margin-inline-start: 0; width: 100%; }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.site-footer { padding-top: 56px; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
.footer-legal { flex-direction: column; align-items: flex-start; }
.footer-legal > span + span::before { display: none; }
}
@media (max-width: 380px) {
.brand-tag { display: none; }
.otp-digits span { width: 32px; height: 40px; font-size: 18px; }
}
/* الليلي: توهجات زرقاء للعناصر التي تحولت خضراء في النهاري */
[data-theme="dark"] ::selection { background: rgba(51, 88, 255, .2); }
[data-theme="dark"] .step-num { box-shadow: 0 14px 30px -10px rgba(51, 88, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(138, 162, 255, .35); }
[data-theme="dark"] .btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px -12px rgba(51, 88, 255, .9); }
[data-theme="dark"] .brand-mark { box-shadow: 0 6px 18px -6px rgba(51, 88, 255, .9); }
/* النهاري الداكن (أقل ظلامية بـ 10% من الليلي): هيدر متناغم مع الهوية الكحلية */
[data-theme="light"] .site-header .brand,
[data-theme="light"] .site-header .brand:hover { color: #FFFFFF; }
[data-theme="light"] .site-header .brand-tag { color: #B4C3FF; background: rgba(51, 88, 255, .20); border-color: rgba(138, 162, 255, .32); }
[data-theme="light"] .site-header .main-nav a,
[data-theme="light"] .site-header .nav-link,
[data-theme="light"] .site-header button.link { color: #C9D4F5; }
[data-theme="light"] .site-header .main-nav a:hover,
[data-theme="light"] .site-header .nav-link:hover,
[data-theme="light"] .site-header button.link:hover { color: #FFFFFF; }
[data-theme="light"] .site-header .nav-panel { background: #131C42; border-color: #28356E; }
[data-theme="light"] .site-header { color-scheme: dark; }
/* الليلي: البطاقة المميزة تظل بتدرج أزرق */
[data-theme="dark"] .plan.is-featured { background: linear-gradient(180deg, rgba(51, 88, 255, .18) 0%, rgba(51, 88, 255, .05) 46%); }
[data-theme="dark"] .channel-card.is-live { background: linear-gradient(180deg, rgba(51, 88, 255, .17) 0%, rgba(51, 88, 255, .04) 70%); }