/**
 * IranImpex Android Web App - Pixel-Perfect Android Replication Stylesheet
 * Supports Dark Theme (#0B0F19) and Light Theme (#F4F6F9)
 */

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/iransans_regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Shabnam';
    src: url('../fonts/shabnam_regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANYekan';
    src: url('../fonts/iranyekan_regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir_regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-iransans { font-family: 'IRANSans', Tahoma, sans-serif !important; }
.font-shabnam { font-family: 'Shabnam', Tahoma, sans-serif !important; }
.font-iranyekan { font-family: 'IRANYekan', Tahoma, sans-serif !important; }
.font-vazir { font-family: 'Vazir', 'Vazirmatn', Tahoma, sans-serif !important; }


:root {
    /* DARK THEME (DEFAULT) */
    --app-bg: #0B0F19;
    --app-surface: #131929;
    --app-surface-variant: #1E293B;
    --app-border: rgba(255, 255, 255, 0.12);
    --app-border-subtle: rgba(255, 255, 255, 0.08);
    --app-text: #FFFFFF;
    --app-text-secondary: #94A3B8;
    --app-text-muted: #64748B;
    --app-card-bg: #131929;
    --app-pill-bg: rgba(255, 255, 255, 0.08);
    --app-divider: rgba(212, 175, 55, 0.25);
    
    /* ACCENTS & HIGHLIGHTS */
    --gold-primary: #D4AF37;
    --gold-bg: rgba(212, 175, 55, 0.15);
    --gold-text: #FBBF24;
    --cyan-accent: #06B6D4;
    --emerald-accent: #10B981;
    --rose-accent: #E11D48;
    --indigo-accent: #6366F1;

    --status-bar-bg: #0B0F19;
    --bottom-bar-bg: #0F172A;
}

body.theme-light {
    --app-bg: #F4F6F9;
    --app-surface: #FFFFFF;
    --app-surface-variant: #F1F5F9;
    --app-border: rgba(0, 0, 0, 0.08);
    --app-border-subtle: rgba(0, 0, 0, 0.05);
    --app-text: #0F172A;
    --app-text-secondary: #475569;
    --app-text-muted: #94A3B8;
    --app-card-bg: #FFFFFF;
    --app-pill-bg: rgba(0, 0, 0, 0.05);
    --app-divider: rgba(212, 175, 55, 0.35);

    --gold-text: #B45309;
    --status-bar-bg: #F4F6F9;
    --bottom-bar-bg: #FFFFFF;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #05070d;
    color: var(--app-text);
    direction: rtl;
    text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DEVICE SHELL CONTAINER (Responsive Simulator on Desktop, Native on Mobile)
   ───────────────────────────────────────────────────────────────────────────── */

.device-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, #0d1527 0%, #04060a 100%);
    position: relative;
    overflow: hidden;
}

.device-frame {
    width: 100%;
    height: 100%;
    max-width: 440px;
    max-height: 920px;
    background: var(--app-bg);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: max-width 0.3s ease, border-radius 0.3s ease;
}

/* Desktop Emulator Look */
@media (min-width: 540px) {
    .device-frame {
        border-radius: 40px;
        height: 94vh;
        border: 4px solid #1e293b;
    }
    .device-frame.expanded-mode {
        max-width: 900px;
        border-radius: 28px;
    }
}

@media (max-width: 539px) {
    .device-frame {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANDROID STATUS BAR & SYSTEM CONTROLS
   ───────────────────────────────────────────────────────────────────────────── */

.android-status-bar {
    height: 34px;
    background: var(--status-bar-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text-secondary);
    z-index: 50;
    border-bottom: 1px solid var(--app-border-subtle);
    flex-shrink: 0;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
}

.status-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: monospace;
    font-size: 12px;
}

/* Desktop Expand Toggle Pill */
.desktop-controls {
    position: absolute;
    top: 16px;
    left: 20px;
    z-index: 1000;
    display: flex;
    gap: 8px;
}

@media (max-width: 540px) {
    .desktop-controls { display: none; }
}

.desktop-btn {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.desktop-btn:hover {
    background: #0284c7;
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   APP SCREEN CONTAINER & SCROLL AREA
   ───────────────────────────────────────────────────────────────────────────── */

.app-screen-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
}

.app-screen-body::-webkit-scrollbar {
    display: none;
}

/* Screen Wrapper Transitions */
.screen-view {
    display: none;
    flex-direction: column;
    min-height: 100%;
    animation: screenFadeIn 0.22s ease-out;
}

.screen-view.active {
    display: flex;
}

@keyframes screenFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DASHBOARD TOP HEADER (EXACT REPLICATION)
   ───────────────────────────────────────────────────────────────────────────── */

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px 16px;
    flex-shrink: 0;
}

.menu-circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--app-pill-bg);
    border: none;
    color: var(--app-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 19px;
    transition: transform 0.1s;
}

.menu-circle-btn:active {
    transform: scale(0.94);
}

.header-action-group {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Personal Desk Button */
.btn-personal-desk {
    background: var(--gold-bg);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 14px;
    padding: 7px 11px;
    color: var(--gold-text);
    font-size: 11.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
}

.btn-personal-desk:active {
    transform: scale(0.96);
}

/* Header Square Action Buttons (Layout Switcher & Theme Switcher) */
.header-square-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--app-pill-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.header-square-btn.active-grid {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.5);
    color: #06b6d4;
}

.header-square-btn:active {
    transform: scale(0.94);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TODAY DATES BOX (تاریخ‌های روزانه و مناسبت‌ها)
   ───────────────────────────────────────────────────────────────────────────── */

.today-dates-box {
    margin: 4px 16px 14px 16px;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.today-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.today-persian-date {
    font-size: 13.5px;
    font-weight: 900;
    color: var(--app-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.today-live-tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--emerald-accent);
    background: rgba(16, 185, 129, 0.15);
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.today-sub-dates {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--app-text-secondary);
}

.today-quote-text {
    font-size: 11px;
    color: var(--cyan-accent);
    font-weight: 700;
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3-COLUMN WINDOWS-STYLE SERVICE GRID (حالت آیکونیک گرید)
   ───────────────────────────────────────────────────────────────────────────── */

.services-grid-container {
    padding: 0 14px 20px 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 10px;
}

.service-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s;
}

.service-icon-item:active {
    transform: scale(0.92);
}

.service-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.service-icon-svg {
    width: 27px;
    height: 27px;
    fill: #ffffff;
}

/* AI Badge & Badges */
.badge-ai {
    position: absolute;
    top: -4px;
    left: -4px;
    background: #10B981;
    color: #fff;
    font-size: 8.5px;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.badge-red-dot {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #EF4444;
    border-radius: 50%;
    border: 1.5px solid #fff;
}

.service-icon-label {
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text);
    text-align: center;
    line-height: 1.35;
    max-width: 82px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1-COLUMN LIST VIEW (حالت لیستی)
   ───────────────────────────────────────────────────────────────────────────── */

.services-list-container {
    padding: 0 16px 20px 16px;
    display: none;
    flex-direction: column;
    gap: 10px;
}

.services-list-container.active-mode {
    display: flex;
}

.services-grid-container.hidden-mode {
    display: none;
}

.service-list-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.2s;
}

.service-list-card:active {
    transform: scale(0.98);
}

.service-list-card:hover {
    border-color: rgba(6, 182, 212, 0.4);
}

.list-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-icon-box .service-icon-svg {
    width: 22px;
    height: 22px;
}

.list-info {
    flex: 1;
    min-width: 0;
}

.list-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.list-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text);
}

.list-tag {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--app-pill-bg);
    color: var(--cyan-accent);
}

.list-desc {
    font-size: 11px;
    color: var(--app-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL PODCAST / BOTTOM BAR (EXACT AZMOON REPLICATION)
   ───────────────────────────────────────────────────────────────────────────── */

.global-bottom-bar {
    height: 58px;
    background: var(--bottom-bar-bg);
    border-top: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 12px;
    flex-shrink: 0;
    z-index: 40;
}

.nav-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: var(--app-text-secondary);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s;
}

.nav-bottom-item.active {
    color: var(--cyan-accent);
}

.nav-bottom-icon {
    font-size: 18px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   AZMOON STANDARD SCREEN HEADER (TOP APP BAR - NO BACK BUTTON)
   ───────────────────────────────────────────────────────────────────────────── */

.azmoon-screen-header {
    padding: 12px 18px;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.azmoon-header-title h2 {
    font-size: 17px;
    font-weight: 900;
    color: var(--app-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.azmoon-header-title p {
    font-size: 11px;
    color: var(--app-text-secondary);
}

.azmoon-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODAL NAVIGATION DRAWER (سایدبار کشویی منو)
   ───────────────────────────────────────────────────────────────────────────── */

.drawer-scrim {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 500;
    backdrop-filter: blur(4px);
}

.drawer-scrim.open {
    display: block;
}

.drawer-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -310px;
    width: 300px;
    background: var(--app-surface);
    border-left: 1px solid var(--app-border);
    z-index: 510;
    transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    overflow-y: auto;
}

.drawer-panel.open {
    right: 0;
}

.drawer-logo-box {
    text-align: center;
    padding: 18px 0 12px 0;
}

.drawer-logo-badge {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0284C7, #6366F1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 8px;
}

.drawer-logo-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--app-text);
}

.drawer-logo-sub {
    font-size: 11px;
    color: var(--app-text-secondary);
}

.drawer-vip-card {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 16px;
    padding: 12px 14px;
    margin: 14px 0 18px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.drawer-menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drawer-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.drawer-menu-item:hover, .drawer-menu-item:active {
    background: var(--app-pill-bg);
}

.drawer-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--app-pill-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOOL UI COMPONENTS (CARDS, CHIPS, FORMS, BARS, CHAT BUBBLES)
   ───────────────────────────────────────────────────────────────────────────── */

/* Unified Search Box */
.tool-search-box {
    margin: 12px 16px 14px 16px;
    position: relative;
    display: flex;
    align-items: center;
}

.tool-search-input {
    width: 100%;
    height: 48px;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 0 44px 0 16px;
    color: var(--app-text);
    font-size: 13.5px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tool-search-input:focus {
    border-color: var(--cyan-accent);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

.tool-search-icon {
    position: absolute;
    right: 14px;
    font-size: 18px;
    color: var(--app-text-secondary);
    pointer-events: none;
}

/* Horizontal Chip Filter Rows */
.filter-chip-row {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.filter-chip-row::-webkit-scrollbar { display: none; }

.filter-chip {
    padding: 7px 14px;
    border-radius: 20px;
    background: var(--app-pill-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.filter-chip.active {
    background: rgba(212, 175, 55, 0.18);
    border-color: var(--gold-primary);
    color: var(--gold-text);
}

/* Result Item Cards (Tariff & TSC & Timeline) */
.result-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 14px 16px;
    margin: 0 16px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: border-color 0.2s, transform 0.15s;
}

.result-card:hover {
    border-color: rgba(6, 182, 212, 0.4);
}

.result-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.result-code-badge {
    font-family: monospace;
    font-size: 14px;
    font-weight: 900;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    padding: 3px 9px;
    border-radius: 8px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    direction: ltr;
}

.result-duty-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--gold-text);
    background: var(--gold-bg);
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.result-card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text);
    line-height: 1.6;
}

.result-card-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    font-size: 11px;
    color: var(--app-text-secondary);
    background: var(--app-pill-bg);
    padding: 8px 10px;
    border-radius: 10px;
}

.result-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.btn-card-action {
    flex: 1;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--app-border);
    background: var(--app-pill-bg);
    color: var(--app-text);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.15s;
}

.btn-card-action:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: var(--cyan-accent);
    color: var(--cyan-accent);
}

/* Tool Form Containers (CBM, Calculator, Penalties) */
.tool-form-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 20px;
    padding: 16px;
    margin: 12px 16px 16px 16px;
}

.tool-input-label {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--app-text-secondary);
    margin-bottom: 5px;
}

.tool-input-field {
    width: 100%;
    height: 44px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 0 12px;
    color: var(--app-text);
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.2s;
}

body.theme-light .tool-input-field {
    background: #f8fafc;
}

.tool-input-field:focus {
    border-color: var(--gold-primary);
}

.tool-btn-primary {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 14px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
    transition: transform 0.1s;
}

.tool-btn-primary:active {
    transform: scale(0.98);
}

/* CBM Container Utilization Bar */
.cbm-meter-box {
    margin-top: 14px;
    background: var(--app-pill-bg);
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--app-border-subtle);
}

.cbm-meter-title {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 800;
    margin-bottom: 6px;
}

.cbm-progress-bar-bg {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.cbm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #06b6d4);
    border-radius: 6px;
    transition: width 0.4s ease;
}

/* AI Chat Room */
.ai-chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-bubble {
    max-width: 85%;
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 12.5px;
    line-height: 1.7;
    word-break: break-word;
}

.ai-bubble.user {
    align-self: flex-start;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-bubble.bot {
    align-self: flex-end;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    border-bottom-left-radius: 4px;
}

.ai-input-bar {
    padding: 10px 14px;
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
    display: flex;
    gap: 8px;
}

.ai-input-box {
    flex: 1;
    height: 42px;
    background: var(--app-pill-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 0 12px;
    color: var(--app-text);
    font-size: 12.5px;
    outline: none;
}

.ai-send-btn {
    width: 44px;
    height: 42px;
    background: #6366f1;
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

/* Modal Windows */
.app-modal-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 600;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.app-modal-backdrop.open {
    display: flex;
}

.app-modal-window {
    width: 100%;
    max-width: 380px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 24px;
    padding: 22px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-height: 85vh;
    overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TARIFF SCREEN (100% Jetpack Compose TariffScreen.kt Replica)
   ───────────────────────────────────────────────────────────────────────────── */

.tariff-search-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.22);
    border-radius: 20px;
    padding: 14px;
    margin: 0 16px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
}

.tariff-search-card.collapsed {
    display: none;
}

.tariff-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.tariff-text-field {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 85, 247, 0.28);
    color: var(--app-text);
    padding: 0 42px 0 42px;
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: right;
    direction: rtl;
}

.tariff-text-field:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

.tariff-clear-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--app-text-secondary);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}

.tariff-search-icon-btn {
    position: absolute;
    left: 10px;
    background: none;
    border: none;
    font-size: 17px;
    color: #a855f7;
    cursor: pointer;
    padding: 4px;
}

.tariff-btn-search {
    width: 100%;
    height: 44px;
    margin-top: 4px;
    background: #a855f7;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.tariff-btn-search:hover {
    opacity: 0.92;
}

.tariff-btn-search:active {
    transform: scale(0.98);
}

.tariff-features-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.tariff-feature-badge {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--app-text-secondary);
    text-align: center;
}

.tariff-feature-badge .badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a855f7;
}

.tariff-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 10px 16px;
}

.tariff-count-pill {
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.28);
    color: #c084fc;
    font-size: 11px;
    font-weight: 700;
}

.tariff-fullscreen-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.28);
    color: #c084fc;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.tariff-sticky-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 16px 10px 16px;
    padding: 8px 12px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-radius: 12px;
}

.tariff-sticky-header .sticky-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tariff-sticky-header .sticky-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text);
}

.tariff-sticky-header .sticky-count-pill {
    font-size: 10.5px;
    font-weight: 700;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.35);
    padding: 2px 8px;
    border-radius: 6px;
}

.tariff-exit-fullscreen-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 8px;
    color: #c084fc;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.tariff-results-scroll {
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tariff-empty-state {
    text-align: center;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tariff-empty-state .empty-icon {
    font-size: 48px;
    opacity: 0.35;
}

.tariff-empty-state .empty-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--app-text);
}

.tariff-empty-state .empty-desc {
    font-size: 11.5px;
    color: var(--app-text-secondary);
    max-width: 320px;
    line-height: 1.8;
}

/* Tariff Federated Card */
.tariff-federated-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
}

.tariff-federated-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
}

.tariff-federated-card .card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tariff-federated-card .duty-pill {
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    font-size: 11px;
    font-weight: 800;
}

.tariff-federated-card .hs-code-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.tariff-federated-card .hs-code-badge:hover {
    background: rgba(168, 85, 247, 0.12);
}

.tariff-federated-card .hs-code-text {
    font-size: 15px;
    font-weight: 800;
    color: #d8b4fe;
    font-family: monospace, 'Vazirmatn';
    letter-spacing: 0.5px;
}

.tariff-federated-card .official-desc {
    font-size: 12px;
    font-weight: 500;
    color: var(--app-text);
    line-height: 1.8;
    text-align: right;
}

.tariff-federated-card .market-tsc-box {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tariff-federated-card .tsc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tariff-federated-card .tsc-count-pill {
    font-size: 9px;
    font-weight: 700;
    color: #d97706;
    background: rgba(245, 158, 11, 0.12);
    border-radius: 6px;
    padding: 2px 6px;
}

.tariff-federated-card .tsc-title {
    font-size: 10px;
    font-weight: 700;
    color: #d97706;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tariff-federated-card .tsc-item-card {
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tariff-federated-card .tsc-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}

.tariff-federated-card .tsc-price {
    font-size: 11.5px;
    font-weight: 800;
    color: #10b981;
}

.tariff-federated-card .tsc-desc {
    color: var(--app-text-secondary);
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tariff-federated-card .tsc-row-2 {
    display: flex;
    justify-content: space-between;
    font-size: 8.5px;
    color: var(--app-text-muted);
}

.tariff-federated-card .tsc-toggle-link {
    font-size: 9.5px;
    font-weight: 700;
    color: #d97706;
    cursor: pointer;
    padding-top: 4px;
}

.tariff-federated-card .card-action-btn {
    width: 100%;
    margin-top: 4px;
    padding: 8px 12px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-radius: 10px;
    color: #d8b4fe;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.tariff-federated-card .card-action-btn:hover {
    background: rgba(168, 85, 247, 0.2);
}

/* Pagination Bar */
.tariff-pagination-bar {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tariff-pagination-bar .page-numbers-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.tariff-pagination-bar .page-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--app-text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tariff-pagination-bar .page-btn.active {
    background: #a855f7;
    border-color: #a855f7;
    color: #ffffff;
}

.tariff-pagination-bar .jump-page-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--app-text-secondary);
}

.tariff-pagination-bar .jump-page-input {
    width: 65px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--app-text);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    outline: none;
}

.tariff-pagination-bar .jump-page-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    background: #a855f7;
    border: none;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

/* Modals */
.tariff-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tariff-modal-dialog {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    background: var(--app-surface);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.8);
}

.tariff-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--app-border-subtle);
}

.tariff-modal-header .modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tariff-modal-header .modal-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--app-text);
}

.tariff-modal-header .modal-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--app-text-secondary);
    cursor: pointer;
}

.tariff-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tariff-modal-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--app-border-subtle);
    display: flex;
    justify-content: flex-end;
}

.tariff-modal-footer .modal-btn-confirm {
    padding: 8px 20px;
    background: #a855f7;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

/* Tree Component */
.tariff-tree-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tariff-tree-card .tree-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #c084fc;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tree-level-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border-right: 3px solid #a855f7;
}

.tree-level-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tree-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}

.tree-code {
    font-size: 9.5px;
    font-weight: 700;
    font-family: monospace;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}

.tree-desc {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--app-text-secondary);
}

/* Certificate Modal & Sheet */
.tariff-cert-dialog {
    width: 100%;
    max-width: 680px;
    max-height: 92vh;
    background: #ffffff;
    color: #0f172a;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cert-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: #0f172a;
    color: #ffffff;
}

.cert-btn-print {
    padding: 6px 14px;
    background: #06b6d4;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.tariff-cert-sheet {
    padding: 24px;
    overflow-y: auto;
    background: #ffffff;
    color: #0f172a;
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    text-align: right;
}

@media print {
    body * {
        visibility: hidden;
    }
    #tariffCertSheet, #tariffCertSheet *, #tscCertSheet, #tscCertSheet * {
        visibility: visible;
    }
    #tariffCertSheet, #tscCertSheet {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .no-print {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PHASE 2: TSC SCREEN (استعلام سوابق و ارزش گمرکی کالاهای وارداتی)
   Exact Replication of Android Jetpack Compose TscScreen.kt
   ───────────────────────────────────────────────────────────────────────────── */

#screen-tsc {
    padding: 0 16px 24px 16px;
}

.tsc-tabs-row {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.tsc-tab-btn {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    transition: all 0.2s ease;
    text-align: center;
}

.tsc-tab-btn.active {
    background: #d4af37;
    color: #0b0f19;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.tsc-search-card {
    background: #131929;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 10px;
}

.tsc-input-wrap {
    position: relative;
    width: 100%;
}

.tsc-text-field {
    width: 100%;
    background: #070b14;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #ffffff;
    font-size: 12px;
    padding: 10px 14px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
    text-align: right;
    direction: rtl;
}

.tsc-text-field:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.tsc-clear-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    z-index: 2;
}

.tsc-clear-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

.tsc-btn-search {
    width: 100%;
    background: #d4af37;
    color: #0b0f19;
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    transition: background 0.2s ease, transform 0.1s ease;
}

.tsc-btn-search:hover {
    background: #e6be44;
}

.tsc-btn-search:active {
    transform: scale(0.98);
}

/* Advanced Matrix Grid */
.tsc-adv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding-left: 4px;
}

.tsc-adv-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tsc-adv-field label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-align: right;
}

.tsc-adv-field input {
    background: #070b14;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-size: 11px;
    padding: 8px 10px;
    box-sizing: border-box;
    outline: none;
    text-align: right;
    direction: rtl;
}

.tsc-adv-field input:focus {
    border-color: #d4af37;
}

/* Toolbar Card */
.tsc-toolbar-card {
    background: #131929;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tsc-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.tsc-toolbar-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
}

.tsc-chip-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tsc-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tsc-chip.active {
    background: rgba(212, 175, 55, 0.2);
    border-color: #d4af37;
    color: #d4af37;
    font-weight: 800;
}

.tsc-price-sort-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Results Header */
.tsc-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tsc-header-left {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tsc-count-pill {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #d4af37;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
}

.tsc-fullscreen-btn {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #d4af37;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tsc-header-title {
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
}

/* Results List & Cards */
.tsc-results-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tsc-empty-state {
    text-align: center;
    padding: 36px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.tsc-empty-icon {
    font-size: 44px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.tsc-empty-title {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 4px;
}

.tsc-empty-desc {
    font-size: 11px;
    color: #64748b;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
}

.tsc-loading-state {
    text-align: center;
    padding: 42px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
}

.tsc-spinner, .tariff-spinner {
    width: 38px;
    height: 38px;
    margin: 0 auto 12px auto;
    border: 3.5px solid rgba(212, 175, 55, 0.2);
    border-top: 3.5px solid #d4af37;
    border-radius: 50%;
    animation: tsc-spin 0.8s linear infinite;
}

@keyframes tsc-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tsc-loading-title {
    color: #d4af37;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 4px;
}

.tsc-loading-desc {
    color: #94a3b8;
    font-size: 11px;
}

/* TscResultCard matching Jetpack Compose */
.tsc-card {
    background: #131929;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.tsc-card:hover {
    border-color: #d4af37;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.tsc-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.tsc-card-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tsc-card-price {
    color: #10b981;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.tsc-card-unit {
    color: #94a3b8;
    font-size: 9.5px;
}

.tsc-card-tariff-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tsc-card-tariff {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    direction: ltr;
}

.tsc-card-tsc-id {
    color: #94a3b8;
    font-size: 10px;
}

.tsc-card-desc {
    color: #e2e8f0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.6;
    margin: 8px 0;
    text-align: right;
}

.tsc-card-badges-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tsc-card-duty {
    color: #d97706;
    font-size: 10.5px;
    font-weight: 800;
}

.tsc-card-meta-chips {
    display: flex;
    gap: 4px;
}

.tsc-meta-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 9px;
    color: #94a3b8;
}

/* Specs Box inside Card */
.tsc-specs-box {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 8px;
    text-align: right;
}

.tsc-specs-title {
    color: #d4af37;
    font-size: 9.5px;
    font-weight: 800;
    margin-bottom: 2px;
}

.tsc-specs-text {
    color: #cbd5e1;
    font-size: 10px;
    line-height: 1.5;
}

.tsc-specs-toggle {
    color: #0284c7;
    font-size: 9.5px;
    font-weight: 700;
    margin-top: 4px;
    cursor: pointer;
    display: inline-block;
}

.tsc-card-btn-cert {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: #d4af37;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 10.5px;
    font-weight: 800;
    margin-top: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease;
}

.tsc-card-btn-cert:hover {
    background: rgba(212, 175, 55, 0.2);
}

/* ── MODALS STYLING ── */
.tsc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.tsc-modal-dialog {
    background: #131929;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.tsc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tsc-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: right;
}

.tsc-detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tsc-detail-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
}

.tsc-detail-val {
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.6;
}

.tsc-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.tsc-modal-btn-cert {
    background: #d4af37;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    color: #0b0f19;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tsc-modal-btn-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 8px 16px;
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

/* Certificate Modal & Sheet */
.tsc-cert-dialog {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}

.tsc-cert-modal-body {
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tsc-cert-settings {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
}

.tsc-cert-settings .settings-title {
    color: #f59e0b;
    font-size: 11.5px;
    font-weight: 800;
    margin-bottom: 8px;
    text-align: right;
}

.tsc-cert-settings .settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-field label {
    font-size: 9.5px;
    color: #94a3b8;
    text-align: right;
}

.settings-field input {
    background: #070b14;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 10.5px;
    color: #ffffff;
    text-align: right;
    direction: rtl;
    width: 100%;
    box-sizing: border-box;
}

.tsc-cert-sheet {
    background: #ffffff;
    color: #0f172a;
    border-radius: 12px;
    padding: 22px 24px;
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, Tahoma, sans-serif;
    direction: rtl;
    text-align: right;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    position: relative;
    border: 1px solid #e2e8f0;
}

/* Certificate Header */
.cert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #0f172a;
    padding-bottom: 12px;
    margin-bottom: 14px;
    direction: rtl;
}

.cert-header-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1.2;
}

.cert-company-name {
    font-size: 16px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.3;
}

.cert-slogan-text {
    font-size: 9.5px;
    color: #0284c7;
    font-weight: 600;
    margin-top: 1px;
}

.cert-badge-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 3px;
}

.cert-header-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0.8;
}

.cert-bismillah {
    font-size: 11.5px;
    font-weight: 800;
    color: #334155;
    letter-spacing: 0.5px;
}

.cert-center-sub {
    font-size: 8.5px;
    color: #64748b;
    font-weight: 600;
}

.cert-header-left {
    text-align: left;
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 9.5px;
    color: #475569;
    gap: 3px;
    flex: 1;
}

.cert-meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cert-meta-lbl {
    color: #64748b;
    font-size: 9px;
}

.cert-meta-val {
    font-weight: 800;
    color: #0f172a;
    font-size: 9.5px;
}

/* Banner Title */
.cert-banner {
    text-align: center;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.cert-banner-main {
    font-size: 12.5px;
    font-weight: 900;
    color: #0f172a;
}

.cert-banner-sub {
    font-size: 9px;
    color: #64748b;
    font-weight: 500;
}

/* Specs Table - STRICT RTL */
.cert-specs-table {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #ffffff;
    font-size: 11px;
}

.cert-table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid #e2e8f0;
    direction: rtl;
}

.cert-table-row:last-child {
    border-bottom: none;
}

.cert-table-row.alt-bg {
    background: #f8fafc;
}

/* Right side is LABEL (عنوان فیلد) */
.cert-cell-label {
    color: #475569;
    font-weight: 700;
    font-size: 10.5px;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.cert-cell-label::before {
    content: "•";
    color: #0284c7;
    font-weight: 900;
    font-size: 13px;
}

/* Left side is VALUE (مقدار فیلد) */
.cert-cell-val {
    text-align: left;
    font-weight: 800;
    color: #0f172a;
    font-size: 11px;
}

/* Model & Technical Specs Box */
.cert-model-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-right: 3.5px solid #0284c7;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 10.5px;
    direction: rtl;
    text-align: right;
}

.cert-model-hdr {
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.cert-model-body {
    color: #334155;
    line-height: 1.7;
    font-size: 10px;
}

/* Verification and Digital Seal */
.cert-seal-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #cbd5e1;
    padding-top: 10px;
    margin-bottom: 12px;
    direction: rtl;
    gap: 12px;
}

.cert-disclaimer {
    text-align: right;
    font-size: 9px;
    color: #64748b;
    line-height: 1.7;
    flex: 1;
}

.cert-stamp-box {
    text-align: center;
    border: 1.5px dashed #0284c7;
    border-radius: 8px;
    padding: 6px 12px;
    background: #f0f9ff;
    color: #0369a1;
    min-width: 140px;
}

.cert-stamp-icon {
    font-size: 14px;
}

.cert-stamp-text {
    font-size: 9.5px;
    font-weight: 800;
    color: #0369a1;
}

.cert-stamp-code {
    font-size: 8px;
    color: #0284c7;
    margin-top: 2px;
}

.cert-signature-footer {
    text-align: center;
    font-size: 10.5px;
    font-weight: 800;
    color: #0f172a;
    border-top: 1.5px solid #e2e8f0;
    padding-top: 10px;
}

.tsc-cert-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);
}

.btn-cert-print {
    flex: 1;
    background: #0284c7;
    border: none;
    border-radius: 12px;
    padding: 10px;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s;
}

.btn-cert-print:hover {
    background: #0369a1;
}

.btn-cert-pdf {
    flex: 1;
    background: #10b981;
    border: none;
    border-radius: 12px;
    padding: 10px;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s;
}

.btn-cert-pdf:hover {
    background: #059669;
}

/* Print CSS */
@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .no-print,
    .app-sidebar,
    .top-app-bar,
    .tsc-cert-modal-header,
    .tsc-cert-settings,
    .tsc-cert-footer,
    .header-content,
    .content-area > :not(#screen-tsc),
    #tscSimpleSearchCard,
    #tscAdvancedCard,
    #tscToolbar,
    #tscResultsList {
        display: none !important;
    }
    #tscCertModal {
        position: static !important;
        background: transparent !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
    .tsc-cert-dialog {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .tsc-cert-modal-body {
        padding: 0 !important;
    }
    .tsc-cert-sheet {
        box-shadow: none !important;
        border: 1px solid #94a3b8 !important;
        border-radius: 0 !important;
        padding: 15mm !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Fullscreen Overlay */
.tsc-fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: #0b0f19;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.tsc-fullscreen-container {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.tsc-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

.tsc-exit-fs-btn {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #d4af37;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tsc-fs-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tsc-fs-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #ffffff;
}

.tsc-fs-count-pill {
    font-size: 10.5px;
    color: #94a3b8;
}

.tsc-fs-results-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

/* Wizard Modal */
.tsc-wizard-dialog {
    background: #131929;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wizard-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wizard-step-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 12px;
    border-radius: 12px;
    text-align: right;
}

.wizard-step-item .step-num {
    background: #d4af37;
    color: #0b0f19;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
    flex-shrink: 0;
}

.wizard-step-item .step-text {
    font-size: 11.5px;
    color: #e2e8f0;
    line-height: 1.6;
}

.wizard-step-item .step-text strong {
    color: #d4af37;
    display: block;
    margin-bottom: 2px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   CALCULATOR TOOL STYLES (100% Android Jetpack Compose Parity)
   ═════════════════════════════════════════════════════════════════════════════ */

.calc-scroll-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 30px;
}

.calc-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.calc-card-cyan {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.06);
}

.calc-card-purple {
    border-color: rgba(168, 85, 247, 0.35);
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.06);
}

.calc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.calc-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calc-card-title-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calc-card-icon {
    font-size: 18px;
    line-height: 1;
}

.calc-card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text);
}

.calc-card-subtitle {
    font-size: 11px;
    color: var(--app-text-secondary);
}

.calc-card-badge {
    background: rgba(6, 182, 212, 0.15);
    color: #06B6D4;
    border: 1px solid rgba(6, 182, 212, 0.35);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
}

.cyan-text { color: #06B6D4 !important; }
.purple-text { color: #A855F7 !important; }
.green-text { color: #10B981 !important; }
.amber-text { color: #F59E0B !important; }
.red-text { color: #EF4444 !important; }

/* Currency Button & Panel */
.calc-currency-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(6, 182, 212, 0.4);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calc-currency-btn:hover {
    background: rgba(6, 182, 212, 0.08);
    border-color: #06B6D4;
}

.calc-currency-btn-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calc-currency-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text);
}

.calc-currency-rate {
    font-size: 11px;
    font-weight: 700;
}

.calc-currency-arrow {
    font-size: 10px;
    color: #06B6D4;
    transition: transform 0.2s;
}

.calc-currency-panel {
    background: #0F172A;
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 12px;
    padding: 10px;
    margin-top: 8px;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: fadeIn 0.2s ease;
}

.calc-currency-search {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 12px;
    color: var(--app-text);
    outline: none;
    box-sizing: border-box;
}

.calc-currency-search:focus {
    border-color: #06B6D4;
}

.calc-currency-list {
    overflow-y: auto;
    max-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calc-currency-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 11.5px;
    color: var(--app-text);
}

.calc-currency-item:hover {
    background: rgba(6, 182, 212, 0.12);
}

.calc-currency-item.active {
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid #06B6D4;
    font-weight: 800;
}

.calc-currency-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.calc-chip-label {
    font-size: 11px;
    color: var(--app-text-muted);
    font-weight: 700;
}

.calc-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.calc-chip:hover {
    border-color: #06B6D4;
    color: #06B6D4;
}

.calc-chip.active {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06B6D4;
    color: #06B6D4;
    font-weight: 800;
}

/* Switches */
.calc-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.calc-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.calc-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.18);
    transition: 0.25s;
    border-radius: 24px;
}

.calc-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.25s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.calc-switch input:checked + .calc-switch-slider {
    background-color: #06B6D4;
}

.calc-switch input:checked + .calc-switch-slider.purple {
    background-color: #A855F7;
}

.calc-switch input:checked + .calc-switch-slider.green {
    background-color: #10B981;
}

.calc-switch input:checked + .calc-switch-slider.amber {
    background-color: #F59E0B;
}

.calc-switch input:checked + .calc-switch-slider:before {
    transform: translateX(20px);
}

/* Advanced Subcontrols */
.calc-advanced-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--app-border-subtle);
    padding-top: 12px;
}

