:root{
  --hrd-bg:#fffcfa;
  --hrd-primary:#FF8A65;
  --hrd-primary-strong:#F4511E;
  --hrd-secondary:#7E57C2;
  --hrd-accent:#FFD54F;
  --hrd-text:#333;
  --hrd-card:#ffffff;
  --hrd-border:#eed9d0;
}
.hrd-advent{border-radius:14px;padding:1.5rem; background:var(--hrd-bg); color:var(--hrd-text);}
.hrd-title{text-align:center; font-weight:800; letter-spacing:.3px; margin:0 0 1rem; color:var(--hrd-primary-strong);}
.hrd-card{background:var(--hrd-card); border:1px solid var(--hrd-border); border-radius:16px; padding:1rem; margin:.75rem auto; max-width:900px; box-shadow:0 4px 14px rgba(0,0,0,.06);}
.hrd-login a{color:var(--hrd-secondary); text-decoration:underline;}
.hrd-grid{display:grid; gap:.75rem; grid-template-columns:repeat(6, minmax(0,1fr)); max-width:1000px; margin:0 auto;}
@media (max-width: 1024px){ .hrd-advent .hrd-grid{grid-template-columns:repeat(4, minmax(0,1fr)) !important;} }
@media (max-width: 768px){ .hrd-advent .hrd-grid{grid-template-columns:repeat(3, minmax(0,1fr)) !important;} }
@media (max-width: 640px){ .hrd-advent .hrd-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;} }
.hrd-advent .hrd-window{background:#fff !important; border:1px solid var(--hrd-border) !important; border-radius:18px;}
.hrd-window-inner{text-align:center;display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:1rem; min-height:120px; position:relative;}
.hrd-number{font-size:1.6rem; font-weight:800;}
.hrd-open{background:var(--hrd-primary); border:none; color:white; padding:.5rem .9rem; border-radius:999px; cursor:pointer; font-weight:700;}
.hrd-open:hover{filter:brightness(0.95);}
.hrd-locked{font-size:.9rem; opacity:.7;}
.hrd-window.is-today{outline:2px dashed var(--hrd-accent); outline-offset:-6px; background:linear-gradient(180deg, rgba(255,213,79,.14), transparent);}
.hrd-window.is-past{opacity:.4;}
.hrd-window.is-past-opened{opacity:1; background:linear-gradient(180deg, rgba(126,87,194,.08), transparent); outline:2px dashed #a8dca8; outline-offset:-6px;}.hrd-window.is-future{opacity:.8}
.hrd-note{max-width:900px; margin:1rem auto; text-align:center; font-size:.9rem; opacity:.8}
.hrd-confetti{position:absolute; top:8px; font-size:18px; animation:fall 1.6s ease-in forwards; pointer-events:none;}
@keyframes fall{to{transform:translateY(90px) rotate(28deg); opacity:0;}}
:root{ --hrd-modal-offset: 12vh; }
.hrdA-modal{position:fixed; inset:0; display:none; z-index: 20000;}
.hrdA-modal.is-open{display:flex; align-items:flex-start; justify-content:center; padding:calc(env(safe-area-inset-top) + var(--hrd-modal-offset)) 1rem 4vh;}
.hrdA-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:20000;}
.hrdA-dialog{position:relative; z-index:20001; width:calc(100% - 2rem); max-width:720px; background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); max-height:calc(100vh - var(--hrd-modal-offset) - 4vh - env(safe-area-inset-top)); overflow:auto;}
.hrdA-close{position:absolute; top:.5rem; right:.5rem; border:none; background:transparent; font-size:1.8rem; line-height:1; cursor:pointer; color:#666;}
.hrdA-content{padding:1.25rem 1.25rem 1.5rem;}
.hrdA-content h3{margin:.2rem 0 .75rem; color:var(--hrd-primary);}
.hrdA-content p{margin: 20px 0px}
.hrdA-modal.is-open .hrdA-backdrop{animation:hrd-fadein .18s ease-out;}
.hrdA-modal.is-open .hrdA-dialog{animation:hrd-slide .22s ease-out;}
@keyframes hrd-fadein{from{opacity:0}to{opacity:1}}
@keyframes hrd-slide{from{transform:translateY(-10px); opacity:.98}to{transform:none; opacity:1}}
.hrdA-confetti{position:absolute; top:8px; font-size:18px; animation:hrdA-fall 1.6s ease-in forwards; pointer-events:none;}
@keyframes hrdA-fall{to{transform:translateY(90px) rotate(28deg); opacity:0;}}
@media (max-width: 640px){ .hrdA-dialog{border-radius:14px;} .hrdA-content{padding:1rem 1rem 1.25rem;} }