/**
 * Calculix - assets/calculix.css
 * Stiluri comune pentru toate calculatoarele (v2.1).
 * Nu contine stiluri specifice unui singur calculator.
 *
 * Design: incredere + claritate. Navy profund, albastru electric ca accent,
 * cifre tabulare, spatiere generoasa, umbre stratificate discrete.
 */

/* == RESET & TOKENS ======================================================== */
.cx-wrap *,
.cx-wrap *::before,
.cx-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.cx-wrap {
    --cx-blue:        #2563EB;
    --cx-blue-hover:  #1D4ED8;
    --cx-blue-dark:   #0F2A4A;
    --cx-blue-mid:    #93C5FD;
    --cx-blue-light:  #DBEAFE;
    --cx-blue-pale:   #EFF6FF;
    --cx-green:       #059669;
    --cx-green-light: #D1FAE5;
    --cx-red:         #DC2626;
    --cx-red-light:   #FEE2E2;
    --cx-orange:      #F59E0B;
    --cx-orange-light:#FEF3C7;
    --cx-text:        #0B1220;
    --cx-text-mid:    #334155;
    --cx-text-muted:  #64748B;
    --cx-border:      #E2E8F0;
    --cx-border-soft: #EDF2F7;
    --cx-bg:          #F8FAFC;
    --cx-white:       #ffffff;
    --cx-radius-sm:   8px;
    --cx-radius-md:   12px;
    --cx-radius-lg:   16px;
    --cx-shadow:      0 1px 2px rgba(15,42,74,.06), 0 1px 3px rgba(15,42,74,.08);
    --cx-shadow-md:   0 2px 4px rgba(15,42,74,.05), 0 8px 24px rgba(15,42,74,.10);
    --cx-shadow-lg:   0 4px 8px rgba(15,42,74,.06), 0 16px 40px rgba(15,42,74,.14);
    --cx-ring:        0 0 0 3px rgba(37,99,235,.16);

    font-family: inherit;
    font-size: inherit;
    color: var(--cx-text);
    line-height: 1.55;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Cifrele se aliniaza vertical in tabele si rezultate */
.cx-wrap input,
.cx-rr-val,
.cx-result-net-value,
.cx-history-val {
    font-variant-numeric: tabular-nums;
}

/* == HEADER ================================================================ */
.cx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.cx-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cx-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--cx-blue-dark);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.cx-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cx-green-light);
    color: #065F46;
    border: 1px solid #A7F3D0;
    border-radius: 999px;
    padding: 4px 12px 4px 9px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.cx-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cx-green);
    box-shadow: 0 0 0 3px rgba(5,150,105,.18);
    flex-shrink: 0;
}

/* == BODY LAYOUT =========================================================== */
.cx-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 860px) {
    .cx-body { grid-template-columns: 1fr; }
}

/* == INPUTS COL ============================================================ */
.cx-inputs-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--cx-white);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-lg);
    padding: 20px;
    box-shadow: var(--cx-shadow);
}

/* == CAMP INPUT ============================================================ */
.cx-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cx-field label {
    font-size: 13px;
    font-weight: 650;
    color: var(--cx-text-mid);
    letter-spacing: 0.005em;
}
.cx-field-hint {
    font-size: 11.5px;
    color: var(--cx-text-muted);
    line-height: 1.5;
}
.cx-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.cx-input-wrap input[type="number"],
.cx-input-wrap input[type="text"],
.cx-input-wrap input[type="email"],
.cx-input-wrap input[type="date"] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--cx-text);
    background: var(--cx-white);
    transition: border-color .15s ease, box-shadow .15s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}
.cx-input-wrap input[type="number"],
.cx-input-wrap input[type="text"],
.cx-input-wrap input[type="email"] {
    padding-right: 52px;
}
.cx-input-wrap input[type="number"]::-webkit-inner-spin-button,
.cx-input-wrap input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.cx-input-wrap input:hover { border-color: #CBD5E1; }
.cx-input-wrap input:focus {
    outline: none;
    border-color: var(--cx-blue);
    box-shadow: var(--cx-ring);
}
.cx-unit {
    position: absolute;
    right: 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cx-text-muted);
    background: var(--cx-bg);
    border: 1px solid var(--cx-border-soft);
    border-radius: 6px;
    padding: 2px 7px;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.02em;
}

