#help-page {
    width: 100%;
    height: calc(100vh - 180px);
    overflow-y: auto;
    border-radius: 0.5rem;
    line-height: normal;
}

#clan-page {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    line-height: normal;
}

/* ===== 排序拖拽 ===== */
.sort-item {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.2s ease;
}
.sort-item.dragging {
    opacity: 0.6;
    background-color: #e2e8f0;
    cursor: grabbing;
    touch-action: none;
}
.sort-item.drag-placeholder {
    opacity: 0.3;
    background-color: rgba(59,130,246,0.1);
    border: 1px dashed #3b82f6;
}

/* ===== 账号标签 ===== */
#tab-container {
    position: relative;
}
.account-tab {
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.account-tab.active-tab {
    border: 2px solid #000000 !important;
    border-bottom-width: 4px !important;
    background-color: #ffffff;
    color: #000000;
    font-weight: 700;
}
.dark .account-tab.active-tab {
    border: 2px solid #ffffff !important;
    border-bottom-width: 4px !important;
    background-color: #2d2d44 !important;
    color: #ffffff !important;
}
#tab-container > .account-tab[data-sort="true"] {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
}
/* 账号切换内容入场动画：左滑/右滑按方向滑入，其余从右滑入（过渡自然不突兀） */
.tab-slide-left {
    animation: tabSlideInFromRight 0.2s ease-out;
}
.tab-slide-right {
    animation: tabSlideInFromLeft 0.2s ease-out;
}
@keyframes tabSlideInFromRight {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}
@keyframes tabSlideInFromLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: none; }
}
.sleep-highlight {
    background-color: #dbeafe !important;
}
.sleep-highlight-tab {
    background-color: #dbeafe;
}

/* ===== 助手行 ===== */
.helper-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}
.helper-row:last-child {
    border-bottom: none;
}

/* ===== 睡眠时间选择器 ===== */
.picker-column {
    height: 144px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    flex: 1;
    max-width: 56px;
}
.picker-column::-webkit-scrollbar { display: none; }
.picker-scroll { padding: 54px 0; position: relative; z-index: 1; }
.picker-item {
    height: 36px;
    scroll-snap-align: center;
    text-align: center;
    font-size: 16px;
    color: #9ca3af;
    line-height: 36px;
    user-select: none;
}
.dark .picker-item {
    color: #6b7280;
}
.picker-item.active {
    color: #1a202c;
}
.dark .picker-item.active {
    color: #e2e8f0;
}
.picker-colon {
    width: 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 18px;
    font-weight: 500;
    line-height: 144px;
    flex-shrink: 0;
}

/* ===== 底部导航栏 ===== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
.bottom-nav .nav-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
    gap: 2px;
}
.bottom-nav .nav-btn i {
    font-size: 20px;
}
.bottom-nav .nav-btn.active {
    color: #3b82f6;
}
.bottom-nav .nav-btn.active i {
    color: #3b82f6;
}
.page-content {
    padding-bottom: 64px;
}

/* ===== 阶段气泡提示 ===== */
.phase-tooltip {
    position: fixed;
    z-index: 9999;
    background: #1e293b;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: auto;
}
.phase-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1e293b;
}
.phase-tooltip .tooltip-label {
    color: #94a3b8;
    margin-right: 4px;
}
.phase-tooltip .tooltip-time {
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
}
.dark .phase-tooltip {
    background: #334155;
}
.dark .phase-tooltip::after {
    border-top-color: #334155;
}

/* ===== 深色模式覆盖 ===== */
.dark {
    background-color: #1a1a2e;
}
.dark body, .dark .bg-gray-50, .dark .bg-gray-100 {
    background-color: #1a1a2e !important;
}
.dark .bg-white {
    background-color: #2d2d44 !important;
}
.dark .text-gray-800, .dark .text-gray-700 {
    color: #e2e8f0 !important;
}
.dark .text-gray-600, .dark .text-gray-500 {
    color: #a0aec0 !important;
}
.dark .text-gray-400 {
    color: #718096 !important;
}
.dark .border-gray-200, .dark .border-gray-300 {
    border-color: #3d3d5c !important;
}
.dark .bg-gray-200 {
    background-color: #3d3d5c !important;
}
.dark .bg-gray-300 {
    background-color: #4a4a6a !important;
}
.dark .bg-gray-50 {
    background-color: #252540 !important;
}
.dark .account-tab {
    background-color: transparent !important;
}
.dark .account-tab.text-gray-500 {
    color: #a0aec0 !important;
}
.dark .sort-item {
    background-color: #252540 !important;
    border-color: #3d3d5c !important;
}

