/* ============================================================
   Stitch "Celestial Scholar" — Gold / Parchment BaZi Theme
   Dynamic CSS classes generated by app.js at runtime.
   Static layout handled by Tailwind CSS CDN in index.html.
   ============================================================ */

/* ===== Design Tokens ===== */
:root {
    /* --- Stitch Celestial Scholar palette --- */
    --st-primary: #735c00;
    --st-primary-container: #D4AF37;
    --st-background: #fbfaee;
    --st-surface: #fbfaee;
    --st-surface-low: #f5f4e8;
    --st-surface-container: #efeee3;
    --st-surface-high: #e9e9dd;
    --st-surface-highest: #e4e3d7;
    --st-surface-lowest: #ffffff;
    --st-on-surface: #1b1c15;
    --st-on-surface-variant: #4d4635;
    --st-outline: #7f7663;
    --st-outline-variant: #d0c5af;
    --st-secondary: #096c4b;
    --st-tertiary: #b02a3e;
    --st-error: #ba1a1a;
    --st-inverse-surface: #303129;

    /* --- Legacy aliases for inline styles in app.js --- */
    --color-muted: #4d4635;
    --color-success: #096c4b;

    /* --- Five Elements --- */
    --color-wood: #22c55e;
    --color-fire: #ef4444;
    --color-earth: #a16207;
    --color-metal: #f59e0b;
    --color-water: #3b82f6;

    /* --- Spacing --- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* --- Radii --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* --- Shadows (warm-tinted) --- */
    --shadow-sm: 0 1px 3px rgba(75, 60, 20, 0.06);
    --shadow-md: 0 4px 12px rgba(75, 60, 20, 0.08);
    --shadow-lg: 0 8px 24px rgba(75, 60, 20, 0.12);
    --shadow-card: 0 2px 8px rgba(75, 60, 20, 0.06);

    /* --- Fonts --- */
    --font-headline: "Noto Serif TC", serif;
    --font-body: "Manrope", sans-serif;
}

/* ===== 1. Display Toggles ===== */

.chart-container {
    display: none;
    animation: fadeInUp 0.4s ease;
}

.chart-container.show {
    display: block;
}

.error-msg {
    color: var(--st-error);
    text-align: center;
    padding: 14px;
    display: none;
    background: #fef2f2;
    border: 1px solid #f5c5c5;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    font-size: 0.92rem;
    font-family: var(--font-body);
}

.error-msg.show {
    display: block;
    animation: fadeInUp 0.3s ease;
}

.loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--st-on-surface-variant);
    display: none;
    font-family: var(--font-body);
}

.loading.show {
    display: block;
}

.loading::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--st-outline-variant);
    border-top-color: var(--st-primary-container);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: var(--space-sm);
}

/* ===== 2. Day Master Info ===== */

.day-master-info {
    text-align: center;
    margin-bottom: var(--space-lg);
    padding: 16px 20px;
    background: var(--st-surface-low);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.day-master-info .label {
    font-size: 0.85rem;
    color: var(--st-on-surface-variant);
    font-family: var(--font-body);
}

.day-master-info .value {
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0 var(--space-sm);
    font-family: var(--font-headline);
    color: var(--st-on-surface);
}

/* ===== 3. Five Element Colors ===== */

.wx-木 { color: var(--color-wood); }
.wx-火 { color: var(--color-fire); }
.wx-土 { color: var(--color-earth); }
.wx-金 { color: var(--color-metal); }
.wx-水 { color: var(--color-water); }

/* ===== 4. Character Display ===== */

.char-large {
    font-size: 4.5rem;
    font-weight: bold;
    display: block;
    line-height: 1.2;
    cursor: help;
    transition: transform 0.15s;
    font-family: var(--font-headline);
}

.char-large:hover {
    transform: scale(1.1);
}

.char-sub {
    font-size: 0.75rem;
    color: var(--st-on-surface-variant);
    display: block;
    font-family: var(--font-body);
}

.canggan-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.canggan-item {
    font-size: 0.85rem;
    line-height: 1.4;
    font-family: var(--font-body);
}

.canggan-char {
    font-weight: 600;
    cursor: help;
}

.canggan-shishen {
    font-size: 0.75rem;
    color: var(--st-on-surface-variant);
    cursor: help;
}

.changsheng {
    font-size: 0.9rem;
    font-family: var(--font-body);
}

/* ===== 5. Shishen Tags ===== */

.shishen-tag {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--st-surface-low);
    display: inline-block;
    cursor: help;
    transition: background 0.15s;
    font-family: var(--font-body);
    color: var(--st-on-surface);
}

.shishen-tag:hover {
    background: var(--st-surface-container);
}

/* ===== 6. Shensha Tags ===== */

.shensha-tag {
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    margin: 1px;
    cursor: help;
    transition: transform 0.15s;
    font-family: var(--font-body);
}

.shensha-tag:hover {
    transform: scale(1.08);
}

