:root {
    color-scheme: dark;

    --bg: #10151d;
    --surface: #171e28;
    --surface2: #1d2632;
    --border: #2b3543;

    --text: #f4f6f8;
    --muted: #909baa;

    --btc: #f7931a;
    --btc-soft: rgba(247,147,26,.13);

    /* M4.6A3 · kräftiges Chart-Blau */
    --chart-blue: #39aaff;

    --green: #46c98b;
    --yellow: #eab85a;
    --red: #ed6a72;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    padding:
        env(safe-area-inset-top)
        0
        env(safe-area-inset-bottom);
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.app-shell {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 16px 32px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 66px;
    margin-bottom: 18px;
}

.topbar h1 {
    margin: 2px 0 0;
    font-size: 23px;
    letter-spacing: -.4px;
}

.eyebrow {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.badge {
    border: 1px solid rgba(247,147,26,.38);
    border-radius: 999px;
    padding: 7px 11px;
    background: var(--btc-soft);
    color: var(--btc);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
}

.message {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
}

.message.error {
    border-color: rgba(237,106,114,.45);
    color: #ffb6bc;
}

.message.success {
    border-color: rgba(70,201,139,.4);
    color: #9ee8c2;
}

.auth-view {
    max-width: 520px;
    margin: 7vh auto 0;
}

.welcome {
    text-align: center;
    margin-bottom: 22px;
}

.btc-mark {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: var(--btc);
    color: white;
    font-size: 40px;
    font-weight: 800;
    box-shadow: 0 16px 40px rgba(247,147,26,.15);
}

.welcome h2 {
    margin: 0;
    font-size: 28px;
}

.welcome p {
    margin: 7px 0 0;
    color: var(--muted);
}

.card,
.hero-card,
.status-card,
.metric-card {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 16px;
}

.card {
    padding: 18px;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--bg);
}

.tab-button {
    border: 0;
    border-radius: 9px;
    padding: 10px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
}

.tab-button.active {
    background: var(--surface2);
    color: var(--text);
}

label {
    display: block;
    margin: 14px 0 7px;
    color: #c9d0d9;
    font-size: 13px;
    font-weight: 600;
}

input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;
    padding: 13px 14px;
    background: #111720;
    color: var(--text);
}

input:focus {
    border-color: rgba(247,147,26,.65);
    box-shadow: 0 0 0 3px rgba(247,147,26,.08);
}

.primary-button,
.secondary-button {
    width: 100%;
    border-radius: 11px;
    padding: 13px 15px;
    font-weight: 800;
}

.primary-button {
    margin-top: 18px;
    border: 0;
    background: var(--btc);
    color: white;
}

.primary-button:disabled {
    opacity: .55;
    cursor: default;
}

.secondary-button {
    margin-top: 18px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
}

.text-button {
    display: block;
    width: 100%;
    margin-top: 13px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
}

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

.auth-footer {
    margin-top: 18px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}

.hero-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 19px;
    margin-bottom: 14px;
}

.hero-card h2 {
    margin: 4px 0;
    font-size: 23px;
}

.hero-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.online-pill {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(70,201,139,.10);
    color: var(--green);
    font-size: 10px;
    font-weight: 800;
}

.online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.status-grid,
.metric-grid {
    display: grid;
    gap: 10px;
}

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

.status-card {
    padding: 15px;
}

.status-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.status-ok {
    color: var(--green);
}

.status-wait {
    color: var(--yellow);
}

.status-value {
    margin-top: 13px;
    font-size: 17px;
    font-weight: 750;
}

.status-sub {
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 24px 2px 10px;
}

.section-title.compact {
    margin-top: 0;
}

.section-title h2 {
    margin: 3px 0 0;
    font-size: 19px;
}

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

.metric-card {
    min-height: 115px;
    padding: 14px;
}

.metric-card span {
    color: var(--muted);
    font-size: 12px;
}

.metric-card strong {
    display: block;
    margin-top: 12px;
    font-size: 24px;
}

.metric-card small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.account-card {
    margin-top: 14px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

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

.info-row strong {
    max-width: 62%;
    text-align: right;
    overflow-wrap: anywhere;
}

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

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

    .hero-card {
        align-items: flex-start;
    }
}


/* ==========================================================
   M4.3C · ORIGINAL BTC-TRADER DASHBOARD STYLE
   ========================================================== */

.app-shell {
    max-width: 980px;
}

.trader-hero {
    margin-bottom: 12px;
}

.primary-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
}

.primary-metric {
    min-width: 0;
    min-height: 128px;
}

.primary-metric strong {
    font-size: clamp(20px, 3vw, 27px);
    overflow-wrap: anywhere;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
}

.detail-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 14px;
    background: var(--surface);
}

.detail-card span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .55px;
}

.detail-card strong {
    display: block;
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.profit-positive {
    color: var(--green);
}

.profit-negative {
    color: var(--red);
}

.profit-neutral {
    color: var(--btc);
}

.trader-system-card {
    margin-top: 14px;
}

.system-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.system-header h2 {
    margin: 3px 0 0;
    font-size: 19px;
}

.system-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 15px;
}

.system-item {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: var(--surface2);
}

.system-item > span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.system-item > strong {
    display: block;
    margin-top: 7px;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.system-item > small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.trade-history-card {
    margin-top: 14px;
    padding: 0;
    overflow: hidden;
}

.trade-history-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    padding: 16px 17px 13px;
    border-bottom: 1px solid var(--border);
}

.trade-history-head h2 {
    margin: 3px 0 0;
    font-size: 19px;
}

