@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&family=Inter:wght@400;500;600;700;900&display=swap');

/* ==========================================================================
   DeepT frontend stylesheet
   --------------------------------------------------------------------------
   Architecture (layers, top to bottom):
     1. Fonts            — @import above (must stay the first statement)
     2. Design tokens    — :root + [data-theme="light"]; single source of truth
     3. Reset & base     — box model, html/body, typography roots, canvas layer
     4. Utilities        — direction helpers (.en)
     5. Buttons          — every button family and its states
     6. Forms & inputs   — labels, text inputs, selects, drop zones
     7. Header           — app header bar + landing header
     8. Landing sections — hero, sections, steps, date tool, CTA, footer
     9. Cards & panels   — feature cards, workspace panels, tables, tool box
   10.  Overlays & modals— overlay system, dialogs, auth, quick-start pipeline
   11. Feedback          — toast, inline errors, copy tooltip
   12. Animations        — keyframes only (+ reduced-motion guard)
   13. Responsive        — all breakpoints, consolidated
   14. Print             — invoice print-to-PDF rules (deliberate !important)

   Conventions:
   - Vazirmatn → all Persian/UI text (default body font).
   - Inter     → English-only data: dates, codes, formats (via .en or
                 explicitly LTR components).
   - Component state classes toggled by JS (.show, .open, .active, .done,
     .selected, .over, .drag-over) live next to their base component.
   - !important appears only in the print rules (required to force
     black-on-white output) and the reduced-motion guard (required to
     override all animations/transitions when the OS requests it).
   ========================================================================== */

/* ── 2. DESIGN TOKENS ─────────────────────────────────────────────────────
   Two namespaces coexist because index.html references both (inline styles
   and both component generations). Do NOT rename any token without updating
   index.html/app.js.
   "--app-*" style names (--bg-main, --card-surface, ...) belong to the
   workspace/app components; short names (--bg, --surface, ...) belong to
   the landing components. The single shared token is --accent (plus its
   derivatives), whose effective value is the landing one below -- the
   earlier duplicate definition was fully overridden in the cascade and is
   intentionally not repeated here. */
