/* ==========================================================================
   سامانه شناسنامه هوشمند موتورسیکلت — Customer
   ========================================================================== */

:root {
    --c-primary: #ec1d25;
    --c-secondary: #8f1219;
    --c-accent: #cfd4da;
    --c-success: #22c55e;
    --c-warning: #f59e0b;
    --c-danger: #ef4444;
    --c-bg: #0a0a0c;
    --c-text: #f2f2f4;
    --c-muted: #a3a3ad;
    --c-dim: #6b6b76;
    --c-line: rgba(255, 255, 255, .09);
    --c-glass: rgba(18, 18, 22, .62);
    --c-glass-2: rgba(30, 30, 36, .6);
    --radius: 22px;
    --radius-sm: 14px;
    --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
    --font: 'Vazirmatn', 'Vazir', Tahoma, system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.cx {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-text);
    background: var(--c-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--c-accent); text-decoration: none; }
button { font-family: inherit; }
::selection { background: color-mix(in srgb, var(--c-accent) 45%, transparent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--c-primary), var(--c-secondary)); border-radius: 10px; border: 2px solid var(--c-bg); }

/* ---------- پس‌زمینه زنده ---------- */
.cx-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cx-aurora span {
    position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%;
    filter: blur(90px); opacity: .38; mix-blend-mode: screen;
    animation: cx-float 22s ease-in-out infinite alternate;
}
.cx-aurora span:nth-child(1) { background: var(--c-primary); top: -22vmax; right: -12vmax; opacity: .2; }
.cx-aurora span:nth-child(2) { background: #3f3f46; bottom: -25vmax; left: -15vmax; opacity: .45; animation-duration: 26s; animation-delay: -6s; }
.cx-aurora span:nth-child(3) { background: var(--c-accent); top: 30%; left: 35%; width: 35vmax; height: 35vmax; opacity: .07; animation-duration: 30s; animation-delay: -12s; }
.cx-aurora span:nth-child(4) { background: var(--c-secondary); top: 60%; right: 20%; width: 28vmax; height: 28vmax; opacity: .14; animation-duration: 34s; }
@keyframes cx-float {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50% { transform: translate3d(6vmax, -4vmax, 0) scale(1.15) rotate(40deg); }
    100% { transform: translate3d(-5vmax, 5vmax, 0) scale(.9) rotate(-20deg); }
}
.cx-grid {
    position: absolute; inset: -50% -50% 0; height: 200%;
    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: 60px 60px;
    transform: perspective(700px) rotateX(62deg) translateY(-10%);
    transform-origin: center top;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, transparent 85%);
    animation: cx-grid-move 14s linear infinite;
}
@keyframes cx-grid-move { to { background-position: 0 60px, 0 0; } }
#cxParticles { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .85) 100%); }

.cx-scroll-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 60; }
.cx-scroll-progress span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--c-accent), var(--c-primary), var(--c-secondary));
    box-shadow: 0 0 14px var(--c-accent);
}

/* ---------- نوار بالا ---------- */
.cx-top {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px clamp(16px, 4vw, 48px);
    background: linear-gradient(to bottom, rgba(10, 10, 12, .88), rgba(10, 10, 12, .45));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--c-line);
}
.cx-brand { display: flex; align-items: center; gap: 12px; color: var(--c-text); }
.cx-brand__mark {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
    font-weight: 900; font-size: 22px; color: #fff;
    background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
    box-shadow: 0 0 24px color-mix(in srgb, var(--c-primary) 40%, transparent), inset 0 0 0 2px rgba(255, 255, 255, .15);
}
.cx-brand__logo { display: block; height: 46px; width: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); transition: transform .4s var(--ease), filter .4s; }
.cx-brand:hover .cx-brand__logo { transform: translateY(-1px); filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--c-primary) 35%, transparent)); }
.cx-brand__logo--sm { display: none; height: 42px; }
.cx-brand__divider { width: 1px; height: 34px; background: linear-gradient(transparent, var(--c-line), transparent); }
.cx-brand__text { display: flex; flex-direction: column; line-height: 1.3; }
.cx-brand__text strong { font-size: 17px; letter-spacing: 2px; font-weight: 900; }
.cx-brand__text small { color: var(--c-muted); font-size: 12px; }
.cx-brand__divider + .cx-brand__text strong { font-size: 15px; letter-spacing: 0; font-weight: 800; }
.cx-brand__divider + .cx-brand__text small { letter-spacing: 3px; font-weight: 700; }
.cx-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-muted); padding: 6px 14px; border: 1px solid var(--c-line); border-radius: 99px; background: rgba(255, 255, 255, .03); }
.cx-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 0 var(--c-success); animation: cx-ping 1.8s infinite; }
@keyframes cx-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-success) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.cx-top__actions { display: flex; gap: 10px; }
.cx-chip-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 16px; border-radius: 99px; font-size: 13px; font-weight: 600;
    color: var(--c-text); background: rgba(255, 255, 255, .05); border: 1px solid var(--c-line);
    transition: all .3s var(--ease);
}
.cx-chip-btn:hover { border-color: var(--c-accent); box-shadow: 0 0 20px color-mix(in srgb, var(--c-accent) 35%, transparent); transform: translateY(-1px); }
.cx-chip-btn .mdi { font-size: 18px; }

/* ---------- ساختار کلی ---------- */
.cx-app { width: min(1280px, 100% - 32px); margin: 0 auto; padding: 28px 0 60px; min-height: 70vh; }

.cx-glass {
    position: relative;
    background: linear-gradient(160deg, var(--c-glass-2), var(--c-glass));
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    overflow: hidden;
    isolation: isolate;
}
.cx-glass::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .4s;
}
.cx-glass::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .06), transparent 40%);
    opacity: 0; transition: opacity .4s;
}
.cx-glass:hover::before, .cx-glass:hover::after { opacity: 1; }

[data-tilt] { transition: transform .5s var(--ease); transform-style: preserve-3d; will-change: transform; }

