:root{
  --bg:#111; --fg:#fff; --muted:#d0d0d0;
  --accent:#fff; --accent-ink:#111;
  --outline:rgba(255,255,255,.28);
  --radius:12px;
  --anim:.28s cubic-bezier(.2,.7,.3,1);
  --z-banner:5;
  --today-bg: rgba(255,255,255,.10);
  --today-glow: rgba(255,255,255,.22);
  --today-stroke: rgba(255,255,255,.55);
}
body{
  margin:0; background:#fff; color:#111;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.holiday-banner{
  position:relative; z-index:var(--z-banner);
  background:var(--bg); color:var(--fg);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.holiday-banner:not(.collapsed){padding:16px 0;}

.hb-panel{
  max-width:1440px; margin:0 auto; padding:0 16px;
  overflow:hidden; height:auto; opacity:1;
  transition:height var(--anim), opacity var(--anim);
  will-change:height,opacity;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.holiday-banner.collapsed .hb-panel{height:0 !important; opacity:0}

.hb-inner{display:flex; flex-direction:column; gap:12px}

.hb-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.hb-title{
  display:flex; align-items:center; gap:8px; margin:0;
  font-weight:500; font-size:18px; letter-spacing:-.01em; line-height:1.15;
}
.hb-title svg{width:20px; height:20px; flex:0 0 20px}

.hb-actions{display:flex; gap:10px; flex:0 0 auto; flex-wrap:nowrap}

.hb-btn{
  appearance:none; border:2px solid transparent; cursor:pointer;
  padding:10px 16px; border-radius:var(--radius);
  font-weight:500; font-size:14px; line-height:1;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease,
    opacity .15s ease;
}
.hb-btn:hover{z-index:4;transform:scale(1.05); box-shadow:0 6px 14px rgba(0,0,0,.25);border-color: #fff;}
.hb-btn:active{transform:scale(.95); box-shadow:0 2px 6px rgba(0,0,0,.2)}
.hb-btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--outline)}
.hb-btn--ghost{background:transparent; color:#ffffff; border-color:#636363}
.hb-btn--ghost:hover{color:#fff}

/*  
Если надо убрать деление на две ячейки в строке, то поменять параметр в .hb-grid "repeat(2,minmax(320px,1fr))"
2 - две ячейки в строке
1 - одна ячейка в строке
*/
.hb-grid{display:grid; gap:14px; margin-top:4px; grid-template-columns:repeat(1,minmax(320px,1fr))}
.hb-card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:12px 14px;

  /*  Выравнивание по центру  */
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hb-card h4{margin:0 0 8px; font-size:15px; color:#fff; letter-spacing:-.01em; font-weight:300}
.hb-card h3{margin:0 0 8px; font-size:15px; color:#fff; letter-spacing:-.01em; font-weight:500}
.hb-card ul{margin:0; padding-left:0px}
.hb-card li{margin:5px 0; font-size:14px; line-height:1.45}

.hb-card li.is-today {
  position: relative;
  background: rgba(255,255,255,0.10);
  border: none;
  border-radius: 6px;
  margin-left: -6px;
  margin-right: 10px;
  padding: 3px 6px;
  box-shadow: 0 0 10px rgba(255,255,255,0.25);
}

.today-badge{display:none}

.hb-mini{
  display:none;
  align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:34px; padding:6px 10px;
  color:#eaeaea; background:#101010; border-top:1px solid rgba(255,255,255,.08);
  cursor:pointer; user-select:none; font-size:clamp(13px,2.2vw,15px); font-weight:500;
  border-radius:0; box-shadow:none;
}
.holiday-banner.collapsed .hb-mini{display:flex}

.hb-mini .dot{
  position:relative;
  width:clamp(6px,1vw,8px);
  height:clamp(6px,1vw,8px);
  border-radius:50%;
  background:#fff;
  transform:none;
  box-shadow:none;
  will-change:auto;
}
.hb-mini .dot::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:clamp(26px,1vw,32px);
  height:clamp(26px,1vw,32px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,1) 0%, rgba(2555,255,255,0) 60%);
  filter:blur(6px);
  opacity:.9;
  animation:glow 1.6s ease-in-out infinite;
  pointer-events:none;
}

.hb-card ul li a{font-weight:400;color:#8bb4dd;outline:none!important;text-decoration-line:none;-webkit-transition:color .2s ease, border-color .2s ease;-o-transition:color .2s ease, border-color .2s ease;transition:color .2s ease, border-color .2s ease;}
.hb-card ul li a:hover{color:#ffffff;text-decoration-line: underline;}
.hb-card ul li a:visited{color:#a58bdd;}

@keyframes glow{
  0%{opacity:.7; filter:blur(4px)}
  50%{opacity:1; filter:blur(8px)}
  100%{opacity:.7; filter:blur(4px)}
}

@media (prefers-reduced-motion:reduce){
  .hb-mini .dot{animation:none}
}

.hb-mini .label{letter-spacing:-.01em}

@media (max-width:980px){
  .hb-grid{grid-template-columns:1fr}
  .hb-actions{flex-wrap:nowrap}
  .hb-btn{width:auto}
}

@media (prefers-reduced-motion:reduce){
  .hb-panel,.hb-mini,.hb-btn{transition:none}
}

.hb-actions--bottom{display:none}

@media (max-width:980px){
  .hb-actions{display:none}
  .hb-actions--bottom{display:flex; justify-content:center; margin-top:12px}
  .hb-actions--bottom .hb-btn{width:100%; max-width:260px}
}

.tap-icon {
  display:inline-block;
  animation:bounce 1.2s infinite;
}
@keyframes bounce {
  0%,100% {transform:translateY(0);}
  50% {transform:translateY(4px);}
}