/* ==========================================================================
   HISTORICAL CASES — PREMIUM UI
   Version: 0.3.0
   ========================================================================== */


/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    --bg: #f3f0e9;

    --surface: #ffffff;
    --surface-soft: #faf8f3;
    --surface-warm: #f7f3ea;

    --text: #25231f;
    --text-soft: #5f5a51;
    --muted: #8b867d;

    --border: #e6e0d5;
    --border-soft: #eee9e0;

    --accent: #927544;
    --accent-dark: #6e572f;
    --accent-soft: #f1eadc;

    --success: #287a4b;
    --danger: #a33b3b;

    --dark: #24211c;
    --dark-soft: #302c25;

    --white: #ffffff;

    --shadow-xs:
        0 2px 8px rgba(50, 43, 32, 0.035);

    --shadow-sm:
        0 4px 16px rgba(50, 43, 32, 0.055);

    --shadow-md:
        0 10px 30px rgba(50, 43, 32, 0.085);

    --shadow-lg:
        0 18px 45px rgba(50, 43, 32, 0.12);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;

    --transition: 180ms ease;
}


/* ==========================================================================
   RESET
   ========================================================================== */

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(146, 117, 68, 0.065),
            transparent 32%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(146, 117, 68, 0.035),
            transparent 28%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img,
video {
    max-width: 100%;
}


/* ==========================================================================
   APP
   ========================================================================== */

.app {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;

    padding:
        14px
        14px
        42px;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    margin-bottom: 14px;

    padding:
        31px
        24px;

    border:
        1px solid
        rgba(255, 255, 255, 0.045);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            #332e27 0%,
            #24211c 48%,
            #181613 100%
        );

    color: var(--white);

    box-shadow:
        var(--shadow-lg);
}


/* دایره‌های تزئینی */

.hero::before {
    content: "";

    position: absolute;

    z-index: -1;

    width: 280px;
    height: 280px;

    left: -125px;
    bottom: -175px;

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 50%;
}

.hero::after {
    content: "";

    position: absolute;

    z-index: -1;

    width: 170px;
    height: 170px;

    right: -75px;
    top: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(146, 117, 68, 0.18),
            rgba(146, 117, 68, 0)
        );
}

.hero > * {
    position: relative;
    z-index: 2;
}


/* برچسب بالای هدر */

.hero-badge {
    display: inline-flex;

    align-items: center;

    min-height: 30px;

    margin-bottom: 14px;

    padding:
        6px
        11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.085);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.055);

    color:
        #dccba9;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.6;

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


/* عنوان */

.hero h1 {
    margin:
        0
        0
        9px;

    color:
        #ffffff;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.8;

    letter-spacing:
        -0.35px;
}


/* توضیح */

.hero p {
    margin: 0;

    max-width: 610px;

    color:
        #c9c4ba;

    font-size: 13px;

    line-height: 2.05;
}


/* ==========================================================================
   STATUS
   ========================================================================== */

.status-card {
    margin-bottom: 14px;

    padding:
        7px
        18px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-sm);
}

.status-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 44px;

    border-bottom:
        1px solid
        var(--border-soft);
}

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

.status-row span {
    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.8;
}

.status-row strong {
    color:
        var(--text);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.8;
}

.status-online {
    color:
        var(--success) !important;
}

.status-offline {
    color:
        var(--danger) !important;
}


/* ==========================================================================
   CONTENT CARDS
   ========================================================================== */

.content-card {
    position: relative;

    width: 100%;

    margin-bottom: 14px;

    padding: 20px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-sm);

    overflow: hidden;
}


/* عنوان بخش */

.content-card h2 {
    display: flex;

    align-items: center;

    gap: 12px;

    margin:
        0
        0
        15px;

    color:
        var(--text);

    font-size: 17px;

    font-weight: 800;

    line-height: 1.7;
}

.content-card h2::after {
    content: "";

    flex: 1;

    min-width: 20px;

    height: 1px;

    background:
        var(--border);
}


/* پاراگراف مستقیم */