[data-reveal] { opacity: 0; transform: translateY(40px) scale(.98); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

.cx-gradient-text {
    background: linear-gradient(100deg, #fff 0%, var(--c-accent) 35%, var(--c-primary) 62%, #fff 100%);
    background-size: 250% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: cx-shine 6s linear infinite;
}
@keyframes cx-shine { to { background-position: -250% center; } }

/* ---------- قهرمان صفحه ---------- */
.cx-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; padding: clamp(22px, 4vw, 44px); align-items: center; min-height: 460px; }
.cx-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--c-accent); font-weight: 700; margin-bottom: 10px; }
.cx-hero__eyebrow::before { content: ""; width: 34px; height: 2px; background: linear-gradient(90deg, transparent, var(--c-accent)); }
.cx-hero__title { margin: 0; font-size: clamp(34px, 5.6vw, 68px); line-height: 1.08; font-weight: 900; letter-spacing: -1px; unicode-bidi: plaintext; text-align: right; word-break: break-word; }
.cx-hero__subtitle { margin: 12px 0 0; color: var(--c-muted); font-size: 16px; }
.cx-hero__code { font-family: var(--mono); direction: ltr; display: inline-block; color: var(--c-text); background: rgba(255, 255, 255, .05); border: 1px dashed var(--c-line); padding: 2px 10px; border-radius: 8px; font-size: 13px; }

.cx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cx-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--c-line); font-size: 13px; color: var(--c-text);
    transition: transform .3s var(--ease), border-color .3s;
}
.cx-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c-accent) 60%, transparent); }
.cx-chip .mdi { color: var(--c-accent); font-size: 17px; }
.cx-chip b { font-weight: 700; }
.cx-swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--sw, #888); box-shadow: 0 0 0 2px rgba(255, 255, 255, .2), 0 0 14px var(--sw-glow, transparent); display: inline-block; flex: none; }

.cx-verify {
    position: relative; display: flex; align-items: center; gap: 14px; margin-top: 26px;
    padding: 14px 18px; border-radius: 18px; max-width: 520px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--c-success) 18%, transparent), color-mix(in srgb, var(--c-success) 4%, transparent));
    border: 1px solid color-mix(in srgb, var(--c-success) 45%, transparent);
    overflow: hidden;
}
.cx-verify::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent); animation: cx-sweep 3.5s ease-in-out infinite; }
@keyframes cx-sweep { 0%, 30% { left: -60%; } 70%, 100% { left: 130%; } }
.cx-verify__icon { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--c-success); color: #04210f; font-size: 28px; }
.cx-verify__icon::before, .cx-verify__icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--c-success); animation: cx-ring 2.4s ease-out infinite; }
.cx-verify__icon::after { animation-delay: 1.2s; }
@keyframes cx-ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.cx-verify strong { display: block; font-size: 15px; }
.cx-verify small { color: var(--c-muted); font-size: 12px; }
.cx-verify--warn { background: linear-gradient(120deg, color-mix(in srgb, var(--c-warning) 18%, transparent), transparent); border-color: color-mix(in srgb, var(--c-warning) 45%, transparent); }
.cx-verify--warn .cx-verify__icon { background: var(--c-warning); color: #2a1a00; }
.cx-verify--warn .cx-verify__icon::before, .cx-verify--warn .cx-verify__icon::after { border-color: var(--c-warning); }
.cx-verify--danger { background: linear-gradient(120deg, color-mix(in srgb, var(--c-danger) 18%, transparent), transparent); border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); }
.cx-verify--danger .cx-verify__icon { background: var(--c-danger); color: #fff; }
.cx-verify--danger .cx-verify__icon::before, .cx-verify--danger .cx-verify__icon::after { border-color: var(--c-danger); }

.cx-hero__visual { position: relative; aspect-ratio: 16 / 11; display: grid; place-items: center; }
.cx-orbit { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--c-accent) 35%, transparent); animation: cx-rotate 40s linear infinite; }
.cx-orbit:nth-child(2) { inset: 14%; border-style: solid; border-color: color-mix(in srgb, var(--c-secondary) 30%, transparent); animation-duration: 28s; animation-direction: reverse; }
.cx-orbit:nth-child(3) { inset: 24%; border-color: color-mix(in srgb, var(--c-primary) 30%, transparent); animation-duration: 18s; }
.cx-orbit::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 18px var(--c-accent), 0 0 40px var(--c-accent); }
.cx-orbit:nth-child(2)::before { background: var(--c-secondary); box-shadow: 0 0 18px var(--c-secondary); top: auto; bottom: -5px; }
@keyframes cx-rotate { to { transform: rotate(360deg); } }
.cx-hero__glow { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bike-color, var(--c-primary)) 55%, transparent), transparent 70%); filter: blur(30px); animation: cx-breathe 4s ease-in-out infinite; }
@keyframes cx-breathe { 50% { transform: scale(1.12); opacity: .7; } }
.cx-hero__visual .cx-bike { position: relative; width: 100%; z-index: 2; animation: cx-hover 5s ease-in-out infinite; }
.cx-hero__lion { position: absolute; z-index: 1; top: 50%; left: 50%; height: 62%; width: auto; transform: translate(-50%, -54%); opacity: .08; filter: grayscale(.3); pointer-events: none; animation: cx-lion 6s ease-in-out infinite; }
@keyframes cx-lion { 50% { transform: translate(-50%, -54%) scale(1.06); opacity: .12; } }
@keyframes cx-hover { 50% { transform: translateY(-10px); } }
.cx-float-tag {
    position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 0;
    padding: 8px 14px; border-radius: 14px; font-size: 11px; color: var(--c-muted);
    background: rgba(14, 14, 18, .78); border: 1px solid var(--c-line); backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8);
    animation: cx-hover 6s ease-in-out infinite;
}
.cx-float-tag b { color: var(--c-text); font-size: 15px; font-weight: 800; direction: ltr; text-align: right; }
.cx-float-tag--1 { top: 6%; right: 2%; }
.cx-float-tag--2 { bottom: 10%; left: 0; animation-delay: -2s; }
.cx-float-tag--3 { top: 12%; left: 6%; animation-delay: -4s; }