.trade-history-head > small {
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.trade-empty {
    padding: 24px 17px;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.trade-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.trade-table {
    width: 100%;
    min-width: 630px;
    border-collapse: collapse;
}

.trade-table th,
.trade-table td {
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
}

.trade-table th:first-child,
.trade-table td:first-child,
.trade-table th:nth-child(2),
.trade-table td:nth-child(2) {
    text-align: left;
}

.trade-table th {
    color: var(--muted);
    background: rgba(0,0,0,.08);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.trade-table td {
    font-size: 12px;
}

.trade-table tbody tr:last-child td {
    border-bottom: 0;
}

.trade-action {
    font-weight: 800;
}

.trade-action.buy {
    color: var(--green);
}

.trade-action.rebuy {
    color: var(--yellow);
}

.trade-action.sell {
    color: var(--btc);
}

.trade-rule {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 500;
}

.trade-profit-positive {
    color: var(--green);
    font-weight: 700;
}

.trade-profit-negative {
    color: var(--red);
    font-weight: 700;
}

.compact-account {
    margin-top: 14px;
    opacity: .92;
}


@media (max-width: 760px) {

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

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

    .primary-metric {
        min-height: 112px;
    }

    .primary-metric strong {
        font-size: 21px;
    }
}


@media (max-width: 520px) {

    .app-shell {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero-card {
        padding: 16px;
    }

    .detail-card {
        padding: 12px;
    }

    .detail-card strong {
        font-size: 16px;
    }

    .system-grid {
        grid-template-columns: 1fr;
    }

    .trade-history-head {
        align-items: flex-start;
    }
}


/* ==========================================================
   M4.3D · SETTINGS DRAWER
   ========================================================== */

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;

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

    background: var(--surface);
    color: var(--text);

    font-size: 18px;
    line-height: 1;
}

.icon-button:active {
    transform: scale(.97);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;

    background: rgba(0,0,0,.52);
    backdrop-filter: blur(2px);
}

.settings-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    z-index: 910;

    width: min(88vw, 380px);

    padding:
        calc(18px + env(safe-area-inset-top))
        16px
        calc(18px + env(safe-area-inset-bottom));

    overflow-y: auto;

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

    background: var(--bg);

    box-shadow:
        -18px 0 45px rgba(0,0,0,.28);

    transform: translateX(105%);
    transition:
        transform .22s ease;
}

.settings-drawer.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;

    padding: 2px 2px 16px;

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

.drawer-header h2 {
    margin: 4px 0 0;
    font-size: 22px;
}

.drawer-close-button {
    width: 38px;
    height: 38px;

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

    background: var(--surface);
    color: var(--text);

    font-size: 25px;
    line-height: 1;
}

.drawer-section {
    margin-top: 20px;
}

.drawer-section-title {
    margin: 0 3px 8px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.drawer-item {
    width: 100%;

    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;

    margin-bottom: 8px;
    padding: 12px;

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

    background: var(--surface);
    color: var(--text);

    text-align: left;
}

.drawer-item:active {
    background: var(--surface2);
}

.drawer-item-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: var(--btc-soft);
    color: var(--btc);

    font-size: 16px;
    font-weight: 800;
}

.drawer-item-text {
    min-width: 0;
}

.drawer-item-text strong {
    display: block;

    font-size: 14px;
}

.drawer-item-text small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.35;
}

.drawer-chevron {
    color: var(--muted);
    font-size: 23px;
}

.drawer-note {
    margin-top: 22px;
    padding: 13px;

    border: 1px solid rgba(247,147,26,.24);
    border-radius: 13px;

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

.drawer-note strong {
    display: block;

    color: var(--btc);
    font-size: 12px;
}

.drawer-note span {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

body.drawer-open {
    overflow: hidden;
}

@media (max-width: 520px) {

    .topbar {
        gap: 8px;
    }

    .topbar h1 {
        font-size: 21px;
    }

    .settings-drawer {
        width: min(92vw, 360px);
    }
}


/* ==========================================================
   M4.4C · PERSONAL CONFIG READ VIEW
   ========================================================== */

.drawer-config-view {
    padding-top: 2px;
}

.drawer-subview-header {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 10px;

    padding-bottom: 15px;

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

.drawer-subview-header h2 {
    margin: 3px 0 0;
    font-size: 21px;
}

.drawer-back-button {
    width: 38px;
    height: 38px;

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

    background: var(--surface);
    color: var(--text);

    font-size: 27px;
    line-height: 1;
}

.config-readonly-notice {
    margin-top: 14px;
    padding: 12px 13px;

    border: 1px solid rgba(70,201,139,.25);
    border-radius: 12px;

    background: rgba(70,201,139,.07);
}

.config-readonly-notice strong {
    display: block;
    color: var(--green);
    font-size: 12px;
}

.config-readonly-notice span {
    display: block;
    margin-top: 4px;

    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.config-header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    margin-top: 12px;
    padding: 11px 12px;

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

    background: var(--surface);
}

.config-header-box > span {
    min-width: 0;

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

    overflow-wrap: anywhere;
}

.config-header-box > small {
    flex-shrink: 0;

    color: var(--muted);
    font-size: 10px;
}

.config-loading,
.config-error {
    margin-top: 14px;
    padding: 14px;

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

    background: var(--surface);

    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.config-error {
    border-color: rgba(237,106,114,.35);
    color: #ffb6bc;
}

.config-group {
    margin-top: 18px;
}

.config-group-title {
    margin: 0 3px 8px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.config-field {
    margin-bottom: 8px;
    padding: 12px;

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

    background: var(--surface);
}

.config-field.dangerous {
    border-color: rgba(237,106,114,.24);
}

.config-field-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.config-field-title {
    min-width: 0;
}

.config-field-title strong {
    display: block;

    font-size: 13px;
    line-height: 1.35;
}

.config-field-title small {
    display: block;

    margin-top: 3px;

    color: var(--muted);
    font-size: 9px;
}

.config-field-value {
    flex-shrink: 0;

    max-width: 48%;

    padding: 5px 8px;

    border-radius: 8px;

    background: var(--surface2);

    color: var(--text);

    font-size: 11px;
    font-weight: 750;

    text-align: right;
    overflow-wrap: anywhere;
}

.config-field-description {
    margin-top: 8px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

.config-field-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 9px;
}

.config-meta-pill {
    padding: 4px 6px;

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

    color: var(--muted);

    font-size: 9px;
    line-height: 1;
}

.config-meta-pill.danger {
    border-color: rgba(237,106,114,.35);
    color: var(--red);
}

.config-meta-pill.restart {
    border-color: rgba(234,184,90,.30);
    color: var(--yellow);
}

.config-meta-pill.readonly {
    border-color: rgba(70,201,139,.24);
    color: var(--green);
}


/* ==========================================================
   M4.4C1 · PRODUCT CONFIG CLEAN VIEW
   ========================================================== */

/*
 * ConfigName / ConfigVersion gehören nicht in
 * die normale Product-Benutzeroberfläche.
 */
.config-header-box {
    display: none;
}

/*
 * Keine technischen C#-Typen oder Property-Namen.
 */
.config-field-title small {
    display: none;
}

/*
 * Alte technische Metadata-Pills werden in der
 * Product-Ansicht nicht mehr verwendet.
 */
.config-field-meta {
    display: none;
}

.config-field-value {
    max-width: 52%;
    font-size: 12px;
}

.config-product-info,
.config-product-later {
    display: inline-block;

    margin-top: 9px;
    padding: 4px 7px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
}

.config-product-info {
    border: 1px solid var(--border);
    color: var(--muted);
}

.config-product-later {
    border: 1px solid rgba(234,184,90,.30);
    color: var(--yellow);
}


/* ==========================================================
   M4.4D-C1 · EDITABLE PRODUCT CONFIG
   ========================================================== */

.config-editor-wrap {
    width: min(52%, 170px);

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.config-edit-control {
    width: 100%;
    min-width: 0;

    padding: 8px 9px;

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

    outline: none;

    background: var(--surface2);
    color: var(--text);

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    text-align: right;
}

.config-edit-control:focus {
    border-color: rgba(247,147,26,.55);

    box-shadow:
        0 0 0 2px
        rgba(247,147,26,.08);
}

select.config-edit-control {
    text-align: left;
}

.config-edit-unit {
    flex-shrink: 0;

    color: var(--muted);

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


.config-switch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    cursor: pointer;
}

.config-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.config-switch-track {
    position: relative;

    width: 38px;
    height: 22px;

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

    background: var(--surface2);

    transition: .18s ease;
}

.config-switch-track::after {
    content: "";

    position: absolute;
    top: 3px;
    left: 3px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: var(--muted);

    transition: .18s ease;
}

.config-switch input:checked
+ .config-switch-track {
    border-color: rgba(70,201,139,.42);
    background: rgba(70,201,139,.12);
}

.config-switch input:checked
+ .config-switch-track::after {
    transform: translateX(16px);
    background: var(--green);
}

.config-switch-text {
    min-width: 24px;

    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}


.config-actions {
    position: sticky;
    bottom: -18px;

    z-index: 4;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    margin-top: 18px;
    padding:
        12px
        0
        calc(4px + env(safe-area-inset-bottom));

    background:
        linear-gradient(
            to bottom,
            rgba(16,21,29,0),
            var(--bg) 22%
        );
}

.config-save-button,
.config-factory-button {
    min-height: 42px;

    border-radius: 11px;

    font-size: 12px;
    font-weight: 800;
}

.config-save-button {
    border: 1px solid var(--btc);
    background: var(--btc);
    color: #17110a;
}

.config-save-button:disabled {
    opacity: .42;
}

.config-factory-button {
    border: 1px solid rgba(234,184,90,.35);
    background: rgba(234,184,90,.08);
    color: var(--yellow);
}

.config-action-message {
    margin-top: 14px;
    padding: 11px 12px;

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

    background: var(--surface);

    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

.config-action-message.success {
    border-color: rgba(70,201,139,.30);
    color: var(--green);
}

.config-action-message.error {
    border-color: rgba(237,106,114,.35);
    color: #ffb6bc;
}


@media (max-width: 420px) {

    .config-field-head {
        align-items: center;
    }

    .config-editor-wrap {
        width: min(55%, 160px);
    }

    .config-actions {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   M4.4D-C1.1 · CONFIG POSITION LOCK
   ========================================================== */

.config-position-lock {
    margin-top: 12px;
    padding: 12px 13px;

    border: 1px solid rgba(234,184,90,.38);
    border-radius: 12px;

    background: rgba(234,184,90,.08);
}

.config-position-lock strong {
    display: block;

    color: var(--yellow);

    font-size: 12px;
}

.config-position-lock span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

.config-action-message.warning {
    border-color: rgba(234,184,90,.35);
    color: var(--yellow);
}

.config-factory-button:disabled {
    opacity: .42;
}


/* ==========================================================
   M4.5A4 · TRADING CONTROL UI
   ========================================================== */

.trading-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 12px;
    padding: 13px 14px;

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

    background: var(--surface);
}

.trading-control-copy {
    min-width: 0;
}

.trading-control-copy strong {
    display: block;
    margin-top: 3px;

    font-size: 14px;
    line-height: 1.3;
}

.trading-control-copy > span {
    display: block;
    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.4;
}

.trading-control-bar[data-mode="ACTIVE"] {
    border-color: rgba(70,201,139,.30);
}

.trading-control-bar[data-mode="PAUSE_AFTER_SELL"] {
    border-color: rgba(234,184,90,.38);
}

.dashboard-trading-switch {
    position: relative;

    flex-shrink: 0;

    width: 48px;
    height: 28px;

    cursor: pointer;
}

.dashboard-trading-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dashboard-trading-switch-track {
    position: absolute;
    inset: 0;

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

    background: var(--surface2);

    transition: .2s ease;
}

.dashboard-trading-switch-track::after {
    content: "";

    position: absolute;
    top: 4px;
    left: 4px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: var(--muted);

    transition: .2s ease;
}

.dashboard-trading-switch input:checked
+ .dashboard-trading-switch-track {
    border-color: rgba(70,201,139,.44);
    background: rgba(70,201,139,.13);
}

.dashboard-trading-switch input:checked
+ .dashboard-trading-switch-track::after {
    transform: translateX(20px);
    background: var(--green);
}

.dashboard-trading-switch input:disabled
+ .dashboard-trading-switch-track {
    opacity: .48;
}


.trading-control-toast {
    position: fixed;

    left: 50%;
    bottom: calc(
        20px +
        env(safe-area-inset-bottom)
    );

    z-index: 1200;

    width: min(
        calc(100vw - 28px),
        420px
    );

    padding: 11px 13px;

    transform: translateX(-50%);

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

    background: var(--surface);

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.32);

    color: var(--text);

    font-size: 11px;
    line-height: 1.45;

    text-align: center;
}

.trading-control-toast.success {
    border-color: rgba(70,201,139,.36);
}

.trading-control-toast.warning {
    border-color: rgba(234,184,90,.40);
}

.trading-control-toast.error {
    border-color: rgba(237,106,114,.42);
}

.config-position-lock[data-lock="trading"] {
    border-color: rgba(247,147,26,.32);
    background: rgba(247,147,26,.06);
}


/* ==========================================================
   M4.6A2 · MARKET CHART
   ========================================================== */

.market-chart-card {
    margin-top: 14px;
    padding: 0;
    overflow: hidden;
}

.market-chart-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;

    padding: 16px 17px 12px;

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

.market-chart-head h2 {
    margin: 3px 0 0;
    font-size: 19px;
}

.market-range-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.market-range-buttons button {
    border: 1px solid var(--border);
    border-radius: 8px;

    padding: 6px 9px;

    background: var(--surface2);
    color: var(--muted);

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

    transition: .15s ease;
}

.market-range-buttons button.active {
    border-color: rgba(247,147,26,.48);
    background: var(--btc-soft);
    color: var(--btc);
}

.market-range-buttons button:active {
    transform: scale(.97);
}


.market-chart-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;

    padding: 12px 17px 4px;
}

.market-chart-summary span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .6px;
}

.market-chart-summary strong {
    display: block;

    margin-top: 3px;

    font-size: 18px;
}

.market-chart-summary small {
    color: var(--muted);

    font-size: 10px;

    text-align: right;
}


.market-chart-wrap {
    position: relative;

    width: 100%;
    height: 270px;

    padding: 3px 8px 5px;
}

.market-chart-canvas {
    display: block;

    width: 100%;
    height: 100%;
}

.market-chart-empty {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 20px;

    color: var(--muted);

    font-size: 12px;
    text-align: center;
}


.market-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    padding: 9px 17px 13px;

    border-top: 1px solid rgba(255,255,255,.025);

    color: var(--muted);

    font-size: 9px;
}

.market-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.legend-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.legend-dot.buy {
    background: var(--green);
}

.legend-dot.rebuy {
    background: var(--yellow);
}

.legend-dot.sell {
    background: var(--btc);
}

.legend-line {
    width: 14px;
    height: 0;

    border-top: 2px dashed;
}

.legend-line.average {
    border-color: var(--green);
}

.legend-line.target {
    border-color: var(--btc);
}


@media (max-width: 620px) {

    .market-chart-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .market-range-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .market-range-buttons button {
        flex: 1 1 auto;
    }

    .market-chart-wrap {
        height: 235px;
    }

    .market-chart-summary {
        align-items: flex-start;
    }
}



/* ==========================================================
   M4.6A3 · BLUE TOUCH ZOOM
   ========================================================== */

.market-chart-wrap {
    user-select: none;
    -webkit-user-select: none;
}

.market-chart-canvas {
    /*
     * Vertikales Scrollen der Seite bleibt möglich.
     * Horizontale Gesten und Pinch verarbeitet der Chart.
     */
    touch-action: pan-y;
}

.market-chart-reset {
    position: absolute;

    top: 9px;
    right: 82px;

    z-index: 10;

    border: 1px solid rgba(57,170,255,.35);
    border-radius: 8px;

    padding: 5px 8px;

    background: rgba(16,21,29,.82);
    color: var(--chart-blue);

    backdrop-filter: blur(5px);

    font-size: 9px;
    font-weight: 750;

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.18);
}

.market-chart-reset:active {
    transform: scale(.97);
}

@media (max-width: 520px) {

    .market-chart-reset {
        right: 77px;
        top: 8px;
    }
}



/* ==========================================================
   M4.6A4 · QUIET PRODUCT HEADER
   ========================================================== */

/*
 * Oberer Produktkopf:
 * kleiner, ruhiger und weniger nach Test-Dashboard.
 */
.topbar {
    min-height: 52px;
    margin-bottom: 10px;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topbar-btc-logo {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--btc);
    color: #fff;

    font-size: 21px;
    font-weight: 900;
    line-height: 1;

    box-shadow:
        0 4px 14px
        rgba(247,147,26,.13);
}

.topbar-brand-copy {
    min-width: 0;
}

.topbar-brand-copy h1 {
    margin: 0;

    font-size: 19px;
    font-weight: 720;
    letter-spacing: -.3px;

    line-height: 1.12;
}

.topbar-brand-copy span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.15px;

    opacity: .72;
}


/*
 * BETA-Badge weniger dominant.
 */
.topbar .badge {
    padding: 5px 8px;

    border-color:
        rgba(247,147,26,.20);

    background:
        rgba(247,147,26,.055);

    font-size: 9px;
    letter-spacing: .6px;
}


/*
 * Hallo Roland nicht mehr als große Hero-Karte.
 */
.trader-hero {
    align-items: center;

    margin: 0 0 7px;
    padding: 7px 3px 9px;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.trader-hero > div:first-child {
    min-width: 0;
}

.trader-hero .eyebrow {
    display: none;
}

.trader-hero h2 {
    margin: 0;

    color: #cbd3dc;

    font-size: 14px;
    font-weight: 630;
    letter-spacing: -.1px;
}

.trader-hero p {
    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;

    opacity: .70;
}


/*
 * Online-Anzeige ebenfalls kleiner.
 */
.trader-hero .online-pill {
    align-self: center;

    padding: 4px 7px;

    background:
        rgba(70,201,139,.055);

    font-size: 8px;

    opacity: .78;
}

.trader-hero .online-dot {
    width: 5px;
    height: 5px;
}


/*
 * Trading-Control bleibt wichtig,
 * wirkt aber nicht wie eine zweite Hero-Karte.
 */
.trading-control-bar {
    margin-top: 0;

    box-shadow: none;

    border-color:
        rgba(144,155,170,.17);

    background:
        rgba(23,30,40,.72);
}

.trading-control-copy .eyebrow {
    font-size: 9px;
    opacity: .72;
}

.trading-control-copy strong {
    font-size: 13px;
}

.trading-control-copy > span {
    font-size: 10px;
}


/*
 * Einstellungsbutton oben ebenfalls etwas ruhiger.
 */
.topbar .icon-button {
    border-color:
        rgba(144,155,170,.17);

    background:
        rgba(23,30,40,.58);

    box-shadow: none;
}


@media (max-width: 520px) {

    .topbar {
        min-height: 48px;
    }

    .topbar-btc-logo {
        width: 31px;
        height: 31px;

        flex-basis: 31px;

        font-size: 19px;
    }

    .topbar-brand-copy h1 {
        font-size: 17px;
    }

    .trader-hero {
        padding-top: 5px;
    }
}



/* ==========================================================
   M4.6A5 · COMPACT DASHBOARD POLISH
   ========================================================== */


/* ----------------------------------------------------------
   ALLGEMEINE ABSTÄNDE
   ---------------------------------------------------------- */

.section-title {
    margin-top: 19px;
    margin-bottom: 8px;
}

.detail-grid {
    gap: 7px;
}

.detail-card {
    padding: 11px 12px;
}

.detail-card span {
    font-size: 9px;
}

.detail-card strong {
    margin-top: 6px;
    font-size: 16px;
}


/*
 * Hauptkarten etwas dichter,
 * aber weiterhin klar voneinander getrennt.
 */
.primary-metric-grid {
    gap: 8px;
}

.primary-metric {
    min-height: 112px;
    padding: 13px;
}

.primary-metric strong {
    margin-top: 9px;
}


/* ----------------------------------------------------------
   TRADER STATUS · DEZENTER
   ---------------------------------------------------------- */

.trader-system-card {
    margin-top: 10px;
    padding: 13px 14px;
}

.system-header {
    align-items: center;
}

.system-header .eyebrow {
    font-size: 9px;
    opacity: .68;
}

.system-header h2 {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 650;
}

#traderStatusBadge {
    font-size: 8px;
    font-weight: 750;
    opacity: .78;
}

.system-grid {
    gap: 7px;
    margin-top: 10px;
}

.system-item {
    padding: 9px 10px;

    border-color:
        rgba(144,155,170,.14);

    background:
        rgba(29,38,50,.58);
}

.system-item > span {
    font-size: 8px;
    opacity: .75;
}

.system-item > strong {
    margin-top: 4px;

    font-size: 12px;
    font-weight: 650;
}

.system-item > small {
    margin-top: 2px;

    font-size: 9px;

    opacity: .72;
}


/* ----------------------------------------------------------
   TRADE HISTORY · KOMPAKT
   ---------------------------------------------------------- */

.trade-history-card {
    margin-top: 10px;
}

.trade-history-head {
    align-items: center;

    padding:
        11px
        12px
        9px;
}

.trade-history-head .eyebrow {
    font-size: 8px;
    opacity: .68;
}

.trade-history-head h2 {
    margin-top: 2px;

    font-size: 15px;
    font-weight: 650;
}

.trade-history-head > small {
    font-size: 8px;
    opacity: .72;
}


/*
 * Wichtig:
 * keine künstliche Mindestbreite mehr.
 */
.trade-table-wrap {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
}

.trade-table {
    width: 100%;
    min-width: 0;

    table-layout: fixed;
}


/*
 * Spaltenverteilung:
 *
 * Zeit    24 %
 * Aktion  18 %
 * Preis   21 %
 * Betrag  18 %
 * Profit  19 %
 */
.trade-table th:nth-child(1),
.trade-table td:nth-child(1) {
    width: 24%;
}

.trade-table th:nth-child(2),
.trade-table td:nth-child(2) {
    width: 18%;
}

.trade-table th:nth-child(3),
.trade-table td:nth-child(3) {
    width: 21%;
}

.trade-table th:nth-child(4),
.trade-table td:nth-child(4) {
    width: 18%;
}

.trade-table th:nth-child(5),
.trade-table td:nth-child(5) {
    width: 19%;
}


.trade-table th,
.trade-table td {
    padding:
        8px
        5px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: clip;
}

.trade-table th {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18px;
}

.trade-table td {
    font-size: 10px;
}

.trade-action {
    font-size: 9px;
    font-weight: 800;
}

.trade-rule {
    margin-top: 1px;

    font-size: 7px;

    opacity: .68;
}


/*
 * Leichte Zebra-Struktur:
 * hilft bei schmalen Zeilen beim Lesen,
 * ohne den Dark-Look unruhig zu machen.
 */
.trade-table tbody tr:nth-child(even) {
    background:
        rgba(255,255,255,.012);
}

.trade-empty {
    padding: 18px 12px;

    font-size: 11px;
}


/* ----------------------------------------------------------
   HANDY
   ---------------------------------------------------------- */

@media (max-width: 520px) {

    /*
     * Mehr echte Nutzbreite auf dem Handy.
     */
    .app-shell {
        padding-left: 9px;
        padding-right: 9px;
    }


    .primary-metric-grid {
        gap: 7px;
    }

    .primary-metric {
        min-height: 105px;
        padding: 11px;
    }

    .primary-metric > span {
        font-size: 10px;
    }

    .primary-metric strong {
        font-size: 19px;
    }

    .primary-metric small {
        font-size: 9px;
    }


    .detail-grid {
        gap: 6px;
    }

    .detail-card {
        padding: 10px;
    }

    .detail-card strong {
        font-size: 15px;
    }


    /*
     * System auf dem Handy weiterhin zweispaltig,
     * weil die Inhalte jetzt kurz und dezent sind.
     */
    .system-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr));
    }

    .system-item {
        min-width: 0;
    }


    /*
     * Rule ist bereits durch den Signal-/Statusbereich
     * sichtbar. In der engen Trade-Tabelle wird sie
     * deshalb nicht noch einmal unter BUY/REBUY/SELL
     * dargestellt.
     */
    .trade-rule {
        display: none;
    }


    .trade-history-head {
        padding:
            10px
            8px
            8px;
    }


    .trade-table th,
    .trade-table td {
        padding:
            7px
            2px;
    }

    .trade-table th {
        font-size: 7.2px;
        letter-spacing: 0;
    }

    .trade-table td {
        font-size: 8.7px;
        letter-spacing: -.08px;
    }

    .trade-action {
        font-size: 8px;
    }


    /*
     * Preis/USDC-Spalten rechtsbündig,
     * Zeit + Aktion links.
     */
    .trade-table td:nth-child(3),
    .trade-table td:nth-child(4),
    .trade-table td:nth-child(5) {
        font-variant-numeric:
            tabular-nums;
    }
}


/*
 * Sehr schmale Displays.
 */
@media (max-width: 380px) {

    .trade-table th {
        font-size: 6.8px;
    }

    .trade-table td {
        font-size: 8.2px;
    }

    .trade-table th,
    .trade-table td {
        padding-left: 1px;
        padding-right: 1px;
    }
}



/* ==========================================================
   M4.7A · SETTINGS HUB
   ========================================================== */

.settings-hub {
    margin:
        4px
        0
        15px;

    border:
        1px solid
        rgba(144,155,170,.15);

    border-radius:
        14px;

    overflow:
        hidden;

    background:
        rgba(23,30,40,.58);
}


.settings-hub-label {
    padding:
        10px
        12px
        7px;

    color:
        var(--muted);

    font-size:
        8px;

    font-weight:
        750;

    letter-spacing:
        1.15px;

    opacity:
        .68;
}


.settings-accordion {
    margin:
        0;

    border-top:
        1px solid
        rgba(144,155,170,.12);
}


.settings-accordion summary,
.settings-action-row {
    width:
        100%;

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        0;

    padding:
        10px
        11px;

    border:
        0;

    border-top:
        1px solid
        rgba(144,155,170,.12);

    border-radius:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(--text);

    list-style:
        none;

    text-align:
        left;
}


.settings-accordion:first-of-type summary {
    border-top:
        0;
}


.settings-accordion summary::-webkit-details-marker {
    display:
        none;
}