/* Select */
.cx-input-wrap select {
    width: 100%;
    padding: 11px 38px 11px 14px;
    border: 1.5px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    font-size: 14px;
    font-weight: 550;
    color: var(--cx-text);
    background-color: var(--cx-white) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 12px 8px !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cx-input-wrap select:hover { border-color: #CBD5E1; }
.cx-input-wrap select:focus {
    outline: none;
    border-color: var(--cx-blue);
    box-shadow: var(--cx-ring);
}

/* Radio group (semestre etc.) - stil comun */
.cx-radio-group { display: flex; gap: 8px; }
.cx-radio-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--cx-text-mid);
    background: var(--cx-white);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cx-radio-label:hover { border-color: var(--cx-blue-mid); }
.cx-radio-label:has(input:checked) {
    border-color: var(--cx-blue);
    background: var(--cx-blue-pale);
    box-shadow: inset 0 0 0 1px var(--cx-blue);
}
.cx-radio-label input[type="radio"] {
    accent-color: var(--cx-blue);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}
.cx-radio-label small {
    display: block;
    color: var(--cx-text-muted);
    font-size: 11px;
    font-weight: 500;
}

/* Checkbox-uri (optiuni speciale) - stil comun */
.cx-checkboxes { gap: 8px; }
.cx-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 550;
    color: var(--cx-text-mid);
    cursor: pointer;
    line-height: 1.5;
    border: 1.5px solid var(--cx-border-soft);
    border-radius: var(--cx-radius-sm);
    padding: 10px 12px;
    background: var(--cx-bg);
    transition: border-color .15s ease, background .15s ease;
}
.cx-checkbox-label:hover { border-color: var(--cx-blue-mid); background: var(--cx-white); }
.cx-checkbox-label:has(input:checked) {
    border-color: var(--cx-blue);
    background: var(--cx-blue-pale);
}
.cx-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--cx-blue);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* == ADVANCED (details) ==================================================== */
.cx-advanced {
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md);
    overflow: hidden;
    background: var(--cx-white);
}
.cx-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    color: var(--cx-text-mid);
    background: var(--cx-bg);
    user-select: none;
    list-style: none;
    gap: 8px;
    transition: background .15s ease;
}
.cx-advanced-toggle:hover { background: var(--cx-border-soft); }
.cx-advanced-toggle::-webkit-details-marker { display: none; }
.cx-advanced-toggle::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 1.8px solid var(--cx-text-muted);
    border-bottom: 1.8px solid var(--cx-text-muted);
    transform: rotate(45deg) translateY(-2px);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform .2s ease;
}
details[open] .cx-advanced-toggle::after {
    transform: rotate(225deg) translateY(-2px);
}
.cx-advanced-hint {
    font-size: 11px;
    font-weight: 450;
    color: var(--cx-text-muted);
    margin-left: 6px;
}
.cx-advanced-body {
    padding: 14px;
    background: var(--cx-white);
    border-top: 1px solid var(--cx-border);
}
.cx-advanced-info {
    font-size: 12px;
    color: var(--cx-text-muted);
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Grid campuri avansate */
.cx-adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.cx-adv-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cx-text-muted);
    margin-bottom: 4px;
}
.cx-adv-field input,
.cx-adv-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    font-size: 13px;
    color: var(--cx-text);
    background: var(--cx-white);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cx-adv-field select {
    padding-right: 32px;
    background-color: var(--cx-white) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 8px !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
.cx-adv-field input:focus,
.cx-adv-field select:focus {
    outline: none;
    border-color: var(--cx-blue);
    box-shadow: var(--cx-ring);
}

.cx-reset-btn {
    margin-top: 12px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--cx-text-muted);
    cursor: pointer;
    transition: all .15s;
}
.cx-reset-btn:hover {
    background: var(--cx-bg);
    border-color: var(--cx-blue-mid);
    color: var(--cx-blue);
}

/* == RESULTS COL =========================================================== */
.cx-results-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 861px) {
    .cx-results-col {
        position: sticky;
        top: 110px;
    }
}

/* == RESULT PANEL ========================================================== */
.cx-result-panel {
    background: var(--cx-white);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-lg);
    padding: 20px;
    box-shadow: var(--cx-shadow-md);
}

