/* --- Global Styles & Layout --- */
html, body {
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    color: #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content { display: flex; flex-grow: 1; min-height: 0; }
.left-panel { flex-shrink: 0; width: 300px; background-color: #252526; border-right: 1px solid #444; display: flex; flex-direction: column; overflow-y: auto; }
.right-panel { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

/* --- Tabs & Chart Styles --- */
.tab-container { flex-shrink: 0; padding: 10px; background-color: #252526; border-bottom: 1px solid #444; display: flex; overflow-x: auto; gap: 10px; -ms-overflow-style: none; scrollbar-width: none; }
.tab-container::-webkit-scrollbar { display: none; }
.tab { padding: 6px 12px; border: 1px solid #555; border-radius: 4px; cursor: pointer; user-select: none; background-color: #333; color: #ccc; white-space: nowrap; font-size: 14px; }
.tab:hover { background-color: #454545; }
.tab.active { background-color: #007acc; color: #fff; border-color: #007acc; }
.time-selector-container { flex-shrink: 0; padding: 5px 10px 10px 10px; background-color: #252526; display: flex; justify-content: flex-start; gap: 10px; }
.time-tab { padding: 4px 10px; font-size: 13px; }
.chart-container { flex-grow: 1; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
#kline-chart { width: 100%; height: 100%; min-height: 250px; }

/* --- Portfolio Card Styles --- */
.portfolio-card-wrapper { padding: 15px; border-bottom: 1px solid #444; background-color: #252526; }
.portfolio-card { background-color: #313244; color: #cdd6f4; font-family: 'Noto Sans SC', sans-serif; padding: 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
.portfolio-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #45475a; padding-bottom: 8px; margin-bottom: 12px; }
.portfolio-header .name { font-size: 20px; font-weight: 700; color: #cba6f7; }
.portfolio-stock-item { margin-bottom: 10px; padding: 8px; background-color: #3d3e52; border-left: 4px solid #585b70; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease-in-out; }
.portfolio-stock-item:hover { background-color: #4a4b63; }
.portfolio-stock-header { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 700; }
.portfolio-stock-details { display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a6adc8; }
.portfolio-pnl.positive { color: #a6e3a1; }
.portfolio-pnl.negative { color: #f38ba8; }
.portfolio-footer { margin-top: 15px; padding-top: 10px; border-top: 1px solid #45475a; font-size: 14px; }
.portfolio-footer-item { display: flex; justify-content: space-between; margin-bottom: 3px; }
.no-holdings-message { text-align: center; padding: 20px; color: #a6adc8; font-size: 16px; }

/* --- Auth & Trade Panel Styles --- */
.auth-section { order: -1; padding: 15px; background-color: #2c2c2e; border-bottom: 1px solid #444; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auth-section .user-info { font-size: 14px; color: #a6e3a1; font-weight: bold; }
.auth-section .auth-buttons { display: flex; gap: 8px; }
.auth-section .auth-buttons button { 
    padding: 5px 12px; /* 减少了上下的内边距 */
    font-size: 13px; 
    cursor: pointer; 
    border: 1px solid #555; 
    background-color: #3e3e42; 
    color: #ccc; 
    border-radius: 4px; 
    white-space: nowrap; /* 新增：强制文字不换行 */
}

.auth-section .auth-buttons button:hover { background-color: #555; }
#logout-button { background-color: #f38ba8; color: #1e1e2e; }
.trade-panel { display: none; padding: 15px; background-color: #2c2c2e; border-top: 1px solid #444; margin-top: auto; }
.trade-panel.active { display: block; }
.trade-panel h3 { margin: 0 0 10px 0; font-size: 16px; color: #cba6f7; text-align: center; }
.trade-form { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.trade-form input { flex-grow: 1; padding: 8px; border: 1px solid #555; border-radius: 4px; background-color: #333; color: #e0e0e0; font-size: 14px; }
.trade-form button { padding: 10px 15px; font-size: 16px; border-radius: 4px; border: none; cursor: pointer; font-weight: bold; }
.trade-form .buy-btn { background-color: #a6e3a1; color: #1e1e2e; }
.trade-form .sell-btn { background-color: #f38ba8; color: #1e1e2e; }

/* --- Modal & Toast Styles --- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(5px); align-items: center; justify-content: center; }
.modal-content { background-color: #252526; padding: 20px; border: 1px solid #888; width: 80%; max-width: 400px; border-radius: 8px; color: #e0e0e0; position: relative; }
.modal-content h2 { margin-top: 0; color: #cba6f7; }
.modal-form-group { margin-bottom: 15px; }
.modal-form-group label { display: block; margin-bottom: 5px; }
.modal-form-group input { width: 100%; padding: 8px; box-sizing: border-box; background-color: #333; border: 1px solid #555; color: #e0e0e0; border-radius: 4px; }
.modal-button { width: 100%; padding: 10px; background-color: #007acc; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
.modal-button:hover { background-color: #005f99; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 15px; }
.close-button:hover, .close-button:focus { color: #fff; text-decoration: none; cursor: pointer; }
#toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.toast { background-color: #333; color: #fff; padding: 12px 20px; border-radius: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.5s, transform 0.5s; font-size: 14px; transform: translateY(20px); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background-color: #14b143; }
.toast.error { background-color: #ef232a; }
.forgot-password-link { display: block; text-align: right; font-size: 12px; color: #89b4fa; text-decoration: none; margin-top: 10px; }
.forgot-password-link:hover { text-decoration: underline; }

/* ========= 新增/修改的美化代码 START ========= */
#token-modal .modal-content p {
    font-size: 14px;
    color: #a6adc8; /* 使用更柔和的文本颜色 */
    margin-bottom: 10px;
}

#api-token-display {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    background-color: #1e1e2e; /* 更深的代码区背景色 */
    border: 1px solid #45475a; /* 协调的边框色 */
    color: #cdd6f4; /* 明亮的文本颜色 */
    border-radius: 6px;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace; /* 优先使用适合代码的等宽字体 */
    font-size: 14px;
    line-height: 1.5;
    resize: none; /* 禁用用户调整大小的功能 */
    white-space: pre-wrap; /* 允许自动换行 */
    word-break: break-all; /* 强制长字符串换行，防止溢出 */
}
/* ========= 新增/修改的美化代码 END ========= */

/* --- Mobile Layout Optimization --- */
@media (max-width: 768px) {
    .main-content { flex-direction: column; overflow-y: auto; }
    .left-panel { width: 100%; border-right: none; border-bottom: 1px solid #444; overflow-y: visible; flex-shrink: 0; }
    .right-panel { width: 100%; flex-grow: 0; }
    .chart-container { flex-grow: 0; height: 70vw; min-height: 300px; }
}