* {box-sizing:border-box} :root {--page-bg:#f6f8fb;--card-bg:#ffffff;--text:#1f2329;--text-soft:#646a73;--text-muted:#8f959e;--line:#eef0f4;--field:#f7f8fa;--primary:#1664ff;--primary-hover:#0f56d9;--primary-soft:#eef4ff;--danger:#f54a45;--cyan:#14c9c9;--shadow:0 10px 28px rgba(31,35,41,.06);--shadow-strong:0 18px 46px rgba(31,35,41,.10)} html,body {min-height:100%;margin:0;touch-action:manipulation} body {background:var(--page-bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased} button,input,textarea {font:inherit} button {-webkit-tap-highlight-color:transparent} .activity-page {position:relative;min-height:100vh;padding:0 14px 16px;overflow:hidden;background:linear-gradient(180deg,#2f8ce9 0,#2f8ce9 250px,#d8efff 430px,var(--page-bg) 680px)} .activity-page::before {display:none} .activity-page::after {display:none} .activity-page-no-hero {padding-top:34px} .activity-page-empty {display:flex;align-items:center;justify-content:center;padding:24px} .activity-empty-card {position:relative;z-index:1;width:min(420px,100%);padding:30px 24px;border:1px solid var(--line);border-radius:20px;background:var(--card-bg);box-shadow:var(--shadow);text-align:center} .activity-empty-card h1 {margin:0 0 10px;font-size:22px;font-weight:800} .activity-empty-card p {margin:0;color:var(--text-soft)} .activity-hero {position:relative;z-index:1;max-width:680px;margin:0 auto;padding:30px 2px 18px} .activity-hero::after {content:"";display:block;width:38px;height:4px;margin-top:14px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--cyan))} .activity-hero h1 {margin:0;color:var(--text);font-size:25px;font-weight:850;line-height:1.32} .activity-hero p {margin:9px 0 0;color:var(--text-soft);font-size:14px} .activity-form {position:relative;z-index:1;max-width:680px;margin:0 auto} .form-card,.product-card {position:relative;margin-bottom:12px;padding:18px 18px;border:1px solid rgba(229,231,235,.9);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);backdrop-filter:blur(10px)} .form-card::before,.product-card::before {display:none} .form-item + .form-item {margin-top:18px;padding-top:18px;border-top:1px solid #f1f3f6} .form-label {display:block;margin-bottom:8px;color:var(--text);font-size:17px;font-weight:750;line-height:1.38} .required {margin-right:5px;color:var(--danger);font-weight:900} .form-control,.unit-trigger {width:100%;min-height:50px;border:1px solid transparent;border-radius:12px;outline:none;background:var(--field);color:var(--text);font-size:16px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease} .form-control {padding:0 16px} .form-control::placeholder,.unit-trigger-input::placeholder {color:var(--text-muted)} .form-control:focus,.unit-trigger.is-active .unit-trigger-input,.unit-trigger-input:focus {border-color:rgba(22,100,255,.35);background:#fff;box-shadow:0 0 0 4px rgba(22,100,255,.08);padding: 5px 12px;border-radius: 10px;} .form-textarea {min-height:108px;padding:15px 16px;resize:vertical;line-height:1.6} .unit-select {position:relative} .unit-trigger {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;cursor:pointer} .unit-trigger-input {flex:1 1 auto;min-width:0;border:0;background:transparent;color:inherit;font-size:inherit;font-weight:inherit;outline:none;padding:0;margin:0} .unit-trigger.has-value .unit-trigger-input {color:var(--text);font-weight:650} .unit-trigger i {width:10px;height:10px;flex:0 0 10px;border-right:2px solid #7b8494;border-bottom:2px solid #7b8494;transform:rotate(45deg) translateY(-3px);transition:transform .18s ease} .unit-trigger.is-active i {transform:rotate(225deg) translate(-2px,-1px)} .unit-panel {display:none;position:absolute;z-index:20;top:calc(100% + 8px);left:0;right:0;padding:10px;border:1px solid #e7ebf1;border-radius:16px;background:#fff;box-shadow:var(--shadow-strong)} .unit-select.is-open .unit-panel {display:block} .unit-list {max-height:258px;margin-top:10px;overflow-y:auto;scrollbar-width:thin} .unit-option {display:block;width:100%;padding:11px 12px;border:0;border-radius:12px;background:transparent;text-align:left;cursor:pointer;transition:background .16s ease,color .16s ease} .unit-option:hover,.unit-option.is-selected {background:var(--primary-soft)} .unit-option strong {display:block;color:var(--text);font-size:14px;font-weight:750;line-height:1.35} .unit-option span {display:block;margin-top:4px;color:var(--text-muted);font-size:12px} .unit-option.is-hidden {display:none} .unit-empty {padding:18px 12px;color:var(--text-muted);font-size:14px;text-align:center} .choice-list {display:grid;gap:8px} .choice-item {display:flex;align-items:center;gap:10px;min-height:42px;padding:9px 12px;border:1px solid #edf0f5;border-radius:13px;background:rgba(251,252,254,.88);color:var(--text-soft);font-size:15px;line-height:1.45;transition:border-color .16s ease,background .16s ease,color .16s ease} .choice-item:hover {border-color:rgba(22,100,255,.18);background:#fff} .choice-item:has(input:checked) {border-color:rgba(22,100,255,.32);background:#f4f8ff;color:var(--text)} .choice-item input {width:19px;height:19px;flex:0 0 19px;margin:1px 0 0;accent-color:var(--primary)} .choice-empty {color:var(--text-muted);font-size:14px} .product-card {overflow:hidden} .product-mount-title {margin-bottom:16px;color:#1d7fe8;font-size:18px;font-weight:850;line-height:1.35} .product-main {display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-areas:"cover info" "stepper total";gap:16px 22px;align-items:center} .product-cover {grid-area:cover;display:flex;width:132px;height:112px;flex:0 0 132px;align-items:center;justify-content:center;overflow:hidden;border:1px solid #edf0f5;border-radius:10px;background:#fff;color:var(--text-muted);font-size:14px} .product-cover img {display:block;width:100%;height:100%;object-fit:contain;background:#fff} .product-info {grid-area:info;min-width:0} .product-kicker {display:inline-flex;align-items:center;height:22px;margin-bottom:7px;padding:0 8px;border-radius:999px;background:#fff4e8;color:#f77234;font-size:12px;font-weight:750} .product-info h2 {margin:0;color:var(--text);font-size:21px;font-weight:850;line-height:1.35} .product-price {display:flex;align-items:baseline;gap:8px;margin-top:8px} .product-price strong {color:#f53f3f;font-size:23px;font-weight:900} .product-price del {color:var(--text-muted);font-size:15px} .product-card.is-selected {border-color:rgba(22,100,255,.18);box-shadow:0 14px 34px rgba(22,100,255,.10)} .product-action-row {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding:13px 14px;border:1px solid #edf0f5;border-radius:16px;background:#fbfcfe} .quantity-copy {display:grid;gap:3px;min-width:0} .quantity-copy span {color:var(--text);font-size:15px;font-weight:700} .quantity-copy small {color:var(--text-muted);font-size:12px} .quantity-stepper {grid-area:stepper;display:inline-flex;align-items:center;justify-self:start;height:36px;overflow:hidden;border:1px solid #e7ebf1;border-radius:4px;background:#fff} .quantity-stepper button {width:42px;height:36px;border:0;background:transparent;font-size:20px;font-weight:800;cursor:pointer} .quantity-stepper button[data-qty-minus] {color:#9aa3b2} .quantity-stepper button[data-qty-plus] {color:#f53f3f} .quantity-stepper input {width:52px;height:36px;border:0;border-right:1px solid #edf0f5;border-left:1px solid #edf0f5;outline:none;color:var(--text);font-size:15px;font-weight:800;text-align:center} .product-total {grid-area:total;justify-self:end;margin:0;padding:0;border-top:0;color:var(--text);font-size:28px;font-weight:500;line-height:1.2} @media (max-width:480px) {.product-main {grid-template-columns:96px minmax(0,1fr);gap:13px 14px} .product-cover {width:96px;height:96px;flex-basis:96px} .product-info h2 {font-size:18px} .product-price strong {font-size:20px} .product-price del {font-size:13px} .quantity-stepper button {width:36px} .quantity-stepper input {width:42px} .product-total {font-size:24px} } .goods-extra {display:grid;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid #edf0f4} .goods-extra[hidden] {display:none} .goods-extra-field {display:grid;gap:8px} .goods-extra-label {display:block;color:var(--text);font-size:16px;font-weight:800;line-height:1.38} .goods-extra-label .required {margin-right:5px} .area-select-grid {display:grid;gap:10px} .area-select {min-height:52px;padding:0 42px 0 16px;border:1px solid transparent;border-radius:14px;background-color:var(--field);color:var(--text);appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8f959e 50%),linear-gradient(135deg,#8f959e 50%,transparent 50%);background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat} .area-select:disabled {color:var(--text-muted);opacity:1;cursor:not-allowed} .area-picker {position:relative} .area-trigger {display:flex;width:100%;min-height:52px;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 0 16px;border:1px solid transparent;border-radius:14px;outline:none;background:var(--field);color:var(--text-muted);text-align:left;cursor:pointer} .area-trigger.has-value {color:var(--text)} .area-trigger:focus,.area-picker.is-open .area-trigger {border-color:rgba(22,100,255,.35);background:#fff;box-shadow:0 0 0 4px rgba(22,100,255,.08)} .area-trigger i {width:9px;height:9px;flex:0 0 9px;border-right:2px solid #8f959e;border-bottom:2px solid #8f959e;transform:rotate(45deg) translateY(-2px)} .area-panel {position:static;z-index:30;display:none;width:100%;margin-top:8px;overflow:hidden;border:1px solid #e7ebf1;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(31,35,41,.08)} .area-picker.is-open .area-panel {display:block} .area-cascade {display:grid;gap:10px;max-height:66vh;overflow-y:auto;padding:10px} .area-column {overflow:hidden;border:1px solid #edf0f5;border-radius:14px;background:#fbfcfe} .area-column-title {display:flex;align-items:center;height:38px;padding:0 12px;border-bottom:1px solid #eef0f4;color:var(--text);font-size:14px;font-weight:800} .area-tabs {display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #eef0f4;background:#fbfcfe} .area-tabs button {height:42px;border:0;background:transparent;color:var(--text-soft);font-size:14px;font-weight:750;cursor:pointer} .area-tabs button.is-active {color:var(--primary);background:#eef4ff} .area-options {display:grid;max-height:186px;overflow-y:auto;padding:8px} .area-option {min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;cursor:pointer;padding:0 12px} .area-option.is-selected,.area-option:active {background:var(--primary-soft);color:var(--primary);font-weight:750} .area-empty {padding:18px 12px;color:var(--text-muted);font-size:14px} .address-input {min-height:52px;border-radius:14px} .submit-actions {position:relative;z-index:1;padding:4px 0 calc(8px + env(safe-area-inset-bottom))} .submit-btn {width:100%;height:52px;border:0;border-radius:14px;background:var(--primary);color:#fff;font-size:17px;font-weight:850;box-shadow:0 12px 28px rgba(22,100,255,.20);cursor:pointer;transition:background .18s ease,transform .18s ease,box-shadow .18s ease} .submit-btn:active {background:var(--primary-hover);transform:translateY(1px);box-shadow:0 8px 18px rgba(22,100,255,.18)} .submit-btn:disabled {opacity:.7;cursor:not-allowed} .submit-tip {margin:8px 0 0;color:var(--text-muted);font-size:13px;text-align:center} .submit-result {position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(31,35,41,.46)} .submit-result[hidden] {display:none} .submit-result div {width:min(340px,100%);padding:30px 24px;border-radius:20px;background:#fff;text-align:center;box-shadow:var(--shadow-strong)} .submit-result h2 {margin:0 0 8px;font-size:24px;font-weight:850} .submit-result p {margin:0;color:var(--text-soft)} .field-error {outline:2px solid rgba(245,74,69,.20);outline-offset:7px;border-radius:14px} .field-error .form-control,.field-error .unit-trigger,.field-error.choice-item,.field-error .choice-item {border-color:rgba(245,74,69,.45)} .activity-toast {position:fixed;left:50%;bottom:112px;z-index:80;max-width:calc(100vw - 32px);padding:11px 16px;border-radius:999px;background:rgba(31,35,41,.92);color:#fff;font-size:14px;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .2s ease,transform .2s ease} .activity-toast.is-show {opacity:1;transform:translate(-50%,0)} .activity-submit-dialog[hidden] {display:none} .activity-submit-dialog {position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:22px} .activity-submit-dialog-mask {position:absolute;inset:0;background:rgba(17,24,39,.42)} .activity-submit-dialog-card {position:relative;width:min(324px,100%);padding:26px 22px 22px;border-radius:22px;background:#fff;box-shadow:0 18px 48px rgba(31,35,41,.18);text-align:center} .activity-submit-dialog-mark {display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 14px;border-radius:16px;background:#fff1f1;color:var(--danger);font-size:30px;font-weight:900} .activity-submit-dialog-card h2 {margin:0;color:var(--text);font-size:21px;font-weight:900;line-height:1.35} .activity-submit-dialog-card p {margin:10px 0 0;color:var(--text-soft);font-size:15px;font-weight:650;line-height:1.7} .activity-submit-dialog-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px} .activity-submit-dialog-actions button {min-height:42px;border-radius:999px;font-size:15px;font-weight:850} .activity-submit-dialog-secondary {border:1px solid #e5e7eb;background:#fff;color:var(--text-soft)} .activity-submit-dialog-primary {border:0;background:var(--primary);color:#fff} .success-page {display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#2f8ce9 0,#2f8ce9 210px,#d8efff 390px,var(--page-bg) 680px)} .success-card {width:min(360px,100%);margin:0 auto;padding:36px 24px;border:1px solid rgba(229,231,235,.92);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:var(--shadow-strong);text-align:center} .success-icon {position:relative;width:58px;height:58px;margin:0 auto 18px;border-radius:50%;background:var(--primary);box-shadow:0 12px 26px rgba(22,100,255,.18)} .success-icon::after {content:"";position:absolute;left:19px;top:15px;width:16px;height:26px;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg)} .success-icon-error {background:var(--danger)} .success-icon-error::before,.success-icon-error::after {content:"";position:absolute;left:27px;top:16px;width:4px;height:26px;border:0;border-radius:999px;background:#fff;transform:rotate(45deg)} .success-icon-error::after {transform:rotate(-45deg)} .success-eyebrow {margin:0 0 8px;color:var(--primary);font-size:14px;font-weight:800;letter-spacing:0} .success-card h1 {margin:0;color:var(--text);font-size:26px;font-weight:900;line-height:1.25} .success-desc {margin:12px auto 0;max-width:270px;color:var(--text-soft);font-size:15px;line-height:1.7} .success-detail,.success-answers {margin-top:24px;border:1px solid #eef0f4;border-radius:18px;overflow:hidden;background:#fbfcfe;text-align:left} .success-detail div,.success-answers div {display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;padding:14px 16px} .success-detail div + div,.success-answers div + div {border-top:1px solid #eef0f4} .success-detail span,.success-answers span {color:var(--text-muted);font-size:13px} .success-detail strong,.success-answers strong {min-width:0;color:var(--text);font-size:14px;font-weight:750;line-height:1.55;word-break:break-word} .success-answers h2 {margin:0;padding:14px 16px;border-bottom:1px solid #eef0f4;color:var(--text);font-size:16px;font-weight:850} @supports not selector(:has(*)) {.choice-item {background:#fff} } @media (max-width:480px) {.activity-page {padding-right:10px;padding-bottom:12px;padding-left:10px} .activity-page-no-hero {padding-top:24px} .activity-hero {padding-top:24px} .activity-hero h1 {font-size:23px} .form-card,.product-card {padding:17px 16px;border-radius:18px} .form-label {font-size:17px} .form-control,.unit-trigger {min-height:49px;font-size:16px} .choice-item {font-size:15px} .submit-actions {padding-top:6px} .success-page {padding:12px 14px} .success-card {padding:34px 22px} .success-card h1 {font-size:24px} .address-grid {grid-template-columns:1fr} }