.calc-adv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--app-border-subtle);
}

.calc-adv-row-highlight {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.06);
}

.calc-adv-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calc-adv-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--app-text);
}

.calc-adv-sub {
    font-size: 10px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.calc-adv-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--app-border-subtle);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calc-adv-box-red {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.05);
}

.calc-adv-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.calc-adv-chip,
.calc-mobile-bracket {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--app-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.calc-adv-chip:hover,
.calc-mobile-bracket:hover {
    border-color: #A855F7;
    color: #A855F7;
}

.calc-adv-chip.active,
.calc-mobile-bracket.active {
    background: rgba(168, 85, 247, 0.2);
    border-color: #A855F7;
    color: #C084FC;
    font-weight: 800;
}

.calc-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.calc-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--app-text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s;
}

.calc-radio:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--app-text);
}

.calc-radio input {
    accent-color: #A855F7;
}

/* Declaration Item Rows */
.calc-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 0 8px;
}

.calc-section-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text);
}

.calc-add-row-btn {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 20px;
    color: #06B6D4;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.calc-add-row-btn:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: #06B6D4;
}

.calc-row-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}

.calc-row-card:focus-within {
    border-color: rgba(6, 182, 212, 0.5);
}

.calc-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.calc-row-badge {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 800;
    color: #06B6D4;
}

.calc-row-delete {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #EF4444;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
}

.calc-row-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.calc-row-field-full {
    grid-column: span 2;
}

.calc-row-field-half {
    grid-column: span 1;
}

/* Overhead Divider */
.calc-divider {
    height: 1px;
    background: var(--app-border-subtle);
    margin: 12px 0;
}

.calc-divider-light {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 14px 0;
}

.calc-overhead-switches {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Results Card */
.calc-result-card {
    background: linear-gradient(135deg, rgba(19, 25, 41, 0.95), rgba(15, 23, 42, 0.95));
    border: 1.5px solid rgba(6, 182, 212, 0.4);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.08);
}

.calc-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.calc-result-icon {
    font-size: 20px;
}

.calc-result-title {
    font-size: 13.5px;
    font-weight: 900;
    color: #FFFFFF;
}

.calc-result-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calc-result-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 11.5px;
    color: var(--app-text-secondary);
}

.calc-result-line strong {
    color: var(--app-text);
    font-weight: 800;
    direction: ltr;
    font-family: inherit;
}

.calc-result-line.cyan {
    background: rgba(6, 182, 212, 0.08);
    color: #06B6D4;
}
.calc-result-line.cyan strong {
    color: #22D3EE;
}

.calc-result-line.green {
    background: rgba(16, 185, 129, 0.08);
    color: #10B981;
}
.calc-result-line.green strong {
    color: #34D399;
}

.calc-result-line.amber {
    background: rgba(245, 158, 11, 0.08);
    color: #F59E0B;
}
.calc-result-line.amber strong {
    color: #FBBF24;
}

.calc-result-line.red {
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
}
.calc-result-line.red strong {
    color: #F87171;
}

/* Grand Total Box */
.calc-grand-total-box {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(16, 185, 129, 0.15));
    border: 1.5px solid #06B6D4;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    margin-bottom: 12px;
}

.calc-grand-label {
    font-size: 12px;
    font-weight: 800;
    color: #94A3B8;
}

.calc-grand-value {
    font-size: 22px;
    font-weight: 900;
    color: #22D3EE;
    direction: ltr;
    letter-spacing: -0.5px;
}

/* Action Buttons */
.calc-action-btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
}

.calc-action-btn.cyan-bg {
    background: linear-gradient(135deg, #06B6D4, #0284C7);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
}

.calc-action-btn.cyan-bg:hover {
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.45);
    transform: translateY(-1px);
}

.calc-action-btn.red-bg {
    background: linear-gradient(135deg, #EF4444, #B91C1C);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.calc-action-btn.red-bg:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
    transform: translateY(-1px);
}

.calc-action-btn.green-bg {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.calc-action-btn.green-bg:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
    transform: translateY(-1px);
}

/* Print Modal */
.calc-print-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calc-print-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.calc-print-content {
    position: relative;
    background: #0F172A;
    border: 1.5px solid rgba(6, 182, 212, 0.4);
    border-radius: 16px;
    width: 92%;
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

.calc-print-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.calc-print-header h3 {
    font-size: 14px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.calc-print-header button {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 18px;
    cursor: pointer;
}

.calc-print-body {
    font-size: 12px;
    line-height: 1.8;
    color: #E2E8F0;
}

.calc-print-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

/* ── Live HS Autocomplete & Candidate Dropdown ── */
.calc-hs-wrap {
    position: relative;
    width: 100%;
}

.calc-hs-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1050;
    background: #0F172A;
    border: 1.5px solid rgba(6, 182, 212, 0.4);
    border-radius: 12px;
    margin-top: 4px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    animation: fadeIn 0.15s ease;
}

.calc-hs-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.calc-hs-item:hover {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.3);
}

.calc-hs-item-code {
    font-weight: 800;
    font-size: 12px;
    color: #06B6D4;
    direction: ltr;
}

.calc-hs-item-desc {
    flex: 1;
    margin: 0 10px;
    font-size: 11px;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.calc-hs-item-duty {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 800;
}

.calc-item-desc-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: #34D399;
    margin-top: 4px;
    grid-column: span 2;
}

/* ── Item Nature Chips (عادی، تولیدی، اساسی) ── */
.calc-nature-chips {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-top: 4px;
}

.calc-nature-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border);
    border-radius: 20px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text-secondary);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    font-family: inherit;
}

.calc-nature-chip:hover {
    border-color: #06B6D4;
    color: #06B6D4;
}

.calc-nature-chip.active {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06B6D4;
    color: #06B6D4;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
}

/* ── Malavani Domestic Status Banner & Chip ── */
.calc-malavani-banner {
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.4);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    grid-column: span 2;
    gap: 8px;
}

.calc-malavani-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calc-malavani-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #F59E0B;
}

.calc-malavani-sub {
    font-size: 9.5px;
    color: var(--app-text-muted);
}

.calc-domestic-toggle-chip {
    background: rgba(217, 119, 6, 0.2);
    border: 1px solid #D97706;
    color: #FBBF24;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.calc-domestic-toggle-chip.domestic {
    background: #D97706;
    color: #FFFFFF;
}

/* ── Effective Duty Box & Overrides ── */
.calc-effective-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--app-border-subtle);
    border-radius: 10px;
    padding: 10px;
    margin-top: 6px;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calc-effective-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calc-effective-badge {
    background: rgba(6, 182, 212, 0.2);
    color: #06B6D4;
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 900;
}

.calc-duty-warning-box {
    color: #F59E0B;
    font-size: 10px;
    line-height: 1.4;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 6px;
    padding: 5px 8px;
}

/* ── Calculator Wizard Modal ── */
.calc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.calc-wizard-dialog {
    background: #0F172A;
    border: 1.5px solid rgba(6, 182, 212, 0.4);
    border-radius: 20px;
    width: 92%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(6, 182, 212, 0.15);
    overflow: hidden;
    animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleUp {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   33. LETTERS & INVOICES (صدور مکاتبات و فاکتور)
   ───────────────────────────────────────────────────────────────────────────── */

.letters-container {
    padding: 0 16px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.letters-tabs-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.letters-tabs-bar::-webkit-scrollbar {
    display: none;
}

.letters-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 12px;
    background: var(--app-pill-bg);
    border: 1px solid var(--app-border-subtle);
    color: var(--app-text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.letters-tab-btn:hover {
    color: var(--app-text);
    border-color: var(--app-border);
}

.letters-tab-btn.active {
    background: rgba(225, 29, 72, 0.15);
    border-color: var(--rose-accent);
    color: #FB7185;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.2);
}

.letters-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
}
.letters-panel.active {
    display: flex;
}

.letters-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.letters-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.letters-card-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--rose-accent);
    display: flex;
    align-items: center;
    gap: 6px;
}

.letters-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 480px) {
    .letters-grid-2 {
        grid-template-columns: 1fr;
    }
}

.letters-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

@media (max-width: 480px) {
    .letters-grid-3 {
        grid-template-columns: 1fr;
    }
}

.letters-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.letters-palette-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.letters-palette-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    opacity: 0.75;
    transition: all 0.2s ease;
}

.letters-palette-chip:hover {
    opacity: 0.95;
}

.letters-palette-chip.active {
    opacity: 1;
    border-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transform: scale(1.02);
}

.letters-palette-chip.rose {
    background: linear-gradient(135deg, #f43f5e, #ea580c);
}

.letters-palette-chip.ocean {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.letters-palette-chip.emerald {
    background: linear-gradient(135deg, #059669, #14b8a6);
}

/* Invoice Line Items */
.letters-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.letters-total-banner {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #10B981;
}

.letters-total-value {
    font-size: 15px;
    direction: ltr;
    display: inline-block;
    color: #34D399;
}

.letters-rows-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.letters-row-card {
    background: var(--app-pill-bg);
    border: 1px solid var(--app-border-subtle);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.letters-row-card.active {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(59, 130, 246, 0.4);
}

.letters-row-card.dragging {
    opacity: 0.45;
    transform: scale(0.98);
    border: 1.5px dashed var(--rose-accent) !important;
}

body.theme-light .letters-row-card.active {
    background: #EFF6FF;
    border-color: rgba(59, 130, 246, 0.35);
}

.letters-row-card input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--rose-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.letters-row-desc-input {
    flex: 1.6;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border-subtle);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--app-text);
    outline: none;
}

.letters-row-desc-input:disabled {
    opacity: 0.55;
    background: transparent;
}

.letters-row-price-input {
    flex: 1;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border-subtle);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--app-text);
    direction: ltr;
    text-align: right;
    outline: none;
}

.letters-row-price-input:disabled {
    opacity: 0.55;
    background: transparent;
}

.letters-row-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.letters-row-btn {
    background: transparent;
    border: none;
    color: var(--app-text-secondary);
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.letters-row-btn:hover {
    background: var(--app-pill-bg);
    color: var(--app-text);
}

.letters-row-btn.del {
    color: #EF4444;
}

/* Digital Signature Modal */
.sig-modal-dialog {
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 92%;
    max-width: 480px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 10001;
}

.sig-canvas-wrap {
    width: 100%;
    height: 220px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1.5px dashed #64748B;
    overflow: hidden;
    position: relative;
    touch-action: none;
}

.sig-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}

.sig-preview-thumb {
    max-height: 48px;
    max-width: 130px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 6px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Print Preview Modal & A4 Paper Container */
.doc-print-modal-dialog {
    background: #0B0F19;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    width: 95%;
    max-width: 860px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
    position: relative;
    z-index: 10001;
}

.doc-print-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: #0F172A;
    border-bottom: 1px solid var(--app-border-subtle);
}

.doc-print-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #1E293B;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.doc-a4-preview-frame {
    width: 100%;
    max-width: 794px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.doc-a4-preview-frame iframe {
    width: 100%;
    min-width: 794px;
    height: 980px;
    border: none;
    display: block;
    background: #ffffff;
}

@media (max-width: 640px) {
    .doc-print-modal-dialog {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .doc-print-modal-body {
        padding: 6px;
    }
    .doc-a4-preview-frame {
        border-radius: 0;
    }
    .doc-a4-preview-frame iframe {
        height: calc(100vh - 70px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIRCULARS & REGULATIONS ENGINE (ابزار پایش بخشنامه‌ها و مقررات جاری)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Search & Filter Card */
.circ-search-card {
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 14px;
}

.circ-input-wrap {
    position: relative;
    width: 100%;
}

.circ-input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--app-text-secondary);
    pointer-events: none;
}

.circ-input-field {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border-subtle);
    border-radius: 12px;
    padding: 0 42px 0 40px;
    font-family: inherit;
    font-size: 13px;
    color: var(--app-text-primary);
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.circ-input-field:focus {
    outline: none;
    border-color: #EC4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
    background: rgba(255, 255, 255, 0.07);
}

.circ-clear-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    color: var(--app-text-secondary);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.circ-clear-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.circ-sort-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.circ-sort-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--app-text-secondary);
}

.circ-sort-buttons {
    display: flex;
    gap: 6px;
}

.circ-sort-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border-subtle);
    border-radius: 8px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.circ-sort-btn.active {
    background: #EC4899;
    color: #ffffff;
    border-color: #EC4899;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

.circ-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.circ-search-submit-btn {
    width: 100%;
    height: 44px;
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-family: inherit;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
    transition: all 0.2s ease;
}

.circ-search-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.45);
}

.circ-search-submit-btn:active {
    transform: translateY(0);
}

/* Status Bar */
.circ-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 0 10px;
    gap: 10px;
}

.circ-counter-badge {
    background: rgba(236, 72, 153, 0.12);
    border: 1px solid rgba(236, 72, 153, 0.3);
    color: #F472B6;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.circ-fs-toggle-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--app-border-subtle);
    color: var(--app-text-secondary);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.circ-fs-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--app-text-primary);
}

/* Circular Cards (High Fidelity Android Equivalent) */
.circ-results-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.circ-card {
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.circ-card:hover {
    transform: translateY(-2px);
    border-color: rgba(236, 72, 153, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.circ-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.circ-gavel-badge {
    background: rgba(236, 72, 153, 0.12);
    border: 1px solid rgba(236, 72, 153, 0.28);
    color: #EC4899;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 65%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.circ-date-badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--app-text-secondary);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    direction: ltr;
}

.circ-card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text-primary);
    line-height: 1.65;
    text-align: justify;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.circ-card-folders {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.circ-card-folder-pill {
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid;
}

.circ-card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 0 10px 0;
}

.circ-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.circ-card-desk-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--app-border-subtle);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--app-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.circ-card-desk-btn.has-folders {
    background: rgba(212, 175, 55, 0.16);
    border-color: #D4AF37;
    color: #D4AF37;
}

.circ-card-cta {
    font-size: 11px;
    font-weight: 800;
    color: #EC4899;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Pagination */
.circ-pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 22px 0 12px;
    flex-wrap: wrap;
}

.circ-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border-subtle);
    color: var(--app-text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.circ-page-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
}

.circ-page-btn.active {
    background: #EC4899;
    color: #ffffff;
    border-color: #EC4899;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
}

.circ-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.circ-page-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
}

.circ-page-jump-input {
    width: 48px;
    height: 34px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--app-border-subtle);
    border-radius: 8px;
    text-align: center;
    color: var(--app-text-primary);
    font-family: inherit;
    font-size: 12px;
    box-sizing: border-box;
}

.circ-page-jump-btn {
    height: 34px;
    padding: 0 10px;
    background: #EC4899;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

/* Detail Modal */
.circ-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.circ-modal-dialog {
    background: #131929;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 800px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
    animation: circModalFadeIn 0.25s ease-out;
}

@keyframes circModalFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.circ-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.circ-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.circ-modal-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
}

.circ-detail-code-badge {
    background: rgba(236, 72, 153, 0.16);
    border: 1px solid rgba(236, 72, 153, 0.35);
    color: #F472B6;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 800;
}

.circ-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.circ-modal-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.circ-modal-btn-close {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: inherit;
    font-weight: 800;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.circ-modal-btn-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Detail Modal Interior Components */
.circ-meta-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.circ-meta-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text-secondary);
}

.circ-meta-val {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.6;
}

/* Luxury Amber-Gold Desk Action Card */
.circ-desk-gold-card {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.14) 0%, rgba(245, 158, 11, 0.06) 100%);
    border: 1.5px solid #D4AF37;
    border-radius: 14px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.12);
}

.circ-desk-gold-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.22);
}

.circ-gold-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #D4AF37;
    color: #161105;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.circ-attachment-download-btn {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #9333EA 0%, #7E22CE 100%);
    color: #ffffff;
    font-family: inherit;
    font-weight: 800;
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.3);
    transition: all 0.2s ease;
}

.circ-attachment-download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(147, 51, 234, 0.4);
}

/* Rich Content & Structured Tables (Android High Fidelity Parity) */
.circ-rich-content {
    font-size: 13px;
    line-height: 1.9;
    color: #E2E8F0;
    text-align: justify;
}

.circ-rich-content h1, .circ-rich-content h2, .circ-rich-content h3 {
    color: #EC4899;
    margin: 14px 0 8px;
    font-size: 14px;
}

.circ-rich-content ul, .circ-rich-content ol {
    padding-right: 20px;
    margin: 8px 0;
}

.circ-rich-content li {
    margin-bottom: 6px;
}

.circ-rich-content blockquote {
    background: rgba(236, 72, 153, 0.08);
    border-right: 3px solid #EC4899;
    padding: 10px 14px;
    margin: 10px 0;
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #FBCFE8;
}

.circ-table-card {
    background: #0B1120;
    border: 1px solid rgba(236, 72, 153, 0.3);
    border-radius: 14px;
    margin: 16px 0;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.circ-table-header-bar {
    background: #131929;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(236, 72, 153, 0.25);
}

.circ-table-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.circ-table-title {
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
}

.circ-table-row-pill {
    background: rgba(236, 72, 153, 0.18);
    border: 1px solid rgba(236, 72, 153, 0.4);
    color: #F472B6;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 800;
}

.circ-table-scroll {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.circ-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    min-width: 580px;
    text-align: right;
}

.circ-th-row {
    background: #1E1B4B;
}

.circ-th {
    background: #1E1B4B;
    color: #C084FC;
    padding: 12px 14px;
    font-weight: 900;
    font-size: 11.5px;
    border-bottom: 2px solid rgba(236, 72, 153, 0.45);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    text-align: center;
}

.circ-th:first-child {
    text-align: right;
}

.circ-th:last-child {
    border-left: none;
}

.circ-tr {
    background: #0F172A;
    transition: background 0.15s ease;
}

.circ-tr.zebra-row {
    background: #131D31;
}

.circ-tr:hover {
    background: rgba(236, 72, 153, 0.12) !important;
}

.circ-td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    color: #F8FAFC;
    line-height: 1.6;
    font-size: 11.5px;
    text-align: center;
}

.circ-td:first-child {
    text-align: right;
    font-weight: 700;
}

.circ-td:last-child {
    border-left: none;
}

.circ-table-hs-badge {
    background: rgba(6, 182, 212, 0.18);
    border: 1px solid rgba(6, 182, 212, 0.45);
    color: #22D3EE;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.circ-table-hs-badge:hover {
    background: rgba(6, 182, 212, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.circ-btn-copy-tsv {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--app-text-secondary);
    border-radius: 7px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.circ-btn-copy-tsv:hover {
    background: rgba(236, 72, 153, 0.2);
    color: #ffffff;
    border-color: #EC4899;
}

/* Keywords Collapsible Accordion (Curtain Dropdown) */
.circ-keywords-accordion {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.07) 0%, rgba(168, 85, 247, 0.04) 50%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(236, 72, 153, 0.3);
    border-radius: 14px;
    margin: 14px 0 10px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.circ-keywords-accordion.expanded {
    border-color: rgba(236, 72, 153, 0.55);
    box-shadow: 0 6px 24px rgba(236, 72, 153, 0.15);
}

.circ-keywords-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    gap: 10px;
}

.circ-keywords-header:hover {
    background: rgba(236, 72, 153, 0.12);
}

.circ-keywords-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: #ffffff;
    flex-wrap: wrap;
}

.circ-keywords-icon {
    font-size: 14px;
}

.circ-keywords-title {
    font-weight: 800;
}

.circ-keywords-count-badge {
    background: rgba(236, 72, 153, 0.18);
    border: 1px solid rgba(236, 72, 153, 0.45);
    color: #F472B6;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
}

.circ-keywords-action-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.circ-keywords-action-text {
    font-size: 11px;
    font-weight: 700;
    color: #EC4899;
    white-space: nowrap;
}

.circ-keywords-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(236, 72, 153, 0.15);
    color: #F472B6;
    font-size: 10px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}

.circ-keywords-accordion.expanded .circ-keywords-arrow {
    transform: rotate(180deg);
    background: rgba(236, 72, 153, 0.35);
}

.circ-keywords-body {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(11, 17, 32, 0.75);
    max-height: 280px;
    overflow-y: auto;
}

.circ-keywords-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* Tag Pills */
.circ-tag-pill {
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
}

.circ-tag-pill.tag-hs {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.35);
    color: #22D3EE;
}

.circ-tag-pill.tag-hs:hover {
    background: rgba(6, 182, 212, 0.22);
    transform: translateY(-1px);
}

.circ-tag-pill.tag-std {
    background: rgba(236, 72, 153, 0.12);
    border-color: rgba(236, 72, 153, 0.3);
    color: #F472B6;
}

.circ-share-btn {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: none;
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.circ-share-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Folder Selection Dialog */
.circ-folder-dialog {
    background: #0F172A;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 22px;
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
    animation: circModalFadeIn 0.2s ease-out;
}

.circ-folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.circ-folder-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.circ-folder-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.circ-folder-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
}

.circ-folder-subtitle {
    font-size: 11px;
    color: var(--app-text-secondary);
}

.circ-folder-body {
    padding: 16px 20px;
}

.circ-folder-target-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.circ-folder-target-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--app-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.circ-folder-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.circ-folder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 14px;
}

.circ-folder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s;
}

.circ-folder-item.checked {
    border-color: #D4AF37;
    background: rgba(212, 175, 55, 0.12);
}

.circ-folder-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.circ-new-folder-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(212, 175, 55, 0.4);
    border-radius: 14px;
    padding: 12px;
}

.circ-new-folder-input {
    flex: 1;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 12px;
    box-sizing: border-box;
}

.circ-btn-add-folder {
    background: #D4AF37;
    border: none;
    border-radius: 8px;
    color: #000;
    font-family: inherit;
    font-weight: 800;
    padding: 0 14px;
    cursor: pointer;
}

.circ-color-palette {
    display: flex;
    gap: 8px;
}

.circ-color-palette .color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
    border: 2px solid transparent;
}

.circ-color-palette .color-dot.active {
    border-color: #ffffff;
    transform: scale(1.2);
}

.circ-folder-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.circ-folder-btn-cancel {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: var(--app-text-secondary);
    padding: 8px 16px;
    font-family: inherit;
    cursor: pointer;
}

.circ-folder-btn-save {
    background: #0D9488;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-family: inherit;
    font-weight: 800;
    padding: 8px 20px;
    cursor: pointer;
}

/* Fullscreen Overlay Mode */
.circ-fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: #0B0F19;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.circ-fullscreen-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.circ-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--app-border-subtle);
    margin-bottom: 16px;
}

.circ-exit-fs-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--app-border-subtle);
    color: var(--app-text-primary);
    border-radius: 8px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.circ-fs-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.circ-fs-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
}

/* Wizard Modal */
.circ-wizard-dialog {
    background: #131929;
    border: 1px solid rgba(236, 72, 153, 0.35);
    border-radius: 20px;
    width: 100%;
    max-width: 580px;
    padding: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
    animation: circModalFadeIn 0.2s ease-out;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. EXPORT VALUE TOOL (ارزش‌های صادراتی گمرک TSC - نسخه اندروید کامپوز)
   ───────────────────────────────────────────────────────────────────────────── */

.export-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.export-badge-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06B6D4;
    font-size: 11px;
    font-weight: 700;
}

/* Collapsible Section */
#exportCollapsibleHeader {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
    overflow: hidden;
    max-height: 800px;
    opacity: 1;
}

#exportCollapsibleHeader.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Sync Status & Metadata Box */
.export-meta-box {
    width: 100%;
    border-radius: 16px;
    background: var(--app-card-bg);
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.export-meta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.export-meta-label {
    font-size: 10px;
    color: var(--app-text-secondary);
}

.export-meta-date {
    font-size: 13px;
    font-weight: 700;
    color: #06B6D4;
}

/* Gemini Pro Style Download Excel Button with Rotating Sweep Gradient */
.gemini-pro-excel-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--app-card-bg);
    color: var(--app-text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.gemini-pro-excel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
}

.gemini-pro-excel-btn::before {
    content: '';
    position: absolute;
    inset: -200%;
    background: conic-gradient(
        from 0deg,
        #4285F4,
        #8B5CF6,
        #EC4899,
        #FF5252,
        #F59E0B,
        #10B981,
        #06B6D4,
        #4285F4
    );
    animation: geminiSweepSpin 3.2s linear infinite;
    z-index: -2;
}

.gemini-pro-excel-btn::after {
    content: '';
    position: absolute;
    inset: 1.8px;
    background: var(--app-card-bg);
    border-radius: 8.2px;
    z-index: -1;
}

@keyframes geminiSweepSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Search Container Box */
.export-search-card {
    width: 100%;
    border-radius: 20px;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.export-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--app-surface-variant);
    border: 1.2px solid var(--app-border);
    border-radius: 12px;
    padding: 4px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.export-input-wrapper:focus-within {
    border-color: #06B6D4;
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
}

.export-input-icon {
    color: #06B6D4;
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-left: 8px;
}

.export-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--app-text);
    font-size: 13px;
    font-family: inherit;
    text-align: right;
    padding: 8px 0;
}

.export-clear-btn {
    background: transparent;
    border: none;
    color: var(--app-text-secondary);
    cursor: pointer;
    font-size: 14px;
    display: none;
    padding: 4px;
    line-height: 1;
}

.export-clear-btn.visible {
    display: block;
}

.export-search-guide {
    font-size: 11px;
    color: var(--app-text-secondary);
    line-height: 1.6;
    text-align: right;
}

.export-chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.export-chip-row::-webkit-scrollbar {
    display: none;
}

.export-chip {
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--app-surface-variant);
    border: 1px solid var(--app-border);
    color: var(--app-text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.export-chip:hover {
    border-color: #06B6D4;
    color: var(--app-text);
}

.export-chip.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: #06B6D4;
    color: #06B6D4;
    font-weight: 700;
}

.export-submit-btn {
    width: 100%;
    background: #06B6D4;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s, transform 0.1s;
}

.export-submit-btn:hover {
    background: #0891B2;
}

.export-submit-btn:active {
    transform: scale(0.99);
}

/* Results Banner Bar */
.export-banner-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    gap: 8px;
}

.export-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06B6D4;
    font-size: 11px;
    font-weight: 700;
}

.export-toggle-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06B6D4;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.export-toggle-view-btn:hover {
    background: rgba(6, 182, 212, 0.25);
}

/* Results List & Cards */
.export-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.export-card {
    width: 100%;
    border-radius: 16px;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s, border-color 0.15s;
}

.export-card:hover {
    border-color: rgba(6, 182, 212, 0.35);
}

.export-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.export-hs-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06B6D4;
    font-size: 14px;
    font-weight: 900;
    direction: ltr;
}

.export-analyze-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06B6D4;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}

.export-analyze-btn:hover {
    background: rgba(6, 182, 212, 0.22);
}

.export-desc-label {
    font-size: 10px;
    color: var(--app-text-secondary);
}

.export-desc-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: var(--app-text);
    text-align: right;
}

.export-details-grid {
    width: 100%;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.theme-light .export-details-grid {
    background: #F8FAFC;
}

.export-detail-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.export-detail-col.start {
    align-items: flex-start;
    text-align: right;
}

.export-detail-col.center {
    align-items: center;
    text-align: center;
}

.export-detail-col.end {
    align-items: flex-end;
    text-align: left;
}

.export-detail-label {
    font-size: 9px;
    color: var(--app-text-secondary);
}

.export-detail-value-price {
    font-size: 15px;
    font-weight: 900;
    color: #10B981;
    direction: ltr;
}

.export-detail-value-unit {
    font-size: 11px;
    font-weight: 700;
    color: #06B6D4;
}

.export-detail-value-law {
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text);
}

.export-spec-row {
    font-size: 10px;
    color: var(--app-text-secondary);
    text-align: right;
}

/* Pagination Row */
.export-pagination-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 20px 0;
}

.export-page-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.export-page-btn:hover:not(:disabled) {
    border-color: #06B6D4;
    color: #06B6D4;
}

.export-page-btn.active {
    background: #06B6D4;
    border-color: #06B6D4;
    color: #FFFFFF;
}

.export-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ═════════════════════════════════════════════════════════════════════════════
   12. TOOL 7 & 8: CBM & CARGOPACK PRO (کانتینربندی، استواژ و حجم CBM)
   ═════════════════════════════════════════════════════════════════════════════ */

.cbm-badge-pro, .cargopack-badge-pro {
    background: rgba(2, 132, 199, 0.15);
    color: #0284C7;
    border: 1px solid rgba(2, 132, 199, 0.35);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.cbm-screen-scroll-body {
    padding: 12px 14px 28px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Top Action Bar */
.cbm-top-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 10px 14px;
}

.cbm-items-count-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text);
}

.cbm-btn-add-cargo {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #0284C7;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cbm-btn-add-cargo:hover {
    background: #0369A1;
    transform: translateY(-1px);
}

/* Cargo Items Container */
.cbm-items-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cbm-cargo-card {
    background: var(--app-card-bg);
    border-radius: 16px;
    border: 1.5px solid var(--cargo-accent, rgba(2, 132, 199, 0.4));
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s;
}

.cbm-cargo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cbm-cargo-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cbm-item-num-chip {
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid currentColor;
}

.cbm-cargo-item-title-input {
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--app-border);
    color: var(--app-text);
    font-size: 13px;
    font-weight: 800;
    padding: 2px 4px;
    outline: none;
    max-width: 170px;
}

.cbm-cargo-item-title-input:focus {
    border-bottom-color: #0284C7;
}

.cbm-item-del-btn {
    background: rgba(244, 63, 94, 0.1);
    color: #F43F5E;
    border: 1px solid rgba(244, 63, 94, 0.3);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.cbm-item-del-btn:hover {
    background: #F43F5E;
    color: #FFFFFF;
}

/* Packaging Preset Trigger Button */
.cbm-packaging-preset-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.cbm-packaging-preset-btn.unselected {
    background: rgba(2, 132, 199, 0.08);
    border: 1px dashed rgba(2, 132, 199, 0.5);
    color: var(--app-text);
}

.cbm-packaging-preset-btn.unselected:hover {
    background: rgba(2, 132, 199, 0.15);
}

.cbm-packaging-preset-btn.selected {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: var(--app-text);
}

/* Shape Category Selector */
.cbm-shape-tabs-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    background: rgba(0, 0, 0, 0.04);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--app-border);
}

.cbm-shape-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    color: var(--app-text-secondary);
    font-size: 9.5px;
    font-weight: 700;
    gap: 3px;
    transition: all 0.2s;
}

.cbm-shape-tab.active {
    background: var(--cargo-accent-bg, rgba(2, 132, 199, 0.15));
    border-color: var(--cargo-accent, #0284C7);
    color: var(--app-text);
}

.cbm-shape-tab .tab-icon {
    font-size: 15px;
}

/* Engineering Hint Banner */
.cbm-eng-hint-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.cbm-eng-hint-banner.info-cyan {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #06B6D4;
}

.cbm-eng-hint-banner.info-amber {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #F59E0B;
}

.cbm-eng-hint-banner.info-purple {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #8B5CF6;
}

.cbm-eng-hint-banner.info-sky {
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.35);
    color: #0EA5E9;
}

/* Inputs Grid */
.cbm-inputs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}

.cbm-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cbm-input-group label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--app-text-secondary);
}

.cbm-input-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cbm-input-field-wrap input, .cbm-input-field-wrap select {
    width: 100%;
    padding: 7px 10px;
    padding-left: 28px;
    border-radius: 10px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--app-text);
    font-size: 13px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.2s;
}

.cbm-input-field-wrap input:focus, .cbm-input-field-wrap select:focus {
    border-color: #0284C7;
}

.cbm-input-field-wrap .cbm-field-unit {
    position: absolute;
    left: 8px;
    font-size: 10px;
    font-weight: 800;
    color: var(--app-text-secondary);
    pointer-events: none;
}

/* Checkbox and Pallet Row */
.cbm-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--app-border);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}

.cbm-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0284C7;
    cursor: pointer;
}

.cbm-checkbox-row span {
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text);
}

.cbm-pallet-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(2, 132, 199, 0.05);
    border: 1px solid rgba(2, 132, 199, 0.25);
    border-radius: 12px;
    padding: 10px 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Results Dashboard
   ───────────────────────────────────────────────────────────────────────────── */

.cbm-results-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.cbm-card-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid var(--app-border);
    padding-bottom: 14px;
}

.cbm-card-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cbm-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text);
}

.cbm-sec-icon {
    font-size: 16px;
}

.cbm-metrics-grid {
    display: grid;
    gap: 8px;
}

.cbm-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cbm-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cbm-metric-tile {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cbm-metric-tile.highlight {
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.4);
}

.cbm-metric-tile.warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.4);
}

.cbm-metric-tile.success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.4);
}

.cbm-metric-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--app-text-secondary);
}

.cbm-metric-number {
    font-size: 17px;
    font-weight: 900;
    color: var(--app-text);
    direction: ltr;
    text-align: right;
}

.cbm-metric-number small {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--app-text-secondary);
}

.cbm-metric-sub {
    font-size: 9px;
    font-weight: 700;
    color: var(--app-text-secondary);
}

/* Center of Gravity (CoG) */
.cbm-cog-dashboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cbm-cog-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 800;
}

.cbm-cog-status-banner.safe {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10B981;
}

.cbm-cog-status-banner.danger {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #EF4444;
}

.cbm-cog-bars-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cbm-cog-bar-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cbm-cog-bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--app-text-secondary);
}