.content-card > p {
    margin: 0;

    color:
        var(--text-soft);

    font-size: 14px;

    line-height: 2.15;
}


/* ==========================================================================
   SECTION HEADING
   ========================================================================== */

.section-heading {
    margin-bottom: 18px;
}

.section-heading h2 {
    margin:
        0
        0
        5px;
}

.section-heading p {
    margin: 0;

    color:
        var(--muted);

    font-size: 11px;

    line-height: 1.9;
}

.section-kicker {
    display: inline-flex;

    align-items: center;

    min-height: 25px;

    margin-bottom: 6px;

    padding:
        4px
        9px;

    border-radius: 999px;

    background:
        var(--accent-soft);

    color:
        var(--accent-dark);

    font-size: 10px;

    font-weight: 700;

    line-height: 1.6;
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.empty-content {
    padding:
        19px
        15px;

    border:
        1px dashed
        var(--border);

    border-radius:
        var(--radius-sm);

    background:
        var(--surface-soft);

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.9;

    text-align: center;
}


/* ==========================================================================
   CASE READER
   ========================================================================== */

.case-reader {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   CASE TEXT TABS
   ========================================================================== */

.case-texts-tabs {
    display: flex;

    gap: 8px;

    width: calc(100% + 8px);

    margin:
        0
        -4px
        18px;

    padding: 4px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x proximity;
}

.case-texts-tabs::-webkit-scrollbar {
    display: none;
}

.case-text-tab {
    flex:
        0
        0
        auto;

    min-height: 38px;

    padding:
        8px
        15px;

    border:
        1px solid
        var(--border);

    border-radius: 999px;

    background:
        var(--surface-soft);

    color:
        var(--text-soft);

    font-size: 12px;

    font-weight: 600;

    line-height: 1.6;

    white-space: nowrap;

    cursor: pointer;

    scroll-snap-align: start;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.case-text-tab:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--accent);

    color:
        var(--accent);
}

.case-text-tab.active {
    background:
        var(--dark);

    border-color:
        var(--dark);

    color:
        #ffffff;

    box-shadow:
        0 5px 14px
        rgba(36, 33, 28, 0.13);
}


/* ==========================================================================
   CASE TEXT CONTENT
   ========================================================================== */

.case-text-content-panel {
    min-height: 120px;

    animation:
        casePanelIn
        220ms
        ease;
}

@keyframes casePanelIn {

    from {
        opacity: 0;

        transform:
            translateY(5px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

.case-text {
    position: relative;

    padding:
        3px
        0
        7px;
}

.case-text-number {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-bottom: 11px;

    border-radius:
        10px;

    background:
        var(--accent-soft);

    color:
        var(--accent-dark);

    font-size: 11px;

    font-weight: 700;
}

.case-text-title {
    margin:
        0
        0
        11px;

    color:
        var(--text);

    font-size: 18px;

    font-weight: 800;

    line-height: 1.8;
}

.case-text-content {
    color:
        var(--text-soft);

    font-size: 14px;

    line-height: 2.25;

    white-space: pre-line;
}


/* =========================================================
   PREMIUM AUDIO PLAYER
   ========================================================= */

.audio-player {
    position: relative;
    margin-top: 16px;
    padding: 18px;

    background: #ffffff;
    border: 1px solid rgba(60, 48, 35, 0.08);
    border-radius: 20px;

    box-shadow:
        0 8px 24px rgba(35, 28, 20, 0.07);

    overflow: hidden;
}


/* =========================================================
   EPISODE
   ========================================================= */

.audio-episode {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 40px;
    height: 26px;
    padding: 0 9px;

    margin-bottom: 8px;

    border-radius: 8px;

    background: #f1ece4;
    color: #80633f;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    direction: ltr;
}


/* =========================================================
   AUDIO INFO
   ========================================================= */

.audio-info {
    margin-bottom: 17px;
}

.audio-title {
    margin: 0;

    color: #29251f;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.7;
}

.audio-description {
    margin: 5px 0 0;

    color: #8a8176;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}


/* =========================================================
   AUDIO CONTROLS
   ========================================================= */

.custom-audio-controls {
    display: flex;
    align-items: center;

    width: 100%;
    gap: 11px;
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

.audio-play-button {
    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: #39332b;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(40, 32, 24, 0.20);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.audio-play-button:hover {
    background: #2f2a24;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(40, 32, 24, 0.25);
}

.audio-play-button:active {
    transform: scale(0.94);
}


/* =========================================================
   PROGRESS BAR
   ========================================================= */

.audio-progress {
    flex: 1;

    width: 100%;
    height: 6px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border: none;
    outline: none;

    border-radius: 999px;

    background: #e5e0d8;

    cursor: pointer;
}


/* ---------- Chrome / Android / Eitaa WebView ---------- */

.audio-progress::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;

    border-radius: 999px;

    background: #e5e0d8;
}

.audio-progress::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 14px;
    height: 14px;

    margin-top: -4px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #a77a42;

    box-shadow:
        0 2px 7px rgba(80, 55, 25, 0.28);

    cursor: pointer;
}


/* ---------- Firefox ---------- */

.audio-progress::-moz-range-track {
    width: 100%;
    height: 6px;

    border: none;
    border-radius: 999px;

    background: #e5e0d8;
}

.audio-progress::-moz-range-progress {
    height: 6px;

    border-radius: 999px;

    background: #a77a42;
}

.audio-progress::-moz-range-thumb {
    width: 14px;
    height: 14px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #a77a42;

    box-shadow:
        0 2px 7px rgba(80, 55, 25, 0.28);

    cursor: pointer;
}


/* =========================================================
   TIME
   ========================================================= */

.audio-time {
    flex: 0 0 auto;

    min-width: 78px;

    color: #756d63;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;

    text-align: center;

    direction: ltr;
    white-space: nowrap;
}


/* =========================================================
   NATIVE AUDIO
   ========================================================= */

.audio-element {
    display: none;
}


/* =========================================================
   PLAYING STATE
   ========================================================= */

.audio-player.is-playing {
    border-color: rgba(167, 122, 66, 0.18);

    box-shadow:
        0 10px 28px rgba(55, 42, 28, 0.10);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .audio-player {
        padding: 16px;
        border-radius: 18px;
    }

    .custom-audio-controls {
        gap: 9px;
    }

    .audio-play-button {
        flex-basis: 42px;
        width: 42px;
        height: 42px;

        font-size: 14px;
    }

    .audio-time {
        min-width: 70px;
        font-size: 9px;
    }
}

/* ==========================================================================
   VIDEO
   ========================================================================== */

#case-video {
    width: 100%;
    min-width: 0;
}

#case-video .video-player {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 10px;

    box-sizing: border-box;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    background:
        var(--surface-soft);
}

#case-video .video-element,
#case-video video {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    height: auto !important;

    aspect-ratio:
        16 / 9;

    box-sizing: border-box;

    margin: 0;
    padding: 0;

    border: 0;

    border-radius:
        12px;

    background:
        #000000;

    object-fit: contain;
}


/* ==========================================================================
   GENERIC MEDIA
   ========================================================================== */

.case-media {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius:
        var(--radius-md);

    background:
        var(--dark);
}

.case-media img,
.case-media video {
    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    object-fit: cover;
}


/* ==========================================================================
   DOCUMENTS
   ========================================================================== */

.document-card {
    display: flex;

    align-items: center;

    gap: 13px;

    width: 100%;

    margin-bottom: 10px;

    padding: 14px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    background:
        var(--surface-soft);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.document-card:last-child {
    margin-bottom: 0;
}

.document-card:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--border);

    box-shadow:
        var(--shadow-sm);
}

