/* 后台信息页统一主题覆盖 */
:root {
    --xs-panel-bg: rgba(15, 23, 42, 0.82);
    --xs-panel-bg-soft: rgba(15, 23, 42, 0.64);
    --xs-page-bg: #06101f;
    --xs-page-bg-strong: #0b172a;
    --xs-panel-border: rgba(94, 234, 212, 0.14);
    --xs-panel-shadow: 0 18px 44px rgba(2, 8, 23, 0.38);
    --xs-title: #ecfeff;
    --xs-body: #d7e5f5;
    --xs-muted: #8aa2bf;
    --xs-line: rgba(148, 163, 184, 0.18);
    --xs-primary: #14b8a6;
    --xs-primary-strong: #0f766e;
    --xs-primary-soft: rgba(20, 184, 166, 0.14);
    --xs-accent: #38bdf8;
    --xs-accent-soft: rgba(56, 189, 248, 0.16);
    --xs-danger: #fda4af;
    --xs-danger-soft: rgba(127, 29, 29, 0.24);
    --xs-warning: #fcd34d;
    --xs-warning-soft: rgba(120, 53, 15, 0.24);
    --xs-success: #86efac;
    --xs-success-soft: rgba(20, 83, 45, 0.24);
    --xs-info-soft: rgba(30, 41, 59, 0.9);
}

body.shu-home,
body.shu-page:not(.shu-home) {
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 26%),
        radial-gradient(circle at bottom, rgba(14, 116, 144, 0.16), transparent 34%),
        linear-gradient(180deg, var(--xs-page-bg) 0%, var(--xs-page-bg-strong) 100%) !important;
    color: var(--xs-body) !important;
}

