/* YueDu English / StoryStep: original purple identity, reading-first UI.
   Only layout and presentation; no data, permissions or payment overrides. */
:root{
  --yd-ink:#26234b;--yd-muted:#777493;--yd-violet:#6554d2;
  --yd-line:#e8e5f5;--yd-ice:#f8f7fd;--yd-round:20px
}
body:not(.dark){background:#f8f8fd}
body:not(.dark) #view{color:var(--yd-ink)}
#view .page-head{margin:0 0 18px;align-items:center}
#view .page-head h1{font-size:clamp(27px,2.3vw,34px);letter-spacing:-.9px;margin:6px 0}
#view .page-head p{font-size:13px;max-width:740px;color:#8984a3}
#view .page-head .eyebrow{font-size:10px;letter-spacing:2.1px;color:#7365d5}
.yd-library-intro{
 display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding:15px 19px;margin:10px 0 16px;border:1px solid #e5e0fb;
 border-radius:17px;background:linear-gradient(112deg,#eeebff 0%,#f7f7ff 56%,#fff 100%);
}
.yd-intro-text{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.yd-intro-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:12px;background:#6153c9;color:white;font-size:18px;box-shadow:0 6px 15px #6455c924}
.yd-intro-text strong{font-size:15px;font-weight:850;letter-spacing:-.25px}
.yd-intro-text>span:last-child{font-size:12px;color:#817d9e}
.yd-count-pill{flex:none;font-weight:850;font-size:18px;color:#604fc8;background:white;padding:9px 15px;border:1px solid #e2dcfa;border-radius:12px;white-space:nowrap}
.yd-count-pill small{font-size:10px;color:#8a83ae;font-weight:700}
#view .release-tabs{display:flex;align-items:center;gap:6px;margin:9px 0 12px;background:transparent;border:none;padding:0}
#view .release-tab{border:1px solid #e8e4f4;color:#777392;padding:10px 15px;background:#fff;border-radius:12px;box-shadow:none;font-size:12px;font-weight:750}
#view .release-tab.active{background:#6252ce;border-color:#6252ce;color:#fff;box-shadow:0 6px 14px #6657d02b}
#view .filter-panel{background:#fff;border-color:#e9e6f6;border-radius:21px;box-shadow:0 8px 25px #29235a08;padding:19px 22px;margin:10px 0 23px}
#view .filter-label strong{font-size:16px}
#view .filter-label span{font-size:11px;color:#a29eb2}
#view .filter-pills{gap:7px}
#view .filter-pill{border-radius:11px;min-height:36px;padding:0 13px;font-weight:800}
#view .filter-pill.selected{box-shadow:0 5px 13px #6355ce22}
#view .facet-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
#view .facet span{font-size:11px;font-weight:700;color:#817b9c}
#view .facet select{height:42px;min-height:42px;border-radius:11px;border-color:#e9e6f0;padding:0 13px;background:#fcfcff;font-size:12px;color:#464262}
#view .filter-end{padding-top:13px;border-top:1px solid #f0eef7}
#view .filter-end b{color:#5f50c9}
/* Readable cover-rich book cards, without incorrect external stock images. */
#view .reading-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;margin:20px 0 32px;align-items:stretch}
#view .reading-item.yd-story-card{
 display:flex;flex-direction:column;padding:0;min-width:0;min-height:0;gap:0;
 border:1px solid var(--yd-line);background:#fff;border-radius:21px;overflow:hidden;
 box-shadow:0 4px 18px #27245808;transform:translateY(0);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
#view .reading-item.yd-story-card:hover{transform:translateY(-4px);box-shadow:0 17px 36px #3024641a;border-color:#d5cef2}
#view .yd-story-card:focus-visible{outline:3px solid #8f80ff;outline-offset:3px}
#view .yd-story-cover{
 position:relative;isolation:isolate;display:block;width:100%;height:146px;flex:none;
 overflow:hidden;background:linear-gradient(125deg,#cbc3fc,#ebe6ff);border-radius:20px 20px 0 0
}
#view .yd-story-cover::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:
 radial-gradient(circle at 82% 13%,#ffffff9c 0 10%,transparent 10.5%),
 radial-gradient(circle at 19% 87%,#ffffff61 0 26%,transparent 26.5%),
 repeating-linear-gradient(130deg,#ffffff12 0 3px,transparent 3px 28px)}
#view .yd-scene-school{background:linear-gradient(125deg,#b1d0ff,#dfecff 54%,#d8e1fe)}
#view .yd-scene-travel{background:linear-gradient(125deg,#abdbdf,#d6f2e3 57%,#ebf4c9)}
#view .yd-scene-culture{background:linear-gradient(125deg,#f3d7ae,#f9e8d1 60%,#eabfd0)}
#view .yd-scene-emotion{background:linear-gradient(125deg,#efbed7,#ffe5ed 57%,#d9c9fd)}
#view .yd-scene-science{background:linear-gradient(125deg,#a9c5f5,#dadcfb 60%,#e5d0ff)}
#view .yd-scene-nature{background:linear-gradient(125deg,#a4d7ba,#ddf1d5 62%,#d9eadb)}
#view .yd-scene-work{background:linear-gradient(125deg,#e2c5b7,#ffebd8 59%,#ebd7da)}
#view .yd-scene-daily{background:linear-gradient(125deg,#cac0ff,#eee4fa 61%,#e1dbff)}
#view .yd-story-cover .yd-story-sky{position:absolute;left:-25px;bottom:-92px;width:200px;height:200px;border:1px solid #ffffff78;border-radius:50%;box-shadow:0 0 0 23px #ffffff16,0 0 0 48px #ffffff12}
#view .yd-story-emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-43%) rotate(-6deg);font-size:74px;line-height:1;filter:drop-shadow(0 15px 12px #29224f2a);pointer-events:none}
#view .yd-story-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
#view .yd-story-card:hover .yd-story-photo img{transform:scale(1.045)}
#view .yd-story-cover-level{position:absolute;z-index:2;left:14px;top:13px;display:grid;place-items:center;height:27px;min-width:38px;padding:0 8px;border-radius:10px;background:#fffffff0;color:#6253c7;box-shadow:0 2px 9px #28244e18;font-size:12px;font-weight:900}
#view .yd-story-cover-kicker{position:absolute;bottom:11px;right:13px;background:#ffffffdf;backdrop-filter:blur(7px);border-radius:8px;padding:5px 9px;color:#524d75;letter-spacing:1px;font-size:8px;font-weight:800}
#view .yd-story-copy{padding:16px 17px 14px;display:flex;flex-direction:column;gap:0;min-height:199px;flex:1;width:100%}
#view .yd-story-titles{min-width:0;display:flex;flex-direction:column;gap:4px}
#view .yd-story-titles strong.yd-story-zh{display:block;font-size:17px;line-height:1.35;font-weight:850;letter-spacing:-.3px;overflow-wrap:anywhere;margin:0}
#view .yd-story-titles .yd-story-en{display:block;font-size:12px;line-height:1.35;font-family:Georgia,'Times New Roman',serif;color:#6859c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin:0}
#view .yd-story-desc{margin:10px 0 0;font-size:12px;line-height:1.5;color:#8986a2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:36px;flex:0 0 auto}
#view .yd-story-info{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#view .yd-story-info>span{border-radius:8px;background:#f5f3fc;color:#746e97;padding:4px 7px;font-size:10px;line-height:1.3}
#view .yd-story-progress{height:5px;background:#eeeafd;border-radius:5px;overflow:hidden;margin-top:11px;width:100%}
#view .yd-story-progress i{display:block;height:100%;background:linear-gradient(90deg,#6958d8,#9d8eff);border-radius:5px}
#view .yd-story-footer{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:auto;padding-top:14px}
#view .yd-story-footer .yuedu-card-votes{margin:0;max-width:75%}
#view .yd-story-footer .yuedu-reactions{gap:5px}
#view .yd-story-footer .yuedu-reactions button{padding:6px 8px;min-width:42px;font-size:11px}
#view .yd-story-footer .yuedu-reactions .heart-icon,#view .yd-story-footer .yuedu-reactions .broken-icon{font-size:15px}
#view .yd-open-hint{font-size:10px;font-weight:800;color:#6958d1;white-space:nowrap;transition:transform .15s}
#view .yd-story-card:hover .yd-open-hint{transform:translateX(2px)}
/* Homepage: Duolingo-inspired clarity and tactile affordances, original YueDu visuals. */
#view .v8-level{border-radius:19px;transition:transform .18s,box-shadow .18s}
#view .v8-level:hover{transform:translateY(-3px);box-shadow:0 10px 22px #31256b19}
#view .v8-hero{box-shadow:0 10px 28px #5c4cb20e}
#view .v8-feature-grid .v8-book-card{border-radius:20px;transition:transform .19s,box-shadow .19s}
#view .v8-feature-grid .v8-book-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #3029661b}
#view .v8-hero-search button,#view .v8-hero-continue button{box-shadow:0 4px 0 #4a3db1;transition:transform .12s,box-shadow .12s}
#view .v8-hero-search button:active,#view .v8-hero-continue button:active{transform:translateY(2px);box-shadow:0 2px 0 #4a3db1}
#view .v11-forum .v11-side-card{border-radius:18px;box-shadow:0 6px 20px #29235a09}
/* Tablet and compact desktop: cards remain complete with sensible density. */
@media(max-width:1100px){
 #view .reading-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
 #view .facet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #view .yd-story-cover{height:155px}
}
@media(max-width:700px){
 body:not(.dark){background:#fafaff}
 #view{padding-left:15px!important;padding-right:15px!important}
 #view .page-head{align-items:flex-start;flex-direction:column;gap:10px;margin:0 0 12px}
 #view .page-head h1{font-size:25px;line-height:1.24}
 #view .page-head p{font-size:12px}
 #view .yd-library-intro{padding:12px 13px;border-radius:15px;margin:9px 0 12px;align-items:flex-start}
 #view .yd-intro-text{gap:5px 8px}
 #view .yd-intro-icon{width:30px;height:30px;font-size:16px}
 #view .yd-intro-text strong{font-size:13px;max-width:calc(100% - 38px)}
 #view .yd-intro-text>span:last-child{width:100%;padding-left:38px;font-size:10px}
 #view .yd-count-pill{font-size:14px;padding:7px 9px}
 #view .yd-count-pill small{display:block;font-size:8px;text-align:center}
 #view .filter-panel{padding:15px 13px;border-radius:17px;margin:8px 0 16px}
 #view .filter-label{align-items:flex-start;gap:3px}
 #view .filter-label strong{font-size:14px}
 #view .filter-label span{font-size:10px}
 #view .filter-pills{display:flex;gap:5px;overflow-x:auto;padding:2px 0 7px;scrollbar-width:thin;flex-wrap:nowrap}
 #view .filter-pill{flex:none;white-space:nowrap;min-height:34px;padding:0 12px;font-size:11px}
 #view .facet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:9px 0 14px}
 #view .facet span{font-size:10px}
 #view .facet select{min-height:38px;height:38px;font-size:11px;padding:0 8px;max-width:100%}
 #view .filter-end{font-size:11px;flex-wrap:wrap}
 #view .reading-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:14px;margin-top:14px}
 #view .reading-item.yd-story-card{border-radius:17px}
 #view .yd-story-cover{height:152px;border-radius:16px 16px 0 0}
 #view .yd-story-copy{min-height:0;padding:14px 15px 13px}
 #view .yd-story-titles strong.yd-story-zh{font-size:17px}
 #view .yd-story-desc{min-height:0;font-size:11px}
 #view .yd-story-footer{padding-top:10px}
 #view .v8-hero{border-radius:22px;overflow:hidden}
 #view .v8-feature-grid{gap:13px}
 #view .v11-forum .v11-forum-toolbar{padding:12px}
}
@media(max-width:370px){
 #view .yd-intro-text>span:last-child{padding-left:0}
 #view .yd-story-cover{height:137px}
 #view .yd-count-pill{padding:6px}
 #view .reading-grid{gap:11px}
}
/* Compatible with the existing dark theme. */
body.dark #view .yd-story-card,body.dark #view .filter-panel,body.dark #view .release-tab{background:var(--surface);border-color:var(--border)}
body.dark #view .yd-library-intro{background:linear-gradient(110deg,#312956,#22233a);border-color:#51477b}
body.dark #view .yd-story-info>span{background:#312c4c;color:#c9c2e9}
body.dark #view .yd-story-desc{color:#b1accb}
body.dark #view .yd-count-pill{background:#333052;border-color:#534b7a}
body.dark #view .yd-story-titles .yd-story-en{color:#b5a9ff}
@media(prefers-reduced-motion:reduce){#view .yd-story-card,#view .yd-story-photo img,#view .v8-level,#view .yd-open-hint{transition:none!important;transform:none!important}}
/* The temporary deployment-status banner overlaps mobile navigation and the puppy.
   Feature availability is still enforced server-side and explained on attempted use. */
#yuedu-preview-banner{display:none!important}