:root{--ink:#352219;--muted:#8a7665;--red:#a6241e;--red-deep:#781816;--red-light:#c44933;--gold:#be8b43;--pale:#fdf5e9;--white:#fffdf8;--line:#ead8bb;--cream:#f6e8d2;--bg:#f7f0e5;--shadow:0 16px 42px #6b331619;--serif:"Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;--sans:"Microsoft YaHei","PingFang SC",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);background:radial-gradient(ellipse at 0 18%,#fff9ef 0,transparent 44%),radial-gradient(ellipse at 100% 30%,#f1e0c1 0,transparent 38%),var(--bg)}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img{max-width:100%;display:block}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #df995d;outline-offset:2px}.shell{width:min(1336px,calc(100% - 72px));margin:auto}.demo-ribbon{height:30px;background:#49251e;color:#f7dfc1;font-size:11px;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.4px}.tiny-dot{height:6px;width:6px;border-radius:50%;background:#ffc773}.demo-ribbon-tail{opacity:.65;margin-left:18px}.site-header{position:sticky;top:0;z-index:30;background:#fff9f1f5;border-bottom:2px solid #d5b47e;box-shadow:0 3px 16px #5b37100c;backdrop-filter:blur(12px)}.head-inner{height:75px;display:flex;align-items:center;gap:21px}.brand{display:flex;gap:10px;align-items:center;flex-shrink:0}.brand-emblem{width:43px;height:45px;display:grid;place-items:center;background:linear-gradient(135deg,#c23b2b,#7d1919);border:2px solid #d5aa66;outline:1px solid #f1d4a9;outline-offset:-6px;color:#fbe0a1;border-radius:9px;box-shadow:0 4px 9px #651d1f23;font-family:var(--serif);font-size:27px;font-weight:900}.brand strong{display:block;font:900 23px var(--serif);letter-spacing:1px}.brand small{font-size:10px;color:#96785f;display:block;letter-spacing:1.8px;margin-top:4px}.main-nav{display:flex;align-self:stretch;align-items:center;gap:3px;margin-left:auto}.main-nav a{padding:26px 12px;font-size:13px;font-weight:600;white-space:nowrap;position:relative}.main-nav a.active,.main-nav a:hover{color:var(--red)}.main-nav a.active:after{content:"";height:3px;background:var(--red);position:absolute;bottom:0;left:14px;right:14px;border-radius:3px}.header-search{display:flex;min-width:144px;max-width:190px;align-items:center;border:1px solid #dfceb3;border-radius:30px;background:#fffaf2;height:36px}.header-search input{width:100%;min-width:0;padding:0 4px 0 14px;border:0;background:none;outline:none;font-size:12px}.header-search button{border:0;background:none;color:#8b5133;font-size:24px;line-height:1;padding-right:10px}.head-admin{flex-shrink:0;border:1px solid #dfcba9;border-radius:8px;background:#fff4e5;padding:9px 11px;font-size:12px;color:#90402e}.menu-toggle{display:none;border:1px solid var(--line);background:#fff8ed;border-radius:8px;padding:6px 10px}.hero-wrap{position:relative;overflow:hidden;background:linear-gradient(98deg,#fff8eaf5 0%,#fff7e7ee 40%,#ffefcf99 65%,#d8b07b55 100%);border-bottom:3px solid #e3c399}.hero-ornament{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 23% 80%,#f5ead242,transparent 55%),repeating-linear-gradient(105deg,transparent 0,transparent 98px,#c69a4310 99px,#c69a4310 100px)}.hero-inner{position:relative;min-height:445px;display:flex;align-items:center}.hero-copy{padding:40px 0 43px;position:relative;z-index:2;width:56%}.eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:5px;color:#af532d}.eyebrow:before,.eyebrow:after{content:"";height:1px;width:27px;background:#cfa869}.hero h1{font:900 clamp(45px,5vw,72px)/1.17 var(--serif);letter-spacing:3px;color:#5c211b;margin:19px 0 0;text-shadow:0 2px #fff6e5}.hero h1 span{display:block;color:#a12620}.hero-lead{margin:18px 0 28px;color:#6f5847;font-size:15px;line-height:2}.hero-actions{display:flex;align-items:center;gap:14px}.btn{border:1px solid #cfa56a;border-radius:9px;padding:13px 21px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:14px;transition:transform .18s,box-shadow .18s;color:#61281c;background:#fff9ed;box-shadow:0 4px 10px #6d32130f}.btn:hover,.class-card:hover,.article-tile:hover{transform:translateY(-2px)}.btn-red{color:#fff9eb;border-color:#aa2c21;background:linear-gradient(135deg,#c3452f,#8d211c);box-shadow:0 8px 15px #a1272442}.btn-gold{background:linear-gradient(135deg,#fff8e7,#f4dcae);color:#793918;border-color:#caa36b}.btn-plain{background:#fff;border-color:#e2d1b6}.btn-sm{padding:9px 14px;font-size:12px}.hero-stat{margin-top:30px;display:flex;align-items:center;gap:29px}.hero-stat div{padding-right:28px;border-right:1px solid #dfc7a7}.hero-stat div:last-child{border:0}.hero-stat b{color:#a32b24;font:900 25px var(--serif);display:block}.hero-stat small{color:#977e64;font-size:11px}.hero-art{position:absolute;right:-78px;top:0;width:62%;height:100%;background:url('/v4-assets/hero-warrior.webp') center 43%/cover no-repeat;mask-image:linear-gradient(90deg,transparent 0%,#000 21%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 21%,#000 100%)}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#e5bd8126,transparent 35%)}.hero-mark{display:none;position:absolute;right:10px;bottom:17px;writing-mode:vertical-rl;font:700 18px var(--serif);color:#782b25;letter-spacing:10px;z-index:2}.body-main{padding:23px 0 65px}.section{margin-bottom:26px}.section-title{display:flex;align-items:center;gap:12px;margin:0 0 17px}.section-title h2{font:900 25px var(--serif);margin:0;white-space:nowrap}.section-title:before{content:"";width:5px;height:27px;border-radius:3px;background:linear-gradient(#db5341,#951818)}.section-sub{font-size:12px;color:#987a5d}.section-title a,.section-title .more{margin-left:auto;font-size:12px;color:#ae3826;font-weight:700}.section-panel{padding:21px 23px;background:linear-gradient(128deg,#fffdf8,#fff7e9);border:1px solid #e4ceab;box-shadow:var(--shadow);border-radius:14px;position:relative}.section-panel:before,.section-panel:after{content:"✦";position:absolute;color:#d4b079;font-size:18px}.section-panel:before{top:3px;left:8px}.section-panel:after{bottom:3px;right:8px}.class-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.class-card{border:1px solid #e5cfab;border-radius:10px;overflow:hidden;background:#fff9ed;position:relative;text-align:left;transition:transform .18s,box-shadow .18s;box-shadow:0 4px 10px #562e1510}.class-card img{width:100%;height:136px;object-fit:cover;object-position:center 32%;filter:saturate(.92)}.class-card-body{padding:10px 11px 11px}.class-card h3{font:900 21px var(--serif);margin:0 0 6px;color:#79351f}.class-card p{margin:0;color:#8e7763;font-size:11px;line-height:1.4}.class-card .see{display:block;text-align:right;font-size:11px;color:#b1432a;font-weight:700;margin-top:8px}.class-glyph{position:absolute;left:8px;top:8px;border:1px solid #eed3a1;background:#8b2f20dc;color:white;font-family:var(--serif);font-size:13px;padding:6px;border-radius:6px}.front-layout{display:grid;grid-template-columns:minmax(0,1.66fr) minmax(330px,.76fr);gap:20px}.article-grid{display:grid;grid-template-columns:42% 1fr;gap:17px}.featured-article{border-radius:9px;overflow:hidden;min-height:262px;position:relative;display:flex;align-items:end;background:#2b221d}.featured-article img{height:100%;width:100%;object-fit:cover;position:absolute;inset:0}.featured-article:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#220f0fd9,transparent 72%)}.featured-article .featured-content{z-index:1;color:#fff;padding:16px 18px}.featured-content h3{font:900 20px var(--serif);margin:8px 0}.featured-content p{font-size:12px;line-height:1.6;opacity:.85;margin:0}.hot-label{padding:3px 8px;background:#bc332a;color:#fff;border-radius:3px;font-size:11px;display:inline-block}.article-links{display:flex;flex-direction:column;gap:0}.article-link{padding:9px 0;border-bottom:1px solid #eddcc2;display:flex;gap:9px;align-items:flex-start;cursor:pointer}.article-link:hover h3{color:var(--red)}.article-link .tag{padding:3px 6px;color:#ad3722;background:#ffebd6;border-radius:4px;font-size:10px;white-space:nowrap}.article-link h3{font-size:13px;margin:1px 0 5px;line-height:1.5;font-weight:700}.article-link time{font-size:11px;color:#af9a80}.article-link:last-child{border:0}.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.topic-card{border-radius:8px;overflow:hidden;position:relative;height:105px;background:#7f4b29;color:white;display:flex;align-items:end;padding:11px;box-shadow:inset 0 -50px 40px #28140fb4}.topic-card img{height:100%;width:100%;object-fit:cover;position:absolute;inset:0;z-index:0;filter:brightness(.66)}.topic-card span{z-index:1;font:700 15px var(--serif);text-shadow:0 2px 4px black}.aside-stack{display:flex;flex-direction:column;gap:20px}.download-card{background:linear-gradient(130deg,#fff9ed,#f7e4be);border:1px solid #dbb67e;border-radius:14px;padding:18px 21px;box-shadow:var(--shadow)}.download-card-title{font:900 22px var(--serif);color:#7c2d1f;border-bottom:1px solid #e8ca98;padding-bottom:9px;margin-bottom:13px}.download-card .btn{width:100%;margin-bottom:10px;justify-content:center}.fine-print{font-size:11px;color:#937e63;line-height:1.6}.server-card{border-radius:13px;background:#fffbf3;border:1px solid #e4cdad;padding:16px 18px;box-shadow:var(--shadow)}.server-card-title{font:900 20px var(--serif);color:#832e21;border-bottom:1px solid #e4c99e;padding-bottom:10px;margin-bottom:12px}.server-table{width:100%;border-collapse:collapse;font-size:12px}.server-table th{background:#f6ead8;color:#806347;text-align:left}.server-table td,.server-table th{padding:10px 7px;border-bottom:1px solid #eddfc8}.server-table tbody tr:last-child td{border-bottom:0}.empty-mini{color:#8c7968;font-size:12px;padding:18px 5px;line-height:1.8}.more-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:21px}.strip-card{background:#793420;border-radius:10px;overflow:hidden;position:relative;min-height:96px;color:white;padding:19px 16px;display:flex;align-items:center;justify-content:space-between}.strip-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5)}.strip-card>div,.strip-card>b{position:relative;z-index:1}.strip-card h3{font:900 19px var(--serif);margin:0 0 5px}.strip-card p{font-size:12px;color:#fff0d6;margin:0}.strip-card b{font-size:22px;color:#f4d496}.page-head{padding:45px 0 40px;background:radial-gradient(ellipse at 75% 60%,#f6dcb393,transparent 40%),linear-gradient(110deg,#fffbf3,#f7e8d0);border-bottom:1px solid #e7cfac}.page-head h1{font:900 39px var(--serif);color:#702d24;margin:9px 0}.page-head p{color:#8d7865;font-size:14px;line-height:1.8;margin:0}.breadcrumb{font-size:12px;color:#a07f60}.breadcrumb a:hover{color:var(--red)}.page-wrap{padding:28px 0 70px}.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:25px}.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.filter-pill{border:1px solid #e5d3b8;background:#fffdf7;color:#6e5140;font-size:13px;padding:9px 16px;border-radius:28px}.filter-pill.active{color:#fff;background:#9e2c24;border-color:#9e2c24}.article-list{display:grid;gap:13px}.article-tile{display:grid;grid-template-columns:155px minmax(0,1fr);gap:19px;border:1px solid #ead7bc;background:#fffcf6;border-radius:11px;padding:15px;transition:transform .18s}.article-tile img{height:119px;width:155px;object-fit:cover;border-radius:7px}.article-tile h2{font:900 20px var(--serif);margin:7px 0 8px}.article-tile p{font-size:13px;color:#8a7763;line-height:1.65;margin:0 0 9px}.article-tile small{font-size:11px;color:#a58c71}.tag-badge{font-size:11px;color:#a53928;background:#ffede1;border:1px solid #f4d4c1;border-radius:5px;padding:4px 8px}.article-detail{background:#fffdf7;border:1px solid #ead4b4;padding:38px 47px;border-radius:14px;box-shadow:var(--shadow)}.detail-title{font:900 36px/1.35 var(--serif);margin:22px 0 16px;color:#693021}.detail-meta{border-bottom:1px solid #e9d6b7;padding-bottom:18px;color:#9e866d;font-size:12px;display:flex;gap:20px;flex-wrap:wrap}.detail-summary{margin:26px 0;padding:20px;background:#fbf1e0;border-left:4px solid #b63b2e;color:#715947;font-size:14px;line-height:2}.article-body{font-size:16px;line-height:2.15;color:#4e3d32;overflow-wrap:anywhere}.article-body h2{font:900 24px var(--serif);color:#8d2c24;margin-top:28px}.article-body p{margin:14px 0}.detail-bottom{border-top:1px solid #ead7b9;margin-top:30px;padding-top:20px;display:flex;gap:12px;flex-wrap:wrap}.class-directory{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.class-directory .class-card img{height:215px}.class-directory .class-card-body{padding:16px}.class-directory .class-card h3{font-size:26px}.class-directory .class-card p{font-size:13px}.footer{background:#43251e;color:#f4ddc6}.footer-inner{padding:36px 0;display:flex;justify-content:space-between;gap:20px}.footer-logo{font:900 23px var(--serif)}.footer-logo span{color:#e6be7a}.footer p{color:#cdb5a6;font-size:12px}.footer a{margin-left:22px;color:#f6e7d3;font-size:12px}.footer-note{border-top:1px solid #715045;padding:17px 0;color:#c49f89;font-size:11px}.modal-backdrop{position:fixed;inset:0;background:#2a1b1ab8;z-index:70;display:flex;align-items:center;justify-content:center;padding:15px}.modal-backdrop[hidden]{display:none}.modal-card{background:#fffcf5;border:1px solid #f6d9a5;padding:29px;border-radius:15px;width:min(490px,100%);position:relative;box-shadow:0 30px 100px #0006}.modal-card h2{font:900 25px var(--serif);margin:0 0 14px;color:#8b2b24}.modal-card p{font-size:14px;color:#7a6655;line-height:1.8}.modal-close{position:absolute;right:12px;top:10px;border:0;background:none;color:#855c4f;font-size:27px}.toast{position:fixed;bottom:22px;right:24px;z-index:90;color:#fff;background:#42251c;padding:12px 18px;border:1px solid #dca958;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;font-size:12px}.toast.show{opacity:1;transform:translateY(0)}
/* Local admin demo */
.admin-layout{display:grid;grid-template-columns:225px minmax(0,1fr);min-height:760px;gap:23px}.admin-menu{background:#48261e;color:#f5dfca;border:1px solid #a77347;border-radius:12px;padding:17px;align-self:start;position:sticky;top:106px}.admin-menu strong{display:block;font:900 22px var(--serif);margin:4px 5px 18px}.admin-menu a{display:block;border-radius:8px;font-size:13px;padding:13px 12px;margin-bottom:3px}.admin-menu a.active,.admin-menu a:hover{background:#aa3629;color:#fff}.admin-content{min-width:0}.admin-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:21px}.admin-title h1{font:900 29px var(--serif);margin:0}.admin-panel{background:#fffdf7;border:1px solid #e9d4b7;border-radius:12px;padding:24px;margin-bottom:18px}.admin-warning{border:1px solid #edcb9f;background:#fff2d9;color:#895229;padding:13px 16px;border-radius:9px;font-size:12px;line-height:1.7;margin-bottom:19px}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:19px}.stat-card{background:#fffdf7;border:1px solid #e7d6bb;border-radius:11px;padding:21px}.stat-card small{font-size:12px;color:#92755c}.stat-card b{font:900 29px var(--serif);display:block;color:#a32d22;margin-top:9px}.admin-table{border-collapse:collapse;width:100%;font-size:13px}.admin-table th{background:#f8ecda;color:#6f5140;text-align:left}.admin-table td,.admin-table th{border-bottom:1px solid #efe0cc;padding:13px 10px}.admin-table td{line-height:1.55}.admin-table .operate{display:flex;gap:6px;flex-wrap:wrap}.textbtn{border:0;background:none;padding:3px 5px;color:#a42e23;font-size:12px}.textbtn.danger{color:#bd2727}.admin-toolbar{display:flex;gap:9px;margin-bottom:15px;flex-wrap:wrap}.admin-toolbar input,.admin-toolbar select{border:1px solid #ddcaad;background:white;border-radius:7px;padding:10px;font-size:13px;max-width:230px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-row{display:flex;flex-direction:column;gap:7px;margin-bottom:13px;font-size:13px;font-weight:700;color:#6c4e3c}.form-row.full{grid-column:1/-1}.form-row input,.form-row textarea,.form-row select{width:100%;background:white;border:1px solid #d9c9b3;border-radius:7px;padding:11px 12px;font-size:13px;color:#3b2822;font-weight:400}.form-row textarea{min-height:100px;resize:vertical}.form-row textarea.body-edit{min-height:235px;line-height:1.7}.field-hint{font-size:11px;color:#988270;font-weight:400}.form-actions{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap}.preview-code{background:#2c2928;color:#e5ead8;border-radius:9px;padding:15px;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 Consolas,monospace;max-height:400px;overflow:auto}.small-note{font-size:12px;color:#977f6e;line-height:1.7}.alert-empty{border:1px dashed #dabf9b;border-radius:10px;background:#fffaf1;color:#99806b;text-align:center;padding:35px 15px;line-height:1.8}.seo-preview{background:#fff;border:1px solid #e1d5c4;border-radius:9px;padding:17px}.seo-preview .blue{color:#1656b1;font-size:19px}.seo-preview .green{color:#367449;font-size:12px;margin:5px 0}.seo-preview p{color:#666;font-size:13px;line-height:1.6}.label-small{font-size:11px;color:#977e63}.badge-mini{display:inline-block;font-size:11px;border-radius:5px;padding:3px 8px;background:#f2e6d5;color:#855532}.badge-mini.published{background:#e3f3e8;color:#317650}.badge-mini.draft{background:#f0ebe3}.badge-mini.scheduled{background:#ffeed2;color:#9d6420}
@media(max-width:1180px){.shell{width:min(1150px,calc(100% - 42px))}.main-nav a{padding-left:8px;padding-right:8px}.brand strong{font-size:20px}.hero-art{right:-90px}.class-grid{grid-template-columns:repeat(3,1fr)}.class-card img{height:163px}.hero-copy{width:59%}.article-grid{grid-template-columns:40% 1fr}}
@media(max-width:850px){.head-inner{height:67px;gap:9px}.head-admin{margin-left:auto}.menu-toggle{display:block}.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fffaf2;align-items:stretch;box-shadow:0 10px 25px #44251426;padding:9px 18px 16px;flex-direction:column;gap:0}.main-nav.open{display:flex}.main-nav a{padding:12px}.header-search{max-width:190px;flex:1;margin-left:auto}.hero-copy{width:62%}.hero h1{font-size:45px}.hero-art{right:-140px}.front-layout,.catalog-layout{grid-template-columns:1fr}.aside-stack{display:grid;grid-template-columns:1fr 1fr}.more-strip{grid-template-columns:repeat(2,1fr)}.admin-layout{grid-template-columns:1fr}.admin-menu{position:static;display:flex;flex-wrap:wrap;gap:5px}.admin-menu strong{width:100%}.admin-menu a{display:inline-block}}
@media(max-width:620px){.shell{width:calc(100% - 28px)}.demo-ribbon{font-size:10px}.demo-ribbon-tail{display:none}.header-search{display:none}.brand strong{font-size:18px}.brand small{font-size:8px}.brand-emblem{width:36px;height:39px;font-size:22px}.hero-inner{min-height:550px;align-items:flex-start}.hero-copy{width:100%;padding:28px 0 17px}.hero h1{font-size:42px;letter-spacing:0}.hero-lead{font-size:12px;max-width:310px;line-height:1.8;margin:12px 0 19px}.hero-art{right:-48px;top:auto;bottom:0;width:94%;height:265px;background-position:center 25%;mask-image:linear-gradient(0deg,#000 0%,#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(0deg,#000 0%,#000 70%,transparent 100%)}.hero-mark{display:none}.hero-actions{gap:8px}.hero-actions .btn{padding:11px 13px;font-size:12px}.hero-stat{gap:11px;margin-top:17px}.hero-stat div{padding-right:10px}.hero-stat b{font-size:20px}.hero-stat small{font-size:10px}.section-panel{padding:15px 13px}.section-title{gap:7px}.section-title h2{font-size:21px}.section-sub{display:none}.class-grid{grid-template-columns:repeat(2,1fr);gap:9px}.class-card img{height:121px}.class-card h3{font-size:19px}.class-card-body{padding:8px}.article-grid{grid-template-columns:1fr}.featured-article{min-height:180px}.article-link{padding:10px 1px}.aside-stack{grid-template-columns:1fr}.topic-card{height:80px;padding:8px}.topic-card span{font-size:12px}.more-strip{gap:8px}.strip-card{padding:12px;min-height:85px}.strip-card h3{font-size:15px}.strip-card p{font-size:10px}.page-head{padding:27px 0}.page-head h1{font-size:29px}.page-wrap{padding-top:16px}.article-tile{grid-template-columns:105px 1fr;gap:11px;padding:9px}.article-tile img{width:105px;height:115px}.article-tile h2{font-size:16px}.article-tile p{font-size:11px;line-height:1.4}.class-directory{grid-template-columns:repeat(2,1fr);gap:9px}.class-directory .class-card img{height:130px}.class-directory .class-card h3{font-size:21px}.article-detail{padding:24px 18px}.detail-title{font-size:27px}.article-body{font-size:14px}.footer-inner{display:block}.footer a{margin:0 18px 0 0}.admin-stats{grid-template-columns:repeat(2,1fr)}.admin-menu{padding:10px}.admin-menu strong{font-size:18px;margin-bottom:5px}.admin-menu a{font-size:11px;padding:9px}.admin-panel{padding:14px;overflow-x:auto}.admin-title h1{font-size:23px}.admin-table{min-width:530px}.form-grid{grid-template-columns:1fr}.head-admin{padding:7px;font-size:11px}}

.class-directory .class-grid{display:contents}
/* 第三版的朱红鎏金视觉细节：以真实 DOM/CSS 组件呈现，不拿效果图铺背景 */
.main-nav a.active{color:#fff6db;background:linear-gradient(180deg,#a72e25,#831c1c);border-left:1px solid #d3a668;border-right:1px solid #d3a668;box-shadow:inset 0 0 0 1px #be6f3e}
.main-nav a.active:after{background:#e5bd6f;left:0;right:0}
.front-layout .section-title h2{color:#fff3d7;background:linear-gradient(110deg,#8d201e,#b43b2a 80%,#913023);border:1px solid #d5aa68;box-shadow:0 3px 9px #8c311727;padding:6px 22px 7px 15px;clip-path:polygon(0 0,100% 0,95% 100%,0 100%);font-size:22px}
.front-layout .section-title:before{display:none}
.download-card-title,.server-card-title{position:relative}
.download-card-title:before,.server-card-title:before{content:'✦';color:#c39457;margin-right:7px}
@media(max-width:620px){.front-layout .section-title h2{font-size:19px;padding:6px 15px}.main-nav a.active{color:#fff3d7}}

/* V4.1: character-focused hero composition with soft looping fabric motion. */
.hero-inner{isolation:isolate}
.hero-art{
  right:-134px;top:0;width:66%;height:100%;
  background-image:url('/v4-assets/hero-warrior.webp');
  background-repeat:no-repeat;background-size:cover;background-position:left 43%;
  overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 8%,#000 28%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 8%,#000 28%,#000 100%);
}
.hero-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left 43%;display:block;z-index:0}
.hero-art:after{z-index:1;pointer-events:none}
.hero-motes{position:absolute;inset:0;pointer-events:none;z-index:2}
.hero-motes i{position:absolute;width:5px;height:11px;border-radius:3px 9px;background:#ffd69a;opacity:0;filter:blur(.4px);animation:heroDust 7s linear infinite;will-change:transform,opacity}
.hero-motes i:nth-child(1){left:45%;bottom:8%;animation-delay:-.3s}
.hero-motes i:nth-child(2){left:71%;bottom:2%;animation-delay:-3.2s;scale:.7}
.hero-motes i:nth-child(3){left:85%;bottom:16%;animation-delay:-5s;scale:.5}
.hero-motes i:nth-child(4){left:61%;bottom:13%;animation-delay:-1.7s;scale:.65}
.hero-motes i:nth-child(5){left:93%;bottom:24%;animation-delay:-4.2s;scale:.9}
@keyframes heroDust{0%{opacity:0;transform:translate3d(0,12px,0) rotate(-24deg)}18%{opacity:.7}65%{opacity:.42}100%{opacity:0;transform:translate3d(-37px,-125px,0) rotate(46deg)}}
@media(max-width:1180px){.hero-art{right:-150px;width:68%}}
@media(max-width:850px){.hero-art{right:-92px;width:69%}}
@media(max-width:620px){
 .hero-inner{min-height:578px}
 .hero-art{right:0;bottom:0;top:auto;width:100%;height:297px;background-position:left 37%;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 75%,transparent 100%);
  mask-image:linear-gradient(0deg,#000 0%,#000 75%,transparent 100%)}
 .hero-motion{object-position:left 37%}
 .hero-motes i:nth-child(n+4){display:none}
}
@media(prefers-reduced-motion:reduce){
 .hero-motion{display:none}
 .hero-motes{display:none}
}


/* V4.2: extra subtle hair motion layer so the character feels more alive. */
.hero-hair{
  position:absolute; z-index:1; pointer-events:none;
  left:20.6%; top:1.8%; width:34%; height:33%;
  background-image:url('/v4-assets/hero-warrior.webp');
  background-repeat:no-repeat; background-size:206%;
  background-position:26.4% 11.5%;
  opacity:.92; mix-blend-mode:normal;
  filter:drop-shadow(0 4px 8px rgba(66,24,15,.09));
  clip-path:polygon(27% 0, 54% 0, 86% 9%, 100% 32%, 94% 56%, 79% 72%, 57% 81%, 36% 88%, 15% 74%, 0 46%, 6% 18%);
  transform-origin:34% 12%;
  animation:hairSway 5.2s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-hair:after{content:""; position:absolute; inset:-2% -1% -4% -2%;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%, rgba(0,0,0,.02));
  clip-path:inherit; opacity:.6}
@keyframes hairSway{
  0%{transform:translate3d(0,0,0) rotate(-0.3deg) scale(1);}
  35%{transform:translate3d(-2px,1px,0) rotate(0.65deg) scale(1.004);}
  68%{transform:translate3d(1px,-1px,0) rotate(-0.15deg) scale(1.001);}
  100%{transform:translate3d(4px,1px,0) rotate(1.15deg) scale(1.007);}
}
@media(max-width:1180px){.hero-hair{left:21.4%; top:2.1%; width:34%; height:33%; background-size:208%; background-position:26.7% 11.8%;}}
@media(max-width:850px){.hero-hair{left:20.6%; top:2%; width:35%; height:34%; background-size:210%; background-position:26.2% 12%;}}
@media(max-width:620px){
 .hero-hair{left:17.6%; top:2.4%; width:38%; height:42%; background-size:192%; background-position:22.5% 11%; clip-path:polygon(22% 0, 49% 0, 82% 11%, 100% 38%, 94% 62%, 73% 78%, 48% 90%, 20% 83%, 0 54%, 4% 24%); animation-duration:4.9s}
}
@media(prefers-reduced-motion:reduce){.hero-hair{display:none}}


/* V4.3: six bespoke hero portraits, composition-focused thumbnails. */
.class-card img{height:166px;object-fit:cover;object-position:50% 42%;filter:saturate(1.04) contrast(1.015)}
.class-card{background:linear-gradient(180deg,#fffcf6,#fff2de)}
.class-card:hover{box-shadow:0 10px 22px rgba(99,36,19,.16)}
.class-card-body{padding:11px 12px 12px}
.class-card .see{margin-top:9px}
@media(max-width:1180px){.class-card img{height:188px}}
@media(max-width:620px){.class-card img{height:156px;object-position:50% 42%}}

/* V4.4: Micro-motion portraits with reliable static fallbacks. */
.class-media{position:relative;overflow:hidden;background:#e9d7bb;isolation:isolate}
.class-media img,.class-media video{display:block;width:100%;height:166px;object-fit:cover;object-position:50% 42%;filter:saturate(1.04) contrast(1.015)}
.class-media video{position:absolute;inset:0;opacity:0;transition:opacity .28s ease;pointer-events:none}
.class-media video.is-playing{opacity:1}
.class-card:hover .class-media video.is-playing{filter:saturate(1.09) contrast(1.02)}
@media(max-width:1180px){.class-media img,.class-media video{height:188px}}
@media(max-width:620px){.class-media img,.class-media video{height:156px}}
@media(prefers-reduced-motion:reduce){.class-media video{display:none!important}}


/* V4.6: hero composition correction, no duplicated hair pasted over the face. */
.hero-art{right:-66px!important;width:63%!important;top:0!important;height:100%!important;
 background-size:cover!important;background-position:48% 47%!important;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 19%,#000 100%)!important;
 mask-image:linear-gradient(90deg,transparent 0%,#000 19%,#000 100%)!important}
.hero-motion{object-fit:cover!important;object-position:48% 47%!important}
.hero-hair{display:none!important}
@media(max-width:850px){.hero-art{right:-42px!important;width:70%!important}}
@media(max-width:620px){
 .hero-inner{min-height:574px!important}
 .hero-art{right:0!important;left:0!important;width:100%!important;height:291px!important;top:auto!important;bottom:0!important;
  background-position:0% 50%!important;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 72%,transparent 100%)!important;
  mask-image:linear-gradient(0deg,#000 0%,#000 72%,transparent 100%)!important}
 .hero-motion{object-position:0% 50%!important}
}
/* One shared image geometry for first paint AND the matching loop video. */
.class-media{position:relative!important;aspect-ratio:4/3!important;height:auto!important;
 background:linear-gradient(145deg,#f6ebd8,#dac2a0);overflow:hidden!important}
.class-media img,.class-media video{position:absolute!important;inset:0!important;
 display:block!important;width:100%!important;height:100%!important;
 object-fit:contain!important;object-position:50% 50%!important;
 filter:none!important}
.class-media img{z-index:1!important;opacity:1!important;transition:opacity .35s ease}
.class-media video{z-index:2!important;opacity:0!important;transition:opacity .4s ease!important;
 pointer-events:none!important}
.class-media video.is-playing{opacity:1!important}
.class-card:hover .class-media video.is-playing{filter:brightness(1.025)!important}
/* Do not let old fixed img heights leak into the 4:3 artwork panel. */
.class-card img{height:100%!important;object-fit:contain!important;object-position:center!important}
.class-grid{align-items:stretch}
@media(prefers-reduced-motion:reduce){.class-media video{display:none!important}}

/* V4.7: rebuilt hero animation & composition. Poster and video same source and same mapping. */
.hero-wrap{background:linear-gradient(101deg,#fffcf5 0%,#fff4e5 43%,#f4e3c8 68%,#e6c89d 100%)}
.hero-inner{min-height:478px!important}
.hero-copy{width:53%;padding-top:42px;padding-bottom:42px;z-index:4}
.hero-art{
  position:absolute!important;top:0!important;bottom:0!important;
  right:-50px!important;left:auto!important;width:68%!important;height:100%!important;
  background-image:url('/v4-assets/hero-warrior.webp')!important;
  background-position:50% 42%!important;background-size:cover!important;
  overflow:hidden!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 13%,#000 30%,#000 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 13%,#000 30%,#000 100%)!important;
}
.hero-motion{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 object-fit:cover!important;object-position:50% 42%!important;
}
.hero-art:after{background:linear-gradient(0deg,#e5bd8130,transparent 36%)}
@media(max-width:1180px){.hero-art{right:-25px!important;width:70%!important}.hero-copy{width:55%}}
@media(max-width:850px){.hero-art{right:-25px!important;width:73%!important}.hero-copy{width:58%}}
@media(max-width:620px){
 .hero-inner{min-height:608px!important;align-items:flex-start!important}
 .hero-copy{width:100%!important;padding:24px 0 6px!important;position:relative;z-index:3}
 .hero h1{font-size:40px;line-height:1.18}
 .hero-lead{margin:10px 0 16px}
 .hero-art{
   width:calc(100% + 28px)!important;left:-14px!important;right:auto!important;
   top:auto!important;bottom:0!important;height:322px!important;
   background-position:27% 39%!important;
   -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 73%,transparent 100%)!important;
   mask-image:linear-gradient(0deg,#000 0%,#000 73%,transparent 100%)!important;
 }
 .hero-motion{object-position:27% 39%!important}
 .hero-stat{margin-top:12px;}
}
@media(prefers-reduced-motion:reduce){.hero-motion{display:none!important}}
/* V4.7 final visual QA: separate the figure from text, correct focal placement. */
@media (min-width:621px){
 .hero-art{background-position:5% 42%!important;}
 .hero-motion{object-position:5% 42%!important;}
}
@media (max-width:620px){
 .hero-inner{min-height:671px!important;}
 .hero-art{height:330px!important; background-position:0% 38%!important;}
 .hero-motion{object-position:0% 38%!important;}
}


/* V4.8: subtle breathing motion so the hero feels alive without looking flashy. */
.hero-motion{transform-origin:66% 66%;animation:heroBreath 5.6s ease-in-out infinite;will-change:transform}
@keyframes heroBreath{
  0%{transform:translate3d(0,0,0) scale(1)}
  18%{transform:translate3d(0,-0.4px,0) scale(1.003)}
  42%{transform:translate3d(0,-1px,0) scale(1.008)}
  62%{transform:translate3d(0,-0.2px,0) scale(1.004)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@media(max-width:620px){
 .hero-motion{transform-origin:54% 60%;animation-duration:6s}
 @keyframes heroBreath{
  0%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(0,-0.3px,0) scale(1.002)}
  50%{transform:translate3d(0,-0.8px,0) scale(1.006)}
  75%{transform:translate3d(0,-0.2px,0) scale(1.003)}
  100%{transform:translate3d(0,0,0) scale(1)}
 }
}
@media(prefers-reduced-motion:reduce){.hero-motion{animation:none!important}}

/* ── 微信礼包区 ── */
.gift-section{margin:26px 0 0}
.gift-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:34px;align-items:center;padding:30px 34px;border:1px solid #dcb87c;border-radius:14px;background:linear-gradient(128deg,#fffdf8 0%,#fff7e9 52%,#f8e6c4 100%);box-shadow:var(--shadow);overflow:hidden}
.gift-box:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 88% 15%,#e2b06b33,transparent 52%)}
.gift-box:after{content:"✦";position:absolute;top:2px;right:9px;color:#d4b079;font-size:19px}
.gift-copy{position:relative;z-index:1;min-width:0}
.gift-tag{display:inline-block;padding:4px 11px;border-radius:4px;background:linear-gradient(135deg,#c3452f,#8d211c);color:#fff8e8;font-size:11px;font-weight:700;letter-spacing:1.5px;box-shadow:0 3px 7px #a1272442}
.gift-title{margin:13px 0 0;font:900 27px/1.4 var(--serif);color:#5c211b;letter-spacing:1px}
.gift-lead{margin:11px 0 0;font-size:13.5px;line-height:1.95;color:#6f5847}
.gift-steps{list-style:none;margin:19px 0 0;padding:0;display:grid;gap:11px}
.gift-steps li{display:flex;gap:12px;align-items:flex-start}
.gift-steps b{flex-shrink:0;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#8d211c;color:#ffeec4;font:900 13px var(--serif);box-shadow:0 2px 5px #8d211c4d}
.gift-steps strong{display:block;font-size:14px;color:#5a3524;font-weight:800}
.gift-steps span{display:block;font-size:12.5px;line-height:1.75;color:#8a7763;margin-top:2px}
.gift-note{margin:19px 0 0;padding:13px 15px;border:1px solid #eccf9e;border-left:4px solid #b43b2a;border-radius:0 9px 9px 0;background:#fff7e6f2;font-size:12px;line-height:1.85;color:#7c6248}
.gift-note strong{display:block;color:#8b2b24;font-size:12.5px;margin-bottom:4px}
.gift-qr-wrap{position:relative;z-index:1;text-align:center}
.gift-qr-btn{display:block;width:100%;padding:0;border:0;background:none}
.gift-qr-frame{display:block;padding:9px;border:1px solid #d5aa66;border-radius:12px;background:#fffdf6;box-shadow:0 6px 18px #6b331630;transition:transform .18s,box-shadow .18s}
.gift-qr-frame img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:6px;-webkit-user-drag:none;user-select:none}
.gift-qr-btn:hover .gift-qr-frame{transform:translateY(-2px);box-shadow:0 11px 26px #6b331644}
.gift-qr-hint{display:block;margin-top:10px;font-size:12px;font-weight:700;color:#9e2c24;letter-spacing:1px}
.gift-qr-note{margin:7px 0 0;font-size:11.5px;line-height:1.75;color:#937e63}
.gift-modal{position:fixed;inset:0;z-index:120}
.gift-modal[hidden]{display:none}
.gift-modal-mask{position:absolute;inset:0;background:#24151099;backdrop-filter:blur(3px)}
.gift-modal-panel{position:relative;margin:6vh auto 0;width:min(400px,calc(100% - 32px));background:#fffcf5;border:1px solid #f0d09b;border-radius:16px;padding:24px 24px 20px;text-align:center;box-shadow:0 30px 90px #00000059;animation:giftPop .22s ease-out}
@keyframes giftPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.gift-modal-img{width:100%;max-width:300px;height:auto;aspect-ratio:1/1;margin:0 auto;border:1px solid #e3cfab;border-radius:10px;-webkit-user-drag:none;user-select:none}
.gift-modal-tip{margin:16px 0 0;font-size:12.5px;line-height:1.85;color:#7a6655}
.gift-modal-close{margin:17px auto 0;display:block;padding:10px 34px;border:1px solid #caa36b;border-radius:9px;background:linear-gradient(135deg,#c3452f,#8d211c);color:#fff9eb;font-size:13px;font-weight:700;box-shadow:0 5px 12px #a1272442}
@media(max-width:850px){.gift-box{grid-template-columns:1fr;gap:22px;padding:24px 22px}.gift-qr-wrap{max-width:230px;margin:0 auto}}
@media(max-width:620px){.gift-section{margin-top:16px}.gift-box{padding:19px 16px;gap:18px;border-radius:12px}.gift-title{font-size:22px}.gift-lead{font-size:12.5px;line-height:1.85}.gift-steps{gap:9px;margin-top:15px}.gift-steps strong{font-size:13px}.gift-steps span{font-size:11.5px}.gift-note{font-size:11.5px;padding:11px 12px}.gift-qr-wrap{max-width:206px}}