/* ---- Investments Section ---- */
.panel-investments-total {
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.panel-investments-total-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-family: neue-haas-grot-text-roman, sans-serif;
}
.panel-investments-total-value {
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    font-family: pp-neue-machina-plain-regular, sans-serif;
}

/* Tabs: Short / Long stake (mobile only; hidden on PC) */
.panel-investments-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.panel-investments-tab-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: var(--panel-bg-body);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: pp-neue-machina-plain-regular, sans-serif;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}
.panel-investments-tab-btn-main {
    display: block;
}
.panel-investments-tab-btn-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
}
.panel-investments-tab-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
}
.panel-investments-tab-btn.is-active {
    background: #ffffff;
    color: var(--panel-text-inverse);
    border-color: #ffffff;
}

.panel-investments-block {
    padding: 24px 24px 24px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.panel-investments-block + .panel-investments-block {
    margin-top: 24px;
}
.panel-investments-blocks-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.panel-investments-blocks-row .panel-investments-block + .panel-investments-block {
    margin-top: 0;
}
.panel-investments-blocks-row .panel-investments-block {
    flex: 1 1 auto;
    min-width: 0;
}
.panel-investments-block-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 0 8px 0;
}
.panel-investments-block-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    font-family: pp-neue-machina-plain-regular, sans-serif;
    margin: 0;
}
.panel-investments-block-title-main {
    display: block;
    margin-bottom: 15px;
}
.panel-investments-block-title-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #ffffff;
    font-family: neue-haas-grot-text-roman, sans-serif;
    opacity: 0.85;
}

.panel-investments-more-info-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--panel-text-inverse);
    background: #ffffff;
    color: var(--panel-text-inverse);
    font-size: 13px;
    font-weight: 600;
    font-family: neue-haas-grot-text-roman, sans-serif;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.panel-investments-more-info-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--panel-text-inverse);
}
.panel-investments-more-info-btn:active {
    background: rgba(255, 255, 255, 0.9);
}
.panel-investments-block-desc {
    font-size: 13px;
    color: #ffffff;
    font-family: neue-haas-grot-text-roman, sans-serif;
    margin: 0 0 24px 0;
    line-height: 1.4;
}

/* Long FLOPP: Term — label on top, value in field */
.panel-investments-term-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.panel-investments-term-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    font-family: neue-haas-grot-text-roman, sans-serif;
}
.panel-investments-term-value-wrap {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    padding: 14px 16px;
}
.panel-investments-term-value {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    font-family: pp-neue-machina-plain-regular, sans-serif;
}

.panel-investments-days-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    min-height: 52px;
}

.panel-investments-days-row input{
    padding: 8px 12px;
    margin-top: auto;
    margin-bottom: auto;
}

/* Edge cell: fixed width, full height (used for days, help button, etc.) */
.panel-investments-edge-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    align-self: stretch;
    min-height: 52px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 50px;
    width: 50px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.panel-investments-edge-cell-full{
    flex: 0 0 100px;
    width: 100px;
}

.panel-investments-edge-cell-full span{
    font-size: 11px;
}

.panel-investments-edge-cell .panel-investments-slider-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.panel-stake-confirm-box.sider-days.no-padding {
    padding: 0 !important;
    margin: 0;                   
}