.shensha-good {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.shensha-bad {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.shensha-empty {
    color: var(--st-on-surface-variant);
    font-size: 0.85rem;
}

/* ===== 7. Dayun / Liunian Selectors & Buttons ===== */

.dayun-section {
    margin-bottom: var(--space-md);
}

.selector-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.selector-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.selector-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--st-on-surface-variant);
    white-space: nowrap;
    width: 36px;
    flex-shrink: 0;
    font-family: var(--font-body);
}

.dayun-selector {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.dayun-selector::-webkit-scrollbar { display: none; }

.dayun-btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 13px;
    background: var(--st-surface-lowest);
    border: 1.5px solid var(--st-outline-variant);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
}

.dayun-btn:hover {
    background: var(--st-surface-low);
    border-color: var(--st-primary-container);
}

.dayun-btn.active {
    background: #faf5e0;
    border-color: var(--st-primary-container);
    box-shadow: 0 0 0 1px var(--st-primary-container);
}

.dayun-btn-pillar {
    font-size: 1rem;
    font-weight: bold;
    color: var(--st-on-surface);
    font-family: var(--font-headline);
}

.dayun-btn-age {
    font-size: 0.65rem;
    color: var(--st-on-surface-variant);
}

.dayun-sep {
    color: var(--st-outline-variant);
    margin: 0 var(--space-xs);
}

.dayun-meta {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    font-size: 0.88rem;
    color: var(--st-on-surface-variant);
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--st-surface-lowest);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
}

.liunian-selector {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.liunian-selector::-webkit-scrollbar { display: none; }

.liunian-btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 11px;
    background: var(--st-surface-lowest);
    border: 1.5px solid var(--st-outline-variant);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
}

.liunian-btn:hover {
    background: var(--st-surface-low);
    border-color: var(--st-primary-container);
}

.liunian-btn.active {
    background: #faf5e0;
    border-color: var(--st-primary-container);
    box-shadow: 0 0 0 1px var(--st-primary-container);
}

.liunian-btn-pillar {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--st-on-surface);
    font-family: var(--font-headline);
}

.liunian-btn-info {
    font-size: 0.6rem;
    color: var(--st-on-surface-variant);
}

/* ===== 進階分析 Button ===== */

.dayun-selector,
.liunian-selector {
    flex: 1;
    min-width: 0;
}

.adv-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--st-primary);
    background: transparent;
    border: 1.5px solid var(--st-primary-container);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.adv-btn:hover {
    background: var(--st-primary-container);
    color: var(--st-on-primary-container);
}

/* ===== 進階分析 右側固定側邊欄 ===== */

.adv-modal-overlay {
    display: none;
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    z-index: 500;
}

.adv-modal-overlay.open {
    display: block;
}

.adv-modal {
    width: 320px;
    height: 100%;
    background: var(--st-surface);
    border-left: 1px solid var(--st-outline-variant);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.adv-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--st-outline-variant);
    flex-shrink: 0;
}

.adv-modal-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--st-on-surface);
    font-family: var(--font-body);
    line-height: 1.4;
}

.adv-modal-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--st-on-surface-variant);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

.adv-modal-close:hover {
    background: var(--st-surface-low);
}

.adv-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ===== 進階分析 Accordion Panels ===== */

.adv-panel {
    border: 1px solid var(--st-outline-variant);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.adv-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    background: var(--st-surface-lowest);
    user-select: none;
    transition: background 0.15s;
}

.adv-panel-header:hover {
    background: var(--st-surface-low);
}

.adv-panel-label {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-headline);
    width: 24px;
    text-align: center;
}

.adv-panel-name {
    font-size: 0.78rem;
    color: var(--st-on-surface-variant);
    font-family: var(--font-body);
    flex: 1;
}

.adv-panel-count {
    font-size: 0.72rem;
    font-family: var(--font-body);
    color: var(--st-on-surface-variant);
    padding: 2px 8px;
    background: var(--st-surface-container, var(--st-surface-low));
    border-radius: 10px;
}

.adv-panel-count.has-match {
    background: var(--st-primary-container);
    color: var(--st-on-primary-container);
    font-weight: 600;
}

.adv-panel-toggle {
    font-size: 0.7rem;
    color: var(--st-on-surface-variant);
    transition: transform 0.2s;
    margin-left: auto;
}

.adv-panel.open .adv-panel-toggle {
    transform: rotate(180deg);
}

.adv-panel-body {
    display: none;
    padding: 10px 14px;
    border-top: 1px solid var(--st-outline-variant);
    background: var(--st-surface);
}

.adv-panel.open .adv-panel-body {
    display: block;
}

.adv-empty {
    font-size: 0.8rem;
    color: var(--st-on-surface-variant);
    font-family: var(--font-body);
    padding: 4px 0;
}

.adv-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 0;
    border-bottom: 1px solid var(--st-outline-variant);
}

