*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:18px 12px 32px;font-family:PingFang SC,Microsoft YaHei,sans-serif;background:linear-gradient(155deg,#3b172b 0%,#24101d 50%,#160b12 100%);color:#2d1a24}
.page{width:min(100%,500px);margin:auto}
.card{padding:38px 22px 30px;border-radius:24px;text-align:center;background:#fffafd;border:1px solid #f0a0b855;box-shadow:inset 0 2px #f0a0b8,0 20px 50px #12050d70}
.spark{font-size:46px}
.card h1{font-size:26px;margin:12px 0 10px}
.card h1 span{color:#d4788f}
.desc{white-space:pre-line;color:#755363;line-height:1.7}
.pills{margin:16px 0;display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.pill{font-size:12px;padding:5px 9px;border-radius:99px;background:#f8e6ec;color:#a45168}
.links{display:grid;gap:10px}
.link{padding:14px;border-radius:13px;text-decoration:none;font-weight:800;cursor:pointer}
.primary{color:#fff;background:linear-gradient(135deg,#d4788f,#ad4e68);box-shadow:0 7px 16px #b45b7538}
.secondary{color:#824b60;background:#f9e8ee;border:1px solid #edcad5}
.accent{color:#60384b;background:#fff;border:1px solid #d9b9c4}
.divider{display:flex;align-items:center;gap:8px;margin:14px 0 2px;color:#bd7188;font-size:12px;font-weight:800}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:#eccbd5}
.foot{margin-top:20px;color:#9a7a88;font-size:11px}
.back{display:inline-block;margin-bottom:12px;color:#f3c3d0;text-decoration:none;font-size:13px}
.task-page{padding:16px;background:linear-gradient(180deg,#fff,#fffbfd);border:1px solid #ffffff80;border-radius:18px;box-shadow:0 22px 65px #09030870}
.notice{font-size:16px;line-height:1.8;color:#c92f43;background:linear-gradient(135deg,#fff0f3,#fff8f2);border:1px solid #ffc9d0;border-left:6px solid #ed4052;border-radius:13px;padding:17px 14px;box-shadow:0 9px 24px #e8485c1c;white-space:pre-line;text-align:center;font-weight:800;margin:0 0 18px}
.step{border-radius:16px;padding:18px 15px;margin-bottom:17px;box-shadow:0 8px 24px #40303a0d;background:#fff;border:1px solid #edf0f3}
.step h2{font-size:18px;line-height:1.5;color:#211a1e;margin:0 0 15px}
.step p{font-size:14px;line-height:1.8;color:#444}
.task-img{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:10px;margin:12px auto;border:1px solid #eadfe4;box-shadow:0 8px 24px #37222c16}
.task-page>step:nth-of-type(1),.task-page>.step:nth-of-type(1){background:linear-gradient(145deg,#fafcff,#f3f7ff);border-color:#d9e4ff}
.task-page>step:nth-of-type(2),.task-page>.step:nth-of-type(2){background:linear-gradient(145deg,#fffdf9,#fff8ef);border-color:#ffddb7}
.task-page>.step:nth-of-type(1) h2{color:#254e8d}
.comment-step{background:#fffaf5!important;border-color:#ffd9c2!important}
.comment-step h2{color:#a74726;display:flex;align-items:center;gap:9px}
.step-num{display:inline-grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border-radius:50%;background:#ff7115;color:#fff;font-size:12px}
.platform{color:#dc4e55!important;font-weight:800;font-size:15px!important}
.keyword-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px;border:1px solid #bfd3ff;border-radius:10px;background:#fff;box-shadow:0 5px 16px #315ca315;margin-bottom:10px}
.keyword{color:#2456a2;font-weight:800;font-size:15px;user-select:text;-webkit-user-select:text}
.keyword-hint{text-align:center!important;font-size:15px!important;line-height:1.6!important;color:#244e8e!important;font-weight:900!important;margin:14px 0 7px!important}
.search-instruction{color:#181818!important}
.search-instruction .important-works{display:inline-block;color:#000!important;font-size:1.12em!important;line-height:1.15!important;font-weight:900}
.comment-example{margin:0 0 15px}
.comment-text{white-space:pre-line;padding:13px;border:1px solid #ffd2a7;border-radius:12px;background:#fff;color:#332820;font-size:15px;line-height:1.7;user-select:text;-webkit-user-select:text;box-shadow:0 5px 15px #c6782414}
.comment-hint{text-align:center!important;font-weight:700;color:#b13f2e!important;white-space:pre-line;font-size:15px!important;line-height:1.8!important;background:#fff1e7;border-radius:12px;padding:12px!important}
.comment-hint .important-works{color:#161616!important;font-size:1.16em;font-weight:900}
.copy,.comment-copy,.submit{border:0;color:white;font-weight:800;border-radius:999px;background:linear-gradient(135deg,#ff796e,#ee4f58);padding:10px 16px;min-height:42px;box-shadow:0 7px 18px #e9554930;cursor:pointer}
.comment-copy{display:block;margin:9px auto 0;border-radius:14px;background:#ff7115;padding:11px 20px;box-shadow:0 5px 12px #ff71153b}
.submit{display:block;width:max-content;max-width:100%;margin:18px auto 10px;text-decoration:none;background:linear-gradient(135deg,#278be8,#075cb8);box-shadow:0 7px 18px #176fc33d;padding:13px 22px;border-radius:14px}
.muted{text-align:center;color:#9c9096!important;font-size:12px!important}
.gallery{display:grid;gap:9px}
.gallery img{width:100%;border-radius:9px}
.task-foot{text-align:center;color:#aaa;font-size:12px;padding:18px 0 6px}
.copy-toast{position:fixed;left:50%;bottom:25px;translate:-50% 12px;padding:10px 15px;border-radius:999px;background:#24151eee;color:#fff;font-size:13px;opacity:0;transition:.2s;z-index:20}
.copy-toast.show{opacity:1;translate:-50% 0}
/* VIP page */
.vip-page{background:#fff;border-radius:20px;padding:22px;box-shadow:0 18px 55px #12050d66}
.vip-back{display:inline-block;margin-bottom:12px;color:#f3c3d0;text-decoration:none;font-size:13px;background:none;border:none;cursor:pointer}
.vip-page h1{text-align:center;font-size:22px;margin:6px 0 8px}
.vip-intro{text-align:center;color:#7d6571;font-size:13px;line-height:1.7}
.vip-guide-text{text-align:center;color:#755363;font-size:14px;line-height:1.7;margin:12px 0}
.vip-guide{display:block;width:100%;max-width:300px;margin:10px auto;border-radius:12px}
.vip-upload{display:block;border:2px dashed #e1b7c4;border-radius:16px;padding:28px 15px;text-align:center;background:#fff8fa;color:#a45168;cursor:pointer;margin:18px 0}
.vip-upload input{display:none}
.vip-file{text-align:center;color:#a78d99;font-size:12px;margin:7px 0}
.vip-submit{width:100%;border:0;border-radius:13px;padding:14px;color:#fff;font-weight:800;background:linear-gradient(135deg,#278be8,#075cb8);box-shadow:0 7px 18px #176fc33d;cursor:pointer;margin-top:10px}
.vip-submit:disabled{opacity:.45;box-shadow:none}
.vip-result{text-align:center;padding:30px 15px}
.vip-result-icon{font-size:52px;margin-bottom:10px}
.vip-resource{display:block;margin-top:16px;padding:13px;border-radius:12px;background:#f8e6ec;color:#a14f67;text-decoration:none;font-weight:800}
/* Upload page */
.upload-page{background:#fff;border-radius:20px;padding:22px;box-shadow:0 18px 55px #12050d66;background-size:cover;background-position:center}
.upload-page h1{text-align:center;font-size:22px;margin:6px 0 8px}
.upload-intro{text-align:center;color:#7d6571;font-size:13px;line-height:1.7;white-space:pre-line}
.upload-zone{display:block;border:2px dashed #e1b7c4;border-radius:16px;padding:28px 15px;text-align:center;background:#fff8fa;color:#a45168;cursor:pointer;margin-top:18px}
.upload-zone input{display:none}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.preview-item{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#f2edf0}
.preview-item img{width:100%;height:100%;object-fit:cover}
.preview-item button{position:absolute;right:4px;top:4px;width:24px;height:24px;border:0;border-radius:50%;background:#25151ecc;color:#fff;cursor:pointer}
.upload-submit{width:100%;border:0;border-radius:13px;padding:14px;color:#fff;font-weight:800;background:linear-gradient(135deg,#278be8,#075cb8);box-shadow:0 7px 18px #176fc33d;cursor:pointer}
.upload-submit:disabled{opacity:.45;box-shadow:none}
.counter{text-align:right;color:#a78d99;font-size:12px;margin:7px 2px}
.upload-rules{white-space:pre-line;margin:15px 0;padding:14px;border-radius:14px;background:#fff1ef;border:1px solid #ffc9c1;color:#b23e35;font-size:13px;font-weight:700;line-height:1.9}
.privacy{text-align:center;color:#9b8790;font-size:11px;line-height:1.6}
.result{display:none;text-align:center;padding:20px 6px}
.result.show{display:block}
.result-icon{font-size:52px}
.resource{display:block;margin-top:16px;padding:13px;border-radius:12px;background:#f8e6ec;color:#a14f67;text-decoration:none;font-weight:800}
.is-hidden{display:none!important}
.channel-return-btn{display:none;background:none;border:none;color:#f3c3d0;font-size:13px;cursor:pointer;margin-bottom:12px}
.channel-return-btn.show{display:inline-block}
.channel-desc{text-align:center;color:#8b6f7c;font-size:12px;margin:-4px 0 10px;line-height:1.5}

/* Popup styles */
.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;z-index:99999;animation:popupFadeIn 0.3s ease}
@keyframes popupFadeIn{from{opacity:0}to{opacity:1}}
.popup-modal{background:#fff;border-radius:16px;padding:24px;max-width:420px;width:90%;position:relative;box-shadow:0 10px 40px rgba(0,0,0,0.3);animation:popupSlideIn 0.3s ease}
@keyframes popupSlideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
.popup-close-btn{position:absolute;top:8px;right:12px;background:none;border:none;font-size:24px;color:#999;cursor:pointer;line-height:1}
.popup-close-btn:hover{color:#333}
.popup-title{font-size:18px;font-weight:bold;color:#333;margin-bottom:12px;padding-right:24px}
.popup-content{font-size:14px;color:#555;line-height:1.6;margin-bottom:20px;word-wrap:break-word;max-height:300px;overflow-y:auto}
.popup-content img{max-width:100%;height:auto;border-radius:6px;margin:8px 0}
.popup-content a{color:#d4788f;text-decoration:underline}
.popup-confirm-btn{display:block;width:100%;padding:10px;background:linear-gradient(135deg,#d4788f,#ad4e68);color:#fff;border:none;border-radius:8px;font-size:15px;cursor:pointer;transition:background 0.2s;font-weight:800}
.popup-confirm-btn:hover{opacity:0.9}