body {
    font-family: Arial, sans-serif;
    background: #111;
    color: white;
    padding: 30px;
}

h1 {
    margin-bottom: 30px;
}

.card {
    background: #222;
    padding: 20px;
    border-radius: 10px;
    width: 420px;
    margin-bottom: 20px;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
}

/* =========================
   總覽頁：圖片範本 Dashboard 版
========================= */

body {
    padding: 0;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(41, 121, 255, 0.08), transparent 34%),
        #05070d;
    color: #f5f7fb;
}

h1 {
    display: none;
}

#status {
    display: none;
}

.app-shell {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0;
    min-height: 100vh;
    background: #05070d;
}

.side-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #080d16 0%, #05070d 100%);
    padding: 16px 0;
    gap: 6px;
}

.side-brand {
    padding: 10px 18px 22px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(41, 121, 255, 0.2);
    color: #6ea2ff;
}

.brand-text {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
    color: #ffffff;
}

.nav-item {
    position: relative;
    width: calc(100% - 10px);
    margin: 0 5px;
    padding: 11px 14px 11px 18px;
    border-radius: 0;
    border: none;
    background: transparent;
    color: #c5cbd8;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(41, 121, 255, 0.38), rgba(41, 121, 255, 0.08));
    border-left: 4px solid #2979ff;
    color: #ffffff;
}

.logout-item {
    margin-top: 0;
}

.app-main {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.top-dashboard-header {
    height: 56px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(7, 11, 20, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-header-left,
.top-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-menu-button,
.refresh-icon-button {
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #dce3f2;
    font-size: 18px;
    display: grid;
    place-items: center;
}

.refresh-icon-button {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

#currentPageTitle {
    font-size: 15px;
    font-weight: 900;
    color: #ffffff;
}

.last-update-text {
    color: #aab2c2;
    font-size: 12px;
}

.demo-user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-size: 12px;
}

.demo-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(41, 121, 255, 0.25);
    display: grid;
    place-items: center;
    font-size: 12px;
}

.dashboard-overview {
    padding: 16px 18px 18px;
    display: grid;
    gap: 14px;
}

.overview-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.overview-kpi-card,
.overview-panel,
.today-mini-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
        #0e141d;
    border: 1px solid rgba(255, 255, 255, 0.075);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.overview-kpi-card {
    min-height: 104px;
    border-radius: 12px;
    padding: 18px 20px;
    box-sizing: border-box;
}

.overview-kpi-title {
    display: block;
    color: #a9b1c2;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

.overview-kpi-value {
    display: block;
    font-size: 27px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.white-value {
    color: #ffffff;
}

.positive-value {
    color: #39e889 !important;
}

.positive-small {
    color: #54efa0;
    font-size: 11px;
    font-weight: 800;
}
.negative-small {
    color: #ff6b6b;
    font-size: 11px;
    font-weight: 800;
}
.muted-small {
    color: #9da6b8;
    font-size: 11px;
    font-weight: 700;
}

.overview-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(290px, 1.05fr);
    gap: 14px;
}

.overview-panel {
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
}

.asset-trend-panel,
.asset-distribution-panel {
    height: 212px;
}

.overview-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.overview-panel h3,
.overview-panel-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
}

.overview-panel-header h3 span {
    color: #9da6b8;
    font-size: 12px;
    font-weight: 700;
}

.overview-range-buttons {
    display: flex;
    gap: 6px;
}

.overview-range-buttons button {
    height: 28px;
    padding: 0 10px;
    margin: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #b9c1d0;
    font-size: 12px;
}

.overview-range-buttons button.active {
    background: rgba(41, 121, 255, 0.28);
    color: #6ea2ff;
    border-color: rgba(41, 121, 255, 0.55);
}

.chart-wrapper-with-tooltip {
    position: relative;
}

.overview-chart-box {
    height: 166px;
}

.fake-chart-tooltip {
    position: absolute;
    left: 118px;
    top: 18px;
    width: 92px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(14, 18, 28, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.fake-chart-tooltip strong {
    display: block;
    font-size: 11px;
    color: #ffffff;
    margin-bottom: 3px;
}

.fake-chart-tooltip span {
    display: block;
    font-size: 10px;
    color: #ffffff;
}

.distribution-content {
    height: 164px;
    display: grid;
    grid-template-columns: 1fr 118px;
    gap: 10px;
    align-items: center;
}

.overview-donut-box {
    height: 150px;
}

.distribution-legend {
    display: grid;
    gap: 10px;
}

.distribution-legend div {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 7px;
    color: #d8deea;
    font-size: 11px;
    font-weight: 700;
}

.distribution-legend strong {
    color: #ffffff;
    font-size: 11px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    display: inline-block;
}

.blue-dot {
    background: #246bff;
}

.green-dot {
    background: #28d68a;
}

.yellow-dot {
    background: #ffb52e;
}

.purple-dot {
    background: #6d5dfc;
}

.gray-dot {
    background: #7b8294;
}

.today-overview-panel {
    min-height: 116px;
    padding: 14px;
}

.today-overview-panel h3 {
    margin-bottom: 12px;
}

.today-overview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.today-mini-card {
    border-radius: 10px;
    padding: 12px 14px;
    min-height: 72px;
    box-sizing: border-box;
}

.today-mini-card span {
    display: block;
    color: #a9b1c2;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
}

.today-mini-card strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 5px;
}

.today-mini-card small {
    color: #9da6b8;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .overview-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-chart-grid {
        grid-template-columns: 1fr;
    }

    .asset-trend-panel,
    .asset-distribution-panel {
        height: auto;
    }

    .today-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

button {
    padding: 10px 15px;
    margin-right: 5px;
    cursor: pointer;
}

#status {
    margin: 20px 0;
    font-size: 20px;
    font-weight: bold;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #222;
    margin-top: 20px;
}

th, td {
    padding: 12px;
    border-bottom: 1px solid #444;
    text-align: center;
}

.profit {
    color: #00ff88;
    font-weight: bold;
}

.loss {
    color: #ff5555;
    font-weight: bold;
}
.dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 25px;
}

.stat-card {
    background: #222;
    padding: 20px;
    border-radius: 10px;
}

.stat-card h3 {
    color: #aaa;
    margin-bottom: 10px;
}

.stat-card p {
    font-size: 28px;
    font-weight: bold;
}
/* =========================
   TAIEX NOTE 左側選單版面
========================= */

.app-shell {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 18px;
    min-height: 100vh;
}

.side-nav {
    position: sticky;
    top: 24px;
    height: calc(100vh - 48px);
    background: #151515;
    border: 1px solid #2b2b2b;
    border-radius: 18px;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.side-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 24px;
    margin-bottom: 8px;
    border-bottom: 1px solid #2b2b2b;
}

.brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0, 102, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-text {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
}

.nav-item {
    width: 100%;
    text-align: left;
    background: transparent;
    color: #bdbdbd;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    box-shadow: none;
}

.nav-item:hover {
    background: #222;
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

.nav-item.active {
    background: linear-gradient(90deg, #0d47ff, rgba(13, 71, 255, 0.15));
    color: #ffffff;
    border-left: 4px solid #2979ff;
}

.logout-item {
    margin-top: auto;
    color: #ff7676;
}

.app-main {
    min-width: 0;
    padding-right: 12px;
}

.app-page {
    animation: fadeInPage 0.18s ease;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.mini-stat {
    background: #181818;
    border: 1px solid #2d2d2d;
    border-radius: 14px;
    padding: 20px;
}

.mini-stat span {
    display: block;
    color: #9e9e9e;
    margin-bottom: 10px;
}

.mini-stat strong {
    font-size: 24px;
    color: #00e676;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .side-nav {
        position: static;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        border-radius: 14px;
    }

    .side-brand {
        display: none;
    }

    .nav-item {
        min-width: 130px;
        text-align: center;
    }

    .logout-item {
        margin-top: 0;
    }
}
/* =========================
   ApexCharts 圖表卡片
========================= */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
}

.muted-text {
    color: #9e9e9e;
    margin-top: -8px;
}

.chart-card {
    background: #181818;
    border: 1px solid #2d2d2d;
    border-radius: 18px;
    padding: 24px;
    margin-top: 22px;
}

.chart-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.chart-title-row h3 {
    margin: 0;
}

.chart-title-row span {
    color: #8f8f8f;
    font-size: 15px;
}

#cumulativePnlChart {
    min-height: 320px;
}
/* =========================
   Dashboard / 績效圖表版面
========================= */