.settings-accordion summary {
    cursor:
        pointer;
}


.settings-action-row {
    cursor:
        pointer;
}


.settings-accordion summary:active,
.settings-action-row:active {
    background:
        rgba(255,255,255,.025);
}


.settings-row-icon {
    width:
        30px;

    height:
        30px;

    flex:
        0 0
        30px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(144,155,170,.14);

    border-radius:
        9px;

    background:
        rgba(255,255,255,.025);

    color:
        var(--btc);

    font-size:
        15px;

    font-weight:
        800;
}


.settings-row-copy {
    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.settings-row-copy strong {
    color:
        #dce2e8;

    font-size:
        12px;

    font-weight:
        650;
}


.settings-row-copy small {
    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.35;
}


.settings-chevron {
    flex:
        0 0
        auto;

    color:
        var(--muted);

    font-size:
        20px;

    font-weight:
        300;

    transition:
        transform .16s ease;
}


.settings-accordion[open]
.settings-chevron {
    transform:
        rotate(90deg);
}


.settings-accordion-content {
    padding:
        0
        12px
        13px
        52px;

    animation:
        settingsContentIn
        .14s ease;
}


@keyframes settingsContentIn {

    from {
        opacity:
            0;

        transform:
            translateY(-3px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


.settings-info-row {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        8px
        0;

    border-bottom:
        1px solid
        rgba(144,155,170,.10);

    font-size:
        10px;
}


.settings-info-row span {
    color:
        var(--muted);
}


.settings-info-row strong {
    max-width:
        64%;

    color:
        #dce2e8;

    font-size:
        10px;

    font-weight:
        600;

    text-align:
        right;

    overflow-wrap:
        anywhere;
}


.settings-sub-button {
    width:
        100%;

    margin-top:
        12px;

    padding:
        9px
        11px;

    border:
        1px solid
        rgba(144,155,170,.16);

    border-radius:
        9px;

    background:
        rgba(255,255,255,.025);

    color:
        var(--text);

    font-size:
        10px;

    font-weight:
        650;
}


.product-info-content p {
    margin:
        0
        0
        9px;

    color:
        #abb5c1;

    font-size:
        10px;

    line-height:
        1.55;
}


.product-info-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin:
        3px
        0
        12px;
}


.product-info-btc {
    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--btc);

    color:
        white;

    font-size:
        17px;

    font-weight:
        850;
}


.product-info-brand strong {
    display:
        block;

    font-size:
        11px;
}


.product-info-brand span {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1px;
}


.product-info-note {
    color:
        var(--muted)
        !important;

    font-size:
        9px
        !important;
}


.settings-action-status {
    margin:
        0
        11px
        10px
        51px;

    padding:
        7px
        9px;

    border-radius:
        8px;

    background:
        rgba(57,170,255,.07);

    color:
        var(--chart-blue);

    font-size:
        9px;

    line-height:
        1.4;
}


.settings-action-status.error {
    background:
        rgba(237,106,114,.07);

    color:
        var(--red);
}


.wallet-settings-notice {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    margin:
        3px
        0
        10px;
}


.wallet-settings-notice strong {
    font-size:
        10px;
}


.wallet-settings-notice span,
.wallet-reset-pending {
    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.45;
}


.settings-danger-button {
    width:
        100%;

    padding:
        9px
        11px;

    border:
        1px solid
        rgba(237,106,114,.26);

    border-radius:
        9px;

    background:
        rgba(237,106,114,.055);

    color:
        var(--red);

    font-size:
        10px;

    font-weight:
        700;
}


.settings-danger-button:disabled {
    opacity:
        .45;

    cursor:
        default;
}


.wallet-reset-pending {
    display:
        block;

    margin-top:
        7px;
}


@media (max-width: 520px) {

    .settings-accordion summary,
    .settings-action-row {
        min-height:
            55px;
    }

    .settings-accordion-content {
        padding-left:
            49px;

        padding-right:
            10px;
    }
}



/* ==========================================================
   M4.7A1 · CLEAN LEFT SETTINGS
   ========================================================== */


/*
 * Drawer jetzt von LINKS.
 */
.settings-drawer {
    left: 0 !important;
    right: auto !important;

    border-left: 0 !important;
    border-right:
        1px solid
        var(--border) !important;

    box-shadow:
        18px 0 45px
        rgba(0,0,0,.30) !important;

    transform:
        translateX(-105%) !important;
}


.settings-drawer.open {
    transform:
        translateX(0) !important;
}


/*
 * Der neue Wallet-Eintrag oben ist momentan
 * doppelt zum vorhandenen TestWallet-Menü.
 *
 * Er bleibt im Source erhalten und wird beim
 * echten Wallet-Reset wieder verwendet.
 */
#settingsWalletDetails {
    display:
        none !important;
}


/*
 * Alte Konto-/Info-Kacheln,
 * die durch den neuen Settings Hub ersetzt wurden.
 */
.settings-legacy-duplicate-hidden {
    display:
        none !important;
}


/*
 * Der neue obere Hub etwas kompakter.
 */
.settings-hub {
    margin-top:
        2px;

    margin-bottom:
        18px;
}


.settings-hub-label {
    padding-top:
        9px;

    padding-bottom:
        6px;
}


/*
 * Keine dauerhafte rote Warnbox beim Teilen.
 * Fehlende Release-Version ist während Beta
 * nur ein neutraler Hinweis.
 */
.settings-action-status.error {
    background:
        rgba(247,147,26,.06);

    color:
        var(--muted);

    border:
        1px solid
        rgba(247,147,26,.12);
}



/* ==========================================================
   M4.7B1 · TESTWALLET PANEL
   ========================================================== */

.drawer-wallet-reset-panel {
    margin:
        0
        8px
        10px;

    padding:
        12px;

    border:
        1px solid
        rgba(144,155,170,.15);

    border-radius:
        11px;

    background:
        rgba(18,24,32,.72);

    animation:
        walletResetPanelIn
        .15s ease;
}


@keyframes walletResetPanelIn {

    from {
        opacity:
            0;

        transform:
            translateY(-4px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


.wallet-reset-panel-head {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.wallet-reset-panel-head strong {
    color:
        #dde3e9;

    font-size:
        11px;

    font-weight:
        700;
}


#walletResetState {
    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.4;
}


#walletResetState.ready {
    color:
        var(--green);
}


#walletResetState.blocked {
    color:
        var(--yellow);
}


.drawer-wallet-reset-panel p {
    margin:
        10px
        0;

    color:
        #aab4bf;

    font-size:
        9px;

    line-height:
        1.5;
}


.wallet-reset-preserve {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    margin-bottom:
        11px;

    padding:
        8px
        9px;

    border:
        1px solid
        rgba(144,155,170,.10);

    border-radius:
        8px;

    background:
        rgba(255,255,255,.018);
}


.wallet-reset-preserve span {
    color:
        var(--muted);

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .55px;
}


.wallet-reset-preserve strong {
    color:
        #c8d0d9;

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.45;
}


.drawer-wallet-reset-confirm {
    width:
        100%;

    padding:
        9px
        10px;

    border:
        1px solid
        rgba(237,106,114,.30);

    border-radius:
        8px;

    background:
        rgba(237,106,114,.07);

    color:
        var(--red);

    font-size:
        9px;

    font-weight:
        750;
}


.drawer-wallet-reset-confirm:disabled {
    opacity:
        .38;

    cursor:
        default;
}


.drawer-wallet-reset-cancel {
    width:
        100%;

    margin-top:
        6px;

    padding:
        7px
        10px;

    border:
        0;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        9px;
}


#drawerWalletButton.wallet-open {
    background:
        rgba(247,147,26,.035);
}



/* ==========================================================
   M4.7C · FULL RESET DANGER
   ========================================================== */

.drawer-wallet-reset-confirm.armed {
    border-color:
        rgba(237,106,114,.65);

    background:
        rgba(237,106,114,.15);

    font-weight:
        800;
}


#drawerWalletButton .drawer-item-icon {
    transition:
        transform .15s ease;
}


#drawerWalletButton.wallet-open
.drawer-item-icon {
    transform:
        scale(1.06);
}




/* ==========================================================
   M4.7E · PRODUCT INFORMATION
   ========================================================== */

.product-info-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.product-info-section {
    padding: 15px;

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

    border-radius: 14px;

    background:
        rgba(255,255,255,.018);
}


.product-info-section-title {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 13px;
}


.product-info-section-title > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}


.product-info-section-title strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
}


.product-info-section-title small {
    color: var(--muted);

    font-size: 10px;
    line-height: 1.3;
}


.product-info-symbol {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        var(--btc-soft);

    border:
        1px solid
        rgba(247,147,26,.22);

    color:
        var(--btc);

    font-size: 16px;
    font-weight: 800;
}


.product-info-section p {
    margin:
        0
        0
        11px;

    color:
        var(--muted);

    font-size: 11px;
    line-height: 1.6;
}


.product-info-section p:last-child {
    margin-bottom: 0;
}


.product-info-facts {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 7px;

    margin:
        14px
        0;
}


.product-info-facts > div {
    min-width: 0;

    padding:
        9px
        7px;

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

    border-radius: 10px;

    background:
        rgba(0,0,0,.10);

    text-align: center;
}


.product-info-facts span {
    display: block;

    margin-bottom: 3px;

    color:
        var(--muted);

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

    text-transform: uppercase;
    letter-spacing: .08em;
}


.product-info-facts strong {
    display: block;

    color:
        var(--text);

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

    overflow-wrap: anywhere;
}


.product-info-beta {
    border-color:
        rgba(247,147,26,.20);

    background:
        linear-gradient(
            145deg,
            rgba(247,147,26,.055),
            rgba(255,255,255,.012)
        );
}


.product-info-notice {
    background:
        rgba(255,255,255,.012);
}


.product-info-notice .product-info-symbol {
    background:
        rgba(255,255,255,.045);

    border-color:
        var(--border);

    color:
        var(--muted);

    font-family:
        Georgia,
        serif;

    font-size: 17px;
}


@media (max-width: 390px) {

    .product-info-section {
        padding: 13px;
    }


    .product-info-facts {
        gap: 5px;
    }


    .product-info-facts > div {
        padding:
            8px
            4px;
    }


    .product-info-facts strong {
        font-size: 9px;
    }
}



/* ==========================================================
   M4.7F · PLANNED LIVE TRADING
   ========================================================== */

.settings-live-plan {
    margin: 10px 0 12px;

    border:
        1px solid
        rgba(247,147,26,.28);

    border-radius: 16px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(247,147,26,.12),
            rgba(247,147,26,.035) 45%,
            rgba(255,255,255,.015)
        );

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.16);
}


.settings-live-plan > summary {
    list-style: none;

    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 70px;

    padding: 13px 14px;

    cursor: pointer;

    user-select: none;
}


.settings-live-plan > summary::-webkit-details-marker {
    display: none;
}


.settings-live-plan > summary:hover {
    background:
        rgba(247,147,26,.035);
}


.live-plan-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #ff9f1c,
            #f7931a
        );

    color: #fff;

    font-size: 21px;
    font-weight: 800;

    box-shadow:
        0 6px 18px
        rgba(247,147,26,.24);
}


.live-plan-summary-copy {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 5px;
}


.live-plan-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}


.live-plan-topline strong {
    color: var(--text);

    font-size: 12px;
    font-weight: 780;
}


.live-plan-summary-copy small {
    color: var(--muted);

    font-size: 9.5px;
    line-height: 1.35;
}


.live-plan-badge {
    display: inline-flex;
    align-items: center;

    min-height: 20px;

    padding:
        2px
        7px;

    border:
        1px solid
        rgba(247,147,26,.30);

    border-radius: 999px;

    background:
        rgba(247,147,26,.12);

    color:
        var(--btc);

    font-size: 7.5px;
    font-weight: 850;

    letter-spacing: .08em;
}


.settings-live-plan[open]
.settings-chevron {
    transform:
        rotate(90deg);
}


.live-plan-content {
    padding:
        4px
        14px
        15px;

    border-top:
        1px solid
        rgba(247,147,26,.13);
}


.live-plan-intro {
    padding:
        16px
        2px
        5px;
}


.live-plan-kicker {
    display: block;

    margin-bottom: 6px;

    color:
        var(--btc);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .12em;
}


.live-plan-intro h3 {
    margin:
        0
        0
        10px;

    color:
        var(--text);

    font-size: 16px;
    line-height: 1.25;
}


.live-plan-intro p {
    margin:
        0
        0
        10px;

    color:
        var(--muted);

    font-size: 10.5px;
    line-height: 1.58;
}


.live-plan-flow {
    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 8px;

    margin:
        12px
        0
        17px;
}


.live-plan-flow > div:not(
    .live-plan-flow-arrow
) {
    padding:
        11px
        7px;

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

    border-radius: 12px;

    background:
        rgba(0,0,0,.12);

    text-align: center;
}


.live-plan-flow span,
.live-plan-flow strong,
.live-plan-flow small {
    display: block;
}


.live-plan-flow span {
    margin-bottom: 4px;

    color:
        var(--muted);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .09em;
}


.live-plan-flow strong {
    color:
        var(--text);

    font-size: 10px;
}


.live-plan-flow small {
    margin-top: 3px;

    color:
        var(--btc);

    font-size: 8.5px;
}


.live-plan-flow-arrow {
    color:
        var(--btc);

    font-size: 17px;
    font-weight: 800;
}


.live-plan-section-title {
    margin:
        5px
        0
        9px;

    color:
        var(--muted);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.live-plan-requirements {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.live-plan-requirements article {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 11px;

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

    border-radius: 12px;

    background:
        rgba(255,255,255,.018);
}


.live-plan-number {
    flex: 0 0 27px;

    color:
        rgba(247,147,26,.68);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: .04em;
}


.live-plan-requirements article > div:last-child {
    min-width: 0;
}


.live-plan-requirements strong {
    display: block;

    margin-bottom: 4px;

    color:
        var(--text);

    font-size: 10.5px;
}


.live-plan-requirements p {
    margin: 0;

    color:
        var(--muted);

    font-size: 9.5px;
    line-height: 1.52;
}


.live-plan-security {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 13px;

    padding: 12px;

    border:
        1px solid
        rgba(247,147,26,.24);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(247,147,26,.08),
            rgba(247,147,26,.025)
        );
}


.live-plan-security-icon {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background:
        rgba(247,147,26,.13);

    color:
        var(--btc);

    font-size: 11px;
    font-weight: 900;
}


.live-plan-security strong {
    display: block;

    margin-bottom: 5px;

    color:
        var(--text);

    font-size: 10.5px;
}


.live-plan-security p {
    margin:
        0
        0
        6px;

    color:
        var(--muted);

    font-size: 9.5px;
    line-height: 1.5;
}


.live-plan-security p:last-child {
    margin-bottom: 0;
}


.live-plan-footer {
    margin-top: 13px;

    padding-top: 12px;

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


.live-plan-footer span {
    display: block;

    margin-bottom: 4px;

    color:
        var(--btc);

    font-size: 7.5px;
    font-weight: 850;

    letter-spacing: .11em;
}


.live-plan-footer strong {
    color:
        var(--text);

    font-size: 10px;
    line-height: 1.4;
}


@media (max-width: 390px) {

    .settings-live-plan > summary {
        padding:
            12px;
    }


    .live-plan-content {
        padding:
            4px
            12px
            13px;
    }


    .live-plan-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }
}



/* ==========================================================
   M4.7G · SETTINGS CLEAN TOP
   Entfernt den dünnen Trenner oberhalb der ersten Settings-Karte.
   ========================================================== */

#settingsHub {
    border-top: 0 !important;
}

#settingsHub::before,
#settingsHub::after {
    display: none !important;
    border: 0 !important;
    content: none !important;
}

#settingsHub > :first-child {
    border-top: 0 !important;
}



/* ==========================================================
   M4.7H · CONFIG ACTION FEEDBACK
   ========================================================== */

.config-factory-button.armed {
    border-color:
        rgba(247,147,26,.55) !important;

    background:
        rgba(247,147,26,.14) !important;

    color:
        var(--btc) !important;
}