:root {
    /* App / workspace namespace */
    --bg-main: #262624;
    --bg-secondary: #262624;
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --panel-bg: rgba(0, 0, 0, 0.75);
    --accent: #00d4ff;
    /* Big buttons only (hero CTA + app nav pills) — everything else keeps
       the original neon-cyan --accent above, unchanged from before this
       round of theme work. */
    --accent-gradient: linear-gradient(135deg, #4338ca 0%, #2563eb 100%);
    --accent-gradient-glow: rgba(37,99,235,0.32);
    --accent-gradient-hover: rgba(37,99,235,0.14);
    --accent-gradient-shadow: 0 8px 24px rgba(37,99,235,0.20);
    --accent-glow: rgba(0, 255, 255, 0.25);
    --accent-hover: rgba(0, 255, 255, 0.15);
    --card-surface: rgba(18, 18, 18, 0.9);
    --card-surface-solid: #121212;
    --border-color: rgba(0, 255, 255, 0.28);
    --border-subtle: rgba(255,255,255,0.07);
    --input-bg: #000;
    --input-border: #2a2a2a;
    --shadow-accent: 0 0 30px rgba(0,255,255,0.15);
    --node-color: cyan;
    --node-line: rgba(0,255,255,1);
    --canvas-opacity: 0.8;
    --header-bg: rgba(0,0,0,0.85);
    --table-header-text: rgba(255,255,255,0.5);
    --row-hover: rgba(0,255,255,0.04);
    --divider: rgba(255,255,255,0.06);
    --btn-text-on-accent: #000;
    --modal-overlay: rgba(0,0,0,0.85);
    --toast-bg: #111;
    --toast-border: rgba(0,255,255,0.4);

    /* Landing namespace */
    --bg:          #0c0c0e;
    --bg2:         #111114;
    --surface:     rgba(255,255,255,0.04);
    --surface2:    rgba(255,255,255,0.08);
    --border:      rgba(255,255,255,0.08);
    --border2:     rgba(255,255,255,0.15);
    --text:        #f0f0f2;
    --muted:       #888899;
    --accent-dim:  rgba(0,212,255,0.12);
    --accent-btn:  #000000;
    --modal-bg:    rgba(0,0,0,0.82);
    --logo-filter: invert(1);
}

/* ── LIGHT THEME (both namespaces; effective --accent is #0072a8) ── */
[data-theme="light"] {
    --bg-main: #f0f4f8;
    --bg-secondary: #e8edf2;
    --text-main: #0d1b2a;
    --text-muted: #5a6a7a;
    --panel-bg: rgba(255,255,255,0.92);
    --accent-glow: rgba(3,105,161,0.18);
    --accent-hover: rgba(3,105,161,0.08);
    --card-surface: #ffffff;
    --card-surface-solid: #ffffff;
    --border-color: rgba(3,105,161,0.25);
    --border-subtle: rgba(0,0,0,0.07);
    --input-bg: #f8fafc;
    --input-border: #cbd5e1;
    --shadow-accent: 0 4px 24px rgba(3,105,161,0.12);
    --node-color: #0369a1;
    --node-line: rgba(3,105,161,1);
    --canvas-opacity: 0.12;
    --header-bg: rgba(240,244,248,0.92);
    --table-header-text: #64748b;
    --row-hover: rgba(3,105,161,0.04);
    --divider: rgba(0,0,0,0.08);
    --btn-text-on-accent: #fff;
    --modal-overlay: rgba(15,27,42,0.7);
    --toast-bg: #fff;
    --toast-border: rgba(3,105,161,0.35);

    --bg:          #f4f6fb;
    --bg2:         #eceef5;
    --surface:     rgba(0,0,0,0.03);
    --surface2:    rgba(0,0,0,0.06);
    --border:      rgba(0,0,0,0.08);
    --border2:     rgba(0,0,0,0.15);
    --text:        #0f0f1a;
    --muted:       #5c5c72;
    --accent:      #0072a8;
    --accent-gradient: var(--accent);
    --accent-gradient-glow: var(--accent-glow);
    --accent-gradient-hover: var(--accent-hover);
    --accent-gradient-shadow: var(--shadow-accent);
    --accent-dim:  rgba(0,114,168,0.10);
    --accent-btn:  #ffffff;
    --modal-bg:    rgba(15,15,26,0.75);
    --logo-filter: invert(0);
}

/* ── 3. RESET & BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Vazirmatn', sans-serif;
    margin: 0;
    background-color: var(--bg-main);
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.75;
    transition: background .3s, color .3s;
}

/* Global type defaults (app views rely on these; landing components
   override them in their own scope where needed). */
h2 {
    font-weight: 700;
    font-size: 1.9rem;
    margin-bottom: 0.9rem;
    text-align: center;
    color: var(--text-main);
}
p {
    font-size: 1.1rem;
    line-height: 1.85rem;
    text-align: center;
    margin-bottom: 0.9rem;
    color: var(--text-main);
}

/* Everything above canvas */
header, main, footer, .overlay { position: relative; z-index: 1; }
#landingPage { display: block; }

/* Faint grid backdrop behind the whole page (theme-aware) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
[data-theme="light"] body::before {
    background-image:
        linear-gradient(rgba(0,114,168,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,114,168,0.05) 1px, transparent 1px);
}

/* ── 4. UTILITIES ───────────────────────────────────────────────────────── */
/* English-only data text (dates, IDs, format codes) */
.en {
    font-family: 'Inter', system-ui, sans-serif;
    direction: ltr;
    unicode-bidi: embed;
}

/* ── 5. BUTTONS ─────────────────────────────────────────────────────────── */
/* Legacy large pill button (used by JS-generated markup). */
.btn {
    background: var(--text-main);
    color: var(--bg-main);
    padding: 1.1rem 2.75rem;
    font-size: 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    transition: background 0.25s, box-shadow 0.25s, color 0.25s;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary {
    padding: .8rem 2rem;
    border-radius: .7rem;
    font-size: .98rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: var(--accent-gradient-shadow);
    transition: .2s;
    font-family: 'Vazirmatn', sans-serif;
    text-decoration: none;
    display: inline-block;
}
.btn-primary:hover, .btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 10px 28px var(--accent-gradient-glow), 0 2px 10px rgba(0,0,0,.18);
}
.btn-primary:hover { opacity: 1; transform: translateY(-1px); }

/* Small header/toolbar buttons */
.btn-ghost {
    padding: .42rem .9rem; border-radius: .6rem; font-size: .82rem; font-weight: 600;
    cursor: pointer; border: 1px solid var(--border2); background: transparent;
    color: var(--text); transition: .2s; font-family: 'Vazirmatn', sans-serif;
    text-decoration: none; display: inline-block;
}
.btn-ghost:hover { background: var(--surface2); }

.btn-accent {
    padding: .45rem 1.1rem; border-radius: .6rem; font-size: .82rem; font-weight: 700;
    cursor: pointer; border: none; background: var(--accent); color: var(--accent-btn);
    transition: .2s; font-family: 'Vazirmatn', sans-serif;
}
.btn-accent:hover { opacity: .85; }

.theme-btn {
    width: 34px; height: 34px; border-radius: .55rem;
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: .2s;
}
.theme-btn:hover { background: var(--surface2); }

/* Full-width form/modal submit buttons */
.tool-btn {
    width: 100%; padding: .72rem; border-radius: .7rem;
    font-size: .95rem; font-weight: 700; cursor: pointer; border: none;
    background: var(--accent); color: var(--accent-btn);
    font-family: 'Vazirmatn', sans-serif; transition: .2s;
}
.tool-btn:hover { opacity: .87; }

.modal-btn {
    width: 100%; padding: .78rem; border-radius: .7rem;
    font-size: .95rem; font-weight: 700; cursor: pointer; border: none;
    background: var(--accent); color: var(--accent-btn);
    font-family: 'Vazirmatn', sans-serif; transition: .2s; margin-top: .2rem;
}
.modal-btn:hover { opacity: .87; }

.pricing-btn {
    width: 100%; padding: .75rem; border-radius: .75rem;
    font-size: .95rem; font-weight: 700; cursor: pointer;
    font-family: 'Vazirmatn', sans-serif; transition: .2s;
}
.pricing-btn-primary { border: none; background: var(--accent); color: var(--accent-btn); }
.pricing-btn-primary:hover { opacity: .87; }

/* ── 6. FORMS & INPUTS ──────────────────────────────────────────────────── */
.auth-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.auth-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    color: var(--accent);
    outline: none;
    font-family: 'Vazirmatn', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
}
/* Email/password inputs are LTR English — override font there only */
.auth-input[type="email"],
.auth-input[type="password"] {
    font-family: 'Inter', system-ui, sans-serif;
}
.auth-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

