:root {
            --bg: #0f172a; --card: #1e293b; --inner: rgba(51, 65, 85, 0.5);
            --border: #334155; --text: #cbd5e1; --text-strong: #f8fafc;
            --text-muted: #94a3b8; --color-rose: #f43f5e; --color-emerald: #10b981;
            --color-blue: #3b82f6; 
            --tag-success-bg: rgba(6, 78, 59, 0.3); --tag-success-text: #4ade80; --tag-success-border: rgba(6, 95, 70, 0.5);
            --tag-error-bg: rgba(127, 29, 29, 0.3); --tag-error-text: #f87171; --tag-error-border: rgba(153, 27, 27, 0.5);
            --tag-warn-bg: rgba(202, 138, 4, 0.15); --tag-warn-text: #facc15; --tag-warn-border: rgba(202, 138, 4, 0.4);
        }
        html[data-theme="light"] {
            --bg: #f0f2f5; --card: #f6f8fa; --inner: #e1e4e8;
            --border: #d0d7de; --text: #24292f; --text-strong: #0f1419;
            --text-muted: #57606a; --color-rose: #cf222e; --color-emerald: #1a7f37;
            --color-blue: #0969da; 
            --tag-success-bg: #dafbe1; --tag-success-text: #1a7f37; --tag-success-border: #aceebb; 
            --tag-error-bg: #ffebe9; --tag-error-text: #cf222e; --tag-error-border: #ff8182;
            --tag-warn-bg: #fff8c5; --tag-warn-text: #9a6700; --tag-warn-border: #e3b341;
        }
        body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 0;  display: flex; flex-direction: column; min-height: 100vh; }
        .container { max-width: 1000px; margin: 0 auto; padding: 1rem; width: 100%; box-sizing: border-box; }
        main { flex: 1; }
        header { border-bottom: 1px solid var(--border); padding: 0.75rem 0; margin-bottom: 1.5rem; transition: border-color 0.3s; }
        .header-inner { display: flex; justify-content: space-between; align-items: center; }
        header h1 { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text-strong); }
        .header-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; font-weight: 500; }
        .theme-toggle { background: var(--inner); border: 1px solid var(--border); color: var(--text-strong); border-radius: 0.5rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; flex-shrink: 0; border:none; }
        .theme-toggle:hover { background: var(--border); }
        .controls { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
        .select-row { display: flex; flex-direction: column; gap: 0.75rem; }
        @media (min-width: 768px) { .select-row { flex-direction: row; align-items: center; flex-wrap: wrap; } }
        select { background: var(--card); color: var(--text-strong); border: 1px solid var(--border); padding: 0.75rem; border-radius: 0.75rem; font-size: 1rem; outline: none; cursor: pointer; flex-grow: 1; }
        .btn-group { display: flex; gap: 0.5rem; width: 100%; }
        @media (min-width: 768px) { .btn-group { width: auto; flex-shrink: 0; } }
        .action-btn { background: var(--inner); color: var(--text-strong); border: 1px solid var(--border); padding: 0.75rem; border-radius: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 0.9rem; font-weight: 500; flex: 1; white-space: nowrap; }
        .action-btn:hover { background: var(--border); }
        .action-btn.copied { background: var(--color-emerald); color: white; border-color: var(--color-emerald); }
        .action-btn.active { background: var(--color-blue); color: white; border-color: var(--color-blue); }
        #map-container { display: none; height: 400px; width: 100%; border-radius: 0.75rem; border: 1px solid var(--border); z-index: 1; overflow: hidden; }
        #radar-container { display: none; height: 450px; width: 100%; border-radius: 0.75rem; border: 1px solid var(--border); z-index: 1; overflow: hidden; }
        .status-box { background: var(--inner); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 1.5rem; }
        .status-title { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); font-weight: bold; margin-bottom: 0.5rem; }
        .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
        .tag { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 0.3rem; background: var(--tag-success-bg); color: var(--tag-success-text); border: 1px solid var(--tag-success-border); }
        .tag.error { background: var(--tag-error-bg); color: var(--tag-error-text); border: 1px solid var(--tag-error-border); }
        .tag.warning { background: var(--tag-warn-bg); color: var(--tag-warn-text); border: 1px solid var(--tag-warn-border); }
        details.day-card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; }
        details.day-card > summary.day-header { display: flex; justify-content: space-between; align-items: flex-start; list-style: none; cursor: pointer; outline: none; }
        details.day-card > summary.day-header::-webkit-details-marker { display: none; }
        details.day-card > summary.day-header:hover h3 { color: var(--color-blue); }
        .day-header h3 { margin: 0; font-size: 1.25rem; margin-bottom: 0.4rem; color: var(--text-strong); display: flex; align-items: center; gap: 0.5rem; }
        .day-summary { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; display: flex; flex-wrap: wrap; gap: 12px; }
        .golden-hours { margin-top: 6px; font-size: 0.85rem; color: var(--text-muted); display: flex; gap: 12px; }
        .golden-hours span { display: flex; align-items: center; gap: 4px; }
        .solunar-hours { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 0.8rem; color: var(--text-muted); }
        .solunar-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-weight: 500; }
        .toggle-icon { font-size: 0.8rem; color: var(--text-muted); display: inline-block; }
        details.day-card[open] .toggle-icon { transform: rotate(180deg); }
        .day-card-content { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
        .grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
        @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
        .period { background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; display: flex; flex-direction: column; }
        .p-head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-strong); }
        .p-body { font-size: 0.875rem; color: var(--text); line-height: 1.5; }
        .p-body span { font-weight: 500; color: var(--text-strong); }
        .p-foot { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.75rem; }
        .day-footer-sources { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
        .day-footer-sources span.source-badge { background: var(--inner); border: 1px solid var(--border); padding: 0.15rem 0.45rem; border-radius: 0.3rem; color: var(--text-strong); font-weight: 500; }
        .good { color: var(--color-emerald) !important; font-weight: 600; }
        .bad { color: var(--color-rose) !important; font-weight: 600; }
        .site-footer { text-align: center; padding: 2rem 1rem; margin-top: auto; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.9rem; }
        .site-footer a { color: var(--color-blue); text-decoration: none; font-weight: 500; transition: color 0.2s; }
        .site-footer a:hover { color: var(--text-strong); }
        .footer-links { margin-top: 8px; font-size: 0.85rem; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
        .footer-separator { color: var(--border); }
        .btn-articles-pc { display: none; }
        .btn-articles-mob { display: none; }
        @media (min-width: 768px) {
            .btn-articles-pc {
                display: inline-flex !important;
                align-items: center;
                gap: 8px;
                padding: 8px 16px;
                background: linear-gradient(135deg, #0ea5e9, #2563eb);
                color: white;
                text-decoration: none;
                border-radius: 8px;
                font-weight: 600;
                font-size: 14px;
                font-family: system-ui, sans-serif;
                margin-right: 15px;
                box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
                transition: transform 0.2s;
            }
            .btn-articles-pc:hover { transform: translateY(-2px); }
        }
        @media (max-width: 767px) {
            .btn-articles-mob {
                display: flex !important;
                justify-content: center;
                align-items: center;
                gap: 8px;
                padding: 8px 16px;
                background: linear-gradient(135deg, #0ea5e9, #2563eb);
                color: white;
                text-decoration: none;
                border-radius: 8px;
                font-weight: 600;
                font-size: 14px;
                font-family: system-ui, sans-serif;
                margin-top: 12px;
                width: max-content;
                box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
            }
        }
@media (max-width: 768px) {
    main.container {
        margin-top: 0 !important;
    }
    .page-title {
        margin-top: 5px !important;
    }
}
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
    background: #1e293b !important;
    color: #f8fafc !important;
}