.adv-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.adv-item-type {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--st-on-surface-variant);
    font-family: var(--font-body);
}

.adv-item-desc {
    font-size: 0.85rem;
    color: var(--st-on-surface);
    font-family: var(--font-body);
    font-weight: 500;
}

.adv-item-note {
    font-size: 0.75rem;
    color: var(--st-on-surface-variant);
    font-family: var(--font-body);
}

.adv-item-partial .adv-item-desc {
    color: var(--st-on-surface-variant);
}

/* 顏色主題 */
.adv-color-green  { color: #2e7d32; }
.adv-color-red    { color: #c62828; }
.adv-color-orange { color: #e65100; }
.adv-color-purple { color: #6a1b9a; }
.adv-color-blue   { color: #1565c0; }

/* ===== 7b. Save / Submit Buttons ===== */

.btn-save {
    display: none;
    padding: 9px 18px;
    background: var(--st-secondary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save:hover {
    background: #057a54;
    transform: translateY(-1px);
}

/* ===== 8. Save Items ===== */

.saves-empty {
    color: var(--st-on-surface-variant);
    font-size: 0.85rem;
    text-align: center;
    padding: 20px 12px;
    font-family: var(--font-body);
}

.save-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--st-outline-variant);
    gap: 12px;
    transition: background 0.15s;
}

.save-item:hover {
    background: var(--st-surface-low);
}

.save-item:last-child {
    border-bottom: none;
}

.save-name {
    flex: 1;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--st-primary);
    font-weight: 500;
    transition: color 0.15s;
    font-family: var(--font-body);
}

.save-name:hover {
    color: #5a4800;
    text-decoration: underline;
}

.save-time {
    font-size: 0.75rem;
    color: var(--st-on-surface-variant);
    white-space: nowrap;
}

.save-delete {
    background: none;
    border: none;
    color: var(--st-error);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.save-delete:hover {
    background: #fef2f2;
}

/* ===== 9. Tooltip ===== */

.tooltip {
    display: none;
    position: fixed;
    z-index: 1000;
    max-width: 340px;
    background: var(--st-inverse-surface);
    color: #ffffff;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    line-height: 1.5;
    box-shadow: 0 8px 30px rgba(48, 49, 41, 0.35);
    pointer-events: none;
    backdrop-filter: blur(10px);
    font-family: var(--font-body);
}

.tip-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 4px;
    font-family: var(--font-headline);
}

.tip-short {
    font-size: 0.8rem;
    color: #c5c4b8;
    margin-bottom: 8px;
}

.tip-detail {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #e4e3d7;
}

/* ===== 10. Analysis Section ===== */

.analysis-section {
    margin-top: var(--space-lg);
}

.analysis-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--st-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--st-outline-variant);
    font-family: var(--font-headline);
}

.analysis-card {
    background: var(--st-surface-lowest);
    border: none;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s;
    box-shadow: var(--shadow-card);
}

.analysis-card:hover {
    box-shadow: var(--shadow-md);
}

.analysis-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.analysis-card-header:hover {
    background: var(--st-surface-low);
}

.analysis-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--st-primary);
    font-family: var(--font-headline);
}

.analysis-card-summary {
    font-size: 0.82rem;
    color: var(--st-on-surface-variant);
    margin-left: 12px;
    flex: 1;
    text-align: right;
    font-family: var(--font-body);
}

.analysis-card-toggle {
    margin-left: var(--space-sm);
    font-size: 0.8rem;
    color: var(--st-on-surface-variant);
    transition: transform 0.3s;
}

.analysis-card.open .analysis-card-toggle {
    transform: rotate(180deg);
}

.analysis-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.analysis-card.open .analysis-card-body {
    max-height: 2000px;
}

.analysis-card-content {
    padding: 0 18px 18px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--st-on-surface);
    font-family: var(--font-body);
}

/* ===== 11. Five Element Bar Chart ===== */

