/* Huiya 2026 UI refresh — warm storybook system */
:root{
  --rose:#e68473;
  --rd:#945946;
  --rl:#f8ded5;
  --lav:#889a7c;
  --gold:#f2bd55;
  --bg:#fbf7ed;
  --bg2:#fffaf0;
  --c:#fffdf8;
  --t:#333429;
  --t2:#777467;
  --bd:#e9e1d2;
  --suc:#6d9272;
  --err:#c66459;
  --sh:0 10px 30px rgba(87,68,42,.08);
  --sh2:0 18px 45px rgba(87,68,42,.14);
  --r:28px;
  --rs:16px;
  --navh:76px;
}

html{scroll-behavior:smooth}
body{
  background-color:var(--bg);
  background-image:radial-gradient(rgba(111,100,73,.055) .7px,transparent .8px),radial-gradient(rgba(255,255,255,.72) .7px,transparent .8px);
  background-position:0 0,6px 7px;
  background-size:12px 12px;
  color:var(--t);
  letter-spacing:.01em;
}
button,a,input,select,textarea{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(242,189,85,.46);outline-offset:3px}

/* Navigation */
.nav{
  height:var(--navh);
  border-bottom:1px solid rgba(178,159,124,.22);
  background:rgba(255,253,248,.9);
  box-shadow:0 6px 28px rgba(72,58,38,.05);
  backdrop-filter:blur(18px);
}
.nav-inner{max-width:1260px;padding:0 28px}
.nav-logo{gap:10px;color:#43523d;font-size:1.42rem;letter-spacing:.12em}
.nav-logo .logo-mark{
  width:38px;height:38px;display:grid;place-items:center;border-radius:14px;
  background:#6f8466;color:#fff7da;font-size:1rem;
  box-shadow:inset 0 -3px 0 rgba(40,58,35,.16),0 6px 14px rgba(83,107,72,.2);
  transform:rotate(-4deg);
}
.nav-links{gap:4px}
.nav-link{
  display:flex;align-items:center;gap:7px;min-height:42px;padding:9px 15px;border:0;
  border-radius:15px;background:transparent;color:#706e63;font-size:.87rem;font-weight:650;
}
.nav-link:hover,.nav-link.active{background:#f3eddf;color:#46513e}
.nav-link.active{box-shadow:inset 0 0 0 1px rgba(117,132,99,.16)}
.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;line-height:1}
.nav-link-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.nav-link-icon.emoji-icon{font-size:1.05rem;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.nav-account-mobile{display:none}
.nav-pill{min-height:38px;padding:7px 14px;border:1px solid #e5ddcd;background:#fffaf1;color:#665e52}
.nav-pill:hover{border-color:#b9b19f;background:#fff;color:#46513e}
.nav-pill-outline{background:transparent;border-color:#ded5c3;color:#766d61}
.nav-pill-vip{border-color:#ebca78;background:#fff3cb;color:#8a6423;box-shadow:none}

/* Shared */
.main{margin-top:var(--navh)}
.page{padding:38px 0 62px}
.pg-inner{max-width:1260px;padding:0 28px}
.page-eyebrow,.book-kicker,.task-kicker{display:block;color:#9a7450;font-size:.67rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.sec-title{color:var(--t);font-size:1.65rem;letter-spacing:-.02em}
.btn{min-height:44px;border-radius:16px;font-weight:750}
.btn-sm-rose,.btn-sm-lav{padding:9px 16px;border-radius:13px}
.btn-sm-rose{background:#df826d;color:#fff;box-shadow:0 5px 12px rgba(169,88,70,.18)}
.btn-sm-lav{background:#e9efe5;color:#4f674d}
.btn-outline{border:1px solid var(--bd);background:#fffdf8;color:#665f53;border-radius:14px}
.loading,.empty{grid-column:1/-1;padding:48px 24px;border:1px dashed #d9cfbd;border-radius:24px;background:rgba(255,253,248,.66)}
.empty-icon{filter:drop-shadow(0 5px 8px rgba(70,54,30,.12))}
.reader-page-swipe-next{animation:readerPageSwipeNext .34s cubic-bezier(.2,.75,.25,1)}
.reader-assistant-sprite img.reader-assistant-wukong{transform:scale(1)}
.reader-assistant-sprite img.reader-assistant-cat{transform:translate(10px,2px) scale(.82)}
.reader-assistant-sprite img.reader-assistant-dog{transform:scale(.86)}
.reader-assistant-sprite img.reader-assistant-rabbit{transform:translateY(-8px) scale(.76)}
.reader-page-swipe-prev{animation:readerPageSwipePrev .34s cubic-bezier(.2,.75,.25,1)}
@keyframes readerPageSwipeNext{from{opacity:.45;transform:translateX(28px) rotateY(-5deg)}to{opacity:1;transform:translateX(0) rotateY(0)}}
@keyframes readerPageSwipePrev{from{opacity:.45;transform:translateX(-28px) rotateY(5deg)}to{opacity:1;transform:translateX(0) rotateY(0)}}
/* Desktop only: keep the press-to-talk bubble attached to the character. */
@media(min-width:701px){
  .reader-assistant{position:relative}
  .reader-assistant-cloud{position:absolute;z-index:4;left:50%;top:min(58vh,575px);margin:0;transform:translateX(-50%);white-space:nowrap}
  .reader-assistant-cloud::before{left:50%;top:-6px;transform:translateX(-50%) rotate(45deg)}
}

/* Fortune draw: temple-style lucky stick before the physical-book checkout */
.fortune-overlay{z-index:260;background:rgba(63,54,39,.52)}
.fortune-card{position:relative;max-width:438px;padding:30px 28px 26px;text-align:center;overflow:hidden;background:linear-gradient(180deg,#fffdf8 0%,#fff8e9 100%)}
.fortune-close{position:absolute;top:14px;right:16px;width:32px;height:32px;border:0;border-radius:50%;background:#f4ecdc;color:#796d5e;font-size:1.2rem;line-height:1;cursor:pointer}
.fortune-kicker{color:#9b7650;font-size:.68rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
.fortune-card h3{margin:10px 0 7px;color:#4d4b3f;font-size:1.28rem;letter-spacing:.01em}
.fortune-intro{color:#827969;font-size:.82rem;line-height:1.6}
.fortune-stage{position:relative;height:238px;margin:12px -8px 4px;overflow:hidden;border-radius:22px;background:radial-gradient(circle at 50% 62%,rgba(244,196,92,.22),transparent 34%),linear-gradient(180deg,#f8f0df,#fffaf0 72%);border:1px solid #eee1c9}
.fortune-stage:after{content:"";position:absolute;left:12%;right:12%;bottom:22px;height:18px;border-radius:50%;background:rgba(115,87,44,.14);filter:blur(5px)}
.fortune-cloud{position:absolute;color:#d4ad62;font-size:1.1rem;opacity:.7}.cloud-left{top:42px;left:56px}.cloud-right{top:67px;right:60px}
.fortune-incense{position:absolute;top:31px;left:50%;display:flex;gap:8px;transform:translateX(-50%);opacity:.45}.fortune-incense i{display:block;width:2px;height:28px;background:linear-gradient(#aa8a60,transparent);border-radius:50%;animation:fortuneSmoke 2.8s ease-in-out infinite}.fortune-incense i:nth-child(2){animation-delay:.4s}.fortune-incense i:nth-child(3){animation-delay:.8s}
.fortune-tube{position:absolute;z-index:2;left:50%;bottom:31px;width:92px;height:150px;transform:translateX(-50%) rotate(-5deg);transform-origin:50% 92%;filter:drop-shadow(0 10px 8px rgba(91,65,31,.16))}
.fortune-tube-top{position:absolute;top:0;left:7px;width:78px;height:27px;border-radius:50%;background:#c56e45;border:4px solid #a95337;box-shadow:inset 0 3px 0 rgba(255,231,185,.35)}
.fortune-tube-body{position:absolute;top:13px;left:8px;width:76px;height:120px;border-radius:12px 12px 18px 18px;background:linear-gradient(90deg,#a95337,#d87e4f 48%,#a64d34);border:3px solid #a65135;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#ffe9ae;font-family:serif;box-shadow:inset 8px 0 12px rgba(255,221,173,.12),inset -8px 0 12px rgba(74,27,15,.2)}
.fortune-tube-body span{font-size:.68rem;opacity:.82}.fortune-tube-body b{font-size:2.35rem;font-weight:600;line-height:1;color:#fff0bb}.fortune-tube-foot{position:absolute;bottom:0;left:3px;width:86px;height:22px;border-radius:50%;background:#a74e35;border:3px solid #91432e}
.fortune-stick{position:absolute;z-index:3;left:50%;bottom:53px;width:30px;height:142px;border-radius:4px 4px 2px 2px;background:linear-gradient(90deg,#d19b4f,#ffe1a0 48%,#c78940);box-shadow:2px 5px 7px rgba(84,55,22,.22);transform:translateX(13px) rotate(7deg);transform-origin:50% 100%;opacity:0}.fortune-stick:before{content:"";position:absolute;top:10px;left:4px;right:4px;height:2px;background:rgba(119,75,25,.26)}.fortune-stick span{position:absolute;top:32px;left:50%;writing-mode:vertical-rl;transform:translateX(-50%);font-size:.62rem;color:#8b542b;white-space:nowrap}
.fortune-stage.is-drawing .fortune-tube{animation:fortuneShake .72s ease-in-out infinite}.fortune-stage.is-drawing .fortune-tube-body{animation:fortuneTubeGlow .36s ease-in-out infinite alternate}.fortune-stage.is-drawing .fortune-stick{animation:fortuneStick .72s ease-in-out infinite}.fortune-stage.is-drawing:before{content:"";position:absolute;left:50%;bottom:16px;width:120px;height:24px;border:1px solid rgba(196,143,58,.28);border-radius:50%;transform:translateX(-50%);animation:fortuneRipple .72s ease-out infinite}.fortune-stage.has-result .fortune-tube{transform:translateX(-50%) rotate(0deg)}.fortune-stage.has-result .fortune-stick{opacity:1;animation:fortuneReveal .55s cubic-bezier(.2,.8,.25,1) both}
.fortune-result{margin:8px 0 14px;padding:13px 16px;border:1px solid #e8c878;border-radius:16px;background:linear-gradient(135deg,#fff8d9,#fff1bb);box-shadow:0 8px 22px rgba(210,158,55,.13)}.fortune-result-label{display:block;color:#967340;font-size:.68rem;letter-spacing:.14em}.fortune-result strong{display:block;margin:3px 0;color:#a45c25;font-size:1.75rem;line-height:1.25}.fortune-result small{color:#8a775b;font-size:.76rem}.fortune-status{min-height:24px;margin:5px 0 12px;color:#806f5c;font-size:.8rem}.fortune-draw-btn,.fortune-confirm-btn{min-height:46px;background:linear-gradient(135deg,#c8734e,#a6533b);box-shadow:0 7px 16px rgba(151,72,45,.22)}
@keyframes fortuneShake{0%,100%{transform:translateX(-50%) rotate(-5deg)}25%{transform:translateX(calc(-50% - 9px)) rotate(-13deg)}50%{transform:translateX(calc(-50% + 8px)) rotate(7deg)}75%{transform:translateX(calc(-50% - 5px)) rotate(-10deg)}}
@keyframes fortuneTubeGlow{from{filter:brightness(1)}to{filter:brightness(1.16)}}
@keyframes fortuneRipple{0%{opacity:.7;transform:translateX(-50%) scale(.65)}100%{opacity:0;transform:translateX(-50%) scale(1.35)}}
@keyframes fortuneStick{0%,100%{opacity:0;transform:translateX(13px) rotate(7deg)}45%,75%{opacity:1;transform:translateX(13px) translateY(-28px) rotate(7deg)}}
@keyframes fortuneReveal{from{opacity:0;transform:translateX(13px) translateY(28px) rotate(7deg)}to{opacity:1;transform:translateX(13px) translateY(-15px) rotate(7deg)}}
@keyframes fortuneSmoke{0%,100%{transform:translateY(0) scaleX(1);opacity:.15}50%{transform:translateY(-9px) scaleX(1.8);opacity:.6}}
@media (max-width:520px){.fortune-card{padding:26px 18px 20px;border-radius:22px}.fortune-stage{height:220px;margin-left:-2px;margin-right:-2px}.fortune-card h3{font-size:1.12rem}}

/* Home hero */
.hero{
  position:relative;isolation:isolate;min-height:450px;margin-bottom:46px;padding:50px 48px;
  overflow:hidden;border:1px solid rgba(196,176,139,.26);border-radius:34px;
  background:#f3ebda;box-shadow:0 24px 70px rgba(75,59,37,.12);
}
.hero::after{
  content:'';position:absolute;z-index:1;inset:0;width:auto;height:auto;
  border:0;border-radius:0;transform:none;
  background:linear-gradient(90deg,rgba(255,250,237,.98) 0%,rgba(255,250,237,.94) 34%,rgba(255,250,237,.48) 54%,rgba(255,250,237,.04) 76%,rgba(255,250,237,0) 100%);
}
.hero-text{position:relative;z-index:2;max-width:530px;padding:0}
.hero-greeting{display:inline-flex;align-items:center;gap:7px;margin-bottom:15px;padding:8px 13px;border:1px solid #e7d9bd;border-radius:999px;background:rgba(255,253,247,.86);color:#6d745e;font-size:.78rem;font-weight:700;box-shadow:0 7px 20px rgba(85,66,40,.07)}
.hero-greeting i{color:#e8a73e;font-style:normal}
.hero-kicker{display:block;margin-bottom:9px;padding:0;border-radius:0;background:transparent;color:#987952;font-size:.75rem;font-weight:800;letter-spacing:.12em;transform:none}
.hero-text h1{max-width:520px;margin-bottom:16px;color:#30372d;font-family:'STKaiti','KaiTi','Songti SC',serif;font-size:clamp(2.25rem,3.25vw,3.3rem);font-weight:700;line-height:1.14;letter-spacing:-.035em}
.hero-text h1 span{display:block;margin-top:5px;color:#bb654f}
.hero-text>p{max-width:490px;margin-bottom:22px;color:#69695d;font-size:.94rem;line-height:1.72}
.btn-hero{
  display:inline-flex;align-items:center;gap:9px;min-height:58px;padding:15px 24px;
  border:1px solid #e5aa39;border-radius:18px;background:#f4bd51;color:#5c4215;
  box-shadow:inset 0 -4px 0 rgba(134,83,6,.13),0 13px 24px rgba(181,123,26,.24);
  font-size:1rem;
}
.btn-hero:hover{background:#f8c967;box-shadow:inset 0 -4px 0 rgba(134,83,6,.12),0 16px 28px rgba(181,123,26,.29);transform:translateY(-2px)}
.hero-cta-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.5)}
.hero-trust{display:flex;flex-wrap:wrap;gap:7px 15px;margin-top:16px;color:#777267;font-size:.71rem}
.hero-trust span::before{content:'✓';margin-right:5px;color:#6f8769;font-weight:900}
.hero-visual{position:absolute;z-index:0;inset:0;margin:0;font-size:0}
.hero-visual img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;filter:none;mix-blend-mode:normal}
.hero-magic-note{position:absolute;z-index:2;right:30px;bottom:28px;padding:10px 14px;border:1px solid rgba(255,255,255,.66);border-radius:999px;background:rgba(52,67,49,.64);color:#fff9df;font-size:.74rem;font-weight:750;letter-spacing:.05em;box-shadow:0 8px 20px rgba(31,37,26,.18);backdrop-filter:blur(9px)}
.hero-glow{position:absolute;z-index:3;border-radius:50%;pointer-events:none;filter:blur(3px);animation:heroFloat 5s ease-in-out infinite}
.hero-glow-one{right:42%;top:19%;width:9px;height:9px;background:#ffd46d;box-shadow:0 0 18px 6px rgba(255,211,102,.6)}
.hero-glow-two{right:29%;top:38%;width:6px;height:6px;background:#fff1ae;box-shadow:0 0 17px 5px rgba(255,232,139,.55);animation-delay:-2.3s}
@keyframes heroFloat{50%{transform:translateY(-13px) scale(1.2)}}

/* Journey */
.journey-head{margin:0 auto 24px;text-align:center}
.journey-head>span{color:#b17857;font-size:.72rem;font-weight:800;letter-spacing:.16em}
.journey-head h2{margin:8px 0 9px;font-family:'STKaiti','KaiTi','Songti SC',serif;font-size:2rem;color:#3f493b}
.journey-head p{color:var(--t2);font-size:.88rem}
.steps{align-items:stretch;gap:14px;margin-bottom:34px;padding:0;background:transparent;box-shadow:none}
.step{position:relative;padding:27px 20px 23px;border:1px solid #e8dfcf;border-radius:26px;background:rgba(255,253,248,.84);box-shadow:0 10px 28px rgba(72,57,35,.07);text-align:left}
.step:hover{border-color:#d6c7ab;box-shadow:0 17px 38px rgba(72,57,35,.11);transform:translateY(-3px)}
.step-num{position:absolute;top:15px;right:16px;left:auto;width:27px;height:27px;margin:0;background:#e7efe3;color:#61735b}
.step-icon{width:58px;height:58px;display:grid;place-items:center;margin:0 0 18px;border-radius:20px;background:#f7d9c7;font-size:1.55rem;box-shadow:inset 0 -4px 0 rgba(115,72,40,.08),0 8px 14px rgba(90,66,40,.1);transform:rotate(-3deg)}
.step:nth-of-type(3) .step-icon{background:#dce8d5;transform:rotate(3deg)}
.step:nth-of-type(5) .step-icon{background:#f8e5aa;transform:rotate(-2deg)}
.step h3{margin-bottom:8px;color:#3e4638;font-size:1rem}
.step p{color:#7b776b;font-size:.8rem;line-height:1.65}
.step-time{display:inline-block;margin-top:14px;color:#a77858;font-size:.68rem;font-weight:750}
.step-arrow{position:relative;width:26px;padding:0}
.step-arrow::before{content:'···';position:absolute;left:50%;top:47%;color:#cdbd9e;font-size:1rem;letter-spacing:2px;transform:translate(-50%,-50%)}
.quote-card{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:48px;padding:21px 26px;border:1px solid #e9dec9;border-radius:22px;background:#f6eddb;box-shadow:none}
.q-icon{margin:0;font-size:1.2rem}
#quoteText{font-family:'STKaiti','KaiTi','Songti SC',serif;color:#655f52;font-size:1rem}
.recent-title-row{align-items:end;margin-bottom:17px}
.recent-title-row>div>span{color:#9a7450;font-size:.7rem;font-weight:800;letter-spacing:.14em}
.recent-title-row .sec-title{margin:5px 0 0;font-size:1.8rem}
.recent-title-row>a,.library-create-link{color:#687760;font-size:.82rem;font-weight:700;text-decoration:none}

/* Forms */
.create-layout{max-width:880px}
.form-card{margin-bottom:16px;padding:25px 26px;border:1px solid rgba(216,204,183,.72);border-radius:24px;background:rgba(255,253,248,.9);box-shadow:0 12px 32px rgba(73,58,36,.07)}
.form-card-title{margin-bottom:18px;padding-bottom:12px;border-color:#ede3d2;color:#765c47;font-size:.96rem}
.fg label{margin-bottom:6px;color:#777166;font-size:.78rem;font-weight:650}
.fg input,.fg select,.fg textarea,.m-input{min-height:45px;padding:11px 13px;border:1px solid #e1d7c6;border-radius:13px;background:#fffdf8;color:var(--t)}
.fg textarea{min-height:auto}
.fg input:focus,.fg select:focus,.fg textarea:focus,.m-input:focus{border-color:#879a7d;box-shadow:0 0 0 4px rgba(120,145,112,.12)}
.upload-box{padding:25px;border:1.5px dashed #cbbfa9;border-radius:18px;background:#fbf6eb}
.upload-box:hover{border-color:#879a7d;background:#f7f4e9}
.package-card{padding:18px 10px;border:1px solid #dfd5c4;border-radius:18px;background:#fffdf8}
.package-card:hover{border-color:#91a087;box-shadow:0 10px 24px rgba(71,91,65,.1)}
.package-card.selected{border-color:#c68661;background:#fff4e8;box-shadow:0 9px 22px rgba(170,103,65,.14)}
.package-card.selected::after{background:#c9795e}
.pkg-price{color:#b9664f}
.edition-option{border-radius:16px!important}
.btn-submit{border-radius:16px;background:#71866a;box-shadow:inset 0 -3px 0 rgba(46,70,41,.18),0 10px 20px rgba(77,105,68,.18)}
.btn-submit:hover{background:#657b5e;box-shadow:inset 0 -3px 0 rgba(46,70,41,.18),0 13px 24px rgba(77,105,68,.23)}
.chat-fab{top:96px;width:62px;height:62px;border:2px solid #fff6df;background:#f4bd51;box-shadow:0 12px 24px rgba(120,79,25,.22)}
.chat-modal{border:1px solid #e1d6c4;border-radius:24px;box-shadow:0 24px 70px rgba(52,41,28,.22)}
.chat-modal-head{background:#6f8466}
.chat-send{background:#d57a66}

/* Library */
.library-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:24px;padding:32px 36px;border:1px solid #dce2d7;border-radius:28px;background:#dfe8da;box-shadow:0 14px 32px rgba(66,87,60,.08)}
.library-hero h2{margin:6px 0 8px;color:#3d4c39;font-family:'STKaiti','KaiTi','Songti SC',serif;font-size:2.2rem}
.library-hero p{color:#637060;font-size:.86rem}
.library-stats{display:flex;align-items:center;gap:26px;padding:18px 24px;border:1px solid rgba(255,255,255,.7);border-radius:20px;background:rgba(255,253,248,.7)}
.library-stats div{display:flex;flex-direction:column;gap:3px;min-width:82px}
.library-stats strong{color:#445341;font-size:1.5rem}
.library-stats span{color:#7b8377;font-size:.7rem}
.library-stats i{width:1px;height:36px;background:#cbd6c6}
.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.library-filters{display:flex;gap:6px;padding:5px;border:1px solid #e3dacb;border-radius:16px;background:#f5efe3}
.library-filter{min-height:38px;padding:8px 16px;border:0;border-radius:12px;background:transparent;color:#7b7468;font-size:.78rem;font-weight:700;cursor:pointer}
.library-filter.active{background:#fffdf8;color:#4b5746;box-shadow:0 4px 12px rgba(70,56,37,.08)}
.library-create-link{padding:10px 14px;border-radius:13px;background:#fffdf8;box-shadow:inset 0 0 0 1px #dfd6c7}
.books-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.book-card{position:relative;align-items:stretch;gap:18px;min-height:190px;padding:18px;border:1px solid #e4daca;border-radius:25px;background:rgba(255,253,248,.9);box-shadow:0 12px 28px rgba(75,60,38,.07)}
.book-card:hover{border-color:#d6c6ad;box-shadow:var(--sh2);transform:translateY(-3px)}
.book-cover{position:relative;width:126px;height:auto;min-height:154px;flex:0 0 126px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;overflow:hidden;padding:18px 14px;border-radius:12px 18px 18px 12px;background:#b9caaa;color:#fff;text-shadow:0 1px 2px rgba(50,52,38,.18);box-shadow:inset 6px 0 0 rgba(62,68,46,.12),7px 9px 15px rgba(64,51,31,.17)}
.book-cover::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 74% 22%,rgba(255,255,255,.5) 0 3px,transparent 4px),radial-gradient(circle at 57% 34%,rgba(255,236,159,.65) 0 2px,transparent 3px),linear-gradient(160deg,transparent 45%,rgba(61,78,51,.2))}
.book-cover strong,.book-cover small,.book-cover-spark{position:relative;z-index:1}
.book-cover strong{font-family:'STKaiti','KaiTi','Songti SC',serif;font-size:1rem;line-height:1.25}
.book-cover small{margin-top:5px;font-size:.56rem;opacity:.8}
.book-cover-spark{position:absolute;right:14px;top:14px;color:#fff1a4}
.cover-tone-1{background:#db9c78}.cover-tone-2{background:#899f9c}.cover-tone-3{background:#c4a66c}
.book-info{min-width:0;display:flex;flex:1;flex-direction:column;justify-content:center}
.book-info h4{margin:7px 0 7px;color:#3e4438;font-size:1rem;line-height:1.35}
.book-info p{color:#817a6f;font-size:.74rem}
.book-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:13px}
.book-badges span{padding:5px 8px;border-radius:999px;background:#f2ede2;color:#6f6c61;font-size:.62rem}
.book-badges .done{background:#e4eee1;color:#5f795e}
.book-actions{align-self:center;flex-direction:column}
#homeBooksGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
#homeBooksGrid .book-card{display:block;min-height:0;padding:14px}
#homeBooksGrid .book-cover{width:100%;height:210px;margin-bottom:15px}
#homeBooksGrid .book-actions{flex-direction:row;margin-top:14px}
.filter-empty{min-height:210px}

/* Orders */
.page-heading{margin-bottom:24px;padding:0 4px}
.page-heading .sec-title{margin:6px 0 7px}
.page-heading p{color:var(--t2);font-size:.84rem}
.orders-list{gap:14px}
.order-card{padding:21px 23px;border:1px solid #e5dccd;border-radius:21px;background:rgba(255,253,248,.9);box-shadow:0 10px 25px rgba(74,58,35,.06)}
.order-head{margin-bottom:11px;color:#6a665c}
.order-status{padding:5px 9px;border-radius:999px;background:#f1ede4}
.order-status.completed,.order-status.done{background:#e3eee0;color:#567355}

/* Magical generation */
.task-toast{right:26px;bottom:26px;width:min(430px,calc(100vw - 32px))}
.task-toast-card{overflow:hidden;padding:0 22px 20px;border:1px solid rgba(255,255,255,.18);border-radius:28px;background:#202e3b;color:#fff4d8;box-shadow:0 24px 70px rgba(25,31,40,.34)}
.task-toast-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 16% 20%,rgba(255,218,120,.12),transparent 34%),radial-gradient(circle at 85% 10%,rgba(145,189,197,.13),transparent 33%);pointer-events:none}
.task-toast-close{right:14px;top:14px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.17)}
.task-toast-close:hover{background:rgba(255,255,255,.18);color:#fff}
.magic-brew-scene{position:relative;height:128px;margin:0 -22px 18px;overflow:hidden;background:radial-gradient(ellipse at 50% 102%,rgba(255,194,79,.3),transparent 49%)}
.magic-owl{position:absolute;left:50%;bottom:29px;font-size:3.4rem;transform:translateX(-50%);filter:drop-shadow(0 8px 10px rgba(0,0,0,.25));animation:owlBob 2.2s ease-in-out infinite}
.magic-pot{position:absolute;left:50%;bottom:0;font-size:2.4rem;transform:translateX(-50%);filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))}
.magic-star{position:absolute;color:#ffd36c;text-shadow:0 0 12px rgba(255,211,108,.8);animation:starDrift 2.8s ease-in-out infinite}
.star-one{left:24%;top:32%;font-size:1.2rem}.star-two{right:23%;top:24%;font-size:1.45rem;animation-delay:-.9s}.star-three{right:35%;top:51%;font-size:.8rem;animation-delay:-1.8s}
@keyframes owlBob{50%{transform:translate(-50%,-5px) rotate(2deg)}}
@keyframes starDrift{50%{transform:translateY(-9px) scale(1.25);opacity:.65}}
.task-toast-copy{position:relative;padding-right:24px}
.task-toast .modal-icon{display:none}
.task-toast-card h3{margin:5px 0 7px;color:#fff9e9;font-family:'STKaiti','KaiTi','Songti SC',serif;font-size:1.25rem}
.task-toast-card #progStep{color:#cbd5d8;font-size:.78rem}
.prog-track{position:relative;display:flex;align-items:center;gap:12px;margin:17px 0}
.prog-bar{height:10px;flex:1;margin:0;background:rgba(255,255,255,.12)}
.prog-fill{background:#f2bd55;box-shadow:0 0 14px rgba(242,189,85,.55)}
.prog-pct{display:block;min-width:35px;color:#ffe0a0;font-size:.75rem;font-weight:800}
.magic-play{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:rgba(255,255,255,.07)}
.magic-play>div:first-child{display:flex;flex-direction:column;gap:3px}
.magic-play strong{color:#fff3cd;font-size:.75rem}.magic-play span{color:#bfc9cd;font-size:.64rem}
.magic-buttons{display:flex;gap:5px}
.magic-buttons button{width:34px;height:34px;border:1px solid rgba(255,228,158,.25);border-radius:12px;background:rgba(255,210,100,.1);color:#ffd774;font-size:1rem;cursor:pointer}
.magic-buttons button:hover{background:rgba(255,210,100,.2)}
.magic-buttons button.is-collected{animation:collectStar .55s ease}
@keyframes collectStar{50%{transform:translateY(-15px) scale(1.55);opacity:.35}}
#progDone,#progErr{position:relative;margin-top:14px}
.task-toast .btn-dl{background:#f2bd55;color:#4c3818}

/* Account / profile */
.modal-overlay{background:rgba(48,45,37,.42);backdrop-filter:blur(6px)}
.modal-card{border:1px solid #e1d8c8;border-radius:26px;background:#fffdf8;box-shadow:0 30px 90px rgba(48,40,28,.24)}
.account-card{width:min(720px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 32px));padding:24px}
.account-head{align-items:flex-start;padding:5px 5px 14px}
.account-head h3{margin-top:5px;color:#3d4b39;font-family:'STKaiti','KaiTi','Songti SC',serif;font-size:1.5rem}
.account-card>.acc-profile{position:relative;align-items:flex-start;min-height:148px;margin:0 0 22px;padding:27px 28px 24px 126px;border-radius:24px;background:#dfe8da;overflow:hidden}
.account-card>.acc-profile::after{content:'✦';position:absolute;right:28px;top:20px;color:rgba(255,255,255,.78);font-size:3rem;transform:rotate(14deg)}
.account-card .acc-avatar{position:absolute;left:27px;top:25px;width:78px;height:78px;background:#f0ba4d;box-shadow:0 8px 18px rgba(102,76,29,.18)}
.account-card .acc-name{margin-top:9px;color:#3d4b39;font-size:1.15rem}
.account-card .acc-badge{margin-top:7px;background:rgba(255,253,248,.7);color:#60705b}
.account-section-title{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}
.account-section-title>div{display:flex;align-items:baseline;gap:9px}.account-section-title span{font-size:.9rem;font-weight:800}.account-section-title small{color:var(--t2);font-size:.68rem}
.account-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.account-service-grid button{display:flex;min-width:0;min-height:110px;flex-direction:column;align-items:flex-start;padding:15px;border:1px solid #e5dccd;border-radius:18px;background:#fffaf0;color:var(--t);cursor:pointer;text-align:left}
.account-service-grid button:hover{border-color:#cfc1a8;background:#fffdf8;transform:translateY(-2px)}
.account-service-grid span{width:39px;height:39px;display:grid;place-items:center;margin-bottom:11px;border-radius:13px;background:#f3dfcf;font-size:1.1rem}
.account-service-grid button:nth-child(2) span{background:#dfe9dc}.account-service-grid button:nth-child(3) span{background:#f7e6ad}.account-service-grid button:nth-child(4) span{background:#dfebe9}
.account-service-grid b{font-size:.76rem}.account-service-grid small{margin-top:4px;color:var(--t2);font-size:.62rem;white-space:nowrap}
.acc-rows{overflow:hidden;margin-bottom:16px;border:1px solid #e6ddce;border-radius:17px;background:#fffaf2}
.acc-row{padding:12px 14px;border-bottom-color:#ece3d5}
.account-feedback-entry{display:flex;align-items:center;gap:11px;width:100%;margin-top:12px;padding:14px;border:1px solid #e5c77c;border-radius:17px;background:linear-gradient(100deg,#fff6d9,#fffaf0);color:#4d4638;font:inherit;text-align:left;cursor:pointer;box-shadow:0 5px 14px rgba(167,119,35,.1)}
.account-feedback-entry:hover{border-color:#c99d43;background:linear-gradient(100deg,#fff0bf,#fff8e5);transform:translateY(-1px)}
.account-feedback-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:14px;background:#f2b94d;font-size:1.2rem;box-shadow:0 4px 9px rgba(170,116,24,.18)}
.account-feedback-copy{display:grid;gap:4px;min-width:0;flex:1}.account-feedback-copy b{font-size:.93rem}.account-feedback-copy small{color:#76694f;font-size:.72rem;line-height:1.45}.account-feedback-action{flex:none;color:#9a6a20;font-size:.77rem;font-weight:800}
.addr-panel{padding-top:7px}
.m-close{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:#f2ecdf}
.m-head .auth-close{display:inline-flex;width:auto;height:auto;min-width:0;padding:3px 6px;align-items:center;justify-content:center;font-size:.72rem;line-height:1;white-space:nowrap;border-radius:6px}

/* Responsive */
@media(max-width:900px){
  .hero{min-height:430px;padding:44px 36px}
  .hero::after{background:linear-gradient(90deg,rgba(255,250,237,.97) 0%,rgba(255,250,237,.89) 48%,rgba(255,250,237,.23) 80%)}
  .hero-text{max-width:490px}.hero-text h1{font-size:2.75rem}
  .books-grid{grid-template-columns:1fr}
  #homeBooksGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-service-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
  :root{--navh:58px}
  body{padding-bottom:76px}
  .nav{top:auto;bottom:0;height:72px;border-top:1px solid #e2d8c8;border-bottom:0;box-shadow:0 -8px 24px rgba(64,50,31,.07)}
  .nav-inner{display:block;height:100%;padding:0}
  .nav-logo,.nav-right,.nav-toggle{display:none}
  .nav-links{position:static;display:grid!important;grid-template-columns:repeat(6,1fr);height:100%;padding:5px 5px 7px;border-radius:0;background:rgba(255,253,248,.94)}
  .nav-link{min-width:0;min-height:56px;flex-direction:column;justify-content:center;gap:4px;padding:5px 2px;border-radius:14px;font-size:.61rem}
  .nav-link-icon{width:1.12rem;height:1.12rem}.nav-account-mobile{display:flex}
  .main{margin-top:0}.page{padding:16px 0 34px}.pg-inner{padding:0 14px}
  .hero{min-height:560px;margin-bottom:38px;padding:26px 22px 245px;border-radius:27px;text-align:left}
  .hero::after{background:linear-gradient(180deg,rgba(255,250,237,.98) 0%,rgba(255,250,237,.93) 51%,rgba(255,250,237,.25) 77%,rgba(255,250,237,0) 100%)}
  .hero-text h1{font-size:2.05rem}.hero-text>p{font-size:.88rem;line-height:1.68}
  .hero-visual img{object-position:64% center}
  .hero-magic-note{right:16px;bottom:16px}
  .hero-trust{gap:7px 12px}.hero-trust span{font-size:.67rem}
  .btn-hero{width:100%;justify-content:center}
  .journey-head h2{font-size:1.6rem}
  .steps{flex-direction:column;gap:11px;padding:0}
  .step{min-height:126px;padding:19px 18px 17px 94px}
  .step-icon{position:absolute;left:18px;top:21px;width:57px;height:57px}
  .step-arrow{display:none}
  .step h3{margin-top:4px}.step-time{margin-top:8px}
  .quote-card{align-items:flex-start;margin-bottom:38px;text-align:left}
  #homeBooksGrid{display:flex;gap:13px;overflow-x:auto;padding:2px 2px 17px;scroll-snap-type:x mandatory}
  #homeBooksGrid .book-card{min-width:78vw;scroll-snap-align:start}
  .recent-title-row .sec-title{font-size:1.5rem}
  .form-card{padding:20px 17px}.package-cards{grid-template-columns:repeat(2,1fr)}
  .chat-fab{top:auto;right:14px;bottom:87px}
  .chat-modal{right:3vw;bottom:88px;width:94vw;height:min(520px,calc(100vh - 120px))}
  .library-hero{display:block;padding:25px 22px}.library-hero h2{font-size:1.8rem}
  .library-stats{justify-content:center;margin-top:22px;padding:15px 18px}
  .library-toolbar{align-items:stretch;flex-direction:column}.library-filters{display:grid;grid-template-columns:repeat(3,1fr)}
  .library-filter{padding:8px 7px}.library-create-link{text-align:center}
  .book-card{min-height:167px;gap:13px;padding:13px}.book-cover{width:106px;min-height:140px;flex-basis:106px;padding:14px 11px}
  .book-actions{gap:6px}.book-actions .btn{min-height:38px;padding:8px 10px;font-size:.7rem}
  .book-badges span:nth-child(2){display:none}
  .task-toast{left:12px;right:12px;bottom:86px;width:auto}.magic-brew-scene{height:105px}.magic-owl{font-size:2.8rem}.magic-pot{font-size:2rem}
  .magic-play{align-items:flex-start;flex-direction:column}.magic-buttons{width:100%;justify-content:flex-end}
  .account-card{width:100%;height:100%;max-height:none;border-radius:0;padding:17px}
  .account-card>.acc-profile{min-height:132px;padding:23px 20px 20px 112px}.account-card .acc-avatar{left:22px;top:22px;width:70px;height:70px}
  .account-service-grid{gap:8px}.account-service-grid button{min-height:100px;padding:13px}.account-service-grid small{white-space:normal}
  .account-feedback-entry{margin-top:10px;padding:13px}.account-feedback-copy small{font-size:.69rem}.account-feedback-action{font-size:.72rem}
  .site-legal-footer{padding-bottom:22px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  /* 抽签是用户主动触发的核心反馈，保留签筒摇动和签条落下动画。 */
  .fortune-stage.is-drawing .fortune-tube{animation-duration:.72s!important;animation-iteration-count:infinite!important}
  .fortune-stage.is-drawing .fortune-tube-body{animation-duration:.36s!important;animation-iteration-count:infinite!important}
  .fortune-stage.is-drawing .fortune-stick{animation-duration:.72s!important;animation-iteration-count:infinite!important}
  .fortune-stage.is-drawing::before{animation-duration:.72s!important;animation-iteration-count:infinite!important}
  .fortune-stage.has-result .fortune-stick{animation-duration:.55s!important;animation-iteration-count:1!important}
}