/* Original design: Carola Jiménez, dragons-wiki.com */
.dw-ecc.dw-ecc {
        --bg: #111b2b;
        --card: #1a2b3b;
        --edge: #41566a;
        --gold: #e9bd69;
        --text: #f4f2e9;
        --muted: #bdc8d1;
        box-sizing: border-box;
        max-width: 1200px;
        margin: 4px auto;
        padding: 28px;
        border: 1px solid #856c46;
        border-radius: 20px;
        background: linear-gradient(145deg,#1c3040,#101a29 75%);
        color: var(--text);
        font: 16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;
        box-shadow: 0 24px 60px #0005
    }

        .dw-ecc.dw-ecc * {
            box-sizing: border-box
        }

        .dw-ecc.dw-ecc .ecc-head {
            margin-bottom: 26px
        }

        .dw-ecc.dw-ecc .ecc-kicker {
            color: var(--gold);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .16em
        }

        .dw-ecc.dw-ecc h2 {
            font-size: clamp(28px,4vw,42px);
            line-height: 1.1;
            margin: 8px 0 9px;
            color: #fff
        }

        .dw-ecc.dw-ecc p {
            margin: 0
        }

        .dw-ecc.dw-ecc .ecc-head p, .dw-ecc.dw-ecc .ecc-hint, .dw-ecc.dw-ecc .ecc-note, .dw-ecc.dw-ecc footer {
            color: var(--muted)
        }

        .dw-ecc.dw-ecc .ecc-grid {
            display: grid;
            grid-template-columns: minmax(270px,370px) minmax(0,1fr);
            gap: 20px
        }

        .dw-ecc.dw-ecc .ecc-info, .dw-ecc.dw-ecc .ecc-panel {
            border: 1px solid var(--edge);
            border-radius: 14px;
            background: #172638;
            padding: 20px
        }

        .dw-ecc.dw-ecc label {
            display: block;
            margin-bottom: 16px;
            font-size: 14px;
            font-weight: 600
        }

        .dw-ecc.dw-ecc input, .dw-ecc.dw-ecc select {
            display: block;
            width: 100%;
            margin-top: 6px;
            min-height: 46px;
            padding: 10px 12px;
            border: 1px solid #708399;
            border-radius: 8px;
            background: #0d1a29;
            color: #fff;
            font: inherit
        }

            .dw-ecc.dw-ecc input:focus, .dw-ecc.dw-ecc select:focus {
                outline: 2px solid var(--gold);
                outline-offset: 2px
            }

        .dw-ecc.dw-ecc .ecc-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        .dw-ecc.dw-ecc .ecc-hint {
            font-size: 13px;
            min-height: 21px
        }

            .dw-ecc.dw-ecc .ecc-hint.ecc-error {
                color: #ffb7a3
            }

        .dw-ecc.dw-ecc .ecc-metrics {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 10px
        }

            .dw-ecc.dw-ecc .ecc-metrics > div {
                min-width: 0;
                padding: 13px;
                border: 1px solid #394d60;
                border-radius: 9px;
                background: #112030
            }

            .dw-ecc.dw-ecc .ecc-metrics small, .dw-ecc.dw-ecc .ecc-metrics span {
                display: block;
                color: var(--muted);
                font-size: 12px
            }

            .dw-ecc.dw-ecc .ecc-metrics strong {
                display: block;
                color: var(--gold);
                font-size: 24px;
                overflow-wrap: anywhere
            }

        .dw-ecc.dw-ecc .ecc-note {
            font-size: 12px;
            margin: 18px 0 9px
        }

        .dw-ecc.dw-ecc .ecc-table-wrap {
            max-height: 350px;
            overflow: auto;
            border: 1px solid var(--edge);
            border-radius: 8px
        }

        .dw-ecc.dw-ecc table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            font-variant-numeric: tabular-nums
        }

        .dw-ecc.dw-ecc th {
            position: sticky;
            top: 0;
            background: #27384a;
            text-align: right;
            color: var(--gold)
        }

            .dw-ecc.dw-ecc td:first-child, .dw-ecc.dw-ecc th:first-child {
                text-align: left
            }

        .dw-ecc.dw-ecc td, .dw-ecc.dw-ecc th {
            padding: 9px 12px;
            border-bottom: 1px solid #35495a
        }

        .dw-ecc.dw-ecc tbody tr:nth-child(2n) {
            background: #1d3041
        }

        .dw-ecc.dw-ecc .ecc-info {
            margin-top: 18px
        }

        .dw-ecc.dw-ecc summary {
            cursor: pointer;
            color: var(--gold);
            font-weight: 700
        }

        .dw-ecc.dw-ecc .ecc-info div {
            white-space: pre-wrap;
            margin-top: 12px;
            color: var(--muted)
        }

        .dw-ecc.dw-ecc footer {
            font-size: 12px;
            margin-top: 15px
        }

    @media(max-width:760px) {
        .dw-ecc.dw-ecc {
            padding: 16px;
            margin: 12px auto
        }

            .dw-ecc.dw-ecc .ecc-grid {
                grid-template-columns: 1fr
            }

            .dw-ecc.dw-ecc .ecc-row {
                grid-template-columns: 1fr 1fr
            }

            .dw-ecc.dw-ecc .ecc-panel {
                padding: 16px
            }
    }

    .dw-ecc.dw-ecc .ecc-visual {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 0 0 20px;
        padding: 12px;
        background: #172638;
        border: 1px solid #41566a;
        border-radius: 14px;
        min-height: 170px
    }

        .dw-ecc.dw-ecc .ecc-visual img {
            display: block;
            width: min(46%,150px);
            max-height: 220px;
            object-fit: contain;
            border-radius: 9px;
            background: #101c29
        }

        .dw-ecc.dw-ecc .ecc-visual figcaption {
            font-size: clamp(17px,2.4vw,26px);
            font-weight: 700;
            color: #e9bd69
        }

    .dw-ecc.dw-ecc .ecc-profile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: -5px 0 17px
    }

        .dw-ecc.dw-ecc .ecc-profile-actions button {
            padding: 8px 10px;
            border: 1px solid #8f7855;
            border-radius: 7px;
            background: #304355;
            color: #fff;
            font: 600 12px/1.3 system-ui,sans-serif;
            cursor: pointer
        }

            .dw-ecc.dw-ecc .ecc-profile-actions button:hover {
                background: #485e70
            }

            .dw-ecc.dw-ecc .ecc-profile-actions button:disabled {
                opacity: .45;
                cursor: not-allowed
            }

    .dw-ecc.dw-ecc [hidden] {
        display: none !important
    }

    .dw-ecc.dw-ecc .ecc-profile-status {
        margin: -8px 0 14px;
        color: #bdc8d1;
        font-size: 12px;
        min-height: 18px
    }

    .dw-ecc.dw-ecc .ecc-table-wrap table {
        table-layout: fixed;
        min-width: 420px
    }

        .dw-ecc.dw-ecc .ecc-table-wrap table td:first-child, .dw-ecc.dw-ecc .ecc-table-wrap table th:first-child {
            text-align: left !important
        }

        .dw-ecc.dw-ecc .ecc-table-wrap table td:nth-child(n+2), .dw-ecc.dw-ecc .ecc-table-wrap table th:nth-child(n+2) {
            text-align: left !important;
            white-space: nowrap
        }

    @media(max-width:560px) {
        .dw-ecc.dw-ecc .ecc-visual {
            display: block;
            text-align: center
        }

            .dw-ecc.dw-ecc .ecc-visual img {
                width: 100%;
                max-height: 230px;
                margin: 0 auto 10px
            }
    }

/* Keep wide result tables inside their scroll area on mobile. */
.dw-ecc.dw-ecc .ecc-panel { min-width: 0; }
.dw-ecc.dw-ecc .ecc-visual { margin-inline: 0; }