/* ===== Holiday Countdown - Modern Styles ===== */
.hc-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.hc-main { min-width: 0; }
.hc-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 18px; padding: 32px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.hc-sidebar { display: flex; flex-direction: column; gap: 20px; }

/* Countdown timer */
.hc-timer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px; }
.hc-timer-block { text-align: center; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 14px; padding: 20px 24px; min-width: 80px; box-shadow: 0 6px 20px rgba(102,126,234,0.3); }
.hc-timer-block.hours { background: linear-gradient(135deg, #f093fb, #f5576c); }
.hc-timer-block.minutes { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.hc-timer-block.seconds { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.hc-timer-num { font-size: 2.6rem; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.2); line-height: 1.1; }
.hc-timer-label { font-size: 0.75rem; color: rgba(255,255,255,0.9); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; margin-top: 4px; }
.hc-timer-sep { font-size: 2rem; font-weight: 700; color: var(--text-muted); }

/* Banner */
.hc-banner { background: linear-gradient(135deg,#f5af19,#f12711); border-radius: 14px; padding: 24px 28px; margin-bottom: 24px; display: flex; align-items: center; gap: 20px; box-shadow: 0 8px 28px rgba(245,175,25,0.35); position: relative; overflow: hidden; }
.hc-banner::before { content:"🎉"; position:absolute; top:-10px; right:-10px; font-size:5rem; opacity:0.12; }
.hc-banner-icon { font-size: 2.8rem; color:#fff; text-shadow:0 4px 12px rgba(0,0,0,0.2); animation:bounce 2s ease-in-out infinite; flex-shrink:0; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hc-banner-info { flex:1; position:relative; z-index:1; }
.hc-banner-name { font-size:1.5rem; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.3); margin-bottom:4px; }
.hc-banner-date { font-size:0.95rem; color:rgba(255,255,255,0.9); font-weight:500; }

/* Section */
.hc-section { margin-bottom: 20px; }
.hc-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.hc-section-title { font-size:1.15rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.hc-section-title i { color:var(--primary); font-size:1rem; }
.hc-reset-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 14px; background:var(--bg-soft); border:1px solid var(--border-light); border-radius:8px; font-size:12px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:all 0.15s; font-family:inherit; }
.hc-reset-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-50); }

/* Timeline */
.hc-timeline { display:flex; gap:10px; overflow-x:auto; padding:8px 4px 16px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.hc-timeline::-webkit-scrollbar { height:4px; }
.hc-timeline::-webkit-scrollbar-track { background:var(--bg-muted); border-radius:4px; }
.hc-timeline::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.hc-timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; min-width:100px; flex-shrink:0; scroll-snap-align:start; cursor:pointer; }
.hc-timeline-dot { width:10px; height:10px; border-radius:50%; background:var(--primary); border:2px solid var(--bg-card); box-shadow:0 0 0 2px var(--primary); margin-bottom:6px; flex-shrink:0; }
.hc-timeline-item:nth-child(even) .hc-timeline-dot { background:#ec4899; box-shadow:0 0 0 2px #ec4899; }
.hc-timeline-item.selected .hc-timeline-dot { background:#fbbf24; box-shadow:0 0 0 4px #fbbf24,0 0 12px rgba(251,191,36,0.5); }
.hc-timeline-body { background:var(--bg-card); border:1px solid var(--border-light); border-radius:10px; padding:10px 14px; text-align:center; min-width:80px; margin-bottom:6px; transition:all 0.2s; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.hc-timeline-item.selected .hc-timeline-body { border-color:#fbbf24; box-shadow:0 0 0 2px rgba(251,191,36,0.3); }
.hc-timeline-name { display:block; font-weight:700; color:var(--text); font-size:0.9rem; margin-bottom:4px; }
.hc-timeline-days { display:inline-block; background:linear-gradient(135deg,var(--primary),#8b5cf6); color:#fff; padding:2px 10px; border-radius:12px; font-weight:700; font-size:0.75rem; box-shadow:0 2px 6px rgba(102,126,234,0.3); }
.hc-timeline-date { font-size:0.7rem; color:var(--text-muted); white-space:nowrap; }
.hc-timeline-del { position:absolute; top:-2px; right:4px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; background:var(--bg-card); border:1px solid var(--border); border-radius:50%; color:var(--text-muted); font-size:10px; cursor:pointer; opacity:0; transition:all 0.2s; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,0.1); }
.hc-timeline-item:hover .hc-timeline-del { opacity:1; }
.hc-timeline-del:hover { background:#ef4444; border-color:#ef4444; color:#fff; }
body[data-theme="dark"] .hc-timeline-del { background:var(--bg-muted); border-color:var(--border); }
body[data-theme="dark"] .hc-timeline-del:hover { background:#ef4444; border-color:#ef4444; color:#fff; }
body[data-theme="dark"] .hc-timeline-body { background:var(--bg-card); border-color:var(--border); }
body[data-theme="dark"] .hc-timeline-item.selected .hc-timeline-body { border-color:#fbbf24; }

/* Custom form */
.hc-custom-form { display:flex; gap:10px; }
.hc-input { flex:1; padding:12px 16px; border:2px solid var(--border); border-radius:10px; font-size:0.9rem; background:var(--bg); color:var(--text); outline:none; transition:all 0.2s; font-family:inherit; }
.hc-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }
.hc-input-date { min-width:160px; }
body[data-theme="dark"] .hc-input { background:var(--bg-muted); border-color:var(--border); }
.hc-add-btn { padding:12px 20px; background:linear-gradient(135deg,var(--primary),#8b5cf6); color:#fff; border:none; border-radius:10px; font-size:0.9rem; font-weight:600; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 12px rgba(79,70,229,0.3); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:inherit; }
.hc-add-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(79,70,229,0.4); }

/* SEO */
.calc-seo { margin-top:24px; padding:20px 24px; background:var(--bg-card); border:1px solid var(--border-light); border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.calc-seo p { font-size:0.88rem; color:var(--text-secondary); line-height:1.7; margin:0; }

/* Sidebar (shared) */
.sidebar-section { background:var(--bg-card); border:1px solid var(--border-light); border-radius:16px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.sidebar-header { text-align:center; padding:28px 20px!important; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important; border-color:transparent!important; }
.sidebar-header h1 { font-size:1.35rem; font-weight:800; color:#fff; margin-bottom:6px; text-shadow:0 2px 8px rgba(0,0,0,0.2); }
.sidebar-header p { font-size:0.82rem; color:rgba(255,255,255,0.85); }
body[data-theme="dark"] .sidebar-header { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important; }
.sidebar-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.sidebar-title i { color:var(--primary); font-size:0.9rem; }
.sidebar-tools { display:flex; flex-direction:column; gap:8px; }
.sidebar-tool { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; transition:all 0.2s; text-decoration:none; background:var(--bg-soft); }
.sidebar-tool:hover { background:var(--primary-50); transform:translateX(3px); }
.sidebar-tool-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:16px; flex-shrink:0; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
.sidebar-tool-info { flex:1; min-width:0; }
.sidebar-tool-name { font-size:0.9rem; font-weight:700; color:var(--text); margin-bottom:2px; }
.sidebar-tool-desc { font-size:0.78rem; color:var(--text-muted); }
.ad-placeholder { width:300px; height:250px; flex-shrink:0; margin:0 auto; background:var(--bg-card); border:2px dashed var(--border); border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--text-muted); font-size:0.82rem; line-height:1.5; }
.ad-placeholder .ad-icon { font-size:1.8rem; color:var(--text-muted); margin-bottom:10px; opacity:0.4; }
.ad-placeholder .ad-label { font-weight:600; font-size:0.85rem; color:var(--text-muted); margin-bottom:4px; }
.ad-placeholder .ad-size { font-size:0.75rem; color:var(--text-muted); opacity:0.6; }

/* Dark mode */
body[data-theme="dark"] .sidebar-section { background:var(--bg-card); border-color:var(--border); }
body[data-theme="dark"] .sidebar-tool { background:var(--bg-muted); }
body[data-theme="dark"] .sidebar-tool:hover { background:var(--primary-50); }
body[data-theme="dark"] .ad-placeholder { background:var(--bg-card); border-color:var(--border); }
body[data-theme="dark"] .calc-seo { background:var(--bg-card); border-color:var(--border); }
body[data-theme="dark"] .hc-card { background:var(--bg-card); border-color:var(--border); }
body[data-theme="dark"] .hc-banner { box-shadow:0 8px 28px rgba(245,175,25,0.25); }

/* Responsive */
@media (max-width:1024px) { .hc-layout { grid-template-columns:1fr 280px; gap:20px; } }
@media (max-width:860px) { .hc-layout { grid-template-columns:1fr; } .hc-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:16px; } }
@media (max-width:768px) {
  .hc-card { padding:20px; }
  .hc-timer-block { padding:16px 14px; min-width:60px; }
  .hc-timer-num { font-size:1.8rem; }
  .hc-banner { flex-direction:column; text-align:center; }
  .hc-banner-name { font-size:1.2rem; }
  .hc-custom-form { flex-direction:column; }
  .hc-input-date { min-width:auto; }
  .hc-timeline-item { min-width:80px; }
}
@media (max-width:640px) { .hc-sidebar { grid-template-columns:1fr; } }