.field-label { display: block; font-size: .77rem; color: var(--muted); font-weight: 600; margin-bottom: .35rem; }
.field-input {
    width: 100%; padding: .62rem .85rem; border-radius: .6rem;
    border: 1px solid var(--border2); background: var(--bg2);
    color: var(--text); font-family: 'Vazirmatn', sans-serif;
    font-size: .92rem; outline: none; transition: border-color .2s;
}
.field-input:focus { border-color: var(--accent); }
.field-input option { background: var(--bg2); }

.converter-input {
    background: var(--input-bg);
    border: 1px solid var(--accent);
    color: var(--accent);
    text-align: center;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.15rem;
    transition: box-shadow 0.2s, border-color 0.2s;
    padding: 0.75rem;
    border-radius: 0.6rem;
    width: 100%;
}
.converter-input:focus {
    outline: none;
    box-shadow: 0 0 14px var(--accent-glow);
    border-color: var(--accent);
}
select.converter-input option {
    background: var(--input-bg);
    color: var(--text-main);
}

.modal-input {
    width: 100%; padding: .65rem .85rem; border-radius: .6rem;
    border: 1px solid var(--border2); background: var(--bg);
    color: var(--text); font-size: .9rem; outline: none;
    transition: border-color .2s; margin-bottom: .9rem;
    font-family: 'Inter', sans-serif; direction: ltr;
}
.modal-input.fa { font-family: 'Vazirmatn', sans-serif; direction: rtl; }
.modal-input:focus { border-color: var(--accent); }
.modal label { display: block; font-size: .76rem; color: var(--muted); font-weight: 600; margin-bottom: .3rem; }