.dashboard-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 0.8fr);
    gap: 22px;
    margin-top: 24px;
}

.large-chart-card {
    min-height: 420px;
}

.small-chart-card {
    min-height: 260px;
}

.performance-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 22px;
}

.apex-chart-box {
    min-height: 320px;
}

.empty-chart {
    min-height: 260px;
    border: 1px dashed #3a3a3a;
    border-radius: 16px;
    color: #9e9e9e;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    line-height: 1.7;
    background: rgba(255, 255, 255, 0.02);
}

.summary-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.summary-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2d2d2d;
    padding-bottom: 12px;
}

.summary-list span {
    color: #aaa;
}

.summary-list strong {
    color: #fff;
}

.performance-range-tabs input {
    width: 120px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
}

@media (max-width: 1000px) {
    .dashboard-chart-grid,
    .performance-chart-grid {
        grid-template-columns: 1fr;
    }
}
.chart-select {
    width: auto;
    min-width: 140px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #1b1b1b;
    color: #ffffff;
    border: 1px solid #333;
    font-size: 15px;
}
.chart-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.chart-title-row > div {
    min-width: 0;
}

.chart-select {
    width: 160px;
    min-width: 160px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #1b1b1b;
    color: #ffffff;
    border: 1px solid #333;
    font-size: 15px;
}
/* 新增交易表單收合按鈕 */
.compact-action-card {
    padding: 18px 22px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.open-form-button {
    width: auto;
    min-width: 170px;
    background: linear-gradient(90deg, #0d47ff, #153b9f);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 13px 18px;
    font-weight: 900;
    cursor: pointer;
}
/* =========================
   縮小左側選單比例
========================= */

.app-shell {
    grid-template-columns: 190px 1fr;
    gap: 18px;
}

.side-nav {
    padding: 16px 10px;
    border-radius: 16px;
}

.side-brand {
    gap: 8px;
    padding: 10px 10px 18px;
}

.brand-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.brand-text {
    font-size: 16px;
    letter-spacing: 0.5px;
}

.nav-item {
    padding: 12px 12px;
    font-size: 15px;
    border-radius: 11px;
}
/* =========================
   績效分析頁：範本比例版
========================= */

.analytics-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px;
}

.analytics-top-bar h2 {
    margin: 0 0 6px;
    font-size: 28px;
}

.performance-range-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.performance-range-tabs button {
    padding: 9px 12px;
    font-size: 14px;
    border-radius: 10px;
}

.performance-range-tabs input {
    width: 82px;
    height: 38px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
}

.performance-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.performance-stat-card {
    background: #181818;
    border: 1px solid #2d2d2d;
    border-radius: 16px;
    padding: 16px 18px;
    min-height: 92px;
}

.performance-stat-card span {
    display: block;
    color: #9e9e9e;
    font-size: 14px;
    margin-bottom: 10px;
}

.performance-stat-card strong {
    display: block;
    font-size: 26px;
    color: #ffffff;
    line-height: 1.1;
}

.compact-performance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 0;
}

.compact-chart-card {
    padding: 16px 18px;
    margin-top: 0;
    border-radius: 16px;
}

.compact-chart-card .chart-title-row {
    margin-bottom: 8px;
}

.compact-chart-card h3 {
    font-size: 18px;
    margin: 0;
}

.compact-chart-card .muted-text {
    font-size: 13px;
    margin: 4px 0 0;
}

.compact-apex-chart {
    min-height: 220px;
}

.chart-select {
    width: 130px;
    min-width: 130px;
    height: 38px;
    font-size: 14px;
    padding: 8px 10px;
}

.profit {
    color: #00e676 !important;
}

.loss {
    color: #ff5252 !important;
}

@media (max-width: 1100px) {
    .analytics-top-bar {
        display: block;
    }

    .performance-range-tabs {
        margin-top: 12px;
        flex-wrap: wrap;
    }

    .performance-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact-performance-grid {
        grid-template-columns: 1fr;
    }
}
.app-main {
    min-width: 0;
    padding-right: 8px;
}

.card,
.chart-card,
.performance-stat-card {
    box-sizing: border-box;
}
/* =========================
   總覽頁細修：縮小比例與修正分布圖
========================= */

.app-shell {
    grid-template-columns: 145px 1fr;
}

.side-brand {
    padding: 8px 16px 20px;
}

.brand-icon {
    width: 26px;
    height: 26px;
}

.brand-text {
    font-size: 13px;
}

.nav-item {
    padding: 10px 12px 10px 16px;
    font-size: 12px;
}

.top-dashboard-header {
    height: 52px;
    padding: 0 18px;
}

.dashboard-overview {
    padding: 14px 18px 16px;
    gap: 12px;
}

.overview-kpi-grid {
    gap: 12px;
}

.overview-kpi-card {
    min-height: 96px;
    padding: 16px 18px;
}

.overview-kpi-title {
    font-size: 12px;
    margin-bottom: 8px;
}

.overview-kpi-value {
    font-size: 24px;
    margin-bottom: 7px;
}

.overview-chart-grid {
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
    gap: 12px;
}

.asset-trend-panel,
.asset-distribution-panel {
    height: 200px;
}

.overview-chart-box {
    height: 154px;
}

.overview-donut-box {
    height: 138px;
}

.distribution-content {
    height: 150px;
    grid-template-columns: minmax(130px, 1fr) 135px;
    gap: 14px;
}

.distribution-legend {
    min-width: 135px;
    gap: 9px;
}

.distribution-legend div {
    grid-template-columns: 10px 44px 1fr;
    font-size: 11px;
}

.today-overview-panel {
    min-height: 106px;
    padding: 13px 14px;
}

.today-overview-panel h3 {
    margin-bottom: 10px;
}

.today-mini-card {
    min-height: 66px;
    padding: 11px 13px;
}

.today-mini-card span {
    font-size: 11px;
    margin-bottom: 5px;
}

.today-mini-card strong {
    font-size: 16px;
    margin-bottom: 4px;
}

.fake-chart-tooltip {
    left: 118px;
    top: 16px;
}
/* =========================
   總覽資產趨勢：滑鼠互動 tooltip
========================= */

.overview-hover-tooltip {
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(36, 36, 36, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

.overview-hover-tooltip strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 4px;
}

.overview-hover-tooltip span {
    display: block;
    color: #aeb4bf;
    font-size: 13px;
    font-weight: 800;
}

.apexcharts-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.apexcharts-xcrosshairs {
    stroke-dasharray: 4;
}
/* =========================
   總覽資產趨勢：沒有資料提示
========================= */

.overview-empty-chart {
    height: 154px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: #9aa4b7;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.02);
}
/* =========================
   Header 右上角更新區
========================= */

.top-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.last-update-text {
    color: #aab2c2;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.refresh-icon-button {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    color: #dce8ff;
    font-size: 16px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.refresh-icon-button:hover {
    background: rgba(41, 121, 255, 0.18);
    border-color: rgba(41, 121, 255, 0.5);
    color: #ffffff;
}

.refresh-icon-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* =========================
   持倉總覽頁：新版卡片與表格
========================= */

.holding-overview-page {
    padding: 14px 18px 18px;
    box-sizing: border-box;
}

.holding-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.holding-summary-card {
    min-height: 96px;
    padding: 16px 18px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.12), transparent 38%),
        #171a20;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.holding-summary-card span {
    display: block;
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

.holding-card-value {
    display: block;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 7px;
}

.holding-summary-card small {
    display: block;
    color: #7f8a9d;
    font-size: 11px;
    font-weight: 800;
}

.holding-positive {
    color: #00e676 !important;
}

.holding-negative {
    color: #ff5252 !important;
}

.holding-warning {
    color: #ffd54f !important;
}

.holding-table-panel {
    border-radius: 14px;
    background: #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

#holdingSection table {
    width: 100%;
    margin-top: 0;
    border-collapse: collapse;
    background: transparent;
}

#holdingSection th {
    padding: 12px 10px;
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

#holdingSection td {
    padding: 13px 10px;
    color: #e8edf7;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    white-space: nowrap;
}

