:root{
      --prim:#c0008f;--accent:var(--prim);--rose:#ffe8fa;--bg:#f9f9fb;--card:#fff;--txt:#212121;--muted:#666;
      --rad:10px;--gap:1.6rem;--max:1180px;--z-nav:1000;font-size:62.5%;
    }
    *,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
    body{font:1.6rem/1.55 "InterVariable",sans-serif;background:var(--bg);color:var(--txt)}
    a{color:var(--prim);text-decoration:none}a:hover{text-decoration:underline}
    img{max-width:100%;display:block;height:auto}
    .container{max-width:var(--max);margin:auto;padding:0 1.2rem}
    .visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

    /* ===== Header ===== */
    .header{background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,.05);position:sticky;top:0;z-index:var(--z-nav)}
    .header .container{display:flex;align-items:center;gap:1.6rem;height:64px}
    .logo{font-size:2.4rem;font-weight:700}
    .nav-desktop{display:flex;gap:2rem}
    .nav-desktop a[aria-current]{font-weight:700;position:relative}
    .nav-desktop a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--prim);border-radius:3px}
    .site-search{margin-left:auto;display:flex;align-items:center;gap:.6rem}
    .site-search input{padding:.8rem 1rem;border:1px solid #ccc;border-radius:var(--rad);min-width:220px}
    .site-search button{padding:.8rem 1.2rem;border:0;border-radius:var(--rad);background:var(--prim);color:#fff;font-weight:600}
    .burger,.search-open{display:none;background:none;border:0;font-size:3rem;line-height:1}
    @media(max-width:768px){
      .nav-desktop,.site-search{display:none}
      .burger,.search-open{display:block;margin-left:auto}
      .search-open{margin-left:.8rem}
    }

    /* ===== Off‑canvas nav & search overlay ===== */
    .offcanvas,.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);
      backdrop-filter:blur(4px);display:flex;justify-content:flex-end;visibility:hidden;
      opacity:0;transition:.3s;z-index:var(--z-nav)}
    .offcanvas.open,.search-overlay.open{visibility:visible;opacity:1}
    .offcanvas__panel{width:280px;max-width:80%;background:var(--card);padding:2.4rem 1.8rem;
      transform:translateX(100%);transition:.3s}
    .offcanvas.open .offcanvas__panel{transform:translateX(0)}
    .offcanvas__close,.search-overlay .close{background:none;border:0;font-size:2.6rem;margin-left:auto}
    .off-nav{margin-top:3rem;display:flex;flex-direction:column;gap:1.6rem}
    .off-nav a[aria-current]{font-weight:700}
    .search-overlay form{margin:auto;background:var(--card);padding:2rem;border-radius:var(--rad);
      width:min(90%,420px);display:flex;gap:.8rem}
    .search-overlay input{flex:1;padding:1rem;border:1px solid #ccc;border-radius:var(--rad)}
    .search-overlay button[type="submit"]{padding:1rem 1.4rem;border:0;border-radius:var(--rad);
      background:var(--prim);color:#fff;font-weight:600}

    /* ===== Breadcrumbs ===== */
    .breadcrumbs{background:var(--card);border-bottom:1px solid #eee}
    .breadcrumbs .container{display:flex;align-items:center;font-size:1.4rem;padding:.8rem 1.2rem;gap:.4rem;color:var(--muted)}
    .breadcrumbs a{color:inherit}

    /* ===== Hero ===== */
    .hero{padding:3.6rem 1.2rem;text-align:center;background:linear-gradient(135deg,#ffe8fa 0%,#fff 100%)}
    .hero h1{font-size:3.6rem;margin-bottom:.6rem}
    .hero p{color:var(--muted)}
.hero img{margin:2rem auto;border-radius:var(--rad);max-height:280px;width:auto}

/* ===== Horoscope extras ===== */
.hero img.circle{border-radius:50%;width:120px;height:120px;background:var(--prim);margin:2rem auto}
.range-nav{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1.6rem 0}
.range-nav a{padding:.6rem 1.4rem;border:1px solid var(--prim);border-radius:var(--rad);font-weight:600}
.range-nav a.active{background:var(--prim);color:#fff}
.trio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.trio-grid article h3{font-size:1.9rem;margin-bottom:.6rem}
.progress{margin-top:1rem;background:#eee;border-radius:4px;height:6px}
.progress span{display:block;height:6px;border-radius:4px 0 0 4px;background:var(--prim);width:0}
.lucky{font-weight:600;letter-spacing:.1rem}
.color-day{margin-top:.4rem}
.sign-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:1rem
}
@media(min-width:1000px){
  .sign-grid{grid-template-columns:repeat(6,1fr)}
}
.sign-card{display:flex;flex-direction:column;align-items:center;padding:1rem;border:1px solid #eee;border-radius:var(--rad);background:var(--bg)}
.sign-card img{width:48px;height:48px;margin-bottom:.6rem}
.sign-card span{font-weight:600;font-size:1.5rem}

    /* ===== Layout ===== */
    .wrapper{display:grid;grid-template-columns:1fr 300px;gap:var(--gap);max-width:var(--max);
      margin:auto;padding:var(--gap) 1.2rem}
    @media(max-width:1000px){.wrapper{grid-template-columns:1fr}}
    .card{background:var(--card);padding:1.8rem;border-radius:var(--rad);box-shadow:0 1px 4px rgba(0,0,0,.05)}
    @media(prefers-reduced-motion:no-preference){
      .card{transition:transform .25s}
      .card:hover{transform:translateY(-4px)}
    }
    .card h2{font-size:2rem;margin-bottom:1rem}

    /* ===== Dream list grid ===== */
    .dreams-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap)}
    .dreams-grid a{display:block;padding:1rem;border:1px solid #eee;border-radius:var(--rad);background:var(--bg);font-weight:600}
    .dreams-grid a:hover{border-color:var(--prim)}

    /* ===== Books grid ===== */
    .books-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);max-width:var(--max);margin:auto;padding:var(--gap) 1.2rem}
    .book{background:var(--card);border-radius:var(--rad);box-shadow:0 1px 4px rgba(0,0,0,.05);display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.6rem}
    .book img{width:100%;height:auto;border-radius:var(--rad) var(--rad) 0 0;margin-bottom:1rem}
    .book h2{font-size:1.8rem;margin-bottom:.6rem}
    .book a.more{margin-top:.8rem;font-weight:600}
    @media(prefers-reduced-motion:no-preference){
      .book{transition:transform .25s}
      .book:hover{transform:translateY(-4px)}
    }

    /* ===== Interpretations accordion ===== */
    .interpretations details{border:1px solid #ddd;border-radius:var(--rad);margin-top:1rem}
    .interpretations summary{cursor:pointer;padding:1rem 1.4rem;font-weight:600;list-style:none}
    .interpretations summary::-webkit-details-marker{display:none}
    .interpretations details[open]{border-color:var(--prim)}
    .interpretations summary::after{content:"⯈";float:right;transition:.2s}
    .interpretations details[open] summary::after{transform:rotate(90deg)}
    .interpretations .panel{padding:1rem 1.4rem;border-top:1px solid #eee;line-height:1.6}
    .interpretations .panel p{margin-bottom:1rem}
    #toggle-all{margin-top:1.2rem;padding:.8rem 1.2rem;border:0;border-radius:var(--rad);
      background:var(--prim);color:#fff;font-weight:600;cursor:pointer}

    /* ===== Full‑width article ===== */
    .content-block{grid-column:1/-1;background:var(--card);padding:2.4rem;border-radius:var(--rad);
      box-shadow:0 1px 4px rgba(0,0,0,.05)}
    .content-block h2{font-size:2.4rem;margin-bottom:1.2rem}
    .content-block p{margin-bottom:1rem;line-height:1.7;color:var(--muted)}
    /* About dream book section */
    /* On book detail pages the block should occupy only the main column */
    .about-block{grid-column:1/span 1;background:var(--card);padding:2.4rem;border-radius:var(--rad);box-shadow:0 1px 4px rgba(0,0,0,.05)}
    .about-block h2{font-size:2.4rem;margin-bottom:1.2rem}
    .about-block p{margin-bottom:1rem;line-height:1.7;color:var(--muted)}
    blockquote{margin:1.2rem 0;border-left:4px solid var(--prim);padding-left:1rem;color:var(--muted);font-style:italic}

    /* ===== Sidebar ===== */
    aside section+section{margin-top:var(--gap)}
    aside h3{font-size:1.8rem;margin-bottom:1rem}
    ul,ol{margin-left:1.6rem;line-height:1.65}

    /* ===== Footer ===== */
    footer{background:var(--card);margin-top:4rem;padding:3rem 0;color:var(--txt)}
    .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
    footer h3{font-size:1.8rem;margin-bottom:1rem}
    footer ul{list-style:none;line-height:1.8}
footer ul li{margin-bottom:.4rem}
.foot-note{margin-top:2rem;font-size:1.4rem;color:var(--muted);text-align:center}

/* ===== Search results ===== */
.result-card{background:var(--card);border-radius:var(--rad);box-shadow:0 2px 8px rgba(0,0,0,.05);padding:1.6rem;display:flex;gap:1.4rem}
.result-card:hover{transform:translateY(-4px)}
.result-card .icon{flex:0 0 48px;height:48px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:2rem}
.result-card h2{font-size:1.9rem;margin-bottom:.4rem}
.result-card p{color:var(--muted);line-height:1.55;margin-bottom:.6rem}
.highlight{background:rgba(192,0,143,.15);padding:0 .2rem;border-radius:4px}
.meta{font-size:1.3rem;color:var(--muted)}
.pagination{display:flex;justify-content:center;gap:.6rem;margin-top:3rem;flex-wrap:wrap}
.pagination a,.pagination span{padding:.7rem 1.2rem;border-radius:var(--rad);border:1px solid #ddd;font-weight:600}
.pagination a{background:var(--card)}
.pagination a:hover{background:var(--prim);color:#fff;border-color:var(--prim)}
.pagination .current{background:var(--prim);color:#fff;border-color:var(--prim);cursor:default}
.sidebar .box{background:var(--card);border-radius:var(--rad);box-shadow:0 4px 12px rgba(0,0,0,.05);padding:var(--gap) 1.6rem;margin-bottom:var(--gap)}
.sidebar h3{font-size:1.9rem;margin-bottom:1rem}
.btn-all{display:inline-block;margin-top:1.2rem;padding:.8rem 1.6rem;border-radius:var(--rad);background:var(--prim);color:#fff;font-weight:600}