/* ---------- موتورسیکلت SVG ---------- */
.cx-bike path, .cx-bike line, .cx-bike circle, .cx-bike ellipse:not(.bk-head):not(.bk-ground) {
    fill: none; stroke: url(#bkGrad); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: bk-draw 2.6s var(--ease) forwards;
}
.cx-bike .bk-fill { fill: url(#bkGrad); fill-opacity: 0; animation: bk-draw 2.6s var(--ease) forwards, bk-fill 1.2s 2s ease forwards; }
@keyframes bk-draw { to { stroke-dashoffset: 0; } }
@keyframes bk-fill { to { fill-opacity: .16; } }
.cx-bike .bk-tire { stroke: rgba(14, 14, 16, .92); stroke-width: 14; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.cx-bike .bk-disc { stroke-dasharray: 4 5; stroke-dashoffset: 0; stroke-width: 2; animation: none; opacity: .7; }
.cx-bike .bk-hub { fill: var(--c-accent); stroke: none; animation: none; stroke-dasharray: none; }
.cx-bike .bk-head { fill: #fff; stroke: none; filter: drop-shadow(0 0 10px var(--c-accent)) drop-shadow(0 0 24px var(--c-accent)); animation: bk-blink 3s ease-in-out infinite; }
.cx-bike .bk-tail { fill: var(--c-danger); filter: drop-shadow(0 0 8px var(--c-danger)); animation: bk-blink 1.6s ease-in-out infinite; }
@keyframes bk-blink { 50% { opacity: .45; } }
.cx-bike .bk-wheel { animation: cx-rotate 2.2s linear infinite; }
.cx-bike .bk-speed line { stroke: var(--c-accent); stroke-width: 2; opacity: .6; stroke-dasharray: 20 60; animation: bk-speed 1s linear infinite; }
.cx-bike .bk-speed line:nth-child(2) { animation-delay: -.3s; }
.cx-bike .bk-speed line:nth-child(3) { animation-delay: -.6s; }
@keyframes bk-speed { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }

/* ---------- شناسه‌ها ---------- */
.cx-ids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.cx-id { padding: 18px 20px; }
.cx-id__label { display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: 12px; padding-inline-end: 42px; }
.cx-id__label .mdi { font-size: 18px; color: var(--c-accent); }
.cx-id__value { margin-top: 8px; font-family: var(--mono); font-size: clamp(14px, 1.5vw, 18px); font-weight: 700; direction: ltr; text-align: right; word-break: break-all; letter-spacing: .5px; color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--c-accent) 55%, transparent); }
.cx-id.is-match { border-color: color-mix(in srgb, var(--c-success) 55%, transparent); }
.cx-id.is-match .cx-id__label::after { content: "مطابق جستجو"; margin-inline-start: auto; font-size: 10px; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c-success) 20%, transparent); color: var(--c-success); }
.cx-id__scan { position: absolute; inset-inline: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); box-shadow: 0 0 12px var(--c-accent); animation: cx-scanline 3.2s ease-in-out infinite; opacity: .7; }
@keyframes cx-scanline { 0% { top: 0; } 50% { top: calc(100% - 2px); } 100% { top: 0; } }
.cx-copy { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--c-muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--c-line); transition: all .25s; }
.cx-copy:hover { color: #fff; border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 18%, transparent); }

/* ---------- آمار ---------- */
.cx-stats { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 14px; margin-top: 22px; }
.cx-stat { padding: 18px; text-align: center; }
.cx-stat__icon { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--c1, var(--c-primary)), var(--c2, var(--c-secondary))); box-shadow: 0 10px 25px -8px var(--c1, var(--c-primary)); }
.cx-stat__num { font-size: 28px; font-weight: 900; line-height: 1.1; }
.cx-stat__label { color: var(--c-muted); font-size: 12px; margin-top: 4px; }