#holdingSection tbody tr:hover {
    background: rgba(41, 121, 255, 0.07);
}

#holdingSection tbody tr:last-child td {
    border-bottom: none;
}

@media (max-width: 1100px) {
    .holding-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .holding-table-panel {
        overflow-x: auto;
    }
}
@media (max-width: 1100px) {
    .holding-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .holding-table-panel {
        overflow-x: auto;
    }
}
/* =========================
   總覽頁：統一成持倉總覽風格
========================= */

.dashboard-overview {
    padding: 14px 18px 18px;
    box-sizing: border-box;
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: none;
}

/* 上方四張 KPI 卡：改成跟持倉總覽一樣 */
.overview-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.overview-kpi-card {
    min-height: 96px;
    padding: 16px 18px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.12), transparent 38%),
        #171a20;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
    overflow: hidden;
}

.overview-kpi-title {
    display: block;
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

.overview-kpi-value {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 7px;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.overview-kpi-card small {
    display: block;
    color: #7f8a9d;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

/* 圖表區：不要太擠，左右比例重新調整 */
.overview-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(360px, 0.9fr);
    gap: 14px;
    align-items: stretch;
}

.overview-panel {
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.09), transparent 38%),
        #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.asset-trend-panel,
.asset-distribution-panel {
    height: 236px;
    padding: 18px 20px;
}

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

.overview-panel h3,
.overview-panel-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
}

.overview-panel-header h3 span {
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 800;
}

/* 7天 / 30天 / 90天 / 180天按鈕不要擠在一起 */
.overview-range-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

.overview-range-buttons button {
    height: 32px;
    min-width: 48px;
    padding: 0 12px;
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
    color: #cbd6ea;
    font-size: 12px;
    font-weight: 800;
}

.overview-range-buttons button.active {
    background: rgba(41, 121, 255, 0.28);
    color: #ffffff;
    border-color: rgba(41, 121, 255, 0.58);
}

.overview-chart-box {
    height: 178px;
}

.overview-donut-box {
    height: 166px;
}

/* 資產分布：讓圖跟文字不要擠 */
.distribution-content {
    height: 172px;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 150px;
    gap: 18px;
    align-items: center;
}

.distribution-legend {
    min-width: 150px;
    display: grid;
    gap: 10px;
}

.distribution-legend div {
    display: grid;
    grid-template-columns: 10px minmax(48px, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: #d8deea;
    font-size: 12px;
    font-weight: 800;
}

.distribution-legend strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

/* 今日概況：改成自動換行，避免 5 張卡硬擠 */
.today-overview-panel {
    min-height: auto;
    padding: 18px 20px;
    border-radius: 14px;
}

.today-overview-panel h3 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

.today-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.today-mini-card {
    min-height: 78px;
    padding: 14px 16px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.08), transparent 38%),
        #171a20;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: none;
    box-sizing: border-box;
    overflow: hidden;
}

.today-mini-card span {
    display: block;
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 7px;
}

.today-mini-card strong {
    display: block;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 5px;
    white-space: nowrap;
}

.today-mini-card small {
    color: #7f8a9d;
    font-size: 11px;
    font-weight: 800;
}

/* 避免數字太長時爆版 */
.overview-kpi-card,
.today-mini-card,
.overview-panel {
    min-width: 0;
}

.white-value,
.positive-value,
.loss {
    word-break: keep-all;
}

/* 中等寬度：圖表改上下排，畫面比較不擠 */
@media (max-width: 1280px) {
    .overview-chart-grid {
        grid-template-columns: 1fr;
    }

    .asset-trend-panel,
    .asset-distribution-panel {
        height: auto;
        min-height: 236px;
    }

    .overview-chart-box {
        height: 190px;
    }

    .distribution-content {
        grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px);
    }
}

/* 小螢幕：四張 KPI 改兩欄 */
@media (max-width: 1100px) {
    .overview-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .overview-range-buttons {
        flex-wrap: wrap;
    }
}

/* 更小螢幕：全部一欄 */
@media (max-width: 720px) {
    .overview-kpi-grid,
    .today-overview-grid {
        grid-template-columns: 1fr;
    }

    .distribution-content {
        grid-template-columns: 1fr;
    }

    .overview-donut-box {
        height: 180px;
    }
}
/* =========================
   總覽頁：每個方塊強制拉開間隔
========================= */

/* 總覽頁整體左右留白和上下區塊間距 */
#dashboardPage.dashboard-overview {
    padding: 20px 26px 28px !important;
    box-sizing: border-box !important;
}

/* 第一排 KPI 卡片 */
#dashboardPage .overview-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
}

/* KPI 每張卡片 */
#dashboardPage .overview-kpi-card {
    border-radius: 14px !important;
    min-height: 112px !important;
}

/* 第二排：資產趨勢 + 資產分布 */
#dashboardPage .overview-chart-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important;
    gap: 22px !important;
    margin-bottom: 22px !important;
}

/* 第二排兩個大方塊 */
#dashboardPage .asset-trend-panel,
#dashboardPage .asset-distribution-panel {
    height: 300px !important;
    min-height: 300px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
}

/* 第三排：今日概況整個大方塊 */
#dashboardPage .today-overview-panel {
    margin-top: 0 !important;
    border-radius: 14px !important;
    padding: 20px 22px 24px !important;
    min-height: 190px !important;
    box-sizing: border-box !important;
}

/* 今日概況裡面的五張小卡 */
#dashboardPage .today-overview-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

/* 今日概況每一張小卡 */
#dashboardPage .today-mini-card {
    min-height: 96px !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
}

/* 避免內容太貼邊 */
#dashboardPage .overview-panel {
    padding: 20px 22px !important;
}

/* 窄螢幕才改成上下排 */
@media (max-width: 1280px) {
    #dashboardPage .overview-chart-grid {
        grid-template-columns: 1fr !important;
    }

    #dashboardPage .today-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
/* =========================
   交易明細頁：持倉總覽風格版
========================= */

#tradeFormToggle.trade-detail-toolbar {
    width: auto !important;
    margin: 14px 18px 14px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.10), transparent 38%),
        #15181e !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.trade-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.trade-filter-box {
    height: 42px;
    min-width: 180px;
    padding: 7px 12px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.trade-filter-box span {
    display: block;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

.trade-filter-box small {
    display: block;
    margin-top: 3px;
    color: #7f8a9d;
    font-size: 10px;
    font-weight: 800;
}

.trade-filter-select {
    width: 130px !important;
    height: 42px;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    color: #dce8ff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 800;
    outline: none;
}

.trade-add-button {
    height: 42px;
    min-width: 132px;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 11px;
    border: 1px solid rgba(41, 121, 255, 0.5);
    background: linear-gradient(90deg, #174dff, #1740b8);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.trade-add-button:hover {
    filter: brightness(1.08);
}

#tradeDetailSection.trade-detail-page {
    padding: 0 18px 18px;
    box-sizing: border-box;
}

.trade-table-panel {
    width: 100%;
    border-radius: 14px;
    background: #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

/* 交易明細表格：避免欄位被擠成直排 */
#tradeDetailSection table {
    width: 100%;
    min-width: 1580px;
    margin-top: 0 !important;
    border-collapse: collapse;
    background: transparent !important;
}

#tradeDetailSection th {
    padding: 13px 10px;
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

#tradeDetailSection td {
    padding: 14px 10px;
    color: #e8edf7;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    white-space: nowrap;
}

#tradeDetailSection tbody tr:hover {
    background: rgba(41, 121, 255, 0.07);
}

#tradeDetailSection tbody tr:last-child td {
    border-bottom: none;
}

/* 操作按鈕縮小，像圖片那種簡潔按鈕 */
#tradeDetailSection td button {
    width: auto;
    min-width: 44px;
    height: 28px;
    padding: 0 8px !important;
    margin: 0 3px !important;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
    color: #dce8ff;
    font-size: 11px;
    font-weight: 800;
}

#tradeDetailSection td button:hover {
    background: rgba(41, 121, 255, 0.18);
    border-color: rgba(41, 121, 255, 0.45);
}