/* Password input with show/hide toggle (eye) */
.password-wrap { position: relative; margin-bottom: .9rem; }
.password-wrap .modal-input { padding-right: 2.6rem; margin-bottom: 0; }
.password-toggle {
    position: absolute; top: 50%; transform: translateY(-50%);
    right: .7rem; border: none; background: none; cursor: pointer;
    color: var(--muted); padding: .2rem; line-height: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .2s;
}
.password-toggle:hover { color: var(--accent); }
.password-toggle .eye-off { display: none; }
.password-toggle.showing .eye-open { display: none; }
.password-toggle.showing .eye-off { display: inline; }

/* File drop zones */
.drop-zone-chat {
    border: 2px dashed var(--border-color);
    background: var(--bg-main);
    transition: all 0.2s ease-in-out;
    border-radius: 0.75rem;
}
.drop-zone-chat.drag-over {
    border-color: var(--accent);
    background: var(--accent-hover);
}
.qs-drop {
    border: 2px dashed var(--border2); border-radius: 1rem;
    padding: 2rem; text-align: center; cursor: pointer;
    transition: .2s; margin-bottom: 1rem;
}
.qs-drop:hover, .qs-drop.over { border-color: var(--accent); background: var(--accent-dim); }
.qs-drop-icon  { font-size: 2rem; margin-bottom: .4rem; }
.qs-drop-text  { font-size: .85rem; color: var(--muted); }
.qs-file-name  { font-size: .82rem; color: var(--accent); font-weight: 700; margin-top: .3rem; display: none; }

/* Document-phrase token chips: a {{token}} placeholder for real document
   data, rendered as a single non-typeable unit inside an editable field --
   never raw "{{...}}" text a translator could hand-edit into something
   malformed. Chips are created by app.js (dp* helpers). */
.dp-token-editor {
    min-height: 4.4rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    cursor: text;
}
.dp-token-editor:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}
.dp-token-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(52,199,89,.14);
    color: #34c759;
    border: 1px solid rgba(52,199,89,.4);
    border-radius: 5px;
    padding: 0 4px;
    margin: 0 1px;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    user-select: none;
    white-space: nowrap;
}
.dp-token-x {
    cursor: pointer;
    opacity: 0.65;
    font-weight: 800;
    padding: 0 1px;
}
.dp-token-x:hover { opacity: 1; }

/* ── 7. HEADER ──────────────────────────────────────────────────────────── */
/* App header bar (workspace views) */
.header-bar {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: background 0.35s, border-color 0.35s;
}
.header-btn {
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    color: var(--accent);
    padding: 0.45rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    display: flex; align-items: center; gap: 0.35rem;
    white-space: nowrap;
}
.header-btn:hover {
    border-color: var(--accent);
    background: var(--accent-hover);
}
.header-btn-auth {
    color: var(--text-main);
    border-color: var(--border-subtle);
}
.header-btn-auth:hover {
    border-color: var(--text-main);
    color: var(--text-main);
}
.header-btn-logout {
    color: #f87171;
    border-color: rgba(248,113,113,0.3);
}
.header-btn-logout:hover {
    border-color: #f87171;
    background: rgba(248,113,113,0.1);
    color: #f87171;
}

/* Nav destination buttons inside the header-bar -- icon+label stacked,
   laid out horizontally in the header's own row (previously a duplicate
   fixed vertical rail pinned to the RTL edge; consolidated into this one
   toolbar, keeping this look since it read as the more modern of the two). */
.side-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-width: 56px;
    flex-shrink: 0;
    padding: .4rem .3rem;
    border-radius: .65rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .2s, color .2s;
}
.side-rail-btn:hover {
    background: var(--accent-hover);
    color: var(--accent);
}
.side-rail-icon {
    width: 20px;
    height: 20px;
}
.side-rail-label {
    font-size: .58rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 901px) {
    #workspaceDashboard,
    #clientsWorkspace,
    #workSchedulePage,
    #settingsPage,
    #myPriceListPage,
    #clientProfilePage,
    #adminDashboard,
    #homePanelsPage {
        padding-right: calc(2rem + 66px);
    }
}

/* صفحه نخست -- round-corner feature cards, built on .workspace-panel's
   existing card look so this view reads as part of the same app. */
.home-panel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    cursor: pointer;
    transition: transform .15s, border-color .2s;
}
.home-panel-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}
.home-panel-icon {
    width: 30px;
    height: 30px;
    color: var(--accent);
}
.home-panel-title {
    font-weight: 900;
    font-size: .9rem;
    color: var(--text-main);
}
.home-panel-desc {
    font-size: .72rem;
    color: var(--text-muted);
}