/* ---------- ناوبری بخش‌ها ---------- */
.cx-nav { position: sticky; top: 76px; z-index: 40; margin: 30px 0 8px; }
.cx-nav__inner { display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 99px; background: rgba(14, 14, 18, .8); border: 1px solid var(--c-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow); position: relative; }
.cx-nav__inner::-webkit-scrollbar { display: none; }
.cx-nav a { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 99px; color: var(--c-muted); font-size: 13px; font-weight: 600; transition: color .3s; white-space: nowrap; }
.cx-nav a .mdi { font-size: 17px; }
.cx-nav a:hover { color: #fff; }
.cx-nav a.is-active { color: #fff; }
.cx-nav__pill { position: absolute; z-index: 0; top: 6px; bottom: 6px; border-radius: 99px; background: linear-gradient(120deg, var(--c-primary), var(--c-secondary)); box-shadow: 0 0 24px color-mix(in srgb, var(--c-primary) 55%, transparent); transition: all .45s var(--ease); }

/* ---------- بخش‌ها ---------- */
.cx-section { margin-top: 28px; padding: clamp(18px, 3vw, 30px); scroll-margin-top: 150px; }
.cx-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.cx-section__icon { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; color: #fff; background: linear-gradient(135deg, var(--c1, var(--c-primary)), var(--c2, var(--c-secondary))); box-shadow: 0 12px 30px -10px var(--c1, var(--c-primary)); flex: none; }
.cx-section__title { margin: 0; font-size: 21px; font-weight: 800; }
.cx-section__sub { margin: 0; color: var(--c-muted); font-size: 13px; }
.cx-section__tools { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-sub-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin: 26px 0 12px; color: var(--c-text); }
.cx-sub-title .mdi { color: var(--c-accent); font-size: 20px; }
.cx-sub-title small { color: var(--c-muted); font-weight: 400; }

/* ---------- گیج‌ها ---------- */
.cx-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cx-gauge { padding: 18px 14px 14px; text-align: center; background: rgba(255, 255, 255, .025); border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
.cx-gauge svg { width: 100%; max-width: 190px; overflow: visible; }
.cx-gauge__track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 12; stroke-linecap: round; }
.cx-gauge__bar { fill: none; stroke: url(#cxGaugeGrad); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-accent) 70%, transparent)); }
.cx-gauge__ticks line { stroke: rgba(255, 255, 255, .18); stroke-width: 2; }
.cx-gauge__needle { transform-origin: 100px 100px; transition: transform 2s var(--ease); }
.cx-gauge__needle line { stroke: #fff; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--c-accent)); }
.cx-gauge__needle circle { fill: var(--c-accent); }
.cx-gauge__val { font-size: 26px; font-weight: 900; margin-top: -26px; direction: ltr; }
.cx-gauge__val small { font-size: 12px; color: var(--c-muted); font-weight: 500; margin-inline-start: 4px; }
.cx-gauge__label { color: var(--c-muted); font-size: 12px; }

/* ---------- کارت‌های مشخصات ---------- */
.cx-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cx-spec {
    position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid var(--c-line);
    transition: transform .35s var(--ease), border-color .35s, background .35s; overflow: hidden;
}
.cx-spec::before { content: ""; position: absolute; inset-block: 0; right: 0; width: 3px; background: linear-gradient(var(--c-accent), var(--c-secondary)); opacity: 0; transition: opacity .3s; }
.cx-spec:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); background: rgba(255, 255, 255, .055); }
.cx-spec:hover::before { opacity: 1; }
.cx-spec__icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.cx-spec__label { color: var(--c-muted); font-size: 12px; line-height: 1.5; }
.cx-spec__value { font-weight: 700; font-size: 14.5px; line-height: 1.6; word-break: break-word; }
.cx-spec--wide { grid-column: 1 / -1; }

.cx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cx-tag { padding: 4px 12px; border-radius: 99px; font-size: 12.5px; background: linear-gradient(120deg, color-mix(in srgb, var(--c-primary) 14%, transparent), rgba(255, 255, 255, .04)); border: 1px solid color-mix(in srgb, var(--c-primary) 32%, transparent); }

/* ---------- کلید/مقدار ---------- */
.cx-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }
.cx-kv__row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 2px; border-bottom: 1px dashed var(--c-line); font-size: 14px; }
.cx-kv__row dt { color: var(--c-muted); flex: none; max-width: 48%; }
.cx-kv__row dd { margin: 0; font-weight: 600; text-align: left; word-break: break-word; }
.cx-kv__row.is-empty dd { color: var(--c-dim); font-weight: 400; }
.cx-app:not(.cx-show-empty) .cx-empty-row { display: none; }
.cx-show-empty [data-empty-note] { display: none; }
.cx-empty-note { color: var(--c-dim); font-size: 13px; padding: 14px; border: 1px dashed var(--c-line); border-radius: var(--radius-sm); text-align: center; }

.cx-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cx-cols--3 { grid-template-columns: repeat(3, 1fr); }
.cx-panel { padding: 18px 20px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .025); border: 1px solid var(--c-line); }
.cx-panel > .cx-sub-title:first-child { margin-top: 0; }

/* ---------- جدول ---------- */
.cx-table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--c-line); }
.cx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.cx-table th { position: sticky; top: 0; text-align: right; font-weight: 700; color: var(--c-muted); font-size: 12px; padding: 12px 14px; background: rgba(22, 22, 27, .97); border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.cx-table td { padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.cx-table tbody tr { transition: background .25s; }
.cx-table tbody tr:hover { background: color-mix(in srgb, var(--c-accent) 7%, transparent); }
.cx-table tbody tr:last-child td { border-bottom: 0; }
.cx-table .is-mono { font-family: var(--mono); direction: ltr; text-align: right; font-size: 12.5px; color: #e4e4e7; }
.cx-table .cx-rn { color: var(--c-dim); width: 42px; }

.cx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cx-badge--ok { background: color-mix(in srgb, var(--c-success) 16%, transparent); color: #4ade80; border: 1px solid color-mix(in srgb, var(--c-success) 35%, transparent); }
.cx-badge--bad { background: color-mix(in srgb, var(--c-danger) 16%, transparent); color: #f87171; border: 1px solid color-mix(in srgb, var(--c-danger) 35%, transparent); }
.cx-badge--info { background: color-mix(in srgb, var(--c-accent) 12%, transparent); color: #e4e4e7; border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent); }
.cx-badge--muted { background: rgba(255, 255, 255, .05); color: var(--c-muted); border: 1px solid var(--c-line); }

/* ---------- کنترل کیفیت ---------- */
.cx-quality { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.cx-ring { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.cx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cx-ring__track { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 14; }
.cx-ring__bar { fill: none; stroke: url(#cxRingGrad); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c-success) 60%, transparent)); }
.cx-ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cx-ring__center b { font-size: 44px; font-weight: 900; line-height: 1; }
.cx-ring__center > span { color: var(--c-muted); font-size: 12px; margin-top: 6px; }
.cx-ring-caption { text-align: center; color: var(--c-muted); font-size: 13px; margin-top: 10px; }

.cx-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cx-check { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--c-line); font-size: 13.5px; opacity: 0; transform: translateX(20px); }
.is-in .cx-check { animation: cx-check-in .6s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes cx-check-in { to { opacity: 1; transform: none; } }
.cx-check__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: color-mix(in srgb, var(--c-success) 18%, transparent); color: #4ade80; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-success) 40%, transparent); }
.cx-check.is-bad .cx-check__icon { background: color-mix(in srgb, var(--c-danger) 18%, transparent); color: #f87171; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-danger) 40%, transparent); }
.cx-check__text { flex: 1; }
.cx-check__val { font-family: var(--mono); font-size: 12px; color: var(--c-muted); direction: ltr; }

/* ---------- خط زمان ---------- */
.cx-timeline { position: relative; padding-inline-start: 34px; }
.cx-timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; right: 12px; width: 2px; background: linear-gradient(var(--c-accent), var(--c-primary), var(--c-secondary)); border-radius: 2px; box-shadow: 0 0 12px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.cx-tl { position: relative; padding: 14px 18px; margin-bottom: 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid var(--c-line); opacity: 0; transform: translateY(20px); }
.is-in .cx-tl { animation: cx-check-in .7s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 140ms); }
.cx-tl::before { content: ""; position: absolute; top: 20px; right: -29px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-bg); border: 3px solid var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 18%, transparent), 0 0 16px var(--c-accent); }
.cx-tl__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-tl__type { font-weight: 800; font-size: 15px; }
.cx-tl__date { margin-inline-start: auto; font-family: var(--mono); font-size: 12px; color: var(--c-accent); direction: ltr; }
.cx-tl__detail { color: var(--c-muted); font-size: 13px; margin-top: 4px; }
.cx-tl__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--c-dim); }
.cx-tl__meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- پرسنل ---------- */
.cx-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cx-person { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid var(--c-line); transition: transform .3s var(--ease); }
.cx-person:hover { transform: translateY(-3px); }
.cx-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 220) 85% 58%), hsl(calc(var(--h, 220) + 60) 85% 55%)); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.cx-person b { display: block; font-size: 14px; }
.cx-person small { color: var(--c-muted); font-size: 12px; display: block; }

/* ---------- انطباق ---------- */
.cx-comp { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cx-comp__item { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid var(--c-line); border-inline-start: 3px solid var(--st, var(--c-dim)); }
.cx-comp__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; color: var(--st, var(--c-dim)); background: color-mix(in srgb, var(--st, #888) 15%, transparent); }
.cx-comp__item b { display: block; font-size: 13.5px; }
.cx-comp__item small { color: var(--c-muted); font-size: 12.5px; }
.cx-comp__item.is-ok { --st: var(--c-success); }
.cx-comp__item.is-bad { --st: var(--c-danger); }
.cx-comp__item.is-wait { --st: var(--c-warning); }
.cx-progress { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; margin: 6px 0 18px; }
.cx-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--c-success), var(--c-accent)); box-shadow: 0 0 14px var(--c-success); transition: width 2s var(--ease); }

/* ---------- کارت شناسایی ---------- */
.cx-idcard {
    position: relative; display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 24px;
    border-radius: 24px; overflow: hidden;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--c-primary) 22%, transparent), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .08), transparent 55%),
        linear-gradient(135deg, #16161a, #222228);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.cx-idcard::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 12px); pointer-events: none; }
.cx-idcard::after { content: ""; position: absolute; top: -50%; left: -30%; width: 40%; height: 200%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); animation: cx-holo 6s ease-in-out infinite; pointer-events: none; }
@keyframes cx-holo { 0%, 40% { left: -40%; } 80%, 100% { left: 130%; } }
.cx-idcard__title { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.cx-idcard__wordmark { height: 26px; width: auto; margin-inline-start: auto; opacity: .85; }
.cx-idcard__lion { position: absolute; z-index: 0; bottom: -18px; inset-inline-end: 170px; height: 170px; width: auto; opacity: .07; pointer-events: none; }
.cx-idcard__lines, .cx-idcard__qr { position: relative; z-index: 1; }
.cx-idcard__chip { width: 42px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #f5d27a, #b8892d); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); position: relative; }
.cx-idcard__chip::after { content: ""; position: absolute; inset: 7px 10px; border: 1px solid rgba(0, 0, 0, .35); border-radius: 3px; }
.cx-idcard__lines { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 2; }
.cx-idcard__lines li { display: flex; gap: 8px; }
.cx-idcard__lines li span { color: var(--c-muted); min-width: 92px; }
.cx-idcard__qr { background: #fff; padding: 10px; border-radius: 14px; width: 150px; height: 150px; display: grid; place-items: center; box-shadow: 0 0 30px color-mix(in srgb, var(--c-accent) 45%, transparent); align-self: center; }
.cx-idcard__qr img, .cx-idcard__qr svg, .cx-idcard__qr canvas { width: 100%; height: 100%; image-rendering: pixelated; }

/* ---------- کالا / مدل ---------- */
.cx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.cx-crumbs span { padding: 6px 14px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--c-line); font-size: 13px; }
.cx-crumbs span:last-child { border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); color: #fff; background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.cx-crumbs .mdi { color: var(--c-dim); }
.cx-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cx-variant { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid var(--c-line); transition: all .3s var(--ease); }
.cx-variant:hover { transform: translateY(-3px); border-color: var(--sw, var(--c-accent)); box-shadow: 0 10px 30px -12px var(--sw, var(--c-accent)); }
.cx-variant .cx-swatch { width: 30px; height: 30px; }
.cx-variant b { display: block; font-size: 13.5px; }
.cx-variant small { font-family: var(--mono); color: var(--c-muted); font-size: 11.5px; direction: ltr; display: block; text-align: right; }
.cx-variant.is-current { border-color: color-mix(in srgb, var(--c-success) 60%, transparent); background: color-mix(in srgb, var(--c-success) 8%, transparent); }
.cx-variant.is-current::after { content: "این محصول"; margin-inline-start: auto; font-size: 10.5px; padding: 1px 8px; border-radius: 99px; color: var(--c-success); background: color-mix(in srgb, var(--c-success) 18%, transparent); }

.cx-filter { position: relative; }
.cx-filter input { width: 230px; max-width: 100%; padding: 8px 36px 8px 12px; border-radius: 99px; border: 1px solid var(--c-line); background: rgba(255, 255, 255, .04); color: var(--c-text); font-family: inherit; font-size: 13px; outline: none; transition: border-color .3s, box-shadow .3s; }
.cx-filter input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 15%, transparent); }
.cx-filter .mdi { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--c-muted); }
.cx-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 99px; background: rgba(255, 255, 255, .04); border: 1px solid var(--c-line); flex-wrap: wrap; }
.cx-seg button { border: 0; cursor: pointer; padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--c-muted); background: transparent; transition: all .3s; }
.cx-seg button.is-active { color: #fff; background: linear-gradient(120deg, var(--c-primary), var(--c-secondary)); box-shadow: 0 0 16px color-mix(in srgb, var(--c-primary) 45%, transparent); }
.cx-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-muted); cursor: pointer; user-select: none; }
.cx-toggle input { display: none; }
.cx-toggle i { width: 38px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, .1); position: relative; transition: background .3s; }
.cx-toggle i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.cx-toggle input:checked + i { background: var(--c-primary); }
.cx-toggle input:checked + i::after { transform: translateX(-16px); }