/* 新增交易表單不要被原本 card 寬度限制得太醜 */
#tradeForm.card {
    width: auto;
    max-width: 720px;
    margin: 0 18px 14px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.10), transparent 38%),
        #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

/* 小螢幕時工具列上下排 */
@media (max-width: 900px) {
    #tradeFormToggle.trade-detail-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .trade-toolbar-left {
        width: 100%;
    }

    .trade-filter-box,
    .trade-filter-select,
    .trade-add-button {
        width: 100% !important;
    }
}
/* =========================
   交易明細：工具列按鈕位置修正
========================= */

#tradeFormToggle.trade-detail-toolbar {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

/* 左側篩選群組維持橫向 */
#tradeFormToggle .trade-toolbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

/* 新增交易按鈕固定推到右邊 */
#tradeFormToggle .trade-add-button {
    margin-left: auto !important;
    align-self: center !important;
    flex-shrink: 0 !important;
}

/* 篩選欄位不要把按鈕擠下去 */
#tradeFormToggle .trade-filter-box {
    flex-shrink: 0 !important;
}

#tradeFormToggle .trade-filter-select {
    flex-shrink: 0 !important;
}
/* =========================
   交易明細：分頁與圖示操作
========================= */

.trade-pagination-footer {
    min-width: 1580px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.018);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    box-sizing: border-box;
}

#tradePageInfo {
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 800;
}

.trade-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trade-page-button {
    width: 30px;
    height: 30px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
    color: #cbd6ea;
    font-size: 12px;
    font-weight: 900;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.trade-page-button.active {
    background: rgba(41, 121, 255, 0.38);
    border-color: rgba(41, 121, 255, 0.65);
    color: #ffffff;
}

.trade-page-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.trade-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
}

.trade-status-pill.open {
    color: #ffd54f;
    background: rgba(255, 213, 79, 0.10);
    border: 1px solid rgba(255, 213, 79, 0.20);
}

.trade-status-pill.closed {
    color: #00e676;
    background: rgba(0, 230, 118, 0.10);
    border: 1px solid rgba(0, 230, 118, 0.20);
}

.trade-action-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

#tradeDetailSection .trade-action-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}

#tradeDetailSection .trade-action-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#tradeDetailSection .trade-action-icon.edit {
    color: #dce8ff;
}

#tradeDetailSection .trade-action-icon.delete {
    color: #ff5252;
}

#tradeDetailSection .trade-action-icon:hover {
    background: rgba(255, 255, 255, 0.08);
}
/* =========================
   交易明細：篩選列
========================= */

.trade-date-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trade-date-range label {
    height: 42px;
    min-width: 138px;
    padding: 5px 10px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.trade-date-range label span {
    display: block;
    color: #7f8a9d;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.trade-date-range input {
    width: 100%;
    height: 22px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    outline: none;
}

.trade-date-range input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.65;
    cursor: pointer;
}

.trade-clear-filter-button {
    height: 42px;
    min-width: 86px;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
    color: #cbd6ea;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.trade-clear-filter-button:hover {
    background: rgba(255, 255, 255, 0.08);
}

#tradeFormToggle .trade-toolbar-left {
    flex-wrap: wrap !important;
}

@media (max-width: 1100px) {
    .trade-date-range {
        flex-wrap: wrap;
        width: 100%;
    }

    .trade-date-range label {
        flex: 1;
        min-width: 150px;
    }
}
/* =========================
   交易明細：下拉選單深色樣式
========================= */

#tradeFormToggle .trade-filter-select {
    background-color: #1b2029 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color-scheme: dark;
}

#tradeFormToggle .trade-filter-select option {
    background-color: #1b2029;
    color: #ffffff;
}

#tradeFormToggle .trade-filter-select option:checked {
    background-color: #2b63ff;
    color: #ffffff;
}

#tradeFormToggle .trade-filter-select:focus {
    outline: none;
    border-color: rgba(41, 121, 255, 0.75) !important;
    box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.18);
}
/* =========================
   績效分析頁：統一成總覽頁風格
========================= */

#analyticsPage {
    padding: 10px 18px 14px !important;
    box-sizing: border-box !important;
}

/* 上方標題列縮小 */
#analyticsPage .analytics-top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 10px !important;
}

#analyticsPage .analytics-top-bar h2 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
}

#analyticsPage .analytics-top-bar .muted-text {
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    color: #7f8a9d !important;
    font-weight: 800 !important;
}

/* 期間按鈕列 */
#analyticsPage .performance-range-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

#analyticsPage .performance-range-tabs button {
    height: 32px !important;
    min-width: 46px !important;
    padding: 0 11px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: #cbd6ea !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

#analyticsPage .performance-range-tabs button.active {
    background: rgba(41, 121, 255, 0.32) !important;
    color: #ffffff !important;
    border-color: rgba(41, 121, 255, 0.65) !important;
}

#analyticsPage .performance-range-tabs input {
    width: 72px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* 四張績效卡：改成跟總覽/持倉一樣 */
#analyticsPage .performance-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

#analyticsPage .performance-stat-card {
    min-height: 82px !important;
    padding: 12px 16px !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.12), transparent 38%),
        #171a20 !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
    box-sizing: border-box !important;
}

#analyticsPage .performance-stat-card span {
    display: block !important;
    color: #9aa4b7 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    margin-bottom: 7px !important;
}

#analyticsPage .performance-stat-card strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
}

/* 下方四張圖表卡 */
#analyticsPage .compact-performance-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 0 !important;
}

#analyticsPage .compact-chart-card {
    min-height: 196px !important;
    padding: 12px 16px !important;
    margin-top: 0 !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.09), transparent 38%),
        #15181e !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#analyticsPage .compact-chart-card .chart-title-row {
    margin-bottom: 4px !important;
    align-items: center !important;
}

#analyticsPage .compact-chart-card h3 {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    color: #ffffff !important;
}

#analyticsPage .compact-chart-card .muted-text {
    margin: 3px 0 0 !important;
    font-size: 10px !important;
    color: #7f8a9d !important;
    font-weight: 800 !important;
}

/* 圖表高度縮小，避免整頁往下滑 */
#analyticsPage .compact-apex-chart {
    min-height: 142px !important;
    height: 142px !important;
}

/* 商品類型下拉 */
#analyticsPage .chart-select {
    width: 118px !important;
    min-width: 118px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color-scheme: dark;
}

#analyticsPage .chart-select option {
    background: #1b2029;
    color: #ffffff;
}

/* 讓 ApexCharts 不要把卡片撐爆 */
#analyticsPage .apexcharts-canvas,
#analyticsPage .apexcharts-svg {
    max-height: 150px !important;
}

/* 小螢幕才換行 */
@media (max-width: 1100px) {
    #analyticsPage .analytics-top-bar {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    #analyticsPage .performance-range-tabs {
        flex-wrap: wrap !important;
    }

    #analyticsPage .performance-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #analyticsPage .compact-performance-grid {
        grid-template-columns: 1fr !important;
    }
}
/* =========================
   績效分析：商品類型分布圖質感提升
========================= */

#analyticsPage #tradeTypeChart {
    position: relative;
    overflow: visible;
}

#analyticsPage #tradeTypeChart::before {
    content: "";
    position: absolute;
    inset: 18px auto auto 18px;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(41, 121, 255, 0.20), transparent 62%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

#analyticsPage #tradeTypeChart .apexcharts-canvas {
    position: relative;
    z-index: 1;
}

#analyticsPage #tradeTypeChart .apexcharts-legend {
    padding-left: 8px !important;
}

#analyticsPage #tradeTypeChart .apexcharts-legend-text {
    color: #dce8ff !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
}

#analyticsPage #tradeTypeChart .apexcharts-legend-marker {
    box-shadow: 0 0 12px rgba(41, 121, 255, 0.25);
}

.distribution-tooltip {
    min-width: 104px;
    padding: 10px 12px;
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.18), transparent 42%),
        rgba(18, 23, 33, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

.distribution-tooltip span {
    display: block;
    color: #9aa4b7;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 5px;
}

.distribution-tooltip strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
}