.panel-investments-confirm-one-height {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-between; 
    padding: 4px 12px;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.panel-investments-income-value.sider-days{
    padding: 0 !important;
}

.panel-investments-confirm-one-height .panel-investments-income-label {
    text-align: left;
}

.panel-investments-confirm-one-height .panel-investments-income-value{
    padding: 0 !important;
}

.panel-investments-confirm-one-height .panel-investments-income-value-wrap {
    justify-content: flex-end;
}

.panel-stake-confirm-box .sider-days  {
    max-height: 56px !important;
    padding: 4px;
    padding-bottom: 8px;
}

.panel-investments-confirm-edge-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    height: 100%;
    min-height: 56px;
}
.panel-investments-slider-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 20px;
    box-sizing: border-box;
}
.panel-investments-slider-wrap .panel-investments-slider {
    flex: 1;
    min-width: 0;
}
/* Edge block in days-row: fixed width, full height */
.panel-investments-days-value-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    align-self: stretch;
    min-height: 52px;
    box-sizing: border-box;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 110px;
    width: 110px;
    overflow: hidden;
}
.panel-investments-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    --fill-pct: 0%;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.panel-investments-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) var(--fill-pct, 0%), rgba(255, 255, 255, 0.1) var(--fill-pct, 0%));
}
.panel-investments-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) var(--fill-pct, 0%), rgba(255, 255, 255, 0.1) var(--fill-pct, 0%));
}
.panel-investments-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: background 0.2s;
}
.panel-investments-slider::-webkit-slider-thumb:hover {
    background: #fff;
}
.panel-investments-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
.panel-investments-slider::-moz-range-thumb:hover {
    background: #fff;
}
.panel-investments-slider-value {
    min-width: 36px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    font-family: neue-haas-grot-text-roman, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* Income row: same style as address-row. Two variants: without edge (main only) / with edge (main + day-box). */
.panel-investments-income-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-top: 24px;
    margin-bottom: 0;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    min-height: 52px;
    overflow: hidden;  
} 
/* Without edge (single income / total): always one row, one line — label left, value right */
.panel-investments-income-row:not(:has(.panel-investments-edge-cell)) {
    flex-wrap: nowrap;
}
.panel-investments-income-row:not(:has(.panel-investments-edge-cell)) .panel-investments-income-main {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.panel-investments-income-row:not(:has(.panel-investments-edge-cell)) .panel-investments-income-label {
    background: rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    flex: 0 1 auto;
    min-height: 52px;
}
.panel-investments-income-row:not(:has(.panel-investments-edge-cell)) .panel-investments-income-value-wrap {
    flex: 1 1 0;
    min-width: 0;
    border-left: none;
    justify-content: flex-end;
}

.panel-investments-income-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    box-sizing: border-box;
}

.panel-investments-income-label {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 20px;
    min-height: 52px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: neue-haas-grot-text-roman, sans-serif;
    word-break: break-word;
    box-sizing: border-box;
}

.panel-investments-income-value-wrap {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 20px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px; 
    box-sizing: border-box;
}
.panel-investments-income-value {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    font-family: pp-neue-machina-plain-regular, sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Single class for value cell: 1 line if fits, else up to 2 lines with small gap */
.panel-investments-cell-value {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    font-family: pp-neue-machina-plain-regular, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
    word-break: break-word;
}

.panel-investments-income-value-pct {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    font-family: neue-haas-grot-text-roman, sans-serif;
    font-variant-numeric: tabular-nums;
}
 
    .panel-investments-income-row {
        flex-wrap: nowrap;
    } 
    .panel-investments-income-label {
        min-height: 0;
        padding: 12px 14px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.55);
        flex: 0 0 auto;
    }
    .panel-investments-income-value-wrap {
        min-height: 0;
        padding: 12px 14px;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
    }
    .panel-investments-income-value-wrap .panel-investments-income-value,
    .panel-investments-income-value-wrap .panel-investments-cell-value {
        text-align: left;
    }
    .panel-investments-income-row .panel-investments-edge-cell {
        padding: 0 6px;
        min-height: 48px;
    }
    /* Single/total row: keep one line on mobile, value right */
    .panel-investments-income-row:not(:has(.panel-investments-edge-cell)) .panel-investments-income-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 10px;
    }
    .panel-investments-income-row:not(:has(.panel-investments-edge-cell)) .panel-investments-income-value-wrap {
        justify-content: flex-end;
        padding: 0 20px;
    }
    .panel-investments-income-row:not(:has(.panel-investments-edge-cell)) .panel-investments-income-value-wrap .panel-investments-income-value,
    .panel-investments-income-row:not(:has(.panel-investments-edge-cell)) .panel-investments-income-value-wrap .panel-investments-cell-value {
        text-align: right;
    }

.panel-investments-deposit-wrap {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: center;
}
.panel-investments-deposit-btn-simple {
    width: 100%;
    padding: 14px 24px;
    border-radius: 10px;
    border: 1px solid var(--panel-text-inverse);
    background: #ffffff;
    color: var(--panel-text-inverse);
    font-size: 14px;
    font-weight: 600;
    font-family: neue-haas-grot-text-roman, sans-serif;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.panel-investments-deposit-btn-simple:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}
.panel-investments-deposit-btn-simple:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.9);
}
.panel-investments-deposit-text {
    font-weight: 600;
}