/* ==========================================================
   M4.7J · REBUY DISTANCE GRID
   ========================================================== */

.config-editor-wrap:has(.config-rebuy-grid) {
    width: 100%;
    max-width: none;
}

.config-rebuy-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}

.config-rebuy-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid
        rgba(255,255,255,.08);
    border-radius: 10px;
    background:
        rgba(255,255,255,.025);
}

.config-rebuy-item-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.config-rebuy-item-label strong {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .025em;
}

.config-rebuy-item-label small {
    font-size: 9px;
    opacity: .55;
}

.config-rebuy-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid
        rgba(255,255,255,.10);
    border-radius: 8px;
    background:
        rgba(0,0,0,.18);
    color: inherit;
    font: inherit;
    text-align: right;
    outline: none;
}

.config-rebuy-input:focus {
    border-color:
        rgba(247,147,26,.60);
    box-shadow:
        0 0 0 2px
        rgba(247,147,26,.08);
}

.config-rebuy-empty {
    grid-column: 1 / -1;
    padding: 10px;
    font-size: 12px;
    opacity: .65;
}

/*
 * Die Einheit steht bereits in jedem einzelnen ReBUY-Feld.
 * Die bisherige zusätzliche USDC-Anzeige rechts daneben
 * wird für dieses Spezialfeld ausgeblendet.
 */
.config-rebuy-grid + .config-edit-unit {
    display: none;
}

@media (max-width: 390px) {

    .config-rebuy-grid {
        gap: 6px;
    }

    .config-rebuy-item {
        padding: 7px;
    }

    .config-rebuy-input {
        padding: 7px;
    }
}



/* ==========================================================
   M4.7K1 · DYNAMIC REBUY LEVELS
   ========================================================== */

.config-rebuy-summary {
    grid-column: 1 / -1;
    padding: 1px 2px 3px;
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
}

.config-rebuy-summary.warning {
    color: var(--red);
}

.config-rebuy-item {
    transition:
        opacity .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.config-rebuy-item.inactive {
    opacity: .34;

    border-color:
        rgba(144,155,170,.10);

    background:
        rgba(144,155,170,.015);
}

.config-rebuy-item.inactive
.config-rebuy-input {
    cursor: default;

    border-color:
        rgba(144,155,170,.09);

    background:
        rgba(0,0,0,.10);

    color:
        var(--muted);
}

.config-rebuy-input:disabled {
    opacity: 1;

    -webkit-text-fill-color:
        var(--muted);
}




/* ==========================================================
   M4.7K2 · PRODUCT CONFIG STATUS
   ========================================================== */

.config-product-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

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

    margin-top: 8px;

    padding:
        4px
        8px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1.2;

    letter-spacing:
        .01em;
}


.config-product-status::before {
    content: "";

    width: 6px;
    height: 6px;

    flex:
        0
        0
        6px;

    border-radius:
        50%;
}


/* AKTIV */

.config-product-status.status-active {
    color:
        #74d99a;

    border-color:
        rgba(77, 190, 119, .22);

    background:
        rgba(53, 158, 94, .08);
}

.config-product-status.status-active::before {
    background:
        #55c985;

    box-shadow:
        0 0 0 3px
        rgba(85, 201, 133, .08);
}


/* NOCH NICHT VERFÜGBAR */

.config-product-status.status-unavailable {
    color:
        #dc8383;

    border-color:
        rgba(201, 87, 87, .20);

    background:
        rgba(167, 61, 61, .065);
}

.config-product-status.status-unavailable::before {
    background:
        #cf6b6b;

    box-shadow:
        0 0 0 3px
        rgba(207, 107, 107, .07);
}


/* FREIGABE ERFORDERLICH */

.config-product-status.status-locked {
    color:
        #e6a65d;

    border-color:
        rgba(220, 143, 56, .24);

    background:
        rgba(205, 125, 39, .08);
}

.config-product-status.status-locked::before {
    background:
        #dc913f;

    box-shadow:
        0 0 0 3px
        rgba(220, 145, 63, .08);
}


/*
 * Nicht verfügbare / gesperrte Werte bewusst etwas ruhiger.
 * Sie bleiben vollständig lesbar.
 */

.config-field:has(.status-unavailable)
.config-field-value,

.config-field:has(.status-locked)
.config-field-value {
    opacity:
        .72;
}




/* ==========================================================
   M4.7K3 · CONFIG HELP + READABILITY
   Neutrales Blau für Information.
   Statusfarben Grün / Rot / Orange bleiben unverändert.
   ========================================================== */

.config-field-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.config-field-title strong {
    font-size: 12.5px;
    line-height: 1.35;
}

.config-info-button {
    width: 19px;
    height: 19px;
    min-width: 19px;

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

    padding: 0;
    margin: 0;

    border:
        1px solid
        rgba(109, 178, 255, .46);

    border-radius: 50%;

    background:
        rgba(42, 91, 142, .19);

    color:
        rgba(174, 214, 255, .96);

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .018);

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .12s ease;
}

.config-info-button:hover,
.config-info-button:focus-visible {
    background:
        rgba(53, 111, 172, .27);

    border-color:
        rgba(126, 192, 255, .66);

    outline: none;
}

.config-info-button:active {
    transform: scale(.93);
}


/* ---------- Dialog / Bottom Sheet ---------- */

body.config-help-open {
    overflow: hidden;
}

.config-help-overlay {
    position: fixed;
    inset: 0;

    z-index: 10050;

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

    padding:
        18px
        12px
        max(
            12px,
            env(safe-area-inset-bottom)
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .18s ease;
}

.config-help-overlay[hidden] {
    display: none;
}

.config-help-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.config-help-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(3, 8, 14, .68);

    backdrop-filter:
        blur(3px);

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

.config-help-sheet {
    position: relative;

    width:
        min(100%, 560px);

    max-height:
        min(82dvh, 720px);

    overflow-y: auto;
    overscroll-behavior: contain;

    padding:
        9px
        18px
        calc(
            20px +
            env(safe-area-inset-bottom)
        );

    border:
        1px solid
        rgba(115, 154, 194, .24);

    border-radius:
        22px 22px 18px 18px;

    background:
        linear-gradient(
            180deg,
            rgba(24, 32, 43, .995),
            rgba(16, 23, 32, .995)
        );

    box-shadow:
        0 -12px 45px
        rgba(0, 0, 0, .36);

    color:
        rgba(242, 246, 250, .98);

    transform:
        translateY(18px);

    transition:
        transform .18s ease;
}

.config-help-overlay.is-open
.config-help-sheet {
    transform:
        translateY(0);
}

.config-help-handle {
    width: 38px;
    height: 4px;

    margin:
        1px auto 12px;

    border-radius: 999px;

    background:
        rgba(160, 181, 203, .30);
}

.config-help-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 14px;
}

.config-help-eyebrow {
    margin-bottom: 5px;

    color:
        rgba(132, 194, 255, .86);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .075em;
}

.config-help-head h3 {
    margin: 0;

    color:
        rgba(248, 250, 253, .99);

    font-size: 20px;
    font-weight: 760;
    line-height: 1.22;
}

.config-help-close {
    width: 34px;
    height: 34px;
    min-width: 34px;

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

    padding: 0;

    border:
        1px solid
        rgba(142, 168, 194, .20);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .035);

    color:
        rgba(225, 233, 241, .90);

    font-size: 23px;
    font-weight: 400;
    line-height: 1;

    -webkit-tap-highlight-color:
        transparent;
}

.config-help-close:active {
    transform: scale(.96);
}

.config-help-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 17px;
    padding: 11px 13px;

    border:
        1px solid
        rgba(95, 157, 218, .20);

    border-radius: 12px;

    background:
        rgba(57, 109, 161, .075);
}

.config-help-current span {
    color:
        rgba(194, 208, 221, .82);

    font-size: 12.5px;
    font-weight: 600;
}

.config-help-current strong {
    max-width: 62%;

    color:
        rgba(239, 247, 255, .98);

    font-size: 13.5px;
    font-weight: 750;
    line-height: 1.35;

    text-align: right;
    overflow-wrap: anywhere;
}

.config-help-body {
    color:
        rgba(229, 236, 244, .94);

    font-size: 14.5px;
    line-height: 1.58;
}

.config-help-intro {
    margin:
        0 0 17px;

    color:
        rgba(240, 244, 249, .97);

    font-size: 14.7px;
    line-height: 1.6;
}

.config-help-section {
    margin: 0;
    padding: 13px 0;

    border-top:
        1px solid
        rgba(139, 160, 181, .115);
}

.config-help-section-title {
    margin-bottom: 5px;

    color:
        rgba(160, 207, 251, .95);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .015em;
}

.config-help-section p {
    margin: 0;

    color:
        rgba(225, 233, 241, .93);

    font-size: 14.4px;
    line-height: 1.58;
}

.config-help-warning {
    margin-top: 12px;
    padding: 11px 12px;

    border:
        1px solid
        rgba(247, 147, 26, .20);

    border-radius: 11px;

    background:
        rgba(247, 147, 26, .055);

    color:
        rgba(242, 229, 210, .94);

    font-size: 13.5px;
    line-height: 1.5;
}


/* ---------- sehr feine Lesbarkeitskorrektur ---------- */

/*
 * Nur sekundäre Texte werden minimal angehoben.
 * Hauptlayout, Abstände und Statusfarben bleiben unangetastet.
 */

.config-field-description {
    color:
        rgba(203, 214, 226, .78);

    font-size: 11.5px;
    line-height: 1.45;
}

.config-field-value {
    font-size: 12.5px;
}

.config-edit-control {
    font-size: 12.5px;
}

.config-edit-unit,
.config-rebuy-item-label,
.config-rebuy-summary {
    color:
        rgba(205, 216, 228, .78);
}

body .muted,
body .sub,
body .small-text {
    color:
        rgba(195, 207, 220, .76);
}


@media (min-width: 700px) {

    .config-help-overlay {
        align-items: center;
        padding: 24px;
    }

    .config-help-sheet {
        border-radius: 20px;

        box-shadow:
            0 22px 65px
            rgba(0, 0, 0, .42);
    }

    .config-help-handle {
        display: none;
    }
}




/* ==========================================================
   M4.7K3A · READABILITY BRIGHTNESS
   Nur Helligkeit/Kontrast.
   Schriftgrößen und Layout bleiben unverändert.
   ========================================================== */

.config-field-description {
    color:
        rgba(218, 226, 235, .88);
}

.config-edit-unit,
.config-rebuy-item-label,
.config-rebuy-summary {
    color:
        rgba(218, 226, 235, .86);
}

body .muted,
body .sub,
body .small-text {
    color:
        rgba(211, 220, 230, .84);
}


/* Info-Fenster */

.config-help-body {
    color:
        rgba(237, 242, 247, .97);
}

.config-help-intro {
    color:
        rgba(246, 248, 251, .99);
}

.config-help-section p {
    color:
        rgba(235, 241, 247, .96);
}

.config-help-current span {
    color:
        rgba(211, 221, 231, .89);
}

.config-help-section-title {
    color:
        rgba(177, 216, 253, .98);
}

.config-help-warning {
    color:
        rgba(247, 237, 223, .97);
}




/* ==========================================================
   M4.7K4 · BTC TRADER TYPOGRAPHY SYSTEM
   ==========================================================

   Zentrale Referenz für das komplette BTC-Trader-Web-UI.

   Die Größen basieren auf dem bestätigten M4.7K3/K3A-Stand.
   Komponenten mit bewusst großen Kennzahlen bleiben davon
   unabhängig.

   TEXT-ROLLEN:

   PRIMARY    = wichtige normale Texte
   SECONDARY  = Beschriftungen / Erklärungen
   MUTED      = ergänzende Informationen
   INFO       = neutrale blaue Informationsüberschriften

   ========================================================== */

:root {

    /* ------------------------------------------------------
       TEXTFARBEN
       ------------------------------------------------------ */

    --ui-text-primary:
        rgba(246, 248, 251, .99);

    --ui-text-secondary:
        rgba(218, 226, 235, .88);

    --ui-text-muted:
        rgba(211, 220, 230, .84);

    --ui-text-subtle:
        rgba(201, 212, 223, .78);

    --ui-text-info:
        rgba(177, 216, 253, .98);


    /* ------------------------------------------------------
       SCHRIFTGRÖSSEN
       ------------------------------------------------------ */

    --ui-font-page-title:
        23px;

    --ui-font-section-title:
        19px;

    --ui-font-body:
        14px;

    --ui-font-help:
        14.5px;

    --ui-font-field-title:
        12.5px;

    --ui-font-value-small:
        12.5px;

    --ui-font-secondary:
        11.5px;

    --ui-font-caption:
        10.5px;


    /* ------------------------------------------------------
       ZEILENHÖHEN
       ------------------------------------------------------ */

    --ui-line-tight:
        1.3;

    --ui-line-normal:
        1.45;

    --ui-line-readable:
        1.58;
}


/* ==========================================================
   GRUNDLAGE
   ========================================================== */

html,
body {
    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-body);
}


/* ==========================================================
   SEITENTITEL
   ========================================================== */

.topbar h1 {
    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-page-title);
}


/* ==========================================================
   BEREICHSÜBERSCHRIFTEN
   ========================================================== */

.section-title h2,
.panel-header h2,
.trade-history-head h2 {
    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-section-title);
}


/* ==========================================================
   KLEINE ÜBERSCHRIFTEN / LABELS
   ========================================================== */

.eyebrow,
.card-label,
.metric-head,
.status-head,
.compact-card > span,
.chart-summary span,
.info-list span,
.info-row > span,
.period-info,
.history-meta {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    line-height:
        var(--ui-line-tight);
}


/* ==========================================================
   SEKUNDÄRE BESCHREIBUNGEN
   ========================================================== */

.metric-card small,
.status-sub,
.hero-foot,
.trade-history-head > small,
.trade-empty,
.hint,
.auth-footer,
.footer,
.config-field-description {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    line-height:
        var(--ui-line-normal);
}


/* ==========================================================
   KLEINE WERTE / FELDTITEL
   ========================================================== */

.config-field-title strong,
.config-field-value,
.config-edit-control,
.config-rebuy-input {
    font-size:
        var(--ui-font-field-title);
}


.config-field-title strong {
    color:
        var(--ui-text-primary);
}


/* ==========================================================
   REBUY
   ========================================================== */

.config-edit-unit,
.config-rebuy-item-label,
.config-rebuy-summary {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);
}


/* ==========================================================
   TABELLEN
   ========================================================== */

.trade-table th {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-caption);
}


.trade-table td {
    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-value-small);
}


.history-panel td::before {
    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-font-caption);
}


/* ==========================================================
   ALLGEMEINE SEKUNDÄRTEXTE
   ========================================================== */

body .muted,
body .sub,
body .small-text {
    color:
        var(--ui-text-muted);
}


/* ==========================================================
   CONFIG INFO-FENSTER
   Der bereits bestätigte K3/K3A-Stand wird jetzt über
   zentrale Variablen definiert.
   ========================================================== */

.config-help-head h3 {
    color:
        var(--ui-text-primary);
}


.config-help-body {
    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-help);

    line-height:
        var(--ui-line-readable);
}


.config-help-intro {
    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-help);

    line-height:
        var(--ui-line-readable);
}


.config-help-section p {
    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-help);

    line-height:
        var(--ui-line-readable);
}


.config-help-section-title {
    color:
        var(--ui-text-info);

    font-size:
        var(--ui-font-field-title);
}


.config-help-current span {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-field-title);
}


.config-help-current strong {
    color:
        var(--ui-text-primary);
}


/* ==========================================================
   STATUS
   Statusfarben selbst bleiben bewusst separat:
   GRÜN / ROT / ORANGE.
   Nur Größe und Lesbarkeit werden zentral festgelegt.
   ========================================================== */

.config-product-status {
    font-size:
        var(--ui-font-caption);
}