.cbm-cog-bar-meta strong {
    color: var(--app-text);
    direction: ltr;
}

.cbm-progress-track {
    position: relative;
    height: 10px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: hidden;
}

.cbm-cog-safe-bracket {
    position: absolute;
    left: 45%;
    width: 10%;
    top: 0;
    bottom: 0;
    background: rgba(16, 185, 129, 0.35);
    border-left: 1px solid #10B981;
    border-right: 1px solid #10B981;
    z-index: 1;
}

.cbm-progress-fill {
    height: 100%;
    background: #0284C7;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.cbm-progress-fill.warning {
    background: #F59E0B;
}

.cbm-progress-fill.danger {
    background: #EF4444;
}

/* Freight Table */
.cbm-freight-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cbm-freight-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 8px 12px;
}

.cbm-freight-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cbm-freight-badge {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

.cbm-freight-badge.air {
    background: rgba(14, 165, 233, 0.15);
    color: #0EA5E9;
}

.cbm-freight-badge.road {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.cbm-freight-badge.sea {
    background: rgba(99, 102, 241, 0.15);
    color: #6366F1;
}

.cbm-freight-info strong {
    font-size: 11.5px;
    color: var(--app-text);
    display: block;
}

.cbm-freight-info small {
    font-size: 9.5px;
    color: var(--app-text-secondary);
}

.cbm-freight-val {
    text-align: left;
    direction: ltr;
}

.cbm-freight-val strong {
    font-size: 14px;
    font-weight: 900;
    color: var(--app-text);
}

.cbm-freight-val small {
    font-size: 10px;
    color: var(--app-text-secondary);
}

/* Fleet Recommendation Box & Meters */
.cbm-recommendation-box {
    background: rgba(2, 132, 199, 0.08);
    border: 1px solid rgba(2, 132, 199, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 800;
    color: var(--app-text);
    line-height: 1.6;
}

.cbm-fleet-meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}

.cbm-fleet-tile {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cbm-fleet-tile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cbm-fleet-tile-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--app-text);
}

.cbm-fleet-status-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
}

.cbm-fleet-status-badge.ok {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.cbm-fleet-status-badge.over {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

/* Advice List */
.cbm-advice-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cbm-advice-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--app-text);
}

/* 3D Visualizer Canvas */
.cbm-canvas-view-switch {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cbm-view-btn {
    background: transparent;
    border: 1px solid var(--app-border);
    color: var(--app-text-secondary);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.cbm-view-btn.active {
    background: #0284C7;
    border-color: #0284C7;
    color: #FFFFFF;
}

.cbm-canvas-wrapper {
    position: relative;
    width: 100%;
    background: #070B14;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cbm3dCanvas {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    cursor: grab;
}

#cbm3dCanvas:active {
    cursor: grabbing;
}

.cbm-canvas-floating-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.cbm-canvas-floating-controls button {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.cbm-canvas-floating-controls button:hover {
    background: #0284C7;
}

.cbm-canvas-tip {
    position: absolute;
    bottom: 8px;
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Cargo Packaging Tabs & Atlas
   ───────────────────────────────────────────────────────────────────────────── */

.cargopack-tabs-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--app-card-bg);
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 52px;
    z-index: 10;
}

.cargopack-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 4px;
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--app-text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s;
}

.cargopack-tab-item .tab-ic {
    font-size: 16px;
}

.cargopack-tab-item.active {
    color: #0284C7;
    border-bottom-color: #0284C7;
    font-weight: 800;
}

.cargopack-pane {
    display: none;
    padding: 14px;
}

.cargopack-pane.active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cargopack-filter-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cargopack-search-field-box {
    position: relative;
    display: flex;
    align-items: center;
}

.cargopack-search-ic {
    position: absolute;
    right: 12px;
    font-size: 14px;
    color: var(--app-text-secondary);
}

.cargopack-search-input {
    width: 100%;
    padding: 10px 36px 10px 32px;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: var(--app-card-bg);
    color: var(--app-text);
    font-size: 12.5px;
    font-weight: 700;
    outline: none;
}

.cargopack-search-input:focus {
    border-color: #0284C7;
}

.cargopack-clear-btn {
    position: absolute;
    left: 10px;
    background: none;
    border: none;
    color: var(--app-text-secondary);
    cursor: pointer;
    font-size: 12px;
}

.cargopack-category-chips-row {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.cargopack-chip {
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--app-border);
    background: var(--app-card-bg);
    color: var(--app-text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.cargopack-chip.active {
    background: #0284C7;
    border-color: #0284C7;
    color: #FFFFFF;
}

.cargopack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.cargopack-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.2s;
}

.cargopack-card:hover {
    border-color: rgba(2, 132, 199, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.cargopack-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.cargopack-card-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cargopack-card-title-box h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text);
}

.cargopack-card-title-box small {
    font-size: 10px;
    color: var(--app-text-secondary);
    direction: ltr;
    text-align: right;
}

.cargopack-un-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.35);
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.cargopack-card-desc {
    font-size: 11px;
    color: var(--app-text-secondary);
    line-height: 1.5;
}

.cargopack-spec-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 10.5px;
}

.cargopack-spec-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cargopack-spec-item span {
    font-size: 9px;
    color: var(--app-text-secondary);
}

.cargopack-spec-item strong {
    color: var(--app-text);
    font-weight: 800;
}

.cargopack-card-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.cargopack-btn-cbm-dispatch {
    flex: 1;
    background: #0284C7;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s;
}

.cargopack-btn-cbm-dispatch:hover {
    background: #0369A1;
}

.cargopack-btn-details {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.cargopack-btn-details:hover {
    background: rgba(2, 132, 199, 0.1);
    color: #0284C7;
}

/* Modals & Overlays */
.cbm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cbm-modal-dialog {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.cbm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--app-border);
}

.cbm-modal-filter-bar {
    padding: 10px 18px;
    border-bottom: 1px solid var(--app-border);
}

.cbm-modal-search {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--app-border);
    background: var(--app-card-bg);
    color: var(--app-text);
    font-size: 12px;
    outline: none;
}

.cbm-modal-items-list {
    padding: 12px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cbm-picker-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.cbm-picker-item-row:hover {
    background: rgba(2, 132, 199, 0.08);
    border-color: #0284C7;
    transform: translateY(-1px);
}

.cbm-picker-thumb-box {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 12px;
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

body.theme-light .cbm-picker-thumb-box {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.cbm-picker-thumb-box:hover {
    transform: scale(1.04);
    border-color: #0284C7;
}

.cbm-picker-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    border-radius: 10px;
}

.cbm-modal-detail-body {
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cbm-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--app-border);
    background: rgba(0, 0, 0, 0.02);
}

.cbm-modal-action-btn {
    background: #0284C7;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s;
}

.cbm-modal-action-btn:hover {
    background: #0369A1;
}

.cbm-btn-outline {
    background: transparent;
    border: 1px solid var(--app-border);
    color: var(--app-text);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Printable Certificate / Packing Sheet */
.cbm-invoice-sheet {
    background: #FFFFFF;
    color: #0F172A;
    padding: 24px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.6;
}

.cbm-invoice-sheet table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.cbm-invoice-sheet th, .cbm-invoice-sheet td {
    border: 1px solid #CBD5E1;
    padding: 6px 10px;
    text-align: right;
}

.cbm-invoice-sheet th {
    background: #F1F5F9;
    font-weight: 800;
}

.cbm-standards-content {
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cbm-std-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 12px 14px;
}

.cbm-std-card h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 800;
    color: #0284C7;
}

.cbm-std-card p {
    margin: 0;
    font-size: 11px;
    color: var(--app-text-secondary);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARGOPACK & CBM 1:1 IMAGE SYSTEM & FULLSCREEN LIGHTBOX DIALOG
   ═══════════════════════════════════════════════════════════════════════════ */
.cargopack-thumb-box {
    width: 86px;
    height: 86px;
    min-width: 86px;
    border-radius: 12px;
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, border-color 0.2s;
}

.cargopack-thumb-box:hover {
    transform: scale(1.03);
    border-color: #0284c7;
}

.cargopack-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    border-radius: 10px;
}

.cargopack-cnt-thumb-box {
    width: 96px;
    height: 76px;
    min-width: 96px;
    border-radius: 12px;
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, border-color 0.2s;
}

.cargopack-cnt-thumb-box:hover {
    transform: scale(1.03);
    border-color: #0284c7;
}

.cargopack-cnt-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    border-radius: 10px;
}

.cargopack-zoom-badge {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #38bdf8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.cargopack-zoom-pill {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.92);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #38bdf8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.45);
    pointer-events: none;
    white-space: nowrap;
    direction: rtl;
}

.cargopack-fallback-icon {
    font-size: 32px;
    opacity: 0.5;
    color: #94a3b8;
}

/* Quick Info Badge (Exact replication of InfoBadge from CargoPackagingScreen.kt lines 664-685) */
.cargopack-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px;
    white-space: nowrap;
}

body.theme-light .cargopack-info-badge {
    background: #F1F5F9;
    border-color: #E2E8F0;
}

.cargopack-info-badge .badge-lbl {
    color: #94A3B8;
}

body.theme-light .cargopack-info-badge .badge-lbl {
    color: #64748B;
}

.cargopack-info-badge .badge-val {
    color: #FFFFFF;
    font-weight: 700;
}

body.theme-light .cargopack-info-badge .badge-val {
    color: #1E293B;
}

/* DimColumn (Exact replication of DimColumn from CargoPackagingScreen.kt lines 831-840) */
.cargopack-dim-grid {
    display: flex;
    flex: 1;
    justify-content: space-between;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 6px 10px;
}

body.theme-light .cargopack-dim-grid {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.cargopack-dim-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.cargopack-dim-col .dim-title {
    font-size: 9.5px;
    color: #94A3B8;
}

body.theme-light .cargopack-dim-col .dim-title {
    color: #64748B;
}

.cargopack-dim-col .dim-val {
    font-size: 11px;
    font-weight: 800;
    color: #FFFFFF;
}

body.theme-light .cargopack-dim-col .dim-val {
    color: #0F172A;
}

/* Touch hint text (Exact replication of Android hint line 632-637) */
.cargopack-zoom-hint {
    font-size: 10.5px;
    color: #0284C7;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s;
    user-select: none;
}

.cargopack-zoom-hint:hover {
    opacity: 0.85;
    text-decoration: underline;
}

.cargopack-un-badge.non-un {
    background: rgba(148, 163, 184, 0.12);
    color: #94A3B8;
    border-color: rgba(148, 163, 184, 0.25);
}

/* Fullscreen Zoomable Lightbox Modal */
.cargo-image-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #070B12;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cargo-image-viewer-header {
    height: 60px;
    padding: 0 16px;
    background: #0F172A;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cargo-image-viewer-title-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    padding-left: 12px;
}

.cargo-image-viewer-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cargo-image-viewer-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cargo-image-viewer-badge {
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(2, 132, 199, 0.25);
    border: 1px solid rgba(2, 132, 199, 0.6);
    font-size: 10px;
    font-weight: 800;
    color: #38bdf8;
}

.cargo-image-viewer-sub {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cargo-image-viewer-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.cargo-image-viewer-close-btn:hover {
    background: rgba(239, 68, 68, 0.8);
}

.cargo-image-viewer-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    background: radial-gradient(circle, rgba(15, 23, 42, 0.6) 0%, rgba(7, 11, 18, 1) 100%);
}

.cargo-image-viewer-viewport.grabbing {
    cursor: grabbing;
}

.cargo-image-viewer-img-container {
    will-change: transform;
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cargo-image-viewer-img-container img {
    max-width: 88vw;
    max-height: 72vh;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.cargo-image-viewer-footer {
    height: 50px;
    padding: 0 16px;
    background: #0F172A;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cargo-image-viewer-hint {
    font-size: 11px;
    color: #cbd5e1;
    font-weight: 500;
}

.cargo-image-viewer-reset-btn {
    padding: 5px 14px;
    border-radius: 20px;
    background: #0284c7;
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.cargo-image-viewer-reset-btn:hover {
    background: #0369a1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CBM 3D CONTAINERISOMETRICGRAPHIC ADVANCED DECK
   ═══════════════════════════════════════════════════════════════════════════ */
.cbm-container-rec-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.5);
    font-size: 9.5px;
    font-weight: 800;
    color: #10b981;
}

.cbm-container-rec-tag .rec-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

.cbm-fleet-selector-wrap {
    margin-bottom: 8px;
    position: relative;
}

.cbm-fleet-active-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(0, 242, 254, 0.3);
    cursor: pointer;
}

.cbm-fleet-unit-badge {
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(0, 242, 254, 0.2);
    border: 1px solid rgba(0, 242, 254, 0.5);
    color: #00f2fe;
    font-size: 9px;
    font-weight: 800;
}

.cbm-fleet-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: #0F172A;
    border: 1px solid rgba(0, 242, 254, 0.4);
    border-radius: 10px;
    margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
    max-height: 220px;
    overflow-y: auto;
}

.cbm-fleet-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s;
}

.cbm-fleet-dropdown-item:hover, .cbm-fleet-dropdown-item.active {
    background: rgba(0, 242, 254, 0.15);
}

.cbm-segmented-types {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cbm-type-btn {
    flex: 1;
    height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.cbm-type-btn .type-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64748b;
}

.cbm-type-btn.active {
    background: rgba(0, 242, 254, 0.2);
    border-color: #00f2fe;
    color: #00f2fe;
}

.cbm-type-btn.active .type-dot {
    background: #00f2fe;
}

.cbm-type-btn.recommended .type-dot {
    background: #10b981;
}

.cbm-camera-presets-bar {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cbm-cam-btn {
    flex: 1;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.cbm-cam-btn.active {
    background: rgba(0, 242, 254, 0.2);
    color: #00f2fe;
    font-weight: 800;
}

.cbm-display-toggles-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.cbm-toggle-btn {
    flex: 1;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
}

.cbm-toggle-btn.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}

.cbm-filter-chips-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 8px;
    scrollbar-width: thin;
}

.cbm-filter-chip {
    padding: 3px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.cbm-filter-chip.active {
    background: #00f2fe;
    border-color: #00f2fe;
    color: #0f172a;
}

.cbm-step-playback-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 242, 254, 0.2);
    margin: 10px 0;
}

.cbm-play-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: rgba(0, 242, 254, 0.18);
    border: 1px solid rgba(0, 242, 254, 0.5);
    color: #00f2fe;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.cbm-play-btn:hover {
    background: rgba(0, 242, 254, 0.35);
}

.cbm-step-slider-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cbm-step-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: #94a3b8;
}

.cbm-step-slider-col input[type="range"] {
    width: 100%;
    accent-color: #00f2fe;
    height: 4px;
    cursor: pointer;
}

.cbm-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.cbm-telemetry-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 12px;
}

.cbm-tel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #94a3b8;
}

.cbm-telemetry-card .tel-val {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin: 4px 0;
}

.cbm-telemetry-card .tel-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.cbm-telemetry-card .tel-fill {
    height: 100%;
    background: #10b981;
    border-radius: 2px;
}

.cbm-telemetry-card .tel-fill.cyan {
    background: #00f2fe;
}

.cbm-telemetry-card .tel-fill.amber {
    background: #f59e0b;
}

.cbm-telemetry-card .tel-fill.green {
    background: #10b981;
}

.cbm-telemetry-card .tel-sub {
    font-size: 9px;
    color: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAB 2: TECHNICAL 2.5D STOWAGE SIMULATION CANVAS
   ═══════════════════════════════════════════════════════════════════════════ */
.cargopack-stowage-canvas-wrap {
    width: 100%;
    background: #080D1A;
    border: 1px solid rgba(2, 132, 199, 0.35);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

.cargopack-stowage-canvas {
    width: 100%;
    max-width: 500px;
    height: 180px;
}

.cargopack-stowage-canvas-title {
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.cargopack-stowage-canvas-sub {
    font-size: 10px;
    color: #94a3b8;
}

.cargopack-side-by-side-thumbnails {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 12px 0;
}

.cargopack-thumb-card {
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.cargopack-thumb-card:hover {
    transform: scale(1.02);
    border-color: #0284c7;
}

.cargopack-thumb-card-img-box {
    width: 100%;
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cargopack-thumb-card-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cargopack-thumb-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

.cargopack-thumb-card-action {
    font-size: 9.5px;
    color: #0284c7;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RICH TEXT & LETTER STUDIO (ادیتور متن و نامه‌نگار رسمی گمرکی)
   1:1 Pixel-Perfect Android Replication
   ═══════════════════════════════════════════════════════════════════════════ */

.rich-editor-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: var(--app-bg);
    color: var(--app-text);
}

/* Top Action Header */
.rich-editor-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-subtle);
    gap: 8px;
}

.rich-editor-title-group {
    flex: 1;
    min-width: 0;
}

.rich-editor-main-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--app-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rich-editor-sub-title {
    font-size: 11px;
    color: #0284C7;
    margin: 2px 0 0 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rich-editor-actions-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.editor-hdr-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.editor-hdr-btn-help {
    background: rgba(2, 132, 199, 0.12);
    color: #0284C7;
    border: 1px solid rgba(2, 132, 199, 0.35);
}
.editor-hdr-btn-help:hover {
    background: rgba(2, 132, 199, 0.2);
}

.editor-hdr-btn-templates {
    background: #0284C7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}
.editor-hdr-btn-templates:hover {
    background: #0369a1;
}

.editor-hdr-btn-drafts {
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.35);
}
body.theme-light .editor-hdr-btn-drafts {
    background: #FFFBEB;
    color: #B45309;
    border-color: #FDE68A;
}

/* Tabs Bar */
.rich-editor-tabs-bar {
    display: flex;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-subtle);
}

.rich-editor-tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--app-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    transition: all 0.2s ease;
}

.rich-editor-tab-item.active {
    color: #0284C7;
    border-bottom-color: #0284C7;
    background: rgba(2, 132, 199, 0.05);
}

/* Toolbar */
.rich-editor-toolbar-box {
    background: var(--app-surface-variant);
    border-bottom: 1px solid var(--app-border-subtle);
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.toolbar-scroll-row {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1px;
}
.toolbar-scroll-row::-webkit-scrollbar {
    display: none;
}

.toolbar-font-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(2, 132, 199, 0.15);
    border: 1px solid rgba(2, 132, 199, 0.4);
    color: #0284C7;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.toolbar-v-divider {
    width: 1px;
    height: 22px;
    background: var(--app-border-subtle);
    margin: 0 3px;
    flex-shrink: 0;
}

.toolbar-stepper-box {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.toolbar-stepper-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--app-border-subtle);
    color: var(--app-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
}
.toolbar-stepper-btn:hover {
    background: var(--app-pill-bg);
}

.toolbar-stepper-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--app-text);
    min-width: 38px;
    text-align: center;
}

.toolbar-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--app-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.toolbar-icon-btn:hover {
    background: var(--app-pill-bg);
}
.toolbar-icon-btn.active {
    background: rgba(2, 132, 199, 0.22);
    color: #0284C7;
}
.toolbar-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.toolbar-text-btn {
    height: 28px;
    padding: 0 7px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: #0284C7;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.toolbar-text-btn:hover {
    background: rgba(2, 132, 199, 0.12);
}

/* Paper Canvas */
.rich-editor-canvas-container {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rich-editor-paper-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 14px;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}
body.theme-light .rich-editor-paper-card {
    background: #ffffff;
    border-color: #E2E8F0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.paper-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--app-border-subtle);
    font-size: 11px;
}

.paper-font-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(2, 132, 199, 0.12);
    color: #0284C7;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.paper-word-count {
    color: var(--app-text-secondary);
    font-weight: 600;
}

/* Single Textarea / Dual Text Areas */
.rich-editor-textarea {
    width: 100%;
    min-height: 380px;
    background: transparent;
    border: none;
    outline: none;
    resize: vertical;
    color: var(--app-text);
    padding: 10px 4px;
    font-size: 14pt;
    line-height: 1.85;
    box-sizing: border-box;
    white-space: pre-wrap;
}

.rich-editor-textarea::placeholder {
    color: var(--app-text-muted);
    opacity: 0.6;
}

/* Split Area for Table */
.editor-table-section-title {
    font-size: 11px;
    font-weight: 800;
    color: #0284C7;
    margin: 8px 0 4px 0;
}

.rich-editor-pre-table,
.rich-editor-post-table {
    width: 100%;
    min-height: 90px;
    background: transparent;
    border: none;
    outline: none;
    resize: vertical;
    color: var(--app-text);
    padding: 6px 2px;
    font-size: 14pt;
    line-height: 1.85;
    box-sizing: border-box;
    white-space: pre-wrap;
}

/* Interactive Table Card */
.interactive-table-card {
    border: 1.2px solid rgba(2, 132, 199, 0.45);
    border-radius: 10px;
    background: var(--app-surface);
    overflow: hidden;
    margin: 10px 0;
}

.interactive-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--app-surface-variant);
    padding: 8px 12px;
}

.interactive-table-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--app-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.interactive-table-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #EF4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.interactive-table-actions-row {
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(2, 132, 199, 0.05);
    border-top: 1px solid var(--app-border-subtle);
    border-bottom: 1px solid var(--app-border-subtle);
}

.table-grid-action-btn {
    flex: 1;
    height: 30px;
    border-radius: 6px;
    background: rgba(2, 132, 199, 0.1);
    border: 1px solid rgba(2, 132, 199, 0.3);
    color: #0284C7;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.table-grid-action-btn:hover {
    background: rgba(2, 132, 199, 0.18);
}
.table-grid-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.interactive-table-scroll {
    overflow-x: auto;
    padding: 4px;
}

.interactive-table-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.interactive-table-grid th {
    background: rgba(2, 132, 199, 0.2);
    color: #0284C7;
    font-weight: 800;
    border: 1px solid rgba(2, 132, 199, 0.35);
    padding: 5px;
    text-align: center;
}

.interactive-table-grid th input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-weight: 800;
    color: inherit;
    text-align: center;
    font-size: 11px;
}

.interactive-table-grid td {
    border: 1px solid var(--app-border-subtle);
    padding: 4px;
    text-align: center;
    background: var(--app-surface);
}

.interactive-table-grid tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}
body.theme-light .interactive-table-grid tr:nth-child(even) td {
    background: #F8FAFC;
}

.interactive-table-grid td input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--app-text);
    text-align: center;
    font-size: 11px;
}

.interactive-table-add-row-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px;
    background: rgba(2, 132, 199, 0.08);
    color: #0284C7;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border-top: 1px solid var(--app-border-subtle);
}
.interactive-table-add-row-bar:hover {
    background: rgba(2, 132, 199, 0.15);
}

/* Bottom Snippets */
.rich-editor-snippets-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--app-surface);
    border-top: 1px solid var(--app-border-subtle);
    overflow-x: auto;
    scrollbar-width: none;
}
.rich-editor-snippets-bar::-webkit-scrollbar {
    display: none;
}

.quick-snippet-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 8px;
    background: rgba(2, 132, 199, 0.08);
    border: 1px solid rgba(2, 132, 199, 0.25);
    color: #0284C7;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.quick-snippet-chip:hover {
    background: rgba(2, 132, 199, 0.16);
    border-color: #0284C7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAB 1: LETTERHEAD PREVIEW & PDF PRINTING
   ═══════════════════════════════════════════════════════════════════════════ */

.letterhead-tab-container {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.preview-top-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.preview-left-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-print-pdf-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: #059669;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
    transition: all 0.2s ease;
}
.btn-print-pdf-primary:hover {
    background: #047857;
}

.btn-edit-header-outline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: transparent;
    border: 1.2px solid #0284C7;
    color: #0284C7;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.btn-edit-header-outline:hover {
    background: rgba(2, 132, 199, 0.08);
}

.preview-right-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-share-round {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    color: #4F46E5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}
body.theme-dark .btn-share-round {
    background: #1E1B4B;
    border-color: #3730A3;
    color: #818CF8;
}

.btn-copy-round {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F0FDF4;
    border: 1px solid #A7F3D0;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}
body.theme-dark .btn-copy-round {
    background: #064E3B;
    border-color: #047857;
    color: #34D399;
}

/* A4 Sheet Container */
.a4-viewport-wrapper {
    background: #525659;
    border-radius: 12px;
    padding: 24px 12px;
    overflow-x: auto;
    display: flex;
    justify-content: center;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.official-a4-sheet {
    width: 794px;
    min-width: 794px;
    min-height: 1123px;
    background: #ffffff !important;
    color: #0F172A !important;
    padding: 44px 40px;
    box-sizing: border-box;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    margin: 0 auto;
    position: relative;
    font-size: 14pt;
    line-height: 1.85;
}

.official-a4-sheet table.page-container-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    margin: 0;
    padding: 0;
}

.official-a4-sheet table.page-container-table > thead > tr > td,
.official-a4-sheet table.page-container-table > tbody > tr > td,
.official-a4-sheet table.page-container-table > tfoot > tr > td {
    border: none;
    padding: 0;
}

.official-header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2.5px solid #0284c7;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.official-header-logo h1 {
    font-size: 16pt;
    margin: 0;
    color: #0369a1;
    font-weight: 800;
}

.official-header-logo p {
    margin: 4px 0 0 0;
    font-size: 9.5pt;
    color: #64748b;
}

.official-header-meta {
    text-align: left;
    font-size: 10.5pt;
    line-height: 1.7;
    color: #334155;
    white-space: nowrap;
}

.official-bismillah {
    text-align: center;
    font-weight: bold;
    font-size: 13.5pt;
    color: #0f172a;
    margin: 0 0 16px 0;
    letter-spacing: 0.5px;
}

.official-recipient-box {
    font-weight: bold;
    font-size: 14pt;
    margin-bottom: 8px;
    color: #0f172a;
    text-align: right;
}

.official-subject-box {
    font-weight: bold;
    font-size: 13pt;
    margin-bottom: 18px;
    color: #1e3a8a;
    background: #f0f9ff;
    padding: 6px 12px;
    border-right: 4px solid #0284c7;
    border-radius: 4px;
    text-align: right;
}

.official-letter-body {
    text-align: justify;
    text-justify: inter-word;
    font-size: 14pt;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

.official-table-wrapper {
    margin: 20px 0;
}

.official-table-title {
    font-weight: bold;
    font-size: 11pt;
    color: #0284c7;
    margin-bottom: 8px;
    text-align: right;
}

.official-rendered-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 10pt;
    border: 1.5px solid #0284c7;
    background: #ffffff;
}

.official-rendered-table th {
    background-color: #e0f2fe;
    color: #0369a1;
    font-weight: bold;
    border: 1px solid #94a3b8;
    padding: 8px 6px;
    text-align: center;
}

.official-rendered-table td {
    border: 1px solid #cbd5e1;
    padding: 8px 6px;
    text-align: center;
}

.official-rendered-table tr.alt-row td {
    background-color: #f8fafc;
}

.official-signatures-row {
    margin-top: 36px;
    display: flex;
    justify-content: flex-end;
    text-align: center;
}

.official-sign-card {
    width: 250px;
    padding: 10px;
    border-top: 1px dashed #cbd5e1;
    line-height: 1.8;
}

.official-page-footer {
    border-top: 1px solid #e2e8f0;
    margin-top: 24px;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 8.5pt;
    color: #94a3b8;
}

/* Modals */
.rich-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rich-modal-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: zoomModalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomModalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.rich-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--app-border-subtle);
}

.rich-modal-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--app-text);
    margin: 0;
}

.rich-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--app-text-secondary);
    cursor: pointer;
    line-height: 1;
}

.rich-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Templates Modal Items */
.template-item-card {
    background: var(--app-surface-variant);
    border: 1px solid var(--app-border-subtle);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.15s ease;
}
.template-item-card:hover {
    border-color: #0284C7;
    background: rgba(2, 132, 199, 0.06);
}

.template-badge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}

.template-category-tag {
    background: rgba(2, 132, 199, 0.12);
    color: #0284C7;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
}

.template-legal-ref {
    color: var(--app-text-muted);
}

.template-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--app-text);
    margin: 0;
}

.template-item-recipient {
    font-size: 11px;
    color: var(--app-text-secondary);
    margin: 0;
}

.template-load-btn {
    background: #0284C7;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    height: 34px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.template-load-btn:hover {
    background: #0369a1;
}

/* Font Options Modal */
.font-option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--app-border-subtle);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.font-option-row.selected {
    background: rgba(2, 132, 199, 0.12);
    border-color: #0284C7;
}

.font-option-fa {
    font-size: 15px;
    font-weight: 700;
    color: var(--app-text);
}
.font-option-row.selected .font-option-fa {
    color: #0284C7;
}

.font-option-en {
    font-size: 10.5px;
    color: var(--app-text-muted);
    margin-right: 6px;
}

.font-option-desc {
    font-size: 10.5px;
    color: var(--app-text-secondary);
    margin-top: 2px;
}

.font-option-sample {
    font-size: 11.5px;
    color: var(--app-text);
    margin-top: 4px;
    opacity: 0.85;
}

/* Showcase Wizard Modal */
.wizard-step-badge {
    background: rgba(2, 132, 199, 0.15);
    color: #0284C7;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 6px;
    align-self: flex-start;
}

.wizard-step-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--app-text);
    margin: 4px 0;
}

.wizard-step-desc {
    font-size: 12px;
    line-height: 1.8;
    color: var(--app-text-secondary);
    margin: 0;
    white-space: pre-wrap;
}

.wizard-golden-tip-box {
    background: rgba(217, 119, 6, 0.1);
    border: 1px solid rgba(217, 119, 6, 0.3);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11.5px;
    color: #D97706;
    line-height: 1.7;
}
body.theme-light .wizard-golden-tip-box {
    background: #FFFBEB;
    color: #B45309;
    border-color: #FDE68A;
}

.wizard-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--app-border-subtle);
}

.wizard-step-dots {
    display: flex;
    gap: 4px;
}

.wizard-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--app-border-subtle);
}
.wizard-dot.active {
    background: #0284C7;
    width: 16px;
    border-radius: 4px;
}




/* ══════════════════════════════════════════════════════════════════════════════
   OCR SCANNER & TRANSLATOR (1:1 Android Replication)
   ══════════════════════════════════════════════════════════════════════════════ */
.ocr-container {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ocr-hero-card {
    border-radius: 22px;
    background: linear-gradient(135deg, #8B5CF6, #EC4899, #F43F5E);
    padding: 22px 16px;
    text-align: center;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.25);
}

.ocr-hero-icon-circle {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
    font-size: 32px;
}

.ocr-hero-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 6px;
    color: #FFFFFF;
}

.ocr-hero-desc {
    font-size: 11.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 14px;
}

.ocr-badges-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.ocr-feature-badge {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ocr-auto-translate-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ocr-switch-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--app-text);
}

.ocr-switch-sub {
    font-size: 11px;
    color: var(--app-text-secondary);
    margin-top: 3px;
    line-height: 1.5;
}

.btn-ocr-camera {
    height: 52px;
    border-radius: 14px;
    background: #8B5CF6;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    transition: transform 0.15s, opacity 0.15s;
    width: 100%;
}
.btn-ocr-camera:active { transform: scale(0.98); }

.btn-ocr-gallery {
    height: 52px;
    border-radius: 14px;
    background: var(--app-surface);
    border: 1.5px solid #8B5CF6;
    color: #8B5CF6;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    width: 100%;
}
.btn-ocr-gallery:active { transform: scale(0.98); }

.ocr-dropzone {
    border: 2px dashed rgba(139, 92, 246, 0.4);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    background: rgba(139, 92, 246, 0.03);
    transition: all 0.2s ease;
}
.ocr-dropzone.dragover {
    border-color: #EC4899;
    background: rgba(236, 72, 153, 0.08);
}

.ocr-tips-card {
    border-radius: 14px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
    line-height: 1.8;
}
body.theme-light .ocr-tips-card {
    background: #F5F3FF;
    border-color: #DDD6FE;
}

.ocr-processing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 16px;
}

.ocr-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8B5CF6;
    border-radius: 50%;
    animation: ocrSpin 0.9s linear infinite;
}
@keyframes ocrSpin {
    to { transform: rotate(360deg); }
}

.ocr-tabs-bar {
    display: flex;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
}

.ocr-tab-btn {
    flex: 1;
    height: 44px;
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--app-text-secondary);
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.ocr-tab-btn.active {
    color: #8B5CF6;
    border-bottom-color: #8B5CF6;
}

.ocr-quick-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--app-border-subtle);
    background: var(--app-surface);
}

.ocr-hold-banner {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}
body.theme-light .ocr-hold-banner {
    background: #F1F5F9;
}

.ocr-lens-viewport {
    position: relative;
    width: 100%;
    min-height: 280px;
    max-height: 480px;
    background: #000000;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.ocr-lens-canvas {
    max-width: 100%;
    max-height: 480px;
    object-fit: contain;
    display: block;
}

.ocr-text-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.ocr-text-card.translated {
    border-color: rgba(16, 185, 129, 0.35);
}

.ocr-text-content {
    font-size: 12.5px;
    line-height: 2.0;
    color: var(--app-text);
    max-height: 240px;
    overflow-y: auto;
    user-select: text;
    white-space: pre-wrap;
    direction: rtl;
    text-align: right;
    padding: 4px 2px;
}

/* ── Lens Translated Terms Card (Google Lens 1:1) ── */
.ocr-lens-terms-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ocr-lens-terms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ocr-lens-terms-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.ocr-lens-term-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--app-pill-bg);
    border: 1px solid var(--app-border-subtle);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    gap: 10px;
}

