/* ==========================================================================
   SSM Office Automation - Unified Design System
   Shared Bootstrap 5 tokens and component rules for all active screens.
   ========================================================================== */

:root {
    --oa-font-family: Vazir, Vazirmatn, Tahoma, Arial, sans-serif;
    --oa-space-1: 4px;
    --oa-space-2: 8px;
    --oa-space-3: 12px;
    --oa-space-4: 16px;
    --oa-space-5: 24px;
    --oa-space-6: 32px;

    --oa-radius-control: 10px;
    --oa-radius-card: 16px;
    --oa-radius-modal: 22px;

    --oa-focus-ring: 0 0 0 0.22rem var(--oa-brand-glow);
    --oa-transition-fast: 150ms ease;
    --oa-transition-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

html,
body {
    font-family: var(--oa-font-family) !important;
}

.oa-page {
    min-height: 100vh;
    background: var(--oa-bg);
    color: var(--oa-ink);
}

.oa-surface,
.oa-card,
.card.oa-card {
    background: var(--oa-surface);
    border: 1px solid var(--oa-line);
    border-radius: var(--oa-radius-card);
    box-shadow: var(--oa-shadow-card);
    color: var(--oa-ink);
}

.oa-card:hover {
    box-shadow: var(--oa-shadow-card-hover);
}

.oa-section-title {
    color: var(--oa-ink);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.oa-section-subtitle {
    color: var(--oa-ink-soft);
    font-size: 0.84rem;
    margin: var(--oa-space-1) 0 0;
}

/* Bootstrap controls */
.btn {
    border-radius: var(--oa-radius-control);
    font-family: var(--oa-font-family);
    font-weight: 700;
    transition: transform var(--oa-transition-fast), box-shadow var(--oa-transition-fast), background-color var(--oa-transition-fast), border-color var(--oa-transition-fast);
}

.btn:not(:disabled):hover {
    transform: translateY(-1px);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--oa-focus-ring) !important;
}

.btn-primary {
    --bs-btn-bg: var(--oa-brand);
    --bs-btn-border-color: var(--oa-brand);
    --bs-btn-hover-bg: var(--oa-brand-hover);
    --bs-btn-hover-border-color: var(--oa-brand-hover);
    --bs-btn-active-bg: var(--oa-brand-strong);
    --bs-btn-active-border-color: var(--oa-brand-strong);
}

.btn-success {
    --bs-btn-bg: var(--oa-success);
    --bs-btn-border-color: var(--oa-success);
    --bs-btn-hover-bg: var(--oa-success-hover);
    --bs-btn-hover-border-color: var(--oa-success-hover);
}

.form-label {
    color: var(--oa-ink-soft) !important;
    font-weight: 700 !important;
}

.form-control,
.form-select {
    min-height: 42px;
    font-family: var(--oa-font-family);
    color: var(--oa-ink);
    background: var(--oa-surface);
    border-color: var(--oa-line);
    border-radius: var(--oa-radius-control);
    transition: border-color var(--oa-transition-fast), box-shadow var(--oa-transition-fast), background-color var(--oa-transition-fast);
}

.form-control::placeholder {
    color: var(--oa-ink-faint);
}

.form-control:focus,
.form-select:focus {
    color: var(--oa-ink);
    background: var(--oa-surface);
    border-color: var(--oa-brand);
    box-shadow: var(--oa-focus-ring);
}

.badge {
    font-family: var(--oa-font-family);
    font-weight: 700;
}

.oa-status-success { background: var(--oa-success-soft); color: var(--oa-success); border: 1px solid color-mix(in srgb, var(--oa-success) 25%, transparent); }
.oa-status-warning { background: var(--oa-warning-soft); color: var(--oa-warning-hover); border: 1px solid color-mix(in srgb, var(--oa-warning) 25%, transparent); }
.oa-status-danger { background: var(--oa-danger-soft); color: var(--oa-danger); border: 1px solid color-mix(in srgb, var(--oa-danger) 25%, transparent); }
.oa-status-info { background: var(--oa-brand-soft); color: var(--oa-brand); border: 1px solid color-mix(in srgb, var(--oa-brand) 25%, transparent); }

/* Shared overlays and modal panels */
.oa-modal-panel {
    background: var(--oa-surface);
    color: var(--oa-ink);
    border: 1px solid var(--oa-line-strong);
    border-radius: var(--oa-radius-modal);
    box-shadow: var(--oa-shadow-modal);
}

.oa-divider {
    height: 1px;
    border: 0;
    background: var(--oa-line);
    margin: var(--oa-space-4) 0;
}

/* --------------------------------------------------------------------------
   Visible Product Shell Overrides
   Loaded after legacy and refresh styles; intentionally uses !important.
   -------------------------------------------------------------------------- */
body.theme-light .sidebar,
body.theme-dark .sidebar {
    background: var(--oa-surface) !important;
    border-left-color: var(--oa-line) !important;
    box-shadow: 12px 0 34px rgba(15, 23, 42, 0.07) !important;
}

.sidebar-header {
    padding: 22px 20px 18px !important;
    background: linear-gradient(145deg, var(--oa-surface), var(--oa-surface-soft)) !important;
}

.brand-mark {
    border-radius: 14px !important;
    background: var(--oa-brand-gradient) !important;
    box-shadow: 0 8px 18px var(--oa-brand-glow) !important;
}

.sidebar-menu .menu-item {
    margin: 2px 8px !important;
    border-radius: 10px !important;
    color: var(--oa-ink-soft) !important;
    border: 1px solid transparent !important;
}

.sidebar-menu .menu-item:hover {
    background: var(--oa-surface-soft) !important;
    color: var(--oa-brand) !important;
    border-color: var(--oa-line) !important;
    transform: none !important;
}

.sidebar-menu .menu-item.active {
    color: var(--oa-brand) !important;
    background: var(--oa-brand-soft) !important;
    border-color: color-mix(in srgb, var(--oa-brand) 18%, var(--oa-line)) !important;
    box-shadow: inset -3px 0 0 var(--oa-brand) !important;
}

.top-header,
body.theme-light .top-header,
body.theme-dark .top-header {
    background: color-mix(in srgb, var(--oa-surface) 92%, transparent) !important;
    border-bottom-color: var(--oa-line) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.035) !important;
}