.panel-investments-errors {
    margin-top: 14px;
}

.panel-investments-errors .panel-status-log {
    margin-bottom: 0;
}

/* Stake confirm modal (short/long): amount, term, income, cancel fee in boxes; white + outline buttons */
.panel-stake-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.panel-stake-confirm-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s;
}
.panel-stake-confirm-modal {
    position: relative;
    max-width: 420px;
    width: 90%;
    padding: 24px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    /* Единый кап для панель-модалок: не выше 750 px и не выше 90vh, со скроллом внутри. */
    max-height: min(750px, 90vh);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.panel-stake-confirm-title {
    font-family: pp-neue-machina-plain-regular, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px 0;
    text-align: center;
}
.panel-stake-confirm-boxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.panel-stake-confirm-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}
.panel-stake-confirm-box-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    font-family: neue-haas-grot-text-roman, sans-serif;
}
.panel-stake-confirm-box-value {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    font-family: neue-haas-grot-text-roman, sans-serif;
}
.panel-stake-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.panel-stake-confirm-btn {
    flex: 1;
    min-width: 120px;
    padding: 8px 14px;
    border: none;
    border-radius: 10px;
    background: #ffffff;
    color: var(--panel-text-inverse);
    font-family: pp-neue-machina-plain-regular, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.panel-stake-confirm-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}
.panel-stake-confirm-cancel-btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
    font-family: pp-neue-machina-plain-regular, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.panel-stake-confirm-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

/* Cancel stake confirmation modal */
.panel-stake-cancel-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.panel-stake-cancel-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s;
}
.panel-stake-cancel-modal {
    position: relative;
    max-width: 400px;
    width: 90%;
    padding: 24px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    max-height: min(750px, 90vh);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.panel-stake-cancel-title {
    font-family: pp-neue-machina-plain-regular, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
    text-align: center;
}
.panel-stake-cancel-text {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    font-family: neue-haas-grot-text-roman, sans-serif;
    margin: 0 0 24px 0;
    text-align: center;
}
.panel-stake-cancel-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.panel-stake-cancel-confirm-btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    background: #ffffff;
    color: var(--panel-text-inverse);
    font-family: pp-neue-machina-plain-regular, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.panel-stake-cancel-confirm-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}
.panel-stake-cancel-cancel-btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
    font-family: pp-neue-machina-plain-regular, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.panel-stake-cancel-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

/* Info Modal */
.panel-investments-info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.panel-investments-info-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.panel-investments-info-modal {
    width: 90%;
    max-width: 600px;
    /* Унифицировано с остальными панель-модалками: не выше 750 px и не выше 90vh. */
    max-height: min(750px, 90vh);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.panel-investments-info-modal-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.panel-investments-info-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    font-family: pp-neue-machina-plain-regular, sans-serif;
    margin: 0;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.panel-investments-info-modal-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    -webkit-overflow-scrolling: touch;
}
.panel-investments-info-modal-scroll::-webkit-scrollbar {
    width: 8px;
}
.panel-investments-info-modal-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
.panel-investments-info-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    min-height: 36px;
}
.panel-investments-info-modal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.panel-investments-info-modal-scroll::-webkit-scrollbar-button,
.panel-investments-info-modal-scroll::-webkit-scrollbar-button:vertical:start,
.panel-investments-info-modal-scroll::-webkit-scrollbar-button:vertical:end {
    display: block;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
}

.panel-investments-info-modal-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    font-family: neue-haas-grot-text-roman, sans-serif;
    margin: 0;
}
.panel-investments-info-modal-close {
    padding: 14px 24px;
    margin: 16px 24px 24px 24px;
    margin-right: auto;
    margin-left: auto;
    max-width: 200px;
    border-radius: 10px;
    border: 1px solid var(--panel-text-inverse);
    background: #ffffff;
    color: var(--panel-text-inverse);
    font-size: 14px;
    font-weight: 600;
    font-family: neue-haas-grot-text-roman, sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease; 
}
.panel-investments-info-modal-close:hover {
    background: rgba(255, 255, 255, 0.95);
}
.panel-investments-info-modal-close:active {
    background: rgba(255, 255, 255, 0.9);
}

