@font-face { font-family: Vazirmatn; src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Light theme (default) ─────────────────────────────────── */
:root {
    --bg-base: #eef2ff;
    --bg: #f4f6fc;
    --bg-gradient: linear-gradient(165deg, #eef2ff 0%, #f8fafc 42%, #ecfdf5 100%);
    --text: #1e293b;
    --hint: #64748b;
    --link: #4f46e5;
    --btn: #6366f1;
    --btn-text: #ffffff;
    --bg2: rgba(99, 102, 241, 0.06);
    --section-bg: #ffffff;
    --section-header: #475569;
    --border: #e2e8f0;
    --header-surface: rgba(255, 255, 255, 0.92);
    --nav-surface: rgba(255, 255, 255, 0.96);
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;
    --trust: #059669;
    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
    --glass: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(99, 102, 241, 0.14);
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --trust-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --wallet-gradient: linear-gradient(145deg, #4f46e5 0%, #7c3aed 45%, #6366f1 100%);
    --success-soft: rgba(5, 150, 105, 0.1);
    --warning-soft: rgba(217, 119, 6, 0.1);
    --danger-soft: rgba(220, 38, 38, 0.08);
    --info-soft: rgba(37, 99, 235, 0.08);
    --trust-soft: rgba(5, 150, 105, 0.1);
    --overlay: rgba(15, 23, 42, 0.45);
    --nav-fab-ring: #ffffff;
    --shimmer-mid: rgba(99, 102, 241, 0.08);
    --row-stripe: rgba(99, 102, 241, 0.03);
    --row-hover: rgba(99, 102, 241, 0.06);
    --modal-handle: rgba(15, 23, 42, 0.12);
    --mesh-1: rgba(99, 102, 241, 0.12);
    --mesh-2: rgba(16, 185, 129, 0.1);
    --mesh-3: rgba(139, 92, 246, 0.08);
    --selection-bg: #c7d2fe;
    --selection-fg: #1e293b;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --accent: var(--btn);
    --accent-rgb: 99, 102, 241;
    --header-h: 56px;
    --nav-h: 72px;
}

/* ── Dark theme ────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg-base: #151b26;
    --bg: #0f1419;
    --bg-gradient: linear-gradient(165deg, #0f1419 0%, #151b26 50%, #0d1117 100%);
    --text: #e7ecf3;
    --hint: #8b9cb3;
    --link: #93c5fd;
    --btn: #6366f1;
    --btn-text: #ffffff;
    --bg2: rgba(255, 255, 255, 0.06);
    --section-bg: #1a2230;
    --section-header: #a8b8d0;
    --border: #2a3548;
    --header-surface: rgba(21, 27, 38, 0.94);
    --nav-surface: rgba(21, 27, 38, 0.97);
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;
    --trust: #34d399;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    --glass: rgba(26, 34, 48, 0.92);
    --glass-border: rgba(255, 255, 255, 0.08);
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --trust-gradient: linear-gradient(135deg, #059669 0%, #34d399 100%);
    --wallet-gradient: linear-gradient(145deg, #4338ca 0%, #6d28d9 45%, #6366f1 100%);
    --success-soft: rgba(52, 211, 153, 0.14);
    --warning-soft: rgba(251, 191, 36, 0.12);
    --danger-soft: rgba(248, 113, 113, 0.12);
    --info-soft: rgba(96, 165, 250, 0.12);
    --trust-soft: rgba(52, 211, 153, 0.12);
    --overlay: rgba(0, 0, 0, 0.6);
    --nav-fab-ring: #151b26;
    --shimmer-mid: rgba(255, 255, 255, 0.06);
    --row-stripe: rgba(255, 255, 255, 0.02);
    --row-hover: rgba(255, 255, 255, 0.04);
    --modal-handle: rgba(255, 255, 255, 0.18);
    --mesh-1: rgba(99, 102, 241, 0.15);
    --mesh-2: rgba(52, 211, 153, 0.08);
    --mesh-3: rgba(139, 92, 246, 0.1);
    --selection-bg: #3730a3;
    --selection-fg: #f1f5f9;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

::selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
}

html {
    direction: rtl;
    font-family: Vazirmatn, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: auto;
    color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; }

html[dir="ltr"] {
    direction: ltr;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html[dir="ltr"] .text-ltr { direction: ltr; text-align: left; }

body {
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text);
    font-family: Vazirmatn, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    transition: background 0.35s var(--ease-smooth), color 0.25s;
}
body.admin-mode {
    padding-bottom: 16px;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 10% 0%, var(--mesh-1) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 90% 10%, var(--mesh-2) 0%, transparent 50%),
        radial-gradient(ellipse 50% 35% at 50% 100%, var(--mesh-3) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}
#header-root, #app, #nav-root { position: relative; z-index: 1; }
#app { min-height: calc(100dvh - var(--header-h) - var(--nav-h)); }
body.admin-mode #app { min-height: calc(100dvh - var(--header-h)); }

#conc-section, #conc-card { overflow-anchor: none; }

button, input, select, textarea {
    font-family: inherit;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--hint); }

a { color: var(--link); text-decoration: none; transition: opacity 0.15s; }
a:active { opacity: 0.7; }

h1, h2, h3 { font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

.text-hint { color: var(--hint); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-center { text-align: center; }
.text-ltr { direction: ltr; text-align: left; }

.page-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    flex-direction: column;
    gap: 12px;
}

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.2rem;
    background: var(--bg2);
    flex-shrink: 0;
}
.icon-circle-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg2);
    flex-shrink: 0;
}

.page-enter { animation: fadeInUp 0.3s var(--ease-out) both; }

.stagger > * {
    opacity: 0;
    animation: fadeInUp 0.35s var(--ease-out) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.02s; }
.stagger > *:nth-child(2) { animation-delay: 0.06s; }
.stagger > *:nth-child(3) { animation-delay: 0.1s; }
.stagger > *:nth-child(4) { animation-delay: 0.14s; }
.stagger > *:nth-child(5) { animation-delay: 0.18s; }
.stagger > *:nth-child(6) { animation-delay: 0.22s; }
.stagger > *:nth-child(7) { animation-delay: 0.26s; }
.stagger > *:nth-child(8) { animation-delay: 0.3s; }
.stagger > *:nth-child(9) { animation-delay: 0.34s; }
.stagger > *:nth-child(10) { animation-delay: 0.38s; }

:focus-visible {
    outline: 2px solid var(--btn);
    outline-offset: 2px;
    border-radius: 4px;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes shimmer {
    to { background-position: -200% 0; }
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes checkmark {
    0% { stroke-dashoffset: 24; }
    100% { stroke-dashoffset: 0; }
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes countUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ripple {
    to { transform: scale(2.5); opacity: 0; }
}
@keyframes progressBar {
    from { width: 100%; }
    to { width: 0%; }
}

/* Theme toggle */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bg2);
    border: 1px solid var(--glass-border);
    color: var(--hint);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
}
.theme-toggle:active {
    transform: scale(0.9);
    background: var(--section-bg);
    border-color: var(--btn);
    color: var(--btn);
}

.card {
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}