.sharing-page { color: var(--text-primary); }
.sharing-hero { width: 100%; background: var(--bg-primary); overflow: hidden; }
.sharing-hero img { display: block; width: 100%; height: clamp(210px, 28vw, 420px); object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%); }
.sharing-body { max-width: 1080px; padding: 26px 24px 70px; margin: auto; }
.sharing-back { display: inline-block; color: var(--text-secondary); font-size: 12px; text-decoration: none; margin-bottom: 22px; }
.sharing-reward { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 26px 30px; }
.sharing-reward h1 { font-size: 40px; margin: 4px 0 0; font-weight: 650; }
.sharing-reward small { font-size: 15px; font-weight: 400; margin-left: 8px; }
.sharing-reward > div > span { display: block; font-size: 12px; color: var(--text-secondary); }
.sharing-reward strong { display: block; font-size: 26px; font-weight: 550; }
.sharing-panel { border: 1px solid var(--border-color); border-radius: 18px; padding: 28px; margin-bottom: 24px; background: var(--bg-secondary); }
.sharing-panel h2 { font-size: 19px; margin: 0 0 20px; }
.sharing-input-row { display: flex; gap: 12px; }
.sharing-input-row input { flex: 1; min-width: 0; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); border-radius: 9px; padding: 13px; font-size: 14px; }
.sharing-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--accent-primary); color: #fff; border: 0; border-radius: 9px; font-size: 14px; padding: 13px 22px; white-space: nowrap; }
.sharing-button:hover { color: #fff; filter: brightness(1.08); }
.sharing-button:disabled { opacity: .5; }
.sharing-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-top: 17px; }
.sharing-agree input { margin-top: 3px; }
.sharing-error { color: #db665a; font-size: 13px; margin: 15px 0 0; }
.sharing-page .campaign-rules { margin-top: 22px; padding-top: 0; }
.sharing-page .campaign-rules ol { margin-top: 0; }
.sharing-review-status { display: inline-flex; align-items: center; color: var(--text-secondary); font-size: 12px; }
.sharing-review-content { padding-bottom: 18px; font-size: 13px; }
.sharing-review-content p { margin: 0 0 12px; }
.sharing-review-note { color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.sharing-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 12px; color: var(--text-secondary); }
.sharing-page :is(a,button,input,summary):focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; }
@media (max-width: 600px) { .sharing-body { padding: 20px 16px 50px; } .sharing-panel { padding: 22px 18px; } .sharing-reward { gap: 12px; padding: 0 8px 26px; flex-wrap: wrap; } .sharing-reward h1 { font-size: 32px; } .sharing-reward strong { font-size: 22px; } .sharing-input-row { flex-direction: column; } .sharing-hero img { height: 210px; } }