.content-area,
body.theme-light .content-area,
body.theme-dark .content-area {
    background: radial-gradient(circle at 100% 0%, var(--oa-brand-soft) 0%, transparent 28%), var(--oa-bg) !important;
}

.workspace-card,
.org-list-card,
.org-form-card,
.letters-workspace-card,
.stat-card,
.quick-action,
.org-card {
    border-color: var(--oa-line) !important;
    background: var(--oa-surface) !important;
    box-shadow: var(--oa-shadow-card) !important;
}

.workspace-card:hover,
.org-card:hover,
.quick-action:hover {
    box-shadow: var(--oa-shadow-card-hover) !important;
    transform: translateY(-2px) !important;
}

.quick-action {
    min-height: 96px !important;
    border-radius: var(--oa-radius-card) !important;
}

.quick-action svg {
    padding: 9px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    color: var(--oa-brand) !important;
    background: var(--oa-brand-soft) !important;
}

.stat-card {
    border-radius: var(--oa-radius-card) !important;
    border-top: 3px solid var(--oa-brand) !important;
}

.stat-card:nth-child(2n) { border-top-color: var(--oa-success) !important; }
.stat-card:nth-child(3n) { border-top-color: var(--oa-warning) !important; }

.org-modal-card,
.letter-modal-card {
    background: var(--oa-surface) !important;
    border-color: var(--oa-line-strong) !important;
    border-radius: var(--oa-radius-modal) !important;
    box-shadow: var(--oa-shadow-modal) !important;
}

/* Dedicated LetterManage screen shares exact shell visuals. */
body > .page .topbar,
body > .page .editor-card {
    border-radius: var(--oa-radius-card) !important;
    background: var(--oa-surface) !important;
    border-color: var(--oa-line) !important;
    box-shadow: var(--oa-shadow-card) !important;
}

body > .page .side-panel,
body > .page .editor-toolbar-card {
    background: var(--oa-surface-soft) !important;
    border-color: var(--oa-line) !important;
}

body > .page .topbar {
    backdrop-filter: none !important;
}

body > .page .manage-topbar-icon {
    background: var(--oa-brand-gradient) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 18px var(--oa-brand-glow) !important;
}

/* --------------------------------------------------------------------------
   Blue Brand Migration
   Legacy emerald/neon elements are decorative, not semantic success states.
   -------------------------------------------------------------------------- */
.login-info-panel {
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.2), rgba(14, 165, 233, 0.09) 46%, rgba(99, 102, 241, 0.16)), rgba(8, 18, 31, 0.88) !important;
    border-color: rgba(96, 165, 250, 0.24) !important;
}

