:root {
  --ink: #263c32;
  --muted: #7d9185;
  --green: #2f7f5d;
  --green-dark: #1d4a37;
  --line: #e0e9df;
  --paper: #fffdf8;
  --bg: #f4f7f0;
  --accent: #dd8b62;
  --soft: #e8f2e6;
  --shadow: 0 14px 38px rgba(43, 82, 63, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.65 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 24px; background: rgba(244,247,240,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 14px; background: var(--green-dark); color: #fff7e7; font-size: 21px; font-weight: 800; }
.brand b { display: block; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.topbar nav { display: flex; align-items: center; gap: 18px; color: #6c8377; font-size: 14px; }
.topbar nav a:hover { color: var(--green); }
.novel-link { padding: 7px 11px; border: 1px solid #d6e4d8; border-radius: 10px; background: #fff; color: var(--green) !important; font-size: 12px; font-weight: 700; }
.user-box { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 12px; }
.points-pill { padding: 7px 11px; border-radius: 99px; background: #e6f1e7; color: #346c51; font-weight: 700; white-space: nowrap; }
.login-btn { border: 0; border-radius: 10px; padding: 8px 13px; background: var(--green); color: #fff; font-weight: 700; font-size: 13px; }
.page { max-width: 1180px; margin: 0 auto; padding: 26px 18px 70px; }
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.35fr .65fr; gap: 22px; align-items: center; padding: 30px 34px; border-radius: 26px; background: radial-gradient(circle at 86% 12%, #d6ead7 0, transparent 30%), linear-gradient(120deg, #fffdf7, #f8f4e8); border: 1px solid #e5e8d9; box-shadow: var(--shadow); margin-bottom: 22px; }
.hero::after { content: ""; position: absolute; right: -90px; bottom: -170px; width: 380px; height: 380px; border: 2px solid rgba(48,114,84,.1); border-radius: 50%; }
.hero-kicker { margin: 0; color: #b27652; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.hero h1 { position: relative; z-index: 1; margin: 8px 0 6px; font-size: 37px; line-height: 1.18; letter-spacing: -.04em; }
.hero p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 14px; }
.hero-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 18px; max-width: 440px; }
.hero-stat { padding: 11px 13px; border-radius: 13px; background: rgba(255,255,255,.75); border: 1px solid #e7ecdf; }
.hero-stat span { display: block; color: #87998e; font-size: 11px; }
.hero-stat b { display: block; margin-top: 2px; color: var(--green-dark); font-size: 21px; }
.progress-ring { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 154px; height: 154px; border-radius: 50%; background: conic-gradient(var(--green) var(--p,0%), #e5eddf 0); }
.progress-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fbfaf2; }
.ring-inner { position: relative; z-index: 1; text-align: center; }
.ring-inner b { display: block; color: var(--green-dark); font-size: 37px; line-height: 1; }
.ring-inner span { display: block; margin-top: 5px; color: #8b9b90; font-size: 11px; }
.ring-inner small { display: block; margin-top: 4px; color: #a7b3aa; font-size: 10px; }
.dash-grid { display: grid; grid-template-columns: minmax(0,1.48fr) minmax(320px,.82fr); gap: 20px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 21px; padding: 21px; box-shadow: var(--shadow); margin-bottom: 20px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.section-head .pill { flex: 0 0 auto; padding: 5px 9px; border-radius: 99px; background: var(--soft); color: #42785b; font-size: 11px; font-weight: 700; }
.task-book { padding: 15px; border: 1px solid #e5ece3; border-radius: 16px; background: #fcfdf9; margin-top: 10px; }
.task-book:first-child { margin-top: 0; }
.book-head { display: flex; align-items: center; gap: 12px; }
.cover { flex: 0 0 48px; height: 58px; display: grid; place-items: center; border-radius: 11px; background: #e3f0e4; color: #2f7054; font-size: 17px; font-weight: 800; line-height: 1.1; text-align: center; }
.book-meta { flex: 1; min-width: 0; }
.book-meta h3 { margin: 0; font-size: 15px; line-height: 1.4; }
.book-meta p { margin: 3px 0 0; color: #97a69d; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.read-link { flex: 0 0 auto; padding: 6px 9px; border-radius: 9px; background: #eff5eb; color: #50805f; font-size: 11px; font-weight: 700; }
.task-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.step { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; background: #fff; border: 1px solid #e7eee5; font-size: 12px; }
.step-label { display: flex; align-items: center; gap: 6px; color: #687d71; }
.step-dot { width: 7px; height: 7px; border-radius: 50%; background: #c8d4c9; }
.step.ok .step-dot { background: #3e936d; }
.step.pending .step-dot { background: #d79a58; }
.step.rejected .step-dot { background: #c46d5d; }
.step-status { font-size: 11px; color: #97a69d; }
.step.ok .step-status { color: #3d7d5b; }
.step.pending .step-status { color: #a87537; }
.step.rejected .step-status { color: #ad5e50; }
.task-actions { display: flex; gap: 8px; margin-top: 11px; }
.task-btn { flex: 1; border: 1px solid #d8e7d8; border-radius: 10px; background: #fff; color: #3c7758; padding: 8px 9px; font-size: 12px; font-weight: 700; }
.task-btn:hover { background: #edf7ed; }
.task-btn.pending { background: #fff7e9; border-color: #f0d9b5; color: #a27339; }
.task-btn.done { background: #eaf5ea; border-color: #cfe6d2; color: #3d7d5b; cursor: default; }
.task-btn:disabled { opacity: .8; }
.campaign-card { padding: 21px; border-radius: 21px; background: radial-gradient(circle at 100% 0, #3e7358 0, transparent 35%), #1b4030; color: #fdf7e8; box-shadow: 0 16px 35px rgba(26,60,45,.17); margin-bottom: 20px; overflow: hidden; }
.campaign-kicker { color: #b7d7bd; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.campaign-card h2 { margin: 7px 0 4px; font-size: 23px; line-height: 1.35; }
.campaign-card > p { margin: 0; color: #b6cdbd; font-size: 12px; }
.prize-list { display: grid; gap: 8px; margin: 15px 0; }
.prize { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 11px; background: rgba(255,250,235,.11); border: 1px solid rgba(255,250,235,.12); }
.prize b { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f0bd84; color: #334b3b; font-size: 11px; }
.prize span { font-size: 14px; font-weight: 700; color: #fff8e8; }
.progress-label { display: flex; justify-content: space-between; gap: 10px; color: #c7dccd; font-size: 11px; }
.progress-track { height: 8px; margin-top: 7px; border-radius: 99px; background: rgba(255,255,255,.13); overflow: hidden; }
.progress-track > div { height: 100%; border-radius: 99px; background: #e3b477; }
.campaign-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; }
.campaign-stats div { padding: 9px 10px; border-radius: 10px; background: rgba(255,250,235,.09); }
.campaign-stats span { display: block; color: #aac7b2; font-size: 10px; }
.campaign-stats b { display: block; margin-top: 2px; color: #fff8e8; font-size: 18px; }
.campaign-conditions { margin-top: 13px; display: grid; gap: 5px; }
.cond { display: flex; gap: 7px; color: #b9cec0; font-size: 11px; line-height: 1.5; }
.cond.on { color: #d9f0d8; }
.campaign-link { display: block; margin-top: 15px; padding: 10px; border-radius: 11px; background: #f4e7c9; color: #3d513f; text-align: center; font-size: 13px; font-weight: 800; }
.campaign-note { margin-top: 10px !important; color: #9cbaa4 !important; font-size: 10px !important; line-height: 1.6; }
.guide { padding: 19px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.guide h2 { margin: 0 0 10px; font-size: 18px; }
.guide li { margin: 7px 0; color: #758a7d; font-size: 12px; line-height: 1.65; }
.guide ul { padding-left: 18px; margin: 0; }
.records { display: grid; gap: 8px; }
.record { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; background: #fbfdf9; border: 1px solid #e9efe6; }
.record b { display: block; font-size: 13px; }
.record small { display: block; margin-top: 3px; color: #9aab9e; font-size: 11px; line-height: 1.45; }
.badge { flex: 0 0 auto; padding: 4px 8px; border-radius: 99px; background: #edf5eb; color: #4a7d5c; font-size: 10px; font-weight: 700; }
.badge.pending { background: #fff5e4; color: #a57839; }
.badge.rejected { background: #fbece7; color: #b36554; }
.empty { padding: 26px 15px; border: 1px dashed #d5e2d5; border-radius: 14px; color: #94a599; font-size: 13px; text-align: center; }
.gate { display: grid; place-items: center; min-height: 62vh; }
.gate-card { max-width: 450px; padding: 36px; border-radius: 25px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.gate-card .brand-mark { margin: 0 auto 16px; }
.gate-card h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.gate-card p { color: var(--muted); line-height: 1.8; }
.primary { display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: 11px; padding: 10px 15px; background: var(--green); color: #fff; font-weight: 700; font-size: 13px; }
.primary:hover { background: #286c51; }
.full { width: 100%; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(22,47,35,.38); }
.modal-card { position: relative; width: min(410px,100%); max-height: 92vh; overflow: auto; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(22,47,35,.24); }
.modal-card.wide { width: min(520px,100%); }
.modal-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; color: #96a49a; font-size: 25px; }
.modal-kicker { margin: 0 0 5px; color: #b27a56; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.modal-card h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.modal-card form { display: grid; gap: 12px; margin-top: 17px; }
.modal-card form > label { display: grid; gap: 6px; color: #71857a; font-size: 12px; }
.modal-card input[type="text"], .modal-card input[type="password"], .modal-card input[type="number"] { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.modal-tip { margin: 0; color: #a08b74; font-size: 11px; line-height: 1.6; }
.register-link { display: block; margin-top: 14px; color: var(--green); font-size: 12px; text-align: center; }
.upload-box { position: relative; display: grid; place-items: center; min-height: 145px; padding: 14px; border: 1px dashed #c9dcc9; border-radius: 14px; background: #fafcf7; color: #6e8274; cursor: pointer; overflow: hidden; }
.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 50%; background: #e7f3e7; color: #3f805e; font-size: 22px; font-weight: 300; }
.upload-box b { font-size: 13px; }
.upload-box small { margin-top: 4px; color: #a0aea4; font-size: 11px; }
.upload-box img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.upload-box.has-image img { display: block; }
.upload-box.has-image .upload-icon, .upload-box.has-image b, .upload-box.has-image small { display: none; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 80; max-width: min(90vw,460px); padding: 12px 17px; border-radius: 12px; background: #243d30; color: #fff; opacity: 0; transform: translate(-50%,20px); pointer-events: none; transition: .2s; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
@media (max-width: 900px) {
  .topbar nav { display: none; }
  .hero { grid-template-columns: 1fr; padding: 25px; }
  .progress-ring { justify-self: start; width: 125px; height: 125px; }
  .dash-grid { grid-template-columns: 1fr; }
  .campaign-card { grid-row: 1; }
}
@media (max-width: 560px) {
  .topbar { padding: 10px 12px; }
  .brand small { display: none; }
  .brand b { font-size: 16px; }
  .brand-mark { width: 36px; height: 36px; font-size: 18px; }
  .page { padding: 16px 11px 50px; }
  .hero { padding: 21px 18px; }
  .hero h1 { font-size: 29px; }
  .panel { padding: 15px; }
  .task-steps { grid-template-columns: 1fr; }
  .task-actions { flex-direction: column; }
  .campaign-stats { grid-template-columns: 1fr 1fr; }
  .points-pill { display: none; }
}
.step-dot.done{background:#3e936d}
html{-webkit-text-size-adjust:100%}a,button{-webkit-tap-highlight-color:transparent}
.mobile-nav{display:none}
@media(max-width:900px){
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:rgba(255,253,247,.96);border-top:1px solid #dfe8dd;box-shadow:0 -8px 24px rgba(43,82,63,.07);backdrop-filter:blur(14px)}
  .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border-radius:11px;color:#82948a;font-size:10px;font-weight:600;text-decoration:none}
  .mobile-nav a b{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#edf3ea;color:#547565;font-size:13px;font-weight:800}
  .mobile-nav a.active{color:#2f7655}.mobile-nav a.active b{background:#dfeee1;color:#2f7655}
  .dash-grid .campaign-card{grid-row:auto}
  #tasks,#records,#campaign{scroll-margin-top:78px}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  .topbar{min-height:58px}
  .hero{padding:20px 17px;border-radius:21px;margin-bottom:16px}
  .hero h1{font-size:28px;margin-top:6px}
  .hero p{font-size:12px;line-height:1.65}
  .hero .progress-ring{display:none}
  .hero-stats{grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
  .hero-stat{padding:9px 10px;border-radius:11px}.hero-stat b{font-size:19px}
  .hero-kicker{font-size:10px;letter-spacing:.1em}
  .page{padding:15px 10px 30px}
  .panel{padding:14px;border-radius:17px;margin-bottom:15px}
  .section-head h2{font-size:19px}.section-head p{font-size:11px}.section-head .pill{font-size:10px}
  .task-book{padding:12px;border-radius:14px}.task-book + .task-book{margin-top:8px}
  .book-head{gap:9px}.cover{flex-basis:42px;width:42px;height:51px;font-size:15px;border-radius:9px}
  .book-meta h3{font-size:14px}.book-meta p{font-size:10px}.read-link{padding:6px 8px;font-size:10px}
  .task-steps{grid-template-columns:1fr;gap:6px;margin-top:10px}.step{padding:8px 9px;border-radius:9px}
  .task-actions{flex-direction:column;margin-top:8px;gap:6px}
  .task-btn{min-height:43px;font-size:12px;border-radius:10px}
  .campaign-card{padding:18px;border-radius:19px;margin-bottom:15px}.campaign-card h2{font-size:21px}
  .campaign-card > p{font-size:11px}.prize{padding:9px 10px}.prize span{font-size:13px}
  .campaign-stats{gap:6px}.campaign-stats div{padding:8px 9px}.campaign-stats span{font-size:9px}.campaign-stats b{font-size:17px}
  .campaign-link{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:13px}
  .guide{padding:15px;border-radius:17px}.guide h2{font-size:17px}.guide li{font-size:11px}
  .record{align-items:flex-start;gap:8px}.record b{font-size:12px}.record small{font-size:10px}
  .modal{align-items:end;padding:0}
  .modal-card{width:100%;max-height:94vh;border-radius:20px 20px 0 0;padding:22px 17px calc(22px + env(safe-area-inset-bottom))}
  .modal-card.wide{width:100%}.modal-card h2{font-size:22px}
  .modal-card input[type="text"],.modal-card input[type="password"],.modal-card input[type="number"]{font-size:16px}
  .upload-box{min-height:130px}
  .toast{width:max-content;max-width:calc(100vw - 24px);font-size:12px}
  .gate-card{padding:27px 20px;border-radius:21px}.gate-card h1{font-size:25px}.gate-card p{font-size:13px}
}
@media(max-width:380px){
  .brand b{font-size:15px}.user-box .points-pill{display:none}
  .hero h1{font-size:25px}.hero-stats{gap:6px}.hero-stat b{font-size:18px}
  .campaign-card h2{font-size:19px}.campaign-stats{grid-template-columns:1fr}
}
@media(max-width:560px){.points-pill{display:inline-flex;padding:6px 8px;font-size:11px}.user-box{gap:5px}.login-btn{padding:7px 9px;font-size:12px}}
@media (max-width:1024px), (pointer:coarse){
  .topbar nav{display:none}
  .dash-grid{grid-template-columns:1fr}
  .dash-grid .campaign-card{grid-row:auto}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:rgba(255,253,247,.96);border-top:1px solid #dfe8dd;box-shadow:0 -8px 24px rgba(43,82,63,.07);backdrop-filter:blur(14px)}
  .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border-radius:11px;color:#82948a;font-size:10px;font-weight:600;text-decoration:none}
  .mobile-nav a b{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#edf3ea;color:#547565;font-size:13px;font-weight:800}
  .mobile-nav a.active{color:#2f7655}.mobile-nav a.active b{background:#dfeee1;color:#2f7655}
  #tasks,#records,#campaign{scroll-margin-top:78px}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom))}
}