/* Stake detail modal — common overlay/modal/body/field/label/value/close in deposit.css; only stake-specific below */
.panel-stake-detail-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.panel-stake-detail-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.panel-stake-detail-section-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
    font-family: neue-haas-grot-text-roman, sans-serif;
}
.panel-stake-detail-section-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.panel-stake-detail-timer {
    font-variant-numeric: tabular-nums;
}
.panel-stake-detail-desc span {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    font-family: neue-haas-grot-text-roman, sans-serif;
}
.panel-stake-detail-cancel-btn {
    display: block;
    width: 100%;
    padding: 12px 24px;
    font-family: pp-neue-machina-plain-regular, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: rgba(220, 38, 38, 0.9);
    background: transparent;
    border: 2px solid rgba(220, 38, 38, 0.6);
    border-radius: 8px;
    cursor: pointer;
    margin-top: 12px;
    margin-bottom: 16px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.panel-stake-detail-cancel-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.panel-stake-detail-cancel-btn:focus-visible {
    outline: 2px solid rgba(220, 38, 38, 0.8);
    outline-offset: 2px;
}
.panel-stake-detail-cancel-btn-wrap {
    margin-top: 16px;
    margin-bottom: 16px;
}

/* PanelModal cancelButton on investments page: destructive (Cancel stake / Yes, cancel) */
.panel-modal-cancel-btn.panel-investments-cancel-destructive {
    color: #ffffff;
    background: #dc2626;
    border-color: #dc2626;
}
.panel-modal-cancel-btn.panel-investments-cancel-destructive:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}
.panel-modal-cancel-btn.panel-investments-cancel-destructive:focus-visible {
    outline: 2px solid rgba(220, 38, 38, 0.9);
    outline-offset: 2px;
}

/* FLOP detail modal: income / phase / stake boxes (content from factory) */
.panel-flop-detail-box {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}
.panel-flop-detail-box:first-child {
    margin-top: 0;
}
.panel-flop-detail-box-income,
.panel-flop-detail-box-phase {
    text-align: center;
}
.panel-flop-detail-box-title {
    font-size: 14px;
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.85);
}
.panel-flop-detail-amount-line .panel-modal-value,
.panel-flop-detail-stake-value .panel-modal-value {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
}
.panel-modal-timer.panel-stake-detail-timer {
    font-variant-numeric: tabular-nums;
}

/* FLOP detail: 4-block countdown (day / hour / min / sec) */
.panel-modal-field:has(.panel-flop-detail-countdown) {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.panel-flop-detail-countdown {
    display: inline-flex;
    flex-direction: row;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    overflow: hidden;
}
.panel-flop-detail-countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.panel-flop-detail-countdown-item:last-child {
    border-right: none;
}
.panel-flop-detail-countdown-value {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
}
.panel-flop-detail-countdown-item .panel-modal-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.panel-flop-detail-countdown-finished,
.panel-flop-detail-countdown-finished-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}
.panel-flop-detail-countdown-finished {
    margin-top: 4px;
    padding: 8px 12px;
    justify-content: center;
}

/* Investments: history placeholder (until loaded or 0 items) */
.panel-investments-history-placeholder {
    margin-top: 16px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    text-align: center;
}
.panel-investments-history-placeholder--loading {
    min-height: 48px;
}
.panel-investments-history-placeholder--empty {
    color: rgba(255, 255, 255, 0.4);
}

/* Investments: single empty state when no active and no history */
.panel-investments-empty-state {
    margin-top: 16px;
    padding: 24px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
}
.panel-investments-empty-state-text {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* Investments: item row — full-height dividers, dates right-aligned */
.panel-investments-item-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
    min-height: 52px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-align: left;
    box-sizing: border-box;
}
.panel-investments-item-row:hover {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.18);
}
.panel-investments-item-row-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}
.panel-investments-item-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    padding: 10px 12px 10px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.panel-investments-item-amount {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    font-variant-numeric: tabular-nums;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.panel-investments-item-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}
.panel-investments-item-dates {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    padding: 10px 0 10px 12px;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
}
.panel-investments-item-dates .panel-investments-item-date-start {
    color: rgba(255, 255, 255, 0.95);
}
.panel-investments-item-dates .panel-investments-item-date-end {
    color: rgba(255, 255, 255, 0.55);
}
.panel-investments-item-row.is-finished .panel-investments-item-dates .panel-investments-item-date-start,
.panel-investments-item-row.is-finished .panel-investments-item-dates .panel-investments-item-date-end {
    color: rgba(255, 255, 255, 0.95);
}
.panel-investments-item-view-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: #ffffff;
    color: var(--panel-text-inverse);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    margin-top: 6px;
    margin-bottom: 6px;
}
.panel-investments-item-view-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}
.panel-investments-item-view-btn:active {
    transform: translateY(0);
}