.login-info-panel::before {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.3), transparent 66%) !important;
}

.system-mark,
.login-logo {
    background: var(--oa-brand-gradient) !important;
    box-shadow: 0 10px 28px var(--oa-brand-glow) !important;
}

.system-mark,
.system-mark svg,
.login-logo svg {
    color: #ffffff !important;
}

.login-header h2 {
    text-shadow: 0 0 22px var(--oa-brand-glow) !important;
}

.input-wrapper input:focus {
    border-color: var(--oa-brand) !important;
    box-shadow: 0 0 20px var(--oa-brand-glow) !important;
}

.input-wrapper .input-icon {
    color: var(--oa-brand) !important;
}

.btn-login {
    background: var(--oa-brand-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px var(--oa-brand-glow) !important;
}

.btn-login:hover {
    box-shadow: 0 15px 40px color-mix(in srgb, var(--oa-brand) 48%, transparent) !important;
}

/* Main SPA legacy neon decor */
#login-page .topology-background {
    background: linear-gradient(180deg, #07132a 0%, #0b1b3a 45%, #09172e 100%) !important;
}

#login-page .aurora-layer,
#login-page .aurora-wave,
#login-page .stars-layer {
    filter: hue-rotate(150deg) saturate(0.78) !important;
}

#login-page .login-info-panel,
#login-page .system-mark,
#login-page .btn-login,
#login-page .input-wrapper input:focus,
#login-page .input-wrapper .input-icon {
    --legacy-brand: var(--oa-brand);
}

/* Composer, signature canvas, and dashboard decorative accents. */
.new-letter-composer-banner,
body.theme-dark .new-letter-composer-banner {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.08)) !important;
    border-color: color-mix(in srgb, var(--oa-brand) 28%, var(--oa-line)) !important;
}

.signature-route-flow-node.active,
.signature-route-flow-node.dragging,
.signature-route-palette-item:hover,
.signature-route-canvas-tool:hover {
    border-color: var(--oa-brand) !important;
    box-shadow: 0 0 0 3px var(--oa-brand-glow) !important;
}

.signature-route-flow-node::after,
.signature-route-flow-node::before,
.signature-route-flow-connector::before,
.signature-route-flow-connector span {
    background: var(--oa-brand) !important;
    color: var(--oa-brand) !important;
}

/* LetterManage's old neon-green decorative controls. */
body > .page .btn-primary,
body > .page .btn-primary:hover {
    background: var(--oa-brand-gradient) !important;
    color: #ffffff !important;
    border-color: var(--oa-brand) !important;
}

body > .page .field input:focus,
body > .page .field textarea:focus {
    border-color: var(--oa-brand) !important;
    box-shadow: var(--oa-focus-ring) !important;
}

body > .page .suggestion:hover,
body > .page .tab.active {
    color: var(--oa-brand) !important;
    background: var(--oa-brand-soft) !important;
}

body > .page .drop-zone,
body > .page .drop-zone.dragover {
    border-color: color-mix(in srgb, var(--oa-brand) 42%, var(--oa-line)) !important;
    background: color-mix(in srgb, var(--oa-brand) 8%, var(--oa-surface)) !important;
}

body > .page .status-pill {
    color: var(--oa-brand) !important;
    background: var(--oa-brand-soft) !important;
    border-color: color-mix(in srgb, var(--oa-brand) 28%, var(--oa-line)) !important;
}

/* Keep green only for semantic success feedback. */
.message.success,
.oa-status-success,
.btn-success,
.department-status-active {
    /* ponytail: semantic success remains green; move to blue only if product removes success meaning. */
}

/* SPA login legacy neon replacement. These rules neutralize inline green rules. */
#login-page .login-info-panel {
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.2), rgba(14, 165, 233, 0.1) 46%, rgba(99, 102, 241, 0.16)), rgba(8, 18, 31, 0.88) !important;
    border-color: rgba(96, 165, 250, 0.24) !important;
}

#login-page .login-info-panel::before {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.3), transparent 66%) !important;
}

#login-page .system-mark,
#login-page .btn-login,
#login-page .brand-mark {
    background: var(--oa-brand-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px var(--oa-brand-glow) !important;
}

#login-page .system-mark,
#login-page .system-mark svg,
#login-page .btn-login,
#login-page .btn-login svg {
    color: #ffffff !important;
}

#login-page .login-header h2 {
    text-shadow: 0 0 22px var(--oa-brand-glow) !important;
}