.ocr-lens-term-orig {
    direction: ltr;
    color: var(--app-text-secondary);
    font-family: inherit;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ocr-lens-term-trans {
    direction: rtl;
    color: #10B981;
    font-weight: 700;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CAMSCANNER SUITE (اسکن مدارک گمرکی - ۱:۱ Android Jetpack Compose Parity)
   ══════════════════════════════════════════════════════════════════════════════ */

.doc-scanner-container {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 1. Hero Card */
.camscanner-hero-card {
    background: #0F172A;
    border: 1.5px solid rgba(0, 180, 216, 0.8);
    border-radius: 16px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 180, 216, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.camscanner-hero-card:active {
    transform: scale(0.985);
}

.camscanner-hero-glow {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.28) 0%, transparent 70%);
    pointer-events: none;
}

.camscanner-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.camscanner-hero-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.camscanner-chip-badge {
    background: rgba(0, 180, 216, 0.2);
    border: 1px solid rgba(0, 180, 216, 0.5);
    color: #00B4D8;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.camscanner-focus-icon {
    font-size: 20px;
    color: #00B4D8;
}

.camscanner-hero-main-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.camscanner-camera-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 180, 216, 0.15);
    border: 1.5px solid #00B4D8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.camscanner-hero-texts {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.camscanner-hero-title {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 800;
}

.camscanner-hero-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    line-height: 1.6;
}

/* 2. Security Offline Card */
.camscanner-security-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.security-shield-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.security-card-text {
    font-size: 11px;
    color: var(--app-text-secondary);
    line-height: 1.6;
}

/* 3. Search Box */
.camscanner-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 0 14px;
    height: 48px;
    transition: border-color 0.2s ease;
}

.camscanner-search-box:focus-within {
    border-color: #0D9488;
}

.search-box-icon {
    font-size: 16px;
    color: var(--app-text-secondary);
}

.camscanner-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--app-text);
    font-size: 12px;
}

.search-clear-btn {
    background: none;
    border: none;
    color: var(--app-text-secondary);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
}

/* 4. Horizontal Categories */
.camscanner-categories-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.camscanner-categories-scroll::-webkit-scrollbar {
    display: none;
}

.camscanner-filter-chip {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--app-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.camscanner-filter-chip.active {
    background: rgba(13, 148, 136, 0.15);
    border-color: #0D9488;
    color: #0D9488;
    font-weight: 700;
}

/* 5. Documents List */
.camscanner-documents-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Document Card */
.camscanner-doc-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.camscanner-doc-main-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.camscanner-thumb-box {
    width: 68px;
    height: 88px;
    border-radius: 10px;
    background: var(--app-surface-variant);
    border: 1px solid var(--app-border);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camscanner-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camscanner-thumb-pages-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-top-right-radius: 6px;
}

.camscanner-doc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.camscanner-type-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    width: fit-content;
}

.camscanner-doc-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--app-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.camscanner-doc-number {
    font-size: 11px;
    color: var(--app-text-secondary);
    font-weight: 500;
}

.camscanner-doc-meta-row {
    font-size: 10px;
    color: var(--app-text-muted);
    display: flex;
    gap: 6px;
    align-items: center;
}

.camscanner-doc-notes-box {
    background: var(--app-surface-variant);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    color: var(--app-text-secondary);
    line-height: 1.6;
}

.camscanner-doc-divider {
    height: 1px;
    background: var(--app-border-subtle);
    margin: 2px 0;
}

.camscanner-doc-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.camscanner-doc-actions-left {
    display: flex;
    gap: 8px;
    align-items: center;
}

.camscanner-btn-open-pdf {
    background: #0D9488;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.camscanner-btn-share-doc {
    background: transparent;
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.camscanner-icon-action {
    background: transparent;
    border: none;
    color: var(--app-text-secondary);
    cursor: pointer;
    font-size: 16px;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camscanner-icon-action.delete {
    color: #EF4444;
}

/* Empty State */
.camscanner-empty-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.camscanner-empty-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 4px;
}

.camscanner-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--app-text);
}

.camscanner-empty-desc {
    font-size: 12px;
    color: var(--app-text-secondary);
    line-height: 1.7;
    max-width: 320px;
}

/* Fullscreen CamScanner Modal */
.camscanner-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999999 !important;
    background: #000000 !important;
    display: flex;
    flex-direction: column !important;
}

/* All CamScanner Dialogs & Modals that pop OVER the fullscreen camera suite */
#camScannerSaveModal,
#docScannerDiscardModal,
#camScannerPdfModal,
#docScannerDeleteModal,
#docScannerWizardModal,
.camscanner-dialog-overlay {
    z-index: 10000005 !important;
}

.camscanner-modal-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.camscanner-phase-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #000000;
}

.camscanner-top-bar {
    height: 54px;
    background: #0F172A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    color: #FFFFFF;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.camscanner-bar-title {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

.camscanner-icon-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #FFFFFF;
    min-width: 38px;
    height: 38px;
    border-radius: 19px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.camscanner-icon-btn.danger {
    color: #EF4444;
}

/* Phase 1: Viewfinder */
.camscanner-viewfinder-box {
    flex: 1;
    position: relative;
    background: #000000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#camScannerVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camscanner-guide-frame {
    position: absolute;
    inset: 12% 8%;
    border: 2.5px solid #00B4D8;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0, 180, 216, 0.35);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-center-hint {
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.camscanner-camera-controls {
    background: rgba(0, 0, 0, 0.85);
    padding: 14px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.camscanner-mode-pill {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 24px;
    padding: 3px;
    display: flex;
    gap: 4px;
}

.mode-pill-item {
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 20px;
    cursor: pointer;
}

.mode-pill-item.active {
    background: #FFFFFF;
    color: #000000;
}

.camscanner-shutter-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.camscanner-ctrl-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #1E293B;
    border: 1px solid #334155;
    color: #FFFFFF;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.camscanner-shutter-btn {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 4px solid #00B4D8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(0, 180, 216, 0.5);
    transition: transform 0.1s ease;
}

.camscanner-shutter-btn:active {
    transform: scale(0.94);
}

.shutter-inner {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #E2E8F0;
}

.camscanner-page-badge-btn {
    background: #00B4D8;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    gap: 2px;
}

.camscanner-privacy-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}

/* Phase 2: Perspective Crop */
.camscanner-crop-area {
    flex: 1;
    background: #000000;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.camscanner-canvas-wrapper {
    position: relative;
    touch-action: none;
}

#camScannerCropCanvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.crop-corner-handle {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #00B4D8;
    border: 3.5px solid #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: grab;
    touch-action: none;
}

.crop-corner-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.15);
}

/* Loupe Magnifier */
.camscanner-loupe {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #0F172A;
    border: 3px solid #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
    outline: 4px solid rgba(0, 180, 216, 0.5);
    overflow: hidden;
    pointer-events: none;
    z-index: 30;
    transform: translate(-50%, -50%);
}

#camScannerLoupeCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.loupe-crosshair-h {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 2px;
    background: #00B4D8;
    box-shadow: 0 0 2px #000000;
    transform: translateY(-50%);
    pointer-events: none;
}

.loupe-crosshair-v {
    position: absolute;
    left: 50%;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: #00B4D8;
    box-shadow: 0 0 2px #000000;
    transform: translateX(-50%);
    pointer-events: none;
}

.loupe-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid #00B4D8;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.camscanner-crop-controls {
    background: #0F172A;
    padding: 14px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.crop-actions-row {
    display: flex;
    gap: 10px;
}

.crop-action-btn {
    flex: 1;
    height: 40px;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.camscanner-btn-primary {
    width: 100%;
    height: 44px;
    background: #00B4D8;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.camscanner-btn-secondary {
    height: 44px;
    background: transparent;
    color: #FFFFFF;
    border: 1px solid #334155;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 16px;
}

/* Phase 3: Review & Filters */
.camscanner-preview-area {
    flex: 1;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
}

#camScannerPreviewImg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.camscanner-review-controls {
    background: #0F172A;
    padding: 12px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.camscanner-tool-tabs {
    display: flex;
    gap: 8px;
}

.review-tool-tab {
    flex: 1;
    height: 38px;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.review-tool-tab.active {
    background: rgba(0, 180, 216, 0.2);
    border-color: #00B4D8;
    color: #00B4D8;
}

.camscanner-filters-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
}

.camscanner-filters-row::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #FFFFFF;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.filter-chip.active {
    background: rgba(0, 180, 216, 0.25);
    border-color: #00B4D8;
    color: #00B4D8;
    font-weight: 700;
}

.filter-sub-actions {
    display: flex;
    justify-content: flex-end;
}

.filter-sub-btn {
    background: transparent;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #94A3B8;
    padding: 5px 12px;
    font-size: 10.5px;
    cursor: pointer;
}

.camscanner-thumbnails-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0;
    align-items: center;
    scrollbar-width: none;
}

.camscanner-thumbnails-strip::-webkit-scrollbar {
    display: none;
}

.camscanner-strip-item {
    width: 48px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #334155;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.camscanner-strip-item.active {
    border-color: #00B4D8;
}

.camscanner-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camscanner-strip-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

.camscanner-strip-add-btn {
    width: 48px;
    height: 64px;
    border-radius: 8px;
    background: #1E293B;
    border: 1.5px dashed #00B4D8;
    color: #00B4D8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.camscanner-finish-row {
    display: flex;
    gap: 10px;
}

/* Save Metadata Dialog Grid */
.camscanner-save-categories-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.camscanner-save-categories-grid::-webkit-scrollbar {
    display: none;
}

.camscanner-save-cat-chip {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    color: #94A3B8;
    white-space: nowrap;
    cursor: pointer;
}

.camscanner-save-cat-chip.active {
    color: #FFFFFF;
    font-weight: 700;
    border-color: #FFFFFF;
}

.camscanner-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.pdf-viewer-pages-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.pdf-viewer-page-img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    background: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRADE STATISTICS & BI SCREEN (100% Matching Android StatsScreen.kt)
   ═══════════════════════════════════════════════════════════════════════════ */

.stats-screen-container {
    padding: 12px 16px 36px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tabs */
.stats-tabs-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.stats-tabs-scroll-wrapper::-webkit-scrollbar {
    height: 4px;
}

.stats-tabs-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.stats-tabs-row {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 2px 0;
}

.stats-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--app-text-secondary, #94A3B8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.stats-tab-btn:hover {
    color: var(--app-text, #F8FAFC);
    background: rgba(255, 255, 255, 0.04);
}

.stats-tab-btn.active[data-tab="commodity"] {
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.45);
    color: #A78BFA;
    font-weight: 700;
}

.stats-tab-btn.active[data-tab="sourcing"] {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.45);
    color: #FBBF24;
    font-weight: 700;
}

.stats-tab-btn.active[data-tab="golden"] {
    background: rgba(244, 63, 94, 0.14);
    border-color: rgba(244, 63, 94, 0.45);
    color: #FB7185;
    font-weight: 700;
}

.stats-tab-icon {
    font-size: 15px;
    line-height: 1;
}

/* Search & Controls Card */
.stats-search-card {
    background: var(--app-card-bg, #131929);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s;
}

.stats-input-box {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    padding: 0 14px;
    height: 52px;
    margin-bottom: 14px;
    transition: all 0.2s ease;
}

.stats-input-box:focus-within {
    border-color: var(--stats-accent-color, #8B5CF6);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.stats-input-icon {
    font-size: 16px;
    color: var(--app-text-secondary, #94A3B8);
    margin-left: 10px;
}

.stats-text-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--app-text, #F8FAFC);
    font-size: 13.5px;
    font-family: inherit;
    direction: rtl;
}

.stats-text-input::placeholder {
    color: var(--app-text-secondary, #94A3B8);
    font-size: 12.5px;
}

.stats-input-clear-btn {
    background: transparent;
    border: none;
    color: var(--app-text-secondary, #94A3B8);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.stats-input-clear-btn:hover {
    opacity: 1;
    color: #F43F5E;
}

.stats-action-btn {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.15s, filter 0.2s, box-shadow 0.2s;
    user-select: none;
}

.stats-action-btn:active {
    transform: scale(0.985);
}

.stats-btn-purple {
    background: linear-gradient(135deg, #A855F7 0%, #7E22CE 100%);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35);
}

.stats-btn-purple:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.45);
}

.stats-btn-amber {
    background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

.stats-btn-amber:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
}

/* Golden 100 Fiscal Year Selector */
.stats-golden-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--app-text, #F8FAFC);
}

.stats-golden-icon {
    font-size: 16px;
    color: #F43F5E;
}

.stats-year-chips-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.stats-year-chips-row {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.stats-year-chip {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.04);
    color: var(--app-text, #F8FAFC);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.stats-year-chip:hover {
    background: rgba(255, 255, 255, 0.08);
}

.stats-year-chip.active {
    background: #F43F5E;
    border-color: #F43F5E;
    color: #FFFFFF;
    font-weight: 800;
    box-shadow: 0 2px 10px rgba(244, 63, 94, 0.4);
}

/* Results Status Bar */
.stats-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px;
}

.stats-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #A78BFA;
    transition: all 0.2s ease;
}

.stats-fullscreen-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    transform: translateY(-1px);
}

.stats-results-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--app-text, #F8FAFC);
}

/* Loading Box */
.stats-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.stats-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--stats-accent-color, #8B5CF6);
    animation: statsSpin 0.8s linear infinite;
}

@keyframes statsSpin {
    to { transform: rotate(360deg); }
}

.stats-loading-text {
    font-size: 12.5px;
    color: var(--app-text-secondary, #94A3B8);
}

/* Empty State */
.stats-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--app-border, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    text-align: center;
    gap: 12px;
}

.stats-empty-icon {
    font-size: 48px;
    opacity: 0.6;
}

.stats-empty-text {
    font-size: 13px;
    color: var(--app-text-secondary, #94A3B8);
    max-width: 320px;
    line-height: 1.6;
}

/* Context Card */
.stats-card {
    background: var(--app-card-bg, #131929);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stats-context-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-context-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.stats-badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    direction: ltr;
    display: inline-block;
}

.stats-badge-purple {
    background: rgba(139, 92, 246, 0.15);
    color: #A78BFA;
    font-size: 13.5px;
}

.stats-badge-emerald {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.stats-context-desc {
    font-size: 11.5px;
    color: var(--app-text-secondary, #94A3B8);
    line-height: 1.5;
}

/* Section Header */
.stats-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 6px 0;
}

.stats-sec-icon {
    font-size: 17px;
}

.stats-sec-title {
    font-size: 14px;
    font-weight: 800;
    margin: 0;
}

/* Charts */
.stats-chart-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stats-chart-wrapper {
    position: relative;
    width: 100%;
    height: 230px;
}

.stats-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.stats-chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 4px;
}

.stats-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--app-text, #F8FAFC);
    font-weight: 600;
}

.stats-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* 2-Column Grid */
.stats-columns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 540px) {
    .stats-columns-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.stats-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-col-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
}

.stats-col-title {
    font-size: 13px;
    font-weight: 800;
}

.stats-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Pulsing Indicator */
.stats-pulse-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pulse-color, #10B981);
    display: inline-block;
}

.stats-pulse-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--pulse-color, #10B981);
    animation: statsPulseAnim 1.6s infinite ease-out;
}

@keyframes statsPulseAnim {
    0% { transform: scale(0.8); opacity: 0.9; }
    50% { transform: scale(1.6); opacity: 0.2; }
    100% { transform: scale(0.8); opacity: 0.9; }
}

/* List Items */
.stats-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Partner Item Card */
.stats-partner-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--app-card-bg, #131929);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    cursor: pointer;
    transition: all 0.2s ease;
}

.stats-partner-card:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

.stats-partner-name-box {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.stats-partner-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--app-text, #F8FAFC);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-partner-card.expanded .stats-partner-name {
    white-space: normal;
}

.stats-partner-val {
    font-size: 11.5px;
    font-weight: 800;
    font-family: inherit;
    direction: ltr;
    white-space: nowrap;
    margin-right: 6px;
}

/* Sourcing & Golden Item Card */
.stats-item-card {
    position: relative;
    display: flex;
    border-radius: 12px;
    background: var(--app-card-bg, #131929);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stats-item-card:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.stats-item-stripe {
    width: 4px;
    flex-shrink: 0;
    background: var(--stripe-color, #10B981);
}

.stats-item-body {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.stats-item-rank-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stats-rank-badge {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    background: var(--rank-badge-bg, rgba(16, 185, 129, 0.15));
    color: var(--rank-badge-color, #10B981);
}

.stats-item-code {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--app-text, #F8FAFC);
    direction: ltr;
}

.stats-item-val {
    font-size: 12px;
    font-weight: 800;
    direction: ltr;
    color: var(--item-val-color, #10B981);
}

.stats-item-desc {
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--app-text-secondary, #94A3B8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.stats-item-card.expanded .stats-item-desc {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Fullscreen Immersion Modal */
.stats-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--app-bg, #0B0F19);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    direction: rtl;
}

.stats-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--app-header-bg, rgba(15, 23, 42, 0.95));
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    z-index: 2;
}

.stats-fullscreen-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--stats-accent-color, #A78BFA);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.stats-fullscreen-exit-btn:hover {
    background: rgba(139, 92, 246, 0.25);
}

.stats-fullscreen-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text, #F8FAFC);
}

.stats-fullscreen-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EXPLANATORY NOTES (یادداشت‌های توضیحی نمانکلاتور تعرفه WCO)
   100% Android Compose Replication (#9333EA Purple Palette)
   ═══════════════════════════════════════════════════════════════════════════════ */

.hs-notes-container {
    padding: 10px 14px 24px;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

/* 1. Live Search Bar Row */
.hs-notes-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.hs-notes-search-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--app-surface, #131929);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    padding: 2px 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}

body.theme-light .hs-notes-search-wrapper {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.hs-notes-search-wrapper:focus-within {
    border-color: #9333EA;
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.2);
}

.hs-notes-search-icon {
    font-size: 17px;
    color: #9333EA;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.hs-notes-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--app-text, #FFFFFF);
    font-size: 11.5px;
    padding: 10px 0;
    font-weight: 500;
}

body.theme-light .hs-notes-search-input {
    color: #0F172A;
}

.hs-notes-search-input::placeholder {
    color: var(--app-text-muted, #64748B);
    font-size: 11.5px;
}

.hs-notes-clear-btn {
    background: none;
    border: none;
    color: var(--app-text-muted, #64748B);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-notes-clear-btn:hover {
    color: #EF4444;
}

.hs-notes-fs-toggle-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(147, 51, 234, 0.15);
    border: 1px solid rgba(147, 51, 234, 0.35);
    color: #9333EA;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

body.theme-light .hs-notes-fs-toggle-btn {
    background: #F3E8FF;
    border-color: #E9D5FF;
}

.hs-notes-fs-toggle-btn:hover {
    background: rgba(147, 51, 234, 0.25);
    transform: scale(1.03);
}

/* 2. 21-Section Filter Dropdown */
.hs-notes-section-filter-box {
    position: relative;
    margin-bottom: 10px;
}

.hs-notes-section-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(30, 27, 75, 0.5);
    border: 1px solid rgba(147, 51, 234, 0.35);
    border-radius: 12px;
    padding: 9px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

body.theme-light .hs-notes-section-select-trigger {
    background: #FAF5FF;
    border-color: #E9D5FF;
}

.hs-notes-section-select-trigger:hover {
    border-color: #9333EA;
}

.hs-notes-section-label-group {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
}

.hs-notes-filter-icon {
    font-size: 15px;
    color: #9333EA;
}

.hs-notes-current-section-text {
    font-size: 11.5px;
    font-weight: 700;
    color: #E9D5FF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.theme-light .hs-notes-current-section-text {
    color: #581C87;
}

.hs-notes-arrow-icon {
    font-size: 9px;
    color: #9333EA;
    transition: transform 0.2s;
}

.hs-notes-section-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--app-surface, #0F172A);
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
}

body.theme-light .hs-notes-section-dropdown-menu {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.hs-section-item {
    padding: 9px 12px;
    font-size: 11.5px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--app-text, #F8FAFC);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.theme-light .hs-section-item {
    color: #0F172A;
}

.hs-section-item:hover {
    background: rgba(147, 51, 234, 0.12);
}

.hs-section-item.active {
    background: rgba(147, 51, 234, 0.25);
    color: #D8B4FE;
    font-weight: 800;
}

body.theme-light .hs-section-item.active {
    background: #F3E8FF;
    color: #7E22CE;
}

.hs-section-divider {
    height: 1px;
    background: var(--app-border, rgba(255, 255, 255, 0.1));
    margin: 4px 6px;
}

body.theme-light .hs-section-divider {
    background: #E2E8F0;
}

/* 3. Counter Bar */
.hs-notes-counter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--app-text-secondary, #94A3B8);
}

body.theme-light .hs-notes-counter-bar {
    color: #64748B;
}

.hs-notes-section-badge {
    color: #9333EA;
    font-weight: 800;
    font-size: 11px;
    background: rgba(147, 51, 234, 0.12);
    padding: 2px 8px;
    border-radius: 6px;
}

/* 4. Loading & Empty State */
.hs-notes-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    gap: 14px;
    color: var(--app-text-secondary, #94A3B8);
    font-size: 12px;
}

.hs-notes-spinner {
    width: 36px;
    height: 36px;
    border: 3.5px solid rgba(147, 51, 234, 0.2);
    border-top-color: #9333EA;
    border-radius: 50%;
    animation: hsNotesSpin 0.8s linear infinite;
}

@keyframes hsNotesSpin {
    to { transform: rotate(360deg); }
}

.hs-notes-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 16px;
    gap: 8px;
    color: var(--app-text-secondary, #94A3B8);
    text-align: center;
}

.hs-notes-empty-icon {
    font-size: 42px;
    color: var(--app-text-muted, #64748B);
    opacity: 0.6;
}

.hs-notes-empty-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--app-text, #F8FAFC);
}

body.theme-light .hs-notes-empty-title {
    color: #0F172A;
}

.hs-notes-empty-sub {
    font-size: 11.5px;
    color: var(--app-text-muted, #64748B);
}

/* 5. Chapters List & Cards */
.hs-notes-chapters-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hs-chapter-card {
    background: var(--app-surface, #0F172A);
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}

body.theme-light .hs-chapter-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hs-chapter-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(147, 51, 234, 0.12);
    border-color: rgba(147, 51, 234, 0.45);
}

.hs-card-top-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.hs-card-info-col {
    flex: 1;
    min-width: 0;
}

.hs-card-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.hs-badge-section {
    background: rgba(147, 51, 234, 0.15);
    border: 1px solid rgba(147, 51, 234, 0.3);
    color: #D8B4FE;
    font-size: 10px;
    font-weight: 800;
    border-radius: 6px;
    padding: 2px 6px;
}

body.theme-light .hs-badge-section {
    background: #F3E8FF;
    border-color: #E9D5FF;
    color: #7E22CE;
}

.hs-badge-chapter {
    background: #9333EA;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 900;
    border-radius: 6px;
    padding: 2.5px 7px;
}

.hs-card-title-fa {
    font-size: 13.5px;
    font-weight: 900;
    color: var(--app-text, #F8FAFC);
    line-height: 20px;
    margin: 0 0 3px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.theme-light .hs-card-title-fa {
    color: #0F172A;
}

.hs-card-title-en {
    font-size: 10.5px;
    color: var(--app-text-secondary, #94A3B8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-weight: 500;
}

body.theme-light .hs-card-title-en {
    color: #64748B;
}

.hs-card-thumb-box {
    width: 105px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(147, 51, 234, 0.25);
    background: rgba(30, 27, 75, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.theme-light .hs-card-thumb-box {
    background: #F5F3FF;
    border-color: #DDD6FE;
}

.hs-card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hs-card-thumb-placeholder {
    font-size: 28px;
    color: #9333EA;
    opacity: 0.6;
}

.hs-card-content-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}

.hs-content-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2.5px 7px;
    border-radius: 6px;
}

.hs-content-badge-legal {
    background: rgba(139, 92, 246, 0.15);
    color: #C4B5FD;
}

body.theme-light .hs-content-badge-legal {
    background: #EDE9FE;
    color: #6D28D9;
}

.hs-content-badge-heading {
    background: rgba(6, 182, 212, 0.15);
    color: #67E8F9;
}

body.theme-light .hs-content-badge-heading {
    background: #CFFAFE;
    color: #0E7490;
}

.hs-content-badge-gc {
    background: rgba(245, 158, 11, 0.15);
    color: #FCD34D;
}

body.theme-light .hs-content-badge-gc {
    background: #FEF3C7;
    color: #B45309;
}

.hs-card-preview-box {
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 11.5px;
    line-height: 19px;
    color: var(--app-text-secondary, #94A3B8);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: justify;
}

body.theme-light .hs-card-preview-box {
    background: #F8FAFC;
    border-color: #F1F5F9;
    color: #64748B;
}

.hs-card-action-btn {
    margin-top: 10px;
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(147, 51, 234, 0.12);
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 10px;
    color: #9333EA;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}

body.theme-light .hs-card-action-btn {
    background: #F3E8FF;
    border-color: #E9D5FF;
}

.hs-card-action-btn:hover {
    background: rgba(147, 51, 234, 0.22);
    transform: translateY(-1px);
}

/* 6. Detail Reader Modal */
.hs-note-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-note-detail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(5px);
}

.hs-note-detail-card {
    position: relative;
    width: 94%;
    max-width: 920px;
    height: 90vh;
    max-height: 90vh;
    background: var(--app-surface, #0F172A);
    border: 1px solid rgba(147, 51, 234, 0.35);
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

body.theme-light .hs-note-detail-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.hs-note-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
}

body.theme-light .hs-note-detail-header {
    border-color: #E2E8F0;
}

.hs-note-detail-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.hs-modal-chapter-badge {
    background: #9333EA;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.hs-modal-title-box {
    min-width: 0;
    flex: 1;
}

.hs-modal-title-fa {
    margin: 0;
    font-size: 13.5px;
    font-weight: 900;
    color: var(--app-text, #F8FAFC);
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.theme-light .hs-modal-title-fa {
    color: #0F172A;
}

.hs-modal-title-en {
    font-size: 10.5px;
    color: var(--app-text-secondary, #94A3B8);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.theme-light .hs-modal-title-en {
    color: #64748B;
}

.hs-modal-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--app-text-secondary, #94A3B8);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.hs-modal-close-btn:hover {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
}

.hs-note-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
}

.hs-modal-section-banner {
    background: rgba(30, 27, 75, 0.5);
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #D8B4FE;
}

body.theme-light .hs-modal-section-banner {
    background: #FAF5FF;
    border-color: #E9D5FF;
    color: #6B21A8;
}

.hs-modal-block {
    border-radius: 14px;
    padding: 12px 14px;
}

.hs-block-legal {
    background: rgba(30, 27, 75, 0.35);
    border: 1px solid rgba(147, 51, 234, 0.3);
}

body.theme-light .hs-block-legal {
    background: #FDF4FF;
    border-color: #F5D0FE;
}

.hs-block-gc {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

body.theme-light .hs-block-gc {
    background: #FFFBEB;
    border-color: #FDE68A;
}

.hs-block-headings {
    background: rgba(3, 105, 161, 0.1);
    border: 1px solid rgba(2, 132, 199, 0.3);
}

body.theme-light .hs-block-headings {
    background: #F0F9FF;
    border-color: #BAE6FD;
}

.hs-block-subnotes {
    background: rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

body.theme-light .hs-block-subnotes {
    background: #ECFDF5;
    border-color: #A7F3D0;
}

.hs-modal-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.hs-modal-icon {
    font-size: 16px;
}

.hs-modal-block-title {
    font-size: 13px;
    font-weight: 900;
}

.hs-block-legal .hs-modal-block-title {
    color: #D8B4FE;
}

body.theme-light .hs-block-legal .hs-modal-block-title {
    color: #6B21A8;
}

.hs-block-gc .hs-modal-block-title {
    color: #FCD34D;
}

body.theme-light .hs-block-gc .hs-modal-block-title {
    color: #B45309;
}

.hs-block-headings .hs-modal-block-title {
    color: #7DD3FC;
}

body.theme-light .hs-block-headings .hs-modal-block-title {
    color: #0369A1;
}

.hs-block-subnotes .hs-modal-block-title {
    color: #6EE7B7;
}

body.theme-light .hs-block-subnotes .hs-modal-block-title {
    color: #047857;
}

/* Legal notes card items */
.hs-legal-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(147, 51, 234, 0.25);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
}

body.theme-light .hs-legal-item {
    background: #FFFFFF;
    border-color: #F5D0FE;
}

.hs-legal-item-pill {
    display: inline-block;
    background: #9333EA;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 6px;
    padding: 2.5px 7px;
    margin-bottom: 6px;
}

.hs-legal-item-text {
    font-size: 12px;
    line-height: 22px;
    color: var(--app-text, #F8FAFC);
    text-align: justify;
    margin: 0 0 6px 0;
}

body.theme-light .hs-legal-item-text {
    color: #0F172A;
}

.hs-subclauses-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.hs-subclause-item {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

body.theme-light .hs-subclause-item {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.hs-subclause-label {
    background: rgba(147, 51, 234, 0.2);
    color: #C4B5FD;
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
    padding: 1.5px 6px;
    white-space: nowrap;
}

body.theme-light .hs-subclause-label {
    background: #F3E8FF;
    color: #9333EA;
}

.hs-subclause-text {
    font-size: 11.5px;
    line-height: 19px;
    color: var(--app-text, #F8FAFC);
    flex: 1;
}

body.theme-light .hs-subclause-text {
    color: #0F172A;
}

/* General Considerations content */
.hs-gc-content {
    font-size: 12px;
    line-height: 22px;
    color: var(--app-text, #F8FAFC);
    text-align: justify;
    white-space: pre-wrap;
}

body.theme-light .hs-gc-content {
    color: #0F172A;
}

/* Headings & Subheadings */
.hs-heading-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(2, 132, 199, 0.25);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
}

body.theme-light .hs-heading-item {
    background: #FFFFFF;
    border-color: #BAE6FD;
}

.hs-heading-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.hs-heading-pill {
    background: #0284C7;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    border-radius: 6px;
    padding: 2.5px 7px;
    white-space: nowrap;
}

.hs-heading-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--app-text, #F8FAFC);
    margin: 0;
    flex: 1;
}

body.theme-light .hs-heading-title {
    color: #0F172A;
}

.hs-heading-notes {
    font-size: 11.5px;
    line-height: 20px;
    color: var(--app-text, #F8FAFC);
    text-align: justify;
    margin: 6px 0;
    white-space: pre-wrap;
}

body.theme-light .hs-heading-notes {
    color: #0F172A;
}

.hs-subheadings-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-subheading-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    line-height: 18px;
}

.hs-subheading-code {
    color: #0284C7;
    font-weight: 800;
    font-size: 10.5px;
    white-space: nowrap;
}

.hs-subheading-title {
    color: var(--app-text-secondary, #94A3B8);
}

body.theme-light .hs-subheading-title {
    color: #64748B;
}

/* Subheading Notes */
.hs-subnote-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 20px;
    color: var(--app-text, #F8FAFC);
    text-align: justify;
    margin-bottom: 6px;
}

body.theme-light .hs-subnote-box {
    background: #FFFFFF;
    border-color: #A7F3D0;
    color: #0F172A;
}

/* Modal Footer */
.hs-note-detail-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    background: var(--app-surface, #0F172A);
}

body.theme-light .hs-note-detail-footer {
    background: #FFFFFF;
    border-color: #E2E8F0;
}

.hs-modal-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.hs-btn-copy {
    background: rgba(147, 51, 234, 0.15);
    color: #D8B4FE;
    border-color: rgba(147, 51, 234, 0.35);
}

body.theme-light .hs-btn-copy {
    background: #F3E8FF;
    color: #7E22CE;
}

.hs-btn-close {
    background: rgba(255, 255, 255, 0.1);
    color: var(--app-text, #F8FAFC);
    border-color: rgba(255, 255, 255, 0.15);
    min-width: 100px;
    justify-content: center;
}

body.theme-light .hs-btn-close {
    background: #E2E8F0;
    color: #0F172A;
    border-color: #CBD5E1;
}

.hs-btn-close:hover {
    background: rgba(255, 255, 255, 0.18);
    opacity: 0.95;
}


/* 7. Fullscreen Immersion Modal */
.hs-notes-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: var(--app-bg, #0B0F19);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.theme-light .hs-notes-fullscreen-modal {
    background: #F1F5F9;
}

.hs-notes-fs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    background: var(--app-surface, #0F172A);
    backdrop-filter: blur(10px);
}

body.theme-light .hs-notes-fs-header {
    background: #FFFFFF;
    border-color: #E2E8F0;
}

.hs-notes-fs-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(147, 51, 234, 0.15);
    border: 1px solid rgba(147, 51, 234, 0.35);
    color: #D8B4FE;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
}

body.theme-light .hs-notes-fs-title-badge {
    background: #F3E8FF;
    border-color: #E9D5FF;
    color: #7E22CE;
}

.hs-notes-fs-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9333EA;
}

.hs-notes-fs-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    color: var(--app-text, #F8FAFC);
    cursor: pointer;
    transition: all 0.2s;
}

body.theme-light .hs-notes-fs-exit-btn {
    background: #E2E8F0;
    border-color: #CBD5E1;
    color: #0F172A;
}

.hs-notes-fs-exit-btn:hover {
    background: rgba(147, 51, 234, 0.2);
}

.hs-notes-fs-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 24px;
    -webkit-overflow-scrolling: touch;
}

/* ═════════════════════════════════════════════════════════════════════════════
   13. TOOL: SMART DOCUMENTS GENERATOR & PROFORMA STUDIO (صدور اسناد تجاری)
   100% Android Jetpack Compose DocumentsScreen.kt Parity
   ═════════════════════════════════════════════════════════════════════════════ */

.doc-landing-container {
    padding: 12px 14px 28px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* 1. Hero Card */
.doc-hero-banner {
    position: relative;
    background: linear-gradient(135deg, #1E0533 0%, #0F0F2D 50%, #1A1040 100%);
    border: 1px solid rgba(236, 72, 153, 0.28);
    border-radius: 24px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.doc-hero-icon-wrap {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-hero-glow {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(236, 72, 153, 0.22);
    animation: docPulse 2s ease-in-out infinite alternate;
}

@keyframes docPulse {
    0% { transform: scale(0.9); opacity: 0.4; }
    100% { transform: scale(1.15); opacity: 0.9; }
}

.doc-hero-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle, #EC4899 0%, #8B5CF6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(236, 72, 153, 0.5);
    z-index: 1;
}

.doc-hero-title {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.doc-hero-eng-title {
    color: #EC4899;
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.doc-hero-desc {
    color: #94A3B8;
    font-size: 11.5px;
    line-height: 1.8;
    margin: 0 0 20px 0;
    max-width: 500px;
}

.doc-hero-launch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 16px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.doc-hero-launch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(236, 72, 153, 0.55);
}

/* 2. Wizard Roadmap Cards */
.doc-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.doc-section-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text, #F8FAFC);
    margin: 0;
}

.doc-section-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(236, 72, 153, 0.15);
    color: #EC4899;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.doc-steps-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-step-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--app-card-bg, #131929);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.doc-step-card:hover {
    transform: translateX(-4px);
    border-color: rgba(236, 72, 153, 0.4);
    background: var(--app-pill-bg, rgba(255, 255, 255, 0.04));
}

.doc-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    flex-shrink: 0;
}

.doc-step-info {
    flex: 1;
    min-width: 0;
}

.doc-step-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text, #F8FAFC);
    margin-bottom: 2px;
}

.doc-step-sub {
    font-size: 10.5px;
    color: var(--text-muted, #94A3B8);
}

.doc-step-arrow {
    font-size: 18px;
    color: var(--text-muted, #64748B);
    font-weight: bold;
    opacity: 0.6;
}

/* 3. Features Carousel */
.doc-features-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 10px 2px;
    scrollbar-width: thin;
}

.doc-features-carousel::-webkit-scrollbar {
    height: 4px;
}

.doc-features-carousel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.doc-feature-card {
    flex: 0 0 120px;
    background: var(--app-card-bg, #131929);
    border: 1px solid;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    box-sizing: border-box;
}

.doc-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.doc-feature-title {
    font-size: 10px;
    font-weight: 800;
    color: var(--app-text, #F8FAFC);
    line-height: 1.3;
}

.doc-feature-sub {
    font-size: 9px;
    color: var(--text-muted, #94A3B8);
    line-height: 1.3;
}

/* 4. Bottom CTA */
.doc-bottom-cta {
    margin-top: 4px;
}

.doc-bottom-btn {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.doc-bottom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(236, 72, 153, 0.5);
}

/* 5. Studio View */
.doc-studio-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 120px);
}

.doc-studio-subbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--app-card-bg, #111827);
    border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    padding: 10px 14px;
    border-radius: 12px 12px 0 0;
}

.doc-studio-subbar-title {
    display: flex;
    flex-direction: column;
}

.doc-studio-subbar-title strong {
    font-size: 13px;
    color: var(--app-text, #F8FAFC);
}

.doc-studio-subbar-title span {
    font-size: 9px;
    color: #EC4899;
    font-weight: 700;
}

.doc-studio-subbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.doc-subbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--app-pill-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--app-text, #F8FAFC);
}

.doc-subbar-btn:hover {
    background: rgba(236, 72, 153, 0.15);
    border-color: rgba(236, 72, 153, 0.4);
}

.doc-subbar-back-btn {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

.doc-subbar-back-btn:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.5);
}

.doc-iframe-wrapper {
    flex: 1;
    width: 100%;
    min-height: calc(100vh - 170px);
    background: #0f172a;
    position: relative;
}

body.theme-light .doc-iframe-wrapper {
    background: #f4f6f9;
}

.doc-generator-iframe {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 170px);
    border: none;
    display: block;
}

.hidden,
.doc-studio-container.hidden,
.doc-landing-container.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PDF TOOLS STUDIO (استودیو بومی پردازش PDF)
   Exact Replication of Android Jetpack Compose Screen
   ═══════════════════════════════════════════════════════════════════ */

.pdf-studio-wrap {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    direction: rtl;
}

/* 1. ULTRA LUXURY BANNER */
.pdf-hub-banner {
    position: relative;
    border-radius: 22px;
    background: linear-gradient(135deg, #1E1B4B 0%, #4C0519 50%, #0F172A 100%);
    border: 1.2px solid rgba(244, 63, 94, 0.45);
    padding: 20px;
    box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.35);
    color: #FFFFFF;
    overflow: hidden;
}

.pdf-hub-banner-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.35) 0%, transparent 70%);
    pointer-events: none;
}

.pdf-banner-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pdf-banner-title-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdf-banner-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #F43F5E, #BE123C);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.pdf-banner-title {
    font-size: 15.5px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.2px;
}

.pdf-banner-offline-tag {
    font-size: 10px;
    font-weight: 700;
    color: #34D399;
    background: rgba(16, 185, 129, 0.20);
    border: 1px solid rgba(16, 185, 129, 0.40);
    border-radius: 6px;
    padding: 3px 8px;
}

.pdf-banner-desc {
    font-size: 11.5px;
    color: #E2E8F0;
    line-height: 1.7;
    margin: 0;
}

/* 2. SECTION HEADER */
.pdf-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.pdf-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--app-text);
}

.pdf-section-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--app-text-secondary);
}

/* 3. 6 TOOL CARDS GRID */
.pdf-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 480px) {
    .pdf-tools-grid {
        grid-template-columns: 1fr;
    }
}

.pdf-tool-card {
    min-height: 164px;
    border-radius: 20px;
    padding: 14px;
    background: var(--app-card-bg);
    border: 1.2px solid var(--app-border);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    user-select: none;
}

.pdf-tool-card:hover {
    transform: translateY(-3px);
}

.pdf-tool-card:active {
    transform: scale(0.98);
}

.pdf-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pdf-card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #FFFFFF;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.pdf-card-tag {
    font-size: 9.5px;
    font-weight: 700;
    border-radius: 8px;
    padding: 3px 8px;
    border: 1px solid;
}

.pdf-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
}

.pdf-card-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-card-subtitle {
    font-size: 10.5px;
    color: var(--app-text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 30px;
}

/* 4. RECENT PROCESSED FILES */
.pdf-recent-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.pdf-recent-row-card {
    border-radius: 16px;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pdf-recent-row-card:hover {
    border-color: rgba(239, 68, 68, 0.4);
}

.pdf-recent-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.pdf-recent-info {
    flex: 1;
    min-width: 0;
}

.pdf-recent-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-recent-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.pdf-file-type-pill {
    font-size: 9px;
    font-weight: 800;
    border-radius: 4px;
    padding: 1px 5px;
}

.pdf-recent-meta {
    font-size: 10px;
    color: var(--app-text-secondary);
}

.pdf-recent-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pdf-circle-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    background: var(--app-pill-bg);
    color: var(--app-text);
    transition: all 0.15s ease;
}

.pdf-circle-action-btn:hover {
    transform: scale(1.08);
}

.pdf-circle-action-btn.delete-btn {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

.pdf-circle-action-btn.delete-btn:hover {
    background: rgba(239, 68, 68, 0.22);
}

/* 5. FLOW / WORKBENCH VIEW */
.pdf-flow-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pdf-flow-subbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
}

.pdf-flow-heading {
    font-size: 16px;
    font-weight: 800;
    color: var(--app-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdf-btn-subbar {
    background: var(--app-pill-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.pdf-btn-subbar:hover {
    background: rgba(255, 255, 255, 0.12);
}

.pdf-btn-subbar.back-btn {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

.pdf-btn-subbar.back-btn:hover {
    background: rgba(239, 68, 68, 0.22);
}

/* 6. UPLOAD DROPZONE */
.pdf-dropzone {
    border: 2px dashed var(--app-border);
    border-radius: 18px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--app-card-bg);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pdf-dropzone:hover, .pdf-dropzone.dragover {
    border-color: #38BDF8;
    background: rgba(56, 189, 248, 0.05);
    transform: scale(1.01);
}

.pdf-dropzone-icon {
    font-size: 44px;
    line-height: 1;
}

.pdf-dropzone-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--app-text);
}

.pdf-dropzone-sub {
    font-size: 12px;
    color: var(--app-text-secondary);
}

/* 7. FILE SUMMARY CARD */
.pdf-file-summary-card {
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--app-border);
}

.pdf-summary-icon {
    font-size: 30px;
    flex-shrink: 0;
}

.pdf-summary-info {
    flex: 1;
    min-width: 0;
}

.pdf-summary-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-summary-meta {
    font-size: 11px;
    color: var(--app-text-secondary);
    margin-top: 2px;
}

/* 8. HORIZONTAL THUMBNAIL CAROUSEL */
.pdf-carousel-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdf-carousel-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 2px 12px 2px;
    scrollbar-width: thin;
}

.pdf-thumbnail-card {
    width: 76px;
    height: 106px;
    border-radius: 10px;
    background: var(--app-surface-variant);
    border: 2px solid var(--app-border);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-thumbnail-card.selected {
    border-color: #0284C7;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.4);
}

.pdf-thumbnail-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pdf-thumb-num-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 700;
    border-bottom-left-radius: 8px;
    padding: 2px 6px;
}

/* 9. 3-COLUMN PAGE GRID FOR DELETE */
.pdf-delete-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin;
}

.pdf-delete-page-card {
    height: 140px;
    border-radius: 12px;
    background: var(--app-card-bg);
    border: 1.5px solid var(--app-border);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
}

.pdf-delete-page-card:hover {
    border-color: rgba(239, 68, 68, 0.5);
}

.pdf-delete-page-card.marked-delete {
    border: 2.5px solid #EF4444;
}

.pdf-delete-overlay {
    position: absolute;
    inset: 0;
    background: rgba(239, 68, 68, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 32px;
}

.pdf-delete-overlay span {
    font-size: 11px;
    font-weight: 800;
    margin-top: 4px;
}

/* 10. PRESET CARDS (COMPRESS) */
.pdf-presets-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdf-preset-card {
    border-radius: 14px;
    border: 1.5px solid var(--app-border);
    background: var(--app-card-bg);
    padding: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.pdf-preset-card.active {
    border-color: #0D9488;
    background: rgba(13, 148, 136, 0.12);
}

.pdf-radio-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdf-preset-card.active .pdf-radio-indicator {
    border-color: #0D9488;
}

.pdf-radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0D9488;
    display: none;
}

.pdf-preset-card.active .pdf-radio-dot {
    display: block;
}

/* 11. REORDERABLE ITEMS LIST (MERGE & IMAGES) */
.pdf-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.pdf-item-row {
    border-radius: 12px;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdf-order-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.pdf-item-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-item-sub {
    font-size: 10px;
    color: var(--app-text-secondary);
}

.pdf-reorder-btn {
    background: none;
    border: none;
    color: var(--app-text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.pdf-reorder-btn:hover {
    color: var(--app-text);
    background: var(--app-pill-bg);
}

/* 12. RUN ACTION BUTTONS */
.pdf-btn-run {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border: none;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    margin-top: 6px;
}

.pdf-btn-run:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.pdf-btn-run:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* 13. SUCCESS RESULT MODAL */
.pdf-savings-banner {
    border-radius: 12px;
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.3);
    padding: 12px;
    text-align: center;
    margin-bottom: 12px;
}

.pdf-savings-ratio {
    font-size: 12.5px;
    font-weight: 800;
    color: #0D9488;
}

.pdf-savings-pct {
    font-size: 11px;
    color: var(--app-text-secondary);
    margin-top: 3px;
}

.pdf-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 14px;
}

.pdf-result-row {
    background: var(--app-surface-variant);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}






/* ══════════════════════════════════════════════════════════════════════════════
   26. CUSTOMS FORMS REPOSITORY (آرشیو فرم‌ها و تعهدنامه‌های رسمی گمرک)
   Exact replication of Android CustomsFormsScreen (19+ Forms, 8 Offices, Filters)
   ══════════════════════════════════════════════════════════════════════════════ */

.customs-forms-wrap {
    padding: 14px 16px 36px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cf-hero-banner {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(30, 27, 75, 0.35) 100%);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 20px;
    padding: 20px 16px 16px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cf-hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.cf-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.38);
    border-radius: 20px;
    padding: 5px 14px;
    color: #818CF8;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
}

.cf-hero-title {
    font-size: 17.5px;
    font-weight: 900;
    color: #ffffff;
    margin: 4px 0 6px 0;
    line-height: 1.5;
}

.cf-hero-desc {
    font-size: 11px;
    color: var(--app-text-secondary);
    line-height: 1.75;
    max-width: 580px;
    margin: 0 auto 14px auto;
}

.cf-search-box {
    display: flex;
    align-items: center;
    background: rgba(7, 11, 20, 0.85);
    border: 1.5px solid rgba(99, 102, 241, 0.32);
    border-radius: 16px;
    padding: 0 14px;
    height: 44px;
    transition: all 0.2s ease;
}

.cf-search-box:focus-within {
    border-color: #6366F1;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
}

.cf-search-icon {
    font-size: 16px;
    margin-left: 8px;
    color: #818CF8;
}

.cf-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    outline: none;
    text-align: right;
    direction: rtl;
}

.cf-search-clear {
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    display: none;
}

.cf-categories-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cf-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: #ffffff;
}

.cf-categories-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cf-categories-bar::-webkit-scrollbar {
    display: none;
}

.cf-cat-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--app-text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    user-select: none;
}

.cf-cat-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.cf-cat-chip.active {
    background: #6366F1;
    border-color: #818CF8;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.cf-cat-count {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 9.5px;
    font-weight: 800;
}

.cf-info-alert {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.cf-info-icon {
    font-size: 16px;
    line-height: 1;
    margin-top: 1px;
}

.cf-info-alert-text {
    font-size: 11px;
    line-height: 1.8;
    color: #C7D2FE;
}

.cf-results-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 800;
    color: var(--app-text-secondary);
}

.cf-forms-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cf-form-card {
    background: #131929;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.cf-form-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.cf-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cf-format-badge {
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.5px;
    direction: ltr;
    display: inline-block;
}

.cf-format-badge.pdf {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #F87171;
}

.cf-format-badge.word {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60A5FA;
}

.cf-card-category {
    font-size: 11px;
    font-weight: 700;
    color: #818CF8;
}

.cf-card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.55;
}