.panel-investments-lists  {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    max-width: 720px;
    margin-top: 16px;
    
    padding: 8px;
    margin-left:auto;
    margin-right:auto;
}

.panel-investments-lists .panel-investments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.panel-investments-lists .panel-investments-list-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0;
    margin-bottom: 10px;
    margin-top: 10px;
} 

.panel-investments-lists .panel-investments-transfer-out,
.panel-investments-lists .panel-investments-transfer-in {
    overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.32s ease, margin 0.32s ease, padding 0.32s ease;
    will-change: max-height, opacity;
}

.panel-investments-lists .panel-investments-transfer-out {
    opacity: 1;
}

.panel-investments-lists .panel-investments-transfer-in {
    opacity: 0;
}

.panel-investments-lists .panel-investments-transfer-locked {
    pointer-events: none;
    user-select: none;
}

/* Mobile: hide single Deposit, show per-block Deposit */
.panel-investments-blocks-row-deposit {
    display: none;
}

/* Desktop: tabs hidden, both blocks, divider, single Deposit inside */
@media (min-width: 1400px) {
    .panel-investments-tabs {
        display: none;
    }
    .panel-investments-blocks-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(0, 0, 0, 0.35);
        overflow: hidden;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    .panel-investments-blocks-row .panel-investments-block {
        width: calc(50% - 1px);
        max-width: calc(50% - 1px);
        margin: 0;
        padding-top: 24px;
        flex: 0 0 auto;
        border: none;
        border-radius: 0;
    }
    .panel-investments-blocks-row .panel-investments-block + .panel-investments-block {
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }
    .panel-investments-blocks-row .panel-investments-block .panel-investments-deposit-wrap {
        display: none;
    }
    .panel-investments-blocks-row-deposit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        background: transparent;
    }
    .panel-investments-blocks-row-deposit .panel-investments-deposit-btn-simple {
        max-width: 300px;
    }
}

/* Investments: form blocks (1:1 deposit/withdraw style, own classes) */
.panel-investments-detail-box {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: 24px;
    box-sizing: border-box;
}
.panel-investments-detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}
.panel-investments-address-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    min-height: 52px;
}
.panel-investments-address-value {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 20px;
    font-size: 14px;
    font-family: ui-monospace, monospace;
    color: rgba(255, 255, 255, 0.92);
    word-break: break-all;
    background: none;
    border: none;
    box-sizing: border-box;
}
.panel-investments-address-value[type="text"] {
    width: 100%;
}
.panel-investments-address-value::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
/* Edge block in address-row: fixed width, full height */
.panel-investments-min-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    align-self: stretch;
    min-height: 52px;
    box-sizing: border-box;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 130px;
    width: 130px;
    overflow: hidden;
}
.panel-investments-min-box .panel-investments-detail-label {
    margin-bottom: 0;
}
.panel-investments-min-value {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}
.panel-investments-coin-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 100%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.panel-investments-coin-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
} 
    .panel-index-section--investments .panel-investments-address-row {
        flex-wrap: nowrap;
    }
    .panel-index-section--investments .panel-investments-address-value {
        width: auto;
        order: 0;
    }
    .panel-index-section--investments .panel-investments-min-box {
        width: auto;
        max-width: none;
        flex-shrink: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0;
    }
    .panel-investments-min-box {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 14px;
        min-height: 48px;
    }
    .panel-investments-min-box .panel-investments-detail-label {
        margin-bottom: 0;
        font-size: 10px;
    }

