:root { --sans:'Noto Sans SC',system-ui,sans-serif; --serif:'Noto Serif SC',serif; --display:'Ma Shan Zheng','STKaiti',serif; }
* { box-sizing:border-box; }
html { color-scheme:light; background:var(--canvas); }
body { min-width:320px; margin:0; font-family:var(--sans); }
button,a { -webkit-tap-highlight-color:transparent; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.62; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--orchid); outline-offset:4px; }
.checkin-main { width:min(1080px,calc(100% - 48px)); margin:0 auto; padding:42px 0 112px; }
.checkin-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:27px; }
.checkin-kicker { margin:0 0 8px; color:var(--orchid); font-size:11px; line-height:1.6; letter-spacing:.09em; }
.checkin-heading h1 { margin:0; font:600 31px/1.5 var(--serif); letter-spacing:.06em; }
.checkin-heading>a { flex-shrink:0; color:var(--dim); text-decoration:none; font-size:12px; }
.checkin-heading>a span { margin-left:9px; color:var(--orchid); }
.checkin-hero { position:relative; display:grid; grid-template-columns:1.2fr .85fr; align-items:center; gap:32px; overflow:hidden; padding:36px 40px; border:1px solid #e5d7f2; border-radius:24px; background:radial-gradient(ellipse at 90% 30%,#eadcf6,transparent 58%),linear-gradient(110deg,#faf5ff,#f4eefa 65%,#f9edf5); }
.checkin-eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 15px; color:var(--orchid-deep); font-size:11px; letter-spacing:.05em; }
.checkin-dot { width:6px; height:6px; border-radius:50%; background:var(--orchid); box-shadow:0 0 0 4px #7959bc12; }
.checkin-eyebrow time { padding-left:5px; color:var(--dim); font-size:10px; letter-spacing:0; }
.checkin-hero h2 { margin:0; font:600 clamp(25px,3vw,34px)/1.65 var(--serif); letter-spacing:.035em; }
.checkin-hero-description { margin:16px 0 24px; color:var(--dim); font-size:12px; line-height:2.1; }
.checkin-hero-description strong { color:var(--orchid-deep); font-weight:500; }
.checkin-daily-action { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.checkin-primary { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-width:228px; min-height:48px; padding:12px 22px; border:0; border-radius:12px; color:#fff; background:linear-gradient(120deg,#8963c2,#6f49ab); box-shadow:0 7px 18px #7959bc24; font-size:13px; font-weight:600; text-decoration:none; }
.checkin-primary:hover:enabled { background:var(--orchid-deep); }
.checkin-primary[data-complete='true'] { color:#527564; background:#e4f0e9; box-shadow:none; opacity:1; }
.checkin-daily-action>span { color:var(--dim); font-size:10px; line-height:1.6; }
.checkin-grand-prize { display:flex; flex-direction:column; align-items:center; padding:23px 18px; border:1px solid #fff; border-radius:19px; background:#ffffff78; box-shadow:0 10px 30px #8f68a710; text-align:center; }
.checkin-prize-kicker { color:#98658d; font-size:10px; letter-spacing:.12em; }
.checkin-gift-art { position:relative; height:125px; width:160px; margin:3px 0 1px; }
.checkin-gift-art svg { width:100%; height:100%; filter:drop-shadow(0 8px 8px #946aae20); }
.checkin-gift-spark { position:absolute; top:15px; left:-15px; font-size:30px; color:#bd96c9; }
.checkin-gift-spark.last { top:50px; left:auto; right:-10px; font-size:20px; color:#d4b6df; }
.checkin-grand-number { display:flex; align-items:baseline; gap:8px; color:var(--orchid-deep); }
.checkin-grand-number strong { font:500 44px/1.1 var(--serif); }
.checkin-grand-number span { font-size:12px; }
.checkin-grand-doll { margin:10px 0 12px; color:#8c5d84; font:600 14px/1.8 var(--serif); }
.checkin-prize-note { color:var(--dim); font-size:10px; line-height:1.7; }
.checkin-feedback { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; margin-top:16px; border:1px solid var(--line); border-radius:12px; background:var(--orchid-wash); color:var(--orchid-deep); font-size:12px; line-height:1.8; }
.checkin-feedback p { margin:0; }
.checkin-feedback[data-kind='error'] { color:var(--danger); background:var(--danger-wash); border-color:#ecd4dd; }
.checkin-feedback[data-kind='success'] { color:var(--success); background:var(--success-wash); border-color:#d5e8dc; }
.checkin-feedback button { flex-shrink:0; min-height:36px; padding:7px 12px; border:1px solid currentColor; border-radius:8px; color:inherit; background:transparent; font-size:11px; }
.checkin-overview { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:22px; padding:26px 30px; margin:18px 0 26px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.checkin-next { display:flex; align-items:center; gap:14px; }
.checkin-next-icon { display:grid; place-items:center; flex-shrink:0; width:43px; height:43px; border-radius:13px; color:var(--orchid); background:var(--orchid-wash); font:500 22px var(--serif); }
.checkin-next p { margin:0 0 6px; color:var(--dim); font-size:11px; }
.checkin-next strong { color:var(--orchid-deep); font-size:13px; line-height:1.8; font-weight:500; }
.checkin-wallet-stats { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-left:26px; border-left:1px solid var(--line); }
.checkin-wallet-stats>div { display:flex; flex-direction:column; gap:8px; }
.checkin-wallet-stats strong { font-size:23px; line-height:1.3; font-weight:500; font-variant-numeric:tabular-nums; }
.checkin-wallet-stats span { color:var(--dim); font-size:10px; line-height:1.6; }
.checkin-card { border:1px solid var(--line); border-radius:20px; background:#fff; padding:28px 30px; }
.checkin-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.checkin-section-heading h2 { margin:0; font:600 21px/1.55 var(--serif); letter-spacing:.035em; }
.checkin-section-heading div>p:not(.checkin-kicker) { margin:8px 0 0; color:var(--dim); font-size:11px; line-height:1.8; }
.checkin-progress-number { flex-shrink:0; display:flex; align-items:baseline; gap:6px; }
.checkin-progress-number b { font-size:32px; font-weight:500; color:var(--orchid); }
.checkin-progress-number>span { color:var(--dim); font-size:11px; }
.checkin-progress { height:5px; margin:22px 0; overflow:hidden; border-radius:5px; background:#f1eaf8; }
.checkin-progress>span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#b198d1,#8661b9); transition:width .35s ease; }
.checkin-stamp-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:10px; }
.checkin-stamp { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:82px; padding:9px 3px; border:1px solid #eee7f5; border-radius:12px; background:#fcfaff; }
.checkin-stamp>span { color:var(--dim); font-size:9px; }
.checkin-stamp b { color:#bcacd1; font:400 21px/1.25 var(--serif); }
.checkin-stamp small { color:var(--dim); font-size:9px; text-align:center; }
.checkin-stamp.is-signed { border-color:#d9c9ed; background:#f1e9fa; }
.checkin-stamp.is-signed b { color:var(--orchid); }
.checkin-stamp.is-next { border:1px dashed #9a78c4; background:#fbf7ff; }
.checkin-stamp.is-next b,.checkin-stamp.is-next small { color:var(--orchid-deep); }
.checkin-stamp.is-gift small { color:var(--orchid-deep); }
.checkin-stamp.is-grand { border-color:#e1b7d4; background:#fceef7; }
.checkin-stamp.is-grand b,.checkin-stamp.is-grand small { color:var(--rose); }
.checkin-journey-footer { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:21px; color:var(--dim); font-size:11px; }
.checkin-journey-footer b { color:var(--orchid-deep); font-weight:600; }
.checkin-journey-footer p { margin:0 0 0 auto; font-size:10px; }
.checkin-milestone-section { margin:32px 0; }
.checkin-section-note { color:var(--dim); font-size:10px; line-height:1.7; }
.checkin-milestones { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px; margin-top:18px; }
.checkin-milestone { display:flex; flex-direction:column; align-items:center; gap:10px; padding:17px 4px; border:1px solid var(--line); border-radius:13px; background:#fff; text-align:center; }
.checkin-milestone-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:var(--orchid); background:var(--orchid-wash); font:500 15px var(--serif); }
.checkin-milestone-state { color:var(--dim); font-size:9px; }
.checkin-milestone h3 { margin:0; font-size:10px; font-weight:500; }
.checkin-milestone-reward { color:var(--orchid-deep); font-size:15px; font-weight:500; }
.checkin-milestone.is-claimed { background:#f7faf8; border-color:#dae7dd; }
.checkin-milestone.is-claimed .checkin-milestone-state { color:var(--success); }
.checkin-milestone.is-claimed .checkin-milestone-mark { color:var(--success); background:#e8f2ed; }
.checkin-goal-summary { display:flex; align-items:center; gap:15px; margin-top:14px; padding:20px 23px; border:1px solid #e6cedf; border-radius:14px; background:linear-gradient(100deg,#fcf5fa,#f7f0fb); }
.checkin-goal-mark { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; color:#a07597; background:#f0e0ee; border-radius:12px; font:400 25px var(--serif); }
.checkin-goal-summary b { color:#835979; font:600 13px/1.9 var(--serif); }
.checkin-goal-summary p { margin:5px 0 0; color:var(--dim); font-size:10px; line-height:1.8; }
.checkin-goal-summary>span:last-child { margin-left:auto; flex-shrink:0; color:#a07597; font-size:10px; }
.checkin-dolls { margin:0 0 24px; }
.checkin-doll-list { display:grid; gap:12px; margin-top:20px; }
.checkin-doll-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border:1px solid #eae1f1; border-radius:13px; background:#fcfaff; }
.checkin-doll-info { min-width:0; }
.checkin-doll-info h3 { margin:0 0 7px; font:600 14px/1.7 var(--serif); }
.checkin-doll-info p { margin:5px 0 0; color:var(--dim); font-size:11px; line-height:1.8; overflow-wrap:anywhere; }
.checkin-doll-info p.checkin-shipping-info { color:var(--ink-soft); }
.checkin-doll-action { display:flex; align-items:flex-end; flex-direction:column; gap:12px; flex-shrink:0; }
.checkin-doll-status { display:inline-block; color:var(--dim); font-size:10px; }
.checkin-doll-status.is-available { color:var(--orchid); }
.checkin-doll-status.is-shipped { color:var(--success); }
.checkin-doll-claim { min-height:38px; padding:8px 13px; border:1px solid #d9c9ec; border-radius:9px; color:var(--orchid-deep); background:#f4eafb; font-size:11px; }
.checkin-claim-form { margin-top:22px; border-top:1px solid var(--line); padding-top:22px; }
.checkin-claim-form h3 { margin:0; color:var(--orchid-deep); font-size:14px; line-height:1.8; }
.checkin-claim-form header p { margin:8px 0 20px; color:var(--dim); font-size:11px; line-height:1.9; }
.checkin-claim-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.checkin-claim-fields label { display:flex; flex-direction:column; gap:8px; font-size:12px; }
.checkin-claim-fields input,.checkin-claim-fields textarea { width:100%; border:1px solid #dcd2e7; border-radius:9px; min-height:44px; padding:11px 12px; color:var(--ink); background:#fff; font-size:13px; line-height:1.6; }
.checkin-claim-fields input::placeholder,.checkin-claim-fields textarea::placeholder { color:#a89daf; }
.checkin-claim-fields textarea { resize:vertical; }
.checkin-address-field { grid-column:1/-1; }
.checkin-claim-hint { margin:13px 0 18px; color:var(--dim); font-size:10px; line-height:1.9; }
.checkin-claim-message { color:var(--danger); font-size:12px; line-height:1.9; }
.checkin-claim-actions { display:flex; align-items:center; gap:16px; }
.checkin-claim-actions>button:last-child { min-height:44px; padding:10px; border:0; color:var(--dim); background:transparent; font-size:12px; }
.checkin-bottom-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; align-items:start; }
.checkin-history ol { list-style:none; margin:15px 0 0; padding:0; }
.checkin-history li { display:flex; justify-content:space-between; gap:15px; padding:13px 0; border-bottom:1px solid #f1ecf6; }
.checkin-history li:last-child { border:0; padding-bottom:0; }
.checkin-history li>div { display:flex; flex-direction:column; gap:5px; }
.checkin-history li b { font-size:11px; font-weight:500; }
.checkin-history time { color:var(--dim); font-size:9px; }
.checkin-history li>span { color:var(--orchid-deep); font-size:11px; line-height:1.8; text-align:right; }
.checkin-empty { margin:23px 0 10px; color:var(--dim); font-size:11px; line-height:1.8; }
.checkin-rules ul { margin:19px 0; padding-left:15px; color:var(--dim); font-size:11px; line-height:2; }
.checkin-rules li+li { margin-top:9px; }
.checkin-rules li::marker { color:#b39bcf; }
.checkin-rules li b { color:var(--ink-soft); font-weight:500; }
.checkin-full-reward { padding:15px; margin:0; border-radius:12px; color:var(--orchid-deep); background:#f7f1fc; font-size:11px; line-height:1.8; }
.checkin-full-reward span { display:block; margin-top:4px; color:var(--dim); font-size:10px; }
@media (max-width:850px) {
  .checkin-main { width:calc(100% - 36px); padding-top:30px; }
  .checkin-hero { gap:22px; padding:28px; }
  .checkin-hero h2 { font-size:26px; }
  .checkin-overview { padding:22px; gap:20px; }
  .checkin-wallet-stats { padding-left:20px; }
  .checkin-stamp-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .checkin-bottom-grid { grid-template-columns:1fr; }
  .checkin-milestones { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .checkin-main { width:calc(100% - 28px); padding:24px 0 106px; }
  .checkin-heading { margin-bottom:20px; gap:10px; }
  .checkin-heading h1 { font-size:27px; }
  .checkin-heading .checkin-kicker { font-size:10px; }
  .checkin-heading>a { font-size:11px; }
  .checkin-hero { grid-template-columns:1fr; gap:24px; padding:26px 22px; border-radius:19px; }
  .checkin-hero h2 { font-size:27px; }
  .checkin-hero-description { font-size:11px; margin-bottom:20px; }
  .checkin-daily-action { align-items:stretch; }
  .checkin-daily-action>span { text-align:center; }
  .checkin-grand-prize { position:relative; align-items:flex-start; padding:20px; overflow:hidden; text-align:left; }
  .checkin-prize-kicker { margin-bottom:14px; }
  .checkin-grand-number strong { font-size:37px; }
  .checkin-grand-number span { font-size:11px; }
  .checkin-grand-doll { position:relative; font-size:13px; margin:9px 0; }
  .checkin-gift-art { position:absolute; width:110px; height:100px; top:22px; right:5px; opacity:.7; }
  .checkin-gift-spark { left:5px; font-size:19px; }
  .checkin-gift-spark.last { right:0; font-size:15px; }
  .checkin-feedback { align-items:flex-start; padding:13px; font-size:11px; }
  .checkin-overview { grid-template-columns:1fr; margin:14px 0 20px; padding:20px 18px; gap:18px; border-radius:16px; }
  .checkin-next { gap:12px; }
  .checkin-wallet-stats { border-left:0; border-top:1px solid var(--line); padding:17px 0 0; }
  .checkin-wallet-stats>div { gap:5px; }
  .checkin-wallet-stats strong { font-size:23px; }
  .checkin-card { padding:22px 17px; border-radius:17px; }
  .checkin-section-heading { align-items:flex-start; gap:10px; }
  .checkin-section-heading h2 { font-size:19px; }
  .checkin-section-heading div>p:not(.checkin-kicker) { font-size:10px; }
  .checkin-progress-number { gap:3px; padding-top:26px; }
  .checkin-progress-number b { font-size:27px; }
  .checkin-progress-number>span { font-size:9px; }
  .checkin-progress { margin:18px 0; }
  .checkin-stamp-grid { gap:7px; }
  .checkin-stamp { min-height:70px; border-radius:9px; gap:4px; }
  .checkin-stamp>span,.checkin-stamp small { font-size:8px; }
  .checkin-stamp b { font-size:18px; }
  .checkin-journey-footer { gap:9px 18px; font-size:10px; }
  .checkin-journey-footer p { flex-basis:100%; margin:0; font-size:9px; }
  .checkin-milestone-section { margin:26px 0; }
  .checkin-milestone-section>.checkin-section-heading,.checkin-dolls>.checkin-section-heading { flex-direction:column; gap:6px; }
  .checkin-milestones { margin-top:14px; gap:7px; }
  .checkin-milestone { padding:13px 2px; gap:9px; border-radius:10px; }
  .checkin-milestone h3 { font-size:9px; }
  .checkin-milestone-state { font-size:8px; }
  .checkin-goal-summary { flex-wrap:wrap; padding:17px 15px; gap:10px; }
  .checkin-goal-summary>div { flex:1; }
  .checkin-goal-summary>span:last-child { margin-left:50px; }
  .checkin-goal-summary b { font-size:12px; }
  .checkin-goal-summary p { font-size:9px; }
  .checkin-dolls { margin-bottom:20px; }
  .checkin-doll-row { align-items:flex-start; flex-direction:column; padding:16px; gap:15px; }
  .checkin-doll-action { width:100%; flex-direction:row; justify-content:space-between; align-items:center; }
  .checkin-claim-fields { grid-template-columns:1fr; }
  .checkin-claim-fields input,.checkin-claim-fields textarea { font-size:16px; }
  .checkin-claim-actions { flex-wrap:wrap; gap:7px; }
  .checkin-claim-actions .checkin-primary { width:100%; min-width:0; font-size:12px; }
  .checkin-claim-actions>button:last-child { margin:0 auto; }
  .checkin-bottom-grid { gap:16px; }
}
@media (max-width:370px) {
  .checkin-hero h2 { font-size:24px; }
  .checkin-grand-prize { padding:18px 14px; }
  .checkin-gift-art { right:-13px; opacity:.45; }
  .checkin-journey .checkin-section-heading { flex-wrap:wrap; }
  .checkin-progress-number { padding-top:0; }
  .checkin-stamp-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) { .checkin-progress>span { transition:none; } }