.document-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border-radius:
        12px;

    background:
        var(--accent-soft);

    color:
        var(--accent-dark);

    font-size: 18px;
}

.document-info {
    min-width: 0;
}

.document-title {
    margin: 0;

    color:
        var(--text);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.8;
}

.document-description {
    margin:
        2px
        0
        0;

    color:
        var(--muted);

    font-size: 11px;

    line-height: 1.7;
}


/* ==========================================================================
   SOURCES — PREMIUM
   ========================================================================== */

#case-sources {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   SOURCE CATEGORY TABS
   ========================================================================== */

#case-sources .source-tabs {
    display: flex;

    gap: 8px;

    width: 100%;

    margin:
        0
        0
        16px;

    padding: 4px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

#case-sources .source-tabs::-webkit-scrollbar {
    display: none;
}


#case-sources .source-tab {
    flex:
        0
        0
        auto;

    min-height: 38px;

    padding:
        8px
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        var(--surface-soft);

    color:
        var(--text-soft);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.6;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


#case-sources .source-tab:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--accent);

    color:
        var(--accent-dark);
}


#case-sources .source-tab.active {
    background:
        var(--dark);

    border-color:
        var(--dark);

    color:
        #ffffff;

    box-shadow:
        0 5px 14px
        rgba(36, 33, 28, 0.13);
}