/* Investments: skeleton placeholder while data is loading */
.panel-investments-placeholder {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
    padding: 20px 18px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.panel-investments-placeholder-header,
.panel-investments-placeholder-card,
.panel-investments-placeholder-row {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}
.panel-investments-placeholder-header {
    height: 18px;
    max-width: 180px;
}
.panel-investments-placeholder-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.panel-investments-placeholder-card {
    flex: 1;
    min-width: 180px;
    height: 96px;
}
.panel-investments-placeholder-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.panel-investments-placeholder-row {
    height: 40px;
}

.panel-investments-placeholder.panel-investments-error {
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

.panel-investments-placeholder-header::before,
.panel-investments-placeholder-card::before,
.panel-investments-placeholder-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.06) 100%);
    transform: translateX(-100%);
    animation: panel-investments-skeleton 1.1s linear infinite;
}
@keyframes panel-investments-skeleton {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
@media (max-width: 768px) {
    .panel-investments-placeholder {
        padding: 16px 14px 20px;
        gap: 14px;
    }
    .panel-investments-placeholder-card {
        min-width: 100%;
        height: 82px;
    }
}

@media (max-width: 768px) {
    .panel-investments-total {
        padding: 16px;
    }
    .panel-investments-total-value {
        font-size: 20px;
    }
    .panel-investments-block {
        width: 100%;
        padding: 20px;
    }
    .panel-investments-slider-wrap {
        gap: 12px;
    }
    .panel-investments-slider-value {
        min-width: 36px;
        font-size: 14px;
    }
    .panel-investments-income-value {
        font-size: 16px;
    }
    .panel-investments-cancel-fee-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .panel-investments-cancel-fee-label {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.6);
    }
    .panel-investments-cancel-fee-value-wrap {
        gap: 4px;
    }
    .panel-investments-cancel-fee-value {
        font-size: 15px;
    }
    .panel-investments-cancel-fee-pct {
        font-size: 12px;
    }
    .panel-investments-deposit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Investments: Calculate income shortcut */
.panel-investments-calc-top {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.panel-investments-calc-above-tabs {
    margin-bottom: 16px;
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
@media (max-width: 999px) {
    .panel-investments-calc-top { 
    }
    .panel-investments-calc-above-tabs {
        display: flex;
    }
    .panel-investments-item-row .panel-investments-item-title {
        font-size: calc(14px * 0.8);
    }
}
@media (min-width: 1000px) {
    .panel-investments-calc-above-tabs {
        display: none;
    }
}
.panel-investments-calc-wrap {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: center;
}
.panel-investments-calc-btn,
.panel-investments-calc-btn.panel-mobile-menu-link {
    text-align: center;

    justify-content: center;
}
.panel-investments-calc-top .panel-investments-calc-btn {
    flex: 1;
    min-width: 0;
}
.panel-investments-calc-above-tabs .panel-investments-calc-btn {
    width: 100%;
    border-bottom: none;
    padding: 14px 24px;
    gap: 0;
}
.panel-investments-calc-btn {
    width: 100%;
    max-width: 320px;
    padding: 14px 24px;
    border-radius: 10px;
    border: 1px solid var(--panel-text-inverse);
    background: #ffffff;
    color: var(--panel-text-inverse);
    font-size: 14px;
    font-weight: 600;
    font-family: neue-haas-grot-text-roman, sans-serif;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    text-decoration: none;
}
.panel-investments-calc-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}
.panel-investments-calc-btn:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.9);
}

/* Panel calculator section (adapted from index.html) */
.panel-index-section--calculator {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}
.panel-calculator-top-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.panel-index-section--calculator .panel-calculator-inner-wrap {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 34px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.panel-calculator-bottom-wrap {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 8px;
}

/* No extra card layer — compare sits below main calculator like plain section content. */
.panel-calculator-bottom-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}

.panel-calculator-section .calculator-section {
    padding: 0;
    gap: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.panel-calculator-section .calculator-inner {
    width: 100%;
    padding: 32px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.38);
    border-radius: 12px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.panel-calculator-section .calculator-title {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.95);
}
.panel-calculator-section .calculator-label {
    color: rgba(255, 255, 255, 0.9);
}
/* Calculator amount field */
.panel-calculator-section .calculator-field {
    min-width: 140px;
}
.panel-calculator-section .calculator-input,
.panel-calculator-section #calc-amount,
.panel-calculator-section #calc-months {
    width: 100%;
    max-width: 180px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    font-size: 16px;
    font-family: neue-haas-grot-text-roman, sans-serif;
    transition: border-color 0.2s ease;
}
.panel-calculator-section .calculator-input:focus,
.panel-calculator-section #calc-amount:focus,
.panel-calculator-section #calc-months:focus {
    border-color: rgba(139, 92, 246, 0.7);
    outline: none;
}

