/* ======================================================================
   FILE: assets/css/style.css (DESKTOP + MOBILE OPTIMIZED EDITION)
   ====================================================================== */

:root {
    --bg-aluminum: #E6ECF2;
    --panel-white: #FFFFFF;
    --pod-surface: #F4F7FA;
    --panel-navy:  #0F1E36;
    --aurora-blue: #0077C8;
    --electric-cyan: #00A8E8;
    --hardware-red: #D32F2F;
    --border-silver: #CFD8DC;
    --text-sub: #4A5B75;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body, h1, h2, h3, h4, p, a, span, button, input {
    font-family: 'IRANSans', 'IRANSansX', 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif !important;
}

body {
    background: linear-gradient(135deg, #F2F5F8 0%, #E2E8F0 50%, #D5DFEB 100%);
    color: var(--panel-navy);
    line-height: 1.75;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==================== BIDI ISOLATION FOR PERSIAN/ENGLISH MIXED TEXT ==================== */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    white-space: nowrap;
    font-family: 'Segoe UI', Roboto, 'IRANSans', sans-serif !important;
}

.hero-desc,
.pillar-card p,
.delay-content-col p,
.can-item p,
.mod-info-col p {
    text-align: start !important;
    word-spacing: normal;
}

/* ==================== NAVBAR & LANGUAGE SWITCHER ==================== */
.top-navbar {
    background-color: var(--panel-navy);
    border-bottom: 3px solid var(--aurora-blue);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(15, 30, 54, 0.22);
}

.nav-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 8px 0;
    gap: 16px;
    flex-wrap: wrap;
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-title {
    color: #FFFFFF;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 1.2px;
    line-height: 1.1;
}

.brand-title span {
    color: var(--electric-cyan);
}

.brand-sub {
    color: #B0C4DE;
    font-size: 10px;
    font-weight: 700;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-links a {
    color: #DCE6F2;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.page-tab {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1.4px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
}

.page-tab.active-tab {
    background: rgba(0, 168, 232, 0.18);
    border-color: var(--electric-cyan);
    color: #FFFFFF !important;
    font-weight: 900 !important;
}

.page-tab:hover:not(.active-tab) {
    background: rgba(255, 255, 255, 0.08);
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #091324;
    border: 1.4px solid #284673;
    padding: 5px 10px;
    border-radius: 10px;
}

.lang-btn {
    color: #9EB2CC;
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.lang-btn.active {
    background: var(--aurora-blue);
    color: #FFFFFF;
}

.lang-btn:hover:not(.active) {
    color: #FFFFFF;
}

.lang-sep {
    color: #36537D;
    font-size: 11px;
}

/* ==================== SPEC STRIP BANNER ==================== */
.spec-strip {
    background: var(--panel-white);
    border: 1.5px solid var(--panel-navy);
    border-radius: 12px;
    margin-top: 20px;
    padding: 10px 16px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(15, 30, 54, 0.06);
    line-height: 1.8;
}

.spec-strip .dot { color: var(--aurora-blue); margin: 0 8px; }
.spec-strip .red { color: var(--hardware-red); }

/* ==================== HERO SECTION ==================== */
.hero-panel {
    background: var(--panel-white);
    border: 2px solid var(--panel-navy);
    border-radius: 26px;
    margin-top: 20px;
    padding: 34px;
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 32px;
    align-items: center;
    position: relative;
    box-shadow: 0 14px 34px rgba(15, 30, 54, 0.10);
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1.4px solid rgba(211, 47, 47, 0.32);
    border-radius: 20px;
    pointer-events: none;
}

.hero-tag {
    display: inline-block;
    background: var(--panel-navy);
    color: var(--electric-cyan);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    max-width: 100%;
    overflow-wrap: break-word;
}

.hero-model-badge {
    color: var(--aurora-blue);
    font-size: 36px;
    letter-spacing: 1px;
    display: inline-block;
}

.hero-title {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.35;
    color: var(--panel-navy);
    margin-bottom: 14px;
}

.hero-title span {
    color: var(--aurora-blue);
}

.hero-desc {
    color: var(--text-sub);
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 16px;
}

.hero-badges-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px 0 24px;
}

.mini-pod {
    background: var(--pod-surface);
    border: 1.2px solid var(--border-silver);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}

.mini-pod-head {
    background: var(--panel-navy);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 800;
    padding: 5px 4px;
}

.mini-pod-val {
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 900;
    color: var(--aurora-blue);
    direction: ltr;
}

.mini-pod-val.red-text {
    color: var(--hardware-red);
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-primary {
    background: var(--panel-navy);
    color: #FFFFFF;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 13.5px;
    border: 2px solid var(--panel-navy);
    text-align: center;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--aurora-blue);
    border-color: var(--aurora-blue);
}

.btn-outline {
    background: var(--pod-surface);
    color: var(--panel-navy);
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 13.5px;
    border: 1.6px solid var(--panel-navy);
    text-align: center;
}

.hero-visual-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.telemetry-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: var(--panel-navy);
    padding: 12px;
    border-radius: 14px;
    border: 1.5px solid var(--aurora-blue);
    text-align: center;
}

.tele-item span {
    display: block;
    color: var(--electric-cyan);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.tele-item strong {
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 900;
}

/* ==================== FORCED FIXED-SIZE IMAGE FRAMES ==================== */
.fixed-img-frame {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--pod-surface);
    border: 1.6px solid var(--border-silver);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-img-frame.app-wide-ratio {
    aspect-ratio: 20 / 9;
}

.fixed-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.fixed-img-frame.contain-mode img {
    object-fit: contain;
    padding: 10px;
    background: #FFFFFF;
}

.fixed-img-frame:hover img {
    transform: scale(1.03);
}

.img-placeholder {
    text-align: center;
    padding: 18px;
    color: var(--text-sub);
}

.img-placeholder strong {
    display: block;
    color: var(--panel-navy);
    font-size: 13px;
    margin-bottom: 6px;
}

.img-placeholder code {
    background: #E3E9F0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--hardware-red);
    direction: ltr;
    display: inline-block;
    margin-top: 4px;
}

/* ==================== 4 ENGINEERING PILLARS ==================== */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 24px;
}

.pillar-card {
    background: var(--panel-white);
    border: 1.6px solid var(--panel-navy);
    border-radius: 18px;
    padding: 20px 18px;
    box-shadow: 0 8px 20px rgba(15, 30, 54, 0.06);
    transition: transform 0.2s ease;
}

.pillar-card.highlight-bt {
    border: 2px solid var(--aurora-blue);
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F8FF 100%);
}