.distribution-tooltip small {
    display: block;
    margin-top: 5px;
    color: #54efa0;
    font-size: 11px;
    font-weight: 900;
}

/* 讓商品類型分布這張卡更像總覽卡片 */
#analyticsPage .compact-chart-card:has(#tradeTypeChart) {
    background:
        radial-gradient(circle at top right, rgba(47, 123, 255, 0.13), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.024)),
        #15181e !important;
}

/* 瀏覽器不支援 :has 時，至少保留 tooltip 和圖本身質感 */
/* =========================
   登入頁：TAIEX NOTE 封面版
========================= */

#authCard.login-page {
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.68)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.62)),
        url("assets/login-cover.png");
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
}

/* 讓登入頁不要被舊 card 樣式影響 */
#authCard.login-page * {
    box-sizing: border-box;
}

.login-left-brand {
    position: absolute;
    left: 64px;
    bottom: 96px;
    z-index: 2;
}

.login-left-title {
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: 8px;
    font-size: 21px;
    font-weight: 400;
}

.login-left-title span {
    color: #ff3e4f;
}

.login-left-title strong {
    color: #ffffff;
    font-weight: 400;
}

.login-left-brand p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    letter-spacing: 1.5px;
}

/* 右側登入玻璃卡 */
.login-panel {
    position: absolute;
    top: 50%;
    right: 72px;
    width: 456px;
    min-height: 590px;
    transform: translateY(-52%);
    padding: 58px 44px 28px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 24%),
        radial-gradient(circle at top right, rgba(255, 50, 65, 0.10), transparent 34%),
        rgba(10, 10, 10, 0.68);
    border: 1px solid rgba(255, 60, 75, 0.38);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(16px);
    z-index: 3;
}

.login-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 76px;
    height: 76px;
    border-top-left-radius: 18px;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 42%);
    pointer-events: none;
}

.login-logo-mark {
    height: 44px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    margin-bottom: 26px;
}

.login-logo-mark span {
    width: 10px;
    border: 2px solid rgba(255, 62, 79, 0.85);
    border-radius: 2px;
    display: block;
}

.login-logo-mark span:nth-child(1) {
    height: 25px;
}

.login-logo-mark span:nth-child(2) {
    height: 40px;
}

.login-logo-mark span:nth-child(3) {
    height: 30px;
}

.login-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 12px;
    letter-spacing: 10px;
    font-size: 28px;
    line-height: 1;
}

.login-title span {
    color: #ff3e4f;
    font-weight: 400;
}

.login-title strong {
    color: #ffffff;
    font-weight: 400;
}

.login-subtitle {
    margin: 0 0 34px;
    text-align: center;
    color: rgba(255, 255, 255, 0.66);
    font-size: 15px;
    letter-spacing: 1px;
}

/* 輸入框 */
.login-input-group {
    height: 54px;
    margin-bottom: 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: 0.18s ease;
}

.login-input-group:focus-within {
    border-color: rgba(255, 62, 79, 0.65);
    box-shadow: 0 0 0 3px rgba(255, 62, 79, 0.12);
}

.login-input-icon {
    width: 28px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 18px;
    display: inline-flex;
    justify-content: center;
}

.login-eye-icon {
    color: rgba(255, 255, 255, 0.55);
    font-size: 18px;
}

#authCard .login-input-group input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border: none;
    outline: none;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

#authCard .login-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.36);
}

.invite-input-group {
    height: 48px;
    opacity: 0.85;
}

.login-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 30px;
}

.login-options-row label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
}

.login-options-row input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #ff3e4f;
}

.forgot-password-button {
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
}

.login-primary-button,
.login-secondary-button {
    width: 100%;
    height: 58px;
    margin: 0 0 18px !important;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
}

.login-primary-button {
    border: 1px solid rgba(255, 62, 79, 0.75);
    background:
        linear-gradient(180deg, rgba(255, 72, 88, 0.88), rgba(127, 23, 28, 0.92));
    color: #ffffff;
    box-shadow:
        0 14px 28px rgba(255, 62, 79, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.login-primary-button:hover {
    filter: brightness(1.08);
}

.login-secondary-button {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.22);
    color: #ffffff;
}

.login-secondary-button:hover {
    border-color: rgba(255, 62, 79, 0.45);
    background: rgba(255, 62, 79, 0.08);
}

.login-copyright {
    margin: 18px 0 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.38);
    font-size: 12px;
}

/* 底部功能列 */
.login-feature-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 82px;
    padding: 18px 68px;
    background: linear-gradient(90deg, rgba(40, 10, 12, 0.42), rgba(10, 10, 10, 0.76));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    z-index: 2;
}

.login-feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.login-feature-item > span {
    color: #ff3e4f;
    font-size: 34px;
    line-height: 1;
    width: 42px;
    text-align: center;
}

.login-feature-item strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 5px;
}

.login-feature-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
}

/* 登入頁時不要顯示舊 h1 */
body > h1 {
    display: none;
}

/* RWD */
@media (max-width: 1100px) {
    .login-panel {
        right: 36px;
        width: 430px;
    }

    .login-feature-strip {
        padding: 16px 32px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    #authCard.login-page {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px !important;
    }

    .login-left-brand,
    .login-feature-strip {
        display: none;
    }

    .login-panel {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: min(100%, 430px);
        min-height: auto;
    }
}
/* =========================
   登入頁：第一次升級對齊範本
========================= */

#authCard.login-page {
    width: 100% !important;
    height: 100vh !important;
    min-height: 720px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.20) 42%, rgba(0, 0, 0, 0.72) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.18) 62%, rgba(0, 0, 0, 0.70) 100%),
        url("assets/login-cover.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 避免舊 .card / input / button 樣式干擾 */
#authCard.login-page,
#authCard.login-page * {
    box-sizing: border-box;
}

/* 左下角 TAIEX NOTE */
#authCard .login-left-brand {
    position: absolute;
    left: 76px;
    bottom: 118px;
    z-index: 3;
}

#authCard .login-left-title {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 8px;
    font-weight: 400;
}

#authCard .login-left-title span {
    color: #ff4050;
}

#authCard .login-left-title strong {
    color: #ffffff;
    font-weight: 400;
}

#authCard .login-left-brand p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 1.4px;
}

/* 右側登入玻璃面板 */
#authCard .login-panel {
    position: absolute;
    top: 50%;
    right: 72px;
    width: 456px;
    height: 600px;
    transform: translateY(-54%);
    padding: 58px 44px 28px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.18), transparent 22%),
        radial-gradient(circle at 100% 0%, rgba(255, 70, 85, 0.12), transparent 35%),
        rgba(9, 9, 10, 0.66);
    border: 1px solid rgba(255, 60, 76, 0.42);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 4;
}

/* 左上角白色光點 */
#authCard .login-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 82px;
    border-top-left-radius: 18px;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.82), transparent 43%);
    pointer-events: none;
}

/* K 線 logo */
#authCard .login-logo-mark {
    height: 42px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    margin-bottom: 28px;
}

#authCard .login-logo-mark span {
    width: 10px;
    border: 2px solid rgba(255, 62, 79, 0.82);
    border-radius: 2px;
    display: block;
    position: relative;
}

#authCard .login-logo-mark span::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 10px;
    transform: translateX(-50%);
    background: rgba(255, 62, 79, 0.62);
}

#authCard .login-logo-mark span:nth-child(1) {
    height: 26px;
}

#authCard .login-logo-mark span:nth-child(1)::before {
    top: -8px;
}

#authCard .login-logo-mark span:nth-child(2) {
    height: 40px;
}

#authCard .login-logo-mark span:nth-child(2)::before {
    top: -10px;
}

#authCard .login-logo-mark span:nth-child(3) {
    height: 30px;
}

#authCard .login-logo-mark span:nth-child(3)::before {
    top: -8px;
}

/* 右側標題 */
#authCard .login-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19px;
    margin-bottom: 13px;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 10px;
    font-weight: 400;
}

#authCard .login-title span {
    color: #ff4050;
}

#authCard .login-title strong {
    color: #ffffff;
    font-weight: 400;
}

#authCard .login-subtitle {
    margin: 0 0 34px;
    text-align: center;
    color: rgba(255, 255, 255, 0.66);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 1.2px;
}