/* ==========================================================
   MOBILE
   Keine eigene kleinere Schrift mehr für normale Texte.
   Dadurch bleibt die Lesbarkeit zwischen App und Desktop
   konsistent.
   ========================================================== */

@media (max-width: 560px) {

    body {
        font-size:
            var(--ui-font-body);
    }


    .topbar h1 {
        font-size:
            var(--ui-font-page-title);
    }


    .metric-card small {
        font-size:
            var(--ui-font-secondary);
    }


    .hero-foot {
        font-size:
            var(--ui-font-secondary);
    }


    .info-list span,
    .info-list strong {
        font-size:
            var(--ui-font-secondary);
    }


    .history-panel td::before {
        font-size:
            var(--ui-font-caption);
    }
}




/* ==========================================================
   M4.7K4A · SETTINGS MENU TYPOGRAPHY
   ==========================================================

   Einheitliche Hierarchie im kompletten Menü.

   Wichtig:
   - Hub-Menüpunkte und ältere Drawer-Menüpunkte sehen gleich aus.
   - Seitentitel und Bereichsüberschriften bleiben bewusst getrennt.
   - Keine Änderung an Abständen, Karten oder Icons.
   ========================================================== */


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

#settingsDrawer .drawer-header .eyebrow {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight:
        800;

    line-height:
        var(--ui-line-tight);

    letter-spacing:
        .14em;
}


#settingsDrawer .drawer-header h2 {
    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-page-title);

    font-weight:
        760;

    line-height:
        1.15;

    letter-spacing:
        -.025em;
}


/* ----------------------------------------------------------
   BEREICHSÜBERSCHRIFTEN
   APP & KONTO / TRADING / APP
   ---------------------------------------------------------- */

#settingsDrawer .drawer-section-title,

#settingsHub .settings-section-label,
#settingsHub .settings-menu-label {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight:
        800;

    line-height:
        var(--ui-line-tight);

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


/* ----------------------------------------------------------
   ALLE MENÜPUNKT-TITEL
   exakt dieselbe Ebene
   ---------------------------------------------------------- */

#settingsDrawer .drawer-item-text > strong,

#settingsHub .settings-row-copy > strong,
#settingsHub .settings-menu-item strong,
#settingsHub .settings-menu-card strong,
#settingsHub button strong,
#settingsHub [role="button"] strong {
    color:
        var(--ui-text-primary);

    font-size:
        14px;

    font-weight:
        740;

    line-height:
        1.30;

    letter-spacing:
        -.01em;
}


/* ----------------------------------------------------------
   ALLE MENÜPUNKT-BESCHREIBUNGEN
   ---------------------------------------------------------- */

#settingsDrawer .drawer-item-text > small,

#settingsHub .settings-row-copy > small,
#settingsHub .settings-menu-item small,
#settingsHub .settings-menu-card small,
#settingsHub button small,
#settingsHub [role="button"] small {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight:
        450;

    line-height:
        var(--ui-line-normal);
}


/* ----------------------------------------------------------
   PRODUCT BETA HINWEIS
   eigene Hierarchie – kein normaler Menüpunkt
   ---------------------------------------------------------- */

#settingsDrawer .drawer-note > strong {
    font-size:
        var(--ui-font-field-title);

    font-weight:
        760;

    line-height:
        var(--ui-line-tight);
}


#settingsDrawer .drawer-note > span {
    font-size:
        var(--ui-font-secondary);

    line-height:
        var(--ui-line-normal);
}


/* ----------------------------------------------------------
   Geplant-/Status-Badges bleiben klein.
   Falls sie innerhalb eines strong-Elements liegen,
   darf die Menü-Titelregel sie nicht künstlich vergrößern.
   ---------------------------------------------------------- */

#settingsHub .settings-badge,
#settingsHub .settings-status-badge,
#settingsHub .planned-badge,
#settingsHub .live-plan-badge {
    font-size:
        var(--ui-font-caption);

    line-height:
        1.2;
}




/* ==========================================================
   M4.7K4B · COMPACT TRADE HISTORY
   Nur Trade History etwas kompakter.
   Globale Typografie und Config bleiben unverändert.
   ========================================================== */

.trade-history-head h2 {
    font-size:
        18px;
}


/* "Aktualisiert 08:26:38" */

.trade-history-head > small,
.history-meta {
    font-size:
        10.5px;

    color:
        var(--ui-text-secondary);
}


/* Tabellenüberschriften */

.trade-table th {
    font-size:
        10.5px;

    padding-top:
        7px;

    padding-bottom:
        7px;
}


/* Tabellenwerte */

.trade-table td {
    font-size:
        11.8px;

    line-height:
        1.3;

    padding-top:
        7px;

    padding-bottom:
        7px;
}


/* BUY / REBUY / SELL etwas kompakter */

.trade-table td .trade-type,
.trade-table .trade-type,
.trade-table .buy,
.trade-table .rebuy,
.trade-table .sell {
    font-size:
        10.5px;
}


/* Mobile Beschriftungen */

.history-panel td::before {
    font-size:
        10px;
}


@media (max-width: 560px) {

    .trade-history-head h2 {
        font-size:
            18px;
    }

    .trade-table td {
        font-size:
            11.8px;

        padding-top:
            7px;

        padding-bottom:
            7px;
    }

    .trade-table th {
        font-size:
            10.5px;
    }
}




/* ==========================================================
   M4.7K4C · TRADE HISTORY PROFIT COLORS
   ==========================================================

   Explizit spezifischer als die zentrale
   .trade-table td Typografie-Regel.

   > 0  = grün
   < 0  = rot
   neutral / – = normale Textfarbe
   ========================================================== */

.trade-table td.trade-profit-positive {
    color:
        var(--green);

    font-weight:
        700;
}

.trade-table td.trade-profit-negative {
    color:
        var(--red);

    font-weight:
        700;
}




/* ==========================================================
   M4.7L3 · ACCOUNT DELETE UI
   ========================================================== */

.account-delete-zone {
    margin-top: 14px;
    padding-top: 14px;

    border-top:
        1px solid
        rgba(237,106,114,.15);
}


.account-delete-zone-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin-bottom: 10px;
}


.account-delete-zone-copy strong {
    color:
        var(--ui-text-primary, #f4f6f8);

    font-size:
        var(--ui-font-field-title, 12.5px);

    font-weight: 750;
}


.account-delete-zone-copy span {
    color:
        var(--ui-text-secondary, rgba(218,226,235,.88));

    font-size:
        var(--ui-font-secondary, 11.5px);

    line-height:
        var(--ui-line-normal, 1.45);
}


.account-delete-open-button {
    width: 100%;

    min-height: 42px;

    border:
        1px solid
        rgba(237,106,114,.28);

    border-radius: 10px;

    background:
        rgba(237,106,114,.055);

    color:
        var(--red);

    font-size:
        var(--ui-font-field-title, 12.5px);

    font-weight: 750;
}


.account-delete-open-button:active {
    background:
        rgba(237,106,114,.11);
}


.account-delete-overlay {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

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

    padding:
        18px
        14px
        max(
            18px,
            env(safe-area-inset-bottom)
        );

    background:
        rgba(4,7,11,.72);

    backdrop-filter:
        blur(7px);

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


body.account-delete-open {
    overflow: hidden;
}


.account-delete-dialog {
    width: min(100%, 520px);

    max-height:
        min(86vh, 720px);

    overflow-y: auto;

    padding: 20px;

    border:
        1px solid
        rgba(237,106,114,.24);

    border-radius: 20px;

    background:
        #171e28;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.48);

    animation:
        accountDeleteOpen
        .18s
        ease-out;
}


@keyframes accountDeleteOpen {

    from {
        opacity: 0;

        transform:
            translateY(16px)
            scale(.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.account-delete-dialog-head {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;
}


.account-delete-dialog-icon {
    display: grid;
    place-items: center;

    flex:
        0 0 42px;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(237,106,114,.34);

    border-radius: 13px;

    background:
        rgba(237,106,114,.09);

    color:
        var(--red);

    font-size: 20px;
    font-weight: 850;
}


.account-delete-dialog-head span {
    display: block;

    margin-bottom: 2px;

    color:
        var(--red);

    font-size:
        var(--ui-font-caption, 10.5px);

    font-weight: 800;

    letter-spacing: .10em;
}


.account-delete-dialog-head h2 {
    margin: 0;

    color:
        var(--ui-text-primary, #f4f6f8);

    font-size:
        var(--ui-font-section-title, 19px);

    line-height:
        var(--ui-line-tight, 1.3);
}


.account-delete-warning {
    padding: 13px 14px;

    border:
        1px solid
        rgba(237,106,114,.16);

    border-radius: 12px;

    background:
        rgba(237,106,114,.045);
}


.account-delete-warning strong {
    display: block;

    color:
        var(--ui-text-primary, #f4f6f8);

    font-size:
        var(--ui-font-field-title, 12.5px);

    line-height: 1.4;
}


.account-delete-warning p {
    margin:
        8px
        0
        0;

    color:
        var(--ui-text-secondary, rgba(218,226,235,.88));

    font-size:
        var(--ui-font-secondary, 11.5px);

    line-height:
        var(--ui-line-readable, 1.58);
}




.account-delete-field {
    display: block;

    margin-top: 12px;
}


.account-delete-field > span {
    display: block;

    margin-bottom: 6px;

    color:
        var(--ui-text-secondary, rgba(218,226,235,.88));

    font-size:
        var(--ui-font-secondary, 11.5px);

    font-weight: 650;
}


.account-delete-field input {
    width: 100%;

    min-height: 44px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(144,155,170,.24);

    border-radius: 10px;

    outline: none;

    background:
        rgba(8,12,18,.52);

    color:
        var(--ui-text-primary, #f4f6f8);

    font-size:
        var(--ui-font-body, 14px);
}


.account-delete-field input:focus {
    border-color:
        rgba(237,106,114,.52);

    box-shadow:
        0 0 0 3px
        rgba(237,106,114,.07);
}


.account-delete-field input:disabled {
    opacity: .62;
}


.account-delete-status {
    margin-top: 12px;

    padding:
        9px
        11px;

    border-radius: 9px;

    color:
        var(--ui-text-secondary, rgba(218,226,235,.88));

    background:
        rgba(255,255,255,.035);

    font-size:
        var(--ui-font-secondary, 11.5px);

    line-height: 1.45;
}


.account-delete-status.error {
    border:
        1px solid
        rgba(237,106,114,.20);

    background:
        rgba(237,106,114,.06);

    color:
        #ffb6bc;
}


.account-delete-status.working {
    border:
        1px solid
        rgba(247,147,26,.18);

    background:
        rgba(247,147,26,.055);

    color:
        #f7bd79;
}


.account-delete-actions {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 9px;

    margin-top: 17px;
}


.account-delete-cancel,
.account-delete-confirm {
    min-height: 44px;

    padding:
        9px
        11px;

    border-radius: 10px;

    font-size:
        var(--ui-font-field-title, 12.5px);

    font-weight: 750;
}


.account-delete-cancel {
    border:
        1px solid
        rgba(144,155,170,.20);

    background:
        rgba(255,255,255,.025);

    color:
        var(--ui-text-secondary, rgba(218,226,235,.88));
}


.account-delete-confirm {
    border:
        1px solid
        rgba(237,106,114,.42);

    background:
        rgba(237,106,114,.11);

    color:
        var(--red);
}


.account-delete-confirm:not(:disabled):active {
    background:
        rgba(237,106,114,.18);
}


.account-delete-confirm:disabled,
.account-delete-cancel:disabled {
    opacity: .42;

    cursor: default;
}


@media (min-width: 600px) {

    .account-delete-overlay {
        align-items: center;
    }
}


@media (max-width: 420px) {

    .account-delete-dialog {
        padding: 17px;
        border-radius: 17px;
    }


    .account-delete-actions {
        grid-template-columns: 1fr;
    }


    .account-delete-confirm {
        order: -1;
    }
}



/* ==========================================================
   M4.8B1 · BETA-FEEDBACK
   ========================================================== */

.beta-feedback-content {
    padding-top: 2px;
}


.beta-feedback-intro {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin: 2px 0 14px;
    padding: 12px 13px;

    border:
        1px solid
        rgba(247,147,26,.18);

    border-radius: 11px;

    background:
        rgba(247,147,26,.055);
}


.beta-feedback-intro strong {
    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-body);

    line-height:
        var(--ui-line-normal);
}


.beta-feedback-intro span,
.beta-feedback-hint {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    line-height:
        var(--ui-line-normal);
}


.beta-feedback-field {
    display: block;
    margin: 0 0 12px;
}


.beta-feedback-field > span {
    display: block;

    margin-bottom: 6px;

    color:
        var(--ui-text-primary);

    font-size:
        var(--ui-font-field-title);

    font-weight: 700;
}


.beta-feedback-field > span small {
    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight: 450;
}


.beta-feedback-field .config-edit-control {
    width: 100%;
    max-width: none;
    min-height: 43px;

    font-size:
        var(--ui-font-body);

    text-align: left;
}


.beta-feedback-send {
    width: 100%;
    min-height: 43px;
    margin-top: 3px;
}


.beta-feedback-hint {
    display: block;
    margin-top: 9px;
}




/* ==========================================================
   M5.1E-B · PERSONAL OPTIMIZER SUMMARY
   ========================================================== */

.optimizer-summary-card {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 13px 14px;
}

.optimizer-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.optimizer-summary-title > span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .10em;
}

.optimizer-summary-title > strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.optimizer-summary-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid rgba(144,155,170,.20);
    border-radius: 999px;
    background: rgba(144,155,170,.07);
    color: #c0c8d2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
}

.optimizer-summary-badge.is-on {
    border-color: rgba(70,201,139,.30);
    background: rgba(70,201,139,.09);
    color: var(--green);
}

.optimizer-summary-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(80px, .55fr)
        minmax(0, 1fr);
    gap: 7px;
}

.optimizer-summary-item {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(144,155,170,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
}

.optimizer-summary-item > span {
    display: block;
    margin-bottom: 4px;
    color: #c0c8d2;
    font-size: 11px;
    font-weight: 650;
}

.optimizer-summary-item > strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.optimizer-summary-hint {
    display: block;
    margin-top: 8px;
    color: #b7c0cc;
    font-size: 11px;
    line-height: 1.35;
}

.optimizer-summary-card.optimizer-active
.optimizer-summary-hint {
    color: var(--green);
}


@media (max-width: 620px) {

    .optimizer-summary-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .optimizer-summary-curve {
        grid-column: 1 / -1;
    }
}




/* ==========================================================
   M5.1G · CENTER CONFIG LOCK WARNING
   ========================================================== */

.config-center-warning {
    position: fixed;

    left: 50%;
    top: 50%;

    z-index: 99999;

    width: min(
        420px,
        calc(100vw - 34px)
    );

    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 15px 16px;

    border: 1px solid rgba(234,184,90,.46);
    border-radius: 15px;

    background:
        rgba(18,23,31,.97);

    box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.025);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    pointer-events: none;

    opacity: 0;

    transform:
        translate(-50%, -46%)
        scale(.97);

    transition:
        opacity .20s ease,
        transform .20s ease;
}

.config-center-warning.is-visible {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.config-center-warning-icon {
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    border-radius: 50%;

    border:
        1px solid rgba(234,184,90,.42);

    background:
        rgba(234,184,90,.10);

    color:
        var(--yellow);

    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.config-center-warning-copy {
    min-width: 0;
}

.config-center-warning-copy strong {
    display: block;

    margin-bottom: 4px;

    color:
        var(--yellow);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.config-center-warning-copy span {
    display: block;

    color:
        #e4e8ed;

    font-size: 13px;
    line-height: 1.45;
}


@media (max-width: 420px) {

    .config-center-warning {
        width:
            calc(100vw - 28px);

        padding:
            14px;
    }

    .config-center-warning-copy strong {
        font-size:
            15px;
    }

    .config-center-warning-copy span {
        font-size:
            13px;
    }
}




/* ==========================================================
   M5.1G2 · CENTER SUCCESS + CLICKABLE LOCKED SAVE
   ========================================================== */

.config-center-warning.success {
    border-color:
        rgba(70,201,139,.48);
}

.config-center-warning.success
.config-center-warning-icon {
    border-color:
        rgba(70,201,139,.44);

    background:
        rgba(70,201,139,.10);

    color:
        var(--green);
}

.config-center-warning.success
.config-center-warning-copy strong {
    color:
        var(--green);
}


/*
 * Optisch weiterhin als gesperrt erkennbar,
 * technisch aber klickbar für die Warnmeldung.
 */
.config-save-button.config-save-locked {
    opacity: .68;
    filter: saturate(.72);
    cursor: pointer;
}




/* ==========================================================
   M5.1H2 · CONFIG CENTER ERROR
   ========================================================== */

.config-center-warning.error {
    border-color:
        rgba(237,106,114,.52);
}

.config-center-warning.error
.config-center-warning-icon {
    border-color:
        rgba(237,106,114,.48);

    background:
        rgba(237,106,114,.11);

    color:
        #ffb6bc;
}

.config-center-warning.error
.config-center-warning-copy strong {
    color:
        #ffb6bc;
}




/* ==========================================================
   M5.1I · UI POLISH V1

   Ziele:
   - Dashboard besser lesbar
   - Config besser lesbar
   - App & Konto weniger gequetscht
   - Config-Schalter optisch wie Trading-Schalter
   - KEINE Änderung an Trading-/Config-Logik
   ========================================================== */


/* ==========================================================
   1 · DASHBOARD · SEKUNDÄRTEXTE HELLER
   ========================================================== */

#dashboardView .eyebrow,
#dashboardView .trader-hero p,
#dashboardView .trading-control-copy > span,

#dashboardView .primary-metric > span,
#dashboardView .primary-metric > small,

#dashboardView .detail-card > span,

#dashboardView .market-chart-summary > small,
#dashboardView .market-chart-legend,

#dashboardView .optimizer-summary-title > span,
#dashboardView .optimizer-summary-item > span,
#dashboardView .optimizer-summary-hint,

#dashboardView .system-item > span,
#dashboardView .system-item > small,

#dashboardView .trade-history-head > small,
#dashboardView .trade-empty,
#dashboardView .trade-table th,
#dashboardView .trade-rule {

    color:
        rgba(218, 226, 235, .90);
}


/*
 * Kleine Dashboard-Texte bekommen minimal mehr optisches Gewicht.
 * Schriftgröße bleibt bestehen.
 */
#dashboardView .primary-metric > small,
#dashboardView .system-item > small,
#dashboardView .optimizer-summary-hint,
#dashboardView .trade-history-head > small {

    font-weight:
        500;
}


/* Chart-Zusammenfassung */
#dashboardView .market-chart-summary > small {

    color:
        rgba(225, 232, 239, .92);
}


/* ==========================================================
   2 · EINSTELLUNGEN · KONTRAST
   ========================================================== */

#settingsDrawer .drawer-section-title,
#settingsDrawer .drawer-item-text > small,

#settingsHub .settings-hub-label,
#settingsHub .settings-row-copy > small,
#settingsHub .settings-info-row > span,

.config-readonly-notice span,
.config-group-title,
.config-field-description,
.config-edit-unit,
.config-rebuy-item-label,
.config-rebuy-summary,
.config-product-info,
.config-position-lock span,
.config-action-message {

    color:
        rgba(222, 229, 237, .91);
}


/*
 * APP & KONTO Überschrift soll nicht mehr ausgegraut wirken.
 */
#settingsHub .settings-hub-label {

    opacity:
        1;

    font-weight:
        800;
}


/*
 * Sekundärtext im Menü etwas stabiler darstellen.
 */
#settingsHub .settings-row-copy > small,
#settingsDrawer .drawer-item-text > small {

    font-weight:
        500;
}


/*
 * Account-Detailwerte im geöffneten Konto-Bereich.
 */
#settingsHub .settings-info-row > strong {

    color:
        rgba(242, 246, 250, .97);
}


/*
 * Produkttexte ebenfalls besser lesbar.
 */
#settingsHub .product-info-content p {

    color:
        rgba(220, 228, 237, .90);
}


