:root {
    --bg-main: #1e1915;
    --bg-panel: #2a221b;
    --bg-nested: #362c23;
    --border-color: #4a3e33;
    --text-main: #ebdccb;
    --text-muted: #a39382;
    --color-green: #38b000;
    --color-red: #d00000;
    --color-gold: #cc8b3c;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    user-select: none;
}

.app-header {
    background-color: var(--bg-panel);
    border-bottom: 2px solid var(--border-color);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo { font-weight: bold; color: var(--color-gold); font-size: 18px; }
.user-wallets { display: flex; gap: 20px; font-weight: 600; }

.main-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 15px;
    padding: 15px;
    max-width: 1400px;
    margin: 0 auto;
}

.trading-area, .sidebar-area { display: flex; flex-direction: column; gap: 15px; }

.chart-section, .terminal-section, .news-section, .goals-section {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 15px;
}

.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.price-display { font-size: 24px; font-weight: bold; }

.canvas-wrapper { width: 100%; height: 220px; background-color: var(--bg-main); border-radius: 4px; position: relative; }
canvas { width: 100% !important; height: 100% !important; display: block; }

.terminal-tabs { display: flex; gap: 5px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 15px; }
.tab-trigger { background: none; border: none; color: var(--text-muted); font-size: 14px; font-weight: bold; padding: 6px 12px; cursor: pointer; }
.tab-trigger.active { color: var(--color-gold); border-bottom: 2px solid var(--color-gold); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.panel-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 15px; }

.form-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 15px; }
input, select { background-color: var(--bg-main); border: 1px solid var(--border-color); color: var(--text-main); padding: 8px; border-radius: 4px; font-size: 14px; width: 100%; box-sizing: border-box; }

.action-buttons { display: flex; gap: 15px; }
.btn { border: none; border-radius: 4px; padding: 10px 16px; font-weight: bold; cursor: pointer; font-size: 14px; transition: opacity 0.1s; }
.btn:hover { opacity: 0.9; }
.btn-green { background-color: var(--color-green); color: white; width: 100%; }
.btn-red { background-color: var(--color-red); color: white; width: 100%; }
.btn-gold { background-color: var(--color-gold); color: #1e1915; }
.btn-gray { background-color: var(--border-color); color: var(--text-main); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.full-width { width: 100%; }

.positions-wrapper { margin-top: 15px; border-top: 1px solid var(--border-color); padding-top: 10px; }
.pos-card { background-color: var(--bg-nested); border-left: 4px solid var(--color-gold); padding: 10px; margin-bottom: 8px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }

.bond-item, .goal-node { background-color: var(--bg-nested); padding: 10px; border-radius: 4px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.bond-info h5, .goal-node h5 { margin: 0; font-size: 14px; }
.bond-info p, .goal-node p { margin: 2px 0 0 0; font-size: 12px; color: var(--text-muted); }

.news-container { background-color: var(--bg-main); padding: 10px; border-radius: 4px; font-size: 13px; min-height: 60px; border-left: 3px solid var(--color-gold); line-height: 1.4; }

.text-up { color: var(--color-green); }
.text-down { color: var(--color-red); }