/* 輸入框 */
#authCard .login-input-group {
    height: 54px;
    margin-bottom: 18px;
    padding: 0 17px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.20);
    transition: 0.18s ease;
}

#authCard .login-input-group:focus-within {
    border-color: rgba(255, 62, 79, 0.68);
    box-shadow: 0 0 0 3px rgba(255, 62, 79, 0.13);
}

#authCard .login-input-icon {
    width: 28px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 18px;
    display: inline-flex;
    justify-content: center;
}

#authCard .login-eye-icon {
    color: rgba(255, 255, 255, 0.55);
    font-size: 18px;
}

#authCard .login-input-group input {
    width: 100%;
    height: 100%;
    padding: 0 10px !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

#authCard .login-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.36);
}

#authCard .invite-input-group {
    height: 48px;
    opacity: 0.88;
}

/* 記住我 / 忘記密碼 */
#authCard .login-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 30px;
}

#authCard .login-options-row label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    cursor: pointer;
}

#authCard .login-options-row input {
    width: 16px;
    height: 16px;
    margin: 0 !important;
    accent-color: #ff4050;
}

#authCard .forgot-password-button {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 14px;
    cursor: pointer;
}

/* 登入按鈕 */
#authCard .login-primary-button,
#authCard .login-secondary-button {
    width: 100%;
    height: 58px;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer;
}

#authCard .login-primary-button {
    border: 1px solid rgba(255, 62, 79, 0.78);
    background:
        linear-gradient(180deg, rgba(255, 72, 88, 0.90), rgba(128, 23, 30, 0.95));
    color: #ffffff;
    box-shadow:
        0 16px 32px rgba(255, 62, 79, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

#authCard .login-primary-button:hover {
    filter: brightness(1.08);
}

#authCard .login-secondary-button {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.22);
    color: #ffffff;
}

#authCard .login-secondary-button:hover {
    border-color: rgba(255, 62, 79, 0.45);
    background: rgba(255, 62, 79, 0.08);
}

#authCard .login-copyright {
    margin: 18px 0 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.38);
    font-size: 12px;
}

/* 底部功能列 */
#authCard .login-feature-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 82px;
    padding: 18px 78px;
    background:
        linear-gradient(90deg, rgba(45, 12, 15, 0.45), rgba(7, 7, 8, 0.80));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    z-index: 3;
}

#authCard .login-feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

#authCard .login-feature-item > span {
    width: 42px;
    min-width: 42px;
    text-align: center;
    color: #ff4050;
    font-size: 34px;
    line-height: 1;
}

#authCard .login-feature-item strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 5px;
}

#authCard .login-feature-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    line-height: 1.4;
}

/* 舊標題隱藏 */
body > h1 {
    display: none !important;
}

/* 平板 */
@media (max-width: 1100px) {
    #authCard .login-panel {
        right: 36px;
        width: 430px;
    }

    #authCard .login-left-brand {
        left: 38px;
    }

    #authCard .login-feature-strip {
        padding: 16px 32px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 手機 */
@media (max-width: 820px) {
    #authCard.login-page {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 28px !important;
    }

    #authCard .login-left-brand,
    #authCard .login-feature-strip {
        display: none;
    }

    #authCard .login-panel {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: min(100%, 430px);
        height: auto;
        min-height: auto;
    }
}
/* =========================
   登入頁：修正登入卡與底部功能列重疊
========================= */

/* 登入頁整體鎖定滿版，不要出現垂直捲動 */
#authCard.login-page {
    height: 100vh !important;
    min-height: 720px !important;
    overflow: hidden !important;
}

/* 底部功能列高度固定，避免往上擠登入卡 */
#authCard .login-feature-strip {
    height: 92px !important;
    min-height: 92px !important;
    padding: 16px 78px !important;
    z-index: 3 !important;
}

/* 右側登入卡：往上移、縮短高度，避免壓到底部 */
#authCard .login-panel {
    top: 46% !important;
    right: 86px !important;
    width: 456px !important;
    height: 540px !important;
    min-height: 540px !important;
    transform: translateY(-50%) !important;
    padding: 38px 44px 22px !important;
    z-index: 5 !important;
}

/* K 線 logo 與標題縮緊 */
#authCard .login-logo-mark {
    height: 36px !important;
    margin-bottom: 18px !important;
}

#authCard .login-title {
    font-size: 28px !important;
    margin-bottom: 10px !important;
}

#authCard .login-subtitle {
    margin-bottom: 26px !important;
}

/* 輸入框縮一點，符合圖 2 比例 */
#authCard .login-input-group {
    height: 50px !important;
    margin-bottom: 16px !important;
}

/* 預設登入畫面不要顯示邀請碼，避免把卡片撐高 */
#authCard .invite-input-group {
    display: none !important;
}

/* 註冊模式才顯示邀請碼 */
#authCard.register-mode .invite-input-group {
    display: flex !important;
    height: 46px !important;
    margin-bottom: 14px !important;
}

/* 記住我區域縮緊 */
#authCard .login-options-row {
    margin: 2px 0 24px !important;
}

/* 登入 / 註冊按鈕縮短一點 */
#authCard .login-primary-button,
#authCard .login-secondary-button {
    height: 52px !important;
    margin-bottom: 14px !important;
}

/* copyright 放回登入卡內，不要掉到底部功能列 */
#authCard .login-copyright {
    position: static !important;
    margin: 10px 0 0 !important;
    text-align: center !important;
}

/* 註冊模式時再壓縮一點，避免邀請碼展開後重疊 */
#authCard.register-mode .login-panel {
    height: 570px !important;
    min-height: 570px !important;
    top: 45% !important;
    padding-top: 30px !important;
}

#authCard.register-mode .login-logo-mark {
    margin-bottom: 12px !important;
}

#authCard.register-mode .login-subtitle {
    margin-bottom: 18px !important;
}

#authCard.register-mode .login-input-group {
    height: 46px !important;
    margin-bottom: 12px !important;
}

#authCard.register-mode .login-options-row {
    margin-bottom: 16px !important;
}

#authCard.register-mode .login-primary-button,
#authCard.register-mode .login-secondary-button {
    height: 48px !important;
    margin-bottom: 12px !important;
}

/* 左下品牌文字不要壓到底部功能列 */
#authCard .login-left-brand {
    bottom: 112px !important;
}
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus,
.login-input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 9999s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    caret-color: #ffffff !important;
    border-radius: inherit;
}
.login-input::selection {
    background: rgba(255, 70, 95, 0.25);
    color: #ffffff;
}

.login-input::-webkit-contacts-auto-fill-button,
.login-input::-webkit-credentials-auto-fill-button {
    filter: invert(1) opacity(0.75);
}
/* =========================
   登入頁：修正瀏覽器自動填入白底
========================= */

#authCard .login-input-group input {
    background: transparent !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* Chrome / Edge 自動填入帳號密碼時的白底 */
#authCard .login-input-group input:-webkit-autofill,
#authCard .login-input-group input:-webkit-autofill:hover,
#authCard .login-input-group input:-webkit-autofill:focus,
#authCard .login-input-group input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.30) inset !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.30) inset !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* 滑鼠選取文字時不要變成很亮的白藍色 */
#authCard .login-input-group input::selection {
    background: rgba(255, 64, 80, 0.35);
    color: #ffffff;
}
/* =========================
   登入成功後：強制隱藏登入封面
========================= */

body.app-logged-in #authCard {
    display: none !important;
}

body.app-logged-in #mainApp {
    display: block !important;
}

body.app-logged-out #authCard {
    display: block !important;
}

body.app-logged-out #mainApp {
    display: none !important;
}

/* 登入後恢復主系統可以正常捲動 */
body.app-logged-in {
    overflow: auto !important;
}

/* 未登入時登入頁滿版 */
body.app-logged-out {
    overflow: hidden !important;
}
/* =========================
   登入頁：背景照原圖色澤呈現
========================= */

/* 直接使用原圖，不額外調色、不加紅光、不霧化 */
#authCard.login-page {
    background:
        url("assets/login-cover.png") center center / cover no-repeat !important;
}

/* 關掉之前加在整個背景上的紅色光暈 */
#authCard.login-page::before {
    content: none !important;
    display: none !important;
}