/* ==========================================================
   3 · APP & KONTO · MEHR LUFT
   ========================================================== */

#settingsHub {

    margin-top:
        6px;

    margin-bottom:
        22px;

    border-radius:
        16px;
}


#settingsHub .settings-hub-label {

    padding:
        13px
        15px
        10px;
}


/*
 * Konto / Produktinformation / LIVE / Teilen / Feedback
 */
#settingsHub .settings-accordion summary,
#settingsHub .settings-action-row {

    min-height:
        68px;

    gap:
        13px;

    padding:
        13px
        15px;
}


/*
 * Icons bekommen passend zur größeren Zeilenhöhe etwas mehr Raum.
 */
#settingsHub .settings-row-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0
        38px;

    border-radius:
        11px;
}


#settingsHub .settings-row-copy {

    gap:
        4px;
}


#settingsHub .settings-chevron {

    margin-left:
        3px;
}


/*
 * Geöffneter Inhalt orientiert sich jetzt am größeren Icon.
 */
#settingsHub .settings-accordion-content {

    padding-left:
        66px;

    padding-right:
        15px;

    padding-bottom:
        15px;
}


/* ==========================================================
   4 · NORMALER DRAWER-BEREICH
   TRADING / EINSTELLUNGEN / RESET
   ========================================================== */

#settingsDrawer .drawer-section {

    margin-top:
        24px;
}


#settingsDrawer .drawer-section-title {

    margin-bottom:
        10px;
}


#settingsDrawer .drawer-item {

    min-height:
        64px;

    grid-template-columns:
        38px
        1fr
        auto;

    gap:
        12px;

    padding:
        13px
        14px;

    margin-bottom:
        10px;
}


#settingsDrawer .drawer-item-icon {

    width:
        38px;

    height:
        38px;

    border-radius:
        11px;
}


#settingsDrawer .drawer-item-text > small {

    margin-top:
        4px;
}


/* ==========================================================
   5 · CONFIG-SCHALTER
   EXAKT DIESELBE GRÖSSENSPRACHE WIE TRADING
   ========================================================== */

.config-switch {

    min-height:
        28px;

    gap:
        9px;
}


.config-switch-track {

    width:
        48px;

    height:
        28px;

    flex:
        0 0
        48px;

    border-radius:
        999px;

    transition:
        .20s ease;
}


.config-switch-track::after {

    top:
        4px;

    left:
        4px;

    width:
        18px;

    height:
        18px;

    transition:
        .20s ease;
}


.config-switch input:checked
+ .config-switch-track {

    border-color:
        rgba(70,201,139,.44);

    background:
        rgba(70,201,139,.13);
}


.config-switch input:checked
+ .config-switch-track::after {

    transform:
        translateX(20px);

    background:
        var(--green);
}


.config-switch input:not(:checked)
+ .config-switch-track::after {

    background:
        rgba(190, 201, 213, .84);
}


.config-switch input:disabled
+ .config-switch-track {

    opacity:
        .48;
}


.config-switch-text {

    min-width:
        27px;

    color:
        rgba(238, 243, 248, .96);

    font-weight:
        800;
}


/*
 * Tastatur-/Accessibility-Fokus
 */
.config-switch input:focus-visible
+ .config-switch-track {

    outline:
        2px solid
        rgba(70,201,139,.38);

    outline-offset:
        2px;
}


/* ==========================================================
   6 · MOBILE
   Keine Verkleinerung des neuen Layouts.
   ========================================================== */

@media (max-width: 520px) {

    #settingsHub .settings-accordion summary,
    #settingsHub .settings-action-row {

        min-height:
            66px;
    }


    #settingsHub .settings-accordion-content {

        padding-left:
            63px;

        padding-right:
            13px;
    }
}




/* ==========================================================
   M5.1J · UI POLISH V2A · CLEAN MENU

   Referenz:
   aufgeräumte Navigation des originalen BTC Trader.

   Ziele:
   - keine schwere Sammelkachel mehr
   - klare Menüzeilen
   - dezente Trennlinien
   - mehr freie Fläche
   - Orange nur als Akzent
   - bestehende Funktionen unverändert
   ========================================================== */


/* ==========================================================
   DRAWER · GRUNDFLÄCHE
   ========================================================== */

#settingsDrawer {

    padding-left:
        18px;

    padding-right:
        18px;
}


#settingsDrawer .drawer-header {

    padding-left:
        2px;

    padding-right:
        2px;

    padding-bottom:
        18px;
}


/*
 * Mehr Abstand zwischen Kopf und Navigation.
 */
#settingsDrawer .drawer-header + #settingsHub {

    margin-top:
        13px;
}


/* ==========================================================
   APP & KONTO · SAMMELKACHEL AUFLÖSEN
   ========================================================== */

#settingsHub {

    margin:
        10px
        0
        20px;

    border:
        0 !important;

    border-radius:
        0 !important;

    overflow:
        visible;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/*
 * Kleine ruhige Gruppenüberschrift.
 */
#settingsHub .settings-hub-label {

    padding:
        5px
        4px
        9px;

    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


/* ==========================================================
   APP & KONTO · NORMALE MENÜZEILEN
   ========================================================== */

#settingsHub .settings-accordion {

    margin:
        0;

    border:
        0;
}


#settingsHub .settings-accordion summary,
#settingsHub .settings-action-row {

    min-height:
        60px;

    gap:
        12px;

    margin:
        0;

    padding:
        11px
        4px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(144,155,170,.17);

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;
}


#settingsHub .settings-accordion:first-of-type summary {

    border-top:
        1px solid
        rgba(144,155,170,.17);
}


#settingsHub .settings-accordion summary:active,
#settingsHub .settings-action-row:active {

    background:
        rgba(255,255,255,.028);
}


/* ==========================================================
   APP & KONTO · ICONS
   ========================================================== */

#settingsHub .settings-row-icon {

    width:
        34px;

    height:
        34px;

    flex:
        0 0
        34px;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--btc);

    font-size:
        18px;

    font-weight:
        800;
}


/*
 * Klarere Textstruktur.
 */
#settingsHub .settings-row-copy {

    gap:
        3px;
}


#settingsHub .settings-row-copy > strong {

    color:
        var(--ui-text-primary);

    font-size:
        14px;

    font-weight:
        720;

    line-height:
        1.30;
}


#settingsHub .settings-row-copy > small {

    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight:
        500;

    line-height:
        1.40;
}


#settingsHub .settings-chevron {

    margin-left:
        6px;

    color:
        var(--ui-text-muted);

    font-size:
        22px;
}


/* ==========================================================
   GEÖFFNETE UNTERBEREICHE
   ========================================================== */

#settingsHub .settings-accordion-content {

    margin:
        0
        0
        7px;

    padding:
        10px
        8px
        14px
        46px;

    border-bottom:
        1px solid
        rgba(144,155,170,.12);

    background:
        transparent;
}


/* ==========================================================
   GEPLANTER LIVE-HANDEL
   Nicht mehr als große orange Werbekachel.
   Orange bleibt als dezenter Produktakzent.
   ========================================================== */

#settingsHub .settings-live-plan {

    margin:
        0;

    border:
        0;

    border-radius:
        0;

    overflow:
        visible;

    background:
        transparent;

    box-shadow:
        none;
}


#settingsHub .settings-live-plan > summary {

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        0;

    padding:
        11px
        4px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(144,155,170,.17);

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;
}


#settingsHub .settings-live-plan > summary:active {

    background:
        rgba(247,147,26,.035);
}


#settingsHub .live-plan-icon {

    width:
        34px;

    height:
        34px;

    flex:
        0 0
        34px;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--btc);

    box-shadow:
        none;

    font-size:
        19px;

    font-weight:
        850;
}


#settingsHub .live-plan-summary-copy {

    min-width:
        0;

    flex:
        1;
}


#settingsHub .live-plan-topline {

    gap:
        8px;
}


#settingsHub .live-plan-topline strong {

    color:
        var(--ui-text-primary);

    font-size:
        14px;

    font-weight:
        720;

    line-height:
        1.3;
}


#settingsHub .live-plan-summary-copy > small {

    margin-top:
        3px;

    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight:
        500;

    line-height:
        1.4;
}


/*
 * GEPLANT bleibt sichtbar,
 * aber deutlich ruhiger als vorher.
 */
#settingsHub .live-plan-badge {

    padding:
        3px
        6px;

    border:
        1px solid
        rgba(247,147,26,.25);

    background:
        rgba(247,147,26,.055);

    color:
        var(--btc);

    box-shadow:
        none;
}


/* ==========================================================
   TRADING · EINSTELLUNGEN / RESET
   Ebenfalls normale Navigationszeilen.
   ========================================================== */

#settingsDrawer > .drawer-section {

    margin-top:
        19px;
}


#settingsDrawer > .drawer-section
> .drawer-section-title {

    margin:
        0
        4px
        8px;

    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight:
        800;

    letter-spacing:
        .12em;
}


#settingsDrawer > .drawer-section
> .drawer-item {

    min-height:
        60px;

    grid-template-columns:
        34px
        minmax(0,1fr)
        auto;

    gap:
        12px;

    margin:
        0;

    padding:
        11px
        4px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(144,155,170,.17);

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;
}


#settingsDrawer > .drawer-section
> .drawer-item:first-of-type {

    border-top:
        1px solid
        rgba(144,155,170,.17);
}


#settingsDrawer > .drawer-section
> .drawer-item:active {

    background:
        rgba(255,255,255,.028);
}


#settingsDrawer > .drawer-section
> .drawer-item
.drawer-item-icon {

    width:
        34px;

    height:
        34px;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--btc);

    font-size:
        18px;

    font-weight:
        800;
}


#settingsDrawer > .drawer-section
> .drawer-item
.drawer-item-text strong {

    color:
        var(--ui-text-primary);

    font-size:
        14px;

    font-weight:
        720;
}


#settingsDrawer > .drawer-section
> .drawer-item
.drawer-item-text small {

    margin-top:
        3px;

    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight:
        500;

    line-height:
        1.4;
}


/* ==========================================================
   PRODUCT BETA · RUHIGER FOOTER STATT KACHEL
   ========================================================== */

#settingsDrawer > .drawer-note {

    margin:
        23px
        4px
        0;

    padding:
        16px
        0
        3px;

    border:
        0;

    border-top:
        1px solid
        rgba(144,155,170,.14);

    border-radius:
        0;

    background:
        transparent;
}


#settingsDrawer > .drawer-note > strong {

    color:
        var(--btc);

    font-size:
        var(--ui-font-field-title);

    font-weight:
        750;
}


#settingsDrawer > .drawer-note > span {

    margin-top:
        5px;

    color:
        var(--ui-text-secondary);

    font-size:
        var(--ui-font-secondary);

    font-weight:
        500;

    line-height:
        1.45;
}


/* ==========================================================
   HANDY
   ========================================================== */

@media (max-width: 520px) {

    #settingsDrawer {

        padding-left:
            17px;

        padding-right:
            17px;
    }


    #settingsHub .settings-accordion summary,
    #settingsHub .settings-action-row,
    #settingsHub .settings-live-plan > summary,

    #settingsDrawer > .drawer-section
    > .drawer-item {

        min-height:
            58px;
    }


    #settingsHub .settings-accordion-content {

        padding-left:
            46px;

        padding-right:
            5px;
    }
}




/* ==========================================================
   M5.1K · UI POLISH V2B · SUBTLE DASHBOARD GLOW

   Referenz:
   dezente Tiefe des originalen LIVE-Trader-Dashboards.

   Kein Neon.
   Keine Layoutänderung.
   Keine Funktionsänderung.

   Variablen sind bereits für das spätere UI-Hell-Theme
   vorbereitet und können dort separat überschrieben werden.
   ========================================================== */