/* Landing header */
header {
    position: fixed; top: 0; right: 0; left: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2.5rem; height: 76px;
    background: rgba(12,12,14,0.88);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    transition: background .3s, border-color .3s;
}
[data-theme="light"] header { background: rgba(244,246,251,0.92); }
.header-wordmark {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .18em;
    color: var(--text);
    text-decoration: none;
    transition: color .2s;
}
.header-wordmark:hover { color: var(--accent); }
.header-nav { display: flex; align-items: center; gap: .6rem; }

/* ── 8. LANDING SECTIONS ────────────────────────────────────────────────── */
.section { max-width: 1040px; margin: 0 auto; padding: 5rem 1.5rem; }
.section-label {
    text-align: center; font-size: .75rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent); margin-bottom: .6rem;
}
.section-title {
    text-align: center; font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 900; color: var(--text); margin-bottom: .9rem;
}
.section-sub {
    text-align: center; color: var(--muted); font-size: .97rem;
    max-width: 480px; margin: 0 auto 3rem; line-height: 1.8;
}

/* Hero */
.hero-logo-wrap { margin-bottom: 1.5rem; }
.hero-logo {
    width: clamp(300px, 34vw, 480px);
    height: auto;
    filter: var(--logo-filter);
    transition: filter .3s;
    display: block;
    margin: 0 auto;
}
.hero {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 7rem 1.5rem 5rem;
}
.hero h1 {
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 900; line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--text); margin-bottom: 1.25rem;
}
.hero h1 span { color: var(--accent); }
.hero-sub {
    font-size: clamp(.95rem, 2vw, 1.15rem);
    color: var(--muted);
    max-width: 540px; margin: 0 auto 2.5rem;
    line-height: 1.85;
}
.hero-cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* How-it-works steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 1.25rem; }
.step-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 1.25rem; padding: 1.75rem 1.5rem;
    transition: border-color .2s, background .2s;
}
.step-card:hover { border-color: var(--border2); background: var(--surface2); }
.step-num {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent-dim); border: 1px solid rgba(0,212,255,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 900; color: var(--accent);
    margin-bottom: 1.1rem;
}
[data-theme="light"] .step-num { border-color: rgba(0,114,168,.3); }
.step-card h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .45rem; }
.step-card p  { font-size: .88rem; color: var(--muted); line-height: 1.75; }

/* Date converter tool */
.tool-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 1.5rem; padding: 2.25rem;
    max-width: 660px; margin: 0 auto;
}
.input-row { display: grid; grid-template-columns: 1fr 1.5fr 1.2fr; gap: 1rem; margin-bottom: 1.1rem; }
.result-box {
    margin-top: 1.4rem; padding: 1.4rem; border-radius: 1rem;
    border: 1px solid var(--border2); background: var(--bg2); display: none;
}
.result-box.show { display: block; }
.result-main {
    font-family: 'Inter', sans-serif; font-size: 1.9rem;
    font-weight: 900; color: var(--accent);
    direction: ltr; text-align: center; margin-bottom: 1rem;
}
.fmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.fmt-btn {
    padding: .7rem .9rem; border-radius: .7rem;
    border: 1px solid var(--border2); background: transparent;
    color: var(--text); cursor: pointer; position: relative;
    text-align: left; direction: ltr; transition: .2s;
    font-family: 'Inter', sans-serif;
}
.fmt-btn:hover { background: var(--surface2); border-color: var(--accent); }
.fmt-btn:active { transform: scale(0.97); }
.fmt-label { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: .2rem; }
.fmt-value { font-size: .95rem; font-weight: 700; color: var(--accent); }

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 860px;
    margin: 0 auto;
}
.pricing-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 2rem 1.75rem;
    transition: border-color .2s, background .2s;
    position: relative;
}
.pricing-card:hover { border-color: var(--border2); background: var(--surface2); }
.pricing-card.featured { border-color: var(--accent); background: var(--accent-dim); }
.pricing-badge {
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: var(--accent-btn);
    font-size: .72rem; font-weight: 700; padding: .2rem .9rem;
    border-radius: 0 0 .6rem .6rem; white-space: nowrap;
}
.pricing-title { font-size: 1.1rem; font-weight: 900; color: var(--text); margin-bottom: .4rem; }
.pricing-price-row {
    display: flex; align-items: center; gap: .6rem;
    margin-top: .75rem; direction: ltr; justify-content: flex-end;
}
.pricing-price-old {
    font-family: 'Inter', sans-serif;
    font-size: 1rem; font-weight: 700; color: var(--muted);
    text-decoration: line-through;
}
.pricing-discount-badge {
    background: var(--accent); color: var(--accent-btn);
    font-size: .72rem; font-weight: 700; padding: .15rem .55rem;
    border-radius: .5rem; white-space: nowrap;
}
.pricing-price {
    font-family: 'Inter', sans-serif;
    font-size: 2.2rem; font-weight: 900; color: var(--accent);
    margin: .25rem 0 .25rem; direction: ltr; text-align: right;
}
.pricing-price span { font-size: .9rem; font-weight: 500; color: var(--muted); }
.pricing-sub { font-size: .83rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.7; }
.pricing-features { list-style: none; margin-bottom: 1.75rem; }
.pricing-features li {
    font-size: .88rem; color: var(--text);
    padding: .3rem 0; display: flex; align-items: center; gap: .5rem;
}
.pricing-features li::before { content: "✓"; color: var(--accent); font-weight: 900; flex-shrink: 0; }