.cx-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 24px; }
.cx-score__row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.cx-score__row b { font-family: var(--mono); }
.cx-score .cx-progress { margin: 0; height: 8px; }

/* ---------- هشدارها ---------- */
.cx-alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-sm); margin-top: 18px; border: 1px solid; font-size: 14px; }
.cx-alert .mdi { font-size: 24px; flex: none; line-height: 1.2; }
.cx-alert b { display: block; }
.cx-alert a { font-weight: 700; }
.cx-alert--warn { background: color-mix(in srgb, var(--c-warning) 10%, transparent); border-color: color-mix(in srgb, var(--c-warning) 40%, transparent); color: #fde68a; }
.cx-alert--danger { background: color-mix(in srgb, var(--c-danger) 10%, transparent); border-color: color-mix(in srgb, var(--c-danger) 40%, transparent); color: #fecaca; }
.cx-alert--info { background: color-mix(in srgb, var(--c-accent) 7%, transparent); border-color: color-mix(in srgb, var(--c-accent) 28%, transparent); color: #e4e4e7; }

/* ---------- صفحه استعلام ---------- */
.cx-search { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; min-height: calc(100vh - 260px); }
.cx-search__title { font-size: clamp(30px, 4.4vw, 54px); font-weight: 900; line-height: 1.2; margin: 0 0 14px; }
.cx-search__hint { color: var(--c-muted); font-size: 16px; margin: 0 0 26px; }
.cx-form { padding: 22px; display: grid; gap: 14px; }
.cx-field { position: relative; }
.cx-field .mdi { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--c-accent); pointer-events: none; }
.cx-field input { width: 100%; padding: 16px 52px 16px 16px; border-radius: 16px; border: 1px solid var(--c-line); background: rgba(0, 0, 0, .35); color: #fff; font-family: var(--mono); font-size: 16px; direction: ltr; text-align: right; outline: none; transition: border-color .3s, box-shadow .3s; }
.cx-field input::placeholder { font-family: var(--font); color: var(--c-dim); font-size: 14px; }
.cx-field input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-accent) 14%, transparent), 0 0 30px color-mix(in srgb, var(--c-accent) 20%, transparent); }
.cx-btn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 22px; border: 0; border-radius: 16px; cursor: pointer; font-size: 16px; font-weight: 800; color: #fff;
    background: linear-gradient(120deg, var(--c-primary), var(--c-secondary) 50%, var(--c-primary));
    background-size: 200% auto; box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--c-primary) 70%, transparent);
    transition: background-position .6s var(--ease), transform .3s var(--ease), box-shadow .3s;
}
.cx-btn:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 20px 50px -14px var(--c-secondary); }
.cx-btn .mdi { font-size: 22px; }
.cx-btn--ghost { background: rgba(255, 255, 255, .05); border: 1px solid var(--c-line); box-shadow: none; font-size: 14px; padding: 11px 18px; }
.cx-sample { font-size: 13px; color: var(--c-muted); }
.cx-sample a { font-family: var(--mono); direction: ltr; display: inline-block; }
.cx-search__visual { position: relative; }
.cx-search__visual .cx-hero__visual { aspect-ratio: 1.3; }