#login-page .input-wrapper input:focus {
    border-color: var(--oa-brand) !important;
    box-shadow: 0 0 20px var(--oa-brand-glow) !important;
}

#login-page .input-wrapper .input-icon,
#login-page .feature-icon,
#login-page .feature-item svg {
    color: var(--oa-brand) !important;
}

#login-page .feature-item {
    border-color: color-mix(in srgb, var(--oa-brand) 22%, rgba(255, 255, 255, 0.12)) !important;
    background: color-mix(in srgb, var(--oa-brand) 8%, rgba(255, 255, 255, 0.04)) !important;
}

/* The topology layers contain a full old neon palette. Replace with blue-only canvas. */
#login-page .aurora-background,
#login-page .aurora-layer,
#login-page .aurora-wave,
#login-page .stars-layer,
#login-page .topology-overlay {
    opacity: 0 !important;
}

#login-page .topology-background {
    background: radial-gradient(circle at 18% 20%, rgba(37, 99, 235, 0.34), transparent 42%), radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.22), transparent 40%), #07132a !important;
}

/* Old flow/editor accent classes use the blue brand rather than neon green. */
.signature-route-flow-node.active .signature-route-flow-node-number,
.signature-route-flow-node.active .signature-route-flow-node-badge,
.signature-route-flow-terminal,
.signature-route-palette-item.active .signature-route-palette-icon {
    background: var(--oa-brand-gradient) !important;
    color: #ffffff !important;
    border-color: var(--oa-brand) !important;
}

.signature-route-flow-canvas-head,
.signature-route-canvas-toolbar,
.signature-route-palette-head {
    border-color: var(--oa-line) !important;
}

/* Legacy standalone dashboard visual accents become blue. */
.dashboard-container .success-message {
    background: var(--oa-brand-soft) !important;
    border-color: color-mix(in srgb, var(--oa-brand) 28%, var(--oa-line)) !important;
    color: var(--oa-brand) !important;
}

/* --------------------------------------------------------------------------
   Login Experience Redesign
   -------------------------------------------------------------------------- */
#login-page {
    --login-canvas: #f4f7fb;
    --login-card: #ffffff;
    --login-border: #dbe5f2;
    --login-heading: #0f172a;
    --login-muted: #64748b;
    --login-shadow: 0 24px 64px rgba(15, 23, 42, 0.14);
    background: radial-gradient(circle at 78% 18%, rgba(37, 99, 235, 0.17), transparent 34%), radial-gradient(circle at 16% 85%, rgba(14, 165, 233, 0.12), transparent 35%), var(--login-canvas) !important;
    padding: 28px !important;
}

html[data-bs-theme="dark"] #login-page,
body.theme-dark #login-page {
    --login-canvas: #081120;
    --login-card: #101c30;
    --login-border: rgba(148, 163, 184, 0.18);
    --login-heading: #f8fafc;
    --login-muted: #a8b7cc;
    --login-shadow: 0 26px 72px rgba(0, 0, 0, 0.42);
}

#login-page .topology-background,
#login-page .topology-overlay,
#login-page .aurora-background,
#login-page .aurora-layer,
#login-page .aurora-wave,
#login-page .stars-layer {
    display: none !important;
}

#login-page .login-container {
    width: min(1080px, 100%) !important;
    min-height: min(660px, calc(100vh - 56px)) !important;
    grid-template-columns: minmax(360px, 0.92fr) minmax(420px, 1.08fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--login-border) !important;
    border-radius: 24px !important;
    background: var(--login-card) !important;
    box-shadow: var(--login-shadow) !important;
    backdrop-filter: none !important;
}

#login-page .login-form-panel {
    padding: clamp(38px, 6vw, 72px) clamp(30px, 5vw, 62px) !important;
    background: var(--login-card) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    justify-content: center !important;
}

#login-page .login-info-panel {
    padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px) !important;
    background: linear-gradient(145deg, #12346f 0%, #1d4ed8 55%, #2563eb 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#login-page .login-info-panel::before {
    display: block !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%) !important;
    inset: -25% -18% auto auto !important;
}

#login-page .login-info-panel::after {
    background: radial-gradient(circle, rgba(125, 211, 252, 0.2), transparent 70%) !important;
}

#login-page .login-identity {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 46px !important;
}

#login-page .login-identity-name {
    color: var(--login-muted) !important;
    font-size: 0.79rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

#login-page .system-mark {
    width: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    background: var(--oa-brand-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px var(--oa-brand-glow) !important;
    animation: none !important;
}