.wx-bar-container {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.wx-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wx-bar-label {
    width: 24px;
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem;
    font-family: var(--font-headline);
}

.wx-bar-track {
    flex: 1;
    height: 22px;
    background: var(--st-surface-container);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.wx-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s ease;
    min-width: 2px;
}

.wx-bar-fill.wx-bg-木 { background: linear-gradient(90deg, #22c55e, #4ade80); }
.wx-bar-fill.wx-bg-火 { background: linear-gradient(90deg, #ef4444, #f87171); }
.wx-bar-fill.wx-bg-土 { background: linear-gradient(90deg, #a16207, #d4a24e); }
.wx-bar-fill.wx-bg-金 { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.wx-bar-fill.wx-bg-水 { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

.wx-bar-value {
    width: 70px;
    font-size: 0.8rem;
    color: var(--st-on-surface-variant);
    text-align: right;
    font-family: var(--font-body);
}

.wx-tag-strong {
    display: inline-block;
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 3px;
    background: #faf5e0;
    color: var(--st-primary);
    margin-left: 4px;
}

.wx-tag-missing {
    display: inline-block;
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 3px;
    background: #fef2f2;
    color: #991b1b;
    margin-left: 4px;
}

/* ===== 12. Strength Compare ===== */

.strength-compare {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    padding: 12px 14px;
    background: var(--st-surface-low);
    border-radius: var(--radius-sm);
}

.strength-bar {
    flex: 1;
    display: flex;
    height: 26px;
    border-radius: 5px;
    overflow: hidden;
}

.strength-bar-support {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.strength-bar-drain {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.strength-result {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.88rem;
    font-family: var(--font-body);
}

.strength-strong {
    background: #dcfce7;
    color: #166534;
}

.strength-weak {
    background: #fee2e2;
    color: #991b1b;
}

/* ===== 13. Shishen Groups ===== */

.shishen-group-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.shishen-group-item {
    flex: 1;
    min-width: 100px;
    padding: 10px 12px;
    background: var(--st-surface-low);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: all 0.2s;
}

.shishen-group-item:hover {
    background: var(--st-surface-container);
}

.shishen-group-name {
    font-size: 0.8rem;
    color: var(--st-on-surface-variant);
    margin-bottom: 3px;
    font-family: var(--font-body);
}

.shishen-group-count {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--st-on-surface);
    font-family: var(--font-headline);
}

.shishen-group-item.dominant {
    background: #faf5e0;
    border: 1px solid var(--st-primary-container);
}

/* ===== 14. Shensha Interpretation Groups ===== */

.shensha-group-ji {
    border-left: 3px solid #22c55e;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #f0fdf4;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.shensha-group-zhong {
    border-left: 3px solid var(--st-primary-container);
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #faf5e0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.shensha-group-xiong {
    border-left: 3px solid var(--st-tertiary);
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #fef2f2;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.shensha-group-label {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.shensha-interp-item {
    font-size: 0.84rem;
    color: var(--st-on-surface);
    margin-bottom: 3px;
}

/* ===== 15. Canggan Analysis ===== */

.canggan-analysis-row {
    display: flex;
    gap: 12px;
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.canggan-analysis-pillar {
    flex: 1;
    min-width: 120px;
    padding: 10px 12px;
    background: var(--st-surface-low);
    border-radius: var(--radius-sm);
}

.canggan-analysis-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--st-on-surface-variant);
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.canggan-analysis-item {
    font-size: 0.85rem;
    margin-bottom: 3px;
}

.canggan-touchu {
    color: var(--st-secondary);
    font-weight: 600;
}

.canggan-touchu::after {
    content: " [透]";
    font-size: 0.7rem;
    color: var(--st-secondary);
}

/* ===== 16. Dayun Card ===== */

.dayun-current-info {
    padding: 12px 16px;
    background: linear-gradient(135deg, #faf5e0, #f5f0d6);
    border: none;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

.dayun-analysis-text {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--st-on-surface);
    font-family: var(--font-body);
}

/* ===== 17. Misc ===== */

.analysis-interp {
    margin-top: var(--space-sm);
    padding: 10px 14px;
    background: var(--st-surface-low);
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    line-height: 1.7;
    color: var(--st-on-surface);
    font-family: var(--font-body);
}

.yongshen-box {
    margin-top: var(--space-sm);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
}

.yongshen-favorable {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    margin-bottom: 6px;
}

.yongshen-unfavorable {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.yongshen-label {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 2px;
    font-family: var(--font-body);
}

.yongshen-value {
    font-size: 0.84rem;
    font-family: var(--font-body);
}

/* ===== 18. Auth Button Overrides (Gold Theme Nav) ===== */

.auth-btn {
    padding: 7px 18px;
    border: 1px solid var(--st-primary-container);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--st-primary-container);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
}

.auth-btn:hover {
    background: var(--st-primary-container);
    color: #ffffff;
    border-color: var(--st-primary-container);
}

.auth-user {
    color: var(--st-primary-container);
    font-family: var(--font-body);
}

/* ===== 19. Responsive ===== */

@media (max-width: 640px) {
    .char-large {
        font-size: 3rem;
    }

    .dayun-btn {
        padding: 5px 9px;
    }

    .dayun-btn-pillar {
        font-size: 0.85rem;
    }

    .liunian-btn {
        padding: 4px 8px;
    }

    .liunian-btn-pillar {
        font-size: 0.8rem;
    }

    .tooltip {
        max-width: 280px;
    }

    .analysis-card-header {
        flex-wrap: wrap;
    }

    .analysis-card-summary {
        text-align: left;
        margin-left: 0;
        margin-top: 4px;
        width: 100%;
    }

    .shishen-group-row {
        flex-direction: column;
    }

    .canggan-analysis-row {
        flex-direction: column;
    }

    .selector-row {
        gap: var(--space-xs);
    }

    .day-master-info {
        padding: 12px 14px;
    }

    .day-master-info .value {
        font-size: 1.1rem;
    }
}

/* ===== 20. Keyframes ===== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ===== 通知鈴鐺 ===== */
.notification-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    color: var(--st-on-surface-variant, #4d4635);
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.notification-bell:hover {
    background: var(--st-surface-container, #efeee3);
}
.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: var(--st-error, #ba1a1a);
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* ===== 通知頁面 ===== */
.notif-item {
    background: var(--st-surface-container-low, #f5f4e8);
    border: 1px solid var(--st-outline-variant, #d0c5af);
    border-radius: 12px;
    padding: 16px 20px;
    transition: background 0.15s;
}
.notif-item.unread {
    background: #fff;
    border-left: 3px solid var(--st-primary, #735c00);
}
.notif-sender {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 6px;
}
.notif-sender.system {
    background: #e0f2fe;
    color: #0369a1;
}
.notif-sender.admin {
    background: #fef3c7;
    color: #92400e;
}

/* ================================================================
   深色神祕版 (Dark Theme) — 來自 Stitch "八字首頁 - 深色神祕版"
   切換方式：<html data-theme="dark">
   ================================================================ */

html[data-theme="dark"] {
    /* --- Primary color tokens --- */
    --st-primary: #f2ca50;
    --st-primary-container: #d4af37;
    /* --- Surface hierarchy --- */
    --st-background: #0f141b;
    --st-surface: #0f141b;
    --st-surface-lowest: #090f15;
    --st-surface-low: #171c23;
    --st-surface-container: #1b2027;
    --st-surface-high: #252a32;
    --st-surface-highest: #30353d;
    /* --- Text --- */
    --st-on-surface: #dee2ec;
    --st-on-surface-variant: #d0c5af;
    /* --- Borders --- */
    --st-outline: #99907c;
    --st-outline-variant: #4d4635;
    /* --- Accent colors --- */
    --st-secondary: #cdbdff;
    --st-tertiary: #e3cd8c;
    --st-error: #ffb4ab;
    --st-inverse-surface: #dee2ec;
    /* --- Shadows (darker) --- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Body: 星空放射漸層 */
html[data-theme="dark"] body {
    background-image:
        radial-gradient(circle at top right, rgba(82, 3, 213, 0.12), transparent 60%),
        radial-gradient(circle at bottom left, rgba(242, 202, 80, 0.06), transparent 60%) !important;
}

/* ---- Tailwind surface class overrides ---- */
html[data-theme="dark"] .bg-surface               { background-color: #0f141b !important; }
html[data-theme="dark"] .bg-surface-container-lowest { background-color: #0d1219 !important; }
html[data-theme="dark"] .bg-surface-container-low  { background-color: #171c23 !important; }
html[data-theme="dark"] .bg-surface-container      { background-color: #1b2027 !important; }
html[data-theme="dark"] .bg-surface-container-high { background-color: #252a32 !important; }
html[data-theme="dark"] .bg-surface-container-highest { background-color: #30353d !important; }

/* Opacity surface variants */
html[data-theme="dark"] .bg-surface-container-low\/80 { background-color: rgba(23, 28, 35, 0.8) !important; }
html[data-theme="dark"] .bg-primary-container\/5  { background-color: rgba(212, 175, 55, 0.05) !important; }
html[data-theme="dark"] .bg-primary-container\/10 { background-color: rgba(212, 175, 55, 0.10) !important; }
html[data-theme="dark"] .bg-primary-container\/15 { background-color: rgba(212, 175, 55, 0.15) !important; }
html[data-theme="dark"] .bg-primary-container\/20 { background-color: rgba(212, 175, 55, 0.20) !important; }

/* ---- Tailwind text overrides ---- */
html[data-theme="dark"] .text-on-surface          { color: #dee2ec !important; }
html[data-theme="dark"] .text-on-surface-variant   { color: #d0c5af !important; }
html[data-theme="dark"] .text-primary              { color: #f2ca50 !important; }
html[data-theme="dark"] .text-primary-container    { color: #d4af37 !important; }

/* ---- Tailwind border overrides ---- */
html[data-theme="dark"] .border-outline-variant    { border-color: #4d4635 !important; }
html[data-theme="dark"] .border-outline-variant\/10 { border-color: rgba(77, 70, 53, 0.10) !important; }
html[data-theme="dark"] .border-outline-variant\/20 { border-color: rgba(77, 70, 53, 0.20) !important; }
html[data-theme="dark"] .border-outline-variant\/30 { border-color: rgba(77, 70, 53, 0.30) !important; }
html[data-theme="dark"] .border-primary\/20        { border-color: rgba(242, 202, 80, 0.20) !important; }
html[data-theme="dark"] .border-primary\/30        { border-color: rgba(242, 202, 80, 0.30) !important; }
html[data-theme="dark"] .border-primary            { border-color: #f2ca50 !important; }

/* Focus border */
html[data-theme="dark"] .focus\:border-primary:focus { border-color: #f2ca50 !important; }

/* ---- Stitch component hardcoded color overrides ---- */

/* Error message */
html[data-theme="dark"] .error-msg {
    background: rgba(255, 180, 171, 0.1) !important;
    border-color: rgba(255, 180, 171, 0.3) !important;
    color: #ffb4ab !important;
}

/* Shensha tags */
html[data-theme="dark"] .shensha-good {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
}
html[data-theme="dark"] .shensha-bad {
    background: rgba(255, 180, 171, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(252, 165, 165, 0.35) !important;
}

/* Wu Xing (五行) tags */
html[data-theme="dark"] .wx-tag-strong {
    background: rgba(212, 175, 55, 0.15) !important;
    color: #f2ca50 !important;
}
html[data-theme="dark"] .wx-tag-missing {
    background: rgba(255, 180, 171, 0.12) !important;
    color: #fca5a5 !important;
}

/* Dayun / Liunian active state */
html[data-theme="dark"] .dayun-btn.active {
    background: rgba(212, 175, 55, 0.12) !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 1px #d4af37 !important;
}
html[data-theme="dark"] .liunian-btn.active {
    background: rgba(212, 175, 55, 0.12) !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 0 1px #d4af37 !important;
}

/* Dayun current info card */
html[data-theme="dark"] .dayun-current-info {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.05)) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: none !important;
}

/* Shishen group dominant */
html[data-theme="dark"] .shishen-group-item.dominant {
    background: rgba(212, 175, 55, 0.10) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

/* Shensha interpretation groups */
html[data-theme="dark"] .shensha-group-ji {
    background: rgba(34, 197, 94, 0.08) !important;
    border-left-color: #4ade80 !important;
}
html[data-theme="dark"] .shensha-group-zhong {
    background: rgba(212, 175, 55, 0.08) !important;
    border-left-color: #d4af37 !important;
}
html[data-theme="dark"] .shensha-group-xiong {
    background: rgba(227, 205, 140, 0.08) !important;
    border-left-color: #e3cd8c !important;
}

/* Strength compare */
html[data-theme="dark"] .strength-strong {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}
html[data-theme="dark"] .strength-weak {
    background: rgba(255, 180, 171, 0.15) !important;
    color: #fca5a5 !important;
}

/* Yongshen boxes */
html[data-theme="dark"] .yongshen-favorable {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}
html[data-theme="dark"] .yongshen-unfavorable {
    background: rgba(255, 180, 171, 0.08) !important;
    border-color: rgba(252, 165, 165, 0.3) !important;
}

/* Save delete hover */
html[data-theme="dark"] .save-delete:hover {
    background: rgba(255, 180, 171, 0.1) !important;
}

/* Notification items */
html[data-theme="dark"] .notif-item {
    background: #1b2027 !important;
    border-color: #4d4635 !important;
}
html[data-theme="dark"] .notif-item.unread {
    background: #252a32 !important;
    border-left-color: #f2ca50 !important;
}
html[data-theme="dark"] .notif-sender.system {
    background: rgba(147, 197, 253, 0.15) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .notif-sender.admin {
    background: rgba(212, 175, 55, 0.15) !important;
    color: #f2ca50 !important;
}

/* Analysis adv color overrides (lighten for dark bg) */
html[data-theme="dark"] .adv-color-green  { color: #4ade80 !important; }
html[data-theme="dark"] .adv-color-red    { color: #fca5a5 !important; }
html[data-theme="dark"] .adv-color-orange { color: #fdba74 !important; }
html[data-theme="dark"] .adv-color-purple { color: #c4b5fd !important; }
html[data-theme="dark"] .adv-color-blue   { color: #93c5fd !important; }

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--st-on-surface-variant, #4d4635);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--st-surface-container, #efeee3);
    color: var(--st-on-surface, #1b1c15);
}

/* ================================================================
   深色視覺豐富化：Glassmorphism + 星空 + Gradient Mesh + Grain
   ================================================================ */

/* === 1. 宇宙星空背景 + Nebula 漸層網格 === */
html[data-theme="dark"] body {
    background-color: #080c12 !important;
    background-image:
        /* 星空 SVG 平鋪 */
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22600%22%3E%3Ccircle%20cx%3D%22656%22%20cy%3D%22116%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22756%22%20cy%3D%22106%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22434%22%20cy%3D%2234%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%22576%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22227%22%20cy%3D%22461%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%22165%22%20cy%3D%22434%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%22346%22%20cy%3D%22106%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22620%22%20cy%3D%22272%22%20r%3D%221.3%22%20fill%3D%22white%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%22389%22%20cy%3D%2282%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%22372%22%20cy%3D%22593%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%22793%22%20cy%3D%22298%22%20r%3D%222.1%22%20fill%3D%22white%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%22391%22%20cy%3D%22286%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%22216%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%2275%22%20cy%3D%22177%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22278%22%20cy%3D%22572%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%2259%22%20cy%3D%22236%22%20r%3D%221.3%22%20fill%3D%22white%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%2269%22%20cy%3D%22218%22%20r%3D%221.9%22%20fill%3D%22white%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%22219%22%20cy%3D%22513%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22273%22%20cy%3D%22144%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22440%22%20r%3D%221.1%22%20fill%3D%22white%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22143%22%20cy%3D%22523%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%22158%22%20cy%3D%22165%22%20r%3D%221.1%22%20fill%3D%22white%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22392%22%20cy%3D%22481%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%22119%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22658%22%20cy%3D%22350%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22741%22%20cy%3D%22271%22%20r%3D%222.0%22%20fill%3D%22white%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22307%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22384%22%20cy%3D%22167%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%222%22%20cy%3D%22333%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22316%22%20cy%3D%22247%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%2289%22%20cy%3D%22499%22%20r%3D%221.4%22%20fill%3D%22white%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22133%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22542%22%20cy%3D%22435%22%20r%3D%222.2%22%20fill%3D%22white%22%20opacity%3D%220.7%22%2F%3E%3Ccircle%20cx%3D%22708%22%20cy%3D%22207%22%20r%3D%221.1%22%20fill%3D%22white%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%22384%22%20cy%3D%22450%22%20r%3D%221.1%22%20fill%3D%22white%22%20opacity%3D%220.4%22%2F%3E%3Ccircle%20cx%3D%2267%22%20cy%3D%22348%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2274%22%20r%3D%220.9%22%20fill%3D%22white%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%22340%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%22221%22%20cy%3D%22554%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22486%22%20cy%3D%22250%22%20r%3D%221.3%22%20fill%3D%22white%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22101%22%20cy%3D%22443%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%2257%22%20cy%3D%22102%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.73%22%2F%3E%3Ccircle%20cx%3D%22113%22%20cy%3D%22256%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22189%22%20cy%3D%22287%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22565%22%20cy%3D%22102%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%2297%22%20cy%3D%22244%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22412%22%20cy%3D%2262%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22467%22%20cy%3D%22294%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.85%22%2F%3E%3Ccircle%20cx%3D%22571%22%20cy%3D%22500%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%22595%22%20cy%3D%22557%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%22490%22%20cy%3D%22516%22%20r%3D%221.9%22%20fill%3D%22white%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%22522%22%20cy%3D%2284%22%20r%3D%220.9%22%20fill%3D%22white%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22415%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.4%22%2F%3E%3Ccircle%20cx%3D%22610%22%20cy%3D%2242%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%22537%22%20cy%3D%22325%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%22246%22%20cy%3D%22273%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22325%22%20cy%3D%2276%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2277%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22359%22%20cy%3D%2272%22%20r%3D%221.1%22%20fill%3D%22white%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22558%22%20cy%3D%22311%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%22569%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22139%22%20cy%3D%22272%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22290%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22651%22%20cy%3D%22272%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%2254%22%20cy%3D%2296%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%22343%22%20cy%3D%22135%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.69%22%2F%3E%3Ccircle%20cx%3D%22566%22%20cy%3D%22439%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%22709%22%20cy%3D%22154%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%22153%22%20cy%3D%22442%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%22368%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22575%22%20cy%3D%22418%22%20r%3D%222.0%22%20fill%3D%22white%22%20opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22244%22%20cy%3D%22168%22%20r%3D%222.1%22%20fill%3D%22white%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%2227%22%20cy%3D%22185%22%20r%3D%221.1%22%20fill%3D%22white%22%20opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22687%22%20cy%3D%22256%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%2241%22%20cy%3D%22483%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22314%22%20cy%3D%22235%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22287%22%20cy%3D%2273%22%20r%3D%221.7%22%20fill%3D%22white%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22411%22%20cy%3D%22551%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22269%22%20cy%3D%22184%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%22612%22%20cy%3D%22446%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22525%22%20cy%3D%22120%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.4%22%2F%3E%3Ccircle%20cx%3D%22727%22%20cy%3D%22448%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%22738%22%20cy%3D%22203%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%22340%22%20cy%3D%22323%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22521%22%20cy%3D%22318%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%22569%22%20cy%3D%22132%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22768%22%20cy%3D%22180%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%222%22%20cy%3D%22313%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%22672%22%20cy%3D%22331%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22486%22%20cy%3D%22175%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%22636%22%20cy%3D%22345%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22319%22%20cy%3D%22232%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%22488%22%20cy%3D%2276%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%22737%22%20cy%3D%22395%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%22111%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.73%22%2F%3E%3Ccircle%20cx%3D%22714%22%20cy%3D%22532%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.8%22%2F%3E%3Ccircle%20cx%3D%22126%22%20cy%3D%22469%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%22574%22%20cy%3D%22326%22%20r%3D%222.1%22%20fill%3D%22white%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%22738%22%20cy%3D%22518%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22164%22%20cy%3D%22488%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%22285%22%20cy%3D%22535%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22732%22%20cy%3D%22294%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%22143%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22221%22%20cy%3D%2267%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%2265%22%20cy%3D%22213%22%20r%3D%221.1%22%20fill%3D%22white%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%22714%22%20cy%3D%2222%22%20r%3D%221.3%22%20fill%3D%22white%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22362%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22431%22%20cy%3D%22553%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.61%22%2F%3E%3Ccircle%20cx%3D%22227%22%20cy%3D%22501%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%22346%22%20cy%3D%22416%22%20r%3D%221.3%22%20fill%3D%22white%22%20opacity%3D%220.8%22%2F%3E%3Ccircle%20cx%3D%22639%22%20cy%3D%22548%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2287%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%2253%22%20cy%3D%22268%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22781%22%20cy%3D%22390%22%20r%3D%220.8%22%20fill%3D%22white%22%20opacity%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%2285%22%20cy%3D%22483%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.85%22%2F%3E%3Ccircle%20cx%3D%22360%22%20cy%3D%22231%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22774%22%20cy%3D%2233%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.26%22%2F%3E%3Ccircle%20cx%3D%22158%22%20cy%3D%22246%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22225%22%20cy%3D%22478%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22623%22%20cy%3D%22119%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.44%22%2F%3E%3C%2Fsvg%3E"),
        /* Nebula 紫色光暈（右上） */
        radial-gradient(ellipse 85% 65% at 78% -8%, rgba(72, 0, 210, 0.22) 0%, transparent 55%),
        /* 金色微光（左下） */
        radial-gradient(ellipse 65% 55% at -8% 95%, rgba(212, 175, 55, 0.11) 0%, transparent 50%),
        /* 藍色深空（右下） */
        radial-gradient(ellipse 50% 40% at 98% 80%, rgba(10, 70, 180, 0.15) 0%, transparent 45%),
        /* 紫羅蘭（左上角） */
        radial-gradient(ellipse 40% 35% at 5% 5%, rgba(90, 10, 160, 0.13) 0%, transparent 40%),
        /* 中央暗化（讓星空不平均） */
        radial-gradient(ellipse 70% 50% at 45% 60%, rgba(8, 12, 18, 0.4) 0%, transparent 70%) !important;
    background-size: 800px 600px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
    animation: dark-nebula-pulse 18s ease-in-out infinite alternate !important;
}

@keyframes dark-nebula-pulse {
    0%   { background-size: 800px 600px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
    50%  { background-size: 800px 600px, 105% 108%, 102% 105%, 98% 103%, 103% 99%, 100% 100%; }
    100% { background-size: 800px 600px, 102% 103%, 98% 102%, 105% 107%, 97% 102%, 100% 100%; }
}

/* === 2. Grain 雜訊層（紙質感） === */
html[data-theme="dark"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* === 3. Glassmorphism 卡片 === */
html[data-theme="dark"] .bg-surface-container-lowest {
    background: rgba(8, 13, 22, 0.72) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    border: 1px solid rgba(212, 175, 55, 0.18) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(212, 175, 55, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important;
}

/* 輕量 glass：次要容器 */
html[data-theme="dark"] .bg-surface-container {
    background: rgba(27, 32, 39, 0.80) !important;
}
html[data-theme="dark"] .bg-surface-container-low {
    background: rgba(23, 28, 35, 0.75) !important;
}

/* === 4. 導航列 Glass Bar === */
html[data-theme="dark"] nav,
html[data-theme="dark"] .bg-surface-container-low\/80 {
    background: rgba(8, 12, 18, 0.82) !important;
    border-bottom-color: rgba(212, 175, 55, 0.15) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(212, 175, 55, 0.1) !important;
}

/* === 5. 金色光暈 — 主要 CTA 按鈕 === */
html[data-theme="dark"] .bg-gradient-to-r {
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.35), 0 1px 4px rgba(0,0,0,0.4) !important;
    transition: box-shadow 0.2s !important;
}
html[data-theme="dark"] .bg-gradient-to-r:hover {
    box-shadow: 0 6px 28px rgba(212, 175, 55, 0.50), 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* === 6. 品牌文字金色發光 === */
html[data-theme="dark"] nav a.font-headline,
html[data-theme="dark"] nav a[class*="font-headline"] {
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.4) !important;
}

/* === 7. 輸入框 dark glass === */
html[data-theme="dark"] .bg-surface-container-low.rounded-lg,
html[data-theme="dark"] input.bg-surface-container-low,
html[data-theme="dark"] select.bg-surface-container-low {
    background: rgba(23, 28, 35, 0.85) !important;
    border-color: rgba(77, 70, 53, 0.5) !important;
    color: #dee2ec !important;
}

/* === 8. 星星閃爍動畫（選取幾個背景星點） === */
@keyframes star-twinkle {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}