/* Net box - valoarea principala */
.cx-result-net-box {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 160% at 85% -20%, rgba(37,99,235,.55) 0%, rgba(37,99,235,0) 55%),
        linear-gradient(135deg, var(--cx-blue-dark) 0%, #16437A 60%, #1D4ED8 100%);
    border-radius: var(--cx-radius-md);
    padding: 18px 20px 16px;
    margin-bottom: 14px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.cx-result-net-label {
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255,255,255,.72);
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 5px;
}
.cx-result-net-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--cx-white);
    letter-spacing: -0.02em;
    line-height: 1.15;
    transition: opacity .2s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.cx-result-net-value.cx-updated { animation: cxPulse .35s ease; }
.cx-result-net-sub {
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin-top: 4px;
}

@keyframes cxPulse {
    0%   { opacity: .4; transform: scale(.97); }
    100% { opacity: 1;  transform: scale(1); }
}

/* == TABS VIZUALIZARE ====================================================== */
.cx-viz-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: var(--cx-bg);
    border: 1px solid var(--cx-border-soft);
    border-radius: var(--cx-radius-sm);
    padding: 4px;
}
.cx-viz-tab {
    flex: 1;
    padding: 8px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--cx-text-muted);
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.cx-viz-tab.active {
    background: var(--cx-white);
    color: var(--cx-blue);
    box-shadow: var(--cx-shadow);
}
.cx-viz-tab:hover:not(.active) {
    color: var(--cx-text);
    background: rgba(255,255,255,.6);
}
.cx-viz-tab:focus-visible {
    outline: none;
    box-shadow: var(--cx-ring);
}

.cx-viz-panel { display: none; }
.cx-viz-panel.active { display: block; animation: cxFadeIn .18s ease; }
@keyframes cxFadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

/* == TABEL REZULTATE ======================================================= */
.cx-result-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cx-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 6px;
    border-bottom: 1px solid var(--cx-border-soft);
    gap: 10px;
    transition: background .1s ease;
}
.cx-result-row:hover { background: var(--cx-bg); }
.cx-result-row:last-child { border-bottom: none; }
.cx-rr-label {
    font-size: 13px;
    color: var(--cx-text-mid);
    flex: 1;
    line-height: 1.4;
}
.cx-rr-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--cx-text);
    text-align: right;
    white-space: nowrap;
}
.cx-rr-val.cx-updated { animation: cxPulse .3s ease; }
.cx-rr-val.cx-col-green { color: var(--cx-green); }
.cx-rr-val.cx-col-red   { color: var(--cx-red); }
.cx-rr-val.cx-col-muted { color: var(--cx-text-muted); font-weight: 450; }

/* == GRAFICE =============================================================== */
.cx-chart-pie,
.cx-chart-bar { max-width: 100%; }

/* == ISTORIC =============================================================== */
.cx-history {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--cx-border);
}
.cx-history-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--cx-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cx-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--cx-border-soft);
    font-size: 12px;
}
.cx-history-item:last-child { border-bottom: none; }
.cx-history-ts    { color: var(--cx-text-muted); white-space: nowrap; }
.cx-history-label { flex: 1; color: var(--cx-text-mid); }
.cx-history-val   { font-weight: 700; color: var(--cx-blue); white-space: nowrap; }

/* == DISCLAIMER ============================================================ */
.cx-disclaimer {
    font-size: 11.5px;
    color: var(--cx-text-muted);
    text-align: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cx-border-soft);
    line-height: 1.6;
}

/* == INFO BANNER (semestru etc.) =========================================== */
.cx-semestru-info:empty { display: none; }

/* == EXPORT BAR ============================================================ */
.cx-export-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cx-export-btn {
    flex: 1;
    min-width: 110px;
    padding: 10px 12px;
    background: var(--cx-white);
    border: 1.5px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    font-size: 12.5px;
    font-weight: 650;
    color: var(--cx-text-mid);
    cursor: pointer;
    transition: all .15s ease;
    text-align: center;
    white-space: nowrap;
    box-shadow: var(--cx-shadow);
}
.cx-export-btn:hover {
    background: var(--cx-blue-pale);
    border-color: var(--cx-blue-mid);
    color: var(--cx-blue);
    transform: translateY(-1px);
    box-shadow: var(--cx-shadow-md);
}
.cx-export-btn:active { transform: translateY(0); box-shadow: var(--cx-shadow); }
.cx-export-btn:focus-visible { outline: none; box-shadow: var(--cx-ring); }