.cf-card-desc {
    font-size: 11px;
    color: #94A3B8;
    line-height: 1.75;
}

.cf-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.cf-btn-download {
    flex: 1;
    height: 38px;
    border-radius: 12px;
    background: #312E81;
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #ffffff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cf-btn-download:hover {
    background: #4338CA;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

.cf-btn-copy {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.cf-btn-copy:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.cf-empty-state {
    text-align: center;
    padding: 44px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.cf-empty-icon {
    font-size: 42px;
    margin-bottom: 10px;
    opacity: 0.6;
}

.cf-empty-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
}

.cf-empty-desc {
    font-size: 11.5px;
    color: var(--app-text-secondary);
}

.cf-seo-box {
    background: #0F1422;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.cf-seo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
}

.cf-seo-text {
    font-size: 11px;
    color: var(--app-text-secondary);
    line-height: 1.8;
    text-align: justify;
}

.cf-seo-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 4px 0;
}

.cf-seo-en-title {
    font-size: 11px;
    font-weight: 800;
    color: #818CF8;
    direction: ltr;
    text-align: left;
}

.cf-seo-en-desc {
    font-size: 10.5px;
    color: var(--app-text-secondary);
    line-height: 1.6;
    direction: ltr;
    text-align: left;
    margin-top: 4px;
}

.cf-tags-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.cf-tag-pill {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
    padding: 3px 10px;
    color: #818CF8;
    font-size: 10px;
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════════
   27. RAILWAY MAP & EURASIAN FREIGHT INTELLIGENCE (سامانه هوش ریلی و کریدورها)
   Exact replication of Android RailwayMapScreen (Full GIS, 32K+ Stations, 16 Nations)
   ══════════════════════════════════════════════════════════════════════════════ */

.railway-studio-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: calc(100vh - 120px);
    position: relative;
    background: #0B0F19;
    overflow: hidden;
}

.railway-quick-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    z-index: 20;
    gap: 8px;
    flex-wrap: wrap;
}

.railway-bar-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #38BDF8;
    font-weight: 700;
}

.railway-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.railway-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 5px 10px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    text-decoration: none;
}

.railway-pill-btn:hover {
    background: #0284C7;
    border-color: #38BDF8;
    color: #ffffff;
}

.railway-iframe-container {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 540px;
    background: #0B0F19;
}

.railway-map-iframe {
    width: 100%;
    height: 100%;
    min-height: 540px;
    border: none;
    display: block;
    background: #0B0F19;
}

.railway-loading-overlay {
    position: absolute;
    inset: 0;
    background: #0B0F19;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    text-align: center;
    transition: opacity 0.3s ease;
}

.railway-loading-train {
    font-size: 42px;
    animation: trainTrackPulse 1.2s infinite ease-in-out;
}

@keyframes trainTrackPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.08); }
}

.railway-loading-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
}

.railway-loading-sub {
    font-size: 11px;
    color: var(--app-text-secondary);
    max-width: 320px;
    line-height: 1.7;
}

.railway-spinner-bar {
    width: 160px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.railway-spinner-fill {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #0284C7, #38BDF8);
    border-radius: 4px;
    position: absolute;
    animation: trainBarSlide 1.5s infinite ease-in-out;
}

@keyframes trainBarSlide {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* Fullscreen mode within web simulator or window */
#screen-railway_map.fullscreen-active {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #0B0F19 !important;
}

#screen-railway_map.fullscreen-active .railway-studio-wrap {
    min-height: calc(100vh - 56px) !important;
}

#screen-railway_map.fullscreen-active .railway-iframe-container,
#screen-railway_map.fullscreen-active .railway-map-iframe {
    height: 100% !important;
    min-height: calc(100vh - 98px) !important;
}

/* ═════════════════════════════════════════════════════════════════
   RAILWAY MAP IMMERSIVE EDGE-TO-EDGE MODE (MATCHING ANDROID)
   Hiding Top Header and Global Bottom Bar when Railway Map is Active
   ═════════════════════════════════════════════════════════════════ */

/* 1. Hide Global Bottom Navigation Bar & Floating Banners */
body.railway-screen-active .global-bottom-bar,
body.railway-screen-active #pwaInstallBanner,
body.railway-screen-active .pwa-install-banner {
    display: none !important;
}

/* 2. Hide Top Header (Status Bar, Azmoon Header, Quick Bar) */
body.railway-screen-active .android-status-bar {
    display: none !important;
}
body.railway-screen-active #screen-railway_map .azmoon-screen-header {
    display: none !important;
}
body.railway-screen-active #screen-railway_map .railway-quick-bar {
    display: none !important;
}

/* 3. Screen Body and Device Frame Expansion (Dynamic Viewport Height 100dvh) */
body.railway-screen-active,
body.railway-screen-active .device-wrapper {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.railway-screen-active .device-frame {
    overflow: hidden !important;
}

@media (min-width: 540px) {
    body.railway-screen-active .device-frame {
        max-width: min(96vw, 1200px) !important;
        height: 96vh !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 539px) {
    body.railway-screen-active .device-frame {
        width: 100vw !important;
        height: 100% !important;
        height: 100dvh !important;
        max-width: 100% !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

body.railway-screen-active .app-screen-body {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. Active Screen & Iframe Edge-to-Edge Layout */
body.railway-screen-active #screen-railway_map {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

body.railway-screen-active #screen-railway_map .railway-studio-wrap {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.railway-screen-active #screen-railway_map .railway-iframe-container {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    flex: 1 !important;
    width: 100% !important;
    position: relative !important;
}

body.railway-screen-active #screen-railway_map .railway-map-iframe {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    border: none !important;
    flex: 1 !important;
    display: block !important;
}

/* 5. Floating Glassmorphic Back / Exit Pill Button */
.railway-floating-back-btn {
    position: absolute;
    top: 12px;
    left: 56px;
    z-index: 1000;
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 99px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    direction: rtl;
    user-select: none;
}

body.railway-screen-active .railway-floating-back-btn {
    display: flex !important;
}

.railway-floating-back-btn:hover {
    background: #0284c7;
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.5);
}

.railway-floating-back-btn:active {
    transform: scale(0.95);
}

.rf-back-icon {
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
}

.rf-back-lbl {
    letter-spacing: -0.2px;
}

/* ═════════════════════════════════════════════════════════════════
   PROGRESSIVE WEB APP (PWA) STYLES & LUXURY INSTALL COMPONENTS
   ═════════════════════════════════════════════════════════════════ */

/* 1. Offline Connectivity Status Bar */
.pwa-offline-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #DC2626, #B91C1C);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    padding: 6px 12px;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    animation: pwaSlideDown 0.3s ease;
}
.pwa-offline-bar.visible {
    display: flex;
}

/* 2. Floating PWA Install Banner */
.pwa-install-banner {
    position: fixed;
    bottom: 74px;
    left: 16px;
    right: 16px;
    max-width: 440px;
    margin: 0 auto;
    background: rgba(19, 25, 41, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 99990;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    animation: pwaSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pwa-install-banner.visible {
    display: flex;
}
.pwa-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pwa-banner-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #0B0F19;
    border: 1px solid rgba(212, 175, 55, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.pwa-banner-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.pwa-banner-info {
    min-width: 0;
}
.pwa-banner-title {
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pwa-banner-sub {
    font-size: 11px;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pwa-banner-btn-install {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.pwa-banner-btn-install:active {
    transform: scale(0.96);
}
.pwa-banner-btn-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94A3B8;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}
.pwa-banner-btn-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

/* 3. PWA Update Notification Toast */
.pwa-update-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #0F172A;
    border: 1px solid #38BDF8;
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
    z-index: 100001;
    animation: pwaSlideDown 0.3s ease;
    max-width: 90%;
    width: 400px;
}
.pwa-toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.pwa-toast-icon {
    font-size: 20px;
}
.pwa-toast-title {
    font-size: 12.5px;
    font-weight: 800;
    color: #38BDF8;
}
.pwa-toast-sub {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
}
.pwa-toast-btn {
    background: #38BDF8;
    color: #0B0F19;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

/* 4. Quick Notification Toast */
.pwa-quick-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: rgba(15, 23, 42, 0.95);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 100002;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}
.pwa-quick-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 5. iOS / Safari Install Step Card */
.pwa-step-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    text-align: right;
}
.pwa-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pwa-step-desc {
    font-size: 12px;
    color: #E2E8F0;
    line-height: 1.5;
}
.pwa-step-desc strong {
    color: #38BDF8;
}

/* 6. Standalone Mode Native Adjustments */
body.pwa-standalone {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
body.pwa-standalone .desktop-controls {
    display: none !important;
}
@media (max-width: 768px) {
    body.pwa-standalone .device-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        height: 100dvh !important;
        width: 100vw !important;
    }
    body.pwa-standalone .device-frame {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        height: 100dvh !important;
        width: 100vw !important;
        max-width: none !important;
    }
}

@keyframes pwaSlideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes pwaSlideDown {
    from { transform: translateY(-40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LEGAL LIBRARY (کتابخانه حقوقی دیجیتال ۲۵ منبع قانونی)
   ══════════════════════════════════════════════════════════════════════════════ */

#screen-legal_library {
    --legal-font-scale: 1;
    --legal-font-family: inherit;
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    background: var(--app-bg, #0f172a);
    color: var(--app-text, #f1f5f9);
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#screen-legal_library.active {
    display: flex !important;
}

/* Fullscreen Immersive Mode */
body.legal-fullscreen-active #bottomNav {
    display: none !important;
}

body.legal-fullscreen-active #deviceFrame {
    padding-bottom: 0 !important;
}

#screen-legal_library.legal-fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 99999;
    border-radius: 0 !important;
}

/* Night / Day Reading Modes */
#screen-legal_library.legal-night-mode {
    background: #090d16 !important;
    color: #f8fafc !important;
}

#screen-legal_library.legal-night-mode .legal-article-card {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

#screen-legal_library.legal-night-mode .legal-mode-card {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

#screen-legal_library.legal-day-mode {
    background: #f8fafc !important;
    color: #0f172a !important;
}

#screen-legal_library.legal-day-mode .legal-screen-header {
    background: #4338ca !important;
}

#screen-legal_library.legal-day-mode .legal-article-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#screen-legal_library.legal-day-mode .legal-mode-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

#screen-legal_library.legal-day-mode .legal-law-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Reading Controls Toolbar */
.legal-reading-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 40;
}

.legal-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.legal-tool-pill:hover, .legal-tool-pill:active {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.legal-tool-pill.active {
    background: #f59e0b;
    border-color: #d97706;
    color: #000000;
}

.legal-font-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 2px;
}

.legal-font-step-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.legal-font-step-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.legal-font-scale-badge {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    min-width: 32px;
    text-align: center;
}

/* Highlighter Control Bar */
.legal-highlighter-bar {
    background: rgba(30, 41, 59, 0.98);
    border-bottom: 1px solid rgba(251, 191, 36, 0.3);
    padding: 10px 14px;
    position: sticky;
    top: 48px;
    z-index: 39;
    animation: pwaSlideDown 0.25s ease;
}

.legal-highlighter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.legal-color-dots-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legal-color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    border: 2px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
}

.legal-color-dot.active {
    transform: scale(1.25);
    border-color: #ffffff;
    box-shadow: 0 0 8px rgba(255,255,255,0.6);
}

.legal-eraser-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.2);
    border: 1.5px solid #ef4444;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.legal-eraser-btn.active {
    background: #ef4444;
    color: #ffffff;
    transform: scale(1.2);
}

.legal-highlighter-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
}

.legal-highlighter-hint {
    margin-top: 6px;
    font-size: 10.5px;
    color: #fde047;
    font-weight: 600;
}

/* Content Container & Subviews */
.legal-content-container {
    padding: 12px 14px 40px 14px;
    flex: 1;
}

.legal-subview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Breadcrumbs */
.legal-nav-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(67, 56, 202, 0.12);
    border: 1px solid rgba(67, 56, 202, 0.3);
    border-radius: 10px;
    color: #a5b4fc;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    width: fit-content;
    transition: background 0.15s;
    user-select: none;
}

.legal-nav-breadcrumb:hover {
    background: rgba(67, 56, 202, 0.22);
}

/* Bookmarks Hub Banner */
.legal-bookmark-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.legal-bookmark-banner:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.legal-bm-banner-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.legal-bm-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    flex-shrink: 0;
}

.legal-bm-banner-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.legal-bm-banner-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: #fde68a;
}

.legal-bm-banner-pill {
    padding: 2px 7px;
    background: #78350f;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: #fde68a;
}

.legal-bm-banner-desc {
    font-size: 11px;
    color: rgba(253, 230, 138, 0.8);
}

.legal-bm-banner-arrow {
    font-size: 18px;
    font-weight: 900;
    color: #fde68a;
}

/* 2-Column Grid of 25 Laws */
.legal-laws-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 4px;
}

@media (max-width: 480px) {
    .legal-laws-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.legal-law-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 12px;
    min-height: 195px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.legal-law-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.legal-law-card:active {
    transform: scale(0.98);
}

.legal-law-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.legal-law-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.legal-law-quota-badge {
    padding: 3px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.legal-law-center {
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legal-law-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--app-text, #f1f5f9);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.legal-law-count {
    font-size: 10px;
    color: var(--app-text-secondary, #94a3b8);
    font-weight: 600;
}

.legal-law-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 800;
    margin-top: auto;
    padding-top: 4px;
}

/* Customs Law Study Modes */
.legal-customs-header-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(67, 56, 202, 0.12);
    border: 1px solid rgba(67, 56, 202, 0.3);
    border-radius: 18px;
}

.legal-customs-header-icon {
    font-size: 28px;
}

.legal-customs-header-texts h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 900;
    color: #a5b4fc;
}

.legal-customs-header-texts p {
    margin: 3px 0 0 0;
    font-size: 11px;
    color: #94a3b8;
}

.legal-modes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legal-mode-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.legal-mode-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.legal-mode-card.featured {
    border: 2px solid #4338ca;
    background: linear-gradient(180deg, rgba(67, 56, 202, 0.18), #1e293b);
    box-shadow: 0 4px 16px rgba(67, 56, 202, 0.2);
}

.legal-mode-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.legal-mode-badge.recommended {
    padding: 4px 10px;
    background: #4338ca;
    color: #ffffff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.legal-mode-badge.count {
    color: #818cf8;
    font-weight: 800;
    font-size: 11.5px;
}

.legal-mode-badge.normal {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(2, 132, 199, 0.15);
    color: #38bdf8;
}

.legal-mode-icon-title {
    font-size: 14px;
    font-weight: 800;
    color: #f1f5f9;
}

.legal-mode-title {
    margin: 6px 0;
    font-size: 15px;
    font-weight: 900;
    color: #f1f5f9;
}

.legal-mode-desc {
    margin: 4px 0 12px 0;
    font-size: 11.5px;
    line-height: 1.7;
    color: #94a3b8;
    text-align: justify;
}

.legal-mode-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 800;
    color: #818cf8;
}

/* Articles Reader & Cards */
.legal-filter-chips {
    margin-bottom: 8px;
}

.legal-articles-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legal-article-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: text;
}

.legal-article-card.expanded {
    border-color: #6366f1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.legal-article-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.legal-article-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    overflow: hidden;
}

.legal-badge-tag {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

.legal-badge-tag.bylaw {
    background: rgba(5, 150, 105, 0.2);
    color: #34d399;
}

.legal-badge-tag.law {
    background: rgba(67, 56, 202, 0.2);
    color: #a5b4fc;
}

.legal-badge-article {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    white-space: nowrap;
}

.legal-article-title-text {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legal-article-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.legal-card-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.legal-card-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.legal-card-btn.bookmarked {
    color: #f59e0b !important;
}

.legal-card-btn.camera-attached {
    color: #10b981 !important;
}

.legal-card-btn.camera-empty {
    color: #ef4444 !important;
}

.legal-card-chevron {
    font-size: 12px;
    color: #94a3b8;
    transition: transform 0.2s;
    margin-right: 2px;
}

.legal-article-card.expanded .legal-card-chevron {
    transform: rotate(180deg);
}

.legal-article-body {
    margin-top: 10px;
    font-size: calc(13px * var(--legal-font-scale, 1));
    line-height: calc(23px * var(--legal-font-scale, 1));
    color: inherit;
    text-align: justify;
    position: relative;
    font-family: var(--legal-font-family, inherit);
}

.legal-article-card:not(.expanded) .legal-article-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.legal-article-expand-hint {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #818cf8;
}

/* Syntax Highlighting in Legal Text */
.legal-syntax-clause {
    color: #38bdf8;
    font-weight: 900;
}

.legal-syntax-note {
    color: #f59e0b;
    font-weight: 900;
}

.legal-search-match {
    background: #f59e0b;
    color: #000000 !important;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 800;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.legal-user-highlight {
    color: #0f172a !important;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 600;
}

/* Attached Image Thumbnail */
.legal-article-img-thumb {
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.05);
    padding: 8px;
}

.legal-article-img-thumb-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: #34d399;
    margin-bottom: 6px;
}

.legal-article-img-thumb img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 6px;
    cursor: zoom-in;
    display: block;
}

/* Modals */
.legal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: pwaSlideUp 0.2s ease;
}

.legal-modal-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.legal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-modal-header h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: #f1f5f9;
}

.legal-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
}

.legal-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legal-attachment-preview-wrap img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: zoom-in;
}

.legal-attachment-preview-hint {
    text-align: center;
    font-size: 10.5px;
    color: #94a3b8;
    margin-top: 4px;
}

.legal-attachment-empty-wrap {
    text-align: center;
    padding: 24px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
}

.legal-attachment-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.legal-attachment-empty-wrap p {
    margin: 0;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.6;
}

.legal-attachment-actions-grid {
    display: flex;
    gap: 10px;
}

.legal-attachment-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    user-select: none;
}

.legal-attachment-btn.primary {
    background: #4338ca;
    color: #ffffff;
}

.legal-attachment-btn.primary:hover {
    background: #4f46e5;
}

.legal-attachment-btn.danger {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #ef4444;
}

.legal-attachment-btn.danger:hover {
    background: #ef4444;
    color: #ffffff;
}

/* Lightbox Modal */
.legal-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: zoom-out;
}

.legal-lightbox-overlay img {
    max-width: 95vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   23. TOOL: CUSTOMS MAP (نقشه هوشمند و دایرکتوری گمرکات کشور)
   ══════════════════════════════════════════════════════════════════════════════ */

#screen-customs_map {
    padding: 10px 14px 24px 14px;
    display: none;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
}

#screen-customs_map.active {
    display: flex;
}

#screen-customs_map.fullscreen-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: var(--app-bg, #070A14);
    padding: 8px 12px;
    overflow-y: auto;
}

/* View Mode 3-Segment Switcher */
.customs-view-switcher-bar {
    width: 100%;
    margin-bottom: 2px;
}

.customs-segment-group {
    display: flex;
    background: var(--app-card-bg, #0F172A);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 3px;
    gap: 4px;
}

.customs-segment-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 6px;
    background: transparent;
    color: var(--app-text-secondary, #94A3B8);
    border: none;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.customs-segment-btn.active {
    background: #06B6D4;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}

.customs-segment-icon {
    font-size: 13px;
}

/* Search & Multi-Filter Card */
.customs-search-filter-card {
    background: var(--app-card-bg, #0F172A);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.customs-search-box {
    margin: 0 !important;
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 0 10px;
}

.customs-search-box:focus-within {
    border-color: #06B6D4;
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
}

.customs-search-box .tool-search-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 6px;
    font-size: 12px;
    color: var(--app-text, #ffffff);
    width: 100%;
    outline: none;
    font-family: inherit;
}

.customs-search-clear-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--app-text-secondary, #94A3B8);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    margin-right: 4px;
}

/* Multi-Filter Chips Row */
.customs-filter-chips-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.customs-filter-chips-scroll::-webkit-scrollbar {
    display: none;
}

.customs-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.15));
    color: var(--app-text, #ffffff);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.customs-filter-chip:hover {
    border-color: #06B6D4;
}

.customs-filter-chip.active {
    background: #06B6D4;
    color: #ffffff;
    border-color: #06B6D4;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.35);
}

.customs-chip-count {
    background: #ffffff;
    color: #06B6D4;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 800;
}

.customs-filter-chip.active .customs-chip-count {
    background: #0F172A;
    color: #38BDF8;
}

.customs-chip-arrow {
    font-size: 8px;
    opacity: 0.7;
}

.customs-filter-chip-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #EF4444;
    font-size: 10.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s;
}