/* Calculator amount error - block, panel-error style (like login errors), smooth appear/disappear */
.calculator-amount-error--block,
.panel-error,
.panel-calculator-section .calculator-amount-error {
    display: block !important;
    margin-bottom: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
    font-family: neue-haas-grot-text-roman, sans-serif;
    color: rgba(255, 255, 255, 0.88);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, max-height 0.18s ease, margin 0.18s ease, padding 0.18s ease, border-width 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    transform: translateY(-2px);
}
.calculator-amount-error--block:not([hidden]),
.panel-calculator-section .calculator-amount-error:not([hidden]),
.panel-error:not([hidden]){
    max-height: 80px;
    opacity: 1;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-width: 1px;
    visibility: visible;
    transform: translateY(0);
}
.panel-calculator-section .calculator-type-btn {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
}
.panel-calculator-section .calculator-type-btn:hover {
    border-color: rgba(255, 255, 255, 0.4);
}
.panel-calculator-section .calculator-type-btn.is-active {
    color: #fff;
    background: rgba(139, 92, 246, 0.75);
    border-color: rgba(139, 92, 246, 0.85);
}
.panel-calculator-section .calculator-reinvest-btn {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
}
.panel-calculator-section .calculator-reinvest-btn:hover {
    border-color: rgba(255, 255, 255, 0.4);
}
.panel-calculator-section .calculator-reinvest-btn.is-active {
    color: #fff;
    background: rgba(139, 92, 246, 0.75);
    border-color: rgba(139, 92, 246, 0.85);
}
.panel-calculator-section .calculator-output {
    color: rgba(167, 139, 250, 1);
    background: rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.panel-calculator-section .calculator-output-percent,
.panel-calculator-section .calculator-owned-rigs-label {
    color: rgba(255, 255, 255, 0.85);
}
.panel-calculator-section .calculator-owned-rigs-value {
    color: rgba(167, 139, 250, 1);
}
.panel-calculator-section .calculator-info-text {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Calculator: back to investments button */
.panel-calculator-actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.panel-calculator-back-btn {
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid var(--panel-text-inverse);
    background: #ffffff;
    color: var(--panel-text-inverse);
    font-size: 14px;
    font-weight: 600;
    font-family: neue-haas-grot-text-roman, sans-serif;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.panel-calculator-back-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}
.panel-calculator-back-btn.panel-mobile-menu-link:hover {
    opacity: 1;
    background: #ffffff;
}
.panel-calculator-back-btn:active {
    transform: translateY(0);
}

/* Panel calculator: preorder button */
.panel-calculator-preorder-wrap {
    display: flex;
    justify-content: center;
}
.panel-calculator-section .panel-calculator-preorder-btn,
.panel-calculator-section .calculator-cta-preorder {
    display: block;
    max-width: 320px;
    width: 100%;
    padding: 14px 24px;
    border-radius: 10px;
    border: 1px solid var(--panel-text-inverse);
    background: #ffffff;
    color: var(--panel-text-inverse);
    font-size: 14px;
    font-weight: 600;
    font-family: neue-haas-grot-text-roman, sans-serif;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.panel-calculator-section .panel-calculator-preorder-btn:hover,
.panel-calculator-section .calculator-cta-preorder:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}
.panel-calculator-section .panel-calculator-preorder-btn:active,
.panel-calculator-section .calculator-cta-preorder:active {
    transform: translateY(0);
}

/* Panel calculator: compare blocks — always three stacked rows (no side-by-side wrap). */
.panel-calculator-section .calculator-compare-wrapper {
    width: 100%;
    padding: 0;
}
.panel-calculator-section .calculator-compare-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
}
.panel-calculator-section .calculator-compare-block {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.panel-calculator-section .calculator-compare-block:hover {
    transform: translateY(-3px);
}
.panel-calculator-section .calculator-compare-title {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 10px 0;
}
.panel-calculator-section .calculator-compare-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 600px) {
    .panel-index-section--calculator .panel-calculator-inner-wrap {
        padding: 12px 8px;
        padding-top: 24px;
    }
    .panel-calculator-bottom-wrap {
        padding: 0 4px;
    }
    .panel-calculator-section .calculator-inner {
        padding: 24px 16px;
    }
    .panel-calculator-section .calculator-title {
        font-size: 22px;
    }
}