*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

    :root{
      --font-ui:  -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
      --font-title:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
      --bg:      #09080b;
      --g0:      rgba(255,252,248,0.052);
      --gb:      rgba(255,252,248,0.088);
      --c0:      rgba(255,252,248,0.036);
      --cb:      rgba(255,252,248,0.066);
      --gold:    #c4a55a;
      --goldg:   rgba(196,165,90,0.22);
      --t1:      rgba(255,252,248,0.93);
      --t2:      rgba(255,252,248,0.50);
      --t3:      rgba(255,252,248,0.26);
      --glass-panel:
        linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.03)),
        linear-gradient(135deg,rgba(196,165,90,.11),transparent 38%,rgba(255,255,255,.045));
      --glass-panel-soft:
        linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.022)),
        linear-gradient(135deg,rgba(196,165,90,.08),transparent 40%,rgba(255,255,255,.03));
      --glass-chip:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.028)),
        linear-gradient(135deg,rgba(196,165,90,.06),transparent 42%,rgba(255,255,255,.028));
      --glass-border: rgba(255,252,248,.096);
      --glass-border-soft: rgba(255,252,248,.08);
      --glass-inner: rgba(255,255,255,.10);
      --glass-inner-soft: rgba(255,255,255,.07);
      --glass-shadow-strong: 0 18px 46px rgba(0,0,0,.34),inset 0 1px 0 var(--glass-inner);
      --glass-shadow-soft: 0 10px 26px rgba(0,0,0,.24),inset 0 1px 0 var(--glass-inner-soft);
      --glass-shadow-hover: 0 16px 36px rgba(0,0,0,.26),inset 0 1px 0 var(--glass-inner);
      --glass-overlay: rgba(7,6,10,.52);
    }

    /* ── LIGHT / DAY MODE ────────────────────────── */
    html[data-theme="light"]{
      --bg:      #f5f0e8;
      --g0:      rgba(20,12,4,0.045);
      --gb:      rgba(20,12,4,0.110);
      --c0:      rgba(20,12,4,0.030);
      --cb:      rgba(20,12,4,0.085);
      --gold:    #a8821e;
      --goldg:   rgba(168,130,30,0.18);
      --t1:      rgba(20,12,4,0.88);
      --t2:      rgba(20,12,4,0.54);
      --t3:      rgba(20,12,4,0.34);
      --glass-panel:
        radial-gradient(circle at 18% 0%,rgba(255,255,255,.95),transparent 38%),
        radial-gradient(circle at 86% 14%,rgba(255,230,165,.36),transparent 34%),
        linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.42)),
        linear-gradient(135deg,rgba(168,130,30,.13),transparent 38%,rgba(255,255,255,.32));
      --glass-panel-soft:
        radial-gradient(circle at 20% 0%,rgba(255,255,255,.84),transparent 36%),
        radial-gradient(circle at 88% 16%,rgba(255,230,165,.24),transparent 34%),
        linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.32)),
        linear-gradient(135deg,rgba(168,130,30,.09),transparent 40%,rgba(255,255,255,.24));
      --glass-chip:
        radial-gradient(circle at 24% 0%,rgba(255,255,255,.74),transparent 35%),
        linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.28)),
        linear-gradient(135deg,rgba(168,130,30,.08),transparent 42%,rgba(255,255,255,.20));
      --glass-border: rgba(126,88,16,.18);
      --glass-border-soft: rgba(126,88,16,.13);
      --glass-inner: rgba(255,255,255,.76);
      --glass-inner-soft: rgba(255,255,255,.62);
      --glass-shadow-strong:
        0 18px 44px rgba(86,58,10,.13),
        0 6px 18px rgba(255,255,255,.42),
        inset 0 1px 0 rgba(255,255,255,.90),
        inset 0 -1px 0 rgba(126,88,16,.08);
      --glass-shadow-soft:
        0 10px 26px rgba(86,58,10,.10),
        0 3px 12px rgba(255,255,255,.34),
        inset 0 1px 0 rgba(255,255,255,.78),
        inset 0 -1px 0 rgba(126,88,16,.06);
      --glass-shadow-hover:
        0 18px 38px rgba(86,58,10,.16),
        0 0 24px rgba(168,130,30,.14),
        inset 0 1px 0 rgba(255,255,255,.90),
        inset 0 -1px 0 rgba(126,88,16,.08);
      --glass-overlay: rgba(245,240,232,.58);
    }

    /* smooth theme transition */
    html{transition:background .35s}
    body{transition:background .35s,color .35s}

    /* day background — warm sunrise sky instead of deep space */
    html[data-theme="light"] .bg-depth{
      background:
        radial-gradient(ellipse 80% 45% at 50% 115%, rgba(196,165,90,.18)  0%,transparent 55%),
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(255,230,160,.55) 0%,transparent 60%),
        radial-gradient(ellipse 35% 70% at 0%   50%, rgba(240,225,195,.25) 0%,transparent 55%),
        radial-gradient(ellipse 35% 70% at 100% 50%, rgba(240,225,195,.25) 0%,transparent 55%);
    }
    /* stars disappear in daylight */
    html[data-theme="light"] .bg-stars{opacity:0;transition:opacity .4s}

    /* app title gradient: light text reads poorly on parchment */
    html[data-theme="light"] .app-title{
      background:linear-gradient(135deg,rgba(20,12,4,.82) 0%,var(--gold) 52%,rgba(130,90,10,.80) 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }

    /* section ratings need stronger contrast on light bg */
    html[data-theme="light"] .dot{
      background:rgba(20,12,4,.22);
      box-shadow:inset 0 0 0 1px rgba(20,12,4,.08);
    }
    html[data-theme="light"] .dot.on{
      background:#8f6a18;
      box-shadow:
        0 0 0 1px rgba(255,248,236,.92),
        0 0 0 2px rgba(143,106,24,.18),
        0 3px 10px rgba(143,106,24,.22);
    }
    html[data-theme="light"] .r-lbl{color:rgba(20,12,4,.62)}
    html[data-theme="light"] .badge,
    html[data-theme="light"] .detail-pill,
    html[data-theme="light"] .almanac-id,
    html[data-theme="light"] .almanac-summary-item,
    html[data-theme="light"] .almanac-tab{
      box-shadow:
        0 8px 20px rgba(86,58,10,.08),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -1px 0 rgba(126,88,16,.05);
    }

    /* date input on light bg */
    html[data-theme="light"] .date-input{
      background:var(--glass-chip);border-color:rgba(20,12,4,.14);
      color:rgba(20,12,4,.88);color-scheme:light;
      box-shadow:var(--glass-shadow-soft);
    }
    html[data-theme="light"] .date-input:focus{
      border-color:rgba(168,130,30,.55);background:var(--glass-panel-soft);
    }

    html,body{
      min-height:100%;background:var(--bg);
      font-family:var(--font-ui);
      color:var(--t1);overflow-x:hidden;
    }
    html[lang^="en"]{
      --font-ui: "Iowan Old Style","Palatino Linotype","Book Antiqua","Baskerville","Times New Roman",serif;
      --font-title: "Baskerville","Iowan Old Style","Palatino Linotype","Book Antiqua","Times New Roman",serif;
    }
    html[lang^="zh"]{
      --font-ui: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
      --font-title: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
    }
    body.modal-open{overflow:hidden}

    /* ── BACKGROUND ───────────────────────────── */
    .bg{position:fixed;inset:0;z-index:0;pointer-events:none}

    .bg-depth{
      position:absolute;inset:0;
      background:
        radial-gradient(ellipse 80% 45% at 50% 115%, rgba(170,130,35,.07)  0%,transparent 55%),
        radial-gradient(ellipse 65% 40% at 50% -8%,  rgba(25,20,42,.50)   0%,transparent 55%),
        radial-gradient(ellipse 30% 70% at 0%   50%, rgba(18,14,30,.30)   0%,transparent 55%),
        radial-gradient(ellipse 30% 70% at 100% 50%, rgba(18,14,30,.30)   0%,transparent 55%);
      animation:breathe 18s ease-in-out infinite alternate;
    }
    @keyframes breathe{0%{opacity:.82}100%{opacity:1}}

    .bg-stars{
      position:absolute;inset:0;
      background-image:
        radial-gradient(1.2px 1.2px at  9% 17%, rgba(255,252,248,.42) 0%,transparent 100%),
        radial-gradient(1.6px 1.6px at 28% 63%, rgba(255,252,248,.32) 0%,transparent 100%),
        radial-gradient(1px   1px   at 43%  8%, rgba(255,252,248,.38) 0%,transparent 100%),
        radial-gradient(2px   2px   at 62% 27%, rgba(255,252,248,.48) 0%,transparent 100%),
        radial-gradient(1px   1px   at 80% 72%, rgba(255,252,248,.28) 0%,transparent 100%),
        radial-gradient(1.4px 1.4px at 17% 85%, rgba(255,252,248,.40) 0%,transparent 100%),
        radial-gradient(1px   1px   at 91% 14%, rgba(255,252,248,.25) 0%,transparent 100%),
        radial-gradient(1.8px 1.8px at 37% 78%, rgba(255,252,248,.52) 0%,transparent 100%),
        radial-gradient(1px   1px   at 71% 44%, rgba(255,252,248,.30) 0%,transparent 100%),
        radial-gradient(1.2px 1.2px at 54% 91%, rgba(255,252,248,.36) 0%,transparent 100%);
      animation:twinkle 9s ease-in-out infinite alternate;
    }
    @keyframes twinkle{0%{opacity:.60}100%{opacity:1}}

    /* ── LANG + THEME TOGGLES ────────────────── */
    .top-controls{
      position:relative;z-index:2;width:100%;max-width:430px;margin:0 auto;
      padding:max(18px,env(safe-area-inset-top,18px)) 18px 10px;
      display:flex;align-items:center;justify-content:space-between;
    }
    .lang-btn,.theme-btn{
      background:var(--glass-chip);border:1px solid var(--glass-border-soft);
      backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
      border-radius:20px;padding:6px 14px;
      font-size:13px;font-weight:500;color:var(--t2);
      cursor:pointer;font-family:inherit;transition:all .2s;letter-spacing:.4px;
      box-shadow:var(--glass-shadow-soft);
    }
    .theme-btn{font-size:15px;padding:5px 11px;letter-spacing:0}
    .lang-btn:hover,.lang-btn:focus-visible,
    .theme-btn:hover,.theme-btn:focus-visible{
      background:var(--glass-panel-soft);
      border-color:rgba(196,165,90,.24);
      color:var(--t1);
      transform:translateY(-1px);
      outline:none;
    }

    /* ── GLASS ────────────────────────────────── */
    .glass{
      background:var(--glass-panel);
      backdrop-filter:blur(30px) saturate(180%) brightness(1.08);
      -webkit-backdrop-filter:blur(30px) saturate(180%) brightness(1.08);
      border:1px solid var(--glass-border);border-radius:26px;
      box-shadow:var(--glass-shadow-strong);
    }
    html[data-theme="light"] .glass{
      backdrop-filter:blur(34px) saturate(190%) brightness(1.04);
      -webkit-backdrop-filter:blur(34px) saturate(190%) brightness(1.04);
    }
    .card{
      background:var(--glass-panel-soft);
      backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
      border:1px solid var(--glass-border-soft);border-radius:22px;
      box-shadow:var(--glass-shadow-soft);
    }
    html[data-theme="light"] .card{
      backdrop-filter:blur(24px) saturate(175%) brightness(1.04);
      -webkit-backdrop-filter:blur(24px) saturate(175%) brightness(1.04);
    }

    /* ── LAYOUT ───────────────────────────────── */
    .screen{
      position:relative;z-index:1;min-height:calc(100dvh - 58px);
      display:flex;flex-direction:column;align-items:center;
      padding:18px 18px max(40px,env(safe-area-inset-bottom,40px));
    }
    .screen.hidden{display:none}

    /* ── ONBOARDING ───────────────────────────── */
    #onboarding{justify-content:center;gap:30px;padding-top:20px;padding-bottom:60px}

    .hero{text-align:center}
    .app-icon{
      font-size:68px;display:block;margin-bottom:22px;
      filter:drop-shadow(0 0 22px rgba(196,165,90,.55));
      animation:floatY 4.5s ease-in-out infinite;
    }
    @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

    .app-title{
      font-family:var(--font-title);
      font-size:36px;font-weight:700;letter-spacing:-.5px;margin-bottom:12px;
      background:linear-gradient(135deg,rgba(255,252,248,.96) 0%,var(--gold) 55%,rgba(255,232,180,.85) 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    html[lang^="en"] .app-title{letter-spacing:.02em}
    .app-sub{font-size:15.5px;color:var(--t2);line-height:1.62;max-width:285px;margin:0 auto}

    .ob-card{width:100%;max-width:375px;padding:28px 26px}
    .ob-card h2{font-family:var(--font-title);font-size:19px;font-weight:600;margin-bottom:7px;color:var(--t1)}
    .ob-card p {font-size:14px;color:var(--t2);line-height:1.55;margin-bottom:24px}

    .field-lbl{font-size:11.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--t3);margin-bottom:8px}

    .date-input{
      width:100%;background:var(--glass-chip);
      border:1px solid var(--glass-border);border-radius:16px;
      padding:15px 18px;font-size:17px;font-weight:500;color:#fff;
      margin-bottom:22px;outline:none;
      transition:border-color .2s,background .2s;
      -webkit-appearance:none;font-family:inherit;color-scheme:dark;
      box-shadow:var(--glass-shadow-soft);
    }
    .date-input:focus{border-color:rgba(196,165,90,.50);background:var(--glass-panel-soft)}

    .btn-reveal{
      width:100%;
      background:linear-gradient(135deg,rgba(196,165,90,.22),rgba(196,165,90,.12));
      border:1px solid rgba(196,165,90,.38);
      backdrop-filter:blur(10px);color:var(--t1);
      font-size:16px;font-weight:600;padding:16px;border-radius:18px;
      cursor:pointer;transition:all .22s;font-family:inherit;letter-spacing:.3px;
    }
    .btn-reveal:hover{background:linear-gradient(135deg,rgba(196,165,90,.34),rgba(196,165,90,.20));transform:translateY(-1px);box-shadow:0 8px 28px var(--goldg)}
    .btn-reveal:active{transform:translateY(0)}

    /* ── READING ──────────────────────────────── */
    #reading{gap:13px;padding-top:18px;padding-bottom:48px}

    .r-header{width:100%;max-width:430px;text-align:center;margin-bottom:4px}
    .r-date  {font-size:11.5px;color:var(--t3);letter-spacing:1.6px;text-transform:uppercase;margin-bottom:6px}
    .r-title {font-family:var(--font-title);font-size:25px;font-weight:700;letter-spacing:-.3px}
    html[lang^="en"] .r-title{letter-spacing:.01em}
    .signs-row{display:flex;justify-content:center;gap:7px;margin-top:13px;flex-wrap:wrap}
    .date-nav{
      width:100%;max-width:430px;display:flex;gap:8px;justify-content:center;align-items:center;
    }
    .date-nav{margin-top:2px}
    .nav-btn{
      background:var(--glass-chip);border:1px solid var(--glass-border-soft);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      border-radius:20px;padding:7px 12px;font-size:12px;color:var(--t2);
      box-shadow:var(--glass-shadow-soft);cursor:pointer;font-family:inherit;
      transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease;
    }
    .nav-btn:hover,.nav-btn:focus-visible{
      transform:translateY(-1px);border-color:rgba(196,165,90,.26);
      background:var(--glass-panel-soft);color:var(--t1);outline:none;
    }
    .date-chip{
      min-width:112px;text-align:center;color:var(--t1);border-color:rgba(196,165,90,.24);
    }

    .badge{
      background:var(--glass-chip);border:1px solid var(--glass-border-soft);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      border-radius:20px;padding:5px 13px;font-size:13px;color:var(--t2);
      display:flex;align-items:center;gap:5px;
      box-shadow:var(--glass-shadow-soft);
    }
    .badge-btn{
      border:none;cursor:pointer;font-family:inherit;text-align:left;
      transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease;
    }
    .badge-btn:hover,.badge-btn:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(196,165,90,.26);
      background:rgba(255,252,248,.08);
      color:var(--t1);
      box-shadow:0 10px 24px rgba(0,0,0,.16);
      outline:none;
    }

    .almanac-summary{
      width:100%;max-width:430px;padding:15px 15px 14px;
      display:flex;flex-direction:column;gap:10px;
    }
    .almanac-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
    .almanac-summary-kicker{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);opacity:.82}
    .almanac-summary-title{font-family:var(--font-title);font-size:18px;font-weight:700;color:var(--t1);line-height:1.18;margin-top:2px}
    .almanac-summary-more{font-size:11px;color:var(--t3);padding-top:3px;white-space:nowrap}
    .almanac-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
    .almanac-summary-item{
      padding:10px 9px;border-radius:16px;
      background:var(--glass-chip);border:1px solid var(--glass-border-soft);
      box-shadow:var(--glass-shadow-soft);
    }
    .almanac-summary-label{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);opacity:.76;margin-bottom:4px}
    .almanac-summary-value{font-size:12px;line-height:1.28;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* ── CATEGORY GRID ────────────────────────── */
    .cat-grid{width:100%;max-width:430px;display:grid;grid-template-columns:1fr 1fr;gap:11px}
    .cat-card{padding:17px 15px;display:flex;flex-direction:column;gap:9px}
    .cat-head{display:flex;align-items:center;gap:8px}
    .cat-icon{font-size:20px;filter:drop-shadow(0 2px 5px rgba(196,165,90,.35))}
    .cat-name{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.9px}
    .dots    {display:flex;gap:4px}
    .dot     {width:7px;height:7px;border-radius:50%;background:rgba(255,252,248,.12);transition:background .3s}
    .dot.on  {background:var(--gold);box-shadow:0 0 8px rgba(196,165,90,.40)}
    .r-lbl   {font-size:11px;color:var(--t3);font-weight:500;letter-spacing:.3px}
    .cat-msg {font-size:12.5px;color:var(--t2);line-height:1.55}

    /* ── ORACLE ───────────────────────────────── */
    .oracle-card{width:100%;max-width:430px;padding:24px 22px}
    .oracle-lbl {font-size:11px;font-weight:600;letter-spacing:1.7px;text-transform:uppercase;color:var(--gold);opacity:.80;margin-bottom:14px}
    .oracle-txt {font-size:15.5px;line-height:1.72;color:var(--t1)}
    html[lang^="en"] .oracle-txt,
    html[lang^="en"] .cat-msg,
    html[lang^="en"] .sug-txt,
    html[lang^="en"] .detail-copy p{
      letter-spacing:.01em;
    }

    /* ── SUGGESTION ───────────────────────────── */
    .sug-card{width:100%;max-width:430px;padding:18px 20px;display:flex;align-items:flex-start;gap:13px}
    .sug-icon{
      width:42px;height:42px;flex-shrink:0;
      background:rgba(196,165,90,.12);border:1px solid rgba(196,165,90,.22);
      border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:19px;
    }
    .sug-lbl {font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);opacity:.75;margin-bottom:6px}
    .sug-txt {font-size:14px;color:var(--t2);line-height:1.58}

    /* ── FOOTER ───────────────────────────────── */
    .r-footer{width:100%;max-width:430px;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:6px 4px;margin-top:3px}
    .btn-reset,.btn-creator{background:none;border:none;font-size:12px;color:var(--t3);cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:2px;padding:4px;transition:color .2s}
    .btn-creator{text-align:left}
    .btn-reset{text-align:right}
    .btn-reset:hover,.btn-reset:focus-visible,
    .btn-creator:hover,.btn-creator:focus-visible{color:var(--t2);outline:none}

    .interactive-card{
      cursor:pointer;
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
      position:relative;
      overflow:hidden;
    }
    .interactive-card::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 40%,transparent 62%,rgba(196,165,90,.08));
      opacity:0;transition:opacity .22s ease;
      pointer-events:none;
    }
    html[data-theme="light"] .interactive-card::after{
      background:
        radial-gradient(circle at 18% 0%,rgba(255,255,255,.48),transparent 34%),
        linear-gradient(135deg,rgba(255,255,255,.26),transparent 42%,rgba(168,130,30,.12));
    }
    .interactive-card:hover,.interactive-card:focus-visible{
      transform:translateY(-2px);
      border-color:rgba(196,165,90,.28);
      box-shadow:var(--glass-shadow-hover);
      outline:none;
    }
    .interactive-card:hover::after,.interactive-card:focus-visible::after{opacity:1}

    /* ── DETAIL POPUP ─────────────────────────── */
    .detail-modal{
      position:fixed;inset:0;z-index:500;
      display:flex;align-items:center;justify-content:center;
      padding:max(24px,env(safe-area-inset-top,24px)) 14px max(24px,env(safe-area-inset-bottom,24px));
      background:var(--glass-overlay);
      backdrop-filter:blur(24px) saturate(140%);
      -webkit-backdrop-filter:blur(24px) saturate(140%);
      opacity:0;pointer-events:none;
      transition:opacity .24s ease;
    }
    .detail-modal.open{opacity:1;pointer-events:auto}
    .detail-sheet{
      width:min(100%,540px);max-height:min(84vh,760px);
      overflow:auto;padding:26px 22px 22px;border-radius:30px;position:relative;
      background:var(--glass-panel);
      border:1px solid var(--glass-border);
      box-shadow:var(--glass-shadow-strong);
      transform:scale(.96);
      transition:transform .28s cubic-bezier(.2,.8,.2,1);
    }
    .detail-modal.open .detail-sheet{transform:scale(1)}
    .detail-close{
      position:absolute;top:12px;right:12px;
      width:44px;height:44px;border:none;border-radius:50%;
      background:var(--glass-chip);color:var(--t1);cursor:pointer;
      font-size:18px;font-family:inherit;transition:background .2s ease,transform .2s ease;
      box-shadow:var(--glass-shadow-soft);
    }
    .detail-close:hover,.detail-close:focus-visible{background:var(--glass-panel-soft);transform:scale(1.04);outline:none}
    .detail-kicker{font-size:11px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--gold);opacity:.84;margin-bottom:10px}
    .detail-title{font-family:var(--font-title);font-size:30px;line-height:1.08;letter-spacing:-.5px;margin-right:42px}
    html[lang^="en"] .detail-title{letter-spacing:.01em}
    .detail-sub{font-size:14px;color:var(--t2);line-height:1.55;margin-top:10px}
    .detail-facts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
    .detail-pill{
      padding:8px 12px;border-radius:999px;
      background:var(--glass-chip);border:1px solid var(--glass-border-soft);
      color:var(--t2);font-size:12px;letter-spacing:.2px;
      box-shadow:var(--glass-shadow-soft);
    }
    .detail-custom{display:none}
    .detail-copy{display:flex;flex-direction:column;gap:12px}
    .detail-copy p{font-size:16px;line-height:1.72;color:var(--t1)}
    .detail-copy p strong{color:var(--t1)}

    .almanac-shell{display:flex;flex-direction:column;gap:14px}
    .almanac-top{display:flex;flex-wrap:wrap;gap:8px}
    .almanac-id{
      display:flex;align-items:center;gap:8px;
      padding:10px 14px;border-radius:18px;
      background:var(--glass-chip);border:1px solid var(--glass-border-soft);
      color:var(--t2);font-size:13px;
      box-shadow:var(--glass-shadow-soft);
    }
    .almanac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .almanac-tab{
      border:none;cursor:pointer;text-align:left;font-family:inherit;
      padding:12px 11px;border-radius:18px;
      background:var(--glass-panel-soft);border:1px solid var(--glass-border-soft);
      color:var(--t2);box-shadow:var(--glass-shadow-soft);
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease,color .22s ease;
    }
    .almanac-tab:hover,.almanac-tab:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(196,165,90,.26);
      color:var(--t1);
      outline:none;
    }
    .almanac-tab.active{
      background:var(--glass-panel);
      border-color:rgba(196,165,90,.30);
      color:var(--t1);
      box-shadow:var(--glass-shadow-hover);
    }
    .almanac-tab-label{font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--gold);opacity:.8;margin-bottom:5px}
    .almanac-tab-value{font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .almanac-active{
      padding:16px 16px 14px;border-radius:22px;
      background:var(--glass-panel-soft);border:1px solid var(--glass-border-soft);
      box-shadow:var(--glass-shadow-soft);
    }
    .almanac-active-kicker{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);opacity:.78;margin-bottom:8px}
    .almanac-active-title{font-size:17px;font-weight:600;color:var(--t1);margin-bottom:6px}
    .almanac-active-note{font-size:14px;line-height:1.68;color:var(--t2)}
    .almanac-yi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .almanac-yi-card{
      padding:16px 16px 14px;border-radius:22px;
      background:var(--glass-panel-soft);border:1px solid var(--glass-border-soft);
      box-shadow:var(--glass-shadow-soft);
    }
    .almanac-yi-label{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:8px}
    .almanac-yi-card.do .almanac-yi-label{color:var(--gold)}
    .almanac-yi-card.dont .almanac-yi-label{color:var(--t3)}
    .almanac-yi-text{font-size:15px;line-height:1.7;color:var(--t1)}

    @media (max-width:560px){
      .detail-sheet{padding:24px 18px 20px;border-radius:26px}
      .detail-title{font-size:25px}
      .detail-copy p{font-size:15.5px}
      .almanac-yi-grid{grid-template-columns:1fr}
    }

    @media (max-width:350px){
      .almanac-summary{padding:14px 13px}
      .almanac-summary-grid,.almanac-grid{gap:6px}
      .almanac-summary-item,.almanac-tab{padding:9px 7px}
      .almanac-summary-value,.almanac-tab-value{font-size:11px}
    }

    /* ── CONFIRM DIALOG ───────────────────────── */
    .confirm-modal{
      position:fixed;inset:0;z-index:600;
      display:flex;align-items:center;justify-content:center;
      background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
      opacity:0;pointer-events:none;transition:opacity .24s ease;
    }
    .confirm-modal.open{opacity:1;pointer-events:auto}
    .confirm-sheet{
      width:min(90%,340px);padding:26px 22px 22px;border-radius:24px;text-align:center;
      transform:scale(.94);transition:transform .28s cubic-bezier(.2,.8,.2,1);
    }
    .confirm-modal.open .confirm-sheet{transform:scale(1)}
    .confirm-msg{font-size:16px;line-height:1.55;margin-bottom:22px;color:var(--t1)}
    .confirm-btns{display:flex;gap:10px;justify-content:center}
    .confirm-btn{
      flex:1;max-width:130px;padding:12px 0;border:none;border-radius:14px;
      font-size:14px;font-weight:600;cursor:pointer;
      background:var(--glass-panel);color:var(--t1);
      box-shadow:var(--glass-shadow-soft);
      transition:transform .15s ease,background .15s ease;
    }
    .confirm-btn:hover,.confirm-btn:focus-visible{transform:scale(1.04);outline:none}
    .confirm-btn.danger{background:rgba(196,80,60,.22);color:rgba(240,140,120,1)}

    /* ── ANIMATION ────────────────────────────── */
    .fu{animation:fadeUp .55s ease both}
    @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
    .d0{animation-delay:0s}.d1{animation-delay:.07s}.d2{animation-delay:.14s}
    .d3{animation-delay:.21s}.d4{animation-delay:.28s}.d5{animation-delay:.36s}
    .d6{animation-delay:.44s}.d7{animation-delay:.52s}