.pillar-badge {
    display: inline-block;
    background: var(--panel-navy);
    color: var(--electric-cyan);
    font-size: 10px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}

.pillar-badge.red {
    background: var(--hardware-red);
    color: #FFFFFF;
}

.pillar-card h3 {
    font-size: 16.5px;
    font-weight: 900;
    color: var(--panel-navy);
    margin-bottom: 8px;
    line-height: 1.5;
}

.pillar-card p {
    font-size: 13px;
    color: var(--text-sub);
    font-weight: 600;
    line-height: 1.75;
}

/* ==================== SECTION HEADERS & GALLERY ==================== */
.section-head {
    margin: 46px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.section-head h2 {
    font-size: 24px;
    font-weight: 900;
    color: var(--panel-navy);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.hw-card {
    background: var(--panel-white);
    border: 1.6px solid var(--panel-navy);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 30, 54, 0.08);
    display: flex;
    flex-direction: column;
}

.hw-card-header {
    background: var(--panel-navy);
    color: #FFFFFF;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.hw-card-header span.status-dot {
    width: 8px;
    height: 8px;
    background: var(--electric-cyan);
    border-radius: 50%;
    flex-shrink: 0;
}

.hw-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hw-card-title {
    font-size: 18px;
    font-weight: 900;
    margin: 14px 0 6px;
    color: var(--panel-navy);
    line-height: 1.45;
}

.hw-card-desc {
    font-size: 13.5px;
    color: var(--text-sub);
    font-weight: 600;
}

/* ==================== 8 DEDICATED MODULE SHOWCASE CARDS (LIGHT/DARK) ==================== */
.module-showcase-card {
    border-radius: 24px;
    padding: 28px;
    margin-bottom: 26px;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 28px;
    align-items: center;
}

.module-showcase-card.theme-light {
    background: var(--panel-white);
    border: 2px solid var(--panel-navy);
    color: var(--panel-navy);
    box-shadow: 0 10px 26px rgba(15, 30, 54, 0.07);
}

.module-showcase-card.theme-dark {
    background: linear-gradient(135deg, #0B1526 0%, #0F1E36 60%, #162B4D 100%);
    border: 2.5px solid var(--aurora-blue);
    color: #FFFFFF;
    box-shadow: 0 16px 36px rgba(15, 30, 54, 0.22);
}

.mod-info-col h3 {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 1.45;
}

.module-showcase-card.theme-light .mod-info-col h3 { color: var(--panel-navy); }
.module-showcase-card.theme-dark .mod-info-col h3  { color: #FFFFFF; }

.mod-info-col p {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.85;
}

.module-showcase-card.theme-light .mod-info-col p { color: var(--text-sub); }
.module-showcase-card.theme-dark .mod-info-col p  { color: #C2D3E8; }

.delay-badge-pill {
    display: inline-block;
    background: rgba(0, 230, 118, 0.15);
    border: 1px solid #00E676;
    color: #00E676;
    font-size: 10.5px;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.sub-feature-box {
    background: rgba(255, 255, 255, 0.06);
    border-right: 3px solid var(--electric-cyan);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

html[dir="ltr"] .sub-feature-box {
    border-right: none;
    border-left: 3px solid var(--electric-cyan);
}

.sub-feature-box h4 {
    font-size: 15px;
    font-weight: 900;
    color: var(--electric-cyan);
    margin-bottom: 4px;
}

.sub-feature-box p {
    font-size: 13px !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}

/* ==================== UI REPLICAS INSIDE MODULE CARDS ==================== */
.mod-ui-replica {
    background: linear-gradient(135deg, #F4F7FA 0%, #E6ECF2 100%);
    border: 2px solid var(--panel-navy);
    border-radius: 18px;
    overflow: hidden;
    width: 100%;
}

.ui-win-header {
    background: var(--panel-navy);
    color: #FFFFFF;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 900;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-chip {
    background: rgba(255,255,255,0.12);
    color: #B0C4DE;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
}
.ui-chip.active {
    background: var(--aurora-blue);
    color: #FFFFFF;
}

/* 1. PEQ UI Replica (With Horizontal Scroll on Mobile) */
.ui-peq-grid {
    display: grid;
    grid-template-columns: repeat(13, minmax(30px, 1fr));
    gap: 4px;
    padding: 14px 10px;
    background: #FFFFFF;
    margin: 10px;
    border-radius: 12px;
    border: 1.4px solid var(--border-silver);
    overflow-x: auto;
}

.ui-eq-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.eq-db { font-size: 8.5px; font-weight: 900; color: var(--aurora-blue); }
.eq-track {
    width: 6px;
    height: 90px;
    background: #E2E8F0;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: flex-end;
}
.eq-fill { width: 100%; background: var(--aurora-blue); border-radius: 6px; }
.eq-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--panel-navy);
    border: 2px solid #FFFFFF;
    position: absolute;
    left: -3px;
}
.eq-q  { font-size: 8px; color: var(--text-sub); font-weight: 700; }
.eq-hz { font-size: 8.5px; color: var(--panel-navy); font-weight: 900; }

/* 2. Bass Processor UI Replica */
.ui-engine-toggle {
    background: #091324;
    padding: 3px;
    border-radius: 8px;
    display: flex;
    gap: 4px;
}
.eng-opt { font-size: 9.5px; padding: 3px 8px; border-radius: 6px; color: #9EB2CC; font-weight: 900; }
.eng-opt.active { background: var(--electric-cyan); color: #091324; }

.ui-preset-subbar {
    background: #E8EEF5;
    padding: 7px 12px;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border-silver);
    overflow-x: auto;
}

.pre-pill {
    background: #FFFFFF;
    border: 1px solid var(--border-silver);
    color: var(--text-sub);
    font-size: 9px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.pre-pill.active {
    background: var(--aurora-blue);
    border-color: var(--aurora-blue);
    color: #FFFFFF;
}

.ui-bass-body {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
}

.ui-bass-wave-card, .ui-knob-card {
    background: #FFFFFF;
    border: 1.5px solid var(--panel-navy);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.wave-status { font-size: 10px; font-weight: 900; color: var(--aurora-blue); }
.ui-toggle-switch {
    width: 38px;
    height: 20px;
    background: var(--aurora-blue);
    border-radius: 20px;
    position: relative;
    margin: 4px 0;
}
.ui-toggle-switch .sw-knob {
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: 3px;
}

.knob-val-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 4px 0;
}
.knob-val-row strong { font-size: 11px !important; font-weight: 900; }
.knob-val-row strong.blue  { color: var(--aurora-blue); }
.knob-val-row strong.amber { color: #FF8F00; }
.knob-val-row strong.green { color: #00C853; }

.pm-btn {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pod-surface);
    border: 1px solid var(--border-silver);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: var(--panel-navy);
}

.ui-dial {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--pod-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: var(--panel-navy);
    margin: 6px 0;
}
.ui-dial.blue { border: 4px solid var(--aurora-blue); }
.ui-dial.red  { border: 4px solid var(--hardware-red); }
.ui-dial.navy { border: 4px solid var(--panel-navy); }
.ui-knob-card strong { font-size: 11.5px; color: var(--panel-navy); }
.ui-knob-card small, .ui-bass-wave-card small { font-size: 9px; color: var(--text-sub); font-weight: 700; }

/* 3. Stage HPF UI Replica */
.ui-hpf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
}
.ui-hpf-box {
    background: #FFFFFF;
    border: 1.5px solid var(--panel-navy);
    border-radius: 14px;
    padding: 12px;
}
.hpf-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-silver);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.hpf-top strong { display: block; font-size: 11.5px; color: var(--panel-navy); }
.hpf-top small  { font-size: 9px; color: var(--text-sub); font-weight: 700; }
.ui-switch-pill {
    background: rgba(0, 119, 200, 0.12);
    color: var(--aurora-blue);
    font-size: 9px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 12px;
}
.hpf-dial-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hpf-note { font-size: 9.5px; color: var(--text-sub); font-weight: 700; margin-top: 6px; }

/* 4. Crossover & Input Matrix UI Replica */
.ui-xover-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
}
.xov-mode-card {
    background: #FFFFFF;
    border: 1.5px solid var(--border-silver);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xov-mode-card.active {
    border: 2px solid var(--aurora-blue);
    box-shadow: 0 4px 12px rgba(0, 119, 200, 0.12);
}
.xov-head { display: flex; justify-content: space-between; align-items: center; }
.xov-head small { font-size: 8.5px; font-weight: 900; padding: 2px 6px; border-radius: 4px; background: var(--pod-surface); color: var(--text-sub); }
.xov-head small.act { background: var(--aurora-blue); color: #FFF; }

.xov-ico {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--pod-surface);
    border: 1.5px solid var(--border-silver);
}
.xov-ico.blue  { border-color: var(--aurora-blue); }
.xov-ico.amber { border-color: #FFB300; background: #FFF8E1; }
.xov-ico.green { border-color: #00C853; }

.xov-card-title { font-size: 12px; font-weight: 900; color: var(--panel-navy); display: block; }
.xov-card-sub   { font-size: 8.5px !important; color: var(--text-sub) !important; line-height: 1.35 !important; margin-bottom: 4px; }

.xov-out-box {
    background: var(--pod-surface);
    border: 1px solid var(--border-silver);
    border-radius: 8px;
    padding: 5px 7px;
}
.xov-out-box.highlight { background: #F0F8FF; border-color: var(--aurora-blue); }
.xov-out-box small { display: block; font-size: 7.5px; color: var(--text-sub); font-weight: 800; }
.xov-out-line { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; gap: 4px; }
.xov-out-line strong { font-size: 9px; font-weight: 900; color: var(--panel-navy); }
.xov-out-line strong.blue { color: var(--aurora-blue); }
.freq-tag {
    background: #FFFFFF;
    border: 1px solid var(--border-silver);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 900;
    color: var(--panel-navy);
    white-space: nowrap;
}
.freq-tag.blue { border-color: var(--aurora-blue); color: var(--aurora-blue); }

/* 5. Channel Mixer UI Replica */
.ui-mixer-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
}
.mix-grp {
    background: #FFFFFF;
    border: 1.5px solid var(--panel-navy);
    border-radius: 14px;
    padding: 10px;
    text-align: center;
}
.mix-grp-title { font-size: 10px; font-weight: 900; margin-bottom: 8px; letter-spacing: 0.6px; }
.mix-grp-title.blue { color: var(--aurora-blue); }
.mix-grp-title.navy { color: var(--panel-navy); }
.mix-grp-title.red  { color: var(--hardware-red); }
.mix-pair { display: flex; align-items: center; justify-content: space-around; }
.mix-ch { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mix-val {
    background: var(--pod-surface);
    border: 1px solid var(--border-silver);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 9.5px;
    font-weight: 900;
    color: var(--panel-navy);
    line-height: 1.1;
}
.mix-val small { font-size: 8px; color: var(--text-sub); }
.mix-bar {
    width: 8px;
    height: 68px;
    background: #E2E8F0;
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.mix-bar i { width: 100%; background: var(--aurora-blue); border-radius: 8px; display: block; }
.mix-bar.red i { background: var(--hardware-red); }
.mix-ch strong { font-size: 9px; color: var(--panel-navy); }
.mix-link { font-size: 11px; background: var(--pod-surface); padding: 4px; border-radius: 50%; border: 1px solid var(--border-silver); }

/* 6. Time Delay Unified UI Replica */
.delay-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.delay-stat-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(0, 168, 232, 0.35);
    border-radius: 12px;
    padding: 10px 12px;
}
.delay-stat-box .stat-label {
    display: block;
    font-size: 11px;
    color: #9EB2CC;
    font-weight: 700;
    margin-bottom: 3px;
}
.delay-stat-box .stat-val-inline {
    display: block;
    font-size: 13px;
    color: #00E676;
    font-weight: 900;
}

.ui-delay-unified-body {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 10px;
    padding: 12px;
    align-items: center;
}
.del-uni-col { display: flex; flex-direction: column; gap: 8px; }
.del-uni-card {
    background: #FFFFFF;
    border: 1.4px solid var(--border-silver);
    border-radius: 12px;
    padding: 8px 10px;
}
.del-uni-card.active {
    border: 2px solid var(--aurora-blue);
    box-shadow: 0 4px 10px rgba(0, 119, 200, 0.14);
}
.del-uni-top { display: flex; justify-content: space-between; align-items: center; }
.del-uni-top strong { font-size: 10px; font-weight: 900; color: var(--panel-navy); }
.del-ms-badge {
    background: rgba(0, 119, 200, 0.12);
    color: var(--aurora-blue);
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 5px;
}
.del-uni-card small { display: block; font-size: 8px; color: var(--text-sub); font-weight: 700; margin: 2px 0 5px; }
.del-uni-track { display: flex; align-items: center; gap: 5px; }
.del-uni-bar { flex: 1; height: 5px; background: #E2E8F0; border-radius: 5px; overflow: hidden; }
.del-uni-bar i { display: block; height: 100%; background: var(--aurora-blue); }
.pm-mini {
    width: 14px;
    height: 14px;
    background: var(--pod-surface);
    border: 1px solid var(--border-silver);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    color: var(--panel-navy);
}
.del-uni-car-box {
    background: #FFFFFF;
    border: 1.5px solid var(--panel-navy);
    border-radius: 16px;
    padding: 6px;
    text-align: center;
}

/* 7. Output Polarity UI Replica */
.ui-polarity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
}
.pol-col {
    background: #FFFFFF;
    border: 1.5px solid var(--panel-navy);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pol-head { font-size: 9.5px; font-weight: 900; padding-bottom: 6px; border-bottom: 1px solid var(--border-silver); }
.pol-head.blue { color: var(--aurora-blue); }
.pol-head.navy { color: var(--panel-navy); }
.pol-head.red  { color: var(--hardware-red); }
.pol-item {
    background: var(--pod-surface);
    border: 1px solid var(--border-silver);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pol-item.active-inv { border-color: var(--hardware-red); background: #FFF5F5; }
.pol-item strong { display: block; font-size: 10px; color: var(--panel-navy); }
.pol-item small  { font-size: 8.5px; color: var(--text-sub); font-weight: 700; }
.pol-btn { padding: 4px 8px; border-radius: 6px; font-size: 9.5px; font-weight: 900; }
.pol-btn.norm { background: rgba(0,119,200,0.12); color: var(--aurora-blue); border: 1px solid var(--aurora-blue); }
.pol-btn.inv  { background: var(--hardware-red); color: #FFFFFF; }

/* ==================== AUX, REM SEQUENCER & CAN-BUS PANELS ==================== */
.canbus-panel, .rem-sequencer-panel {
    background: var(--panel-white);
    border: 2px solid var(--panel-navy);
    border-radius: 24px;
    padding: 32px;
    margin-top: 38px;
    box-shadow: 0 10px 26px rgba(15, 30, 54, 0.07);
}

.canbus-header-row, .rem-top-grid {
    display: grid;
    grid-template-columns: 1.28fr 0.72fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 24px;
}

.canbus-header-row h2, .rem-top-grid h2 {
    font-size: 24px;
    font-weight: 900;
    color: var(--panel-navy);
    line-height: 1.45;
}

.rem-intro {
    font-size: 14.5px;
    color: var(--text-sub);
    font-weight: 600;
    line-height: 1.8;
    margin-top: 8px;
}

.aux-ports-box, .phoenix-terminal-box {
    background: #F8FAFC;
    border: 1.8px solid var(--panel-navy);
    border-radius: 18px;
    overflow: hidden;
    text-align: center;
}

. phoenix-terminal-box { padding: 14px; }
.aux-ports-head, .phoenix-header {
    background: var(--panel-navy);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 900;
    padding: 8px;
    letter-spacing: 1px;
}
.phoenix-header { border-radius: 8px; margin-bottom: 10px; }

.aux-rca-pair {
    display: flex;
    justify-content: space-around;
    padding: 18px 24px;
    background: #FFFFFF;
}
.rca-jack { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rca-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rca-badge.navy { background: var(--panel-navy); }
.rca-badge.red  { background: var(--hardware-red); }
.rca-ring {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E2E8F0 0%, #CFD8DC 100%);
    border: 3px solid var(--panel-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rca-ring.red { border-color: var(--hardware-red); }
.rca-core { width: 22px; height: 22px; border-radius: 50%; background: #1A222D; border: 4px solid #FFFFFF; }
.aux-ports-foot {
    background: var(--pod-surface);
    border-top: 1px solid var(--border-silver);
    color: var(--aurora-blue);
    font-size: 9.5px;
    font-weight: 900;
    padding: 6px;
}

.phoenix-pins-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-bottom: 8px;
    padding: 0 10px;
}
.p-pin {
    background: #FFFFFF;
    border: 1.4px solid var(--panel-navy);
    border-radius: 6px;
    padding: 6px 2px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.p-pin.pwr { background: #FFF5F5; border-color: var(--hardware-red); }
.p-pin.can { background: #F0F8FF; border-color: var(--aurora-blue); }
.p-num { font-size: 8px; color: var(--text-sub); font-weight: 800; }
.p-lbl { font-size: 11px; font-weight: 900; color: var(--panel-navy); margin: 2px 0; }
.p-pin.pwr .p-lbl, .p-pin.pwr small { color: var(--hardware-red); }
.p-pin.can small { color: var(--aurora-blue); }
.p-pin small { font-size: 8.5px; font-weight: 800; color: var(--panel-navy); }
.tri {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--panel-navy);
    margin-top: 4px;
}
.tri.red  { border-top-color: var(--hardware-red); }
.tri.blue { border-top-color: var(--aurora-blue); }

.phoenix-green-body {
    background: linear-gradient(180deg, #2E7D32 0%, #1B5E20 100%);
    border: 2px solid #144318;
    border-radius: 8px;
    margin: 0 10px 10px;
    padding: 10px 6px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.ph-hole {
    background: #113014;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #388E3C;
}
.ph-hole span { width: 11px; height: 11px; border-radius: 50%; background: #90A4AE; border: 2px solid #546E7A; }

.oem-display-mockup {
    background: #1A0F07;
    border: 3px solid #2C3545;
    border-radius: 16px;
    padding: 14px 18px;
    font-family: monospace !important;
    box-shadow: inset 0 0 18px rgba(255, 111, 0, 0.25);
}
.oem-top-row {
    display: flex;
    justify-content: space-between;
    color: #FF9100;
    font-size: 11px;
    font-weight: 700;
    border-bottom: 1px dashed rgba(255, 145, 0, 0.35);
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.oem-track-row {
    color: #FFB300;
    font-size: 13.5px;
    font-weight: 900;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(255, 179, 0, 0.6);
}
.oem-sub-row { color: #FF6D00; font-size: 9.5px; font-weight: 700; }

.canbus-features-grid, .rem-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.can-item, .rem-step-card {
    background: var(--pod-surface);
    border: 1.4px solid var(--border-silver);
    border-radius: 14px;
    padding: 18px;
}
.rem-step-card.highlight {
    border: 2px solid var(--hardware-red);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F8 100%);
}
.can-num, .rem-step-tag {
    display: inline-block;
    background: var(--aurora-blue);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 9px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.rem-step-tag { background: var(--panel-navy); color: var(--electric-cyan); }
.rem-step-tag.red { background: var(--hardware-red); color: #FFFFFF; }
.can-item h4, .rem-step-card h4 { font-size: 15px; font-weight: 900; color: var(--panel-navy); margin-bottom: 6px; }
.can-item p, .rem-step-card p   { font-size: 13px; color: var(--text-sub); font-weight: 600; line-height: 1.75; }

/* ==================== ANDROID APP LIVE PIPELINE OVERVIEW SIMULATOR ==================== */
.app-simulator-frame {
    display: flex;
    background: linear-gradient(135deg, #F3F6F9 0%, #E3E9F0 100%);
    border: 3px solid var(--panel-navy);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(15, 30, 54, 0.16);
    min-height: 360px;
}

.sim-sidebar {
    width: 148px;
    background: var(--panel-navy);
    border-right: 3px solid var(--aurora-blue);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;
    flex-shrink: 0;
}

.sim-brand { display: flex; align-items: center; gap: 6px; width: 100%; }
.sim-back {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.sim-logo-box {
    width: 26px;
    height: 26px;
    background: #0B1526;
    border: 1.5px solid var(--electric-cyan);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--electric-cyan);
    font-weight: 900;
    font-size: 13px;
}
.sim-brand strong { display: block; font-size: 11px; }
.sim-brand small  { display: block; font-size: 8.5px; color: #00E676; font-weight: 800; }
.sim-vol-pill {
    background: #FFFFFF;
    color: var(--panel-navy);
    font-weight: 900;
    font-size: 14px;
    padding: 4px 16px;
    border-radius: 8px;
    border: 2px solid var(--electric-cyan);
    margin: 10px 0;
}
.sim-fader-track {
    width: 10px;
    height: 145px;
    background: #1E3458;
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: flex-end;
}
.sim-fader-fill { width: 100%; height: 82%; background: var(--electric-cyan); border-radius: 10px; }
.sim-fader-thumb {
    width: 22px;
    height: 22px;
    background: #FFFFFF;
    border-radius: 50%;
    position: absolute;
    bottom: calc(82% - 11px);
    left: -6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.sim-master-lbl { font-size: 9.5px; font-weight: 900; color: #B0C4DE; margin-top: 8px; }

.sim-main {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.sim-topbar {
    background: #FFFFFF;
    border: 1.6px solid var(--panel-navy);
    border-radius: 12px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.sim-top-left { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--panel-navy); }
.sim-dsp-badge { background: var(--panel-navy); color: var(--electric-cyan); font-weight: 900; font-size: 10.5px; padding: 3px 8px; border-radius: 6px; }
.sim-top-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sim-btn-bt  { background: var(--pod-surface); border: 1.2px solid var(--border-silver); color: var(--panel-navy); font-size: 9.5px; font-weight: 900; padding: 5px 10px; border-radius: 8px; }
.sim-btn-rst { background: #FFF5F5; border: 1.2px solid var(--hardware-red); color: var(--hardware-red); font-size: 9.5px; font-weight: 900; padding: 5px 10px; border-radius: 8px; }

.sim-rail-container {
    background: rgba(255, 255, 255, 0.6);
    border: 1.6px solid rgba(211, 47, 47, 0.45);
    border-radius: 20px;
    padding: 14px;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.sim-rail-scroll {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 8px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.sim-terminal {
    width: 152px;
    height: 228px;
    background: #FFFFFF;
    border: 1.8px solid var(--panel-navy);
    border-radius: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sim-term-head { background: var(--panel-navy); color: #FFFFFF; text-align: center; font-size: 9.5px; font-weight: 900; padding: 7px; }
.sim-term-body { padding: 12px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.sim-circle-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--pod-surface); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: var(--panel-navy); }
.sim-circle-icon.blue { border: 2px solid var(--aurora-blue); }
.sim-circle-icon.red  { border: 2px solid var(--hardware-red); }
.sim-term-body h4 { font-size: 12px; font-weight: 900; color: var(--panel-navy); }
.sim-term-body p  { font-size: 9.5px; font-weight: 700; color: var(--text-sub); line-height: 1.3; }
.sim-term-tag { width: 100%; padding: 4px; border-radius: 6px; font-size: 9px; font-weight: 900; }
.sim-term-tag.blue { background: rgba(0,119,200,0.1); color: var(--aurora-blue); border: 1px solid var(--aurora-blue); }
.sim-term-tag.red  { background: rgba(211,47,47,0.1); color: var(--hardware-red); border: 1px solid var(--hardware-red); }

.sim-node {
    width: 252px;
    height: 228px;
    background: #FFFFFF;
    border: 1.8px solid var(--panel-navy);
    border-radius: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sim-node-head { background: var(--panel-navy); color: #FFFFFF; padding: 9px 12px; display: flex; align-items: center; gap: 10px; }
.sim-node-ico { width: 28px; height: 28px; background: rgba(255,255,255,0.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.sim-node-titles { flex: 1; }
.sim-node-titles h4 { font-size: 12.5px; font-weight: 900; line-height: 1.2; }
.sim-node-titles small { font-size: 9px; color: #B0C4DE; font-weight: 700; }
.sim-step-badge { width: 24px; height: 24px; border-radius: 50%; background: var(--aurora-blue); border: 1px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; }
.sim-node-body { margin: 10px 12px; padding: 8px 10px; background: var(--pod-surface); border: 1px solid var(--border-silver); border-radius: 10px; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.sim-row { display: flex; justify-content: space-between; font-size: 10px; }
.sim-row span   { color: var(--text-sub); font-weight: 700; }
.sim-row strong { color: var(--panel-navy); font-weight: 900; }
.sim-row strong.blue { color: var(--aurora-blue); }
.sim-row strong.red  { color: var(--hardware-red); }
.sim-node-foot { margin: 0 12px 10px; padding: 5px; border-radius: 7px; text-align: center; color: #FFFFFF; font-size: 9.5px; font-weight: 900; }
.sim-node-foot.blue { background: var(--aurora-blue); }
.sim-node-foot.navy { background: var(--panel-navy); }
.sim-node-foot.red  { background: var(--hardware-red); }

.sim-cable { width: 32px; display: flex; align-items: center; flex-shrink: 0; }
.sim-cable .dot-navy { width: 8px; height: 8px; border-radius: 50%; background: #FFF; border: 2px solid var(--panel-navy); }
.sim-cable .line-blue { flex: 1; height: 3px; background: var(--aurora-blue); }
.sim-cable .dot-red  { width: 8px; height: 8px; border-radius: 50%; background: #FFF; border: 2px solid var(--hardware-red); }

/* ==================== DIRECT STORE BANNER & B2B FORM ==================== */
.direct-buy-banner {
    background: linear-gradient(135deg, #0B1526 0%, #0F1E36 55%, #1A3358 100%);
    border: 3px solid var(--electric-cyan);
    border-radius: 26px;
    padding: 34px;
    margin-top: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    color: #FFFFFF;
    box-shadow: 0 18px 40px rgba(0, 119, 200, 0.22);
}
.buy-info-col h2 { font-size: 24px; font-weight: 900; margin-bottom: 8px; color: #FFFFFF; line-height: 1.4; }
.buy-info-col p  { font-size: 14px; color: #C2D3E8; max-width: 720px; }
.buy-price-col {
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(0, 168, 232, 0.45);
    border-radius: 20px;
    padding: 20px 24px;
    text-align: center;
    min-width: 295px;
    flex-shrink: 0;
}
.price-lbl { display: block; font-size: 12px; color: #B0C4DE; font-weight: 700; }
.price-val { display: block; font-size: 25px; font-weight: 900; color: #00E676; margin: 6px 0 14px; }
.btn-buy-now {
    display: inline-block;
    width: 100%;
    background: var(--electric-cyan);
    color: #091324;
    text-decoration: none;
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 900;
    transition: all 0.2s ease;
}
.btn-buy-now:hover { background: #FFFFFF; transform: translateY(-2px); }

.b2b-card {
    background: var(--panel-white);
    border: 2px solid var(--panel-navy);
    border-radius: 22px;
    padding: 32px;
    margin: 42px 0;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border-silver);
    border-radius: 10px;
    background: var(--pod-surface);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--panel-navy);
}
.alert-success {
    background: #E8F5E9;
    border: 1.5px solid #2E7D32;
    color: #1B5E20;
    padding: 12px 16px;
    border-radius: 10px;
    margin-top: 14px;
    font-weight: 800;
}

.site-footer {
    background: var(--panel-navy);
    color: #B0C4DE;
    padding: 26px 0;
    margin-top: 40px;
    font-size: 12.5px;
    text-align: center;
    border-top: 3px solid var(--aurora-blue);
}

/* ======================================================================
   RESPONSIVE BREAKPOINTS FOR TABLETS & MOBILE PHONES
   ====================================================================== */

@media (max-width: 1024px) {
    .hero-panel,
    .module-showcase-card,
    .canbus-header-row,
    .rem-top-grid {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 22px;
    }

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

    .direct-buy-banner {
        flex-direction: column;
        text-align: center;
        padding: 26px;
    }

    .buy-price-col {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 12px;
    }

    /* هدر موبایل دو ردیفه با حفظ کامل دکمه‌های تغییر صفحه */
    .nav-flex {
        justify-content: space-between;
        padding: 10px 0;
        gap: 10px;
    }

    .brand-title { font-size: 18px; }
    .brand-sub   { font-size: 8.5px; }

    .nav-links {
        order: 3;
        width: 100%;
        justify-content: center;
        background: rgba(9, 19, 36, 0.65);
        padding: 6px;
        border-radius: 10px;
        gap: 8px;
    }

    .page-tab {
        flex: 1;
        text-align: center;
        padding: 7px 10px;
        font-size: 12px !important;
    }

    /* هیرو موبایل */
    .hero-panel {
        padding: 20px 16px;
        border-radius: 20px;
    }
    .hero-panel::after { inset: 5px; border-radius: 16px; }
    .hero-model-badge { font-size: 28px; }
    .hero-title { font-size: 22px; }
    .hero-desc  { font-size: 13.5px; }

    .hero-badges-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .hero-actions {
        flex-direction: column;
    }
    .hero-actions a {
        width: 100%;
    }

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

    /* ستون‌ها و گالری در موبایل */
    .pillars-grid,
    .gallery-grid,
    .canbus-features-grid,
    .rem-steps-grid,
    .form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .section-head {
        margin: 34px 0 14px;
    }
    .section-head h2,
    .canbus-header-row h2,
    .rem-top-grid h2,
    .buy-info-col h2 {
        font-size: 19px !important;
    }

    .module-showcase-card,
    .canbus-panel,
    .rem-sequencer-panel,
    .b2b-card {
        padding: 18px 14px;
        border-radius: 18px;
    }

    .mod-info-col h3 {
        font-size: 17.5px;
    }

    /* چیدمان بهینه گرافیک‌های داخلی ماژول‌ها در موبایل */
    .ui-bass-body {
        grid-template-columns: repeat(2, 1fr);
    }

    .ui-hpf-grid,
    .ui-xover-grid,
    .ui-mixer-groups,
    .ui-polarity-grid {
        grid-template-columns: 1fr;
    }

    .delay-stats-grid {
        grid-template-columns: 1fr;
    }

    .ui-delay-unified-body {
        grid-template-columns: 1fr;
    }

    /* تبدیل سایدبار عمودی شبیه‌ساز اپلیکیشن به هدر افقی در موبایل */
    .app-simulator-frame {
        flex-direction: column;
        border-radius: 20px;
    }

    .sim-sidebar {
        width: 100%;
        flex-direction: row;
        border-right: none;
        border-bottom: 2px solid var(--aurora-blue);
        padding: 10px 14px;
        gap: 10px;
    }

    .sim-brand { width: auto; }
    .sim-fader-track, .sim-master-lbl { display: none; }
    .sim-vol-pill { margin: 0; font-size: 12px; padding: 3px 10px; }

    .sim-main { padding: 10px; }
    .sim-top-left strong { font-size: 10px; }

    /* اسکرول نرم اکولایزر ۱۳ بانده در موبایل */
    .ui-peq-grid {
        grid-template-columns: repeat(13, 34px);
        justify-content: start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ترمینال ۶ پین در موبایل */
    .phoenix-pins-row,
    .phoenix-green-body {
        gap: 3px;
        padding: 6px 4px;
        margin: 0 2px 6px;
    }
    .p-lbl { font-size: 9.5px; }
    .p-pin small { font-size: 7.5px; }
}