body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; background: #f8f8f8; color: #333; }

main { flex: 1; display: flex; flex-direction: column; position: relative; }

.top-bar { background: #fff; padding: 15px 20px; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid #e8e8e8; }
.logo-img { height: 60px; margin-right: 15px; }

.search-input-wrapper { display: flex; align-items: center; gap: 15px; max-width: 900px; width: 100%; position: relative; }
.search-input-wrapper input { flex: 1; padding: 10px 15px; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; }
.error-message { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #e74c3c; font-size: 12px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s; white-space: nowrap; }
.error-message.show { opacity: 1; }

.progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: #f0f0f0; z-index: 2000; opacity: 0; transition: opacity 0.3s; }
.progress-bar.visible { opacity: 1; }
.progress-fill { height: 100%; background: #4a90e2; transition: width 0.4s ease-out; width: 0%; }

.toggle-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; white-space: nowrap; }

.toggle-checkbox { display: none; }

.toggle-slider { position: relative; width: 48px; height: 26px; background: #ddd; border-radius: 13px; transition: background 0.3s; }

.toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.3s; }

body.no-transition .toggle-slider,
body.no-transition .toggle-slider::after { transition: none !important; }

.toggle-checkbox:checked + .toggle-slider { background: #4a90e2; }

.toggle-checkbox:checked + .toggle-slider::after { transform: translateX(22px); }

.toggle-text { font-size: 12px; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.saved-info { background: #fff; padding: 5px 20px; text-align: center; font-size: 13px; color: #333; border-bottom: 1px solid #e8e8e8; }
.saved-info strong { font-weight: 600; }
.saved-info a { color: #0066cc; text-decoration: none; }

.years-timeline { background: transparent; padding: 10px 20px 5px 20px; position: relative; overflow: hidden; }
.years-timeline.loaded { border-bottom: 2px solid #e8e8e8; background: #fff; }
.years-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 5px; display: flex; }
.years-scroll::-webkit-scrollbar { height: 8px; }
.years-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.years-container { display: flex; gap: 0; min-width: min-content; align-items: flex-end; height: 90px; padding: 5px 20px; margin: 0 auto; }

.year-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 5px 6px; transition: 0.2s; position: relative; gap: 6px; min-width: 60px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.year-item:hover { background: rgba(0,0,0,0.03); }
.year-item.active { background: #d4e9ff; }

.year-bars { display: flex; gap: 1px; height: 60px; align-items: flex-end; justify-content: center; }
.month-bar { width: 3px; background: #333; transition: 0.2s; min-height: 2px; }
.year-item.active .month-bar { background: #1a73e8; }

.year-label { font-size: 12px; font-weight: 700; color: #333; white-space: nowrap; }
.year-count { font-size: 10px; color: #999; }

.calendar-wrapper { flex: 1; padding: 15px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(308px, 1fr)); gap: 15px; align-content: start; justify-content: center; background: transparent; width: 100%; max-width: 1320px; margin: 0 auto; }

.month-card { background: #fff; border: 1px solid #e8e8e8; padding: 8px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.month-name { text-align: center; font-weight: 700; font-size: 11px; color: #666; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.4px; }

.days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.day-cell { height: 31px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #919191; position: relative; z-index: 1; }

.snap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: default; position: relative; font-size: 9px; color: #000; text-decoration: none; }
.snap[data-count="1"] { cursor: pointer; }
a.snap { color: #000; }
.snap::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #090; transition: 0.2s; box-shadow: 0 0 2px rgba(0,0,0,0.3); opacity: 0.6; z-index: -1; }
.snap:hover::before { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 6px rgba(0,0,0,0.4); }

.snap.size-1::before { width: 22px; height: 22px; }
.snap.size-2::before { width: 35px; height: 35px; }
.snap.size-3::before { width: 48px; height: 48px; }
.snap.size-4::before { width: 62px; height: 62px; }
.snap.size-5::before { width: 75px; height: 75px; }

.c-200::before { background: #4a90e2; }
.c-3xx::before { background: #4a4; }
.c-err::before { background: #e74c3c; }

.snap.viewed::before { background: #999 !important; opacity: 0.4; }

body.gray-duplicates .snap.has-duplicates::before {
    background: #ccc !important;
    box-shadow: none !important;
    opacity: 0.3 !important;
    transform: translate(-50%, -50%) scale(1);
}

body.gray-duplicates .snap.has-duplicates:hover::before {
    background: #bbb !important;
    transform: translate(-50%, -50%) scale(1.3);
}

.tooltip-item.duplicate { opacity: 0.5; }
.tooltip-item.duplicate a { font-style: italic; }

.tooltip { position: fixed; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.08); padding: 6px; z-index: 1000; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(-5px); max-height: 220px; overflow-y: auto; }
.tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.tooltip::-webkit-scrollbar { width: 5px; }
.tooltip::-webkit-scrollbar-track { background: transparent; }
.tooltip::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
.tooltip::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

.tooltip-item { padding: 0; margin: 1px 0; border-radius: 4px; transition: transform 0.12s ease; }
.tooltip-item:hover { transform: translateX(1px); }
.tooltip-item a { color: #333; text-decoration: none; font-family: 'Consolas', 'Monaco', monospace; font-size: 12.5px; display: block; padding: 7px 9px; border-radius: 4px; transition: background 0.12s ease; }
.tooltip-item a:hover { background: rgba(0,0,0,0.05); }

.tooltip-item.status-200 a { color: #1a73e8; }
.tooltip-item.status-3xx a { color: #188038; }
.tooltip-item.status-err a { color: #d93025; }