/* 登入卡本身維持玻璃感，但不要讓它影響背景車色 */
#authCard .login-panel {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.15), transparent 24%),
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.08), transparent 34%),
        rgba(8, 8, 9, 0.66) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* 底部功能列降低黑色遮罩，讓車子下方原圖質感保留 */
#authCard .login-feature-strip {
    background:
        linear-gradient(
            90deg,
            rgba(30, 8, 10, 0.34),
            rgba(8, 8, 9, 0.58)
        ) !important;
}

/* 左下角品牌區不要再額外壓暗背景 */
#authCard .login-left-brand {
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.65);
}
/* =========================
   左側選單：黑紅玻璃質感版
========================= */

/* 主系統左側寬度調整 */
.app-shell {
    grid-template-columns: 240px 1fr !important;
    gap: 0 !important;
    background: #05070d !important;
}

/* 左側外框 */
.side-nav.premium-side-nav {
    position: sticky !important;
    top: 18px !important;
    height: calc(100vh - 36px) !important;
    width: 210px !important;
    margin: 18px 0 18px 18px !important;
    padding: 26px 18px 22px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 20%),
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(18, 19, 23, 0.92), rgba(5, 6, 8, 0.96)) !important;
    border: 1px solid rgba(255, 64, 80, 0.28) !important;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 左上角玻璃光 */
.side-nav.premium-side-nav::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 78px;
    height: 78px;
    border-top-left-radius: 24px;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 44%);
    pointer-events: none;
}

/* 品牌區 */
.premium-side-brand {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 8px 24px !important;
    margin: 0 !important;
    border-bottom: none !important;
}

/* Logo 方塊 */
.side-logo-card {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 24px rgba(0, 0, 0, 0.30);
}

/* K 線 logo */
.mini-candle-logo {
    height: 28px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.mini-candle-logo span {
    width: 6px;
    border: 2px solid rgba(255, 64, 80, 0.88);
    border-radius: 2px;
    position: relative;
}

.mini-candle-logo span::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 8px;
    transform: translateX(-50%);
    background: rgba(255, 64, 80, 0.70);
    top: -7px;
}

.mini-candle-logo span:nth-child(1) {
    height: 17px;
}

.mini-candle-logo span:nth-child(2) {
    height: 27px;
}

.mini-candle-logo span:nth-child(3) {
    height: 21px;
}

/* TAIEX NOTE 字樣 */
.premium-brand-text {
    display: grid;
    gap: 6px;
    line-height: 1;
}

.premium-brand-text span {
    color: #ff4050;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 7px;
}

.premium-brand-text strong {
    color: #ffffff;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 7px;
}

/* 品牌下方分隔線 */
.side-divider {
    height: 1px;
    margin: 0 8px 30px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );
}

/* 選單列表 */
.nav-menu-list {
    display: grid;
    gap: 20px;
}

/* 一般選單按鈕 */
.side-nav.premium-side-nav .nav-item {
    width: 100% !important;
    height: 62px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.58) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-align: left !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: 0.18s ease !important;
}

/* icon 方塊 */
.side-nav.premium-side-nav .nav-icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.side-nav.premium-side-nav .nav-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* hover */
.side-nav.premium-side-nav .nav-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* active：紅色高亮 */
.side-nav.premium-side-nav .nav-item.active {
    color: #ffffff !important;
    border-color: rgba(255, 64, 80, 0.50) !important;
    background:
        radial-gradient(circle at left center, rgba(255, 80, 92, 0.34), transparent 42%),
        linear-gradient(90deg, rgba(255, 64, 80, 0.88), rgba(255, 64, 80, 0.18)) !important;
    box-shadow:
        0 18px 34px rgba(255, 64, 80, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.side-nav.premium-side-nav .nav-item.active .nav-icon {
    color: #ff5664 !important;
    background: rgba(60, 12, 16, 0.52) !important;
    box-shadow:
        0 12px 24px rgba(255, 64, 80, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* 登出按鈕固定底部 */
.side-nav.premium-side-nav .premium-logout-item {
    margin-top: auto !important;
    height: 62px !important;
    color: #ff5664 !important;
    border: 1px solid rgba(255, 64, 80, 0.45) !important;
    background:
        radial-gradient(circle at left center, rgba(255, 64, 80, 0.16), transparent 40%),
        rgba(255, 64, 80, 0.035) !important;
    justify-content: center !important;
}

.side-nav.premium-side-nav .premium-logout-item .nav-icon {
    background: transparent !important;
    color: #ff5664 !important;
    width: 30px;
    min-width: 30px;
}

.side-nav.premium-side-nav .premium-logout-item:hover {
    background:
        radial-gradient(circle at left center, rgba(255, 64, 80, 0.28), transparent 40%),
        rgba(255, 64, 80, 0.08) !important;
    border-color: rgba(255, 64, 80, 0.68) !important;
}

/* 主內容右側跟新選單保持距離 */
.app-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
    min-width: 0 !important;
}

/* 窄螢幕先維持可用，不套大側欄 */
@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr !important;
    }

    .side-nav.premium-side-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 12px !important;
        flex-direction: column !important;
    }

    .nav-menu-list {
        gap: 10px;
    }

    .side-nav.premium-side-nav .nav-item {
        height: 54px !important;
        font-size: 16px !important;
    }
}
/* =========================
   交易回顧報告頁
========================= */

.report-page {
    padding: 14px 18px 18px;
    box-sizing: border-box;
}

.report-header-panel {
    min-height: 82px;
    margin-bottom: 14px;
    padding: 18px 22px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.10), transparent 38%),
        #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.report-header-panel h2 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

.report-header-panel p {
    margin: 0;
    color: #9aa4b7;
    font-size: 13px;
    font-weight: 800;
}

.report-range-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-range-tabs button {
    height: 36px;
    min-width: 64px;
    padding: 0 14px;
    margin: 0;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
    color: #cbd6ea;
    font-size: 13px;
    font-weight: 900;
}

.report-range-tabs button.active {
    background: rgba(255, 64, 80, 0.32);
    border-color: rgba(255, 64, 80, 0.65);
    color: #ffffff;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.report-summary-card {
    min-height: 104px;
    padding: 16px 18px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.09), transparent 38%),
        #171a20;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.report-summary-card span {
    display: block;
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

.report-summary-card strong {
    display: block;
    color: #ffffff;
    font-size: 25px;
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 7px;
}

.report-summary-card small {
    display: block;
    color: #7f8a9d;
    font-size: 11px;
    font-weight: 800;
}

.report-detail-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 14px;
}

.report-block {
    padding: 20px 22px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.08), transparent 38%),
        #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.report-block h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

.report-line {
    min-height: 44px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.report-line:last-child {
    border-bottom: none;
}

.report-line span {
    color: #9aa4b7;
    font-size: 13px;
    font-weight: 800;
}

.report-line strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    text-align: right;
}

.report-warning-box,
.report-suggestion-box {
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.report-warning-box {
    margin-bottom: 14px;
}

.report-warning-box span,
.report-suggestion-box span {
    display: block;
    margin-bottom: 8px;
    color: #ff5664;
    font-size: 14px;
    font-weight: 900;
}

.report-warning-box p,
.report-suggestion-box p {
    margin: 0;
    color: #cbd6ea;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
}

.report-value.profit,
.report-summary-card strong.profit {
    color: #00e676 !important;
}

.report-value.loss,
.report-summary-card strong.loss {
    color: #ff5252 !important;
}

@media (max-width: 1100px) {
    .report-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-detail-panel {
        grid-template-columns: 1fr;
    }

    .report-header-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================
   持倉總覽：平均成本試算器
========================= */

.average-cost-panel {
    margin-bottom: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.10), transparent 38%),
        #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.average-cost-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.average-cost-header h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

.average-cost-header p {
    margin: 0;
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 800;
}

.average-cost-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.8fr) minmax(160px, 0.8fr);
    gap: 12px;
    margin-bottom: 14px;
}