/* ===== 更多操作展开菜单（备注/删除等低频键折叠；未来新键直接加 .more-menu-item） ===== */
.more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 96px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 4px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.more-menu-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
    text-align: left;
    color: #374151;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.more-menu-item:active {
    background: #f3f4f6;
}
.more-menu-danger {
    color: #dc2626;
}
.dark .more-menu {
    background: #252540 !important;
}
.dark .more-menu-item {
    color: #e2e8f0 !important;
}
.dark .more-menu-item:active {
    background: #3d3d5c !important;
}
.dark #main-display-area .bg-white {
    background-color: #2d2d44 !important;
}
.dark #data-info .bg-white {
    background-color: #2d2d44 !important;
}
.dark input, .dark textarea, .dark select {
    background-color: #252540 !important;
    color: #e2e8f0 !important;
    border-color: #3d3d5c !important;
}
.dark input::placeholder, .dark textarea::placeholder {
    color: #718096 !important;
}
.dark #sticky-top-bar {
    background-color: #1a1a2e !important;
}
.dark #tab-container > .account-tab[data-sort="true"] {
    background-color: #1a1a2e !important;
}
.dark .modal-content {
    background-color: #2d2d44 !important;
}
.dark .helper-row {
    border-bottom-color: #3d3d5c !important;
}
.dark #chest-notification {
    background-color: #1a1a2e !important;
    border-top-color: #3d3d5c !important;
}
.dark .bottom-nav .nav-btn {
    color: #888 !important;
}
.dark .bottom-nav .nav-btn.active {
    color: #60a5fa !important;
}
.dark #settings-page .bg-white {
    background-color: #2d2d44 !important;
}
.dark #settings-page .text-gray-800 {
    color: #e5e7eb !important;
}
.dark #settings-page button:hover {
    background-color: #3d3d5c !important;
}
.dark #settings-page {
    background-color: #1a1a2e !important;
}
.dark .sleep-highlight, .dark .sleep-highlight-tab {
    background-color: #000000 !important;
}
.dark .bottom-nav {
    background: #2d2d44 !important;
    border-top-color: #3d3d5c !important;
}
.dark .ho-timer-left, .dark .ho-timer-right {
    color: #e2e8f0 !important;
}
.dark .upgrade-card {
    background-color: #252540 !important;
    border-color: #3d3d5c !important;
}
.dark .upgrade-card .text-gray-500 {
    color: #94a3b8 !important;
}

/* ===== 模态弹窗壳 ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    overscroll-behavior: contain;
}
.modal-overlay.z-higher {
    z-index: 60;
}
.modal-card {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    padding: 1rem;
    margin: 0 1rem;
    width: 100%;
}
.modal-card.w-sm {
    max-width: 24rem;
}
.modal-card.w-xs {
    max-width: 20rem;
}
.modal-card.w-2xl {
    max-width: 42rem;
}
.modal-card.h-limited {
    max-height: 90vh;
    overflow: hidden;
}
.modal-card.h-scroll {
    max-height: 90vh;
    overflow-y: auto;
}
.modal-card.h-tall {
    max-height: 85vh;
    overflow-y: auto;
}

.dark .modal-card {
    background-color: #2d2d44 !important;
}
.boost-time-text { font-size:11px; font-weight:500; color:#374151; font-variant-numeric:tabular-nums; }
.dark .boost-time-text { color:#fff !important; }
/* 卡片倒计时单位：字号小/不加粗（颜色继承数字的剩余时间分级色） */
.cr-unit { font-size: 10px; font-weight: 400; }
/* 数字等宽：10→9、2→1 等跳变时倒计时宽度不变，避免跳动 */
.cr-digit { font-variant-numeric: tabular-nums; }
/* 时分秒固定占两位宽（不补零，单数字在两位槽内居中） */
.cr-digit-fixed { display: inline-block; min-width: 2ch; text-align: center; }
/* 有备忘卡片：名称后的等级（如 100→101），小字灰色 */
.card-lv { font-size: 11px; color: #6b7280; font-weight: 400; }
#builder-boost-label { color:#374151; }
.dark #builder-boost-label { color:#fff; }
/* 深色模式下开关开启态用亮紫色（primary 蓝在深色背景上对比度低、不明显） */
html.dark .peer:checked ~ .peer-checked\:bg-primary {
    background-color: #a78bfa !important;
}
/* 总览区类目屏蔽：图标正常显示，分数由 JS 显示 -/-（绿角标/红点由 JS 隐藏）；.summary-dismissed 仅作状态标记无样式 */