/* ==========================================================================
   SOURCE TAB CONTENT
   ========================================================================== */

#case-sources .source-tab-content {
    width: 100%;

    animation:
        sourcePanelIn
        220ms
        ease;
}


@keyframes sourcePanelIn {

    from {
        opacity: 0;

        transform:
            translateY(5px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ==========================================================================
   CATEGORY TITLE
   ========================================================================== */

#case-sources .source-category-title {
    display: flex;

    align-items: center;

    gap: 10px;

    margin:
        0
        0
        13px;

    color:
        var(--text);

    font-size: 14px;

    font-weight: 800;

    line-height: 1.8;
}


#case-sources .source-category-title::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        var(--border);
}


/* ==========================================================================
   SOURCE CARD
   ========================================================================== */

#case-sources .source-card {
    position: relative;

    width: 100%;
    min-width: 0;

    margin:
        0
        0
        14px;

    padding:
        16px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            var(--surface-soft) 100%
        );

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-sm);

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}


#case-sources .source-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 4px;
    height: 100%;

    background:
        var(--accent);

    opacity: 0.8;
}


#case-sources .source-card:last-child {
    margin-bottom: 0;
}


#case-sources .source-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(146, 117, 68, 0.22);

    box-shadow:
        var(--shadow-md);
}


/* ==========================================================================
   SOURCE HEADER
   ========================================================================== */

#case-sources .source-header {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    width: 100%;
}


/* ==========================================================================
   SOURCE NUMBER
   ========================================================================== */

#case-sources .source-number {
    display: flex;

    align-items: center;
    justify-content: center;

    flex:
        0
        0
        40px;

    width: 40px;
    height: 40px;

    border:
        1px solid
        rgba(146, 117, 68, 0.16);

    border-radius:
        12px;

    background:
        var(--accent-soft);

    color:
        var(--accent-dark);

    font-size: 11px;

    font-weight: 800;

    line-height: 1;

    direction: ltr;
}


/* ==========================================================================
   SOURCE CONTENT
   ========================================================================== */

#case-sources .source-content {
    flex: 1;

    min-width: 0;
}


#case-sources .source-card .source-title {
    margin: 0;

    color:
        var(--text);

    font-size: 15px;

    font-weight: 800;

    line-height: 1.8;
}


#case-sources .source-card .source-author {
    margin:
        3px
        0
        0;

    color:
        var(--text-soft);

    font-size: 11px;

    font-weight: 600;

    line-height: 1.8;
}


/* ==========================================================================
   SOURCE META
   ========================================================================== */

#case-sources .source-card .source-meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    margin-top: 9px;
}


#case-sources .source-card .source-meta-item {
    display: inline-flex;

    align-items: center;

    min-height: 23px;

    padding:
        3px
        8px;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        8px;

    background:
        var(--surface);

    color:
        var(--muted);

    font-size: 10px;

    font-weight: 600;

    line-height: 1.5;
}