.customs-filter-chip-clear:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Status Header */
.customs-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
}

.customs-status-pill {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06B6D4;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
}

.customs-status-title {
    color: var(--app-text, #ffffff);
    font-size: 11px;
    font-weight: 700;
}

/* Interactive Map Container */
.customs-map-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(6, 182, 212, 0.4);
    background: #0B0F19;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: height 0.25s ease;
}

.customs-map-wrapper.full-map {
    height: calc(100vh - 210px);
    min-height: 400px;
}

.customs-map-wrapper.hidden {
    display: none !important;
}

.customs-map-canvas {
    width: 100%;
    height: 100%;
    background: #070A14;
    z-index: 1;
}

/* Map Overlays & Controls */
.customs-tile-provider-bar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1000;
    display: flex;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}

.customs-tile-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 3px 7px;
    color: #94A3B8;
    font-size: 9px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.customs-tile-btn.active {
    background: #06B6D4;
    color: #ffffff;
}

.customs-map-fit-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06B6D4;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.customs-map-fit-btn:hover {
    transform: scale(1.08);
    background: #06B6D4;
    color: #ffffff;
}

.customs-map-zoom-controls {
    position: absolute;
    bottom: 12px;
    left: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.customs-zoom-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06B6D4;
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}

.customs-zoom-btn:hover {
    background: #06B6D4;
    color: #ffffff;
}

/* Quick Info Bottom Overlay */
.customs-quick-info-card {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 1001;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid #06B6D4;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 5px;
    animation: customsFadeUp 0.2s ease-out;
}

@keyframes customsFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.customs-quick-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customs-quick-info-header h4 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: #06B6D4;
}

.customs-quick-info-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #94A3B8;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
}

.customs-quick-info-meta {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--app-text, #ffffff);
}

.customs-quick-info-btn {
    background: #06B6D4;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 6px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-top: 2px;
    width: 100%;
}

/* Customs Cards List Container */
.customs-list-wrapper {
    flex: 1;
    width: 100%;
    overflow-y: auto;
}

.customs-list-wrapper.hidden {
    display: none !important;
}

.customs-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Customs Card Matching Android CustomsRecordCard */
.customs-record-card {
    background: var(--app-card-bg, #0F172A);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.customs-record-card:hover {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.12);
}

.customs-record-card.focused {
    border-color: #8B5CF6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.35);
}

.customs-card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customs-card-actions-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.customs-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.customs-icon-btn.nav-btn {
    color: #06B6D4;
}

.customs-icon-btn.nav-btn:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06B6D4;
}

.customs-icon-btn.web-btn {
    color: #8B5CF6;
}

.customs-icon-btn.web-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: #8B5CF6;
}

.customs-icon-btn.call-btn {
    color: #10B981;
}

.customs-icon-btn.call-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10B981;
}

.customs-card-titles-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.customs-card-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
}

.customs-card-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--app-text-secondary, #94A3B8);
}

.customs-card-address {
    font-size: 10.5px;
    line-height: 16px;
    color: var(--app-text, #ffffff);
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.customs-card-procedures-row {
    font-size: 10px;
    font-weight: 600;
    color: #C084FC;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customs-card-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

.customs-card-detail-btn {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #06B6D4;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.customs-card-detail-btn:hover {
    background: #06B6D4;
    color: #ffffff;
}

.customs-card-neighbor-badge {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #818CF8;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 9.5px;
    font-weight: 700;
}

/* Modals Overlay */
.customs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* Filter Selection Modal */
.customs-modal-card {
    background: var(--app-card-bg, #0F172A);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.15));
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    animation: customsModalZoom 0.2s ease-out;
}

@keyframes customsModalZoom {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.customs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
}

.customs-modal-header h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
}

.customs-modal-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.customs-modal-clear-text {
    background: transparent;
    border: none;
    color: #EF4444;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.customs-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-text, #ffffff);
    font-size: 12px;
    cursor: pointer;
}

.customs-modal-body {
    padding: 12px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.customs-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.customs-checkbox-row.checked {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.customs-checkbox-row span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--app-text, #ffffff);
    text-align: right;
    flex: 1;
}

.customs-checkbox-row input[type="checkbox"] {
    accent-color: #06B6D4;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.customs-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
}

.customs-modal-confirm-btn {
    background: #06B6D4;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    width: 100%;
    padding: 10px;
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}

/* Customs Detail Modal (شناسنامه تخصصی) */
.customs-detail-card {
    background: var(--app-card-bg, #0F172A);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.15));
    border-radius: 24px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    animation: customsModalZoom 0.2s ease-out;
}

.customs-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
}

.customs-detail-titles {
    text-align: right;
}

.customs-detail-titles h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
}

.customs-detail-titles p {
    margin: 2px 0 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #06B6D4;
}

.customs-detail-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-text, #ffffff);
    font-size: 13px;
    cursor: pointer;
}

.customs-detail-body {
    padding: 14px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.customs-detail-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.customs-detail-metric-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.customs-detail-metric-label {
    font-size: 9px;
    color: var(--app-text-secondary, #94A3B8);
}

.customs-detail-metric-val {
    font-size: 11px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
}

.customs-detail-info-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

.customs-detail-info-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #06B6D4;
}

.customs-detail-info-text {
    font-size: 11px;
    line-height: 17px;
    color: var(--app-text, #ffffff);
}

.customs-nav-action-btn {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 11.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.customs-badges-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
}

.customs-badges-title {
    font-size: 10.5px;
    font-weight: 800;
}

.customs-badges-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-start;
    direction: rtl;
}

.customs-badge-pill {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.customs-detail-remarks-box {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

.customs-detail-remarks-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #F59E0B;
}

.customs-detail-remarks-text {
    font-size: 10.5px;
    line-height: 16px;
    color: var(--app-text, #ffffff);
}

.customs-detail-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
}

.customs-detail-close-action {
    background: #06B6D4;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    width: 100%;
    padding: 9px;
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}

/* Loading & Empty States */
.customs-loading-wrap, .customs-empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
    text-align: center;
    gap: 10px;
}

.customs-loading-wrap p, .customs-empty-wrap p {
    font-size: 12px;
    color: var(--app-text-secondary, #94A3B8);
    margin: 0;
}

.customs-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(6, 182, 212, 0.2);
    border-top-color: #06B6D4;
    border-radius: 50%;
    animation: customsSpin 0.8s linear infinite;
}

@keyframes customsSpin {
    to { transform: rotate(360deg); }
}

.customs-empty-icon {
    font-size: 32px;
}

.customs-empty-reset-btn {
    background: #06B6D4;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

/* Custom DivIcon Marker on Leaflet */
.custom-pin-container {
    background: transparent;
    border: none;
}

.custom-pin-marker {
    background: #06B6D4;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.custom-pin-marker:hover, .custom-pin-marker.selected {
    transform: scale(1.22);
    background: #8B5CF6;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.7);
}

.custom-pin-label {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

/* Leaflet Popup RTL Styling */
.leaflet-popup-content-wrapper {
    background: #0F172A !important;
    color: #ffffff !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    direction: rtl !important;
    text-align: right !important;
}

.leaflet-popup-tip {
    background: #0F172A !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   CURRENCY & EXCHANGE RATES SUITE STYLES (پایشگر نرخ‌های برابری و ارز)
   ═════════════════════════════════════════════════════════════════════════════ */

.currency-suite-tabs-wrap {
    padding: 10px 14px 6px 14px;
}

.currency-suite-tabs {
    display: flex;
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 4px;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.currency-suite-tabs::-webkit-scrollbar {
    display: none;
}

.currency-tab-btn {
    flex: 1;
    min-width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border: none;
    background: transparent;
    color: var(--app-text-secondary, #94a3b8);
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.currency-tab-btn.active {
    background: linear-gradient(135deg, #0d9488, #059669);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
}

.currency-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--app-text, #ffffff);
}

/* Status Bar */
.currency-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 16px 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.currency-live-capsule {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 800;
    color: #10b981;
}

.currency-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    animation: currencyPulse 1.6s infinite ease-in-out;
}

@keyframes currencyPulse {
    0% { transform: scale(0.9); opacity: 0.4; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.4; }
}

.currency-last-update-text {
    font-size: 10.5px;
    color: var(--app-text-muted, #64748b);
    font-weight: 600;
}

/* Tab Contents */
.currency-tab-content {
    display: none;
    padding: 0 14px 24px 14px;
}

.currency-tab-content.active {
    display: block;
    animation: fadeInTab 0.25s ease forwards;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.currency-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 4px;
}

.currency-section-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
}

.currency-section-subtitle {
    font-size: 10px;
    color: var(--app-text-secondary, #94a3b8);
}

/* ── TAB 1: ICE CARDS & CHART ── */
.ice-currencies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ice-currency-card {
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ice-currency-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.ice-currency-card.selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4), rgba(30, 41, 59, 0.95));
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.ice-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ice-card-slug {
    background: rgba(255, 255, 255, 0.08);
    color: var(--app-text, #ffffff);
    font-size: 11px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.ice-card-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--app-text, #ffffff);
}

.ice-card-prices {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
}

.ice-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ice-price-label {
    color: var(--app-text-secondary, #94a3b8);
    font-size: 10px;
}

.ice-price-val {
    font-weight: 800;
    font-size: 12px;
    direction: ltr;
}

.ice-price-val.buy { color: #10b981; }
.ice-price-val.sell { color: #ef4444; }

/* Chart Panel */
.currency-card-panel {
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.ice-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.ice-chart-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ice-chart-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
}

.ice-chart-legend {
    display: flex;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
}

.ice-chart-legend .buy { color: #10b981; }
.ice-chart-legend .sell { color: #ef4444; }

.ice-chart-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 260px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 10px;
    overflow: hidden;
}

#iceHistoryChartCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.ice-chart-tooltip {
    position: absolute;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 11px;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 10;
    direction: rtl;
    line-height: 1.6;
}

/* 10-day Table */
.ice-table-header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 800;
}

.ice-history-table-container {
    overflow-x: auto;
}

.ice-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.ice-history-table th {
    text-align: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--app-text-secondary, #94a3b8);
    font-weight: 700;
    border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
}

.ice-history-table td {
    text-align: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-weight: 700;
}

.ice-history-table td.buy { color: #10b981; }
.ice-history-table td.sell { color: #ef4444; }
.ice-history-table td.date { color: var(--app-text-secondary, #94a3b8); }

/* ── TAB 2: CUSTOMS DECLARATION RATES ── */
.customs-rates-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.8), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.customs-banner-icon {
    font-size: 32px;
}

.customs-banner-text h3 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 900;
    color: #93c5fd;
}

.customs-banner-text p {
    margin: 0 0 6px 0;
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.5;
}

.customs-banner-tag {
    display: inline-block;
    background: rgba(59, 130, 246, 0.25);
    border: 0.5px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

.customs-rates-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 0 12px;
    margin-bottom: 8px;
}

.customs-rates-search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--app-text, #ffffff);
    padding: 10px 8px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

.customs-rates-count-pill {
    font-size: 10.5px;
    color: var(--app-text-secondary, #94a3b8);
    margin-bottom: 10px;
    font-weight: 700;
}

.customs-rates-table-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    color: var(--app-text-secondary, #94a3b8);
    margin-bottom: 6px;
}

.customs-rates-table-header .col-code { width: 50px; text-align: center; }
.customs-rates-table-header .col-name { flex: 1; }
.customs-rates-table-header .col-price { width: 140px; text-align: left; }

.customs-rates-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.customs-rate-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.customs-rate-card:hover {
    background: rgba(30, 58, 138, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

.customs-rate-card .code-badge {
    width: 48px;
    background: rgba(59, 130, 246, 0.15);
    border: 0.5px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    font-weight: 900;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 6px;
    text-align: center;
    margin-left: 10px;
}

.customs-rate-card .name-text {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--app-text, #ffffff);
}

.customs-rate-card .price-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

.customs-rate-card .price-number {
    font-weight: 900;
    font-size: 13.5px;
    color: #10b981;
    direction: ltr;
}

.customs-rate-card .rial-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: 9.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
}

/* ── TAB 3: GOOGLE CALCULATOR ── */
.calc-main-card {
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.calc-input-group {
    margin-bottom: 10px;
}

.calc-label {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--app-text-secondary, #94a3b8);
    margin-bottom: 6px;
}

.calc-amount-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1.5px solid rgba(13, 148, 136, 0.4);
    border-radius: 12px;
    padding: 0 14px;
    transition: border-color 0.2s ease;
}

.calc-amount-input-wrap:focus-within {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.calc-amount-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--app-text, #ffffff);
    font-size: 20px;
    font-weight: 900;
    padding: 12px 6px;
    direction: ltr;
    text-align: right;
    outline: none;
    font-family: inherit;
}

.calc-amount-currency-tag {
    font-size: 18px;
    font-weight: 900;
    color: #10b981;
    margin-right: 8px;
}

.calc-quick-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0 12px 0;
    scrollbar-width: none;
}
.calc-quick-chips::-webkit-scrollbar { display: none; }

.quick-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    color: var(--app-text-secondary, #94a3b8);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.quick-chip:hover, .quick-chip.active {
    background: rgba(13, 148, 136, 0.2);
    border-color: #0d9488;
    color: #14b8a6;
}

.calc-currency-selectors-row {
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.currency-pick-box {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.currency-pick-box:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(15, 23, 42, 0.75);
}

.currency-pick-box .pick-label {
    display: block;
    font-size: 10px;
    color: var(--app-text-muted, #64748b);
    font-weight: 700;
    margin-bottom: 4px;
}

.currency-pick-box .pick-val-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.currency-pick-box .pick-flag {
    font-size: 24px;
}

.currency-pick-box .pick-text-col {
    display: flex;
    flex-direction: column;
}

.currency-pick-box .pick-code {
    font-weight: 900;
    font-size: 13.5px;
    color: var(--app-text, #ffffff);
}

.currency-pick-box .pick-name {
    font-size: 10.5px;
    color: var(--app-text-secondary, #94a3b8);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.currency-pick-box .pick-chevron {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--app-text-muted, #64748b);
}

.calc-swap-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #059669);
    border: none;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calc-swap-btn:active {
    transform: rotate(180deg) scale(0.92);
}

/* Big Result Display */
.calc-result-display {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(13, 148, 136, 0.3);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    margin-bottom: 14px;
}

.calc-result-formula {
    font-size: 12px;
    color: var(--app-text-secondary, #94a3b8);
    margin-bottom: 6px;
}

.calc-result-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.calc-result-number {
    font-size: 28px;
    font-weight: 900;
    color: #10b981;
    direction: ltr;
}

.calc-result-target {
    font-size: 15px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
}

.calc-rates-comparison-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.rate-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    direction: ltr;
}

.calc-timestamp-info {
    font-size: 10px;
    color: var(--app-text-muted, #64748b);
}

.calc-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.calc-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.calc-action-btn.copy-btn {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #60a5fa;
}

.calc-action-btn.copy-btn:hover {
    background: rgba(59, 130, 246, 0.3);
}

.calc-action-btn.share-btn {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.calc-action-btn.share-btn:hover {
    background: rgba(16, 185, 129, 0.3);
}

/* ── TAB 4: MATRIX COMPARISON & WORLD DIRECTORY ── */
.matrix-base-selector-card {
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.matrix-base-title {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--app-text-secondary, #94a3b8);
    margin-bottom: 8px;
}

.matrix-base-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.matrix-base-chips::-webkit-scrollbar { display: none; }

.matrix-base-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    color: var(--app-text-secondary, #94a3b8);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all 0.2s ease;
}

.matrix-base-chip.active {
    background: #0d9488;
    color: #ffffff;
    border-color: #0d9488;
}

.matrix-table-card {
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    overflow-x: auto;
    margin-bottom: 16px;
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.matrix-table th {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--app-text-secondary, #94a3b8);
    font-weight: 800;
    border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    text-align: right;
}

.matrix-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-weight: 700;
}

.matrix-table td.code-cell {
    font-family: monospace;
    font-weight: 900;
    color: #38bdf8;
}

.matrix-table td.rate-cell {
    direction: ltr;
    text-align: left;
    font-weight: 800;
    color: #10b981;
}

/* Continent Filter Chips */
.continent-filter-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0 10px 0;
    scrollbar-width: none;
}
.continent-filter-chips::-webkit-scrollbar { display: none; }

.continent-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    color: var(--app-text-secondary, #94a3b8);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all 0.2s ease;
}

.continent-chip.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.directory-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 0 12px;
    margin-bottom: 12px;
}

.directory-search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--app-text, #ffffff);
    padding: 10px 8px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

.currency-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.currency-dir-card {
    background: var(--app-card-bg, #1e293b);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.currency-dir-card:hover {
    border-color: rgba(13, 148, 136, 0.5);
    transform: translateY(-2px);
}

.currency-dir-card .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.currency-dir-card .flag-code {
    display: flex;
    align-items: center;
    gap: 6px;
}

.currency-dir-card .symbol-tag {
    background: rgba(255, 255, 255, 0.08);
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--app-text-secondary, #94a3b8);
}

.currency-dir-card .fa-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--app-text, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.currency-dir-card .en-name {
    font-size: 10px;
    color: var(--app-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.currency-dir-card .rate-val {
    font-size: 11.5px;
    font-weight: 900;
    color: #10b981;
    direction: ltr;
    text-align: left;
    margin-top: 4px;
}

/* ── CURRENCY PICKER MODAL ── */
.currency-picker-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: modalFadeIn 0.2s ease;
}

.currency-picker-modal-box {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    direction: rtl;
}

.picker-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.picker-modal-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
}

.picker-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.picker-modal-search {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.picker-modal-search input {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    padding: 9px 12px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.picker-continent-chips {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    scrollbar-width: none;
}
.picker-continent-chips::-webkit-scrollbar { display: none; }

.picker-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.picker-chip.active {
    background: #0d9488;
    color: #ffffff;
    border-color: #0d9488;
}

.picker-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.picker-currency-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.picker-currency-row:hover {
    background: rgba(255, 255, 255, 0.08);
}

.picker-currency-row .left-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.picker-currency-row .flag { font-size: 20px; }
.picker-currency-row .code { font-weight: 800; font-size: 13px; color: #ffffff; }
.picker-currency-row .name { font-size: 11px; color: #94a3b8; }
.picker-currency-row .symbol { font-size: 11px; font-weight: 700; color: #10b981; }

/* ─────────────────────────────────────────────────────────────────────────────
   INSO STANDARDS & INSPECTION COMPANIES SUITE STYLES (استاندارد ملی ایران)
   ───────────────────────────────────────────────────────────────────────────── */

.inso-screen-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

/* Tab Switcher */
.inso-segment-bar {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 4px;
    gap: 6px;
    margin-bottom: 4px;
}

.inso-segment-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--app-text-secondary, #94a3b8);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.inso-segment-btn.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

/* Status Badge */
.inso-status-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.inso-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
    color: var(--app-text-secondary, #94a3b8);
    backdrop-filter: blur(8px);
}

.inso-status-badge .icon {
    font-size: 14px;
}

.inso-status-date {
    font-weight: 800;
    color: #10b981;
    letter-spacing: 0.5px;
}

/* Hero text */
.inso-hero-header {
    text-align: center;
    padding: 10px 12px 6px 12px;
}

.inso-hero-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--app-text, #ffffff);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.inso-hero-desc {
    font-size: 13px;
    color: var(--app-text-secondary, #94a3b8);
    line-height: 1.7;
    margin: 0 auto;
    max-width: 520px;
}

/* Cards */
.inso-card {
    position: relative;
    border-radius: 24px;
    background: var(--app-card-bg, #131929);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inso-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.inso-card-blue {
    border-color: rgba(59, 130, 246, 0.35);
}
.inso-card-blue:hover {
    border-color: rgba(59, 130, 246, 0.6);
}

.inso-card-green {
    border-color: rgba(16, 185, 129, 0.35);
}
.inso-card-green:hover {
    border-color: rgba(16, 185, 129, 0.6);
}

.inso-card-fuchsia {
    border-color: rgba(217, 70, 239, 0.35);
}
.inso-card-fuchsia:hover {
    border-color: rgba(217, 70, 239, 0.6);
}

/* Radial Glows */
.inso-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    pointer-events: none;
}

.inso-glow-blue {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%);
}

.inso-glow-green {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, transparent 70%);
}

.inso-glow-fuchsia {
    background: radial-gradient(circle, rgba(217, 70, 239, 0.25) 0%, transparent 70%);
}

/* Icon Box */
.inso-card-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    position: relative;
    z-index: 2;
}

.inso-icon-blue {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.inso-icon-green {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.inso-icon-fuchsia {
    background: rgba(217, 70, 239, 0.12);
    border: 1px solid rgba(217, 70, 239, 0.3);
    color: #e879f9;
}

.inso-card-content {
    position: relative;
    z-index: 2;
}

.inso-card-title {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.inso-card-desc {
    font-size: 13px;
    color: var(--app-text-secondary, #94a3b8);
    line-height: 1.7;
    margin: 0 0 14px 0;
}

/* Meta Chips */
.inso-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.inso-chip {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--app-text-secondary, #cbd5e1);
}

/* Button Group */
.inso-btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.inso-action-btn {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: inherit;
    border: 1px solid transparent;
}

.inso-btn-blue {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}
.inso-btn-blue:hover {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.inso-btn-green {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}
.inso-btn-green:hover {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.inso-btn-fuchsia {
    background: rgba(217, 70, 239, 0.15);
    border-color: rgba(217, 70, 239, 0.4);
    color: #e879f9;
}
.inso-btn-fuchsia:hover {
    background: #d946ef;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(217, 70, 239, 0.4);
}

.inso-btn-outline {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--app-text, #ffffff);
}
.inso-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Tab 2: Companies Directory Styles */
.inso-directory-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.inso-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--app-card-bg, #131929);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 2px 14px;
    transition: border-color 0.2s ease;
}

.inso-search-box:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.inso-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--app-text, #ffffff);
    padding: 12px 10px;
    font-size: 13.5px;
    outline: none;
    font-family: inherit;
}

.inso-search-clear {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
}

.inso-filters-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.inso-filters-scroll::-webkit-scrollbar { display: none; }

.inso-filter-chip {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--app-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.inso-filter-chip.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.inso-counter-pill {
    font-size: 12px;
    color: var(--app-text-secondary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

.inso-companies-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inso-company-card {
    background: var(--app-card-bg, #131929);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

.inso-company-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.inso-comp-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.inso-comp-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
    line-height: 1.4;
}

.inso-comp-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.inso-badge-score {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.inso-badge-prio {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.inso-comp-scope {
    font-size: 12px;
    color: var(--app-text-secondary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 6px;
}

.inso-comp-commodities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.inso-comm-tag {
    font-size: 11px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    padding: 3px 8px;
    border-radius: 6px;
}

.inso-comp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    color: var(--app-text-muted, #64748b);
}

.inso-comp-expiry {
    color: #10b981;
    font-weight: 700;
}

/* PDF Preview Modal */
.inso-pdf-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    flex-direction: column;
}

.inso-pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--app-card-bg, #0f172a);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.inso-pdf-modal-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inso-pdf-modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.inso-pdf-frame {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: #1e293b;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CUSTOMS TERMS GLOSSARY STYLES (واژه‌نامه و اصطلاحات گمرکی)
   ───────────────────────────────────────────────────────────────────────────── */

.terms-container {
    padding: 14px 16px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto;
}

.terms-search-box {
    display: flex;
    align-items: center;
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 2px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s ease;
}

.terms-search-box:focus-within {
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.terms-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--app-text, #ffffff);
    padding: 11px 8px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
}

.terms-search-clear {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
}

/* Alphabet Filter Row */
.terms-alphabet-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 6px 0;
    scrollbar-width: none;
}
.terms-alphabet-scroll::-webkit-scrollbar { display: none; }

.terms-alpha-chip {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--app-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    flex-shrink: 0;
}

.terms-alpha-chip.active {
    background: #06b6d4;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}

.terms-counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: var(--app-text-secondary, #94a3b8);
    padding: 0 2px;
}

.terms-filter-indicator {
    color: #06b6d4;
    font-weight: 800;
}

/* Term Card Matching Android Exact Design */
.customs-term-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.customs-term-card:hover {
    transform: translateY(-2px);
    border-color: rgba(6, 182, 212, 0.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.term-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: ltr;
}

.term-en-title {
    font-size: 14.5px;
    font-weight: 900;
    color: #38bdf8;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.term-actions-group {
    display: flex;
    gap: 2px;
}

.term-action-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
}

.term-action-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Persian Translation Pill */
.term-fa-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 800;
    color: #34d399;
}

.term-fa-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}

/* French Translation Pill */
.term-fr-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11.5px;
    color: #93c5fd;
    direction: ltr;
}

.term-fr-badge {
    background: #1e3a8a;
    color: #93c5fd;
    font-size: 9.5px;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Definition Preview */
.term-def-preview {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--app-text, #ffffff);
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Term Detail Dialog Modal */
.term-detail-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.term-detail-modal-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(6, 182, 212, 0.35);
    border-radius: 22px;
    max-width: 540px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.term-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: ltr;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.term-modal-en-title {
    font-size: 16px;
    font-weight: 900;
    color: #38bdf8;
}

.term-modal-close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

.term-modal-section-title {
    font-size: 11.5px;
    font-weight: 800;
    margin-bottom: 4px;
}

.term-modal-section-body {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--app-text, #ffffff);
    text-align: justify;
}

.term-modal-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   INCOTERMS 2020 REFERENCE HUB STYLES (اینکوترمز ۲۰۲۰)
   ───────────────────────────────────────────────────────────────────────────── */

.inco-container {
    padding: 14px 16px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto;
}

.inco-search-box {
    display: flex;
    align-items: center;
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 2px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s ease;
}

.inco-search-box:focus-within {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.inco-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--app-text, #ffffff);
    padding: 11px 8px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
}

.inco-search-clear {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
}

/* Transport Mode Tabs */
.inco-tabs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.inco-mode-tab {
    padding: 8px 4px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--app-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.inco-mode-tab.active-all {
    background: #8b5cf6;
    border-color: #a78bfa;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.inco-mode-tab.active-multimodal {
    background: #10b981;
    border-color: #34d399;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.inco-mode-tab.active-maritime {
    background: #06b6d4;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}

/* Group Categorization Bar */
.inco-group-guide-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 11px;
    color: #ddd6fe;
}

.inco-group-guide-count {
    color: #8b5cf6;
    font-weight: 900;
    font-size: 11.5px;
}

/* Incoterm Card matching Android IncotermCard */
.incoterm-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.incoterm-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.inco-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inco-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.inco-code-badge {
    background: #8b5cf6;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.inco-title-en {
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}

.inco-mode-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.inco-mode-badge.maritime {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #06b6d4;
}

.inco-mode-badge.multimodal {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #8b5cf6;
}

.inco-title-fa {
    font-size: 14px;
    font-weight: 900;
    color: #c4b5fd;
}

.inco-subtitle-fa {
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--app-text-secondary, #94a3b8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: justify;
}

/* Diagram Thumbnail */
.inco-diagram-thumb-wrap {
    position: relative;
    width: 100%;
    height: 125px;
    border-radius: 12px;
    background: #02040a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    cursor: pointer;
}

.inco-diagram-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.inco-diagram-thumb-wrap:hover .inco-diagram-img {
    transform: scale(1.03);
}

.inco-diagram-overlay-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-top-right-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.inco-card-footer-btn {
    width: 100%;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    padding: 8px;
    color: #a78bfa;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.inco-card-footer-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: #8b5cf6;
    color: #ffffff;
}

/* Incoterm Detail Dialog Modal */
.inco-detail-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 200000;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.inco-detail-modal-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 20px;
    max-width: 620px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.inco-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.inco-modal-banner-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 14px;
    background: #02040a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    cursor: pointer;
}

.inco-modal-banner-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.inco-modal-subtitle-box {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.8;
    font-weight: 700;
    color: #ddd6fe;
}

.inco-modal-content-body {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--app-text, #ffffff);
    text-align: justify;
}

/* Incoterm Diagram Viewer Fullscreen Modal */
.inco-diagram-viewer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(10px);
    z-index: 200001;
    flex-direction: column;
    padding: 14px;
}

.inco-diagram-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.inco-diagram-viewer-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 10px;
}

.inco-diagram-viewer-img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}


/* ─────────────────────────────────────────────────────────────────────────────
   INCOTERMS 2020 EXTENDED SUITE STYLES (Subnav, Calculator, Matrix, Advisor)
   ───────────────────────────────────────────────────────────────────────────── */

/* Fullscreen Immersive Mode for Mobile & Desktop */
#screen-incoterms.inco-fullscreen-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    z-index: 150000 !important;
    background: #090d1a !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
}

body.inco-body-fullscreen {
    overflow: hidden !important;
}

.inco-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.inco-fs-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 800;
    color: #c4b5fd;
}

.inco-fs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8b5cf6;
    display: inline-block;
    box-shadow: 0 0 8px #8b5cf6;
}

.inco-fs-exit-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.inco-fs-exit-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Sub-Navigation Pill Bar */
.inco-subnav-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.inco-subnav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 4px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--app-text-secondary, #94a3b8);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    text-align: center;
}

.inco-subnav-btn .inco-tab-icon {
    font-size: 13px;
}

.inco-subnav-btn.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
    border-color: rgba(139, 92, 246, 0.5);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.inco-subnav-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* TAB 2: CALCULATOR STYLES */
.inco-calc-intro-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inco-calc-intro-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inco-currency-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.inco-currency-select {
    background: #0f172a;
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}

.inco-calc-inputs-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inco-calc-card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #ffffff;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inco-calc-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.inco-calc-reset-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fca5a5;
}

.inco-calc-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.inco-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 10px;
    border-radius: 10px;
}

.inco-input-group.highlight-base {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.05);
}

.inco-input-group.highlight-main {
    border-color: rgba(6, 182, 212, 0.4);
    background: rgba(6, 182, 212, 0.05);
}

.inco-input-group.highlight-ins {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.05);
}

.inco-input-group.highlight-duty {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.05);
}

.inco-input-group label {
    font-size: 10.5px;
    font-weight: 700;
    color: #cbd5e1;
    line-height: 1.4;
}

.inco-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px 8px;
}

.inco-input-wrap:focus-within {
    border-color: #8b5cf6;
}

.inco-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 4px;
    outline: none;
    font-family: inherit;
    direction: ltr;
    text-align: left;
}

.inco-input-curr {
    font-size: 11px;
    font-weight: 800;
    color: #a78bfa;
    margin-right: 4px;
}

.inco-calc-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 8px;
}

.inco-copy-quote-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 3px 8px rgba(139, 92, 246, 0.35);
    transition: transform 0.2s;
}

.inco-copy-quote-btn:hover {
    transform: translateY(-1px);
}

.inco-calc-results-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inco-result-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s;
}

.inco-result-card.group-E { border-left: 4px solid #10b981; }
.inco-result-card.group-F { border-left: 4px solid #06b6d4; }
.inco-result-card.group-C { border-left: 4px solid #8b5cf6; }
.inco-result-card.group-D { border-left: 4px solid #f59e0b; }

.inco-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inco-result-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
}

.inco-result-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    direction: ltr;
}

.inco-price-num {
    font-size: 19px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.inco-price-sym {
    font-size: 13px;
    font-weight: 800;
    color: #38bdf8;
}

.inco-group-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.inco-result-formula {
    font-size: 11px;
    color: #e2e8f0;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    line-height: 1.5;
}

.inco-result-desc {
    font-size: 11px;
    color: var(--app-text-secondary, #94a3b8);
    line-height: 1.6;
}

/* TAB 3: MATRIX STYLES */
.inco-matrix-intro-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px 14px;
}

.inco-matrix-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.inco-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #cbd5e1;
}

.inco-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.inco-legend-dot.seller { background: #10b981; }
.inco-legend-dot.buyer { background: #3b82f6; }
.inco-legend-dot.special { background: #f59e0b; }

.inco-matrix-filter-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0;
    -webkit-overflow-scrolling: touch;
}

.inco-mat-filter-btn {
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--app-text-secondary, #94a3b8);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.2s;
}

.inco-mat-filter-btn.active {
    background: #8b5cf6;
    border-color: #a78bfa;
    color: #ffffff;
}

.inco-matrix-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #090d1a;
}

.inco-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    text-align: center;
}

.inco-matrix-table th {
    background: #0f172a;
    color: #a78bfa;
    font-weight: 800;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.inco-matrix-table td {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    white-space: nowrap;
}

.inco-matrix-table tr:hover td {
    background: rgba(139, 92, 246, 0.08);
}

.inco-matrix-table .sticky-col {
    position: sticky;
    right: 0;
    background: #090d1a;
    z-index: 2;
    text-align: right;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.inco-matrix-table tr:hover .sticky-col {
    background: #111827;
}

.inco-cell-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
}

.inco-cell-pill.seller {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.inco-cell-pill.buyer {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.inco-cell-pill.special {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.inco-caveats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.inco-caveat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inco-caveat-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #fde047;
}

.inco-caveat-body {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.6;
}

/* TAB 4: ADVISOR WIZARD STYLES */
.inco-advisor-wizard-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inco-wizard-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inco-wizard-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inco-step-label {
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
}

.inco-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.inco-choice-grid.four-col {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.inco-choice-btn {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: right;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.inco-choice-btn .inco-choice-icon {
    font-size: 18px;
    margin-bottom: 2px;
}

.inco-choice-btn .inco-choice-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #ffffff;
}

.inco-choice-btn .inco-choice-sub {
    font-size: 10px;
    color: var(--app-text-secondary, #94a3b8);
    line-height: 1.4;
}

.inco-choice-btn.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    box-shadow: 0 0 0 1px #8b5cf6, 0 4px 12px rgba(139, 92, 246, 0.25);
}

.inco-choice-btn.active .inco-choice-title {
    color: #c4b5fd;
}

.inco-advisor-result-banner {
    margin-top: 6px;
}

.inco-rec-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.inco-rec-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inco-rec-pill {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

.inco-rec-reason {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11.5px;
    color: #e2e8f0;
    line-height: 1.7;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.inco-rec-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11.5px;
    color: #fef08a;
    line-height: 1.7;
}

.inco-rec-detail-btn {
    width: 100%;
    background: #8b5cf6;
    border: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    transition: background 0.2s;
}

.inco-rec-detail-btn:hover {
    background: #7c3aed;
}

/* iOS & Android Touch Ergonomics & Safe Area */
@media (max-width: 640px) {
    .inco-container {
        padding: 10px 12px 30px 12px;
        gap: 8px;
    }
    .inco-subnav-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .inco-choice-grid {
        grid-template-columns: 1fr;
    }
    .inco-choice-grid.four-col {
        grid-template-columns: 1fr;
    }
    .inco-detail-modal-card {
        padding: 14px;
        max-height: 92vh;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CALENDAR & ALARM (تقویم و آلارم هوشمند گمرکی)
   ───────────────────────────────────────────────────────────────────────────── */

.cal-container {
    padding: 10px 14px 28px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 650px;
    margin: 0 auto;
}

.cal-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 14px;
    padding: 8px 14px;
}

.cal-today-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 12px;
    padding: 5px 12px;
    color: #d4af37;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.cal-today-btn:hover {
    background: rgba(212, 175, 55, 0.3);
    color: #ffffff;
}

/* Sub-Tools Chips Row */
.cal-subtools-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cal-subtool-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 4px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--app-text, #ffffff);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.cal-subtool-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cal-chip-converter {
    border-color: rgba(2, 132, 199, 0.4);
    background: rgba(2, 132, 199, 0.12);
    color: #38bdf8;
}

.cal-chip-diff {
    border-color: rgba(13, 148, 136, 0.4);
    background: rgba(13, 148, 136, 0.12);
    color: #2dd4bf;
}

.cal-chip-clock {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.12);
    color: #c4b5fd;
}

/* Tab Selector */
.cal-tabs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cal-tab-btn {
    padding: 8px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--app-text-secondary, #94a3b8);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cal-tab-btn.active {
    background: #d4af37;
    color: #0b0f19;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

/* Month Navigator */
.cal-nav-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cal-nav-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: var(--app-text, #ffffff);
    width: 36px;
    height: 36px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cal-nav-btn:hover {
    background: #d4af37;
    color: #0b0f19;
}

.cal-nav-title-box {
    text-align: center;
}

.cal-nav-title {
    font-size: 16px;
    font-weight: 900;
    color: #d4af37;
}

.cal-nav-subtitle {
    font-size: 10.5px;
    color: var(--app-text-secondary, #94a3b8);
    direction: ltr;
    margin-top: 2px;
}

/* Month Grid Card */
.cal-grid-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.cal-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}

.cal-weekday-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--app-text-secondary, #94a3b8);
}

.cal-weekday-label.friday {
    color: #ef4444;
}

.cal-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-day-cell {
    aspect-ratio: 1;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cal-day-cell:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.4);
    transform: scale(1.05);
}

.cal-day-cell.empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.cal-day-cell.empty:hover {
    background: transparent;
    transform: none;
}

.cal-day-shamsi {
    font-size: 15px;
    font-weight: 900;
    color: var(--app-text, #ffffff);
    line-height: 1;
}

.cal-day-sub {
    font-size: 9px;
    color: var(--app-text-muted, #64748b);
    margin-top: 3px;
    direction: ltr;
}

.cal-day-cell.today {
    border: 1.5px solid #d4af37 !important;
    background: rgba(212, 175, 55, 0.15) !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}

.cal-day-cell.today .cal-day-shamsi {
    color: #facc15;
}

.cal-day-cell.holiday {
    background: rgba(239, 68, 68, 0.08);
}

.cal-day-cell.holiday .cal-day-shamsi {
    color: #ef4444;
}

.cal-day-dot-alarm {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 6px #8b5cf6;
}

.cal-day-dot-holiday {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ef4444;
}

/* Reminders Tab Content */
.cal-reminders-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cal-reminder-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cal-reminder-info {
    flex: 1;
}

.cal-reminder-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
}

.cal-reminder-meta {
    font-size: 11px;
    color: var(--app-text-secondary, #94a3b8);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cal-reminder-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #c4b5fd;
}

.cal-reminder-badge.overdue {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.cal-reminder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cal-btn-icon {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--app-text, #ffffff);
    width: 32px;
    height: 32px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cal-btn-icon:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

/* Modals */
.cal-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    z-index: 200000;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.cal-modal-card {
    background: var(--app-card-bg, #0f172a);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 20px;
    max-width: 550px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.cal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cal-occasion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.cal-occasion-item.holiday {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
}

.cal-occasion-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
}

.cal-occasion-tag.holiday {
    background: #ef4444;
    color: #ffffff;
}

/* World Clock Grid */
.cal-clock-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cal-clock-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}

.cal-clock-city {
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
}

.cal-clock-time {
    font-size: 20px;
    font-weight: 900;
    color: #38bdf8;
    margin: 4px 0;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.cal-clock-meta {
    font-size: 10px;
    color: var(--app-text-secondary, #94a3b8);
}

/* ═════════════════════════════════════════════════════════════════════════════
   CUSTOMS PENALTIES & INFRACTIONS (جرائم و تخلفات گمرکی - ۱:۱ Android Replication)
   ═════════════════════════════════════════════════════════════════════════════ */

@keyframes penFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.pen-container {
    padding: 12px 14px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.pen-tabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;
    scrollbar-width: none;
}
.pen-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.pen-tab-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    color: var(--app-text-secondary, #94a3b8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.pen-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
.pen-tab-btn.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(239, 68, 68, 0.15));
    color: #fbbf24;
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
}

.pen-tab-pane {
    display: block;
    animation: penFadeIn 0.2s ease-in-out;
}

.pen-wizard-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(212, 175, 55, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}
.pen-wizard-banner:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 102, 241, 0.5);
}
.pen-wizard-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.pen-btn-wizard-action {
    background: #6366f1;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.pen-card {
    background: var(--app-card-bg, #131929);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.pen-steps-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pen-step-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 12px;
}
.pen-step-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.2);
    color: #fbbf24;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pen-step-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text, #ffffff);
    margin-bottom: 2px;
}
.pen-step-desc {
    font-size: 11px;
    color: var(--app-text-secondary, #94a3b8);
    line-height: 1.6;
}

.pen-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pen-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pen-radio-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    font-size: 12px;
    color: var(--app-text, #ffffff);
    transition: all 0.2s ease;
}
.pen-radio-card input {
    accent-color: #d4af37;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.pen-radio-card.selected {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.45);
    color: #fbbf24;
    font-weight: 700;
}

.pen-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.pen-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.pen-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    transition: 0.3s;
    border-radius: 24px;
}
.pen-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}
.pen-switch input:checked + .pen-slider {
    background-color: #ef4444;
}
.pen-switch input:checked + .pen-slider:before {
    transform: translateX(20px);
}

.pen-money-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.pen-money-input:focus {
    border-color: #d4af37;
    background: rgba(255, 255, 255, 0.08);
}

.pen-slider-range {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    outline: none;
}
.pen-slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d4af37;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.pen-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 12px;
}
.pen-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.pen-breakdown-row:last-child {
    border-bottom: none;
}

.pen-sanction-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.pen-scenario-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pen-scenario-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateX(-2px);
}

.pen-categories-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 2px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pen-categories-scroll::-webkit-scrollbar {
    display: none;
}
.pen-cat-chip {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--app-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.pen-cat-chip.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fca5a5;
}

.pen-submode-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 2px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pen-submode-row::-webkit-scrollbar {
    display: none;
}
.pen-submode-btn {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--app-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.pen-submode-btn.active {
    background: rgba(212, 175, 55, 0.2);
    border-color: #d4af37;
    color: #fbbf24;
}

.pen-formula-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--app-text-secondary, #94a3b8);
}

.pen-guidance-card {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pen-guidance-title {
    font-size: 12px;
    font-weight: 800;
    color: #a5b4fc;
}
.pen-guidance-desc {
    font-size: 11px;
    color: var(--app-text-secondary, #94a3b8);
    line-height: 1.6;
}

/* Light Theme Overrides for Customs Penalties */
body.theme-light .pen-tab-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .pen-tab-btn.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(239, 68, 68, 0.12));
    color: #b45309;
}
body.theme-light .pen-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
body.theme-light .pen-step-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}
body.theme-light .pen-radio-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    color: #0f172a;
}
body.theme-light .pen-money-input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
    color: #0f172a;
}
body.theme-light .pen-scenario-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}
body.theme-light .pen-cat-chip,
body.theme-light .pen-submode-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .pen-formula-box {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

/* ══════════════════════════════════════════════════════════════════════════════
   PODCAST SUITE & FLOATING MINI-PLAYER (1:1 Android Replication)
   ══════════════════════════════════════════════════════════════════════════════ */

.podcast-screen-wrap {
    padding: 12px 16px 85px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Channel Brand Banner */
.podcast-channel-card {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.15), rgba(194, 24, 91, 0.06));
    border: 1px solid rgba(233, 30, 99, 0.3);
    border-radius: 20px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}
.podcast-channel-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.podcast-channel-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(233, 30, 99, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.15);
}
.podcast-live-pulse-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #0f172a;
    box-shadow: 0 0 8px #10b981;
}
.podcast-channel-info {
    flex: 1;
    min-width: 0;
}
.podcast-channel-title {
    font-size: 14.5px;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 2px 0;
}
.podcast-channel-desc {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.podcast-channel-badges {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.podcast-badge-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fce7f3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

/* Hero Player Card */
.podcast-hero-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(233, 30, 99, 0.35);
    border-radius: 24px;
    padding: 18px 16px;
    box-shadow: 0 12px 32px -8px rgba(233, 30, 99, 0.22), 0 4px 16px rgba(0, 0, 0, 0.4);
    position: relative;
    backdrop-filter: blur(12px);
}
.podcast-hero-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.podcast-hero-cover-box {
    position: relative;
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.podcast-hero-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.podcast-hero-cover-box.playing .podcast-hero-cover-img {
    transform: scale(1.05);
}
.podcast-hero-eq-bars {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    height: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2.5px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    padding: 2px 4px;
}
.podcast-eq-bar {
    width: 3px;
    height: 4px;
    background: #f43f5e;
    border-radius: 2px;
}
.podcast-hero-cover-box.playing .podcast-eq-bar:nth-child(1) { animation: eqJump 0.8s ease-in-out infinite alternate; }
.podcast-hero-cover-box.playing .podcast-eq-bar:nth-child(2) { animation: eqJump 0.6s ease-in-out infinite alternate 0.2s; }
.podcast-hero-cover-box.playing .podcast-eq-bar:nth-child(3) { animation: eqJump 0.9s ease-in-out infinite alternate 0.1s; }
.podcast-hero-cover-box.playing .podcast-eq-bar:nth-child(4) { animation: eqJump 0.7s ease-in-out infinite alternate 0.3s; }
@keyframes eqJump {
    from { height: 3px; }
    to { height: 13px; }
}

.podcast-hero-meta-col {
    flex: 1;
    min-width: 0;
}
.podcast-hero-tag {
    font-size: 10px;
    font-weight: 800;
    color: #fda4af;
    background: rgba(233, 30, 99, 0.2);
    padding: 2px 7px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 4px;
}
.podcast-hero-title {
    font-size: 14.5px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.45;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.podcast-hero-sub {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Custom Scrubber / Range */
.podcast-seeker-container {
    margin: 10px 0 14px 0;
}
.podcast-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    cursor: pointer;
    position: relative;
    touch-action: none;
}
.podcast-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ec4899;
    border: 2.5px solid #ffffff;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.podcast-range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ec4899;
    border: 2.5px solid #ffffff;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
    cursor: pointer;
}
.podcast-range-slider:active::-webkit-slider-thumb {
    transform: scale(1.25);
}
.podcast-time-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 5px;
    font-family: inherit;
    direction: ltr;
}

/* Control Buttons Row */
.podcast-hero-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 12px;
}
.podcast-ctrl-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.podcast-ctrl-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.14);
}
.podcast-speed-btn {
    width: 46px;
    font-size: 11.5px;
    font-weight: 900;
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.3);
}
.podcast-play-main-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e11d48, #be123c);
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px -4px rgba(225, 29, 72, 0.6), 0 0 16px rgba(225, 29, 72, 0.4);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.podcast-play-main-btn:active {
    transform: scale(0.94);
}

/* Secondary Options inside Hero */
.podcast-hero-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 8px;
}
.podcast-action-link-btn {
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.podcast-action-link-btn:hover,
.podcast-action-link-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Search Bar */
.podcast-search-container {
    position: relative;
    width: 100%;
}
.podcast-search-input {
    width: 100%;
    height: 46px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 0 42px 0 38px;
    color: #ffffff;
    font-size: 13px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.podcast-search-input:focus {
    border-color: #f43f5e;
    background: rgba(30, 41, 59, 0.95);
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.2);
    outline: none;
}
.podcast-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    opacity: 0.7;
}
.podcast-search-clear {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    padding: 6px;
    cursor: pointer;
    display: none;
}

/* Category Filter Pills */
.podcast-pills-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.podcast-pills-row::-webkit-scrollbar {
    display: none;
}
.podcast-pill-chip {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.podcast-pill-chip.active {
    background: linear-gradient(135deg, #e11d48, #be123c);
    border-color: #f43f5e;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
}

/* Episodes List & Cards */
.podcast-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 700;
    padding: 0 2px;
}
.podcast-episodes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.podcast-item-card {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.podcast-item-card:hover {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(233, 30, 99, 0.35);
}
.podcast-item-card.is-active {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.18), rgba(30, 41, 59, 0.9));
    border-color: #f43f5e;
    box-shadow: 0 4px 20px rgba(233, 30, 99, 0.2);
}
.podcast-card-cover-wrap {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.podcast-card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.podcast-card-info-col {
    flex: 1;
    min-width: 0;
}
.podcast-card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.4;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.podcast-card-meta {
    font-size: 10.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
}
.podcast-card-duration-badge {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 700;
    color: #cbd5e1;
    direction: ltr;
}
.podcast-card-play-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(233, 30, 99, 0.18);
    border: 1px solid rgba(233, 30, 99, 0.4);
    color: #f43f5e;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.podcast-item-card.is-active .podcast-card-play-btn {
    background: #e11d48;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(225, 29, 72, 0.6);
}

/* PERSISTENT FLOATING MINI-PLAYER (1:1 Android PodcastBottomBar.kt) */
.podcast-floating-bottom-bar {
    position: fixed;
    bottom: 58px;
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    z-index: 99995;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(233, 30, 99, 0.45);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(233, 30, 99, 0.15);
    animation: podcastSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

body.has-podcast-active .pwa-install-banner {
    bottom: 125px !important;
}
@keyframes podcastSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.podcast-mini-progress-track {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}
.podcast-mini-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f43f5e, #ec4899);
    width: 0%;
    transition: width 0.2s linear;
}

.podcast-mini-content {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 10px;
}
.podcast-mini-info-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}
.podcast-mini-cover {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.podcast-mini-text-col {
    flex: 1;
    min-width: 0;
}
.podcast-mini-title {
    font-size: 12.5px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.podcast-mini-subtitle {
    font-size: 10px;
    color: #fda4af;
    margin-top: 1px;
}
.podcast-mini-actions-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.podcast-mini-btn {
    background: none;
    border: none;
    color: #cbd5e1;
    width: 36px;
    height: 36px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
}
.podcast-mini-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.1);
}
.podcast-mini-play-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e11d48;
    border: none;
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.5);
    transition: transform 0.15s ease;
}
.podcast-mini-play-btn:active {
    transform: scale(0.92);
}
.podcast-mini-speed-text {
    font-size: 11px;
    font-weight: 800;
    color: #f43f5e;
}
.podcast-close-btn {
    color: #94a3b8;
    font-size: 14px;
}

/* Spinner during audio prepare/buffer */
.podcast-buffering-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: podcastSpin 0.7s linear infinite;
    display: inline-block;
}
@keyframes podcastSpin {
    to { transform: rotate(360deg); }
}

/* Modal for Episode Description */
.podcast-modal-body-content {
    font-size: 13px;
    line-height: 1.8;
    color: #e2e8f0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px 4px;
}
.podcast-modal-body-content p {
    margin-bottom: 12px;
}
.podcast-modal-body-content a {
    color: #38bdf8;
    text-decoration: underline;
}
.podcast-modal-body-content strong {
    color: #ffffff;
}

/* ═════════════════════════════════════════════════════════════════════════════
   UNIT CONVERTER STYLES (1:1 Android Replication)
   ═════════════════════════════════════════════════════════════════════════════ */

.uc-wizard-trigger-btn {
    color: #0d9488 !important;
    border-color: rgba(13, 148, 136, 0.4) !important;
    background: rgba(13, 148, 136, 0.1) !important;
}

.uc-nav-wrapper {
    background: var(--app-card-bg);
    border-bottom: 1px solid var(--app-border);
    padding: 8px 12px;
    margin: 0 -12px 14px -12px;
    overflow: hidden;
}

.uc-categories-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.uc-categories-nav::-webkit-scrollbar {
    display: none;
}

.uc-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--app-pill-bg, rgba(255, 255, 255, 0.05));
    color: var(--app-text-secondary, #94a3b8);
    border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.uc-pill-btn:hover {
    color: var(--app-text);
    border-color: rgba(13, 148, 136, 0.5);
}

.uc-pill-btn.active {
    background: linear-gradient(135deg, #0d9488, #059669);
    color: #ffffff;
    border-color: #0d9488;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
}

.uc-pill-icon {
    font-size: 14px;
}

.uc-view-container {
    animation: ucFadeIn 0.25s ease-out;
}
@keyframes ucFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.uc-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.uc-main-card {
    border-color: rgba(13, 148, 136, 0.35);
}

.uc-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.uc-card-header h3 {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text);
    margin: 0;
}

.uc-card-inner-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text);
    margin: 0 0 4px 0;
}

.uc-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d9488;
    box-shadow: 0 0 8px rgba(13, 148, 136, 0.7);
    flex-shrink: 0;
}

.uc-header-icon {
    font-size: 18px;
}

.uc-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.uc-field-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--app-text-secondary);
}