/* == MODAL EMAIL =========================================================== */
.cx-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11,18,32,.55);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}
.cx-modal-box {
    background: var(--cx-white);
    border-radius: var(--cx-radius-lg);
    padding: 28px;
    max-width: 440px;
    width: 100%;
    position: relative;
    box-shadow: var(--cx-shadow-lg);
    animation: cxModalIn .2s ease;
}
@keyframes cxModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.cx-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--cx-bg);
    border: none;
    font-size: 15px;
    color: var(--cx-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 7px 9px;
    border-radius: 8px;
    transition: all .12s;
}
.cx-modal-close:hover { color: var(--cx-text); background: var(--cx-border-soft); }
.cx-modal-title {
    font-size: 17px;
    font-weight: 750;
    color: var(--cx-blue-dark);
    margin-bottom: 16px;
}
.cx-gdpr-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: var(--cx-text-mid);
    line-height: 1.6;
    margin: 12px 0 16px;
    cursor: pointer;
}
.cx-gdpr-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--cx-blue);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.cx-gdpr-label a { color: var(--cx-blue); }
.cx-email-send-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(180deg, var(--cx-blue) 0%, var(--cx-blue-hover) 100%);
    color: var(--cx-white);
    border: none;
    border-radius: var(--cx-radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
    box-shadow: 0 2px 6px rgba(37,99,235,.35);
}
.cx-email-send-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cx-email-send-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.cx-modal-msg {
    font-size: 13px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--cx-radius-sm);
    display: none;
}
.cx-modal-msg:not(:empty) { display: block; }
.cx-msg-success { background: var(--cx-green-light); color: #065F46; }
.cx-msg-error   { background: var(--cx-red-light);   color: #991B1B; }

/* == SECTIUNEA EXPLICATII ================================================== */
.cx-explainer {
    margin-top: 40px;
    padding-top: 8px;
}
.cx-expl-section {
    margin-bottom: 32px;
}
.cx-expl-title {
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--cx-blue-dark);
    margin-bottom: 12px;
    letter-spacing: -0.015em;
    line-height: 1.3;
    padding-left: 14px;
    border-left: 4px solid var(--cx-blue);
}
.cx-expl-body {
    font-size: 1rem;
    color: var(--cx-text-mid);
    line-height: 1.85;
}
.cx-expl-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    align-items: stretch;
}
/* flex (nu grid) deliberat, 12.07.2026: cu grid auto-fill, un rand incomplet
   (ultimul rand cu mai putine carduri decat coloanele detectate) lasa
   coloane goale, fiindca grid-template-columns e fix pe TOATE randurile.
   Cu flex-wrap + fara max-width pe .cx-expl-card, cardurile ramase pe
   ultimul rand cresc (flex-grow) sa umple spatiul liber.
   Pentru cardul cu mult mai mult text decat fratii lui: flex-basis dublu
   (mai lat, nu mai inalt), ca sa nu forteze tot randul la o inaltime mare
   cu spatiu gol in cardurile scurte de langa el. */
.cx-expl-card.cx-expl-card-wide {
    flex-basis: 614px;
}
.cx-expl-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 300px;
    background: var(--cx-white);
    border: 1px solid var(--cx-border);
    border-top: 3px solid var(--cx-blue);
    border-radius: var(--cx-radius-md);
    padding: 16px 18px;
    box-shadow: var(--cx-shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}
.cx-expl-card:hover {
    box-shadow: var(--cx-shadow-md);
    transform: translateY(-2px);
}
.cx-expl-card-title {
    font-size: 0.92rem;
    font-weight: 750;
    color: var(--cx-blue-dark);
    margin-bottom: 7px;
    line-height: 1.35;
}
.cx-expl-card p {
    font-size: 0.9rem;
    color: var(--cx-text-mid);
    line-height: 1.65;
}
.cx-expl-list { padding-left: 20px; }
.cx-expl-list li {
    font-size: 1rem;
    color: var(--cx-text-mid);
    line-height: 1.8;
    margin-bottom: 8px;
}
.cx-expl-list li::marker { color: var(--cx-blue); }
.cx-expl-list a { color: var(--cx-blue); text-decoration: none; border-bottom: 1px solid var(--cx-blue-light); }
.cx-expl-list a:hover { border-bottom-color: var(--cx-blue); }