:root {

    --dashboard-card-shadow:
        0 8px 24px rgba(0,0,0,.20),
        0 0 20px rgba(247,147,26,.025),
        inset 0 1px 0 rgba(255,255,255,.018);

    --dashboard-card-shadow-primary:
        0 10px 28px rgba(0,0,0,.22),
        0 0 24px rgba(247,147,26,.040),
        inset 0 1px 0 rgba(255,255,255,.022);

    --dashboard-card-border:
        rgba(144,155,170,.21);

    --dashboard-card-border-primary:
        rgba(166,174,185,.23);
}


/* ==========================================================
   HAUPTKARTEN
   ========================================================== */

#dashboardView .primary-metric,
#dashboardView .detail-card,
#dashboardView .market-chart-card,
#dashboardView .optimizer-summary-card,
#dashboardView .trader-system-card,
#dashboardView .trade-history-card {

    box-shadow:
        var(--dashboard-card-shadow);

    border-color:
        var(--dashboard-card-border);
}


/*
 * Hauptwerte und Marktchart dürfen minimal stärker wirken.
 */
#dashboardView .primary-metric,
#dashboardView .market-chart-card {

    box-shadow:
        var(--dashboard-card-shadow-primary);

    border-color:
        var(--dashboard-card-border-primary);
}


/* ==========================================================
   HERO / TRADING CONTROL
   Sehr zurückhaltend, damit oben keine zweite starke
   Leuchtfläche entsteht.
   ========================================================== */

#dashboardView .trader-hero {

    box-shadow:
        0 7px 22px rgba(0,0,0,.17),
        0 0 18px rgba(247,147,26,.020),
        inset 0 1px 0 rgba(255,255,255,.018);
}


#dashboardView .trading-control-bar {

    box-shadow:
        0 6px 18px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.014);
}


/* ==========================================================
   AKTIVER TRADING-STATUS
   Nur ein hauchdünner grüner Schimmer.
   ========================================================== */

#dashboardView
.trading-control-bar[data-mode="ACTIVE"] {

    box-shadow:
        0 6px 18px rgba(0,0,0,.15),
        0 0 18px rgba(70,201,139,.035),
        inset 0 1px 0 rgba(255,255,255,.014);
}


/* ==========================================================
   AKTIVER OPTIMIZER
   Ebenfalls nur minimal hervorheben.
   ========================================================== */

#dashboardView
.optimizer-summary-card.optimizer-active {

    box-shadow:
        0 8px 24px rgba(0,0,0,.20),
        0 0 20px rgba(70,201,139,.030),
        inset 0 1px 0 rgba(255,255,255,.018);
}


/* ==========================================================
   INNER CARDS
   Etwas Tiefe ohne zusätzlichen Glow.
   ========================================================== */

#dashboardView .system-item,
#dashboardView .optimizer-summary-item {

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.016);
}


/* ==========================================================
   MOBILE
   Gleiche Wirkung, minimal schwächer wegen kleiner Fläche.
   ========================================================== */

@media (max-width: 520px) {

    #dashboardView .primary-metric,
    #dashboardView .detail-card,
    #dashboardView .market-chart-card,
    #dashboardView .optimizer-summary-card,
    #dashboardView .trader-system-card,
    #dashboardView .trade-history-card {

        box-shadow:
            0 6px 19px rgba(0,0,0,.18),
            0 0 16px rgba(247,147,26,.024),
            inset 0 1px 0 rgba(255,255,255,.016);
    }


    #dashboardView .primary-metric,
    #dashboardView .market-chart-card {

        box-shadow:
            0 7px 22px rgba(0,0,0,.20),
            0 0 19px rgba(247,147,26,.034),
            inset 0 1px 0 rgba(255,255,255,.020);
    }
}




/* ==========================================================
   M5.1L · UI POLISH V2C · UI DARK / UI HELL

   UI Dark:
   bestehender bestätigter Stand bleibt Referenz.

   UI Hell:
   eigenes helles Design, keine Farbinvertierung.

   Orange bleibt Produkt-Akzent.
   ========================================================== */


/* ==========================================================
   DESIGN-SCHALTER IM MENÜ
   ========================================================== */

#settingsHub .settings-theme-block {

    margin:
        0
        0
        13px;

    padding:
        0
        0
        13px;

    border-bottom:
        1px solid
        rgba(144,155,170,.17);
}


#settingsHub .settings-theme-row {

    min-height:
        58px;

    display:
        grid;

    grid-template-columns:
        34px
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        12px;

    padding:
        8px
        4px;
}


#settingsHub .settings-theme-icon {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--btc);

    font-size:
        20px;

    font-weight:
        800;
}


#settingsHub .settings-theme-copy {

    min-width:
        0;
}


#settingsHub .settings-theme-copy strong {

    display:
        block;

    color:
        var(--ui-text-primary, var(--text));

    font-size:
        14px;

    font-weight:
        720;

    line-height:
        1.3;
}


#settingsHub .settings-theme-copy small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--ui-text-secondary, var(--muted));

    font-size:
        var(--ui-font-secondary, 11.5px);

    font-weight:
        500;

    line-height:
        1.4;
}


/*
 * Gleiche Größenfamilie wie Trading-/Config-Schalter.
 * Orange statt Grün, weil dies keine AN/AUS-Funktion ist.
 */
.settings-theme-switch {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        8px;

    margin:
        0;

    cursor:
        pointer;
}


.settings-theme-switch input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.settings-theme-switch-track {

    position:
        relative;

    width:
        48px;

    height:
        28px;

    flex:
        0 0
        48px;

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

    border-radius:
        999px;

    background:
        var(--surface2);

    transition:
        .20s ease;
}


.settings-theme-switch-track::after {

    content:
        "";

    position:
        absolute;

    top:
        4px;

    left:
        4px;

    width:
        18px;

    height:
        18px;

    border-radius:
        50%;

    background:
        var(--muted);

    transition:
        .20s ease;
}


.settings-theme-switch
input:checked
+ .settings-theme-switch-track {

    border-color:
        rgba(247,147,26,.48);

    background:
        rgba(247,147,26,.12);
}


.settings-theme-switch
input:checked
+ .settings-theme-switch-track::after {

    transform:
        translateX(20px);

    background:
        var(--btc);
}


.settings-theme-switch
input:focus-visible
+ .settings-theme-switch-track {

    outline:
        2px solid
        rgba(247,147,26,.40);

    outline-offset:
        2px;
}


.settings-theme-switch-text {

    min-width:
        45px;

    color:
        var(--ui-text-secondary, var(--muted));

    font-size:
        9.5px;

    font-weight:
        800;

    letter-spacing:
        .035em;

    text-align:
        right;
}


/* ==========================================================
   UI HELL · FARBPALETTE
   ========================================================== */

html[data-theme="light"] {

    color-scheme:
        light;

    --bg:
        #f3f5f8;

    --surface:
        #ffffff;

    --surface2:
        #edf1f5;

    --border:
        #d5dce5;

    --text:
        #171c23;

    --muted:
        #5e6a78;

    --btc:
        #e98912;

    --btc-soft:
        rgba(233,137,18,.10);

    --chart-blue:
        #1975c5;

    --green:
        #24845c;

    --yellow:
        #a86b0b;

    --red:
        #c94d57;


    --ui-text-primary:
        #171c23;

    --ui-text-secondary:
        #566372;

    --ui-text-muted:
        #778391;


    --dashboard-card-shadow:
        0 8px 22px
            rgba(31,42,55,.085),
        0 0 18px
            rgba(233,137,18,.025),
        inset 0 1px 0
            rgba(255,255,255,.92);

    --dashboard-card-shadow-primary:
        0 10px 26px
            rgba(31,42,55,.10),
        0 0 22px
            rgba(233,137,18,.040),
        inset 0 1px 0
            rgba(255,255,255,.96);

    --dashboard-card-border:
        rgba(113,126,141,.22);

    --dashboard-card-border-primary:
        rgba(113,126,141,.27);
}


/* ==========================================================
   UI HELL · BASIS
   ========================================================== */

html[data-theme="light"],
html[data-theme="light"] body {

    background:
        #f3f5f8;

    color:
        var(--text);
}


html[data-theme="light"] body {

    background:
        linear-gradient(
            180deg,
            #f8f9fb 0,
            #f3f5f8 180px,
            #eef2f6 100%
        );
}


/* ==========================================================
   UI HELL · TOPBAR
   ========================================================== */

html[data-theme="light"]
.topbar .icon-button,

html[data-theme="light"]
.drawer-close-button,

html[data-theme="light"]
.drawer-back-button {

    border-color:
        var(--border);

    background:
        rgba(255,255,255,.92);

    color:
        var(--text);

    box-shadow:
        0 4px 14px
        rgba(31,42,55,.055);
}


html[data-theme="light"]
.topbar-brand-copy span {

    color:
        var(--ui-text-secondary);

    opacity:
        1;
}


/* ==========================================================
   UI HELL · DASHBOARD
   ========================================================== */

html[data-theme="light"]
#dashboardView .trader-hero,

html[data-theme="light"]
#dashboardView .primary-metric,

html[data-theme="light"]
#dashboardView .detail-card,

html[data-theme="light"]
#dashboardView .market-chart-card,

html[data-theme="light"]
#dashboardView .optimizer-summary-card,

html[data-theme="light"]
#dashboardView .trader-system-card,

html[data-theme="light"]
#dashboardView .trade-history-card {

    background:
        rgba(255,255,255,.96);
}


html[data-theme="light"]
#dashboardView .trading-control-bar {

    background:
        rgba(255,255,255,.86);

    border-color:
        rgba(113,126,141,.22);
}


html[data-theme="light"]
#dashboardView .system-item,

html[data-theme="light"]
#dashboardView .optimizer-summary-item {

    border-color:
        rgba(113,126,141,.16);

    background:
        #f6f8fa;
}


/*
 * UI-Polish V1 hatte Dark-spezifische feste Textfarben.
 * Im Light-Theme werden sie bewusst neu gesetzt.
 */
html[data-theme="light"]
#dashboardView .eyebrow,

html[data-theme="light"]
#dashboardView .trader-hero p,

html[data-theme="light"]
#dashboardView .trading-control-copy > span,

html[data-theme="light"]
#dashboardView .primary-metric > span,

html[data-theme="light"]
#dashboardView .primary-metric > small,

html[data-theme="light"]
#dashboardView .detail-card > span,

html[data-theme="light"]
#dashboardView .market-chart-summary > small,

html[data-theme="light"]
#dashboardView .market-chart-legend,

html[data-theme="light"]
#dashboardView .optimizer-summary-title > span,

html[data-theme="light"]
#dashboardView .optimizer-summary-item > span,

html[data-theme="light"]
#dashboardView .optimizer-summary-hint,

html[data-theme="light"]
#dashboardView .system-item > span,

html[data-theme="light"]
#dashboardView .system-item > small,

html[data-theme="light"]
#dashboardView .trade-history-head > small,

html[data-theme="light"]
#dashboardView .trade-empty,

html[data-theme="light"]
#dashboardView .trade-table th,

html[data-theme="light"]
#dashboardView .trade-rule {

    color:
        var(--ui-text-secondary);
}


html[data-theme="light"]
.optimizer-summary-badge {

    border-color:
        rgba(113,126,141,.22);

    background:
        #f1f4f7;

    color:
        #596574;
}


html[data-theme="light"]
.optimizer-summary-hint {

    color:
        var(--ui-text-secondary);
}


html[data-theme="light"]
.trade-table th {

    background:
        rgba(31,42,55,.035);
}


/* ==========================================================
   UI HELL · CHART
   ========================================================== */

html[data-theme="light"]
.market-range-buttons button {

    border-color:
        var(--border);

    background:
        #f1f4f7;

    color:
        var(--ui-text-secondary);
}


html[data-theme="light"]
.market-range-buttons button.active {

    border-color:
        rgba(233,137,18,.42);

    background:
        rgba(233,137,18,.095);

    color:
        #a45e08;
}


html[data-theme="light"]
.market-chart-reset {

    background:
        rgba(255,255,255,.94);

    color:
        var(--chart-blue);

    box-shadow:
        0 5px 16px
        rgba(31,42,55,.10);
}


/* ==========================================================
   UI HELL · DRAWER / MENÜ
   ========================================================== */

html[data-theme="light"]
.settings-drawer {

    background:
        #f7f8fa;

    border-right-color:
        var(--border) !important;

    box-shadow:
        18px 0 45px
        rgba(31,42,55,.16) !important;
}


html[data-theme="light"]
.drawer-header {

    border-bottom-color:
        var(--border);
}


html[data-theme="light"]
#settingsHub .settings-accordion summary:active,

html[data-theme="light"]
#settingsHub .settings-action-row:active,

html[data-theme="light"]
#settingsDrawer > .drawer-section
> .drawer-item:active {

    background:
        rgba(31,42,55,.035);
}


html[data-theme="light"]
#settingsHub .settings-hub-label,

html[data-theme="light"]
#settingsDrawer .drawer-section-title,

html[data-theme="light"]
#settingsDrawer .drawer-item-text > small,

html[data-theme="light"]
#settingsHub .settings-row-copy > small,

html[data-theme="light"]
#settingsHub .settings-info-row > span {

    color:
        var(--ui-text-secondary);
}


html[data-theme="light"]
#settingsHub .settings-info-row > strong {

    color:
        var(--ui-text-primary);
}


html[data-theme="light"]
#settingsHub .settings-theme-block {

    border-bottom-color:
        rgba(113,126,141,.20);
}


/* ==========================================================
   UI HELL · LOGIN / FORMULARE
   ========================================================== */

html[data-theme="light"]
.auth-tabs {

    background:
        #e9edf2;
}


html[data-theme="light"]
.tab-button {

    color:
        var(--ui-text-secondary);
}


html[data-theme="light"]
.tab-button.active {

    background:
        #ffffff;

    color:
        var(--text);

    box-shadow:
        0 3px 10px
        rgba(31,42,55,.07);
}


html[data-theme="light"]
input,

html[data-theme="light"]
.config-edit-control {

    border-color:
        var(--border);

    background:
        #ffffff;

    color:
        var(--text);
}


html[data-theme="light"]
label {

    color:
        var(--ui-text-secondary);
}


/* ==========================================================
   UI HELL · CONFIG
   ========================================================== */

html[data-theme="light"]
.config-field,

html[data-theme="light"]
.config-loading,

html[data-theme="light"]
.config-header-box,

html[data-theme="light"]
.config-action-message {

    border-color:
        var(--border);

    background:
        #ffffff;
}


html[data-theme="light"]
.config-field-value {

    background:
        #edf1f5;

    color:
        var(--text);
}


html[data-theme="light"]
.config-field-description,

html[data-theme="light"]
.config-edit-unit,

html[data-theme="light"]
.config-rebuy-item-label,

html[data-theme="light"]
.config-rebuy-summary,

html[data-theme="light"]
.config-readonly-notice span,

html[data-theme="light"]
.config-group-title,

html[data-theme="light"]
.config-product-info,

html[data-theme="light"]
.config-position-lock span,

html[data-theme="light"]
.config-action-message {

    color:
        var(--ui-text-secondary);
}


html[data-theme="light"]
.config-rebuy-item {

    border-color:
        rgba(113,126,141,.18);

    background:
        #f6f8fa;
}


html[data-theme="light"]
.config-actions {

    background:
        linear-gradient(
            to bottom,
            rgba(243,245,248,0),
            var(--bg) 22%
        );
}


/* ==========================================================
   UI HELL · INFO / HILFE
   ========================================================== */

html[data-theme="light"]
.config-help-sheet {

    border-color:
        rgba(113,126,141,.24);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4f6f9
        );

    color:
        var(--text);

    box-shadow:
        0 22px 65px
        rgba(31,42,55,.20);
}


html[data-theme="light"]
.config-help-head h3,

html[data-theme="light"]
.config-help-current strong {

    color:
        var(--ui-text-primary);
}


html[data-theme="light"]
.config-help-body,

html[data-theme="light"]
.config-help-intro,

html[data-theme="light"]
.config-help-section p,

html[data-theme="light"]
.config-help-current span {

    color:
        var(--ui-text-secondary);
}


