:root {
    --primary: #00e676;
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text: #ffffff;
    --danger: #ff5252;
    --accent-blue: #2979ff;
}

body {
    background-color: var(--bg-color);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding-bottom: 80px; /* Space for bottom nav */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* SCROLLBAR HIDING */
::-webkit-scrollbar { width: 0px; background: transparent; }

/* CONTAINER & LAYOUT */
.container {
    max-width: 600px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
}

/* === HEADER === */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.mode-badge {
    font-size: 10px;
    background: rgba(0, 230, 118, 0.2);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: bold;
    border: 1px solid rgba(0, 230, 118, 0.3);
}

/* GHOST BUTTONS (Top Bar) */
.strat-chip-btn, .icon-btn-svg {
    background: transparent !important;
    border: none !important;
    color: #aaa !important;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}
.strat-chip-btn span { font-size: 14px; font-weight: 600; }
.strat-chip-btn:active, .icon-btn-svg:active {
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
}

/* ASSET CARDS */
.assets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 15px 20px 15px;
}

.asset-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border: 1px solid #333;
}

.asset-icon { font-size: 24px; }
.asset-info { display: flex; flex-direction: column; width: 100%; }
.asset-name { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.asset-val { font-size: 16px; font-weight: bold; margin-top: 2px; }

/* NET WORTH */
.net-worth-box {
    text-align: center;
    padding: 20px 0;
}
.net-worth-label { font-size: 12px; color: #888; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 5px; }
.net-worth-value { font-size: 42px; font-weight: 800; letter-spacing: -1px; }
.nw-indicator { font-size: 13px; font-weight: bold; margin-top: 5px; }

/* BUDGET GAUGE */
.gauge-container {
    position: relative;
    width: 280px;  /* Fixed width */
    height: 145px; /* Fixed height */
    margin: 20px auto; 
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden; 
}

.gauge-svg {
    width: 280px;
    height: 140px;
    overflow: visible;
}

.gauge-bg, .gauge-progress {
    fill: none;
    stroke-width: 15;
    stroke-linecap: round;
}

.gauge-bg { stroke: #2a2a2a; }
.gauge-progress {
    stroke: var(--primary);
    stroke-dasharray: 0, 1000;
    transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-center-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.gauge-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.gauge-amount { font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.gauge-info { font-size: 11px; color: #aaa; }

.gauge-container .settings-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #555;
    font-size: 18px;
    cursor: pointer;
    z-index: 20;
}

/* BOTTOM NAV */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(30, 30, 30, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    padding: 10px 0 25px 0;
    border-top: 1px solid #333;
    z-index: 900;
}
.nav-item {
    background: none;
    border: none;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    gap: 4px;
}
.nav-item span { font-size: 20px; }
.nav-item.active { color: var(--primary); }

/* FAB BUTTON */
.fab {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    color: #000;
    font-size: 32px;
    border: none;
    box-shadow: 0 10px 20px rgba(0, 230, 118, 0.3);
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* MODALS */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: flex-end;
}
.modal.active { display: flex; animation: fadeIn 0.2s; }

.modal-content {
    background: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(15px);
    width: 100%;
    max-width: 600px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.modal-header span { font-weight: bold; font-size: 18px; letter-spacing: 0.5px; }
.close-btn { background: none; border: none; font-size: 20px; color: #888; padding: 5px; }

.modal-body-scroll {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* INPUTS */
input[type="number"]#quick-amount, 
input[type="number"]#fund-amount,
input[type="number"]#budget-limit-input {
    font-size: 48px !important;
    text-align: center;
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    margin: 20px 0;
    font-weight: 200;
    outline: none;
}
input[type="number"]::placeholder { color: rgba(255,255,255,0.1); }

input[type="text"], 
input[type="date"], 
select,
.modal-body-scroll input[type="number"]:not(#quick-amount):not(#fund-amount):not(#budget-limit-input) {
    width: 100%; 
    background: #222 !important; 
    border: 1px solid #333 !important; 
    color: white !important; 
    padding: 12px; 
    border-radius: 12px; 
    font-size: 16px; 
    box-sizing: border-box; 
    outline: none;
}

/* CARD SELECTION */
.account-select-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.account-select-label input[type="radio"] { display: none; }
.account-select-label:has(input:checked) {
    background: rgba(0, 230, 118, 0.1);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.15);
}
.account-select-label:has(input:checked) .acc-box { color: white; font-weight: bold; }
.account-select-label:has(input:checked)::after {
    content: '✔';
    color: var(--primary);
    margin-left: auto;
    font-weight: bold;
    font-size: 18px;
}
.acc-box { font-size: 16px; color: #aaa; display: flex; align-items: center; gap: 10px; }

/* COMPACT GRID */
.bank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.bank-card-item {
    background: #252525;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    text-align: center;
}
.bank-logo {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    border-radius: 50%;
    background: white;
    padding: 2px;
    margin-bottom: 8px;
}
.bank-title { font-size: 14px; color: #ccc; }
.bank-amount { font-size: 16px; font-weight: bold; color: #fff; }

/* BUTTONS */
.flow-btn {
    width: 100%;
    padding: 18px;
    border-radius: 16px;
    border: none;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.btn-expense { background: #ff5252; color: white; box-shadow: 0 5px 15px rgba(255, 82, 82, 0.3); }
.btn-income { background: #00e676; color: #000; box-shadow: 0 5px 15px rgba(0, 230, 118, 0.3); }

.switch-container { display: flex; background: #222; border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.switch-btn { flex: 1; padding: 10px; border: none; background: none; color: #666; font-weight: bold; border-radius: 8px; }
.switch-btn.active { background: #333; color: #fff; }

/* LISTS & ITEMS */
.list-item-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #222; }
.trans-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #222; }
.trans-left { display: flex; gap: 12px; align-items: center; }
.trans-icon-box { width: 36px; height: 36px; background: #222; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* SMART BUTTONS */
.smart-cat-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
.smart-cat-btn { background: #252525; padding: 10px 16px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; min-width: 70px; border: 1px solid #333; }
.smart-icon { font-size: 20px; margin-bottom: 5px; }
.smart-label { font-size: 10px; color: #888; }

/* GOALS */
.goal-card-big { background: #1e1e1e; border: 1px solid #333; border-radius: 16px; padding: 15px; margin-bottom: 15px; }
.goal-title-row { display: flex; justify-content: space-between; font-weight: bold; font-size: 14px; margin-bottom: 10px; }
.goal-progress-bg { height: 8px; background: #333; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.goal-progress-fill { height: 100%; background: var(--primary); transition: width 0.5s; }

/* ANIMATIONS */
.content { display: none; padding-bottom: 20px; animation: fadeIn 0.3s; }
.content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* SETTINGS */
.settings-group { background: #1e1e1e; border-radius: 16px; padding: 15px; margin-bottom: 15px; border: 1px solid #333; }
.settings-title { font-size: 11px; color: #666; font-weight: bold; margin-bottom: 10px; letter-spacing: 1px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #2a2a2a; }
.settings-row:last-child { border-bottom: none; }
.settings-btn { padding: 6px 12px; background: transparent; border: 1px solid #555; color: #ddd; border-radius: 8px; font-size: 12px; }

/* TOGGLE SWITCH */
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #444; transition: .4s; border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(18px); }

/* PIN SCREEN */
#pin-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 5000; display: none; flex-direction: column; align-items: center; justify-content: center; }
.pin-dots { display: flex; gap: 15px; margin-bottom: 40px; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #333; transition: 0.2s; }
.dot.filled { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 10px var(--primary); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pin-pad button { width: 70px; height: 70px; border-radius: 50%; background: #1a1a1a; border: none; color: white; font-size: 24px; font-weight: bold; }

/* HISTORY BUTTONS */
.history-btn {
    background: transparent !important;
    border: 1px solid #333 !important;
    border-radius: 8px;
    padding: 6px 10px;
    margin-left: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
    color: #ccc;
}
.history-btn:active {
    background: rgba(255, 255, 255, 0.1) !important;
}
.history-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* ANALYSIS FILTERS */
.analysis-filters {
    display: flex;
    background: #1e1e1e;
    padding: 4px;
    border-radius: 12px;
    margin: 0 15px 15px 15px;
    border: 1px solid #333;
}
.af-btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.af-btn.active {
    background: #333;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* === V21.2: ANALYSIS TABS & NEW WIDGETS === */

/* Tabs Navigation */
.analysis-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0 15px;
}
.tab-chip {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.tab-chip.active {
    background: #333;
    border-color: #fff;
    color: #fff;
    box-shadow: 0 2px 10px rgba(255,255,255,0.1);
}

/* Financial Runway Card (V20) */
.runway-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
    border: 1px solid #ffd700;
    border-radius: 16px;
    padding: 20px;
    margin: 0 15px 20px 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
}
.runway-title {
    font-size: 12px;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: bold;
}
.runway-value {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
}
.runway-sub {
    font-size: 11px;
    color: #888;
}

/* Forecast Card (V21) */
.forecast-box {
    background: linear-gradient(135deg, #2979ff 0%, #1565c0 100%);
    border-radius: 16px;
    padding: 20px;
    margin: 0 15px 20px 15px;
    text-align: center;
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(41, 121, 255, 0.3);
}
.forecast-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    opacity: 0.8;
}
.forecast-val {
    font-size: 28px;
    font-weight: 800;
}
.forecast-info {
    font-size: 11px;
    margin-top: 5px;
    opacity: 0.7;
}

/* Annual Projection (V21.2) */
.annual-box {
    background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);
    border-radius: 16px;
    padding: 20px;
    margin: 0 15px 20px 15px;
    text-align: center;
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Latte Factor (V21.2) */
.latte-card {
    background: #2d2d2d;
    border-radius: 16px;
    padding: 15px;
    margin: 0 15px 20px 15px;
    display: flex;
    align-items: center;
    border: 1px solid #444;
}
.latte-icon {
    font-size: 30px;
    margin-right: 15px;
}

/* ROI Badges */
.roi-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: auto;
}
.roi-up { background: rgba(0, 230, 118, 0.2); color: #00e676; }
.roi-down { background: rgba(255, 82, 82, 0.2); color: #ff5252; }
.roi-neutral { background: rgba(255, 255, 255, 0.1); color: #888; }

/* Heatmap Grid (V21.3 Real Calendar) */
.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 15px;
    margin-bottom: 25px;
}
.heatmap-header {
    text-align: center;
    font-size: 10px;
    color: #666;
    font-weight: bold;
    padding-bottom: 5px;
}
.heatmap-day {
    aspect-ratio: 1;
    border-radius: 6px;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #888;
    font-weight: bold;
    position: relative;
    transition: transform 0.1s;
}
/* Празни кутийки (за избутване на дните) */
.heatmap-empty {
    background: transparent;
}

/* Heatmap Levels */
.hm-lvl-0 { background: #2a2a2a; color: #555; }
.hm-lvl-1 { background: rgba(255, 215, 0, 0.1); color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.2); }
.hm-lvl-2 { background: rgba(255, 152, 0, 0.2); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.hm-lvl-3 { background: rgba(255, 82, 82, 0.2); color: #ff5252; border: 1px solid rgba(255, 82, 82, 0.3); }

.hm-today {
    border: 1px solid white !important;
    box-shadow: 0 0 5px rgba(255,255,255,0.5);
}

/* NEEDS VS WANTS */
.top-spend-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #333;
    font-size: 13px;
    align-items: center;
}
.top-spend-rank {
    color: var(--primary);
    font-weight: bold;
    margin-right: 10px;
    width: 20px;
}
.top-spend-name {
    flex: 1;
    color: #ccc;
    font-weight: 500;
}
.top-spend-val {
    font-weight: bold;
    color: white;
}

.nw-compare-box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.nw-card {
    flex: 1;
    background: #252525;
    padding: 15px 10px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #333;
}
.nw-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 5px;
    letter-spacing: 1px;
}
.nw-val {
    font-size: 18px;
    font-weight: 800;
}
.nw-bar {
    height: 4px;
    border-radius: 2px;
    margin-top: 8px;
    width: 100%;
}
/* V21.4 Calendar Navigation */
.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px 15px 15px;
}

.cal-title {
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-transform: capitalize;
}

.cal-nav-btn {
    background: #333;
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cal-nav-btn:active {
    background: var(--primary);
    color: black;
}
/* === V21.5 SMART ANALYSIS CONTROLS === */

/* Превключвател МЕСЕЦ / ГОДИНА */
.mode-switch-container {
    background: #1e1e1e;
    border-radius: 12px;
    padding: 4px;
    display: flex;
    margin-bottom: 15px;
    border: 1px solid #333;
}

.mode-btn {
    flex: 1;
    border: none;
    background: none;
    color: #888;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.2s;
}

.mode-btn.active {
    background: #00e676; /* Зелено */
    color: black;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Падащо меню за Години */
.year-select-wrapper {
    text-align: center;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.year-select {
    background: #333;
    color: white;
    border: 1px solid #555;
    padding: 8px 25px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    text-align: center;
}

/* Скриване на елементи в зависимост от режима */
.hidden-in-year-mode { display: none !important; }
.hidden-in-month-mode { display: none !important; }

/* === PRO CALCULATOR STYLES === */
.calc-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #444;
    color: white;
    font-size: 32px;
    font-weight: bold;
    text-align: right;
    padding: 10px;
    margin-bottom: 15px;
    outline: none;
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #37474f; /* Тъмна рамка между бутоните */
    border: 1px solid #37474f;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
}

.calc-grid button {
    background: #263238; /* Тъмносин фон като на снимката */
    color: white;
    border: none;
    padding: 18px 0;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s;
}

.calc-grid button:active {
    background: #37474f;
}

.calc-grid .calc-op {
    background: #304048; /* Малко по-светло за операциите */
}

.calc-grid .calc-del {
    background: #304048;
    font-size: 18px; /* По-малка иконка за триене */
}

/* === LIVE CALCULATOR PREVIEW === */
.calc-preview-text {
    height: 20px;          /* Фиксирана височина, за да не подскача екрана */
    text-align: right;     /* Вдясно */
    font-size: 16px;       /* По-малък шрифт от основния */
    color: #00e676;        /* Зелен цвят за резултата (или #888 за сиво) */
    font-weight: bold;
    margin-top: -10px;     /* Леко нагоре към главното поле */
    margin-bottom: 10px;
    padding-right: 10px;
    opacity: 0;            /* Скрито по подразбиране */
    transition: opacity 0.2s;
}
.calc-preview-text.visible {
    opacity: 1;            /* Показва се само когато има сметка */
}

/* === BROKER MANAGER STYLES (V21.10) === */
.broker-valuation-box {
    background: #1e1e1e;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #333;
}
.broker-select {
    width: 100%;
    padding: 10px;
    background: #2a2a2a;
    color: white;
    border: 1px solid #444;
    border-radius: 8px;
    font-size: 14px;
}
.broker-card {
    background: #252525;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid #444;
}
.broker-prices-row {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: #ccc;
    background: #1e1e1e;
    padding: 5px;
    border-radius: 6px;
}
.spread-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}
.spread-good { background: rgba(0, 230, 118, 0.2); color: #00e676; }
.spread-bad { background: rgba(255, 82, 82, 0.2); color: #ff5252; }
.spread-neutral { background: rgba(255, 255, 255, 0.1); color: #aaa; }

/* === V21.11 NEW STYLES === */

/* 1. Profit/Loss Indicators */
.pl-row {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed #444;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}
.text-green { color: #00e676; font-weight: bold; }
.text-red { color: #ff5252; font-weight: bold; }
.text-neutral { color: #888; }

/* 2. History Action Buttons */
.hist-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 5px;
    margin-left: 5px;
    opacity: 0.7;
}
.hist-action-btn:hover { opacity: 1; }

/* 3. Total Metal Dashboard Card */
.metal-dash-card {
    background: linear-gradient(135deg, #2c3e50, #000000);
    border: 1px solid #444;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.metal-dash-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
    color: #ccc;
}
.metal-dash-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #555;
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    text-align: right;
}

/* === V21.12 DEAL HUNTER === */

/* 1. Бутони за грамажи */
.weight-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
.weight-btn {
    flex: 1;
    background: #333;
    border: 1px solid #555;
    color: #ddd;
    padding: 5px 2px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 45px;
    text-align: center;
}
.weight-btn:hover { background: #444; border-color: #777; }
.weight-btn.active { background: #ffd700; color: #000; font-weight: bold; border-color: #ffd700; }

/* 2. Анализ на сделката (Марж) */
.deal-analysis {
    background: rgba(0,0,0,0.3);
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    display: none; /* Скрито докато не въведеш цена */
}
.margin-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 11px;
    margin-left: 5px;
}
.bg-good { background: rgba(0, 230, 118, 0.2); color: #00e676; border: 1px solid #00e676; }
.bg-warn { background: rgba(255, 152, 0, 0.2); color: #ff9800; border: 1px solid #ff9800; }
.bg-bad  { background: rgba(255, 82, 82, 0.2);  color: #ff5252;  border: 1px solid #ff5252; }

/* === V22.1 METAL PRO STYLES === */

/* Табове в модала (Активни / Продадени) */
.metal-tabs {
    display: flex;
    background: #111;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 15px;
    border: 1px solid #333;
}
.metal-tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    color: #666;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.metal-tab-btn.active {
    background: #333;
    color: #ffd700; /* Златисто за активния таб */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Статистика (Средна цена) */
.metal-stats-row {
    display: flex;
    justify-content: space-between;
    background: #252525;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    border: 1px solid #333;
}

/* Значки за карати */
.purity-badge {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    background: #444;
    color: #fff;
    margin-left: 5px;
    border: 1px solid #555;
}

/* Продажби */
.sold-item {
    opacity: 0.8;
    border-left: 3px solid #555;
}
.profit-badge {
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.profit-win { background: rgba(0, 230, 118, 0.15); color: #00e676; border: 1px solid rgba(0, 230, 118, 0.3); }
.profit-loss { background: rgba(255, 82, 82, 0.15); color: #ff5252; border: 1px solid rgba(255, 82, 82, 0.3); }

/* Бутон за продажба */
.btn-sell {
    background: rgba(255, 215, 0, 0.1) !important;
    color: #ffd700 !important;
    border: 1px solid #ffd700 !important;
    margin-right: 5px;
}

/* === SMART TOOLTIP (ПИТАНКА ЗА НАЧАЛЕН ЕКРАН) === */
.info-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.1); /* Леко прозрачно */
    color: #ffd700; /* Златен цвят на текста */
    border: 1px solid #ffd700;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    cursor: help;
    margin-left: 8px; /* Разстояние от текста */
    position: relative;
    vertical-align: middle;
}

/* Балончето с текста при посочване */
.info-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 140%; /* Появява се над иконата */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #222;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid #444;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
    text-align: center;
    white-space: normal;
}