/* ---------- لودر ---------- */
.cx-loader { min-height: calc(100vh - 240px); display: grid; place-items: center; text-align: center; }
.cx-radar { position: relative; width: min(340px, 80vw); aspect-ratio: 1; margin: 0 auto 26px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 70%); border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent); overflow: hidden; }
.cx-radar::before, .cx-radar::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent); }
.cx-radar::before { inset: 18%; }
.cx-radar::after { inset: 36%; }
.cx-radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 25%); animation: cx-rotate 2.4s linear infinite; }
.cx-radar .cx-bike { position: absolute; inset: 22% 10%; width: 80%; z-index: 2; }
.cx-radar__dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 12px var(--c-accent); animation: bk-blink 1.4s infinite; }
.cx-loader__logo { display: block; height: 64px; width: auto; margin: 0 auto 22px; animation: cx-pulse-logo 2.4s ease-in-out infinite; }
@keyframes cx-pulse-logo { 50% { opacity: .6; transform: scale(.97); } }
.cx-loader__serial { font-family: var(--mono); font-size: 20px; letter-spacing: 3px; direction: ltr; color: #fff; text-shadow: 0 0 20px var(--c-accent); }
.cx-loader__steps { list-style: none; padding: 0; margin: 18px auto 0; max-width: 380px; text-align: right; }
.cx-loader__steps li { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--c-dim); font-size: 14px; transition: color .4s; }
.cx-loader__steps li .mdi { font-size: 18px; }
.cx-loader__steps li.is-active { color: var(--c-text); }
.cx-loader__steps li.is-active .mdi { color: var(--c-accent); animation: cx-rotate 1s linear infinite; }
.cx-loader__steps li.is-done { color: var(--c-muted); }
.cx-loader__steps li.is-done .mdi { color: var(--c-success); }

/* ---------- عدم یافت ---------- */
.cx-notfound { text-align: center; padding: clamp(30px, 6vw, 70px) 24px; max-width: 760px; margin: 30px auto; }
.cx-notfound__icon { width: 110px; height: 110px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 56px; color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 12%, transparent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-danger) 6%, transparent), 0 0 60px color-mix(in srgb, var(--c-danger) 30%, transparent); animation: cx-glitch 3s infinite; }
@keyframes cx-glitch { 0%, 92%, 100% { transform: none; } 94% { transform: translate(-3px, 2px) skewX(6deg); } 96% { transform: translate(3px, -2px) skewX(-6deg); } }
.cx-notfound h2 { margin: 0 0 8px; font-size: 26px; }
.cx-notfound p { color: var(--c-muted); }
.cx-notfound .cx-form { text-align: right; margin-top: 24px; }