html[data-theme="light"]
.config-help-close {

    border-color:
        var(--border);

    background:
        rgba(31,42,55,.025);

    color:
        var(--text);
}


html[data-theme="light"]
.config-help-current {

    border-color:
        rgba(25,117,197,.18);

    background:
        rgba(25,117,197,.045);
}


/* ==========================================================
   UI HELL · ACCOUNT DELETE
   ========================================================== */

html[data-theme="light"]
.account-delete-dialog {

    background:
        #ffffff;

    box-shadow:
        0 24px 70px
        rgba(31,42,55,.24);
}


html[data-theme="light"]
.account-delete-field input {

    border-color:
        var(--border);

    background:
        #ffffff;

    color:
        var(--text);
}


html[data-theme="light"]
.account-delete-warning strong,

html[data-theme="light"]
.account-delete-dialog-head h2 {

    color:
        var(--ui-text-primary);
}


html[data-theme="light"]
.account-delete-warning p,

html[data-theme="light"]
.account-delete-field > span,

html[data-theme="light"]
.account-delete-status {

    color:
        var(--ui-text-secondary);
}


html[data-theme="light"]
.account-delete-cancel {

    border-color:
        var(--border);

    background:
        rgba(31,42,55,.025);

    color:
        var(--ui-text-secondary);
}


/* ==========================================================
   UI HELL · CENTER TOAST
   ========================================================== */

html[data-theme="light"]
.config-center-warning {

    background:
        rgba(255,255,255,.985);

    box-shadow:
        0 24px 70px
            rgba(31,42,55,.22),
        0 0 0 1px
            rgba(31,42,55,.025);
}


html[data-theme="light"]
.config-center-warning-copy span {

    color:
        #3f4a57;
}


/* ==========================================================
   UI HELL · WEITERE MENÜ-/CONTENT-KARTEN
   ========================================================== */

html[data-theme="light"]
.drawer-wallet-reset-panel,

html[data-theme="light"]
.product-info-section {

    border-color:
        var(--border);

    background:
        #ffffff;
}


html[data-theme="light"]
.product-info-section-title small,

html[data-theme="light"]
.product-info-section p,

html[data-theme="light"]
.product-info-note {

    color:
        var(--ui-text-secondary) !important;
}


/* ==========================================================
   UI HELL · GENERISCHE SEKUNDÄRTEXTE
   ========================================================== */

html[data-theme="light"]
body .muted,

html[data-theme="light"]
body .sub,

html[data-theme="light"]
body .small-text,

html[data-theme="light"]
.hint,

html[data-theme="light"]
.auth-footer,

html[data-theme="light"]
.text-button {

    color:
        var(--ui-text-secondary);
}


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

@media (max-width: 520px) {

    #settingsHub .settings-theme-row {

        min-height:
            56px;
    }


    .settings-theme-switch {

        gap:
            6px;
    }


    .settings-theme-switch-text {

        min-width:
            40px;

        font-size:
            9px;
    }
}


/* ==========================================================
   M5.2E · COMPACT MARKETPHASE CARD

   Ziel:
   - Original-Marktanalyse-Daten
   - deutlich kompakter als Original-Dashboard
   - kleine Richtungspfeile
   - gleiche bestätigte Typografie
   - Dark + Hell
   - keine Trading-/Layout-Nebenwirkung
   ========================================================== */

#dashboardView .market-phase-card {

    margin-top:
        14px;

    padding:
        14px
        16px
        13px;

    overflow:
        hidden;

    border-color:
        var(--dashboard-card-border);

    box-shadow:
        var(--dashboard-card-shadow);
}


.market-phase-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.market-phase-title {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    min-width:
        0;
}


.market-phase-title > span {

    color:
        var(
            --ui-text-secondary,
            rgba(218,226,235,.90)
        );

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .8px;
}


.market-phase-title > strong {

    color:
        var(
            --ui-text-primary,
            #f4f6f8
        );

    font-size:
        15px;

    font-weight:
        760;
}


.market-phase-badge {

    flex:
        0 0 auto;

    padding:
        5px
        8px;

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

    border-radius:
        999px;

    background:
        var(--surface2);

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .5px;
}


.market-phase-badge.is-on {

    border-color:
        rgba(70,201,139,.28);

    background:
        rgba(70,201,139,.075);

    color:
        var(--green);
}


.market-phase-badge.is-off {

    border-color:
        rgba(144,155,170,.20);

    background:
        rgba(144,155,170,.055);

    color:
        var(
            --ui-text-secondary,
            var(--muted)
        );
}


.market-phase-badge.is-wait {

    border-color:
        rgba(234,184,90,.25);

    background:
        rgba(234,184,90,.06);

    color:
        var(--yellow);
}


/* ----------------------------------------------------------
   PHASE + CONFIDENCE
   ---------------------------------------------------------- */

.market-phase-primary {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        11px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid
        rgba(144,155,170,.15);
}


.market-phase-name-row {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    min-width:
        0;
}


.market-phase-name-row > strong {

    min-width:
        0;

    color:
        var(--text);

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1.15;

    overflow-wrap:
        anywhere;
}


.market-phase-main-arrow {

    flex:
        0 0 auto;

    font-size:
        17px;

    font-weight:
        900;

    line-height:
        1;
}


.market-phase-main-arrow.is-up,
.market-phase-trend-arrow.is-up {

    color:
        var(--green);
}


.market-phase-main-arrow.is-down,
.market-phase-trend-arrow.is-down {

    color:
        var(--red);
}


.market-phase-main-arrow.is-neutral,
.market-phase-trend-arrow.is-neutral {

    color:
        var(--yellow);
}


.market-phase-main-arrow.is-shock {

    color:
        var(--red);
}


.market-phase-confidence {

    flex:
        0 0 auto;

    text-align:
        right;
}


.market-phase-confidence > strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        17px;

    font-weight:
        820;

    line-height:
        1.05;
}


.market-phase-confidence > span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(
            --ui-text-secondary,
            var(--muted)
        );

    font-size:
        10px;

    font-weight:
        600;
}


/* ----------------------------------------------------------
   KOMPAKTES DATENRASTER
   ---------------------------------------------------------- */

.market-phase-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    column-gap:
        18px;

    row-gap:
        0;

    margin-top:
        2px;
}


.market-phase-item {

    min-width:
        0;

    padding:
        8px
        0
        7px;

    border-bottom:
        1px solid
        rgba(144,155,170,.10);
}


.market-phase-item > span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(
            --ui-text-secondary,
            rgba(218,226,235,.90)
        );

    font-size:
        11.5px;

    font-weight:
        560;

    line-height:
        1.25;
}


.market-phase-item > strong {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    min-width:
        0;

    color:
        var(--text);

    font-size:
        13.5px;

    font-weight:
        760;

    line-height:
        1.2;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.market-phase-trend-arrow {

    flex:
        0 0 auto;

    font-style:
        normal;

    font-size:
        12px;

    font-weight:
        900;
}


.market-phase-value-ok {

    color:
        var(--green)
        !important;
}


.market-phase-value-danger {

    color:
        var(--red)
        !important;
}


.market-phase-value-muted {

    color:
        var(
            --ui-text-secondary,
            var(--muted)
        )
        !important;
}


/* ----------------------------------------------------------
   ENTSCHEIDUNG · MAXIMAL ZWEI ZEILEN
   ---------------------------------------------------------- */

.market-phase-decision {

    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items:
        start;

    gap:
        10px;

    padding-top:
        9px;
}


.market-phase-decision > span {

    color:
        var(--btc);

    font-size:
        9.5px;

    font-weight:
        850;

    letter-spacing:
        .6px;

    line-height:
        1.45;
}


.market-phase-decision > small {

    min-width:
        0;

    color:
        var(
            --ui-text-secondary,
            rgba(218,226,235,.90)
        );

    font-size:
        11.5px;

    font-weight:
        500;

    line-height:
        1.4;

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    overflow:
        hidden;
}


/* ----------------------------------------------------------
   SEHR DEZENTE PHASEN-STIMMUNG
   Keine Neon-/Gaming-Effekte.
   ---------------------------------------------------------- */

#dashboardView
.market-phase-card.phase-up {

    box-shadow:
        0 8px 24px rgba(0,0,0,.20),
        0 0 18px rgba(70,201,139,.025),
        inset 0 1px 0 rgba(255,255,255,.018);
}


#dashboardView
.market-phase-card.phase-down,
#dashboardView
.market-phase-card.phase-shock {

    box-shadow:
        0 8px 24px rgba(0,0,0,.20),
        0 0 18px rgba(237,106,114,.025),
        inset 0 1px 0 rgba(255,255,255,.018);
}


/* ----------------------------------------------------------
   UI HELL
   ---------------------------------------------------------- */

html[data-theme="light"]
#dashboardView .market-phase-card {

    background:
        rgba(255,255,255,.96);

    border-color:
        var(--dashboard-card-border);

    box-shadow:
        var(--dashboard-card-shadow);
}


html[data-theme="light"]
.market-phase-primary {

    border-bottom-color:
        rgba(113,126,141,.15);
}


html[data-theme="light"]
.market-phase-item {

    border-bottom-color:
        rgba(113,126,141,.10);
}


html[data-theme="light"]
.market-phase-title > span,
html[data-theme="light"]
.market-phase-confidence > span,
html[data-theme="light"]
.market-phase-item > span,
html[data-theme="light"]
.market-phase-decision > small {

    color:
        var(--ui-text-secondary);
}


/* ----------------------------------------------------------
   MOBILE
   8 Werte = 4 kompakte Reihen mit je 2 Spalten.
   ---------------------------------------------------------- */

@media (max-width: 620px) {

    #dashboardView .market-phase-card {

        padding:
            13px
            14px
            12px;
    }


    .market-phase-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap:
            16px;
    }


    .market-phase-primary {

        gap:
            10px;

        margin-top:
            9px;
    }


    .market-phase-name-row > strong {

        font-size:
            17px;
    }


    .market-phase-confidence > strong {

        font-size:
            16px;
    }


    .market-phase-decision {

        gap:
            8px;
    }
}


/* ==========================================================
   OPTIMIZER CARD V2 · COMPACT SUMMARY

   Ziel:
   - optisch passend zur kompakten Marktphasen-Karte
   - weniger Boxen
   - mehr relevante Informationen
   - bestehende Schriftgröße nicht verkleinern
   - Dark + Hell
   - keine Funktionsänderung
   ========================================================== */

#dashboardView .optimizer-summary-card {

    margin-top:
        14px;

    margin-bottom:
        10px;

    padding:
        14px
        16px
        13px;

    border-color:
        var(--dashboard-card-border);

    box-shadow:
        var(--dashboard-card-shadow);
}


#dashboardView
.optimizer-summary-head {

    margin-bottom:
        8px;
}


#dashboardView
.optimizer-summary-title > span {

    margin-bottom:
        2px;

    color:
        var(
            --ui-text-secondary,
            rgba(218,226,235,.90)
        );

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .8px;
}


#dashboardView
.optimizer-summary-title > strong {

    color:
        var(--text);

    font-size:
        15px;

    font-weight:
        760;

    line-height:
        1.25;
}


#dashboardView
.optimizer-summary-badge {

    min-height:
        auto;

    padding:
        5px
        8px;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .5px;
}


/* ----------------------------------------------------------
   DATENRASTER
   ---------------------------------------------------------- */

.optimizer-v2-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap:
        18px;

    row-gap:
        0;

    border-top:
        1px solid
        rgba(144,155,170,.15);
}


.optimizer-v2-item {

    min-width:
        0;

    padding:
        8px
        0
        7px;

    border-bottom:
        1px solid
        rgba(144,155,170,.10);
}


.optimizer-v2-item > span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(
            --ui-text-secondary,
            rgba(218,226,235,.90)
        );

    font-size:
        11.5px;

    font-weight:
        560;

    line-height:
        1.25;
}


.optimizer-v2-item > strong {

    display:
        block;

    min-width:
        0;

    color:
        var(--text);

    font-size:
        13.5px;

    font-weight:
        760;

    line-height:
        1.3;

    overflow-wrap:
        anywhere;
}


.optimizer-v2-item
.optimizer-v2-curve {

    grid-column:
        1 / -1;

    border-bottom:
        0;

    padding-bottom:
        4px;
}


.optimizer-v2-curve > strong {

    color:
        var(
            --ui-text-primary,
            var(--text)
        );

    font-weight:
        690;
}


.optimizer-v2-muted {

    color:
        var(
            --ui-text-secondary,
            var(--muted)
        )
        !important;
}


/* ----------------------------------------------------------
   DEZENTER STATUSUNTERRAND
   ---------------------------------------------------------- */

#dashboardView
.optimizer-summary-hint {

    display:
        block;

    margin-top:
        7px;

    padding-top:
        7px;

    border-top:
        1px solid
        rgba(144,155,170,.10);

    color:
        var(
            --ui-text-secondary,
            rgba(218,226,235,.90)
        );

    font-size:
        11.5px;

    font-weight:
        500;

    line-height:
        1.35;
}


#dashboardView
.optimizer-summary-card.optimizer-active
.optimizer-summary-hint {

    color:
        var(
            --ui-text-secondary,
            rgba(218,226,235,.90)
        );
}


/* ----------------------------------------------------------
   AKTIVER AUTO-OPTIMIZER
   Nur sehr dezenter grüner Schimmer.
   ---------------------------------------------------------- */

#dashboardView
.optimizer-summary-card.optimizer-active {

    box-shadow:
        0 8px 24px rgba(0,0,0,.20),
        0 0 18px rgba(70,201,139,.025),
        inset 0 1px 0 rgba(255,255,255,.018);
}


/* ----------------------------------------------------------
   UI HELL
   ---------------------------------------------------------- */

html[data-theme="light"]
#dashboardView
.optimizer-summary-card {

    background:
        rgba(255,255,255,.96);

    border-color:
        var(--dashboard-card-border);

    box-shadow:
        var(--dashboard-card-shadow);
}


html[data-theme="light"]
.optimizer-v2-grid {

    border-top-color:
        rgba(113,126,141,.15);
}


html[data-theme="light"]
.optimizer-v2-item {

    border-bottom-color:
        rgba(113,126,141,.10);
}


html[data-theme="light"]
.optimizer-v2-item > span,
html[data-theme="light"]
#dashboardView
.optimizer-summary-hint {

    color:
        var(--ui-text-secondary);
}


/* ----------------------------------------------------------
   MOBILE

   Bleibt bewusst 2-spaltig wie die Marktphasen-Karte.
   ---------------------------------------------------------- */

@media (max-width: 620px) {

    #dashboardView
    .optimizer-summary-card {

        padding:
            13px
            14px
            12px;
    }


    .optimizer-v2-grid {

        column-gap:
            16px;
    }


    .optimizer-v2-item {

        padding:
            8px
            0
            7px;
    }
}


/* ==========================================================
   REBUY CURVE POLISH · SPACED VALUES

   Ausschließlich Darstellung:
   - jeder aktive ReBUY-Abstand einzeln
   - zwei Spalten
   - USDC direkt am jeweiligen Wert
   - bestehende Schriftgröße bleibt erhalten
   ========================================================== */

#dashboardView
.optimizer-v2-curve > strong {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap:
        20px;

    row-gap:
        7px;

    padding-top:
        2px;

    overflow:
        visible;
}


#dashboardView
.optimizer-v2-curve-value {

    display:
        block;

    min-width:
        0;

    color:
        var(
            --ui-text-primary,
            var(--text)
        );

    font-size:
        13.5px;

    font-weight:
        690;

    line-height:
        1.4;

    white-space:
        nowrap;
}


/*
 * Auf sehr schmalen Displays nur den Zwischenraum reduzieren.
 * Schriftgröße bleibt bewusst unverändert.
 */
@media (max-width: 380px) {

    #dashboardView
    .optimizer-v2-curve > strong {

        column-gap:
            10px;

        row-gap:
            7px;
    }
}


/* UI HELL */

html[data-theme="light"]
#dashboardView
.optimizer-v2-curve-value {

    color:
        var(--ui-text-primary);
}