.uc-text-field, .uc-select-field {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: var(--app-pill-bg, #0f172a);
    color: var(--app-text, #f8fafc);
    font-size: 13.5px;
    font-weight: 700;
    padding: 0 12px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.uc-text-field:focus, .uc-select-field:focus {
    border-color: #0d9488;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.uc-dual-select-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.uc-select-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.uc-swap-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.35);
    color: #0d9488;
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, background 0.2s ease;
    margin-bottom: 1px;
}
.uc-swap-btn:hover {
    transform: scale(1.08);
    background: rgba(13, 148, 136, 0.25);
}
.uc-swap-btn:active {
    transform: scale(0.95);
}

.uc-result-banner {
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.35);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.uc-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.uc-result-label {
    font-size: 11px;
    font-weight: 700;
    color: #0d9488;
}

.uc-result-display {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.uc-result-num {
    font-size: 22px;
    font-weight: 900;
    color: var(--app-text, #ffffff);
}

.uc-result-sym {
    font-size: 14px;
    font-weight: 800;
    color: #0d9488;
}

.uc-copy-badge-btn {
    background: rgba(13, 148, 136, 0.2);
    border: 1px solid rgba(13, 148, 136, 0.4);
    color: #0d9488;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}
.uc-copy-badge-btn:hover {
    background: #0d9488;
    color: #ffffff;
}

.uc-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 10px 0;
}
.uc-section-title h4 {
    font-size: 13px;
    font-weight: 800;
    color: var(--app-text);
    margin: 0;
}

.uc-epl-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.uc-epl-row-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.uc-epl-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.uc-epl-unit-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.uc-epl-symbol-pill {
    background: rgba(2, 132, 199, 0.15);
    color: #38bdf8;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    direction: ltr;
}

.uc-epl-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text);
}

.uc-epl-equiv-pill {
    display: inline-block;
    align-self: flex-start;
    background: rgba(13, 148, 136, 0.1);
    color: #0d9488;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.uc-epl-customs-note {
    font-size: 11.5px;
    color: var(--app-text-secondary);
    line-height: 1.6;
}

.uc-mini-copy-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--app-border);
    background: transparent;
    color: var(--app-text-secondary);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.uc-mini-copy-btn:hover {
    border-color: #0d9488;
    color: #0d9488;
}

.uc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.uc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.uc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.uc-row-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-text-secondary);
}

.uc-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.uc-row-val {
    font-size: 14px;
    font-weight: 800;
}
.uc-row-val.teal { color: #0d9488; }
.uc-row-val.blue { color: #0284c7; }
.uc-row-val.purple { color: #8b5cf6; }
.uc-row-val.amber { color: #d97706; }
.uc-row-val.emerald { color: #059669; }

.uc-divider {
    height: 1px;
    background: var(--app-border);
    margin: 4px 0;
}

.uc-progress-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.uc-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--app-text);
}

.uc-progress-track {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.uc-progress-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #0d9488, #10b981);
    transition: width 0.3s ease;
}

.uc-formula-card {
    border-right: 4px solid #0d9488;
}

.uc-formula-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.uc-formula-header h4 {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--app-text);
    margin: 0;
}

.uc-formula-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0d9488;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.uc-formula-rule {
    background: rgba(13, 148, 136, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #0d9488;
    direction: ltr;
    text-align: right;
}

.uc-formula-note {
    font-size: 11.5px;
    color: var(--app-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Wizard Modal */
.uc-wizard-card {
    max-width: 390px;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
}

.uc-wizard-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.uc-wizard-step-badge {
    font-size: 11px;
    font-weight: 700;
    background: rgba(13, 148, 136, 0.2);
    color: #0d9488;
    padding: 3px 10px;
    border-radius: 12px;
}

.uc-modal-close-icon {
    background: transparent;
    border: none;
    color: var(--app-text-secondary);
    font-size: 16px;
    cursor: pointer;
}

.uc-wizard-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.3);
    margin: 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uc-wizard-icon {
    font-size: 28px;
}

.uc-wizard-cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text-secondary);
    display: block;
}

.uc-wizard-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--app-text);
    margin: 6px 0 10px 0;
}

.uc-wizard-desc {
    font-size: 12px;
    color: var(--app-text-secondary);
    line-height: 1.7;
    margin: 0 0 12px 0;
}

.uc-wizard-tip-box {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
    text-align: right;
    margin-bottom: 16px;
}

.uc-wizard-tip-label {
    font-size: 11px;
    font-weight: 800;
    color: #f59e0b;
    display: block;
    margin-bottom: 2px;
}

.uc-wizard-tip-text {
    font-size: 11px;
    color: var(--app-text);
    margin: 0;
    line-height: 1.6;
}

.uc-wizard-dots-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

.uc-wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}
.uc-wizard-dot.active {
    width: 22px;
    border-radius: 4px;
    background: #0d9488;
}

.uc-wizard-nav-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.uc-wizard-btn-next {
    flex: 1;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d9488, #059669);
    color: #ffffff;
    font-weight: 800;
    font-size: 12.5px;
    border: none;
    cursor: pointer;
}

.uc-wizard-btn-prev {
    height: 40px;
    border-radius: 12px;
    background: transparent;
    color: var(--app-text-secondary);
    font-weight: 700;
    font-size: 12px;
    border: 1px solid var(--app-border);
    padding: 0 16px;
    cursor: pointer;
}

/* ═════════════════════════════════════════════════════════════════
   CUSTOMS TIMELINE & DEADLINE TRACKER (گاه‌شمار گمرکی و مهلت‌یار)
   100% Replication of Android CustomsTimelineScreen.kt & CustomsTimelineWizard.kt
   ═════════════════════════════════════════════════════════════════ */

/* ── 1. PINNED QUICK COUNTDOWN SIMULATOR CARD ── */
.timeline-sim-card {
    background: rgba(19, 25, 41, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-sim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.timeline-sim-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-sim-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
}

.timeline-sim-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.timeline-sim-sub {
    font-size: 10.5px;
    color: #94A3B8;
    display: block;
    margin-top: 2px;
}

.timeline-sim-toggle-arrow {
    font-size: 11px;
    color: #94A3B8;
    transition: transform 0.25s ease;
}

.timeline-sim-card.collapsed .timeline-sim-toggle-arrow {
    transform: rotate(180deg);
}

.timeline-sim-card.collapsed .timeline-sim-body {
    display: none;
}

.timeline-sim-body {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.timeline-sim-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: flex-end;
}

.timeline-sim-col {
    flex: 1;
    min-width: 0;
}

.timeline-sim-col.wide {
    flex: 1 1 100%;
}

.timeline-sim-col.today-btn-col {
    flex: 0 0 auto;
}

.timeline-input-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #94A3B8;
    margin-bottom: 4px;
}

.timeline-select, .timeline-input-num, .timeline-input-text {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    background: #0F172A;
    border: 1px solid #1E293B;
    color: #F8FAFC;
    font-family: inherit;
    font-size: 11.5px;
    padding: 0 10px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.timeline-select:focus, .timeline-input-num:focus, .timeline-input-text:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.timeline-btn-today, .timeline-btn-today-sm {
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.16);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #D4AF37;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.timeline-btn-today:active, .timeline-btn-today-sm:active {
    background: rgba(212, 175, 55, 0.3);
    transform: scale(0.97);
}

.timeline-sim-result-box {
    margin-top: 10px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    padding: 12px;
}

.sim-result-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sim-res-item {
    flex: 1 1 calc(50% - 5px);
    display: flex;
    flex-direction: column;
}

.sim-res-item.wide {
    flex: 1 1 100%;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sim-res-label {
    font-size: 10px;
    color: #94A3B8;
    margin-bottom: 2px;
}

.sim-res-val {
    font-size: 13px;
    font-weight: 800;
    color: #F8FAFC;
}

.sim-res-val.highlight {
    color: #D4AF37;
}

.sim-res-val.danger {
    color: #EF4444;
}

.sim-res-val.warn {
    color: #F97316;
}

.sim-res-val.success {
    color: #10B981;
}

.sim-res-sub {
    font-size: 10px;
    color: #64748B;
    margin-top: 1px;
}

.sim-res-text {
    font-size: 11px;
    line-height: 1.6;
    color: #E2E8F0;
    text-align: justify;
}

/* ── 2. SEARCH BAR & BOOKMARKS ROW ── */
.timeline-search-bar-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.timeline-search-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.timeline-search-icon {
    position: absolute;
    right: 12px;
    font-size: 15px;
    color: #D4AF37;
    pointer-events: none;
}

.timeline-search-input {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    background: #131929;
    border: 1px solid #1E293B;
    color: #F8FAFC;
    font-family: inherit;
    font-size: 11.5px;
    padding: 0 38px 0 34px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.timeline-search-input:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.timeline-search-clear {
    position: absolute;
    left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
}

.timeline-bookmark-toggle-btn {
    width: 44px;
    height: 42px;
    border-radius: 12px;
    background: #131929;
    border: 1px solid #1E293B;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.timeline-bookmark-toggle-btn.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: #D4AF37;
    color: #D4AF37;
}

.timeline-bookmark-star {
    font-size: 20px;
    line-height: 1;
}

.timeline-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #D4AF37;
    color: #0B0F19;
    font-size: 9px;
    font-weight: 900;
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── 3. CATEGORY FILTER CHIPS ── */
.timeline-filter-chips {
    margin-bottom: 12px;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.timeline-filter-chips::-webkit-scrollbar {
    display: none;
}

/* ── 4. ACCORDION DEADLINES LIST & CARDS ── */
.timeline-deadlines-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 40px;
}

.timeline-accordion-card {
    background: #131929;
    border: 1px solid #1E293B;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-accordion-card.expanded {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.timeline-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.timeline-card-main-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.timeline-category-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.timeline-card-titles {
    flex: 1;
    min-width: 0;
}

.timeline-card-title {
    font-size: 13px;
    font-weight: 800;
    color: #F8FAFC;
    line-height: 1.45;
    margin-bottom: 3px;
    word-break: break-word;
}

.timeline-card-subtitle {
    font-size: 10.5px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.timeline-dot-sep {
    color: #475569;
}

.timeline-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.timeline-duration-badge {
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.timeline-risk-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.timeline-card-body {
    padding-top: 10px;
}

.timeline-card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 10px;
}

.timeline-detail-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.timeline-row-icon {
    font-size: 12px;
    line-height: 1.4;
    flex-shrink: 0;
    margin-top: 1px;
}

.timeline-row-content {
    flex: 1;
}

.timeline-row-label {
    font-size: 10px;
    font-weight: 800;
    color: #94A3B8;
    margin-bottom: 1px;
}

.timeline-row-text {
    font-size: 11.5px;
    line-height: 1.65;
    color: #E2E8F0;
    text-align: justify;
}

.timeline-keynote-box {
    display: flex;
    gap: 8px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 10px;
    padding: 8px 10px;
    margin-top: 6px;
    margin-bottom: 10px;
}

.timeline-keynote-bulb {
    font-size: 13px;
    flex-shrink: 0;
}

.timeline-keynote-text {
    font-size: 11px;
    line-height: 1.6;
    color: #F8FAFC;
    text-align: justify;
}

.timeline-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.timeline-quick-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-action-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-action-icon-btn.active {
    background: rgba(212, 175, 55, 0.18);
    border-color: #D4AF37;
    color: #D4AF37;
}

.timeline-action-icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ── 5. GEMINI PRO ANIMATED RAINBOW BORDER BUTTON ── */
.gemini-pro-rainbow-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1E1B4B, #2E1065);
    color: #FEF3C7;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gemini-pro-rainbow-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(
        from 0deg,
        #38BDF8,
        #818CF8,
        #C084FC,
        #F472B6,
        #FBBF24,
        #34D399,
        #38BDF8
    );
    border-radius: 13px;
    z-index: -2;
    animation: geminiRainbowSpin 2.6s linear infinite;
}

.gemini-pro-rainbow-btn::after {
    content: '';
    position: absolute;
    inset: 1.8px;
    background: linear-gradient(135deg, #1E1B4B, #2E1065);
    border-radius: 10px;
    z-index: -1;
}

.gemini-pro-rainbow-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}

.gemini-pro-rainbow-btn:active {
    transform: scale(0.97);
}

.gemini-sparkle-icon {
    font-size: 12px;
    color: #FBBF24;
}

.gemini-clock-icon {
    font-size: 13px;
    color: #FDE68A;
}

.gemini-btn-text {
    line-height: 1;
}

@keyframes geminiRainbowSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── 6. SMART CALCULATOR & ALARM MODAL DIALOG ── */
.timeline-calc-modal-card {
    max-width: 520px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.timeline-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.timeline-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-calc-sparkle-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #D4AF37, #F59E0B);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #FFFFFF;
}

.timeline-modal-title {
    font-size: 14px;
    font-weight: 800;
    color: #F8FAFC;
    margin: 0;
}

.timeline-modal-sub {
    font-size: 11px;
    margin-top: 2px;
}

.timeline-calc-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.timeline-modal-section {
    display: flex;
    flex-direction: column;
}

.timeline-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #F8FAFC;
    margin-bottom: 2px;
}

.timeline-section-sub {
    font-size: 10.5px;
    color: #94A3B8;
    margin-bottom: 8px;
}

.timeline-date-pickers-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.timeline-picker-group {
    flex: 1;
}

.timeline-picker-group.auto-btn {
    flex: 0 0 auto;
}

.timeline-picker-label {
    display: block;
    font-size: 10px;
    color: #94A3B8;
    margin-bottom: 3px;
}

.timeline-calc-result-surface {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 14px;
    padding: 12px 14px;
}

.timeline-calc-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.timeline-calc-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
}

.timeline-calc-badge.safe {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.timeline-calc-badge.critical {
    background: rgba(249, 115, 22, 0.15);
    color: #F97316;
}

.timeline-calc-badge.expired {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

.timeline-calc-result-date-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-result-label {
    font-size: 10.5px;
    color: #94A3B8;
}

.timeline-result-shamsi {
    font-size: 15px;
    font-weight: 900;
    color: #F8FAFC;
}

.timeline-result-gregorian {
    font-size: 11px;
    color: #64748B;
}

.timeline-warn-chips-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.timeline-warn-chip {
    flex: 1;
    height: 34px;
    border-radius: 10px;
    background: #0F172A;
    border: 1px solid #1E293B;
    color: #F8FAFC;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-warn-chip.active {
    background: #D4AF37;
    border-color: #D4AF37;
    color: #0B0F19;
    font-weight: 900;
}

.timeline-sync-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.timeline-sync-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #1E293B;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-sync-option:hover {
    border-color: rgba(212, 175, 55, 0.35);
}

.timeline-sync-option input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #D4AF37;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.timeline-sync-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #F8FAFC;
    margin-bottom: 2px;
}

.timeline-sync-desc {
    font-size: 10px;
    color: #94A3B8;
    line-height: 1.5;
}

.timeline-calc-submit-btn {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #D4AF37, #B45309);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
    transition: all 0.2s ease;
    margin-top: 4px;
}