/* ---------- دسترسی / ورود ---------- */
.cx-access { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.cx-access__badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; font-size: 13px; font-weight: 700; color: #fde68a; background: linear-gradient(120deg, color-mix(in srgb, var(--c-warning) 22%, transparent), color-mix(in srgb, var(--c-secondary) 18%, transparent)); border: 1px solid color-mix(in srgb, var(--c-warning) 45%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--c-warning) 25%, transparent); }
.cx-access__badge .mdi { font-size: 18px; }
.cx-chip-btn--lock { color: #fff; border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--c-primary) 26%, transparent), color-mix(in srgb, var(--c-secondary) 20%, transparent)); }
.cx-chip-btn--lock .mdi { color: var(--c-accent); }
.cx-btn:disabled { opacity: .7; cursor: wait; }
.cx-btn.is-loading .mdi { animation: cx-rotate 1s linear infinite; }
.cx-chip-btn--user { cursor: default; color: #86efac; border-color: color-mix(in srgb, var(--c-success) 35%, transparent); }
.cx-chip-btn--danger:hover { border-color: var(--c-danger); box-shadow: 0 0 20px color-mix(in srgb, var(--c-danger) 35%, transparent); }

.cx-login { max-width: 470px; margin: clamp(20px, 6vh, 70px) auto; padding: clamp(26px, 5vw, 42px); text-align: center; }
.cx-login .cx-hero__eyebrow { justify-content: center; }
.cx-login h2 { margin: 0 0 8px; font-size: 24px; }
.cx-login__hint { color: var(--c-muted); font-size: 13.5px; margin: 0 0 16px; }
.cx-login__lock { position: relative; width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 30px; display: grid; place-items: center; font-size: 48px; color: #fff; background: linear-gradient(135deg, #2a2a30, #151518); box-shadow: 0 20px 50px -18px color-mix(in srgb, var(--c-primary) 60%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .12); animation: cx-hover 4s ease-in-out infinite; }
.cx-login__lock::before, .cx-login__lock::after { content: ""; position: absolute; inset: -10px; border-radius: 36px; border: 1px solid color-mix(in srgb, var(--c-accent) 50%, transparent); animation: cx-ring 2.6s ease-out infinite; }
.cx-login__lock::after { animation-delay: 1.3s; }
.cx-login__lock img { width: 78%; height: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.cx-login__badge { position: absolute; bottom: -6px; inset-inline-start: -6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: #fff; background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); box-shadow: 0 0 0 3px var(--c-bg); }
.cx-login__target { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 14px; border-radius: 99px; font-family: var(--mono); font-size: 13px; background: rgba(255, 255, 255, .04); border: 1px dashed var(--c-line); }
.cx-login__target .mdi { color: var(--c-accent); font-size: 18px; }
.cx-login .cx-form { padding: 0; margin-top: 14px; text-align: right; }
.cx-login .cx-field input[name="username"], .cx-login .cx-field input[name="password"] { padding-left: 48px; }
.cx-login__eye { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer; color: var(--c-muted); background: transparent; font-size: 20px; }
.cx-login__eye:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.cx-login__eye .mdi { position: static; transform: none; color: inherit; font-size: 20px; }
.cx-login__error { min-height: 22px; margin: 0; color: #fca5a5; font-size: 13px; text-align: center; }
.cx-login__back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; color: var(--c-muted); }
.cx-login__back:hover { color: var(--c-accent); }
.cx-login.is-shake { animation: cx-shake .5s; }
@keyframes cx-shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

/* ---------- جزئی ---------- */
.cx-footer { border-top: 1px solid var(--c-line); background: rgba(6, 6, 8, .8); backdrop-filter: blur(10px); padding: 28px clamp(16px, 4vw, 48px) 20px; }
.cx-footer__inner { width: min(1280px, 100%); margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cx-footer__inner p { margin: 4px 0 0; color: var(--c-muted); font-size: 13px; }
.cx-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--c-muted); }
.cx-footer__contact li { display: flex; align-items: center; gap: 8px; }
.cx-footer__contact .mdi { color: var(--c-accent); font-size: 17px; }
.cx-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cx-footer__logo { display: block; height: 56px; width: auto; margin-bottom: 4px; opacity: .92; }
.cx-footer__note { text-align: center; font-size: 14px; font-weight: 700; margin: 18px 0 0; background: linear-gradient(100deg, #fff, var(--c-accent) 45%, var(--c-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-footer__note .mdi { color: var(--c-accent); margin-inline-end: 6px; font-size: 18px; vertical-align: middle; }
.cx-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 30px); opacity: 0; z-index: 90; padding: 10px 20px; border-radius: 99px; background: rgba(18, 18, 22, .94); border: 1px solid var(--c-accent); box-shadow: 0 0 30px color-mix(in srgb, var(--c-accent) 35%, transparent); font-size: 13px; transition: all .4s var(--ease); pointer-events: none; }
.cx-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.cx-noscript { text-align: center; padding: 40px; }
.cx-meta-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 26px; color: var(--c-dim); font-size: 12px; }
.cx-meta-line span { display: inline-flex; align-items: center; gap: 6px; }
.cx-raw { direction: ltr; text-align: left; font-family: var(--mono); font-size: 12px; max-height: 420px; overflow: auto; padding: 16px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .35); border: 1px solid var(--c-line); color: #d4d4d8; white-space: pre; }
.cx-hidden { display: none !important; }
.cx-num { font-feature-settings: "tnum"; }

/* ---------- نوار کاربری و دسترسی سریع ---------- */
.cx-quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: linear-gradient(120deg, color-mix(in srgb, var(--c-primary) 9%, transparent), rgba(255, 255, 255, .02)); border: 1px solid var(--c-line); }
.cx-quick__usage { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cx-quick__usage .mdi { font-size: 22px; color: var(--c-primary); }
.cx-quick__usage span { color: var(--c-muted); }
.cx-quick__usage b { font-size: 14.5px; font-weight: 800; }
.cx-quick__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-quick__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--c-text); background: rgba(255, 255, 255, .05); border: 1px solid var(--c-line); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.cx-quick__btn .mdi { font-size: 17px; color: var(--c-accent); }
.cx-quick__btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c-primary) 50%, transparent); background: color-mix(in srgb, var(--c-primary) 12%, transparent); }

