:root {
        --gold: #FFD700;
        --brown: #6D4C41;
        --green: #2ECC71;
        --dark: #2C3E50;
        --red: #C0392B;
        --muted: #7F8C8D;
        --surface: #FFFFFF;
        --background: #F6F4EF;
        --border: #E5E0D8;
        --row-alt: #FAF8F3;
        --row-hover: #FFF7DF;
    }

    * {
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
        background: var(--background);
        color: var(--dark);
        margin: 0;
        padding: 24px;
    }

    .cotdash-container {
        max-width: 1800px;
        margin: 0 auto;
    }

    .header {
        margin-bottom: 22px;
    }

    h1 {
        margin: 0 0 6px;
        font-size: 30px;
    }

    .subtitle {
        color: var(--brown);
        font-size: 15px;
    }

    .kpi-grid {
        display: grid;
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(160px, 1fr)
            );
        gap: 14px;
        margin-bottom: 20px;
    }

    .kpi {
        background: var(--surface);
        border-radius: 12px;
        padding: 16px;
        box-shadow:
            0 2px 8px
            rgba(0, 0, 0, 0.07);
        min-width: 0;
    }

    .kpi-label {
        font-size: 12px;
        color: var(--brown);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 8px;
    }

    .kpi-value {
        font-size: 22px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .card {
        background: var(--surface);
        border-radius: 12px;
        padding: 18px;
        box-shadow:
            0 2px 8px
            rgba(0, 0, 0, 0.08);
        overflow-x: auto;
    }

    h2 {
        margin-top: 0;
        margin-bottom: 8px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 12px;
        font-size: 14px;
        min-width: 1700px;
    }

    th {
        text-align: left;
        color: var(--brown);
        border-bottom:
            2px solid var(--border);
        padding: 10px 8px;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
    }

    th:hover {
        color: var(--dark);
    }

    th[title] {
        border-bottom-style: dotted;
        text-decoration: underline dotted 1px;
        text-underline-offset: 3px;
    }

    th.sort-asc::after {
        content: " \25B2";
        font-size: 10px;
    }

    th.sort-desc::after {
        content: " \25BC";
        font-size: 10px;
    }

    .table-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 4px;
        flex-wrap: wrap;
    }

    .filter-input {
        font-family: Arial, sans-serif;
        font-size: 13px;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        min-width: 260px;
        color: var(--dark);
    }

    .reset-btn {
        font-family: Arial, sans-serif;
        font-size: 13px;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--brown);
        cursor: pointer;
    }

    .reset-btn:hover {
        background: var(--row-hover);
    }

    .table-hint {
        font-size: 12px;
        color: var(--muted);
    }

    td {
        border-bottom:
            1px solid var(--border);
        padding: 9px 8px;
        vertical-align: middle;
    }

    tbody tr:nth-child(even) {
        background: var(--row-alt);
    }

    tbody tr:hover {
        background: var(--row-hover);
    }

    tr.group-row td {
        background: var(--dark);
        color: var(--surface);
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 8px 10px;
        border-bottom: none;
    }

    tr.group-row:hover td {
        background: var(--dark);
    }

    .group-exchange {
        font-weight: 400;
        opacity: 0.75;
        margin-left: 8px;
    }

    .group-count {
        float: right;
        font-weight: 400;
        opacity: 0.6;
        text-transform: none;
        letter-spacing: normal;
    }

    .stale-marker {
        color: var(--brown);
        font-size: 9px;
        vertical-align: super;
        margin-left: 3px;
        cursor: help;
    }

    .num {
        text-align: right;
        white-space: nowrap;
    }

    .date {
        white-space: nowrap;
    }

    .symbol {
        white-space: nowrap;
    }

    .symbol-link {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px dotted var(--muted);
    }

    .symbol-link:hover {
        color: var(--brown);
        border-bottom-style: solid;
    }

    .net {
        font-weight: 700;
        font-size: 15px;
        white-space: nowrap;
    }

    .cot-index {
        font-size: 16px;
    }

    .pos {
        color: var(--green);
    }

    .neg {
        color: var(--red);
    }

    .neutral {
        color: var(--muted);
    }

    .signal {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        color: white;
        white-space: nowrap;
    }

    .signal.bullish {
        background: var(--green);
    }

    .signal.strong-bullish {
        background: #1B7943;
        box-shadow: 0 0 0 2px rgba(27, 121, 67, 0.35);
    }

    .signal.bearish {
        background: var(--red);
    }

    .signal.strong-bearish {
        background: #7A1D14;
        box-shadow: 0 0 0 2px rgba(122, 29, 20, 0.35);
    }

    .signal.neutral {
        background: var(--muted);
    }

    .signal.na {
        background: var(--border);
        color: var(--dark);
    }

    .season-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: middle;
        cursor: help;
    }

    .season-dot.rising {
        background: var(--green);
    }

    .season-dot.falling {
        background: var(--red);
    }

    .season-dot.mixed {
        background: #E0A800;
    }

    .season-dot.na {
        background: var(--border);
    }

    .crop-phase {
        font-size: 12px;
        white-space: nowrap;
    }

    .crop-phase.harvest {
        color: var(--brown);
        font-weight: 700;
    }

    .crop-phase.planting {
        color: #2E7D32;
        font-weight: 700;
    }

    .crop-phase.both {
        color: var(--dark);
        font-weight: 700;
    }

    .crop-phase.na {
        color: var(--border);
    }

    .drought {
        font-weight: 700;
        white-space: nowrap;
    }

    .drought.drought-low {
        color: var(--green);
    }

    .drought.drought-moderate {
        color: #E0A800;
    }

    .drought.drought-severe {
        color: var(--red);
    }

    .drought.na {
        color: var(--border);
        font-weight: 400;
    }

    .drought-yoy {
        font-weight: 700;
        white-space: nowrap;
    }

    .drought-yoy.drought-worse {
        color: var(--red);
    }

    .drought-yoy.drought-better {
        color: var(--green);
    }

    .drought-yoy.drought-flat {
        color: var(--muted);
    }

    .drought-yoy.na {
        color: var(--border);
        font-weight: 400;
    }

    .note {
        font-size: 12px;
        color: #777;
        margin-top: 14px;
        line-height: 1.5;
    }

    .legend-card {
        margin-bottom: 20px;
    }

    .legend-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 10px 0;
    }

    .legend-card .note {
        margin-top: 8px;
    }

    .embedded .legend-card {
        display: none;
    }

    /* Embedded mode (iframe, e.g. the Joomla page): the surrounding page
       already has its own title/chrome and the iframe height is fixed and
       small, so trade every non-essential pixel of vertical space for more
       visible table rows. */
    .embedded body {
        padding: 8px;
    }

    .embedded .header {
        display: none;
    }

    .embedded .kpi-grid {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(100px, 1fr)
            );
        gap: 6px;
        margin-bottom: 8px;
    }

    .embedded .kpi {
        padding: 6px 8px;
        border-radius: 8px;
    }

    .embedded .kpi-label {
        font-size: 9px;
        margin-bottom: 2px;
    }

    .embedded .kpi-value {
        font-size: 14px;
    }

    .embedded .card {
        padding: 8px;
        box-shadow: none;
    }

    .embedded .card h2 {
        display: none;
    }

    .embedded .table-controls {
        margin-top: 0;
        margin-bottom: 4px;
    }

    .embedded table {
        margin-top: 0;
        font-size: 12px;
        min-width: 1500px;
    }

    .embedded th {
        padding: 5px 6px;
    }

    .embedded td {
        padding: 4px 6px;
    }

    .embedded .note {
        display: none;
    }

    @media (max-width: 1400px) {
        .kpi-grid {
            grid-template-columns:
                repeat(
                    4,
                    minmax(0, 1fr)
                );
        }
    }

    @media (max-width: 900px) {
        body {
            padding: 14px;
        }

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

        table {
            font-size: 13px;
        }
    }

    @media (max-width: 520px) {
        .kpi-grid {
            grid-template-columns: 1fr;
        }
    }



    :root {
        --gold: #FFD700; --brown: #6D4C41; --green: #2ECC71; --dark: #2C3E50;
        --red: #C0392B; --muted: #7F8C8D; --surface: #FFFFFF;
        --background: #F6F4EF; --border: #E5E0D8;
    }
    * { box-sizing: border-box; }
    body {
        font-family: Arial, sans-serif; background: var(--background);
        color: var(--dark); margin: 0; padding: 24px;
    }
    .cotchart-container { max-width: 1100px; margin: 0 auto; }
    .back-link {
        display: inline-block; margin-bottom: 14px; color: var(--brown);
        text-decoration: none; font-size: 14px;
    }
    .back-link:hover { text-decoration: underline; }
    h1 { margin: 0 0 4px; font-size: 28px; }
    .subtitle { color: var(--brown); font-size: 15px; margin-bottom: 20px; }
    .card {
        background: var(--surface); border-radius: 12px; padding: 18px 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 18px;
    }
    .card h2 { margin-top: 0; font-size: 17px; }
    .note { font-size: 12px; color: #777; margin-top: 10px; line-height: 1.5; }
    .method-ref {
        font-size: 12.5px;
        color: var(--dark);
        background: var(--background);
        border-left: 3px solid var(--gold);
        border-radius: 4px;
        padding: 10px 14px;
        margin-top: 12px;
        line-height: 1.6;
    }
    .method-ref a { color: var(--brown); }
    .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }
    .stat {
        background: var(--background);
        border-radius: 8px;
        padding: 8px 12px;
    }
    .stat-label {
        font-size: 11px;
        color: var(--brown);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 4px;
    }
    .stat-value {
        font-size: 16px;
        font-weight: 700;
    }
    .overlay-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }
    .overlay-item {
        background: var(--background);
        border-radius: 8px;
        padding: 8px 12px;
    }
    .overlay-label {
        font-size: 11px;
        color: var(--brown);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 4px;
    }
    .overlay-badge {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 6px;
        background: var(--border);
        color: var(--dark);
    }
    .overlay-badge.badge-bullish { background: rgba(46, 204, 113, 0.18); color: #1E8449; }
    .overlay-badge.badge-bearish { background: rgba(192, 57, 43, 0.15); color: var(--red); }
    .overlay-badge.badge-info { background: var(--border); color: var(--dark); }