body.shu-home::before,
body.shu-page:not(.shu-home)::before {
    opacity: 0.26 !important;
    background:
        linear-gradient(rgba(20, 184, 166, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 184, 166, 0.07) 1px, transparent 1px) !important;
    background-size: 46px 46px !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

body.shu-home .main-content,
body.shu-home .content-body,
body.shu-page:not(.shu-home) .main-content,
body.shu-page:not(.shu-home) .content-body {
    background: transparent !important;
}

.fortune-container,
.calendar-container,
.xishen-jishen-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

body.shu-home .content-header,
body.shu-page:not(.shu-home) .content-header {
    background: linear-gradient(145deg, rgba(12, 22, 40, 0.92), rgba(17, 24, 39, 0.76)) !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 36px rgba(2, 8, 23, 0.34) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.shu-home .content-header::before,
body.shu-page:not(.shu-home) .content-header::before {
    width: 5px !important;
    background: linear-gradient(180deg, var(--xs-primary), var(--xs-accent)) !important;
    opacity: 0.86 !important;
}

body.shu-home .content-header::after,
body.shu-page:not(.shu-home) .content-header::after {
    inset: 14px !important;
    background:
        linear-gradient(var(--xs-primary), var(--xs-primary)) top left / 18px 2px no-repeat,
        linear-gradient(var(--xs-primary), var(--xs-primary)) top left / 2px 18px no-repeat,
        linear-gradient(var(--xs-accent), var(--xs-accent)) top right / 18px 2px no-repeat,
        linear-gradient(var(--xs-accent), var(--xs-accent)) top right / 2px 18px no-repeat,
        linear-gradient(var(--xs-accent), var(--xs-accent)) bottom left / 18px 2px no-repeat,
        linear-gradient(var(--xs-accent), var(--xs-accent)) bottom left / 2px 18px no-repeat,
        linear-gradient(var(--xs-primary), var(--xs-primary)) bottom right / 18px 2px no-repeat,
        linear-gradient(var(--xs-primary), var(--xs-primary)) bottom right / 2px 18px no-repeat !important;
    opacity: 0.28 !important;
}

body.shu-page .header-left {
    gap: 14px;
}

body.shu-home .header-title,
body.shu-home .content-header h1,
body.shu-page:not(.shu-home) .header-title,
body.shu-page:not(.shu-home) .content-header h1 {
    background: linear-gradient(90deg, #f8fafc 0%, #8be9ff 52%, #5eead4 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

body.shu-home .content-header h1::after,
body.shu-page:not(.shu-home) .content-header h1::after {
    background: linear-gradient(90deg, var(--xs-primary), rgba(56, 189, 248, 0.75), transparent) !important;
    opacity: 0.8 !important;
}

body.shu-home .content-header p,
body.shu-page:not(.shu-home) .content-header p {
    color: var(--xs-muted) !important;
}

body.shu-page .back-btn {
    background: rgba(15, 118, 110, 0.1);
    color: var(--xs-primary);
}

body.shu-page .back-btn:hover {
    background: rgba(15, 118, 110, 0.16);
}

.fortune-section,
.info-card,
.fortune-content,
.llm-analysis,
.card,
.date-selector,
.user-info-card,
body.shu-home .shu-kpi-card,
body.shu-home .shu-chart-card,
body.shu-home .menu-card,
body.shu-home .calendar-card,
body.shu-page:not(.shu-home) .form-card,
body.shu-page:not(.shu-home) .panel-card,
body.shu-page:not(.shu-home) .result-card,
body.shu-page:not(.shu-home) #result,
body.shu-page:not(.shu-home) .result-area,
body.shu-page:not(.shu-home) .output-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(8, 15, 29, 0.82)) !important;
    border: 1px solid var(--xs-panel-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--xs-panel-shadow) !important;
    color: var(--xs-body) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fortune-section,
.info-card,
.fortune-content,
.llm-analysis,
.card {
    padding: 20px;
}

.fortune-section h2,
.info-card h2,
.fortune-content h3,
.llm-analysis h2,
.card-title,
.card-header,
.shu-kpi-label,
.shu-chart-card h3,
.shu-section-title,
.menu-card h2,
.calendar-title,
.shu-dashboard-head p,
.shu-kpi-sub,
.header-title {
    color: var(--xs-title) !important;
}

.fortune-section h2,
.info-card h2,
.fortune-content h3,
.llm-analysis h2,
.card-header {
    border-bottom-color: var(--xs-primary) !important;
}

.fortune-content h3 {
    color: var(--xs-primary);
}

.fortune-content p,
.llm-content,
.info-value,
.user-info-value,
.menu-card p,
.calendar-solar-date,
.calendar-lunar-date,
.calendar-weekday,
.shu-dashboard,
.shu-kpi-value,
body.shu-page:not(.shu-home) .form-card,
body.shu-page:not(.shu-home) .panel-card,
body.shu-page:not(.shu-home) .result-card,
body.shu-page:not(.shu-home) #result,
body.shu-page:not(.shu-home) .result-area,
body.shu-page:not(.shu-home) .output-panel {
    color: var(--xs-body);
}

.info-label,
.user-info-label,
.dayun-age,
.liunian-age,
.liuyue-term,
.waiting-status,
.loading,
body.shu-home .shu-dashboard-head p,
body.shu-home .shu-kpi-sub,
body.shu-home .menu-card p {
    color: var(--xs-muted);
}

.info-row {
    border-bottom-color: var(--xs-line);
}

.date-selector {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.date-selector label {
    color: var(--xs-title);
    font-weight: 700;
}

.date-selector input,
.fortune-container input,
.fortune-container select,
.fortune-container textarea,
.calendar-container input,
.calendar-container select,
.calendar-container textarea,
.xishen-jishen-container input,
.xishen-jishen-container select,
body.shu-page:not(.shu-home) input[type='text'],
body.shu-page:not(.shu-home) input[type='number'],
body.shu-page:not(.shu-home) input[type='date'],
body.shu-page:not(.shu-home) input[type='datetime-local'],
body.shu-page:not(.shu-home) input[type='time'],
body.shu-page:not(.shu-home) select,
body.shu-page:not(.shu-home) textarea,
body.shu-home .calendar-date-picker {
    padding: 10px 14px;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.88) !important;
    color: var(--xs-title) !important;
    font-size: 16px;
    box-shadow: inset 0 1px 2px rgba(2, 8, 23, 0.24);
}

body.shu-home .calendar-date-picker::-webkit-calendar-picker-indicator,
body.shu-home input::-webkit-calendar-picker-indicator,
body.shu-page:not(.shu-home) input:focus,
body.shu-page:not(.shu-home) select:focus,
body.shu-page:not(.shu-home) textarea:focus {
    filter: invert(0.92);
}

body.shu-home .calendar-date-picker:focus,
body.shu-page:not(.shu-home) input:focus,
body.shu-page:not(.shu-home) select:focus,
body.shu-page:not(.shu-home) textarea:focus {
    border-color: rgba(20, 184, 166, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14) !important;
    outline: none !important;
}

.date-selector button,
#generateActionSuggestionsBtn,
.fortune-container button,
.calendar-container button,
.xishen-jishen-container button {
    padding: 10px 18px !important;
    background: linear-gradient(135deg, var(--xs-primary) 0%, var(--xs-primary-strong) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.2);
}

.date-selector button:hover,
#generateActionSuggestionsBtn:hover,
.fortune-container button:hover,
.calendar-container button:hover,
.xishen-jishen-container button:hover {
    filter: brightness(0.96);
}

.error {
    background: var(--xs-danger-soft) !important;
    color: var(--xs-danger) !important;
    border: 1px solid rgba(159, 18, 57, 0.16) !important;
    border-radius: 14px !important;
}

.login-prompt,
.liunian-relations,
.timeline-relations {
    background: var(--xs-warning-soft) !important;
    color: var(--xs-warning) !important;
    border: 1px solid rgba(245, 158, 11, 0.22) !important;
}

.element-item.xi,
.fortune-item.active,
.fortune-item.current.active {
    background: var(--xs-success-soft) !important;
    color: var(--xs-success) !important;
    border-color: rgba(22, 101, 52, 0.22) !important;
}

.element-item.ji {
    background: var(--xs-danger-soft) !important;
    color: var(--xs-danger) !important;
    border-color: rgba(159, 18, 57, 0.16) !important;
}

.mingge-item {
    background: var(--xs-info-soft) !important;
    color: #1d4ed8 !important;
    border-color: rgba(37, 99, 235, 0.16) !important;
}

.fortune-item,
.timeline-card,
.dayun-item,
.liunian-item {
    border-color: var(--xs-panel-border) !important;
    background: var(--xs-panel-bg-soft) !important;
}

.fortune-item:hover {
    border-color: var(--xs-primary) !important;
    background: var(--xs-primary-soft) !important;
}

.fortune-item.current,
.current-badge {
    border-color: rgba(56, 189, 248, 0.26) !important;
    background: rgba(14, 165, 233, 0.14) !important;
    color: #bae6fd !important;
}

.dayun-ganzhi,
.liunian-year,
.liuyue-month,
.streaming-cursor {
    color: var(--xs-primary) !important;
}

.user-info-card {
    padding: 16px 18px;
}

.user-info-card h3 {
    color: var(--xs-title);
}

.card-header {
    padding-bottom: 10px;
    margin-bottom: 15px;
}

body.shu-page:not(.shu-home) .form-card::before,
body.shu-page:not(.shu-home) .result-card::before,
body.shu-page:not(.shu-home) .info-card.hud-panel::before {
    opacity: 0 !important;
}

body.shu-page:not(.shu-home) #result th,
body.shu-page:not(.shu-home) .result-area th,
body.shu-page:not(.shu-home) .bazi-table th,
body.shu-page:not(.shu-home) .timeline-table th {
    background: rgba(20, 184, 166, 0.12) !important;
    color: #dffcff !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.2) !important;
    letter-spacing: 0.06em !important;
}

body.shu-page:not(.shu-home) #result td,
body.shu-page:not(.shu-home) .result-area td,
body.shu-page:not(.shu-home) .bazi-table td,
body.shu-page:not(.shu-home) .timeline-table td {
    background: rgba(15, 23, 42, 0.72) !important;
    color: var(--xs-body) !important;
    border-color: rgba(148, 163, 184, 0.08) !important;
}

body.shu-page:not(.shu-home) #result tr:hover td,
body.shu-page:not(.shu-home) .result-area tr:hover td,
body.shu-page:not(.shu-home) .bazi-table tr:hover td,
body.shu-page:not(.shu-home) .timeline-table tr:hover td {
    background: rgba(15, 118, 110, 0.06) !important;
    box-shadow: inset 3px 0 0 0 var(--xs-primary) !important;
}

body.shu-page:not(.shu-home) .timeline-current,
body.shu-page:not(.shu-home) .timeline-selected {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(56, 189, 248, 0.14)) !important;
    border-color: rgba(20, 184, 166, 0.22) !important;
    color: var(--xs-title) !important;
}

body.shu-home .shu-dashboard-head h2 {
    background: linear-gradient(90deg, #f8fafc 0%, #67e8f9 46%, #22d3ee 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

body.shu-home .shu-kpi-card:hover,
body.shu-home .shu-chart-card:hover,
body.shu-home .menu-card:hover,
body.shu-home .calendar-card:hover {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, 0.24) !important;
}

@media (max-width: 768px) {
    .date-selector {
        align-items: stretch;
    }

    .date-selector input,
    .date-selector button {
        width: 100%;
    }
}