#login-page .system-mark svg {
    width: 26px !important;
    height: 26px !important;
    color: #ffffff !important;
}

#login-page .login-header h2 {
    color: var(--login-heading) !important;
    font-size: clamp(1.6rem, 2.4vw, 2.15rem) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.04em !important;
    text-shadow: none !important;
    margin: 10px 0 14px !important;
}

#login-page .login-eyebrow {
    display: inline-block !important;
    color: var(--oa-brand) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}

#login-page .login-header p {
    color: var(--login-muted) !important;
    font-size: 0.94rem !important;
    line-height: 1.9 !important;
    margin-bottom: 34px !important;
}

#login-page .btn-login {
    min-height: 52px !important;
    border-radius: 12px !important;
    background: var(--oa-brand-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px var(--oa-brand-glow) !important;
}

#login-page .btn-login:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.3) !important;
}

#login-page .login-security-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-top: 22px !important;
    color: #64748b !important;
    font-size: 0.76rem !important;
    line-height: 1.7 !important;
}

#login-page .login-security-note svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
    color: var(--oa-brand) !important;
}

html[data-bs-theme="dark"] #login-page .login-form-panel,
body.theme-dark #login-page .login-form-panel {
    background: linear-gradient(155deg, #101c30, #0d1728) !important;
}

html[data-bs-theme="dark"] #login-page .login-identity-name,
body.theme-dark #login-page .login-identity-name,
html[data-bs-theme="dark"] #login-page .login-security-note,
body.theme-dark #login-page .login-security-note {
    color: var(--login-muted) !important;
}

html[data-bs-theme="dark"] #login-page .login-info-panel,
body.theme-dark #login-page .login-info-panel {
    background: linear-gradient(145deg, #0b2756 0%, #123a87 55%, #1d4ed8 100%) !important;
}

#login-page .system-kicker {
    color: #bfdbfe !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

#login-page .system-kicker svg {
    color: #dbeafe !important;
}

#login-page .system-title {
    color: #ffffff !important;
    font-size: clamp(1.9rem, 3vw, 3rem) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.045em !important;
    margin-top: 28px !important;
}

#login-page .system-description {
    color: rgba(239, 246, 255, 0.85) !important;
    font-size: 0.96rem !important;
    line-height: 2 !important;
}

#login-page .feature-list {
    gap: 12px !important;
    margin-top: 34px !important;
}

#login-page .feature-item {
    padding: 13px 14px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#login-page .feature-item:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

#login-page .feature-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: rgba(219, 234, 254, 0.16) !important;
    color: #dbeafe !important;
}

#login-page .feature-item strong { color: #ffffff !important; }
#login-page .feature-item span { color: rgba(239, 246, 255, 0.74) !important; }

#login-page .system-specs {
    margin-top: 34px !important;
    gap: 8px !important;
}

#login-page .spec-card {
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(8, 29, 71, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#login-page .spec-card strong { color: #ffffff !important; }
#login-page .spec-card span { color: rgba(219, 234, 254, 0.72) !important; }

@media (max-width: 860px) {
    #login-page {
        padding: 16px !important;
        overflow-y: auto !important;
    }

    #login-page .login-container {
        min-height: auto !important;
        grid-template-columns: 1fr !important;
        max-width: 560px !important;
        margin: 16px auto !important;
    }

    #login-page .login-info-panel { order: -1 !important; }
    #login-page .system-specs { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 640px) {
    .oa-page {
        padding-right: var(--oa-space-3);
        padding-left: var(--oa-space-3);
    }

    .btn {
        min-height: 40px;
    }
}

/* --------------------------------------------------------------------------
   Letterhead Management
   -------------------------------------------------------------------------- */
.letterhead-card {
    min-height: 0 !important;
}

.letterhead-card-thumb {
    width: 100%;
    height: 132px;
    border-radius: var(--oa-radius-md);
    border: 1px solid var(--oa-line);
    background: var(--oa-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.letterhead-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.letterhead-preview-box {
    min-height: 130px;
    border-radius: var(--oa-radius-md);
    border: 1px dashed var(--oa-line-strong);
    background: var(--oa-surface-soft);
    color: var(--oa-ink-faint);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}

.letterhead-preview-box img {
    max-width: 100%;
    max-height: 190px;
    object-fit: contain;
}

.letterhead-preview-full {
    border-radius: var(--oa-radius-md);
    border: 1px solid var(--oa-line);
    background: #ffffff;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.letterhead-preview-full img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
}