#case-sources .source-card .source-page {
    color:
        var(--accent-dark);
}


/* ==========================================================================
   SOURCE DESCRIPTION
   ========================================================================== */

#case-sources .source-card .source-description {
    margin:
        12px
        0
        0;

    padding:
        0
        2px;

    color:
        var(--text-soft);

    font-size: 12px;

    line-height: 2;
}


/* ==========================================================================
   SOURCE CITATION
   ========================================================================== */

#case-sources .source-card .source-citation {
    margin-top:
        12px;

    padding:
        10px
        12px;

    border-right:
        3px solid
        var(--accent);

    border-radius:
        9px;

    background:
        rgba(241, 234, 220, 0.55);

    color:
        var(--text-soft);

    font-size: 10px;

    line-height: 1.95;
}


/* ==========================================================================
   SOURCE LINK
   ========================================================================== */

#case-sources .source-card .source-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    margin-top:
        10px;

    padding:
        5px
        11px;

    border-radius:
        9px;

    background:
        var(--accent-soft);

    color:
        var(--accent-dark);

    font-size: 10px;

    font-weight: 700;

    line-height: 1.6;

    text-decoration: none;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}


#case-sources .source-card .source-link:hover {
    background:
        var(--accent);

    color:
        #ffffff;

    transform:
        translateY(-1px);
}


/* ==========================================================================
   SOURCE EXTRA CONTENT
   ========================================================================== */

#case-sources .source-extra-block {
    position: relative;

    margin:
        10px
        0
        0;

    padding:
        13px
        14px;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        13px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow-xs);
}


#case-sources .source-extra-block strong {
    display: flex;

    align-items: center;

    gap: 7px;

    margin:
        0
        0
        7px;

    color:
        var(--accent-dark);

    font-size: 11px;

    font-weight: 800;

    line-height: 1.8;
}


#case-sources .source-extra-block strong::before {
    content: "";

    flex:
        0
        0
        6px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--accent);
}


#case-sources .source-extra-block p {
    margin: 0;

    color:
        var(--text-soft);

    font-size: 11px;

    line-height: 2.05;

    white-space: pre-line;
}


/* ==========================================================================
   EMPTY SOURCE STATE
   ========================================================================== */

#case-sources .empty-content {
    margin-top: 4px;
}


/* ==========================================================================
   SOURCES — MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    #case-sources .source-tabs {
        gap: 7px;

        margin-bottom: 14px;
    }

    #case-sources .source-tab {
        min-height: 36px;

        padding:
            7px
            13px;

        font-size: 10px;
    }

    #case-sources .source-category-title {
        margin-bottom: 11px;

        font-size: 13px;
    }

    #case-sources .source-card {
        margin-bottom: 11px;

        padding: 13px;

        border-radius:
            15px;
    }

    #case-sources .source-header {
        gap: 10px;
    }

    #case-sources .source-number {
        flex-basis: 35px;

        width: 35px;
        height: 35px;

        border-radius:
            10px;

        font-size: 10px;
    }

    #case-sources .source-card .source-title {
        font-size: 13px;
    }

    #case-sources .source-card .source-author {
        font-size: 10px;
    }

    #case-sources .source-card .source-description {
        margin-top: 10px;

        font-size: 10px;

        line-height: 1.95;
    }

    #case-sources .source-card .source-citation {
        margin-top: 10px;

        padding:
            8px
            10px;

        font-size: 9px;
    }

    #case-sources .source-extra-block {
        padding:
            11px
            12px;

        border-radius:
            12px;
    }

    #case-sources .source-extra-block strong {
        font-size: 10px;
    }

    #case-sources .source-extra-block p {
        font-size: 10px;

        line-height: 1.95;
    }
}
/* ==========================================================================
   BUTTONS
   ========================================================================== */

button {
    border: none;

    cursor: pointer;

    transition:
        transform var(--transition),
        opacity var(--transition),
        background var(--transition);
}

button:active {
    transform:
        scale(0.97);
}

