.contracts-hero{position:relative;overflow:hidden;padding:22px;border-radius:15px;border:1px solid var(--contract-accent,#b9c9a9);background:radial-gradient(ellipse at 100% 0,#c9e3b51c,transparent 60%),#142f36;margin:15px 0}.contracts-hero:after{content:'✧';position:absolute;right:15px;top:2px;font-size:96px;opacity:.1;color:var(--contract-accent);pointer-events:none}.contracts-hero .eyebrow{color:var(--contract-accent)}.contracts-hero h3{font-size:25px;margin:10px 0;color:#ebf2d9}.contracts-hero p{font-size:11px!important;color:#c5d8c7!important;line-height:1.6!important;max-width:85%}.contracts-rank{display:flex;align-items:center;gap:13px;margin-top:18px}.contracts-seal{width:55px;height:55px;display:grid;place-items:center;border:1px solid var(--contract-accent);border-radius:50%;color:var(--contract-accent);font-size:30px;background:#d9e7c60c;box-shadow:0 0 22px #b9d8b80a}.contracts-rank strong{display:block;color:var(--contract-accent);font-size:20px}.contracts-rank small{display:block;font-size:10px;color:#bdd0bd;margin-top:6px}.contracts-track{height:4px;background:#d5e2c322;border-radius:8px;overflow:hidden;margin-top:17px}.contracts-track i{height:100%;display:block;background:var(--contract-accent);transition:width .45s ease}.contracts-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:13px 0 18px}.contracts-badges article{text-align:center;border:1px solid #c6d6b522;border-radius:9px;padding:10px 4px;background:#c8dcb007;color:#6e938b}.contracts-badges article.earned{border-color:var(--contract-accent);color:var(--contract-accent);background:#c8dcb010}.contracts-badges span{display:block;font-size:23px}.contracts-badges b{display:block;font-size:9px;line-height:1.4;margin-top:7px}.contracts-badges small{display:block;font-size:8px;margin-top:5px}.contracts-subhead{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px;gap:10px}.contracts-subhead h3{font-size:18px;margin:0;color:#e7efd7}.contracts-subhead small{font-size:9px;color:#b2c7ba}.contracts-cards{display:grid;gap:12px}.contract-card{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:12px;border:1px solid #c9daba30;border-radius:12px;background:#17313a;overflow:hidden}.contract-art{min-height:154px;border-radius:8px;background-size:cover;background-position:center;box-shadow:inset 0 0 25px #071d3044}.contract-card h4{font-size:17px;line-height:1.3;margin:4px 0 8px;color:#e9efd8}.contract-card p{font-size:11px!important;line-height:1.6!important;margin:6px 0!important;color:#bacdbe!important}.contract-progress{display:flex;gap:8px;justify-content:space-between;align-items:center;font-size:11px;color:#d4e6bb;margin:11px 0}.contract-card button{width:100%;padding:10px;border:1px solid #d2e6b550;border-radius:8px;background:#c7e6a714;color:#e4efd2;font-size:11px;cursor:pointer}.contract-card .claim{background:#ceeaaa;color:#17332a;font-weight:700}.contract-card .contract-route{margin-top:7px;border-color:#b9cabc25;background:transparent;color:#aebfac;font-size:10px}.contract-card.claimed{opacity:.72}.contract-card button:disabled{opacity:.45;cursor:default}.contracts-weekly{padding:19px;border-radius:12px;border:1px solid #d7c18f55;background:linear-gradient(140deg,#c5ae671b,#183039);margin-top:18px}.contracts-weekly h3{font-size:20px;margin:10px 0;color:#ecdfbd}.contracts-weekly p{font-size:11px!important;line-height:1.6!important;color:#c5d4c0!important}.contracts-weekly button{width:100%;margin-top:10px}.contracts-note{font-size:10px!important;line-height:1.7!important;color:#a9c2b4!important}.contracts-survey{padding:18px;border:1px solid #bbd2c646;border-radius:13px;background:#142f37;margin:18px 0}.contracts-survey h3{font-size:20px;color:#e6efd5;margin:10px 0}.contracts-places{display:grid;grid-template-columns:1fr 1fr;gap:8px}.contracts-places button{padding:14px 10px;border:1px solid #b8cec141;border-radius:9px;color:#dfebd2;background:#c9e4b20a;line-height:1.4;font-size:12px}.contracts-survey-question{font-size:14px!important;line-height:1.6!important}.contracts-answers{display:grid;gap:8px}.contracts-answers button{padding:13px;border-radius:9px;background:#c8e2b10b;border:1px solid #b6cdbd35;text-align:left;color:#d8e7ce;font-size:12px;line-height:1.5}.contracts-feedback{padding:13px;border-left:2px solid var(--contract-accent);background:#c9e9a514;color:#deedc5!important;font-size:12px!important;line-height:1.6!important;animation:contractReward .4s ease-out}.contracts-error{font-size:12px!important;color:#eecfa8!important;border:1px solid #cda76d55;border-radius:8px;padding:12px}.contracts-refresh{margin:16px 0;width:100%;padding:12px;border:1px solid #c1d3b53a;background:#bed5ad08;color:#d5e3cb;border-radius:9px;font-size:12px}@keyframes contractReward{from{transform:translateY(6px);opacity:.4}to{transform:none;opacity:1}}@media(max-width:400px){.contract-card{grid-template-columns:82px 1fr;gap:10px;padding:10px}.contract-card h4{font-size:15px}.contract-art{min-height:150px}.contracts-hero{padding:18px}.contracts-hero h3{font-size:22px}.contracts-badges b{font-size:8px}}@media(prefers-reduced-motion:reduce){#contracts-board *,#contracts-board *:after{animation:none!important;transition:none!important}}

.contracts-survey-image{display:block;width:100%;height:180px;object-fit:cover;border-radius:10px;margin:12px 0;border:1px solid #c8d8b52b}
/* Keep completed information readable and avoid min-content overflow. */
.contract-card{grid-template-columns:112px minmax(0,1fr)}
.contract-card>div,.contracts-rank>div,.contracts-weekly{min-width:0;overflow-wrap:anywhere}
.contract-progress,.contracts-subhead{flex-wrap:wrap}
.contract-card.claimed{opacity:1}.contract-card.claimed .contract-art{opacity:.72}
.contracts-note{color:#bfd2c3!important}
@media(max-width:720px){
 #contracts-board button{min-height:44px;font-size:12px}
 .contract-card p,.contracts-note,.contracts-weekly p{font-size:12px!important;line-height:1.65!important}
 .contracts-subhead small,.contracts-rank small{font-size:11px}
 .contract-card .contract-route{font-size:12px;color:#c1d2bd}
 .contracts-badges b{font-size:10px}.contracts-badges small{font-size:9px}
}
@media(max-width:400px){.contract-card{grid-template-columns:72px minmax(0,1fr)}.contracts-hero p{max-width:100%}.contracts-places{grid-template-columns:1fr}}