/* CTA band */
.cta-band {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 4.5rem 1.5rem; text-align: center;
    background: var(--accent-dim);
}
.cta-band h2 { font-size: clamp(1.5rem,4vw,2.2rem); font-weight: 900; color: var(--text); margin-bottom: .75rem; }
.cta-band p  { color: var(--muted); margin-bottom: 2rem; font-size: .97rem; }

/* Footer */
footer {
    border-top: 1px solid var(--border);
    padding: 2rem 2rem;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.copy { font-size: .8rem; color: var(--muted); }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: .8rem; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--text); }

/* ── 9. CARDS & PANELS ──────────────────────────────────────────────────── */
.feature {
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    padding: 1.6rem;
    border-radius: 1.1rem;
    margin: 1rem 0;
    text-align: center;
    transition: box-shadow 0.25s;
}
.feature:hover { box-shadow: var(--shadow-accent); }
.feature h3 { font-weight: 700; font-size: 1.45rem; margin-bottom: 0.5rem; color: var(--text-main); }
.feature p  { font-size: 1.05rem; color: var(--text-muted); }

.workspace-panel {
    background: var(--card-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 1.2rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
    transition: background 0.35s, border-color 0.35s;
}
.workspace-panel:hover {
    border-color: var(--border-color);
}
.ws-table th {
    color: var(--table-header-text);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding-bottom: 0.75rem;
    padding-top: 0.5rem;
    font-family: 'Vazirmatn', sans-serif;
}
.ws-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--divider);
}
.ws-table tr:hover td {
    background: var(--row-hover);
}

/* Chat / translation surface -- DeepT Engine, the actual translation
   pipeline and the app's main tool, so it gets a fully solid background
   (--bg-secondary, not the translucent --card-surface every smaller
   dialog uses) rather than looking like just another lightweight popup. */
.chat-window {
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 48px rgba(0,0,0,0.45), 0 0 32px var(--accent-glow);
    background: var(--bg-secondary);
    transition: background 0.35s, border-color 0.35s;
}

/* ── 10. OVERLAYS & MODALS ─────────────────────────────────────────────── */
/* Every newer dialog (chatModal, addClientModal, saveClientModal, the
   نرخنامه reprice/bulk-increase modals, etc.) is built as
   `class="modal-overlay fixed inset-0 z-* hidden flex ..."` -- Tailwind
   utilities handle its position/hide-show, but nothing anywhere ever gave
   the wrapper itself a dimmed/blurred backdrop the way the older .overlay
   system (below) has always had, so the dashboard behind any of these
   dialogs stayed in plain view. One rule fixes every one of them. */
.modal-overlay {
    background: var(--modal-overlay, rgba(0, 0, 0, 0.7));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;

    background: var(--modal-overlay, rgba(0, 0, 0, 0.7));

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.overlay.open {
    display: flex;
}

.overlay .modal {
    position: relative;
    width: 100%;
    max-width: 420px;

    padding: 2.25rem;

    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 1.5rem;

    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45);
}