/* == DASHBOARD WIDGET ====================================================== */
.cx-dashboard-stats {
    background: var(--cx-blue-pale);
    border: 1px solid var(--cx-blue-light);
    border-radius: var(--cx-radius-md);
    padding: 16px;
    margin-bottom: 16px;
}
.cx-dashboard-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--cx-blue-dark);
    margin-bottom: 12px;
}
.cx-dashboard-top-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--cx-blue-light);
    font-size: 13px;
}
.cx-dashboard-top-count { font-weight: 700; color: var(--cx-blue); }
.cx-dashboard-cat { margin-bottom: 10px; }
.cx-dashboard-cat-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--cx-blue-dark);
    margin-bottom: 6px;
}
.cx-dashboard-cat-items { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-dashboard-cat-item {
    background: var(--cx-bg);
    border: 1px solid var(--cx-border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--cx-text-mid);
}

/* == PRINT ================================================================= */
@media print {
    /* Antet tiparit: titlu calculator + sursa + data, injectat de JS
       (cxInitPrintHeader), ascuns pe ecran, vizibil doar la tiparire. */
    .cx-print-header {
        display: block !important;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 2px solid #0F2A4A;
    }
    .cx-print-header-brand { font-size: 15px; font-weight: 800; color: #0F2A4A; }
    .cx-print-header-meta { font-size: 11px; color: #555; margin-top: 2px; }

    .cx-export-bar,
    .cx-modal,
    .cx-viz-tabs,
    .cx-explainer,
    .cx-history {
        display: none !important;
    }
    .cx-body { display: block; }

    /* Inputurile raman vizibile la tiparire (nu doar rezultatul gol) — cine
       citeste o pagina tiparita/PDF trebuie sa vada si pe ce date s-a bazat
       calculul, nu doar rezultatul final. Curatam insa aspectul de formular:
       fara chenare/fundal de input, doar eticheta + valoarea introdusa. */
    .cx-inputs-col {
        display: block !important;
        border: 1px solid #ccc;
        box-shadow: none;
        background: transparent;
        border-radius: 4px;
        padding: 12px 14px;
        margin-bottom: 14px;
        page-break-inside: avoid;
    }
    .cx-inputs-col::before {
        content: "Date introduse";
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #555;
        margin-bottom: 8px;
    }
    .cx-field { gap: 2px; margin-bottom: 6px; }
    .cx-field-hint { display: none; }
    .cx-field label, .cx-radio-group label, .cx-checkbox-label { font-size: 11.5px; color: #444 !important; }
    .cx-input-wrap input,
    .cx-input-wrap select {
        border: none !important;
        background: transparent !important;
        -webkit-appearance: none;
        appearance: none;
        padding: 0 !important;
        font-weight: 700;
        color: #000 !important;
    }
    .cx-radio-group { gap: 12px; }
    /* Sectiunea de parametri avansati (details.cx-advanced): fortam
       continutul vizibil la tiparire, indiferent daca era extins pe ecran,
       si ascundem doar chevronul/eticheta "editabile" a butonului toggle. */
    .cx-advanced { border: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #ccc; }
    .cx-advanced-toggle { list-style: none; font-size: 11px; font-weight: 700; color: #555 !important; }
    .cx-advanced-toggle::-webkit-details-marker { display: none; }
    .cx-advanced-hint, .cx-advanced-info { display: none; }
    .cx-advanced-body { display: block !important; }

    .cx-results-col { width: 100%; position: static; }
    .cx-result-panel { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
    .cx-result-net-box {
        background: #f0f4f8 !important;
        box-shadow: none;
    }
    .cx-result-net-label, .cx-result-net-sub { color: #333 !important; }
    .cx-result-net-value { color: #000 !important; text-shadow: none; }
    .cx-wrap { font-size: 13px; }

    .cx-print-footer {
        display: block !important;
        margin-top: 14px;
        font-size: 10px;
        color: #777;
        border-top: 1px solid #ccc;
        padding-top: 8px;
    }
}
.cx-print-header, .cx-print-footer { display: none; }

/* == RESPONSIVE ============================================================ */
@media (max-width: 480px) {
    .cx-title { font-size: 17px; }
    .cx-inputs-col { padding: 14px; }
    .cx-result-panel { padding: 14px; }
    .cx-result-net-value { font-size: 26px; }
    .cx-export-bar { gap: 6px; }
    .cx-export-btn { font-size: 11.5px; padding: 9px 8px; min-width: calc(50% - 6px); }
    .cx-adv-grid { grid-template-columns: 1fr 1fr; }
    .cx-modal-box { padding: 20px 16px; }
    .cx-radio-group { flex-direction: column; }
}

/* == ACCESIBILITATE ======================================================== */
@media (prefers-reduced-motion: reduce) {
    .cx-wrap *,
    .cx-wrap *::before,
    .cx-wrap *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.cx-wrap,
.cx-wrap * {
    font-family: inherit !important;
}

/* == COMPARATOR OFERTE (energie electrică / gaze) ========================== */
.cx-cmp-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cx-cmp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md);
    background: var(--cx-white);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.cx-cmp-card:hover { box-shadow: var(--cx-shadow); }

.cx-cmp-card.cx-cmp-cheapest {
    border-color: var(--cx-green);
    background: var(--cx-green-light);
}

.cx-cmp-rank {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cx-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--cx-text-muted);
}

.cx-cmp-cheapest .cx-cmp-rank {
    background: var(--cx-green);
    color: var(--cx-white);
}

.cx-cmp-main { flex: 1 1 auto; min-width: 0; }

.cx-cmp-name {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cx-cmp-offer { font-weight: 500; color: var(--cx-text-mid); }

.cx-cmp-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cx-green);
    color: var(--cx-white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.cx-cmp-detail {
    font-size: 12px;
    color: var(--cx-text-muted);
    margin-top: 2px;
}

.cx-cmp-estimat {
    color: var(--cx-orange);
    font-weight: 700;
    cursor: help;
}

.cx-cmp-savings {
    font-size: 12px;
    color: var(--cx-green);
    font-weight: 600;
    margin-top: 4px;
}

.cx-cmp-price {
    flex: 0 0 auto;
    text-align: right;
}

.cx-cmp-total {
    font-size: 17px;
    font-weight: 800;
    color: var(--cx-blue);
    font-variant-numeric: tabular-nums;
}

.cx-cmp-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--cx-blue);
    text-decoration: none;
}

.cx-cmp-link:hover { text-decoration: underline; }

.cx-cmp-comert {
    margin-top: 16px;
}

.cx-cmp-comert-title {
    font-size: 12px;
    color: var(--cx-text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
}

.cx-cmp-comert-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--cx-border-soft);
    font-size: 12px;
}

.cx-cmp-comert-item:last-child { border-bottom: none; }

.cx-cmp-comert-name { font-weight: 600; }
.cx-cmp-comert-price { color: var(--cx-text-mid); }
.cx-cmp-comert-item a { color: var(--cx-blue); text-decoration: none; margin-left: auto; }
.cx-cmp-comert-item a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .cx-cmp-card { flex-wrap: wrap; }
    .cx-cmp-price { text-align: left; margin-left: 42px; }
}

.cx-cmp-anre-note {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--cx-blue-pale);
    border: 1px solid var(--cx-blue-light);
    border-radius: var(--cx-radius-md);
    font-size: 12px;
    line-height: 1.6;
    color: var(--cx-text-mid);
}

.cx-cmp-anre-note a {
    color: var(--cx-blue);
    font-weight: 600;
    text-decoration: none;
}

.cx-cmp-anre-note a:hover { text-decoration: underline; }

.cx-luni-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: -4px;
    margin-bottom: 16px;
}

.cx-luna-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cx-luna-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cx-text-muted);
}

.cx-luna-field input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.cx-luna-field input:focus {
    outline: none;
    border-color: var(--cx-blue);
    box-shadow: var(--cx-ring);
}

.cx-cmp-guarantee {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    font-weight: 600;
}

.cx-cmp-guarantee-ok { color: var(--cx-green); }
.cx-cmp-guarantee-warn { color: var(--cx-orange); }
.cx-cmp-guarantee-capped { color: var(--cx-blue); }

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