:root {
            /* Фони */
            --bg: #f0f2f5;
            --bg-card: #ffffff;
            --bg-sub: #f7fafc;
            --bg-input: #ffffff;
            --bg-hover: #edf2f7;
            --bg-active: #ebf4ff;
            /* Тексти */
            --text: #2d3748;
            --text-secondary: #4a5568;
            --text-muted: #718096;
            --text-faint: #a0aec0;
            --text-disabled: #b0bec5;
            --text-disabled-sub: #cfd8dc;
            /* Бордери */
            --border: #e2e8f0;
            --border-light: #cbd5e0;
            --border-row: #f0f4f8;
            /* Акцент */
            --accent: #667eea;
            --accent-hover: #5568d3;
            --accent-active: #4a5cc0;
            --accent-light: #f0f4ff;
            --accent-text: #4338ca;
            --accent-border: #c7d2fe;
            --accent-bg: #eef2ff;
            /* Семантика: успіх */
            --success: #10b981;
            --success-dark: #047857;
            --success-text: #276749;
            --success-bg: #f0fff4;
            --success-border: #9ae6b4;
            /* Семантика: небезпека */
            --danger: #e53e3e;
            --danger-dark: #c53030;
            --danger-text: #c53030;
            --danger-bg: #fff5f5;
            --danger-border: #fed7d7;
            --danger-secondary: #ef4444;
            /* Семантика: попередження */
            --warn: #ecc94b;
            --warn-text: #744210;
            --warn-bg: #fffff0;
            --warn-orange: #ed8936;
            --warn-orange-text: #c05621;
            --warn-orange-dark: #7b341e;
            --warn-orange-bg: #fffaf0;
            --warn-orange-bg2: #feebc8;
            --warn-orange-bg3: #fff3e0;
            --warn-amber-text: #92400e;
            --warn-amber-bg: #fef3c7;
            /* Семантика: інфо */
            --info: #2196F3;
            --info-text: #1565c0;
            --info-bg: #e7f3ff;
            /* Компоненти */
            --toggle-bg: #e2e8f0;
            --toggle-knob: #cbd5e0;
            --toast-bg: #2d3748;
            --badge-green-bg: #d1fae5;
            --badge-green-text: #065f46;
            --result-highlight: #667eea;
        }

        [data-theme="dark"] {
            --bg: #0f1219;
            --bg-card: #1a1f2e;
            --bg-sub: #1e2538;
            --bg-input: #161b28;
            --bg-hover: #252d3f;
            --bg-active: #1e2a4a;
            --text: #e2e8f0;
            --text-secondary: #c7cdd6;
            --text-muted: #8892a6;
            --text-faint: #5e6a80;
            --text-disabled: #4a5568;
            --text-disabled-sub: #3d4556;
            --border: #2d3548;
            --border-light: #3a4358;
            --border-row: #232b3d;
            --accent: #8194f0;
            --accent-hover: #6b7fe8;
            --accent-active: #5a6dd8;
            --accent-light: #1e2a4a;
            --accent-text: #a3b1ff;
            --accent-border: #3d4a80;
            --accent-bg: #1e2540;
            --success: #34d399;
            --success-dark: #10b981;
            --success-text: #6ee7b7;
            --success-bg: #0f2a1f;
            --success-border: #1a5e3a;
            --danger: #f87171;
            --danger-dark: #ef4444;
            --danger-text: #fca5a5;
            --danger-bg: #2a1215;
            --danger-border: #5a2228;
            --danger-secondary: #f87171;
            --warn: #fbbf24;
            --warn-text: #fde68a;
            --warn-bg: #2a2510;
            --warn-orange: #fb923c;
            --warn-orange-text: #fdba74;
            --warn-orange-dark: #fed7aa;
            --warn-orange-bg: #2a2015;
            --warn-orange-bg2: #3a2a15;
            --warn-orange-bg3: #2a2015;
            --warn-amber-text: #fde68a;
            --warn-amber-bg: #2a2510;
            --info: #60a5fa;
            --info-text: #93c5fd;
            --info-bg: #152040;
            --toggle-bg: #2d3548;
            --toggle-knob: #4a5568;
            --toast-bg: #e2e8f0;
            --badge-green-bg: #1a5e3a;
            --badge-green-text: #6ee7b7;
            --result-highlight: #8194f0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .calc-wrapper {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            background: var(--bg);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .calculator-container {
            background: var(--bg-card);
            border-radius: 12px;
            border: 1px solid var(--border);
            padding: 10px 20px 20px;
            max-width: 500px;
            width: 100%;
        }

        .balance-toggle-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            margin-bottom: 0;
        }

        .balance-toggle-header label {
            cursor: pointer;
            margin-bottom: 0;
        }

        .balance-toggle-header.collapsed label {
            color: var(--text-disabled);
        }

        .balance-toggle-header.collapsed label span {
            color: var(--text-disabled-sub);
        }

        .balance-chevron {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            color: var(--text-faint);
            font-size: 13px;
            flex-shrink: 0;
        }

        .balance-chevron.collapsed {
            transform: rotate(-90deg);
            color: var(--text);
            font-size: 17px;
        }

        .balance-body {
            overflow: hidden;
            max-height: 200px;
            opacity: 1;
            margin-top: 10px;
        }

        .balance-body.collapsed {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
            display: none;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .quick-percent-btns {
            display: flex;
            gap: 5px;
            align-items: center;
            flex-wrap: nowrap;
        }

        .quick-pct-btn {
            padding: 0;
            width: 38px;
            height: 47px;
            background: var(--bg-sub);
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            color: var(--accent);
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .quick-pct-btn:hover {
            background: var(--bg-active);
            border-color: var(--accent);
        }

        .quick-pct-btn:active {
            opacity: 0.8;
        }

        .quick-pct-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .risk-row {
            display: flex;
            gap: 8px;
            align-items: stretch;
        }

        .risk-input {
            flex: 0 0 150px;
            min-width: 150px;
        }

        .note-input {
            flex: 1 1 50%;
            min-width: 0;
        }

        .note-input input {
            padding-left: 12px;
            height: 100%;
        }

        /* Risk mode toggle inside the input */
        .risk-input-wrapper {
            position: relative;
            flex: 1 1 50%;
            min-width: 0;
        }

        .risk-input-wrapper input {
            padding-right: 88px;
        }

        .risk-mode-toggle {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            background: var(--border);
            border-radius: 8px;
            padding: 3px;
            gap: 2px;
        }

        .risk-mode-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            background: transparent;
            color: var(--text-muted);
            line-height: 1.4;
            min-width: 32px;
            min-height: 32px;
        }

        .risk-mode-btn.active {
            background: var(--bg-card);
            color: var(--accent);
        }

        .risk-mode-btn:active {
            opacity: 0.8;
        }

        .risk-input-wrapper.percent-mode input {
            border-color: var(--accent);
            background: var(--accent-light);
        }

        .risk-input-wrapper.warn-yellow input {
            border-color: var(--warn) !important;
            background: var(--warn-bg) !important;
        }

        .risk-input-wrapper.warn-orange input {
            border-color: var(--warn-orange) !important;
            background: var(--warn-orange-bg3) !important;
        }

        .risk-input-wrapper.warn-red input {
            border-color: var(--danger) !important;
            background: var(--danger-bg) !important;
        }

        .risk-warning {
            display: none;
            margin-top: 6px;
            font-size: 12px;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 6px;
        }

        .risk-warning.warn-yellow {
            display: block;
            color: var(--warn-text);
            background: var(--warn-bg);
        }

        .risk-warning.warn-orange {
            display: block;
            color: var(--warn-orange-text);
            background: var(--warn-orange-bg2);
        }

        .risk-warning.warn-red {
            display: block;
            color: var(--danger-dark);
            background: var(--danger-bg);
        }

        .toggle-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        .toggle-btn {
            flex: 1;
            padding: 10px;
            background: var(--bg-sub);
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
        }

        .toggle-btn:hover {
            background: var(--bg-hover);
        }

        .toggle-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .info-text {
            margin-top: 8px;
            padding: 8px 12px;
            background: var(--info-bg);
            border-radius: 6px;
            font-size: 12px;
            color: var(--info-text);
            font-weight: 500;
        }

        .copy-btn {
            padding: 4px 12px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            margin-left: 8px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .copy-btn:hover {
            background: var(--accent-hover);
        }

        .copy-btn:active {
            opacity: 0.8;
        }

        .copy-btn.copied {
            background: var(--success);
        }

        .result-item-with-copy {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-light);
        }

        .result-item-with-copy:last-child {
            border-bottom: none;
        }

        .result-left {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 3px 8px;
            min-width: 0;
        }
        .result-left > .result-label,
        .result-left > .result-value {
            flex-shrink: 0;
        }
        .result-left > span:not(.result-label):not(.result-value) {
            width: 100%;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 14px;
        }

        .input-wrapper {
            position: relative;
        }

        input {
            width: 100%;
            padding: 15px;
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 16px;
            outline: none;
            background: var(--bg-input);
            color: var(--text);
            -webkit-user-select: text;
            user-select: text;
            -webkit-appearance: none;
            appearance: none;
        }
        
        input[inputmode="decimal"] {
            text-align: left;
        }

        input:focus {
            border-color: var(--accent);
        }

        .currency-symbol {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-faint);
            font-weight: 600;
            pointer-events: none;
        }

        input.with-symbol {
            padding-left: 35px;
        }

        .percent-symbol {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-faint);
            font-weight: 600;
        }

        input.with-percent {
            padding-right: 35px;
        }

        .calculate-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
        }

        .calculate-btn:hover {
            background: var(--accent-hover);
        }

        .calculate-btn:active {
            background: var(--accent-active);
        }

        .results {
            margin-top: 24px;
            padding: 10px;
            background: var(--bg-sub);
            border: 1px solid var(--border);
            border-radius: 10px;
            display: none;
            -webkit-user-select: text;
            user-select: text;
        }

        .results.show {
            display: block;
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
            border-bottom: 1px solid var(--border-light);
        }

        .result-item:last-child {
            border-bottom: none;
        }

        .result-label {
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 14px;
        }

        .result-value {
            color: var(--text);
            font-weight: 700;
            font-size: 18px;
        }

        .result-value.highlight {
            color: var(--accent);
            font-size: 24px;
        }

        .warning {
            margin-top: 16px;
            padding: 12px;
            background: var(--warn-bg);
            border-left: 4px solid var(--warn);
            border-radius: 8px;
            font-size: 13px;
            color: var(--warn-text);
        }

        .info-box {
            margin-top: 16px;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            border-left: 4px solid var(--info);
            background: var(--info-bg);
            color: var(--info-text);
        }

        .info-box.state-ok {
            background: var(--success-bg);
            border-left-color: var(--success);
            color: var(--success-text);
        }

        .info-box.state-warn {
            background: var(--warn-bg);
            border-left-color: var(--warn);
            color: var(--warn-text);
        }

        .info-box.state-warn-orange {
            background: var(--warn-orange-bg);
            border-left-color: var(--warn-orange);
            color: var(--warn-orange-dark);
        }

        .info-box.state-orange {
            background: var(--warn-orange-bg);
            border-left-color: var(--warn-orange);
            color: var(--warn-orange-dark);
        }

        .info-box.state-danger {
            background: var(--danger-bg);
            border-left-color: var(--danger);
            color: var(--danger-dark);
        }

        .history-section {
            margin-top: 24px;
            padding-top: 24px;
            border-top: 2px solid var(--border);
            -webkit-user-select: text;
            user-select: text;
        }

        .history-header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
            gap: 8px;
        }

        .history-title {
            color: var(--text);
            font-size: 18px;
            font-weight: 700;
            margin: 0;
        }

        .history-clear-btn {
            padding: 5px 12px;
            background: var(--danger-bg);
            border: 1px solid var(--danger-border);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            color: var(--danger-dark);
            cursor: pointer;
            white-space: nowrap;
        }

        .history-clear-btn:hover {
            background: var(--danger-border);
        }

        .history-filters {
            display: flex;
            gap: 6px;
            margin-bottom: 12px;
        }

        .history-filter-btn {
            flex: 1;
            padding: 5px 12px;
            background: var(--bg-sub);
            border: 1.5px solid var(--border);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            text-align: center;
        }

        .history-filter-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }

        .history-search {
            width: 100%;
            padding: 9px 14px;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            margin-bottom: 10px;
            outline: none;
            -webkit-user-select: text;
            user-select: text;
        }

        .history-search:focus {
            border-color: var(--accent);
        }

        /* Компактна таблиця */
        .history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

        .history-table thead th {
            text-align: left;
            padding: 6px 8px;
            color: var(--text-faint);
            font-weight: 600;
            font-size: 11px;
            border-bottom: 2px solid var(--border);
            white-space: nowrap;
        }

        .history-table tbody tr {
            border-bottom: 1px solid var(--border-row);
            cursor: pointer;
        }

        .history-table tbody tr:hover {
            background: var(--bg-sub);
        }

        .history-table tbody tr:last-child {
            border-bottom: none;
        }

        .history-table td {
            padding: 8px 8px;
            color: var(--text);
            font-weight: 500;
            white-space: nowrap;
        }

        .history-table td.token {
            font-weight: 700;
            color: var(--accent);
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .history-table td.dir-long  { color: var(--success); font-weight: 700; }
        .history-table td.dir-short { color: var(--danger-secondary); font-weight: 700; }

        .history-table td.time {
            color: var(--text-faint);
            font-size: 11px;
        }

        /* Розгорнутий рядок деталей */
        .history-detail-row {
            display: none;
            background: var(--bg-sub);
        }

        .history-detail-row.open {
            display: table-row;
        }

        .history-detail-cell {
            padding: 10px 12px;
            border-bottom: 2px solid var(--border);
        }

        .history-detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 6px 16px;
            font-size: 12px;
        }

        .history-detail-item {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .history-detail-label {
            color: var(--text-faint);
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .history-detail-value {
            color: var(--text);
            font-weight: 700;
            font-size: 13px;
        }

        .history-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }

        .history-action-btn {
            flex: 1;
            padding: 6px 8px;
            border: none;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
        }

        .history-action-btn.share {
            background: var(--accent);
            color: white;
        }

        .history-action-btn.share:hover {
            background: var(--accent-hover);
        }

        .history-action-btn.delete {
            background: var(--danger-bg);
            color: var(--danger-dark);
        }

        .history-action-btn.delete:hover {
            background: var(--danger-border);
        }

        .atr-pct-row {
            display: flex;
            gap: 5px;
            align-items: center;
            margin-top: 8px;
            flex-wrap: nowrap;
        }

        .atr-pct-label {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 600;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .atr-pct-btn {
            padding: 0;
            width: 38px;
            height: 34px;
            background: var(--bg-sub);
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            color: var(--accent);
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .atr-pct-btn:hover { background: var(--bg-active); border-color: var(--accent); }
        .atr-pct-btn:active { opacity: 0.8; }
        .atr-pct-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .atr-custom-wrapper {
            position: relative;
            flex: 1;
            min-width: 52px;
            max-width: 68px;
        }

        .atr-custom-wrapper input {
            padding-right: 22px;
            text-align: right;
            font-size: 12px;
            height: 34px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .atr-custom-wrapper .percent-symbol {
            font-size: 11px;
            right: 8px;
        }

        .price-fetch-panel {
            display: none;
            margin-top: 7px;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            flex-wrap: wrap;
        }

        .price-fetch-panel.visible { display: flex; }

        .price-fetch-current {
            color: var(--text-secondary);
            font-weight: 600;
        }

        .price-fetch-current span {
            color: var(--accent);
            font-weight: 700;
        }

        .price-fetch-btn {
            padding: 3px 10px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
        }

        .price-fetch-btn:hover { background: var(--accent-hover); }
        .price-fetch-btn:active { opacity: 0.8; }

        .price-fetch-btn.loading {
            background: var(--text-faint);
            cursor: default;
        }

        .price-diff {
            font-size: 12px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 5px;
        }

        .price-diff.up   { background: var(--success-bg); color: var(--success-text); }
        .price-diff.down { background: var(--danger-bg); color: var(--danger-dark); }
        .price-diff.same { background: var(--bg-sub); color: var(--text-muted); }

        .history-empty {
            text-align: center;
            padding: 30px;
            color: var(--text-faint);
            font-style: italic;
        }

        .history-count {
            font-size: 11px;
            color: var(--text-faint);
            margin-bottom: 8px;
        }

        .risk-info-panel {
            display: none;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
            padding: 0 4px;
        }

        .risk-info-panel.visible {
            display: flex;
        }

        .risk-info-panel .info-label {
            color: var(--text-muted);
        }

        .risk-info-panel .info-value {
            color: var(--accent);
            font-weight: 700;
            font-size: 14px;
        }

        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--toast-bg);
            color: var(--bg-card);
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            opacity: 0;
            pointer-events: none;
            z-index: 9999;
            white-space: nowrap;
        }

        .toast.show {
            opacity: 1;
        }

        /* ─── TP Levels ─────────────────────────────────────────────────── */
        .tp-presets-row {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

        .tp-preset-btn {
            padding: 6px 12px;
            background: var(--bg-sub);
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            color: var(--accent);
            cursor: pointer;
            white-space: nowrap;
        }

        .tp-preset-btn:hover { background: var(--bg-active); border-color: var(--accent); }
        .tp-preset-btn:active { opacity: 0.8; }
        .tp-preset-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .tp-levels-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .tp-mode-toggle {
            display: flex;
            background: var(--border);
            border-radius: 8px;
            padding: 3px;
            gap: 2px;
            flex-shrink: 0;
        }

        .tp-mode-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            background: transparent;
            color: var(--text-muted);
            line-height: 1.4;
            min-width: 32px;
            min-height: 32px;
            white-space: nowrap;
        }

        .tp-mode-btn.active {
            background: var(--bg-card);
            color: var(--accent);
        }

        .tp-mode-btn:active {
            opacity: 0.8;
        }

        .tp-rr-hint {
            font-size: 11px;
            color: var(--accent);
            font-weight: 700;
            white-space: nowrap;
            flex-shrink: 0;
            min-width: 38px;
            text-align: right;
        }

        .tp-rr-hint.neutral { color: var(--text-faint); }
        .tp-rr-hint.good    { color: var(--success); }
        .tp-rr-hint.warn    { color: var(--warn-orange); }
        .tp-rr-hint.bad     { color: var(--danger); }

        .tp-level-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tp-close-pct-wrap {
            display: flex;
            align-items: center;
            gap: 3px;
            flex-shrink: 0;
        }

        .tp-pct-hint {
            font-size: 10px;
            color: var(--text-faint);
            white-space: nowrap;
            flex-shrink: 0;
            width: 56px;
            min-width: 56px;
            line-height: 1.3;
        }

        .tp-close-pct-wrap input {
            width: 52px;
            min-width: 52px;
            max-width: 52px;
            height: 42px;
            padding: 0 18px 0 6px;
            font-size: 13px;
            font-weight: 700;
            text-align: right;
            border: 2px solid var(--border);
            border-radius: 8px;
        }

        .tp-close-pct-wrap input:focus {
            border-color: var(--accent);
        }

        .tp-close-pct-symbol {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 11px;
            color: var(--text-faint);
            font-weight: 700;
            pointer-events: none;
        }

        .tp-level-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--accent);
            white-space: nowrap;
            min-width: 30px;
        }

        .tp-level-input-wrap {
            position: relative;
            flex: 1;
        }

        .tp-level-input-wrap input {
            padding-right: 30px;
            height: 42px;
            padding-top: 0;
            padding-bottom: 0;
            font-size: 15px;
        }

        .tp-level-suffix {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 11px;
            color: var(--text-faint);
            font-weight: 600;
            pointer-events: none;
        }

        .tp-remove-btn {
            width: 30px;
            height: 30px;
            border: none;
            background: var(--danger-bg);
            color: var(--danger-dark);
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            flex-shrink: 0;
            line-height: 1;
        }

        .tp-remove-btn:hover { background: var(--danger-border); }

        .tp-add-btn {
            width: 100%;
            padding: 8px;
            background: var(--bg-sub);
            border: 2px dashed var(--border-light);
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            margin-top: 4px;
        }

        .tp-add-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }

        /* ─── TP results ─────────────────────────────────────────────────── */
        .tp-results-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .tp-result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-light);
        }

        .tp-result-item:last-child { border-bottom: none; }

        .tp-result-left {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .tp-result-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 4px;
            margin-right: 4px;
        }

        .commission-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }

        .commission-preset-btns {
            display: flex;
            gap: 4px;
            flex-wrap: nowrap;
        }

        .commission-preset-btn {
            padding: 6px 10px;
            height: 47px;
            background: var(--bg-sub);
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            color: var(--accent);
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            line-height: 1.3;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .commission-preset-btn:hover {
            background: var(--bg-active);
            border-color: var(--accent);
        }

        .commission-preset-btn:active { opacity: 0.8; }

        .commission-preset-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .commission-toggle-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--bg-sub);
            border: 2px solid var(--border);
            border-radius: 10px;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }

        .commission-toggle-row:hover { border-color: var(--accent); background: var(--accent-light); }

        .commission-toggle-row.active {
            border-color: var(--accent);
            background: var(--accent-light);
        }

        .commission-toggle-switch {
            width: 38px;
            height: 22px;
            border-radius: 11px;
            background: var(--border-light);
            position: relative;
            flex-shrink: 0;
        }

        .commission-toggle-switch::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--bg-card);
            top: 3px;
            left: 3px;
        }

        .commission-toggle-row.active .commission-toggle-switch {
            background: var(--accent);
        }

        .commission-toggle-row.active .commission-toggle-switch::after {
            transform: translateX(16px);
        }

        .commission-toggle-text {
            flex: 1;
        }

        .commission-toggle-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-secondary);
        }

        .commission-toggle-sub {
            font-size: 11px;
            color: var(--text-faint);
            margin-top: 1px;
        }

        .commission-toggle-row.active .commission-toggle-title { color: var(--accent); }
        .commission-toggle-row.active .commission-toggle-sub   { color: var(--text-faint); }

        .result-value.commission-adjusted {
            font-size: 14px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .commission-sub {
            font-size: 12px;
            color: var(--text-faint);
            font-weight: 500;
            margin-top: 2px;
        }

        .result-value.loss-net  { color: var(--danger); }
        .result-value.profit-net { color: var(--success); }

        /* ─── Collapsible setting blocks ────────────────────────────────── */
        .setting-block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            margin-bottom: 0;
        }

        .setting-block-header label {
            cursor: pointer;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .setting-block-chevron {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            color: var(--text-faint);
            font-size: 13px;
            flex-shrink: 0;
        }

        .setting-block-chevron.collapsed {
            transform: rotate(-90deg);
            color: var(--text);
            font-size: 17px;
        }

        .setting-block-body {
            overflow: hidden;
            max-height: 600px;
            opacity: 1;
            margin-top: 10px;
        }

        .setting-block-body.collapsed {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
            display: none;
        }

        .setting-block-summary {
            display: none;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 6px;
        }

        .setting-block-summary.visible {
            display: flex;
        }

        .summary-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 9px;
            background: var(--accent-bg);
            border: 1.5px solid var(--accent-border);
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            color: var(--accent-text);
            white-space: nowrap;
        }

        .summary-tag.green {
            background: var(--success-bg);
            border-color: var(--success-border);
            color: var(--success-text);
        }

        .summary-tag.gray {
            background: var(--bg-sub);
            border-color: var(--border-light);
            color: var(--text-muted);
        }

        .commission-mode-toggle {
            display: flex;
            background: var(--border);
            border-radius: 8px;
            padding: 3px;
            gap: 2px;
            flex-shrink: 0;
        }

        .commission-mode-btn {
            padding: 5px 20px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            background: transparent;
            color: var(--text-muted);
            line-height: 1.4;
            flex: 1;
            min-height: 32px;
            text-align: center;
        }

        .commission-mode-btn.active {
            background: var(--bg-card);
            color: var(--accent);
        }

        .commission-mode-btn:active {
            opacity: 0.8;
        }

        .commission-toggle-row.disabled {
            opacity: 0.45;
            pointer-events: none;
        }

        .commission-toggle-nested {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            margin-top: 0;
            display: none;
        }

        .commission-toggle-nested.visible {
            max-height: 100px;
            opacity: 1;
            margin-top: 8px;
            display: block;
        }

        .commission-toggle-row.nested {
            margin-left: 20px;
            border-left: 3px solid var(--accent-border);
            border-radius: 0 10px 10px 0;
            padding-left: 10px;
        }

        /* ─── Navigation Tabs ─────────────────────────────────────────── */
        .nav-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 18px;
            background: var(--bg-sub);
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 4px;
        }

        .nav-tab {
            flex: 1;
            padding: 8px 6px;
            background: transparent;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 4px;
            transition: all 0.15s ease;
            line-height: 1;
        }

        .nav-tab .nav-icon {
            font-size: 15px;
            line-height: 1;
        }

        .nav-tab.nav-tab-icon-only {
            flex: 0 0 42px;
            padding: 8px 0;
        }

        .nav-tab.nav-tab-icon-only .nav-icon {
            font-size: 17px;
        }

        .nav-tab:hover {
            background: var(--bg-hover);
            color: var(--text-secondary);
        }

        .nav-tab:active {
            opacity: 0.8;
        }

        .nav-tab.active {
            background: var(--accent);
            color: white;
        }

        .nav-tab.disabled {
            opacity: 0.45;
            cursor: default;
        }

        .nav-tab.disabled:hover {
            background: transparent;
            color: var(--text-muted);
        }

        /* Page containers */
        .page-content {
            display: none;
        }

        .page-content.active {
            display: block;
        }

        .page-placeholder {
            padding: 40px 20px;
            text-align: center;
            color: var(--text-muted);
        }

        .page-placeholder .placeholder-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }

        .page-placeholder h2 {
            color: var(--text);
            font-size: 20px;
            margin-bottom: 8px;
        }

        .page-placeholder p {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-muted);
        }

        .page-placeholder .coming-soon {
            display: inline-block;
            margin-top: 16px;
            padding: 6px 14px;
            background: var(--warn-amber-bg);
            color: var(--warn-amber-text);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
        }

        .settings-section {
            text-align: left;
            padding: 16px;
            background: var(--bg-sub);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 12px;
        }

        .settings-section h3 {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
        }

        .settings-section p {
            text-align: left;
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.5;
        }

        .manual-section {
            text-align: left;
            padding: 16px;
            background: var(--bg-sub);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 12px;
        }

        .manual-section h3 {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
        }

        .manual-section p {
            text-align: left;
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* ─── Settings checkboxes ─────────────────────────────────────── */
        .setting-check-row {
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }

        .setting-check-row:last-child {
            border-bottom: none;
        }

        .setting-check {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            margin-bottom: 0;
        }

        .setting-check input[type="checkbox"] {
            display: none;
        }

        .setting-check-mark {
            width: 22px;
            height: 22px;
            min-width: 22px;
            border: 2px solid var(--border-light);
            border-radius: 6px;
            background: var(--bg-input);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            font-size: 13px;
        }

        .setting-check input:checked + .setting-check-mark {
            background: var(--accent);
            border-color: var(--accent);
        }

        .setting-check input:checked + .setting-check-mark::after {
            content: '✓';
            color: white;
            font-weight: 700;
            font-size: 14px;
            line-height: 1;
        }

        .setting-check-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }

        .setting-check input:not(:checked) ~ .setting-check-label {
            color: var(--text-muted);
        }

        .setting-hint {
            display: block;
            font-size: 11px;
            color: var(--text-faint);
            margin-left: 32px;
            margin-top: 3px;
            font-weight: 400;
        }

        .setting-sub-group {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 12px;
            padding: 8px 0 10px 32px;
            border-bottom: 1px solid var(--border);
        }

        .setting-sub-group.disabled {
            opacity: 0.35;
            pointer-events: none;
        }

        .setting-check.sub {
            gap: 6px;
        }

        .setting-check.sub .setting-check-mark {
            width: 18px;
            height: 18px;
            min-width: 18px;
            border-radius: 5px;
        }

        .setting-check.sub .setting-check-label {
            font-size: 12px;
        }

        .setting-check.sub input:checked + .setting-check-mark::after {
            font-size: 11px;
        }

        .settings-reset-btn {
            width: 100%;
            padding: 12px;
            margin-top: 8px;
            background: var(--bg-sub);
            border: 2px solid var(--border);
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
        }

        .settings-reset-btn:hover {
            border-color: var(--danger);
            color: var(--danger);
            background: var(--danger-bg);
        }

        /* ─── Exchange selector ────────────────────────────────────────── */
        .exchange-selector {
            display: flex;
            gap: 6px;
        }

        .exchange-btn {
            flex: 1;
            padding: 10px 8px;
            background: var(--bg-input);
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.15s ease;
        }

        .exchange-btn .exchange-icon {
            font-size: 14px;
        }

        .exchange-btn:hover {
            border-color: var(--accent);
            background: var(--bg-hover);
        }

        .exchange-btn.active {
            border-color: var(--accent);
            background: var(--accent);
            color: white;
        }

        /* Hidden by settings */
        .settings-hidden {
            display: none !important;
        }

        @media (max-width: 600px) {
            .calc-wrapper {
                padding: 8px;
            }

            .calculator-container {
                padding: 8px 10px 10px;
                border-radius: 10px;
            }

            .nav-tabs {
                gap: 3px;
                padding: 3px;
                margin-bottom: 14px;
            }

            .nav-tab {
                padding: 7px 4px;
                font-size: 11px;
                gap: 3px;
            }

            .nav-tab .nav-icon {
                font-size: 13px;
            }

            .nav-tab.nav-tab-icon-only {
                flex: 0 0 36px;
            }

            .nav-tab.nav-tab-icon-only .nav-icon {
                font-size: 15px;
            }

            .quick-pct-btn {
                width: 34px;
                height: 40px;
                font-size: 10px;
            }

            .risk-row {
                flex-wrap: nowrap;
            }

            .risk-input-wrapper {
                flex: 1 1 50%;
                min-width: 0;
            }

            .note-input {
                flex: 1 1 50%;
                min-width: 0;
            }

            .note-input input {
                font-size: 13px;
                padding: 12px 8px;
            }

            .settings-section, .manual-section {
                padding: 12px;
            }
        }