.modal {
    background: var(--bg2); border: 1px solid var(--border2);
    border-radius: 1.5rem; padding: 2.25rem;
    width: 100%; max-width: 400px; position: relative;
    box-shadow: 0 32px 64px rgba(0,0,0,.45);
}
.modal-close {
    position: absolute; top: 1.1rem; left: 1.1rem;
    background: var(--surface2); border: none; border-radius: .5rem;
    padding: .28rem .6rem; cursor: pointer; color: var(--muted);
    font-size: .78rem; font-family: 'Vazirmatn', sans-serif; transition: .2s;
}
.modal-close:hover { color: var(--text); }
.modal h2 { font-size: 1.25rem; font-weight: 900; color: var(--text); margin-bottom: .3rem; }
.modal-sub { font-size: .83rem; color: var(--muted); margin-bottom: 1.6rem; }

.modal-switch { text-align: center; margin-top: 1.1rem; font-size: .82rem; color: var(--muted); }
.modal-switch a { color: var(--accent); cursor: pointer; font-weight: 600; }
.modal-switch a:hover { text-decoration: underline; }

.modal-forgot { text-align: left; margin-top: .65rem; font-size: .8rem; }
.modal-forgot a { color: var(--muted); cursor: pointer; font-weight: 600; }
.modal-forgot a:hover { color: var(--accent); text-decoration: underline; }

/* Logout confirm popup */
#logoutConfirm {
    background: var(--card-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}

/* Quick-start pipeline modal */
.qs-modal { max-width: 560px; max-height: 90vh; overflow-y: auto; }
.qs-progress {
    display: flex; align-items: center; gap: 0;
    margin-bottom: 1.75rem;
}
.qs-prog-step {
    display: flex; flex-direction: column; align-items: center; flex: 1;
}
.qs-prog-dot {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--border2); background: var(--bg2);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 900; color: var(--muted);
    transition: .3s; position: relative; z-index: 1;
}
.qs-prog-dot.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.qs-prog-dot.done   { border-color: var(--accent); background: var(--accent); color: var(--accent-btn); }
.qs-prog-label { font-size: .68rem; color: var(--muted); margin-top: .3rem; text-align: center; }
.qs-prog-line {
    flex: 1; height: 2px; background: var(--border2);
    margin-top: -15px; transition: background .3s;
}
.qs-prog-line.done { background: var(--accent); }

.qs-panel { display: none; }
.qs-panel.active { display: block; }

.qs-mode-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; margin-bottom: 1.1rem; }
.qs-mode-btn {
    border: 1px solid var(--border2); border-radius: .85rem;
    padding: .85rem .6rem; text-align: center; cursor: pointer;
    background: transparent; color: var(--text); transition: .2s;
    font-family: 'Vazirmatn', sans-serif;
}
.qs-mode-btn:hover, .qs-mode-btn.selected {
    border-color: var(--accent); background: var(--accent-dim);
}
.qs-mode-icon { font-size: 1.4rem; display: block; margin-bottom: .3rem; }
.qs-mode-label { font-size: .78rem; font-weight: 700; color: var(--text); }
.qs-mode-sub   { font-size: .68rem; color: var(--muted); margin-top: .15rem; }

.qs-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: 1rem; }

.qs-pay-box {
    background: var(--accent-dim); border: 1px solid rgba(0,212,255,.25);
    border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.1rem; text-align: center;
}
.qs-pay-old {
    font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 700;
    color: var(--muted); text-decoration: line-through; direction: ltr;
}
.qs-pay-amount {
    font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 900;
    color: var(--accent); direction: ltr;
}
.qs-pay-label { font-size: .82rem; color: var(--muted); margin-top: .2rem; }

.qs-nav { display: flex; gap: .65rem; margin-top: 1.1rem; }
.qs-btn-back {
    flex: 1; padding: .7rem; border-radius: .7rem; font-size: .9rem; font-weight: 700;
    cursor: pointer; border: 1px solid var(--border2); background: transparent;
    color: var(--text); font-family: 'Vazirmatn', sans-serif; transition: .2s;
}
.qs-btn-back:hover { background: var(--surface2); }
.qs-btn-next {
    flex: 2; padding: .7rem; border-radius: .7rem; font-size: .9rem; font-weight: 700;
    cursor: pointer; border: none; background: var(--accent); color: var(--accent-btn);
    font-family: 'Vazirmatn', sans-serif; transition: .2s;
}
.qs-btn-next:hover { opacity: .87; }
.qs-btn-next:disabled { opacity: .35; cursor: not-allowed; }