.primary-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0
        18px;

    border-radius:
        12px;

    background:
        var(--dark);

    color:
        #ffffff;

    font-size: 13px;

    font-weight: 700;
}

.primary-button:hover {
    background:
        var(--dark-soft);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    .app {
        padding:
            9px
            10px
            34px;
    }


    /* HERO */

    .hero {
        margin-bottom: 12px;

        padding:
            25px
            18px;

        border-radius:
            21px;
    }

    .hero-badge {
        margin-bottom: 12px;

        padding:
            5px
            9px;

        font-size: 10px;
    }

    .hero h1 {
        font-size: 21px;

        line-height: 1.85;
    }

    .hero p {
        font-size: 12px;

        line-height: 2;
    }


    /* STATUS */

    .status-card {
        margin-bottom: 12px;

        padding:
            6px
            15px;

        border-radius:
            17px;
    }

    .status-row {
        min-height: 42px;

        gap: 10px;
    }

    .status-row span,
    .status-row strong {
        font-size: 11px;
    }


    /* CONTENT */

    .content-card {
        margin-bottom: 12px;

        padding: 16px;

        border-radius:
            17px;
    }

    .content-card h2 {
        font-size: 16px;
    }

    .content-card > p {
        font-size: 13px;

        line-height: 2.1;
    }


    /* SECTION HEADING */

    .section-heading {
        margin-bottom: 15px;
    }

    .section-heading h2 {
        font-size: 16px;
    }

    .section-heading p {
        font-size: 10px;
    }


    /* TEXT */

    .case-texts-tabs {
        gap: 7px;

        margin-bottom: 16px;
    }

    .case-text-tab {
        min-height: 36px;

        padding:
            7px
            13px;

        font-size: 11px;
    }

    .case-text-number {
        width: 32px;
        height: 32px;

        margin-bottom: 9px;
    }

    .case-text-title {
        margin-bottom: 10px;

        font-size: 17px;
    }

    .case-text-content {
        font-size: 13px;

        line-height: 2.2;
    }


    /* AUDIO */

    .audio-player {
        gap: 10px;

        padding: 14px;

        border-radius:
            15px;
    }

    .audio-episode {
        width: 38px;
        height: 38px;

        border-radius:
            11px;
    }

    .audio-title {
        font-size: 14px;
    }

    .audio-description {
        font-size: 10px;
    }

    .audio-element {
        height: 38px;
    }


    /* VIDEO */

    #case-video .video-player {
        padding: 7px;

        border-radius:
            14px;
    }

    #case-video .video-element,
    #case-video video {
        border-radius:
            10px;
    }


    /* DOCUMENT */

    .document-card {
        gap: 10px;

        padding: 12px;

        border-radius:
            14px;
    }

    .document-icon {
        width: 38px;
        height: 38px;

        border-radius:
            10px;
    }

    .document-title {
        font-size: 12px;
    }


    /* SOURCES */

    #case-sources .source-card {
        gap: 10px;

        margin-bottom: 8px;

        padding:
            12px;

        border-radius:
            14px;
    }

    #case-sources .source-number {
        flex-basis: 34px;

        width: 34px;
        height: 34px;

        border-radius:
            10px;

        font-size: 10px;
    }

    #case-sources .source-card .source-title {
        font-size: 13px;
    }

    #case-sources .source-card .source-author {
        font-size: 10px;
    }

    #case-sources .source-card .source-description {
        font-size: 10px;

        line-height: 1.9;
    }

    #case-sources .source-card .source-citation {
        font-size: 9px;
    }
}


/* ==========================================================================
   SAFE AREA — Eitaa / Mobile
   ========================================================================== */

@supports (
    padding-bottom:
    env(safe-area-inset-bottom)
) {

    .app {
        padding-bottom:
            calc(
                34px +
                env(safe-area-inset-bottom)
            );
    }
}
/* ==========================================================================\n   RICH TEXT / STUDY CONTENT\n   ========================================================================== */\n
.case-text-content p {
    margin: 0 0 14px;
}