/* ---------- ویژگی‌های برجسته / خدمات مالکان ---------- */
.cx-about { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 2.1; color: var(--c-muted); background: rgba(255, 255, 255, .025); border-inline-start: 3px solid var(--c-primary); }
.cx-about b { color: var(--c-text); font-weight: 800; }
.cx-glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 8px; }
.cx-glance__item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid var(--c-line); overflow: hidden; }
.cx-glance__item .mdi { position: absolute; top: 10px; left: 10px; font-size: 22px; color: var(--c-primary); opacity: .75; }
.cx-glance__item span { color: var(--c-muted); font-size: 12px; }
.cx-glance__item b { font-size: 16px; font-weight: 800; unicode-bidi: plaintext; text-align: right; }
.cx-owner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-auto-rows: minmax(440px, auto); gap: 22px; }
.cx-owner--single { grid-template-columns: 1fr; grid-auto-rows: auto; }
.cx-owner__side { position: relative; padding: 0; overflow: hidden; }
.cx-owner__side-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px 20px 0; }
.cx-owner__side .cx-perks { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 22px 6px; margin-inline-end: -6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.cx-owner__side .cx-perks::-webkit-scrollbar { width: 6px; }
.cx-owner__side .cx-perks::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 6px; }
.cx-owner .cx-sub-title:first-child { margin-top: 0; }
.cx-owner .cx-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-color { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .04); border: 1px solid var(--c-line); transition: border-color .25s, transform .25s var(--ease); }
.cx-color:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sw) 60%, transparent); }
.cx-color__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 0 10px -2px var(--sw); }
.cx-color.is-current { border-color: color-mix(in srgb, var(--c-success) 60%, transparent); background: color-mix(in srgb, var(--c-success) 10%, transparent); }
.cx-color small { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; color: var(--c-success); background: color-mix(in srgb, var(--c-success) 18%, transparent); }
.cx-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cx-perk small b { color: var(--c-text); font-weight: 700; }
.cx-perk { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .025); border: 1px solid var(--c-line); }
.cx-perk__icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; color: var(--c-accent); background: rgba(255, 255, 255, .06); }
.cx-perk > div > b { display: block; font-size: 14px; margin-bottom: 2px; }
.cx-perk small { color: var(--c-muted); font-size: 12.5px; line-height: 1.8; }

/* ---------- فایل‌ها و مستندات ---------- */
.cx-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cx-file {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm);
    color: var(--c-text); background: rgba(255, 255, 255, .03); border: 1px solid var(--c-line); overflow: hidden;
    transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.cx-file::before { content: ""; position: absolute; inset-block: 0; right: 0; width: 3px; background: var(--fc); opacity: .7; }
.cx-file:hover { border-color: color-mix(in srgb, var(--fc) 45%, transparent); background: color-mix(in srgb, var(--fc) 7%, rgba(255, 255, 255, .03)); }
.cx-file__icon { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; font-size: 30px; color: var(--fc); background: color-mix(in srgb, var(--fc) 14%, transparent); }
.cx-file__icon b { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: #fff; background: var(--fc); font-family: var(--mono); }
.cx-file__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-file__body strong { font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-file__body small { color: var(--c-muted); font-size: 12px; }
.cx-file__dl { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; color: #fff; background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); box-shadow: 0 8px 20px -8px var(--c-primary); transition: transform .3s var(--ease); }
.cx-file:hover .cx-file__dl { transform: translateY(2px); }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 1100px) {
    .cx-stats { grid-template-columns: repeat(3, 1fr); }
    .cx-gauges { grid-template-columns: repeat(2, 1fr); }
    .cx-cols--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .cx-hero, .cx-search { grid-template-columns: 1fr; }
    .cx-hero__visual { order: -1; max-width: 560px; margin: 0 auto; width: 100%; }
    .cx-search__visual { order: -1; }
    .cx-ids { grid-template-columns: repeat(2, 1fr); }
    .cx-quality { grid-template-columns: 1fr; }
    .cx-cols, .cx-cols--3, .cx-owner { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .cx-owner__side-in { position: static; padding: 0; }
    .cx-owner__side { padding: 18px 20px; }
    .cx-owner__side .cx-perks { overflow: visible; padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none; }
    .cx-top__center { display: none; }
    .cx-nav { top: 70px; }
    .cx-brand__divider, .cx-brand__divider + .cx-brand__text { display: none; }
}
@media (max-width: 600px) {
    body.cx { font-size: 14px; }
    .cx-app { width: calc(100% - 20px); padding-top: 16px; }
    .cx-ids, .cx-checks { grid-template-columns: 1fr; }
    .cx-stats { grid-template-columns: repeat(2, 1fr); }
    .cx-gauges { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cx-gauge__val { font-size: 20px; }
    .cx-idcard { grid-template-columns: 1fr; }
    .cx-idcard__qr { margin: 0 auto; }
    .cx-chip-btn span { display: none; }
    .cx-brand__text small { display: none; }
    .cx-brand__logo--sm { display: block; }
    .cx-brand__logo--lg { display: none; }
    .cx-float-tag { display: none; }
    .cx-kv__row dt { max-width: 55%; }
    .cx-owner .cx-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; filter: none; }
}
@media print {
    .cx-bg, .cx-top, .cx-nav, .cx-footer, .cx-copy, .cx-scroll-progress { display: none !important; }
    body.cx { background: #fff; color: #000; }
    .cx-glass { background: #fff; box-shadow: none; border-color: #ccc; }
    [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}