.average-cost-form label {
    min-height: 74px;
    padding: 10px 12px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.average-cost-form label span {
    display: block;
    color: #9aa4b7;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 7px;
}

.average-cost-form label small {
    display: block;
    margin-top: 6px;
    color: #7f8a9d;
    font-size: 10px;
    font-weight: 800;
}

.average-cost-form select,
.average-cost-form input {
    width: 100%;
    height: 28px;
    margin: 0 !important;
    padding: 0 !important;
    border: none;
    outline: none;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.average-cost-form select {
    color-scheme: dark;
}

.average-cost-form select option {
    background: #1b2029;
    color: #ffffff;
}

.average-cost-current {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.average-cost-current div {
    padding: 12px 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.average-cost-current span,
.average-cost-result-card span {
    display: block;
    color: #9aa4b7;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 7px;
}

.average-cost-current strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
}

.average-cost-result-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.average-cost-result-card {
    min-height: 78px;
    padding: 13px 14px;
    border-radius: 13px;
    background:
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.08), transparent 38%),
        #171a20;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-sizing: border-box;
}

.average-cost-result-card strong {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}

.avg-cost-positive {
    color: #00e676 !important;
}

.avg-cost-negative {
    color: #ff5252 !important;
}

.average-cost-tip {
    padding: 12px 14px;
    border-radius: 13px;
    background: rgba(255, 64, 80, 0.07);
    border: 1px solid rgba(255, 64, 80, 0.16);
    color: #dce8ff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .average-cost-form,
    .average-cost-current,
    .average-cost-result-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   設定頁：資金風控 + 手續費設定
========================= */

.settings-page {
    padding: 14px 18px 18px;
    box-sizing: border-box;
    display: grid;
    gap: 14px;
}

.settings-page-header {
    min-height: 82px;
    padding: 18px 22px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.10), transparent 38%),
        #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.settings-page-header h2 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

.settings-page-header p {
    margin: 0;
    color: #9aa4b7;
    font-size: 13px;
    font-weight: 800;
}

.settings-panel {
    padding: 18px 20px 20px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.09), transparent 38%),
        #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.settings-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.settings-panel-header h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

.settings-panel-header p {
    margin: 0;
    color: #9aa4b7;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 800;
}

.settings-panel-badge {
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 64, 80, 0.12);
    border: 1px solid rgba(255, 64, 80, 0.28);
    color: #ff5664;
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.fee-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-field {
    min-height: 88px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.settings-field span {
    display: block;
    color: #9aa4b7;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 8px;
}

.settings-field input {
    width: 100%;
    height: 30px;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 900;
}

.settings-field input::placeholder {
    color: rgba(255, 255, 255, 0.30);
}

.settings-field small {
    display: block;
    margin-top: 7px;
    color: #7f8a9d;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
}

.settings-switch-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.settings-switch {
    min-height: 62px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    cursor: pointer;
}

.settings-switch input {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: #ff4050;
}

.settings-switch strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 5px;
}

.settings-switch span {
    display: block;
    color: #8f9aad;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
}

.settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.settings-save-button,
.settings-secondary-button {
    height: 40px;
    min-width: 136px;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.settings-save-button {
    border: 1px solid rgba(255, 64, 80, 0.62);
    background:
        linear-gradient(180deg, rgba(255, 72, 88, 0.86), rgba(124, 20, 30, 0.92));
    color: #ffffff;
    box-shadow:
        0 14px 28px rgba(255, 64, 80, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.settings-save-button:hover {
    filter: brightness(1.08);
}

.settings-secondary-button {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
    color: #cbd6ea;
}

.settings-secondary-button:hover {
    background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 1200px) {
    .settings-form-grid,
    .fee-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .settings-form-grid,
    .fee-form-grid {
        grid-template-columns: 1fr;
    }

    .settings-panel-header {
        flex-direction: column;
    }

    .settings-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-save-button,
    .settings-secondary-button {
        width: 100%;
    }
}
/* =========================
   總覽頁：交易冷卻提醒
========================= */

.cooldown-reminder-card {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(41, 121, 255, 0.10), transparent 38%),
        #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.cooldown-reminder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.cooldown-reminder-header span {
    display: block;
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
}

.cooldown-reminder-header strong {
    display: block;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
}

.cooldown-reminder-header small {
    color: #9aa4b7;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.cooldown-reminder-card p {
    margin: 0 0 12px;
    color: #dce8ff;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 800;
}

.cooldown-reminder-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.cooldown-reminder-stats div {
    padding: 11px 12px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.cooldown-reminder-stats span {
    display: block;
    color: #9aa4b7;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 6px;
}

.cooldown-reminder-stats strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
}

.cooldown-reminder-card > small {
    display: block;
    color: #9aa4b7;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 800;
}

/* 正常狀態 */
.cooldown-reminder-card.cooldown-normal {
    background:
        radial-gradient(circle at top right, rgba(0, 230, 118, 0.08), transparent 38%),
        #15181e;
    border-color: rgba(0, 230, 118, 0.14);
}

.cooldown-reminder-card.cooldown-normal .cooldown-reminder-header strong {
    color: #00e676;
}

/* 注意狀態 */
.cooldown-reminder-card.cooldown-warning {
    background:
        radial-gradient(circle at top right, rgba(255, 213, 79, 0.12), transparent 38%),
        #15181e;
    border-color: rgba(255, 213, 79, 0.25);
}

.cooldown-reminder-card.cooldown-warning .cooldown-reminder-header strong {
    color: #ffd54f;
}

/* 冷卻狀態 */
.cooldown-reminder-card.cooldown-cooldown {
    background:
        radial-gradient(circle at top right, rgba(255, 64, 80, 0.16), transparent 38%),
        #15181e;
    border-color: rgba(255, 64, 80, 0.35);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(255, 64, 80, 0.08);
}

.cooldown-reminder-card.cooldown-cooldown .cooldown-reminder-header strong {
    color: #ff5252;
}

.cooldown-reminder-card.cooldown-cooldown p {
    color: #ffffff;
}

@media (max-width: 900px) {
    .cooldown-reminder-stats {
        grid-template-columns: 1fr;
    }

    .cooldown-reminder-header {
        flex-direction: column;
    }
}
/* =========================
   登入頁：新版車子 + 上漲 K 棒封面
========================= */

#authCard.login-page {
    background:
        url("assets/login-cover-kline.png") center center / cover no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: none !important;
}

/* 保留原圖色澤，不再額外壓暗 */
#authCard.login-page::before,
#authCard.login-page::after {
    content: none !important;
    display: none !important;
}
/* =========================
   登入頁：登入狀態提示
========================= */

#authCard .login-status-message {
    width: 100%;
    min-height: 38px;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #dce8ff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}

#authCard .login-status-message.error {
    background: rgba(255, 82, 82, 0.13);
    border-color: rgba(255, 82, 82, 0.38);
    color: #ffb4b4;
}

#authCard .login-status-message.success {
    background: rgba(0, 230, 118, 0.12);
    border-color: rgba(0, 230, 118, 0.34);
    color: #8dffbf;
}
/* =========================
   登入頁：登入狀態提示
========================= */

#authCard .login-status-message {
    width: 100%;
    min-height: 34px;
    margin: 0 0 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #dce8ff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}

#authCard .login-status-message.error {
    background: rgba(255, 82, 82, 0.13);
    border-color: rgba(255, 82, 82, 0.38);
    color: #ffb4b4;
}

#authCard .login-status-message.success {
    background: rgba(0, 230, 118, 0.12);
    border-color: rgba(0, 230, 118, 0.34);
    color: #8dffbf;
}
/* =========================
   加碼平均成本與風險試算器
========================= */

.average-risk-form {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.average-risk-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.avg-cost-neutral {
    color: #9aa4b7 !important;
}

.avg-cost-warning {
    color: #ffd54f !important;
}

#avgCostRiskReward {
    font-size: 22px;
}

@media (max-width: 1280px) {
    .average-risk-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .average-risk-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .average-risk-form,
    .average-risk-result-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   績效分析：KPI 小字說明
========================= */

#analyticsPage .performance-stat-sub {
    display: block;
    margin-top: 7px;
    color: #7f8a9d;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;
    white-space: nowrap;
}
/* =========================
   登入 / 註冊：防止重複點擊
========================= */

#registerModeButton:disabled,
.login-primary-button:disabled,
.login-secondary-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}