.timeline-calc-submit-btn:hover {
    background: linear-gradient(135deg, #EAB308, #D97706);
    transform: translateY(-1px);
}

.timeline-calc-submit-btn:active {
    transform: scale(0.98);
}

/* ── 7. LEGAL DOCUMENT PREVIEW MODAL ── */
.timeline-legal-modal-card {
    max-width: 480px;
    padding: 18px;
}

.timeline-legal-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #8B5CF6;
    margin: 0 0 12px 0;
}

.timeline-legal-box {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px;
}

.timeline-legal-box-header {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.timeline-legal-badge {
    font-size: 10px;
    color: #94A3B8;
}

.timeline-legal-ref {
    font-size: 12px;
    font-weight: 800;
    color: #C084FC;
}

.timeline-legal-box-content {
    margin-bottom: 8px;
}

.timeline-legal-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    margin-bottom: 2px;
}

.timeline-legal-text, .timeline-legal-note-text {
    font-size: 11.5px;
    line-height: 1.65;
    color: #F8FAFC;
    text-align: justify;
}

.timeline-legal-library-btn {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    background: #8B5CF6;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    transition: all 0.2s ease;
}

.timeline-legal-library-btn:hover {
    background: #7C3AED;
}

/* ── 8. UNIVERSAL TOOL SHOWCASE WIZARD ── */
.timeline-wizard-overlay {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.timeline-wizard-card {
    max-width: 440px;
    padding: 20px;
}

.timeline-wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.timeline-wizard-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-wizard-cat {
    font-size: 11px;
    font-weight: 800;
    display: block;
    margin-top: 2px;
}

.timeline-wiz-step-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    color: #94A3B8;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.timeline-wiz-step-title {
    font-size: 14.5px;
    font-weight: 900;
    color: #FFFFFF;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.timeline-wiz-step-desc {
    font-size: 12px;
    line-height: 1.7;
    color: #CBD5E1;
    margin: 0 0 14px 0;
    text-align: justify;
}

.timeline-wiz-demo-container {
    margin-bottom: 14px;
}

.wizard-steps-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.wiz-flow-chip {
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(2, 132, 199, 0.15);
    border: 1px solid rgba(2, 132, 199, 0.4);
    color: #38BDF8;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.wiz-flow-chip.active {
    background: #0284C7;
    color: #FFFFFF;
}

.wiz-flow-arrow {
    color: #64748B;
    font-size: 11px;
}

.wizard-box-demo {
    border: 1px solid;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wiz-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #8B5CF6;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.timeline-wiz-tip-box {
    display: flex;
    gap: 8px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 16px;
}

.timeline-wiz-tip-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.timeline-wiz-tip-text {
    font-size: 11px;
    line-height: 1.6;
    color: #FEF3C7;
    text-align: justify;
}

.timeline-wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.timeline-wiz-dots {
    display: flex;
    gap: 6px;
}

.wiz-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.wiz-dot.active {
    width: 20px;
    border-radius: 4px;
    background: #D4AF37;
}

.timeline-wiz-nav-btns {
    display: flex;
    gap: 8px;
}

.timeline-wiz-nav-btn {
    height: 38px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    border: none;
    padding: 0 14px;
    transition: all 0.2s ease;
}

.timeline-wiz-nav-btn.prev {
    background: transparent;
    color: #94A3B8;
    border: 1px solid #334155;
}

.timeline-wiz-nav-btn.next {
    background: linear-gradient(135deg, #D4AF37, #B45309);
    color: #FFFFFF;
}

/* ── 9. EMPTY STATE ── */
.timeline-empty-state {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-empty-icon {
    font-size: 44px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.timeline-empty-title {
    font-size: 14px;
    font-weight: 800;
    color: #F8FAFC;
    margin-bottom: 6px;
}

.timeline-empty-sub {
    font-size: 11.5px;
    color: #94A3B8;
    max-width: 320px;
    line-height: 1.6;
}

/* ── 10. TOAST NOTIFICATION ── */
.timeline-toast-notice {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0F172A;
    border: 1px solid #D4AF37;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100000;
    white-space: nowrap;
}

.timeline-toast-notice.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ── 11. MOBILE ADJUSTMENTS ── */
@media (max-width: 480px) {
    .timeline-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .timeline-card-badges {
        flex-direction: row;
        align-self: flex-start;
    }
    .timeline-card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .timeline-quick-actions {
        justify-content: flex-start;
    }
    .gemini-pro-rainbow-btn {
        width: 100%;
    }
    .timeline-sim-row.dates-row {
        flex-wrap: wrap;
    }
    .timeline-sim-col {
        flex: 1 1 calc(50% - 5px);
    }
    .timeline-sim-col.today-btn-col {
        flex: 1 1 100%;
    }
    .timeline-btn-today {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CURRENCY CONVERTER SCREEN (ماشین‌حساب تبدیل ارز)
   100% Jetpack Compose CurrencyConverterScreen.kt & CurrencyConverterEngine.kt
   Mobile-First (Android & iOS Safari / PWA / Desktop)
   ───────────────────────────────────────────────────────────────────────────── */

#screen-currency_converter {
    padding-bottom: 30px;
}

/* Live Refresh Capsule in Azmoon Header */
.currency-live-capsule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #34D399;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.currency-live-capsule:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}

.currency-live-capsule:active {
    transform: scale(0.96);
}

.currency-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    display: inline-block;
    box-shadow: 0 0 8px #10B981;
    animation: currencyPulseAnim 2s infinite ease-in-out;
}

.currency-pulse-dot.stale {
    background: #F59E0B;
    box-shadow: 0 0 8px #F59E0B;
}

@keyframes currencyPulseAnim {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.9);
    }
}

.currency-capsule-refresh-icon {
    font-size: 11px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.currency-live-capsule.refreshing .currency-capsule-refresh-icon {
    animation: currencySpin 0.8s linear infinite;
}

@keyframes currencySpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 3-Tab Segmented Pill Control (Matching Compose lines 293-336) */
.currency-tabs-segmented-wrapper {
    padding: 0 16px 14px 16px;
}

.currency-segmented-pill-control {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 4px;
    gap: 4px;
}

.currency-segmented-pill-btn {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 9px 6px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: #94A3B8;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}

.currency-segmented-pill-btn.active {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35);
}

/* Tab Panels */
.currency-tab-content-panel {
    display: none;
}

.currency-tab-content-panel.active {
    display: block;
    animation: currencyFadeIn 0.25s ease-out;
}

@keyframes currencyFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Timestamp Row */
.currency-calc-timestamp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 10px 16px;
    font-size: 11px;
    color: #94A3B8;
}

.currency-calc-ts-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.currency-calc-ts-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34D399;
}

.currency-calc-ts-badge.offline {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #FBBF24;
}

/* Google-Style Dual Interactive Card (Compose lines 505-725) */
.currency-dual-card-container {
    margin: 0 16px 14px 16px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.currency-interactive-box {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(16, 185, 129, 0.22);
    padding: 14px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.currency-interactive-box:focus-within {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.currency-interactive-box.from-box {
    border-radius: 20px 20px 8px 8px;
}

.currency-interactive-box.to-box {
    border-radius: 8px 8px 20px 20px;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-top: none;
}

.currency-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.currency-box-role {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
}

/* Currency Selector Pill */
.currency-selector-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.currency-selector-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(16, 185, 129, 0.4);
}

.currency-selector-pill:active {
    transform: scale(0.97);
}

.pill-flag {
    font-size: 18px;
    line-height: 1;
}

.pill-code {
    font-weight: 800;
    font-size: 13.5px;
    color: #F8FAFC;
    font-family: monospace, 'Vazirmatn', sans-serif;
}

.pill-name-fa {
    font-size: 11px;
    color: #94A3B8;
}

.pill-arrow {
    font-size: 8px;
    color: #64748B;
    margin-right: 2px;
}

/* Input Row */
.currency-box-input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.currency-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.currency-input-field {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 28px;
    font-weight: 900;
    color: #F8FAFC;
    text-align: right;
    direction: ltr;
    font-family: 'Vazirmatn', sans-serif;
    padding: 2px 0;
}

.currency-input-clear-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #94A3B8;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    transition: background 0.15s, color 0.15s;
}

.currency-input-clear-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

.currency-box-symbol {
    font-size: 22px;
    font-weight: 800;
    color: #10B981;
    min-width: 28px;
    text-align: center;
}

/* Swap Floating Button */
.calc-swap-floating-wrapper {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -12px 0;
    z-index: 5;
}

.calc-swap-divider {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 1;
}

.calc-swap-floating-btn {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    border: 3px solid #0B0F19;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
}

.calc-swap-floating-btn:active {
    transform: scale(0.92);
}

.swap-icon-glyph {
    line-height: 1;
}

/* Result Box */
.currency-box-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.currency-box-result-val {
    font-size: 28px;
    font-weight: 900;
    color: #10B981;
    letter-spacing: -0.5px;
    direction: ltr;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.currency-box-result-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.currency-copy-val-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34D399;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.currency-copy-val-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
}

.currency-copy-val-btn:active {
    transform: scale(0.92);
}

/* Live Exchange Rate Banner (Compose lines 728-788) */
.calc-live-rates-banner {
    margin: 0 16px 14px 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.rates-banner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.rates-banner-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #94A3B8;
}

.rates-trend-icon {
    font-size: 13px;
}

.rates-share-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #F8FAFC;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.rates-share-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.rates-banner-direct {
    font-size: 13.5px;
    font-weight: 800;
    color: #F8FAFC;
    line-height: 1.6;
}

.rates-banner-reverse {
    font-size: 11.5px;
    color: #64748B;
    line-height: 1.6;
    margin-top: 3px;
}

/* Quick Amount Chips (Compose lines 791-821) */
.calc-quick-amount-section {
    margin: 0 16px 14px 16px;
}

.quick-amount-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    margin-bottom: 8px;
}

.quick-amount-chips-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.quick-amount-chips-scroll::-webkit-scrollbar {
    display: none;
}

.calc-quick-chip {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #F8FAFC;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.calc-quick-chip:hover {
    background: rgba(255, 255, 255, 0.08);
}

.calc-quick-chip.active {
    background: rgba(16, 185, 129, 0.18);
    border-color: #10B981;
    color: #34D399;
}

/* Resilience Tip Card (Compose lines 824-848) */
.calc-resilience-card {
    margin: 0 16px 20px 16px;
    padding: 12px 14px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.resilience-icon {
    font-size: 17px;
    line-height: 1.4;
}

.resilience-text {
    font-size: 11px;
    line-height: 1.7;
    color: #94A3B8;
    margin: 0;
}

.resilience-text strong {
    color: #34D399;
}

/* ════ TAB 1: COMPARISON TABLE (Compose lines 858-1001) ════ */
.comp-table-header-card {
    margin: 0 16px 12px 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comp-table-title-col h3 {
    font-size: 13.5px;
    font-weight: 800;
    color: #F8FAFC;
    margin: 0 0 4px 0;
}

.comp-table-title-col p {
    font-size: 11px;
    color: #94A3B8;
    margin: 0;
}

.comp-table-swap-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34D399;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.comp-table-swap-btn:hover {
    background: rgba(16, 185, 129, 0.22);
}

.comp-table-cols-head {
    margin: 0 16px 8px 16px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
}

.col-head.from-col {
    flex: 1;
}

.col-head.to-col {
    flex: 1.2;
    text-align: left;
}

.col-head.action-col {
    width: 36px;
    text-align: center;
}

.comp-table-body-container {
    margin: 0 16px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comp-table-row {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    transition: background 0.15s, border-color 0.15s;
}

.comp-table-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(16, 185, 129, 0.3);
}

.comp-table-row .col-from {
    flex: 1;
    font-weight: 700;
    font-size: 13px;
    color: #F8FAFC;
}

.comp-table-row .col-to {
    flex: 1.2;
    font-weight: 800;
    font-size: 13.5px;
    color: #10B981;
    direction: ltr;
    text-align: left;
}

.comp-table-row .col-action {
    width: 36px;
    display: flex;
    justify-content: flex-end;
}

.comp-row-copy-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #94A3B8;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.comp-row-copy-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

/* ════ TAB 2: DIRECTORY VIEW (Compose lines 1007-1172) ════ */
.directory-search-wrapper {
    margin: 0 16px 10px 16px;
    position: relative;
    display: flex;
    align-items: center;
}

.dir-search-icon {
    position: absolute;
    right: 14px;
    font-size: 14px;
    color: #94A3B8;
}

.dir-search-input {
    width: 100%;
    height: 44px;
    padding: 0 42px 0 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #F8FAFC;
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s;
    text-align: right;
    direction: rtl;
}

.dir-search-input:focus {
    border-color: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.directory-categories-scroll {
    margin: 0 16px 12px 16px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.directory-categories-scroll::-webkit-scrollbar {
    display: none;
}

.dir-cat-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.dir-cat-chip.active {
    background: linear-gradient(135deg, #10B981, #059669);
    border-color: transparent;
    color: #ffffff;
}

.directory-base-rate-bar {
    margin: 0 16px 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
}

.directory-cards-container {
    margin: 0 16px 24px 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 640px) {
    .directory-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.directory-currency-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.directory-currency-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(16, 185, 129, 0.35);
}

.directory-currency-card:active {
    transform: scale(0.98);
}

.dir-card-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dir-card-flag {
    font-size: 22px;
    line-height: 1;
}

.dir-card-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dir-card-primary-title {
    font-size: 12.5px;
    font-weight: 800;
    color: #F8FAFC;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dir-card-code-badge {
    font-size: 10.5px;
    font-weight: 800;
    font-family: monospace, sans-serif;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #34D399;
}

.dir-card-secondary-title {
    font-size: 10px;
    color: #64748B;
}

.dir-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.dir-card-rate-val {
    font-size: 13px;
    font-weight: 800;
    color: #10B981;
    direction: ltr;
    font-family: monospace, sans-serif;
}

.dir-card-rate-label {
    font-size: 9.5px;
    color: #64748B;
}

/* ════ CURRENCY PICKER MODAL DIALOG (Compose lines 1222-1396) ════ */
.currency-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.currency-picker-overlay.open,
.currency-picker-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.currency-picker-dialog-card {
    width: 100%;
    max-width: 520px;
    max-height: 82vh;
    background: #111726;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
}

.currency-picker-overlay.open .currency-picker-dialog-card,
.currency-picker-overlay.active .currency-picker-dialog-card {
    transform: translateY(0);
}

@media (min-width: 640px) {
    .currency-picker-overlay {
        align-items: center;
        padding: 20px;
    }
    .currency-picker-dialog-card {
        border-radius: 24px;
        transform: scale(0.95) translateY(20px);
    }
    .currency-picker-overlay.open .currency-picker-dialog-card,
    .currency-picker-overlay.active .currency-picker-dialog-card {
        transform: scale(1) translateY(0);
    }
}

.picker-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.picker-modal-header h3 {
    font-size: 14px;
    font-weight: 800;
    color: #F8FAFC;
    margin: 0;
}

.picker-modal-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #94A3B8;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.picker-search-wrap {
    padding: 12px 18px 8px 18px;
    position: relative;
    display: flex;
    align-items: center;
}

.picker-search-icon {
    position: absolute;
    right: 32px;
    font-size: 14px;
    color: #94A3B8;
}

.picker-search-field {
    width: 100%;
    height: 42px;
    padding: 0 42px 0 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #F8FAFC;
    font-size: 12px;
    outline: none;
    text-align: right;
    direction: rtl;
}

.picker-search-field:focus {
    border-color: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.picker-modal-categories-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 18px 10px 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.picker-modal-categories-scroll::-webkit-scrollbar {
    display: none;
}

.picker-modal-chip {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.picker-modal-chip.active {
    background: #10B981;
    border-color: #10B981;
    color: #ffffff;
}

.picker-modal-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 6px 18px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
}

.picker-currency-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.picker-currency-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(16, 185, 129, 0.4);
}

.picker-currency-item.selected {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10B981;
}

.picker-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.picker-item-flag {
    font-size: 22px;
    line-height: 1;
}

.picker-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picker-item-primary {
    font-size: 12.5px;
    font-weight: 800;
    color: #F8FAFC;
    display: flex;
    align-items: center;
    gap: 6px;
}

.picker-item-code {
    font-size: 11px;
    font-weight: 800;
    color: #34D399;
    font-family: monospace, sans-serif;
}

.picker-item-secondary {
    font-size: 10px;
    color: #64748B;
}

.picker-item-check {
    font-size: 15px;
    color: #10B981;
    font-weight: bold;
}

/* ═════════════════════════════════════════════════════════════════════════════
   IMPEX AI ASSISTANT (دستیار هوش مصنوعی گمرک و تجارت ایران ایمپکس)
   Complete 1:1 Jetpack Compose Replication & Cross-Platform Mobile Styling
   ═════════════════════════════════════════════════════════════════════════════ */

#screen-ai_assistant {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 100px);
    background: #070A13;
    color: #F8FAFC;
    position: relative;
    padding-bottom: 80px;
}

#screen-ai_assistant.active,
.screen-view#screen-ai_assistant.active {
    display: flex !important;
}

/* AZMOON Standard Screen Header & Action Buttons */
.azmoon-screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #0D1322;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 25;
}

.azmoon-header-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right;
    flex: 1;
}

.azmoon-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    z-index: 30;
}

.header-square-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #1E293B;
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #F8FAFC;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.header-square-btn:hover,
.header-square-btn:active {
    background: #2D3748;
    border-color: #8B5CF6;
    transform: scale(0.96);
}

/* AZMOON Standard Header Theme for AI */
.ai-header-theme {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    background: #0D1322 !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.25) !important;
    padding: 12px 16px !important;
    flex-shrink: 0;
}

.ai-header-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-header-title-text {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #F8FAFC !important;
    margin: 0 !important;
}

.ai-header-pill {
    font-size: 10px;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(99, 102, 241, 0.25));
    color: #A78BFA;
    border: 1px solid rgba(139, 92, 246, 0.4);
    padding: 2px 8px;
    border-radius: 12px;
}

.ai-header-subtitle {
    font-size: 11px !important;
    color: #94A3B8 !important;
    margin: 3px 0 0 0 !important;
}

/* Chat Messages Thread */
.ai-chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hero Welcome Card */
.ai-welcome-hero {
    background: #10172A;
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 20px;
    padding: 22px 18px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    margin: 6px 0;
}

.hero-bot-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(99, 102, 241, 0.35));
    border: 2px solid rgba(139, 92, 246, 0.5);
    margin: 0 auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 32px;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.hero-bot-avatar .sparkle-orbit {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 16px;
    animation: sparkleSpin 3s linear infinite;
}

@keyframes sparkleSpin {
    0% { transform: rotate(0deg) scale(0.9); }
    50% { transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(0.9); }
}

.hero-title {
    font-size: 16px;
    font-weight: 900;
    color: #F8FAFC;
    margin: 0 0 6px 0;
}

.hero-subtitle {
    font-size: 12px;
    color: #94A3B8;
    line-height: 1.7;
    margin: 0 0 16px 0;
}

.hero-capabilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.capability-item {
    background: #162035;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
}

.capability-item .cap-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.capability-item .cap-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.capability-item .cap-text strong {
    font-size: 11.5px;
    color: #F8FAFC;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.capability-item .cap-text span {
    font-size: 9.5px;
    color: #64748B;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.hero-prompts-heading {
    font-size: 12px;
    font-weight: 800;
    color: #A78BFA;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    text-align: right;
}

.hero-prompts-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hero-prompt-chip {
    background: #131B2E;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 9px 14px;
    color: #E2E8F0;
    font-size: 12px;
    font-family: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: right;
}

.hero-prompt-chip:hover,
.hero-prompt-chip:active {
    background: #1E293B;
    border-color: #8B5CF6;
    color: #FFFFFF;
    transform: translateX(-3px);
}

.hero-prompt-chip .chip-arrow {
    color: #8B5CF6;
    font-size: 16px;
    font-weight: bold;
}

/* Chat Message Bubbles */
.ai-msg-row {
    display: flex;
    width: 100%;
}

.ai-msg-row.user-row {
    justify-content: flex-start; /* In RTL, flex-start is the right side */
}

.ai-msg-row.bot-row {
    justify-content: flex-end; /* In RTL, flex-end aligns avatar to right, bubble to left */
}

.user-bubble {
    max-width: 82%;
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
    color: #FFFFFF;
    padding: 12px 14px;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
    font-size: 13px;
    line-height: 1.65;
    word-break: break-word;
}

.ai-msg-time {
    font-size: 9.5px;
    opacity: 0.75;
    margin-top: 4px;
    text-align: left;
}

.bot-bubble {
    max-width: 88%;
    background: #10172A;
    border: 1px solid rgba(139, 92, 246, 0.25);
    padding: 14px 15px;
    border-radius: 4px 18px 18px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    color: #F8FAFC;
    font-size: 13px;
    line-height: 1.7;
}

.error-row .bot-bubble {
    background: #2D1117;
    border-color: rgba(244, 63, 94, 0.4);
    color: #FDA4AF;
}

.ai-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-left: 8px;
    align-self: flex-start;
}

.ai-bubble-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ai-bubble-tag {
    font-size: 10.5px;
    font-weight: 800;
    color: #A78BFA;
}

.error-row .ai-bubble-tag {
    color: #F43F5E;
}

.ai-copy-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 10.5px;
    color: #94A3B8;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    transition: all 0.2s;
}

.ai-copy-btn:hover,
.ai-copy-btn:active {
    background: rgba(139, 92, 246, 0.25);
    color: #DDD6FE;
    border-color: #8B5CF6;
}

.ai-bubble-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0 10px 0;
}

/* Markdown Typography */
.ai-md-h1 {
    font-size: 15px;
    font-weight: 900;
    color: #A855F7;
    margin: 10px 0 4px 0;
}

.ai-md-h2 {
    font-size: 14px;
    font-weight: 800;
    color: #38BDF8;
    margin: 8px 0 4px 0;
}

.ai-md-h3 {
    font-size: 13px;
    font-weight: 800;
    color: #C084FC;
    margin: 6px 0 3px 0;
}

.ai-md-p {
    font-size: 12.5px;
    line-height: 1.75;
    color: #E2E8F0;
    margin: 0 0 8px 0;
}

.ai-md-list {
    margin: 4px 0 8px 0;
    padding-right: 18px;
}

.ai-md-list li {
    margin-bottom: 5px;
    font-size: 12.5px;
    line-height: 1.65;
    color: #E2E8F0;
}

.ai-inline-code {
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.35);
    padding: 1px 6px;
    border-radius: 6px;
    font-family: monospace, sans-serif;
    font-size: 11.5px;
    color: #DDD6FE;
}

.ai-bold {
    font-weight: 800;
    color: #FFFFFF;
}

/* Interactive Deep Link Tool Cards */
.ai-deep-link-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #162035;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.ai-deep-link-card:hover,
.ai-deep-link-card:active {
    transform: translateY(-2px);
    border-color: #8B5CF6;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.25);
}

.ai-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    background: rgba(139, 92, 246, 0.18);
}

.ai-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    text-align: right;
}

.ai-card-title {
    font-size: 12px;
    font-weight: 800;
    color: #F8FAFC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-card-subtitle {
    font-size: 10px;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-card-arrow {
    font-size: 18px;
    font-weight: bold;
    color: #A78BFA;
    margin-right: 4px;
}

/* Specific Card Themes */
.card-tool-tariff { border-color: rgba(37, 99, 235, 0.4); }
.card-tool-tariff .ai-card-icon { background: rgba(37, 99, 235, 0.2); }

.card-tool-currency { border-color: rgba(16, 185, 129, 0.4); }
.card-tool-currency .ai-card-icon { background: rgba(16, 185, 129, 0.2); }

.card-tool-pdf { border-color: rgba(239, 68, 68, 0.4); }
.card-tool-pdf .ai-card-icon { background: rgba(239, 68, 68, 0.2); }

.card-tool-circular { border-color: rgba(168, 85, 247, 0.4); }
.card-tool-circular .ai-card-icon { background: rgba(168, 85, 247, 0.2); }

.card-tool-incoterms { border-color: rgba(234, 179, 8, 0.4); }
.card-tool-incoterms .ai-card-icon { background: rgba(234, 179, 8, 0.2); }

.card-tool-calc { border-color: rgba(236, 72, 153, 0.4); }
.card-tool-calc .ai-card-icon { background: rgba(236, 72, 153, 0.2); }

.card-tool-map { border-color: rgba(56, 189, 248, 0.4); }
.card-tool-map .ai-card-icon { background: rgba(56, 189, 248, 0.2); }

.card-tool-timeline { border-color: rgba(147, 51, 234, 0.4); }
.card-tool-timeline .ai-card-icon { background: rgba(147, 51, 234, 0.2); }

.card-tool-unit { border-color: rgba(245, 158, 11, 0.4); }
.card-tool-unit .ai-card-icon { background: rgba(245, 158, 11, 0.2); }

/* RAG Badges Bar */
.ai-badges-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-rag-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
}

.badge-host {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #C084FC;
}

.badge-wco {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38BDF8;
}

.badge-web {
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #34D399;
}

/* Thinking Indicator Bubble */
.thinking-bubble {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
}

.ai-thinking-pulse-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ai-thinking-pulse-row .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8B5CF6;
    animation: aiDotPulse 1.4s infinite ease-in-out both;
}

.ai-thinking-pulse-row .dot-1 { animation-delay: -0.32s; }
.ai-thinking-pulse-row .dot-2 { animation-delay: -0.16s; }

@keyframes aiDotPulse {
    0%, 80%, 100% {
        transform: scale(0.4);
        opacity: 0.4;
    }
    40% {
        transform: scale(1.0);
        opacity: 1;
    }
}

.ai-thinking-text {
    font-size: 11px;
    color: #A78BFA;
    font-weight: 600;
}

/* Bottom Input Sticky Bar */
.ai-bottom-container {
    background: #090E1B;
    border-top: 1px solid rgba(139, 92, 246, 0.25);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) 12px;
    position: sticky;
    bottom: 0;
    z-index: 20;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.ai-quick-chips-wrapper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ai-quick-chips-wrapper::-webkit-scrollbar {
    display: none;
}

.ai-quick-chip {
    background: #1E293B;
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 11px;
    font-family: inherit;
    color: #E2E8F0;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ai-quick-chip:hover,
.ai-quick-chip:active {
    border-color: #8B5CF6;
    background: #26334D;
    color: #FFFFFF;
}

.ai-quick-chip.new-chat-chip {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    color: #C084FC;
    font-weight: 800;
}

.ai-input-bar-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ai-textarea-container {
    flex: 1;
    position: relative;
}

.ai-textarea-box {
    width: 100%;
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 14px;
    color: #F8FAFC;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    line-height: 1.5;
    max-height: 120px;
    transition: border-color 0.2s;
    box-sizing: border-box;
    display: block;
}

.ai-textarea-box:focus {
    outline: none;
    border-color: #8B5CF6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.ai-char-counter {
    font-size: 9.5px;
    color: #94A3B8;
    text-align: left;
    margin-top: 3px;
    padding-left: 6px;
    display: none;
}

.ai-char-counter.limit-exceeded {
    color: #EF4444;
    font-weight: bold;
}

.ai-send-round-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    color: #FFFFFF;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.ai-send-round-btn:active {
    transform: scale(0.94);
}

/* Toast Notification */
.ai-toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(19, 27, 46, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #F8FAFC;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
}

.ai-toast-notification.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Wizard Modal */
.ai-wizard-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: 16px;
}

.ai-wizard-modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.ai-wizard-card {
    background: #131B2E;
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    max-width: 460px;
    width: 100%;
    padding: 22px 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
    transform: translateY(15px);
    transition: transform 0.25s ease;
}

.ai-wizard-modal-overlay.visible .ai-wizard-card {
    transform: translateY(0);
}

.ai-wizard-header {
    border-top: 3px solid #0284C7;
    padding-top: 12px;
    margin-bottom: 12px;
}

.ai-wizard-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.ai-wizard-title {
    font-size: 15px;
    font-weight: 900;
    color: #F8FAFC;
    margin: 0;
}

.ai-wizard-desc {
    font-size: 12.5px;
    color: #CBD5E1;
    line-height: 1.8;
    margin: 0 0 14px 0;
}

.ai-wizard-tip-box {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11.5px;
    color: #E2E8F0;
    line-height: 1.6;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.ai-wizard-tip-box .tip-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.ai-wizard-indicators {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
}

.ai-wizard-indicators .wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s;
}

.ai-wizard-indicators .wizard-dot.active {
    width: 22px;
    border-radius: 6px;
}

.ai-wizard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wizard-btn-prev {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #CBD5E1;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.wizard-btn-prev:hover {
    background: rgba(255, 255, 255, 0.08);
}

.wizard-btn-next {
    border: none;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 9px 20px;
    font-size: 12.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s;
}

.wizard-btn-next:active {
    transform: scale(0.96);
}

/* ─────────────────────────────────────────────────────────────────────────────
   IMPEX AI ASSISTANT - ANALYTICS, CHARTS, TABLES & DISTRIBUTIONS
   Pixel-Perfect Replication of Android Jetpack Compose AiAnalyticsComponents
   ───────────────────────────────────────────────────────────────────────────── */

.ai-analytics-card {
    background: #0F172A;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 16px;
    padding: 14px 12px;
    margin: 10px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.ai-analytics-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ai-analytics-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-analytics-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #A855F7;
    flex-shrink: 0;
}

.ai-analytics-title {
    font-size: 12.5px;
    font-weight: 800;
    color: #F8FAFC;
}

/* Dual / Segmented Mode Switcher Bar */
.ai-chart-tabs-bar {
    display: flex;
    background: #1E293B;
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    padding: 3px;
    gap: 4px;
    margin-bottom: 12px;
}

.ai-chart-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 9px;
    padding: 6px 4px;
    color: #94A3B8;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ai-chart-tab-btn.active {
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

/* Series Filters */
.ai-series-chips-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ai-series-chips-row::-webkit-scrollbar {
    display: none;
}

.ai-series-chip {
    background: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 10px;
    font-family: inherit;
    color: #CBD5E1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ai-series-chip.active {
    border-color: #818CF8;
    background: rgba(99, 102, 241, 0.25);
    color: #818CF8;
    font-weight: 700;
}

.series-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

/* Active Tooltip */
.ai-chart-active-tooltip {
    background: #1E293B;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    animation: fadeInTooltip 0.2s ease;
}

@keyframes fadeInTooltip {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-chart-active-tooltip .tooltip-text {
    font-size: 11px;
    font-weight: 700;
    color: #38BDF8;
}

.tooltip-close-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
}

/* SVG Chart */
.ai-chart-wrapper {
    width: 100%;
}

.ai-svg-responsive-container {
    width: 100%;
    overflow: hidden;
}

.ai-chart-svg {
    width: 100%;
    height: auto;
    display: block;
    max-height: 220px;
}

.ai-svg-bar {
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.ai-svg-bar:hover,
.ai-svg-bar:active {
    opacity: 1 !important;
    filter: brightness(1.2);
}

.ai-svg-cat-label {
    cursor: pointer;
    user-select: none;
}

.ai-svg-cat-label:hover {
    fill: #38BDF8;
}

/* Chart Legend */
.ai-chart-legend-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #E2E8F0;
}

.legend-box {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    display: inline-block;
}

.ai-analytics-divider {
    height: 1px;
    background: rgba(139, 92, 246, 0.2);
    margin: 12px 0;
}

/* Responsive Data Table */
.ai-table-outer-wrapper {
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    overflow: hidden;
    background: #090E1B;
}

.ai-table-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.ai-data-table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    font-size: 11px;
    text-align: center;
}

.ai-data-table thead tr {
    background: #1E1B4B;
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
}

.ai-data-table th {
    padding: 9px 8px;
    color: #C084FC;
    font-weight: 800;
    white-space: nowrap;
}

.ai-data-table td {
    padding: 8px 8px;
    color: #E2E8F0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
}

.ai-data-table tr.zebra-row {
    background: rgba(255, 255, 255, 0.02);
}

.ai-data-table td.bold-cell {
    font-weight: 800;
    color: #F8FAFC;
}

.ai-data-table td.negative-val {
    color: #F43F5E;
    font-weight: 800;
}

.ai-table-footer-actions {
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px;
    background: #0C1222;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ai-copy-table-btn {
    background: transparent;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 8px;
    color: #C084FC;
    font-size: 10.5px;
    font-weight: 700;
    font-family: inherit;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-copy-table-btn:hover,
.ai-copy-table-btn:active {
    background: rgba(139, 92, 246, 0.2);
    color: #FFFFFF;
}

/* Horizontal Distribution Cards */
.ai-distribution-card {
    background: #0F172A;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 10px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.ai-dist-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dist-icon {
    font-size: 16px;
}

.dist-title {
    font-size: 12px;
    font-weight: 800;
    color: #F8FAFC;
}

.ai-dist-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-dist-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dist-labels-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dist-name-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dist-rank-badge {
    font-size: 9px;
    font-weight: 800;
    color: #A78BFA;
    background: rgba(139, 92, 246, 0.15);
    padding: 1px 5px;
    border-radius: 4px;
}

.dist-item-name {
    font-size: 11px;
    color: #E2E8F0;
    font-weight: 600;
}

.dist-item-value {
    font-size: 11px;
    font-weight: 800;
}

.dist-progress-track {
    width: 100%;
    height: 6px;
    background: #1E293B;
    border-radius: 3px;
    overflow: hidden;
}

.dist-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dist-import-gradient {
    background: linear-gradient(90deg, #6366F1, #A855F7);
}

.dist-export-gradient {
    background: linear-gradient(90deg, #059669, #34D399);
}

/* Cross-Platform Mobile OS Optimizations (Android & iOS Safari) */
@supports (height: 100dvh) {
    #screen-ai_assistant {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

#screen-ai_assistant {
    touch-action: manipulation;
}

.ai-bottom-container {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

.ai-chat-thread {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

.ai-textarea-box {
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px !important; /* Prevents iOS Safari from auto-zooming on focus */
}