:root {--bg:#0f172a;--card:#111827;--muted:#94a3b8;--text:#e5e7eb;--primary:#22d3ee;--primary-2:#60a5fa;--danger:#f43f5e;--ok:#34d399;--border:rgba(255,255,255,0.08);--shadow:0 10px 30px rgba(0,0,0,0.25);--radius:16px;--radius-sm:10px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--transition:all 0.3s ease;--calendar-gap:10px;}
* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:radial-gradient(1200px 600px at 10% -10%,rgba(34,211,238,0.12),transparent 60%),radial-gradient(800px 400px at 90% 0%,rgba(96,165,250,0.10),transparent 60%),var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.upload-btn {background:linear-gradient(135deg,rgba(34,211,238,0.18),rgba(96,165,250,0.18));color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-weight:500;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:var(--space-xs);}
.upload-btn:hover {background:linear-gradient(135deg,rgba(34,211,238,0.25),rgba(96,165,250,0.25));border-color:var(--primary);transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,211,238,0.15);}
.upload-btn:disabled {opacity:0.6;cursor:not-allowed;transform:none;}
.tool-title {font-size:1.5rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:var(--space-sm);margin:0;line-height:28px;}
.tool-title .icon {font-size:1.75rem;}
.tool-header {background:#0f172a;border-bottom:1px solid var(--border);padding:var(--space-md) var(--space-lg);box-shadow:var(--shadow);position:sticky;top:0;z-index:100;left:0;right:0;width:auto;}
.tool-header-center {display:flex;justify-content:center;align-items:center;}
.tool-footer {background:#0f172a;border-top:1px solid var(--border);padding:var(--space-lg);margin-top:var(--space-lg);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);}
.tool-footer-content {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;}
.tool-footer-content p {color:var(--muted);font-size:0.875rem;margin:0;text-align:center;}
.tool-container {display:flex;flex-direction:column;min-height:100vh;width:100%;max-width:1400px;margin:0 auto;padding:0;box-sizing:border-box;}
.tool-container {max-width:none;}
.tool-footer {margin-left:0;margin-right:0;width:100%;}
.tool-footer-content {flex-direction:column;gap:12px;}
.tool-footer-content p {color:var(--muted);font-size:0.9rem;}
.footer-links {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;color:var(--muted);font-size:0.9rem;}
.footer-links a {color:var(--muted);text-decoration:none;transition:var(--transition);padding:2px 4px;}
.footer-links a:hover {color:var(--text);}
.footer-links span {margin:0 12px;opacity:0.65;}
.tool-header-inner {display:flex;align-items:center;justify-content:center;position:relative;}
.title-link {color:inherit;text-decoration:none;}
.header-actions {position:absolute;right:0;top:50%;transform:translateY(-50%);}
.header-link {color:var(--muted);text-decoration:none;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;transition:var(--transition);background:rgba(255,255,255,0.03);}
.header-link:hover {color:var(--text);border-color:var(--primary);box-shadow:0 4px 12px rgba(34,211,238,0.15);}
.main-content {flex:1;width:100%;max-width:1400px;margin:0 auto;padding:var(--space-lg);display:grid;grid-template-columns:minmax(0,1.4fr) 340px;gap:var(--space-lg);align-items:start;}
.workspace,.sidebar {min-width:0;}
.calendar-shell,.sidebar {display:flex;flex-direction:column;gap:var(--space-lg);}
.hero-card,.calendar-card,.panel-card,.info-card {background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.hero-card {padding:clamp(18px,2.2vw,28px);display:flex;justify-content:space-between;gap:var(--space-lg);align-items:center;}
.eyebrow {margin:0 0 8px;font-size:0.85rem;font-weight:700;letter-spacing:0.08em;color:var(--primary);text-transform:uppercase;}
.hero-title {margin:0;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.35;}
.hero-desc {margin:12px 0 0;color:var(--muted);line-height:1.7;max-width:760px;}
.hero-actions {display:flex;gap:var(--space-md);flex-wrap:wrap;justify-content:flex-end;}
.calendar-card {padding:clamp(16px,2vw,24px);}
.legend-bar {display:flex;align-items:center;gap:14px;margin-bottom:var(--space-lg);padding:12px 14px;border:1px solid rgba(255,255,255,0.06);background:rgba(15,23,42,0.45);border-radius:14px;overflow-x:auto;}
.legend-bar-title {flex:0 0 auto;color:rgba(229,231,235,0.96);font-size:0.9rem;font-weight:800;white-space:nowrap;}
.toolbar {display:flex;justify-content:space-between;gap:var(--space-lg);align-items:center;margin-bottom:var(--space-lg);flex-wrap:wrap;}
.nav-group {display:flex;align-items:center;gap:var(--space-md);}
.icon-btn {width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,0.04);color:var(--text);font-size:1.5rem;cursor:pointer;transition:var(--transition);}
.icon-btn:hover {border-color:var(--primary);background:rgba(34,211,238,0.12);transform:translateY(-1px);}
.toolbar-title {display:flex;flex-direction:column;gap:4px;}
.month-title {font-size:1.3rem;font-weight:800;}
.month-subtitle {color:var(--muted);font-size:0.92rem;}
.jump-form {display:flex;align-items:end;gap:var(--space-md);flex-wrap:wrap;}
.field-inline {display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:0.9rem;}
.field-inline span {color:rgba(229,231,235,0.88);}
.text-input,.select-input {min-width:110px;padding:10px 12px;background:rgba(15,23,42,0.75);color:var(--text);border:1px solid rgba(255,255,255,0.08);border-radius:12px;outline:none;transition:var(--transition);}
.text-input:focus,.select-input:focus {border-color:rgba(34,211,238,0.55);box-shadow:0 0 0 3px rgba(34,211,238,0.12);}
.jump-btn {height:42px;}
.weekdays {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--calendar-gap);margin-bottom:var(--calendar-gap);}
.weekdays span {text-align:center;padding:10px 0;color:var(--muted);font-weight:700;}
.calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--calendar-gap);}
.day-cell {min-height:104px;padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,0.06);background:rgba(15,23,42,0.62);color:var(--text);cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;gap:10px;}
.day-cell:hover {border-color:rgba(34,211,238,0.4);transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,0.2);}
.day-cell.is-outside {opacity:0.5;}
.day-cell.is-weekend .solar-day {color:#f8c471;}
.day-cell.is-today {border-color:rgba(52,211,153,0.6);box-shadow:inset 0 0 0 1px rgba(52,211,153,0.45);}
.day-cell.is-selected {background:linear-gradient(180deg,rgba(34,211,238,0.16),rgba(15,23,42,0.74));border-color:rgba(34,211,238,0.75);}
.day-cell.is-holiday .holiday-tag {display:inline-flex;}
.day-cell.is-makeup-workday {border-color:rgba(251,191,36,0.5);box-shadow:inset 0 0 0 1px rgba(251,191,36,0.2);}
.day-cell.is-makeup-workday .holiday-tag {display:inline-flex;background:rgba(251,191,36,0.16);color:#fde68a;}
.day-top {width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.solar-day {font-size:1.25rem;font-weight:800;line-height:1;}
.holiday-tag {display:none;align-items:center;justify-content:center;min-width:38px;height:22px;padding:0 8px;border-radius:999px;background:rgba(244,63,94,0.16);color:#fecdd3;font-size:0.72rem;font-weight:700;}
.day-bottom {width:100%;display:flex;flex-direction:column;gap:6px;}
.lunar-day {color:var(--muted);font-size:0.86rem;}
.day-note {color:rgba(229,231,235,0.9);font-size:0.8rem;line-height:1.35;}
.panel-card {padding:var(--space-lg);}
.panel-head {display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);}
.panel-title {margin:0 0 var(--space-md);font-size:1.05rem;font-weight:700;color:var(--text);}
.panel-head .panel-title {margin-bottom:0;}
.selected-chip {border:1px solid rgba(34,211,238,0.35);background:rgba(34,211,238,0.1);color:var(--primary);border-radius:999px;padding:4px 10px;font-size:0.8rem;font-weight:700;}
.api-status {border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:var(--muted);border-radius:999px;padding:4px 10px;font-size:0.78rem;font-weight:700;white-space:nowrap;}
.api-status.is-loading {color:#93c5fd;border-color:rgba(147,197,253,0.3);background:rgba(59,130,246,0.12);}
.api-status.is-live {color:#86efac;border-color:rgba(134,239,172,0.3);background:rgba(34,197,94,0.12);}
.api-status.is-cache {color:#c4b5fd;border-color:rgba(196,181,253,0.3);background:rgba(139,92,246,0.12);}
.api-status.is-fallback {color:#fcd34d;border-color:rgba(252,211,77,0.3);background:rgba(245,158,11,0.12);}
.detail-date {margin-top:var(--space-md);font-size:1.18rem;font-weight:800;line-height:1.5;}
.detail-lunar {margin-top:7px;color:var(--muted);line-height:1.6;}
.detail-list {margin-top:var(--space-lg);display:grid;gap:3px;}
.detail-item {display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:10px 0;border-bottom:1px dashed rgba(255,255,255,0.08);}
.detail-item:last-child {border-bottom:none;padding-bottom:0;}
.detail-label {color:var(--muted);}
.detail-value {text-align:right;color:rgba(229,231,235,0.96);font-weight:600;}
.summary-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.summary-item {border:1px solid rgba(255,255,255,0.06);background:rgba(15,23,42,0.45);border-radius:14px;padding:14px;}
.summary-label {color:var(--muted);font-size:0.86rem;}
.summary-value {margin-top:8px;font-size:1.2rem;font-weight:800;}
.legend-list {display:flex;flex-direction:column;gap:12px;}
.legend-list-inline {flex:1;min-width:max-content;flex-direction:row;align-items:center;gap:18px;flex-wrap:nowrap;}
.legend-item {display:flex;align-items:center;gap:10px;color:rgba(229,231,235,0.92);white-space:nowrap;}
.legend-dot {width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);}
.dot-today {background:rgba(52,211,153,0.45);}
.dot-selected {background:rgba(34,211,238,0.55);}
.dot-holiday {background:rgba(244,63,94,0.45);}
.dot-makeup {background:rgba(251,191,36,0.45);}
.dot-other {background:rgba(148,163,184,0.35);}
.info-content {width:100%;max-width:1400px;margin:0 auto;padding:0 var(--space-lg) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-lg);}
.info-card {padding:var(--space-lg);}
.info-title {margin:0 0 var(--space-md);font-size:1.1rem;font-weight:800;color:var(--text);padding-bottom:var(--space-sm);border-bottom:2px solid var(--primary);}
.info-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);}
.info-item {border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.12);border-radius:var(--radius-sm);padding:var(--space-md);}
.info-item-title {font-weight:800;color:rgba(229,231,235,0.92);margin-bottom:6px;}
.info-item-desc {color:var(--muted);line-height:1.6;}
.steps {margin:0;padding-left:22px;color:rgba(229,231,235,0.9);line-height:1.8;}
.qa {display:flex;flex-direction:column;gap:var(--space-md);}
.qa-item {border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.12);border-radius:var(--radius-sm);padding:var(--space-md);}
.qa-q {font-weight:800;color:rgba(229,231,235,0.92);margin-bottom:6px;}
.qa-a {color:var(--muted);line-height:1.7;}
@media (max-width:1100px) {.main-content {grid-template-columns:1fr;}
.header-actions {display:none;}
.summary-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:760px) {.main-content,.info-content {padding-left:var(--space-md);padding-right:var(--space-md);}
.hero-card {flex-direction:column;align-items:flex-start;}
.toolbar {align-items:stretch;}
.jump-form {width:100%;}
.legend-bar {align-items:flex-start;flex-direction:column;}
.legend-list-inline {width:100%;gap:14px;}
.field-inline {flex:1 1 140px;}
.text-input,.select-input {width:100%;}
.day-cell {min-height:92px;padding:8px;}
.summary-grid,.info-grid {grid-template-columns:1fr;}
}
@media (max-width:560px) {:root {--calendar-gap:6px;}
.toolbar-title {min-width:0;}
.legend-bar {padding:10px 12px;margin-bottom:var(--space-md);}
.legend-bar-title {font-size:0.85rem;}
.legend-list-inline {gap:12px;}
.month-title {font-size:1.12rem;}
.weekdays span {font-size:0.85rem;padding:8px 0;}
.day-cell {min-height:78px;border-radius:12px;}
.solar-day {font-size:1.05rem;}
.lunar-day,.day-note {font-size:0.72rem;}
.holiday-tag {min-width:32px;height:20px;padding:0 6px;font-size:0.68rem;}
}