#overview-page, #overview-page > .top-bar, #overview-page > .empty-state, #overview-page > .content { margin:0; padding:0; box-sizing:border-box; }
        #overview-page {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #f9fafb;
            color: #374151;
            overflow-y: auto;
        }
        #overview-page .top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            background: #ffffff;
            border-bottom: 1px solid #e5e7eb;
        }
        #overview-page .top-bar .title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        #overview-page .top-bar .title i { color: #3b82f6; }
        .ov-sort-btn {
            font-size: 12px;
            background: #e5e7eb;
            border: none;
            border-radius: 6px;
            padding: 4px 10px;
            color: #374151;
            cursor: pointer;
            white-space: nowrap;
        }
        .ov-sort-btn:hover { background: #d1d5db; }
        .dark .ov-sort-btn { background: #3d3d5c; color: #e5e7eb; }
        .dark .ov-sort-btn:hover { background: #4f4f6b; }
        .ov-sort-dropdown {
            position: absolute;
            top: 52px;
            right: 20px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 20;
            overflow: hidden;
        }
        .dark .ov-sort-dropdown { background: #2d2d44; border-color: #3d3d5c; }
        .ov-sort-option {
            padding: 8px 16px;
            font-size: 13px;
            color: #374151;
            cursor: pointer;
            white-space: nowrap;
        }
        .ov-sort-option:hover { background: #f3f4f6; }
        .dark .ov-sort-option { color: #e5e7eb; }
        .dark .ov-sort-option:hover { background: #3d3d5c; }
        .ov-sort-option.active { color: #3b82f6; font-weight: 600; }
        #overview-page .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 80px 40px;
            text-align: center;
        }
        #overview-page .empty-state i {
            font-size: 48px;
            color: #d1d5db;
            margin-bottom: 16px;
        }
        #overview-page .empty-state p {
            font-size: 15px;
            color: #9ca3af;
        }
        #overview-page .content { display: none; }
        #overview-page #overview-cards { padding-bottom: 80px; }
        #overview-page .hidden { display: none !important; }
        #overview-page .account-card {
            margin: 8px 20px;
            background: #ffffff;
            border-radius: 12px;
            padding: 12px 16px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        #overview-page .account-card .acc-icon {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            object-fit: contain;
            flex-shrink: 0;
            cursor: pointer;
        }
        #overview-page .account-card .acc-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
        }
        #overview-page .account-card .acc-name {
            font-size: 16px;
            font-weight: 600;
            color: #1f2937;
        }
        #overview-page .account-card .acc-server {
            font-size: 10px;
            color: #fff;
            padding: 1px 6px;
            border-radius: 8px;
            display: inline-block;
            width: fit-content;
        }
        #overview-page .account-card .acc-server[data-srv="intl"] { background: #7c3aed; }
        #overview-page .account-card .acc-server[data-srv="cn"] { background: #2563eb; }
        #overview-page .account-card .acc-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
            flex-shrink: 0;
        }
        #overview-page .account-card .acc-countdown-row {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        #overview-page .account-card .acc-extras {
            display: flex;
            align-items: center;
            gap: 2px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        #overview-page .account-card .acc-extra-icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
            border-radius: 3px;
        }
        #overview-page .account-card .acc-extra-icon.acc-comp-bg {
            border: 1px solid #d1d5db;
            background: radial-gradient(circle, #93c2ff, #4962b4);
        }
        .dark #overview-page .account-card .acc-extra-icon.acc-comp-bg {
            border-color: #3d3d5c;
        }
        #overview-page .account-card .acc-upgrade-icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
            border-radius: 4px;
        }
        #overview-page .account-card .acc-countdown {
            font-size: 14px;
            font-weight: 700;
            background: #f3f4f6;
            border-radius: 4px;
            padding: 2px 6px;
            min-width: 100px;
            text-align: center;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            box-sizing: border-box;
        }
        .dark #overview-page .account-card .acc-countdown { background: #3d3d5c; }
        .acc-countdown.cd-blue { color: #60a5fa; }
        .acc-countdown.cd-yellow { color: #fbbf24; }
        .acc-countdown.cd-orange { color: #fb923c; }
        .acc-countdown.cd-orangered { color: #f87171; }
        .acc-countdown.cd-red { color: #ef4444; }
        .dark .acc-countdown.cd-blue { color: #60a5fa; }
        .dark .acc-countdown.cd-yellow { color: #fbbf24; }
        .dark .acc-countdown.cd-orange { color: #fb923c; }
        .dark .acc-countdown.cd-orangered { color: #f87171; }
        .dark .acc-countdown.cd-red { color: #ef4444; }
        .dark #overview-page { background: #1a1a2e; color: #e5e7eb; }
        .dark #overview-page .top-bar { background: #2d2d44; border-bottom-color: #3d3d5c; }
        .dark #overview-page .top-bar .title { color: #e5e7eb; }
        .dark #overview-page .top-bar .title i { color: #60a5fa; }
        .dark #overview-page .account-card { background: #2d2d44; }
        .dark #overview-page .account-card .acc-name { color: #e5e7eb; }

        /* ===== Detail page ===== */
        #overview-detail-page { margin:0; padding:0; box-sizing:border-box; }
        #overview-detail-page {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: #374151;
        }
        #overview-page .detail-back {
            display: flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            font-size: 15px;
            color: #3b82f6;
            cursor: pointer;
        }
        #overview-page .detail-back i { font-size: 18px; }
        .ov-tab-bar {
            display: flex;
            position: relative;
            background: #ffffff;
            border-bottom: 1px solid #e5e7eb;
            flex-shrink: 0;
        }
        .ov-tab {
            flex: 1;
            padding: 10px 0;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: #9ca3af;
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.2s;
        }
        .ov-tab.active { color: #3b82f6; }
        .ov-tab-indicator {
            position: absolute;
            bottom: 0;
            height: 2px;
            background: #3b82f6;
            transition: transform 0.25s ease, width 0.25s ease;
        }
        .ov-detail-scroll {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 80px;
        }
        .ov-toggle-b {
            display: inline-flex;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            overflow: hidden;
            align-self: flex-start;
        }
        .ov-toggle-b .ov-seg {
            padding: 4px 14px;
            border: none;
            background: #ffffff;
            font-size: 13px;
            color: #374151;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        .ov-toggle-b .ov-seg.active {
            background: #3b82f6;
            color: #ffffff;
        }
        .ov-icon-col {
            position: relative;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 80px;
            padding-top: 4px;
        }
        /* 满防/当前大本模式切换按钮（大本图标右下角，fa-refresh 图案）：当前大本=蓝底，满防=金底 */
        .ov-mode-btn {
            position: absolute;
            bottom: 0;
            right: 4px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: none;
            color: #fff;
            font-size: 10px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            z-index: 2;
        }
        .ov-mode-btn.th { background: #2563eb; }
        .ov-mode-btn { background: #f59e0b; }
        /* 当前大本模式满级徽章（达到大本上限）：蓝底；满防模式维持金色 ov-maxed */
        .ov-th-max .ov-level-badge { background: #2563eb; }
        .ov-icon-wrap.ov-th-max { box-shadow: inset 0 0 0 3px #2563eb; }
        .ov-icon-name {
            font-size: 14px;
            font-weight: 600;
            color: #1f2937;
            text-align: center;
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ov-right-name {
            font-size: 14px;
            font-weight: 600;
            color: #1f2937;
            text-align: left;
        }
        .ov-bar-center {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .ov-th-icon {
            width: 80px;
            height: 80px;
            object-fit: contain;
            border-radius: 12px;
        }
        .ov-top-row {
            padding: 12px 16px 0 48px;
            display: flex;
            gap: 16px;
            align-items: center;
        }
        /* 升级时间折扣按钮（底框：左侧图标 + 右侧折扣数）+ 下拉选项 */
        .ov-disc-wrap {
            position: relative;
            align-self: flex-start;
            margin-left: auto;   /* 推到行尾（右上角），不受 toggle 居中 padding 限制 */
        }
        .ov-disc-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            background: #ffffff;
            padding: 4px 8px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .ov-disc-icon {
            width: 16px;
            height: 16px;
            object-fit: contain;
        }
        .ov-disc-val {
            font-size: 12px;
            font-weight: 600;
            color: #b45309;
            line-height: 1;
        }
        .ov-disc-menu {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;   /* 右对齐按钮右缘，避免靠右时下拉溢出屏幕 */
            background: #ffffff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            z-index: 30;
            min-width: 64px;
            overflow: hidden;
        }
        .ov-disc-opt {
            padding: 6px 14px;
            font-size: 13px;
            color: #374151;
            text-align: center;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        .ov-disc-opt:hover { background: #f3f4f6; }
        .ov-disc-opt.active { background: #3b82f6; color: #ffffff; }
        .dark .ov-disc-btn { background: #2d2d44; border-color: #3d3d5c; }
        .dark .ov-disc-val { color: #f59e0b; }
        .dark .ov-disc-menu { background: #2d2d44; border-color: #3d3d5c; }
        .dark .ov-disc-opt { color: #e5e7eb; }
        .dark .ov-disc-opt:hover { background: #3d3d5c; }
        .dark .ov-disc-opt.active { background: #3b82f6; color: #ffffff; }
        .ov-top-row::before {
            content: '';
            min-width: 80px;
        }
        .ov-body {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 12px 48px;
        }
        .ov-right-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .ov-bar-col {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .ov-bar-row {
            display: flex;
            align-items: center;
        }
        .ov-bar-row.ov-bar-clickable {
            cursor: pointer;
            padding: 2px 0;
            border-radius: 4px;
        }
        .ov-bar-row.ov-bar-clickable:active { background: rgba(59,130,246,0.1); }
        .ov-bar-row .ov-bar-cat {
            margin-right: 6px;
        }
        .ov-bar-row .ov-bar-pct {
            margin-left: 0;
        }
        .ov-bar-icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
            flex-shrink: 0;
        }
        .ov-bar-track {
            flex: 1;
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
        }
        .ov-bar-fill {
            height: 100%;
            border-radius: 3px;
            background: #3b82f6;
        }
        /* 满防模式进度 100%：5 段金色渐变 + 双光泽错位流动（各 6s、第二道延迟 3s 半周期，任意时刻 1-2 道白条在条内，连续无断档） */
        .ov-bar-fill.ov-bar-full {
            background: linear-gradient(90deg, #fcd34d, #f59e0b 25%, #fbbf24 50%, #f59e0b 75%, #fbbf24);
            position: relative;
            overflow: hidden;
        }
        .ov-bar-fill.ov-bar-full::before,
        .ov-bar-fill.ov-bar-full::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%);
            transform: translateX(-100%);
            animation: ov-bar-shimmer 6s ease-in-out infinite;
        }
        .ov-bar-fill.ov-bar-full::after { animation-delay: 3s; }
        @keyframes ov-bar-shimmer {
            100% { transform: translateX(100%); }
        }
        /* 进度明细弹窗行 */
        .ov-pg-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 0;
            font-size: 13px;
            border-bottom: 1px solid #f0f0f0;
        }
        .ov-pg-row:last-child { border-bottom: none; }
        .ov-pg-name { width: 56px; flex-shrink: 0; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ov-pg-track { flex: 1; height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
        .ov-pg-fill { height: 100%; border-radius: 3px; background: #3b82f6; }
        .ov-pg-pct { width: 50px; text-align: right; color: #6b7280; font-size: 12px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
        .ov-pg-remain { width: 72px; text-align: right; color: #6b7280; font-size: 12px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
        .ov-pg-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 0;
            background: #f9fafb;
            border: 1px solid #f0f0f0;
            border-radius: 6px;
            padding: 6px 4px;
            margin-bottom: 8px;
        }
        .ov-pg-cell { width: 50%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .ov-pg-summary .ov-pg-cell:nth-child(-n+3) { width: 33.333%; }
        .ov-pg-cell .k { font-size: 10px; color: #9ca3af; white-space: nowrap; }
        .ov-pg-cell .v { font-size: 13px; font-weight: 600; color: #374151; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .dark .ov-pg-summary { background: #1f1f30; border-color: #2d2d44; }
        .dark .ov-pg-cell .k { color: #6b7280; }
        .dark .ov-pg-cell .v { color: #e5e7eb; }
        .dark .ov-pg-row { border-bottom-color: #2d2d44; }
        .dark .ov-pg-name { color: #e5e7eb; }
        .dark .ov-pg-track { background: #3d3d5c; }
        .dark .ov-pg-pct { color: #9ca3af; }
        .dark .ov-pg-remain { color: #9ca3af; }
        .ov-bar-cat {
            font-size: 12px;
            color: #6b7280;
            width: 28px;
            flex-shrink: 0;
            text-align: left;
        }
        .ov-bar-pct {
            font-size: 11px;
            color: #9ca3af;
            width: 42px;
            flex-shrink: 0;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .ov-bar-tip {
            width: 14px;
            height: 14px;
            object-fit: contain;
            flex-shrink: 0;
            cursor: pointer;
        }
        .ov-cat-header .ov-bar-tip {
            position: absolute;
            top: -15px;
            right: -15px;
            z-index: 3;
            margin: 0;
        }
        .ov-tip-card { padding: 1.5rem; text-align: center; line-height: 1.6; }
        .ov-tip-text { font-size: 14px; margin: 0 0 1rem; color: #374151; }
        .dark .ov-tip-text { color: #e5e7eb; }
        .ov-modal-btn {
            background: #3b82f6;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 8px 24px;
            font-size: 14px;
            cursor: pointer;
        }
        .ov-sections {
            padding: 0 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .ov-cat {
            background: #ffffff;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }
        .ov-cat-header {
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .ov-cat-icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
            flex-shrink: 0;
        }
        .ov-cat-title-wrap {
            display: flex;
            align-items: center;
            gap: 0;
            margin-right: auto;
        }
        .ov-cat-title {
            font-size: 14px;
            font-weight: 600;
            color: #1f2937;
        }
        .ov-cat-pct {
            display: flex;
            align-items: center;
            gap: 2px;
            font-size: 11px;
            color: #6b7280;
            white-space: nowrap;
        }
        .ov-mini-icon {
            width: 14px;
            height: 14px;
            object-fit: contain;
        }
        .ov-cat-body {
            display: flex;
            flex-direction: column;
        }
        .ov-hero-row {
            display: flex;
            align-items: flex-start;
            gap: 4px;
            padding: 3px 0;
            border-bottom: 1px solid #f3f4f6;
        }
        .ov-hero-row:last-child { border-bottom: none; padding-bottom: 3px; }
        .ov-icon-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            box-sizing: border-box;
            border-radius: 6px;
            background: radial-gradient(circle, #93c2ff, #4962b4);
            box-shadow: inset 0 0 0 1px #d1d5db;
        }
        .ov-icon-wrap:has(> .ov-eq-epic) { background: radial-gradient(circle, #dfbeff, #af51df); }
        .ov-icon-wrap:has(> .ov-eq-common) { background: radial-gradient(circle, #b8f9ff, #3999d6); }
        .ov-level-badge {
            position: absolute;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,0.85);
            color: #fff;
            font-size: 9px;
            line-height: 12px;
            width: 14px;
            height: 14px;
            border-radius: 2px;
            border: 1px solid rgba(255,255,255,0.7);
            box-shadow: 0 0 3px rgba(255,255,255,0.5);
            box-sizing: border-box;
            font-variant-numeric: tabular-nums;
            pointer-events: none;
            text-align: center;
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;
        }
        .ov-eq-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
            flex: 1;
        }
        .ov-locked {
            filter: grayscale(1);
            opacity: 0.6;
        }
        .ov-maxed .ov-level-badge { background: #fdc367; }
        .ov-icon-wrap.ov-maxed { box-shadow: inset 0 0 0 3px #fdc367; }
        .ov-count-badge {
            position: absolute;
            top: 0;
            right: 0;
            background: rgba(37,99,235,0.9);
            color: #fff;
            font-size: 9px;
            line-height: 12px;
            padding: 0 3px;
            border-radius: 2px;
            border: 1px solid rgba(255,255,255,0.7);
            box-sizing: border-box;
            pointer-events: none;
        }
        .ov-hero-icon, .ov-eq-icon, .ov-grid-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 36px;
            height: 36px;
            max-width: none;   /* 覆盖 tailwind preflight img{max-width:100%}，保证覆盖边框区域 */
            object-fit: contain;
            border: none;
            border-radius: 6px;
            flex-shrink: 0;
        }
        .ov-icon-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
        }
        .ov-icon-grid-next { margin-top: 6px; }
        .ov-icon-count-row { margin-bottom: 4px; }
        .ov-collapse-head {
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .ov-collapse-head i { font-size: 10px; color: #9ca3af; transition: transform 0.2s; }
        .ov-collapse-head i.ov-collapse-open { transform: rotate(180deg); }
        .ov-collapsed { display: none; }
        .ov-icon-row {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 2px;
        }
            object-fit: contain;
            border-radius: 6px;
        }
        .ov-sub-label {
            font-size: 12px;
            font-weight: 500;
            color: #9ca3af;
            padding: 10px 0 2px;
        }
        .ov-sub-label:first-child { padding-top: 0; }

        /* Dark mode */
        .dark #overview-detail-page { background: #1a1a2e !important; color: #e5e7eb; }
        .dark #overview-page .detail-back { color: #60a5fa; }
        .dark .ov-tab-bar { background: #2d2d44; border-bottom-color: #3d3d5c; }
        .dark .ov-tab { color: #6b7280; }
        .dark .ov-tab.active { color: #60a5fa; }
        .dark .ov-tab-indicator { background: #60a5fa; }
        .dark .ov-toggle-b { border-color: #3d3d5c; }
        .dark .ov-toggle-b .ov-seg { background: #2d2d44; color: #e5e7eb; }
        .dark .ov-icon-name { color: #e5e7eb; }
        .dark .ov-right-name { color: #e5e7eb; }
        .dark .ov-toggle-b .ov-seg.active { background: #3b82f6; color: #fff; }
        .dark .ov-bar-track { background: #3d3d5c; }
        .dark .ov-bar-fill { background: #60a5fa; }
        .dark .ov-bar-cat { color: #9ca3af; }
        .dark .ov-bar-pct { color: #6b7280; }
        .dark .ov-icon-wrap:not(.ov-maxed) { box-shadow: inset 0 0 0 1px #3d3d5c; }
        .dark .ov-icon-wrap.ov-maxed { box-shadow: inset 0 0 0 3px #fdc367; }
        .dark .ov-icon-wrap:has(> .ov-hero-icon),
        .dark .ov-icon-wrap:has(> .ov-grid-icon) {
            background: radial-gradient(circle, #93c2ff, #4962b4);
        }
        .dark .ov-cat { background: #2d2d44; }
        .dark .ov-cat-title { color: #e5e7eb; }
        .dark .ov-cat-pct { color: #9ca3af; }
        .dark .ov-hero-row { border-bottom-color: #3d3d5c; }
        .dark .ov-sub-label { color: #6b7280; }