.case-text-content h2,
.case-text-content h3,
.case-text-content h4 {
    margin: 20px 0 10px;
    color: var(--text);
    line-height: 1.9;
}

.case-text-content h2 { font-size: 20px; }
.case-text-content h3 { font-size: 18px; }
.case-text-content h4 { font-size: 16px; }

.case-text-content ul,
.case-text-content ol {
    margin: 10px 0 16px;
    padding-right: 24px;
}

.case-text-content li {
    margin-bottom: 7px;
}

.case-text-content blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    border-right: 3px solid var(--accent);
    background: var(--surface-soft);
    border-radius: 10px;
}

.case-text-content hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.case-text-content a {
    color: var(--accent-dark);
    text-decoration: underline;
}


/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{display:flex;flex-direction:column;gap:10px}.faq-item{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}.faq-question{cursor:pointer;padding:14px 16px;font-weight:800;color:var(--text);list-style:none}.faq-question::-webkit-details-marker{display:none}.faq-question:before{content:'+';display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;border-radius:7px;background:var(--surface-soft);color:var(--accent);font-weight:900}.faq-item[open] .faq-question:before{content:'−'}.faq-answer{padding:0 16px 16px;color:var(--text-soft);line-height:2.15;font-size:14px;white-space:pre-wrap}

/* --------------------------------------------------------------------------
   Comments / گفت‌وگو
   -------------------------------------------------------------------------- */
.comments-card .section-heading{margin-bottom:18px}
.comments-wrapper{display:flex;flex-direction:column;gap:14px}
.comments-list{display:flex;flex-direction:column;gap:10px}
.comment-item{border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:15px 16px}
.comment-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.comment-user{display:flex;align-items:center;gap:10px;min-width:0}
.comment-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-soft);color:var(--accent);font-weight:900;flex:0 0 38px}
.comment-user-name{font-weight:800;color:var(--text);overflow-wrap:anywhere}
.comment-user-meta{font-size:11px;color:var(--text-soft);margin-top:2px}
.comment-date{font-size:10px;color:var(--text-soft);white-space:nowrap}
.comment-body{margin:11px 0 0;color:var(--text);font-size:14px;line-height:2.05;white-space:pre-wrap;overflow-wrap:anywhere}
.comment-form{border:1px solid var(--border);background:var(--surface-soft);border-radius:16px;padding:15px}
.comment-form-user{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:12px;color:var(--text-soft)}
.comment-form-user strong{color:var(--text)}
.comment-input{display:block;width:100%;min-height:120px;resize:vertical;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:12px 13px;font:inherit;line-height:1.9;outline:none}
.comment-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.10)}
.comment-form-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.comment-submit{border:0;border-radius:11px;background:var(--accent);color:#fff;padding:10px 17px;font:700 13px inherit;cursor:pointer}
.comment-submit:disabled{opacity:.55;cursor:not-allowed}
.comment-note{font-size:10px;color:var(--text-soft);line-height:1.8}
.comment-message{display:none;margin-bottom:11px;border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.8}
.comment-message.show{display:block}
.comment-message.success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.comment-message.error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.comment-pending{border:1px dashed #d6b85c;background:#fffaf0}
.comment-pending-badge{display:inline-flex;padding:3px 8px;border-radius:999px;background:#fff3cd;color:#8a6500;font-size:10px;font-weight:800}
.comments-empty{padding:20px;text-align:center;color:var(--text-soft);font-size:12px;border:1px dashed var(--border);border-radius:14px}
@media(max-width:600px){.comment-form-footer{align-items:stretch;flex-direction:column}.comment-submit{width:100%}.comment-date{font-size:9px}}


/* Eitaa dynamic theme bridge */
body{background:var(--eitaa-bg, #f5f7fb);color:var(--eitaa-text, #1f2937)}
a{color:var(--eitaa-link, inherit)}
.content-card,.status-card{background:var(--eitaa-section-bg, #fff);border-color:var(--eitaa-separator, #e5e7eb)}