/* StockWatch - Main Stylesheet v18 - Mobile Responsive + Security Enhancements */

:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --success: #16a34a;
    --danger: #dc2626;
    --green: #22c55e;
    --red: #ef4444;
    --warning: #f59e0b;
    --info: #0ea5e9;
    --bg: #f1f5f9;
    --card: #ffffff;
    --text: #1e293b;
    --text-secondary: #64748b;
    --border: #e2e8f0;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --radius: 8px;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    /* 禁止用户查看源码时的右键选择（适度防护） */
    -webkit-user-select: text;
    user-select: text;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Navbar */
.navbar {
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.brand {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.nav-links a {
    margin-left: 24px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.nav-links a:hover { color: var(--primary); }

.nav-links .user-info {
    margin-left: 24px;
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
}

.nav-links .btn-logout {
    margin-left: 12px;
    padding: 6px 14px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
}

.nav-links .btn-logout:hover { background: #fecaca; }

/* Page Header */
.page-header {
    margin: 24px 0 16px;
}

.page-header h1 {
    font-size: 28px;
    font-weight: 700;
}

.back-link {
    display: inline-block;
    color: var(--primary);
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 14px;
}

/* View Tabs - 大按钮切换 */
.view-tabs {
    display: flex;
    gap: 16px;
    margin: 20px 0;
}

.view-tab-btn {
    flex: 1;
    padding: 24px 32px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    cursor: pointer;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.view-tab-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.view-tab-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

.view-tab-btn .tab-icon {
    font-size: 32px;
}

/* Search */
.search-section {
    margin: 20px 0;
}

.search-wrapper {
    position: relative;
}

#searchInput {
    width: 100%;
    padding: 14px 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 16px;
    transition: border-color 0.2s;
}

#searchInput:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 50;
    display: none;
    margin-top: 4px;
}

.search-dropdown.active { display: block; }

.search-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-item:hover { background: #f0f9ff; }
.search-item:last-child { border-bottom: none; }

.search-item .code {
    font-weight: 600;
    color: var(--primary);
    margin-right: 12px;
}

.search-item .name {
    flex: 1;
}

.search-item .type-badge {
    font-size: 12px;
    padding: 2px 8px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 4px;
}

.search-item .price-info {
    text-align: right;
    font-size: 13px;
}

.search-item .price-info .price {
    font-weight: 600;
}

/* Buttons */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm { padding: 5px 10px; font-size: 12px; }

.btn-xs {
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }

.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #15803d; }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #b91c1c; }

.btn-warning { background: var(--warning); color: white; }
.btn-warning:hover { background: #d97706; }

.btn-info { background: var(--info); color: white; }
.btn-info:hover { background: #0284c7; }

.btn-secondary { background: var(--text-secondary); color: white; }
.btn-secondary:hover { background: #475569; }

.btn-cancel { background: #e2e8f0; color: var(--text); }
.btn-cancel:hover { background: #cbd5e1; }

/* Toolbar */
.toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar .search-wrapper {
    flex: 1;
    min-width: 200px;
}

.status-text {
    font-size: 13px;
    color: var(--text-secondary);
}

/* 节流提示 */
.rate-limit-msg {
    font-size: 13px;
    color: var(--danger);
    font-weight: 500;
}

/* Watchlist Card */
.watchlist-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
    overflow: visible;
}

.watchlist-card h2 {
    font-size: 18px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* Tables */
.watchlist-table, .history-table {
    width: 100%;
    min-width: 1400px;  /* 确保表格不被压缩，需要时可横向滚动 */
    border-collapse: separate; border-spacing: 0;
    table-layout: fixed;
}

.watchlist-table th, .watchlist-table td,
.history-table th, .history-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.watchlist-table th, .history-table th {
    background: #f8fafc;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.watchlist-table td { font-size: 14px; }

/* 列宽度控制 */
.watchlist-table .col-code { width: 130px; min-width: 130px; }
.watchlist-table .col-name { width: 120px; }
.watchlist-table .col-type { width: 70px; }
.watchlist-table .col-price { width: 80px; text-align: right; }
.watchlist-table .col-change { width: 90px; text-align: right; }

.change-pct {
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
}
.watchlist-table .col-rec { width: 90px; }
.watchlist-table .col-since { width: 90px; text-align: right; }
.watchlist-table .col-report { width: 200px; }
.watchlist-table .col-review { width: 90px; }
.watchlist-table .col-action { width: 280px; }
.watchlist-table .col-pnl { width: 150px; text-align: right; white-space: nowrap; }
.watchlist-table .col-added { width: 140px; white-space: nowrap; }
.watchlist-table .col-financial { width: 70px; text-align: center; }

.watchlist-table code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    display: inline-block;
}

/* 涨跌颜色：A股涨=红 跌=绿 */
.price-positive { color: #dc2626; font-weight: 600; }
.price-negative { color: #16a34a; font-weight: 600; }

.action-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.badge-stock { background: #dbeafe; color: #1e40af; }
.badge-fund { background: #ede9fe; color: #6d28d9; }
.badge-index { background: #fef3c7; color: #92400e; }

.badge-init { background: #dbeafe; color: #1e40af; }
.badge-morning { background: #fef3c7; color: #92400e; }
.badge-evening { background: #e0e7ff; color: #3730a3; }
.badge-review { background: #d1fae5; color: #065f46; }

/* 评级标签颜色：从深红到深绿渐变（唯一一组） */
.badge-rec-strong_sell { background: #dc2626; color: #ffffff; font-weight: 700; }
.badge-rec-sell { background: #f87171; color: #ffffff; font-weight: 600; }
.badge-rec-underweight { background: #fb923c; color: #ffffff; font-weight: 600; }
.badge-rec-hold { background: #fbbf24; color: #1a1a1a; font-weight: 500; }
.badge-rec-overweight { background: #86efac; color: #064e3b; font-weight: 600; }
.badge-rec-buy { background: #22c55e; color: #ffffff; font-weight: 600; }
.badge-rec-strong_buy { background: #15803d; color: #ffffff; font-weight: 700; }

/* 风险标签颜色 */
.badge-risk-low { background: #d1fae5; color: #065f46; }
.badge-risk-medium { background: #fef3c7; color: #92400e; }
.badge-risk-high { background: #fee2e2; color: #991b1b; }

/* Report Card */
.report-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
}

.report-header {
    margin-bottom: 20px;
}

.report-header h2 {
    font-size: 20px;
    margin-bottom: 12px;
}

.report-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.report-meta .date {
    font-size: 13px;
    color: var(--text-secondary);
}

.report-levels {
    display: flex;
    gap: 24px;
    background: #f8fafc;
    padding: 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.level-item {
    display: flex;
    flex-direction: column;
}

.level-item .label {
    font-size: 12px;
    color: var(--text-secondary);
}

.level-item .value {
    font-size: 18px;
    font-weight: 700;
}

.level-item .value.profit { color: var(--red); }
.level-item .value.loss { color: var(--green); }

.report-content {
    white-space: pre-wrap;
    line-height: 1.8;
    font-size: 15px;
}

/* Report List */
.report-item-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    overflow: hidden;
}

.report-item-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.report-item-header h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.report-item-body {
    padding: 16px 20px;
}

.report-item-body p {
    margin-bottom: 12px;
    color: var(--text-secondary);
}

/* Timeline */
.timeline-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-left: 2px solid var(--border);
    padding-left: 24px;
    margin-left: 12px;
}

.timeline-marker {
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    margin-left: -31px;
    margin-top: 6px;
}

.timeline-content h4 {
    font-size: 15px;
    margin-bottom: 4px;
}

.timeline-content .meta {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* Modal */
.modal {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
}

.modal.active {
    display: flex !important;
    visibility: visible;
    opacity: 1;
}

.modal-content {
    background: var(--card);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content h3 {
    margin-bottom: 16px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
}

/* Footer */
.footer {
    background: var(--card);
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Text helpers */
.text-muted { color: var(--text-secondary); font-size: 13px; }
.report-count { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }

/* Report cell in index table */
.report-cell {
    vertical-align: middle;
}

.generating-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.report-rec {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    align-items: center;
}

.report-rec .badge {
    font-size: 11px;
    padding: 2px 6px;
}

.target-price {
    font-size: 11px;
    color: #16a34a;
    font-weight: 500;
    white-space: nowrap;
}

.stop-loss {
    font-size: 11px;
    color: #dc2626;
    font-weight: 500;
    white-space: nowrap;
}

/* Report content */
.report-content pre {
    background: #f8fafc;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 13px;
}

.report-content code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* 新闻展示页 */
.news-container {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

.news-header h2 {
    font-size: 18px;
}

.news-fetch-time {
    font-size: 13px;
    color: var(--text-secondary);
}

.news-sources {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.news-source-badge {
    font-size: 12px;
    padding: 4px 10px;
    background: #f0f9ff;
    color: #0369a1;
    border-radius: 4px;
}

.news-source-badge.error {
    background: #fee2e2;
    color: #991b1b;
}

.news-category {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.news-category-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    background: #f8fafc;
    transition: background 0.2s;
}

.news-category-title:hover {
    background: #f0f9ff;
    color: var(--primary);
}

.news-category-title .toggle-icon {
    transition: transform 0.2s;
    font-size: 12px;
}

.news-category-body {
    padding: 8px 16px;
    transition: max-height 0.3s ease;
}

.news-category-body.collapsed {
    display: none;
}

.news-item {
    padding: 10px 0;
    border-bottom: 1px dotted var(--border);
}

.news-item:last-child {
    border-bottom: none;
}
.news-item:hover { background: #f8fafc; cursor: pointer; }
.news-item:hover .news-item-title { color: var(--primary, #667eea); }


.news-item-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.news-item-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.news-item-content {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
}

.news-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.news-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* ========== 安全加固 CSS ========== */
/* 禁止在移动端长按选中源码 */
@media (pointer: coarse) {
    .container, .watchlist-table, .report-content {
        -webkit-touch-callout: none;
    }
}

/* ========== v18 手机端全面响应式 ========== */
@media (max-width: 768px) {
    .container { padding: 0 12px; }

    .navbar .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .brand { font-size: 20px; }

    .nav-links {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        width: 100%;
        padding-bottom: 4px;
        width: 100%;
    }

    .nav-links a, .nav-links button {
        padding: 8px 14px;
        font-size: 14px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-links .user-info {
        margin-left: 0;
        font-size: 12px;
    }

    .page-header h1 { font-size: 22px; }

    /* 视图切换按钮缩小 */
    .view-tabs {
        flex-direction: column;
        gap: 10px;
        margin: 12px 0;
    }

    .view-tab-btn {
        font-size: 18px;
        padding: 14px 20px;
    }

    .view-tab-btn .tab-icon {
        font-size: 22px;
    }

    /* 研报卡片溢出修复 */
    .report-card {
        padding: 16px;
    }

    .report-header h2 {
        font-size: 16px;
        word-break: break-word;
    }

    .report-meta {
        flex-direction: column;
        gap: 4px;
    }

    .report-levels {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

    .level-item .value {
        font-size: 16px;
    }

    /* 研报内容断行 */
    .report-content {
        font-size: 14px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .report-content pre {
        font-size: 12px;
        white-space: pre-wrap;
        word-break: break-all;
    }

    /* 表格全面响应：隐藏次要列 */
    .watchlist-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .watchlist-table th:nth-child(5),
    .watchlist-table td:nth-child(5),
    .watchlist-table th:nth-child(7),
    .watchlist-table td:nth-child(7) {
        min-width: 50px !important;
        max-width: 65px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    .watchlist-table th,
    .watchlist-table td {
        padding: 8px 10px;
        font-size: 13px;
    }

    .watchlist-card {
        padding: 12px;
        overflow-x: auto;
    }

    .watchlist-card h2 {
        font-size: 16px;
    }

    /* 操作按钮不换行 */
    .action-btns {
        flex-direction: column;
        gap: 4px;
    }

    .action-btns .btn {
        width: 100%;
        text-align: center;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 研报评级不换行溢出 */
    .report-rec {
        flex-direction: column;
        gap: 2px;
    }

    .report-rec .badge {
        font-size: 10px;
        padding: 1px 4px;
    }

    /* 搜索栏全宽 */
    .search-wrapper {
        width: 100%;
    }

    #searchInput {
        padding: 12px 14px;
        font-size: 14px;
    }

    /* 新闻展示响应 */
    .news-container {
        padding: 12px;
    }

    .news-header {
        flex-direction: column;
        gap: 8px;
    }

    .news-header h2 {
        font-size: 16px;
    }

    .news-category-title {
        font-size: 13px;
        padding: 10px 12px;
    }

    .news-item-title {
        font-size: 13px;
    }

    /* 工具栏响应 */
    .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .toolbar .btn {
        width: 100%;
        text-align: center;
    }

    /* Modal 移动端适配 */
    .modal-content {
        width: 95%;
        padding: 20px;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .view-tab-btn {
        font-size: 16px;
        padding: 12px 16px;
    }

    .watchlist-table th,
    .watchlist-table td {
        padding: 6px 8px;
        font-size: 12px;
    }

    .watchlist-table code {
        font-size: 11px;
    }
}

/* Sorting */
.sortable { cursor: pointer; user-select: none; position: relative; }
.sortable:hover { background: rgba(0,0,0,0.05); }
.sort-icon { font-size: 10px; opacity: 0.5; margin-left: 4px; transition: transform 0.2s; }
.sort-active .sort-icon { opacity: 1; }
.sort-asc .sort-icon { transform: rotate(180deg); }
.sort-desc .sort-icon { transform: rotate(0deg); color: var(--primary); }

/* Since added change */
.since-change { font-weight: 500; }
.since-change.green { color: #16a34a; }
.since-change.red { color: #dc2626; }
.added-time { font-size: 12px; color: #666; white-space: nowrap; }

/* Review detail */
.review-detail { max-width: 800px; margin: 0 auto; }
.score-card { display: inline-block; margin: 10px 20px 10px 0; padding: 15px 25px; border-radius: 8px; background: #f5f5f5; text-align: center; }
.score-label { font-size: 12px; color: #666; margin-bottom: 5px; }
.score-value { font-size: 24px; font-weight: bold; }
.score-value.green { color: #16a34a; }
.score-value.red { color: #dc2626; }
.review-content { margin-top: 20px; line-height: 1.8; }
.review-actions { margin-top: 30px; display: flex; gap: 10px; }

/* Action buttons spacing */
.action-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.action-btns .btn { font-size: 12px; padding: 4px 8px; }

/* Rec cell */
.rec-cell { white-space: nowrap; }
.text-muted { color: #999; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* review.html 时间线移动端优化 */
@media (max-width: 768px) {
    .timeline-item {
        padding-left: 12px;
    }
    .timeline-item::before {
        left: 4px;
    }
}

/* review_detail.html 评分卡片移动端适配 */
@media (max-width: 768px) {
    .score-card {
        display: block;
        margin: 8px 0;
    }
}

/* Horizontal scroll visual indicator for mobile tables */
@media (max-width: 768px) {
    .table-container {
        position: relative;
    }
    .table-container::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.05));
        pointer-events: none;
    }
    .watchlist-table::-webkit-scrollbar {
        height: 4px;
    }
    .watchlist-table::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.05);
        border-radius: 2px;
    }
    .watchlist-table::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 2px;
    }
}

/* Text overflow handling */
td:not(.col-select) {
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Table headers: clip overflow, no ellipsis */
th:not(.col-select) {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

/* Focus styles for accessibility */
button:focus-visible,
input:focus-visible,
a:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* ========== 市场总结卡片 ========== */
.market-summary-card {
    display: flex;
    gap: 24px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.market-summary-left {
    flex: 1;
    min-width: 0;
}

.market-summary-right {
    width: 280px;
    flex-shrink: 0;
}

.market-summary-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.market-summary-date {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    margin-left: 8px;
}

.market-summary-content {
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
    max-height: 180px;
    overflow-y: auto;
}

.market-summary-content h3 {
    margin: 12px 0 6px 0;
    font-size: 14px;
    color: #111827;
}

.market-summary-content h3:first-child {
    margin-top: 0;
}

.sentiment-index-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sentiment-label {
    font-size: 13px;
    color: #6b7280;
}

.sentiment-score {
    font-size: 24px;
    font-weight: 700;
    color: #ef4444;  /* 默认红色，JS 动态更新 */
}

.sentiment-chart {
    width: 100%;
    height: 140px;
}

.loading-text {
    color: #9ca3af;
    text-align: center;
    padding: 20px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .market-summary-card {
        flex-direction: column;
        padding: 12px 16px;
        gap: 16px;
    }
    
    .market-summary-right {
        width: 100%;
    }
    
    .sentiment-chart {
        height: 120px;
    }
}

/* 顶部导航标签 */
.main-nav {
    display: flex;
    gap: 0;
    background: var(--card-bg, #fff);
    border-bottom: 2px solid var(--border, #e5e7eb);
    padding: 0;
    margin-bottom: 20px;
}

.nav-tab {
    flex: 1;
    padding: 14px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.nav-tab:hover {
    color: var(--text-primary, #1e293b);
    background: var(--bg-secondary, #f9fafb);
}

.nav-tab.active {
    color: var(--primary, #667eea);
    border-bottom-color: var(--primary, #667eea);
    background: var(--bg, #fff);
}

@media (max-width: 768px) {
    .main-nav {
        margin-bottom: 12px;
    }
    
    .nav-tab {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* 批量操作 */
.batch-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.row-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.col-select {
    width: 40px;
    text-align: center;
    overflow: visible !important;
    text-overflow: clip !important;
}

tr.selected {
    background: var(--bg-secondary, #f1f5f9);
}

.btn-danger:hover {
    background: #ef4444 !important;
}

@media (max-width: 768px) {
    .batch-actions {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .batch-actions button {
        flex: 1;
        min-width: 80px;
    }
}

/* 新闻分类 */
.news-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.news-category-btn {
    padding: 6px 14px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #fff);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s;
}

.news-category-btn:hover {
    border-color: var(--primary, #667eea);
    color: var(--primary, #667eea);
}

.news-category-btn.active {
    background: var(--primary, #667eea);
    border-color: var(--primary, #667eea);
    color: white;
}

.news-related-stocks {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border, #e5e7eb);
}

.related-label {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

.stock-link {
    font-size: 12px;
    color: var(--primary, #667eea);
    text-decoration: none;
    padding: 2px 8px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 4px;
    transition: background 0.2s;
}

.stock-link:hover {
    background: var(--border, #e5e7eb);
}

@media (max-width: 768px) {
    .news-categories {
        gap: 6px;
    }
    
    .news-category-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* 移动端手势操作 */
.swipe-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0;
    transform: translateX(100%);
}

.swipe-actions button {
    height: 100%;
    min-width: 80px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.swipe-actions button:first-child {
    background: var(--primary, #667eea);
    color: white;
}

.swipe-actions button.danger {
    background: #ef4444;
    color: white;
}

.swipe-actions button:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .watchlist-table tbody tr {
        position: relative;
        overflow: hidden;
        touch-action: pan-y;
    }
    
    .watchlist-table tbody tr:active {
        background: var(--bg-secondary, #f1f5f9);
    }
}

/* ===== 复盘回测样式 ===== */
.backtest-summary-card {
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.backtest-summary-card h2 {
    font-size: 18px;
    margin: 0 0 16px 0;
    color: var(--text-primary, #1f2937);
}

.backtest-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.stat-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 12px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}

.stat-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.stat-value.positive { color: #ef4444; }
.stat-value.negative { color: #22c55e; }

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.timeline-header h4 {
    margin: 0;
    font-size: 15px;
    flex: 1;
}

.timeline-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 8px 0;
    font-size: 13px;
    flex-wrap: wrap;
}

.timeline-meta .time { color: var(--text-secondary, #6b7280); }
.timeline-meta .entry-price { color: var(--primary, #3b82f6); font-weight: 500; }

.score-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #e5e7eb;
    color: #374151;
}

.backtest-row {
    display: flex;
    gap: 12px;
    margin: 10px 0;
    padding: 10px 12px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.bt-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.bt-label {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 2px;
}

.bt-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.bt-position {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.bt-position.long {
    background: #dcfce7;
    color: #166534;
}

.bt-position.short {
    background: #fee2e2;
    color: #991b1b;
}

.bt-position.neutral {
    background: #f3f4f6;
    color: #6b7280;
}

.bt-return {
    font-size: 15px;
    font-weight: 700;
}

.bt-return.positive { color: #ef4444; }
.bt-return.negative { color: #22c55e; }

.timeline-excerpt {
    font-size: 13px;
    color: var(--text-secondary, #4b5563);
    margin: 8px 0 0 0;
    line-height: 1.5;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .backtest-stats {
        flex-direction: column;
    }
    .stat-item {
        min-width: auto;
    }
    .backtest-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .bt-col {
        flex-direction: row;
        gap: 8px;
        min-width: auto;
        width: 100%;
        justify-content: space-between;
    }
}

/* 复盘操作按钮 */
.review-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.review-actions .btn {
    min-width: 120px;
}

.review-time {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

/* ===== 冻结列：勾选、代码和名称固定不动 ===== */
.watchlist-table th.col-select,
.watchlist-table td.col-select {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card-bg, #ffffff);
}

.watchlist-table th.col-code,
.watchlist-table td.col-code {
    position: sticky;
    left: 40px;
    z-index: 2;
    background: var(--card-bg, #ffffff);
}

.watchlist-table th.col-name,
.watchlist-table td.col-name {
    position: sticky;
    left: 170px;  /* col-select(40) + col-code(130) */
    z-index: 2;
    background: var(--card-bg, #ffffff);
}

/* 表头 z-index 更高 */
.watchlist-table thead th.col-select,
.watchlist-table thead th.col-code,
.watchlist-table thead th.col-name {
    z-index: 3;
}

/* 选中行冻结列也要高亮 */
.watchlist-table tbody tr.selected td.col-select,
.watchlist-table tbody tr.selected td.col-code,
.watchlist-table tbody tr.selected td.col-name {
    background: var(--highlight-bg, #eff6ff);
}

/* 冻结列右侧阴影 */
.watchlist-table td.col-name::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, rgba(0,0,0,0.05), transparent);
    pointer-events: none;
}

/* 新闻列表头部 */
.news-list-header {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.news-list-header h3 {
    font-size: 16px;
    color: var(--text);
}

/* 新闻分类 badge */
.news-cat-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--border);
    color: var(--muted);
    margin-left: 8px;
}

.news-cat-badge[data-cat="科技创新"] {
    background: #e8f5e9;
    color: #2e7d32;
}
.news-cat-badge[data-cat="政策监管"] {
    background: #e3f2fd;
    color: #1565c0;
}
.news-cat-badge[data-cat="公司动态"] {
    background: #fff3e0;
    color: #e65100;
}
.news-cat-badge[data-cat="宏观经济"] {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* 新闻空状态 */
.news-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
}

/* 新闻列表视图样式（renderNewsList 使用） */
.news-list-header {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.news-list-header h3 {
    font-size: 16px;
    color: var(--text);
    margin: 0;
}

.news-items {
    display: block;
}

.news-cat-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    background: #f1f5f9;
    color: #64748b;
    margin-left: 6px;
    vertical-align: middle;
}



/* ===== 全局移动端修复 ===== */
@media (max-width: 768px) {
    /* 防止页面级水平溢出 */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* 新闻分类按钮横向滚动 */
    .news-categories {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .news-categories::-webkit-scrollbar { display: none; }
    .news-category-btn {
        flex-shrink: 0;
        font-size: 13px;
        padding: 8px 12px;
        min-height: 36px;
    }
    
    /* 新闻列表项紧凑 */
    .news-item { padding: 10px 0; }
    .news-item-title { font-size: 14px; line-height: 1.4; }
    .news-item-meta { font-size: 11px; }
    .news-item-content { font-size: 12px; }
    
    /* 评分说明折叠 */
    .rec-page-container .score-explain { display: none; }
}

@media (max-width: 480px) {
    /* 极小屏幕额外紧凑 */
    .navbar .container { padding: 8px 10px; }
    .brand { font-size: 18px; }
    .nav-links a, .nav-links button {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 36px;
    }
    
    /* 推荐页极小屏 */
    .rec-table { min-width: 600px; }
    .rec-table .col-rank { width: 35px; }
    .rec-table td.col-rank { left: 0; }
    .rec-table .col-code { width: 70px; left: 35px; }
    .rec-table .col-name { width: 80px; left: 105px; }
    .rank-badge { width: 22px; height: 22px; font-size: 10px; }
}

/* A6: 手机端隐藏次要列 */
@media (max-width: 768px) {
    .watchlist-table .col-select,
    .watchlist-table .col-type,
    .watchlist-table .col-rec,
    .watchlist-table .col-since,
    .watchlist-table .col-financial,
    .watchlist-table .col-added {
        display: none !important;
    }
    .watchlist-table thead th:nth-child(1),
    .watchlist-table thead th:nth-child(4),
    .watchlist-table thead th:nth-child(7),
    .watchlist-table thead th:nth-child(8),
    .watchlist-table thead th:nth-child(9),
    .watchlist-table thead th:nth-child(13) {
        display: none !important;
    }
}

/* 板块资金流向 */
.money-flow-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.money-flow-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
}
.money-flow-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.money-flow-col h4 { font-size: 14px; }
.mf-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.mf-item:last-child { border-bottom: none; }
.mf-name { flex: 1; font-weight: 500; }
.mf-pct { width: 60px; text-align: right; font-weight: 500; }
.mf-amount { width: 80px; text-align: right; font-weight: 600; }
@media (max-width: 768px) {
    .money-flow-grid { grid-template-columns: 1fr; gap: 12px; }
    .money-flow-card { padding: 14px; }
}

/* 持仓盈亏 */
.pnl-cell { white-space: nowrap; font-size: 12px; }
.pnl-value { font-weight: 600; }
.position-summary {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f0f4ff, #fef3f2);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    flex-wrap: wrap;
}
.position-summary strong { font-size: 15px; margin-left: 4px; }
@media (max-width: 768px) {
    .col-pnl { display: none !important; }
    .watchlist-table thead th:nth-child(9) { display: none !important; }
    .position-summary { font-size: 12px; gap: 10px; }
    .position-summary strong { font-size: 13px; }
}

/* 迷你K线 */
.col-sparkline { white-space: nowrap; padding: 4px 6px !important; }
.col-sparkline-th { min-width: 100px; }
.sparkline-canvas { display: inline-block; vertical-align: middle; }
.flow-arrow { font-size: 14px; font-weight: 700; margin-left: 2px; vertical-align: middle; }
@media (max-width: 768px) {
    .col-review-return { display: none !important; }
}

/* 投资模式切换 */
.invest-mode-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.mode-btn {
    padding: 6px 14px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.2s;
    white-space: nowrap;
}
.mode-btn:first-child { border-right: 1px solid var(--border); }
.mode-btn.active { background: var(--primary); color: white; }
.mode-btn:hover:not(.active) { background: #f3f4f6; }
.billboard-summary-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
@media (max-width: 768px) {
    .mode-btn { padding: 5px 10px; font-size: 12px; }
}


/* === Round 3 Optimizations === */

/* Better table row hover effect */
.watchlist-table tbody tr:hover {
    background: #f0f4ff !important;
    transition: background 0.15s ease;
}

/* Smooth transitions for buttons */
.btn {
    transition: all 0.2s ease;
}
.btn:active {
    transform: scale(0.97);
}

/* Better loading spinner */
.generating-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 12px;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Fix modal overlay scroll on mobile */
#financialOverlay > div,
#positionOverlay > div,
#newsDetailOverlay > div {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Improve toast visibility on mobile */
@media (max-width: 768px) {
    #toast-container {
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
    }
    
    /* Better mobile table layout */
    .watchlist-table {
        font-size: 12px;
    }
    .watchlist-table th,
    .watchlist-table td {
        padding: 6px 4px;
    }
    
    /* Navbar mobile scroll fix */
    .nav-links {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
    }
    .nav-links::-webkit-scrollbar {
        display: none;
    }
    .nav-links a {
        margin-left: 0;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Fix search dropdown on mobile */
    .search-dropdown {
        max-height: 60vh;
        overflow-y: auto;
    }
    
    /* Better modal on mobile */
    .modal-content {
        width: 92% !important;
        max-width: 92% !important;
        margin: 0 auto;
    }
}

/* Smooth scroll for anchor navigation */
html {
    scroll-behavior: smooth;
}

/* Better focus styles for accessibility */
input:focus, textarea:focus, select:focus, button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Fix news detail content line height */
#newsDetailContent {
    line-height: 1.8;
    word-break: break-word;
}

/* Safe area support for iOS notch */
@supports (padding: max(0px)) {
    .navbar {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .footer {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* Improve table header sticky for better UX */
.watchlist-table thead th {
    position: sticky;
    top: 0;
    background: var(--card, #fff);
    z-index: 10;
    border-bottom: 2px solid var(--border);
}


/* === Round 9 UX Improvements === */

/* Status text styles */
.status-text.error {
    color: var(--danger) !important;
    cursor: pointer;
}
.status-text.error:hover {
    text-decoration: underline;
}
.status-text.success {
    color: var(--success) !important;
}
.status-text.loading {
    color: var(--info) !important;
}

/* Disable button visual feedback */
button:disabled, .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Table zebra striping */
.watchlist-table tbody tr:nth-child(even) {
    background: rgba(0,0,0,0.01);
}

/* Better scrollbar for tables */
.watchlist-card::-webkit-scrollbar {
    height: 6px;
}
.watchlist-card::-webkit-scrollbar-track {
    background: transparent;
}
.watchlist-card::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Empty state improvement */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}
.empty-state p {
    font-size: 16px;
    margin: 0;
}


/* === Comprehensive Display Fixes === */

/* Missing utility classes */
.text-muted { color: var(--text-secondary); }
.positive { color: var(--red) !important; }
.negative { color: var(--green) !important; }

/* Better badge styles for recommendations */
.badge-rec-strong_buy { background: #dc2626; color: #fff; }
.badge-rec-buy { background: #ef4444; color: #fff; }
.badge-rec-overweight { background: #f97316; color: #fff; }
.badge-rec-hold { background: #6b7280; color: #fff; }
.badge-rec-underweight { background: #22c55e; color: #fff; }
.badge-rec-sell { background: #16a34a; color: #fff; }
.badge-rec-strong_sell { background: #15803d; color: #fff; }

/* Badge base */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.badge-stock { background: #e0f2fe; color: #0369a1; }
.badge-fund { background: #f3e8ff; color: #7c3aed; }
.badge-index { background: #fef3c7; color: #d97706; }
.badge-weekly { background: #e0e7ff; color: #4338ca; }
.badge-init { background: #dcfce7; color: #166534; }
.badge-morning { background: #fff7ed; color: #c2410c; }
.badge-evening { background: #fce7f3; color: #be185d; }
.badge-review { background: #f5f3ff; color: #7c3aed; }

/* Risk badges */
.badge-risk-low { background: #dcfce7; color: #166534; }
.badge-risk-medium { background: #fef3c7; color: #92400e; }
.badge-risk-high { background: #fee2e2; color: #991b1b; }

/* Report page improvements */
.report-card { background: var(--card); border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow); }
.report-header h2 { font-size: 20px; font-weight: 600; margin: 0 0 12px; line-height: 1.4; }
.report-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.report-meta .date { color: var(--text-secondary); font-size: 13px; }
.report-levels { display: flex; gap: 16px; flex-wrap: wrap; padding: 16px; background: #f8fafc; border-radius: 8px; margin-bottom: 20px; }
.report-levels .level-item { text-align: center; min-width: 100px; }
.report-levels .level-item .label { font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.report-levels .level-item .value { font-size: 18px; font-weight: 600; color: var(--text); }
.report-levels .level-item .value.profit { color: var(--red); }
.report-levels .level-item .value.loss { color: var(--green); }
.report-content { line-height: 1.8; font-size: 15px; }
.report-content h2, .report-content h3 { margin: 24px 0 12px; font-weight: 600; }
.report-content h2 { font-size: 18px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.report-content h3 { font-size: 16px; }
.report-content ul, .report-content ol { padding-left: 20px; margin: 8px 0; }
.report-content li { margin: 4px 0; }
.report-content strong { color: var(--text); }

/* Report count + target/stop tags */
.report-count { font-size: 11px; color: var(--text-secondary); margin-left: 4px; }
.target-price, .stop-loss { font-size: 10px; display: block; margin-top: 2px; }
.target-price { color: var(--red); }
.stop-loss { color: var(--green); }

/* History table enhancements */
.history-card { background: var(--card); border-radius: 12px; padding: 24px; margin-top: 24px; box-shadow: var(--shadow); }
.history-card h2 { font-size: 18px; margin: 0 0 16px; }

/* Review page */
.backtest-summary-card { background: var(--card); border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow); }
.backtest-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin-top: 16px; }
.backtest-stats .stat-item { text-align: center; padding: 12px; background: #f8fafc; border-radius: 8px; }
.backtest-stats .stat-label { font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.backtest-stats .stat-value { font-size: 18px; font-weight: 600; }
.backtest-stats .stat-value.positive { color: var(--red); }
.backtest-stats .stat-value.negative { color: var(--green); }

/* Back link */
.back-link { color: var(--primary); text-decoration: none; font-size: 14px; display: inline-block; margin-bottom: 8px; }
.back-link:hover { text-decoration: underline; }

/* Page header */
.page-header { margin: 20px 0 16px; }
.page-header h1 { font-size: 24px; font-weight: 700; margin: 4px 0; }

/* Footer */
.footer { text-align: center; padding: 24px 0; color: var(--text-secondary); font-size: 13px; margin-top: 40px; border-top: 1px solid var(--border); }

/* Alert messages */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert-error, .alert-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.alert-warning { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.alert-info { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

/* Modal content */
.modal-content { background: #fff; border-radius: 12px; padding: 24px; max-width: 450px; width: 90%; margin: 0 auto; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.modal-content h3 { font-size: 18px; margin: 0 0 12px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* Button styles */
.btn { display: inline-block; padding: 8px 16px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; text-align: center; transition: all 0.2s; line-height: 1.4; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-xs { padding: 2px 6px; font-size: 11px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: #e2e8f0; color: var(--text); }
.btn-secondary:hover { background: #cbd5e1; }
.btn-info { background: #e0f2fe; color: #0369a1; }
.btn-info:hover { background: #bae6fd; }
.btn-success { background: #dcfce7; color: #166534; }
.btn-success:hover { background: #bbf7d0; }
.btn-warning { background: #fef3c7; color: #92400e; }
.btn-warning:hover { background: #fde68a; }
.btn-danger { background: #fee2e2; color: #dc2626; }
.btn-danger:hover { background: #fecaca; }
.btn-cancel { background: #e2e8f0; color: var(--text); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }

/* Mobile improvements */
@media (max-width: 768px) {
    .report-levels { flex-direction: column; gap: 8px; }
    .report-levels .level-item { text-align: left; display: flex; justify-content: space-between; align-items: center; min-width: auto; }
    .backtest-stats { grid-template-columns: repeat(2, 1fr); }
    .modal-content { width: 95%; }
    .page-header h1 { font-size: 20px; }
    .report-content { font-size: 14px; }
    .action-btns { display: flex; flex-direction: column; gap: 4px; }
    .action-btns .btn { font-size: 11px; padding: 3px 8px; }
}

/* =============================================
   CSS Audit Fix - 2026-06-11
   Classes missing from main.css but used in templates
   ============================================= */

/* --- index.html: column width classes --- */
.th-since { width: 100px; text-align: right; }
.th-review-return { width: 110px; text-align: right; }
.th-financial { width: 80px; text-align: center; }
.th-added { width: 90px; text-align: center; }

.added-days {
    font-size: 12px;
    color: var(--text-secondary, #888);
    white-space: nowrap;
}

/* --- report_list.html: page-specific classes --- */
.report-center-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.stats-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.stat-card h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

.stat-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stat-item .count {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.report-content-preview {
    color: var(--text-primary, #1e293b);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

.report-content-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--card-bg, #fff));
}

.report-key-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item .label {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
}

.info-item .value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.info-item .value.price-up { color: var(--red, #ef4444); }
.info-item .value.price-down { color: var(--green, #22c55e); }

.report-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Filter bar */
.filter-bar {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.filter-bar .search-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.filter-bar .search-input:focus {
    border-color: var(--primary, #667eea);
}

.filter-bar select, .filter-bar input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg, #fff);
    color: var(--text-primary, #1e293b);
    outline: none;
    cursor: pointer;
}

.filter-bar select:focus, .filter-bar input[type="date"]:focus {
    border-color: var(--primary, #667eea);
}

.filter-bar .btn-clear {
    padding: 8px 16px;
    background: var(--bg-secondary, #f5f5f5);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-bar .btn-clear:hover {
    background: var(--border, #e5e7eb);
}

.code-name {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    margin-top: 4px;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
}

/* Report list container */
.reports-list {
    margin-top: 0;
}

/* Badge color variants (used in experience_summary.html) */
.badge-primary { background: #e0e7ff; color: #3730a3; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info { background: #cffafe; color: #155e75; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-secondary { background: #f3f4f6; color: #6b7280; }

/* Type toggle group (experience_summary.html) */
.type-toggle-group {
    display: flex;
    gap: 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
}

.type-toggle-btn {
    padding: 8px 16px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    transition: all 0.2s;
}

.type-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--border, #e5e7eb);
}

.type-toggle-btn.active {
    background: var(--primary, #667eea);
    color: white;
}

.type-toggle-btn:hover:not(.active) {
    background: #f3f4f6;
}

/* --- experience_summary.html: form + modal classes --- */
.form-select {
    padding: 6px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 4px;
    min-width: 200px;
    font-size: 14px;
    background: var(--bg, #fff);
    color: var(--text-primary, #1e293b);
    outline: none;
    cursor: pointer;
}

.form-select:focus {
    border-color: var(--primary, #667eea);
}

.edit-modal-content {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 24px;
    width: 600px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.edit-content-textarea {
    width: 100%;
    min-height: 180px;
    padding: 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.edit-content-textarea:focus {
    border-color: var(--primary, #667eea);
}

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

.td-symbol {
    font-family: monospace;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

/* --- recommendation_list.html: loading spinner --- */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border, #e5e7eb);
    border-top-color: var(--primary, #667eea);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- report_list.html: compare modal styles --- */
.compare-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-dialog {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 24px;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- report_list.html: page header helpers --- */
.report-page-header {
    margin-bottom: 20px;
}

.report-page-header h1 {
    font-size: 24px;
    margin: 0 0 8px;
}

.report-page-header .subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary, #888);
}

.report-filter-form {
    display: contents;
    width: 100%;
}

.report-summary-text {
    font-size: 14px;
    color: var(--text-secondary, #888);
}

.report-stat-separator {
    margin: 0 10px;
    font-weight: 600;
}

.report-empty-hint {
    font-size: 14px;
    color: var(--text-secondary, #888);
}

/* --- CSS Audit Fix: responsive additions --- */
@media (max-width: 768px) {
    .report-center-container { padding: 12px; }
    .stats-panel { grid-template-columns: 1fr 1fr; gap: 12px; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .search-input { min-width: auto; }
    .filter-bar select, .filter-bar input[type="date"] { width: 100%; }
    .report-key-info { grid-template-columns: 1fr 1fr; }
    .report-actions { flex-direction: column; }
    .report-actions .btn { width: 100%; justify-content: center; }
    .edit-modal-content { max-width: 95vw; padding: 16px; width: 95vw; }
    .edit-content-textarea { min-height: 120px; }
    .type-toggle-btn { padding: 6px 10px; font-size: 12px; }
    .form-select { min-width: 150px; max-width: 100%; }
}

@media (max-width: 480px) {
    .stats-panel { grid-template-columns: 1fr; }
    .report-key-info { grid-template-columns: 1fr; }
    .edit-modal-content { max-width: 98vw; padding: 12px; width: 98vw; }
    .compare-grid { grid-template-columns: 1fr; }
}


/* --- experience_summary.html helper classes --- */
.experience-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    overflow-x: hidden;
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.experience-title {
    margin: 0;
    font-size: 24px;
}

.experience-filter-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.stock-filter-container {
    align-items: center;
    gap: 8px;
}

.experience-card {
    padding: 16px;
}

.experience-table {
    width: 100%;
    min-width: 830px;
}


/* 推荐系统汇总卡片 */
.rec-summary-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}

.rec-summary-header {
    padding: 16px 20px 0 20px;
}

.rec-summary-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.rec-summary-body {
    padding: 12px 20px 16px 20px;
}

.rec-summary-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.rec-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rec-stat-label {
    font-size: 12px;
    color: #6b7280;
}

.rec-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.rec-stat-add {
    color: var(--success, #22c55e);
}

.rec-stat-remove {
    color: var(--danger, #ef4444);
}

.rec-change-list {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
}

.rec-change-label {
    font-weight: 600;
    color: #6b7280;
}

.rec-change-names {
    color: #374151;
}

@media (max-width: 768px) {
    .rec-summary-card {
        padding: 0;
    }
    .rec-summary-stats {
        gap: 16px;
    }
    .rec-stat-value {
        font-size: 16px;
    }
}



/* --- 推荐汇总对比区域 --- */
.rec-compare-section {
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fafbfc;
}
.rec-compare-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
}
.rec-compare-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}
.rec-compare-rec {
    background: #dbeafe;
    color: #1d4ed8;
}
.rec-compare-idx {
    background: #fef3c7;
    color: #92400e;
}
.rec-compare-vs {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
}
.rec-compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #f3f4f6;
}
.rec-compare-row:last-child {
    border-bottom: none;
}
.rec-compare-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
}
.rec-compare-col:first-child {
    border-right: 1px solid #f3f4f6;
}
.rec-compare-label {
    font-size: 11px;
    color: #6b7280;
}
.rec-compare-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}


/* --- recommendation_list.html page-specific styles --- */
/* 推荐列表专用样式 */
.rec-table .col-rank { width: 50px; text-align: center; }
.rec-table .col-code { width: 90px; }
.rec-table .col-name { width: 110px; }
.rec-table .col-price { width: 70px; text-align: right; }
.rec-table .col-change { width: 85px; text-align: right; }
.rec-table .col-cumchange { width: 85px; text-align: right; }
.rec-table .col-score { width: 90px; text-align: center; }
.rec-table .col-rating { width: 75px; text-align: center; }
.rec-table .col-trend { width: 55px; text-align: center; }
.rec-table .col-days { width: 70px; text-align: center; }
.rec-table .col-action { width: 80px; text-align: center; }

/* 冻结列：排名+代码+名称固定 */
.rec-table th.col-rank,
.rec-table td.col-rank {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card-bg, #ffffff);
}
.rec-table th.col-code,
.rec-table td.col-code {
    position: sticky;
    left: 50px;
    z-index: 2;
    background: var(--card-bg, #ffffff);
}
.rec-table th.col-name,
.rec-table td.col-name {
    position: sticky;
    left: 140px;
    z-index: 2;
    background: var(--card-bg, #ffffff);
}
.rec-table thead th.col-rank,
.rec-table thead th.col-code,
.rec-table thead th.col-name {
    z-index: 3;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 13px;
}

.rank-1 { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #333; }
.rank-2 { background: linear-gradient(135deg, #c0c0c0, #e8e8e8); color: #333; }
.rank-3 { background: linear-gradient(135deg, #cd7f32, #e8a862); color: #fff; }
.rank-other { background: var(--bg-secondary); color: var(--text-secondary); }

.score-display {
    font-size: 15px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-block;
    white-space: nowrap;
}

.score-high { background: #dcfce7; color: #166534; }
.score-medium { background: #fef3c7; color: #92400e; }
.score-low { background: #fee2e2; color: #991b1b; }

.trend-indicator {
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.trend-up { background: #dcfce7; color: #166534; }
.trend-down { background: #fee2e2; color: #991b1b; }
.trend-stable { background: #f3f4f6; color: #6b7280; }
.trend-new { background: #e0e7ff; color: #3730a3; }

.recommendation-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
}

.rec-strong_buy { background: #dcfce7; color: #166534; }
.rec-buy { background: #d1fae5; color: #065f46; }
.rec-overweight { background: #cffafe; color: #155e75; }
.rec-hold { background: #f3f4f6; color: #6b7280; }
.rec-underweight { background: #fef3c7; color: #92400e; }
.rec-sell { background: #fee2e2; color: #991b1b; }
.rec-strong_sell { background: #fecaca; color: #7f1d1d; }



/* 页面头部布局 */
.rec-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}
.rec-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}
.rec-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .rec-page-container { padding: 10px !important; }
    .rec-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .rec-controls {
        width: 100%;
        justify-content: flex-start;
    }
    .rec-desc { display: none; }
    .watchlist-card { padding: 8px !important; }
    .container { padding: 10px !important; }
    .rec-table { min-width: 700px; }
    .rec-table .col-rank { width: 40px; }
    .rec-table .col-code { width: 80px; left: 40px; }
    .rec-table .col-name { width: 90px; left: 120px; }
    .rank-badge { width: 24px; height: 24px; font-size: 11px; }
    .score-display { font-size: 13px; padding: 2px 6px; }
    .recommendation-badge { font-size: 10px; padding: 2px 5px; }
}


/* --- report_list.html: remaining inline styles extracted --- */
.report-filter-form {
    display: contents;
    width: 100%;
}

.report-summary-count {
    color: var(--text-secondary, #64748b);
    font-size: 14px;
}

.report-empty-hint {
    font-size: 14px;
    color: var(--text-secondary, #888);
}

/* Compare modal */
.compare-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10001;
}

.compare-modal-dialog {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: white;
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.compare-modal-title {
    margin: 0 0 16px;
}

.compare-modal-title span {
    color: var(--text-secondary);
    font-weight: normal;
}

.compare-error {
    color: red;
}

/* --- experience_summary.html: remaining inline styles extracted --- */
.experience-subtitle {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.experience-filter-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.experience-th-title { width: 200px; }
.experience-th-type { width: 100px; }
.experience-th-symbol { width: 100px; }
.experience-th-status { width: 80px; }
.experience-th-score { width: 80px; }
.experience-th-action { width: 120px; }

/* Experience edit modal */
.edit-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}