.qs-processing {
    display: none; text-align: center; padding: 1.5rem 0;
}
.qs-processing.show { display: block; }
.qs-proc-svg { width: 72px; height: 72px; margin: 0 auto 1rem; }
.qs-proc-d-outer {
    fill: none; stroke: var(--accent); stroke-width: 5;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 520; stroke-dashoffset: 520;
    animation: qsDraw 1.8s cubic-bezier(.4,0,.2,1) infinite;
    filter: drop-shadow(0 0 5px var(--accent));
}
.qs-proc-d-inner {
    fill: none; stroke: var(--accent); stroke-width: 3.5;
    stroke-linecap: round; stroke-linejoin: round; opacity: .55;
    stroke-dasharray: 360; stroke-dashoffset: 360;
    animation: qsDraw 1.6s cubic-bezier(.4,0,.2,1) .5s infinite;
}
.qs-proc-text { font-size: .88rem; color: var(--muted); }

/* ── 11. FEEDBACK ───────────────────────────────────────────────────────── */
#toast {
    position: fixed; bottom: 1.5rem; left: 50%;
    transform: translateX(-50%) translateY(60px);
    background: var(--bg2); border: 1px solid var(--border2);
    color: var(--accent); padding: .62rem 1.4rem; border-radius: 2rem;
    font-size: .86rem; font-weight: 700; z-index: 999;
    opacity: 0; transition: opacity .3s ease, transform .3s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.error-msg { color: #f87171; font-size: .83rem; margin-top: .65rem; display: none; }
.error-msg.show { display: block; }
.modal-error { color: #f87171; font-size: .8rem; margin-bottom: .65rem; display: none; }
.modal-error.show { display: block; }
.modal-success { text-align: center; padding: 1.25rem 0; display: none; }
.modal-success.show { display: block; }
.modal-success .icon { font-size: 2.75rem; margin-bottom: .75rem; }
.modal-success strong { font-size: 1.05rem; color: var(--text); }
.modal-success p { color: var(--muted); font-size: .85rem; margin-top: .4rem; line-height: 1.7; }

/* Click-to-copy tooltip on date-converter format buttons (toggled by app.js) */
.fmt-copied {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: var(--accent-btn);
    font-size: .68rem; font-weight: 700; padding: .18rem .5rem;
    border-radius: .35rem; white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .2s;
}
.fmt-copied.show { opacity: 1; }

/* ── 12. ANIMATIONS ─────────────────────────────────────────────────────── */
@keyframes qsDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    /* Accessibility: honor the OS motion preference. No visual change for
       anyone else; animations simply complete instantly. */
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}

/* ── 13. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .input-row { grid-template-columns: 1fr; }
    .fmt-grid  { grid-template-columns: 1fr; }
    header { padding: 0 1rem; }
    .nav-links { display: none; }
    footer { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; }
}

/* ── 14. PRINT (invoice save-as-PDF) ──────────────────────────────────────
   The browser's own print dialog is the "PDF generator" here (every browser
   can print-to-PDF), so nothing is rendered server-side -- only the invoice
   sheet shows on paper; app chrome (nav, overlay backdrop, buttons) hides.
   A signable document handed to the translator's own client, so it prints
   plain black-on-white with solid ruled table borders regardless of theme. */
@media print {
    body > *:not(#invoiceViewModal) { display: none !important; }
    #invoiceViewModal { position: static !important; display: block !important; background: #fff !important; z-index: auto !important; }
    #invoiceViewModal > div { max-width: none !important; max-height: none !important; box-shadow: none !important; border: none !important; overflow: visible !important; background: #fff !important; }
    #invoiceViewModal .no-print { display: none !important; }
    #iv-sheet, #iv-sheet * { color: #000 !important; background: #fff !important; border-color: #000 !important; }
    #iv-sheet table, #iv-sheet th, #iv-sheet td { border: 1px solid #000 !important; }
}