/* ===== 会员端设计系统：由 prototype/member.html 复刻，勿手改尺寸 ===== */
        :root {
            --brand: #3060FC;
            --brand-d: #2450E0;
            --page: #F0F3F8;
            --card: #FFFFFF;
            --ink: #111827;
            --ink-2: #4B5563;
            --ink-3: #8B93A2;
            --line: #EDF0F5;
            --line-2: #E6EAF2;
            --green: #12B76A;
            --green-bg: #ECFDF3;
            --red: #F04438;
            --red-bg: #FEF3F2;
            --amber: #B54708;
            --amber-bg: #FFFAEB;
            --r: 12px;
            --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            background: var(--page);
            font-family: var(--font);
            color: var(--ink);
            font-size: 15px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        button {
            font: inherit;
            color: inherit;
            border: 0;
            background: none;
            cursor: pointer;
            padding: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        input {
            font: inherit;
        }

        .ic {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex: 0 0 auto;
        }

        /* ===== topbar : h70 ===== */
        .topbar {
            height: 70px;
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 30;
        }

        .topbar-in {
            height: 100%;
            max-width: 1536px;
            margin: 0 auto;
            padding: 0 50px;
            display: flex;
            align-items: center;
            gap: 0;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 0 0 auto;
        }

        .brand-ic {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--brand);
            color: #fff;
            display: grid;
            place-items: center;
        }

        .brand-ic .ic {
            width: 19px;
            height: 19px;
            stroke-width: 2;
        }

        .brand-tx {
            font-size: 21px;
            font-weight: 600;
            letter-spacing: -.2px;
        }

        .nav {
            display: flex;
            align-items: stretch;
            height: 70px;
            margin-left: 80px;
        }

        .nav a {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 19px;
            font-size: 15px;
            color: var(--ink-2);
        }

        .nav a.on {
            color: var(--ink);
            font-weight: 500;
        }

        .nav a.on::after {
            content: "";
            position: absolute;
            left: 19px;
            right: 19px;
            bottom: 0;
            height: 2px;
            background: var(--brand);
        }

        .top-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .search {
            display: flex;
            align-items: center;
            gap: 9px;
            width: 232px;
            height: 40px;
            padding: 0 15px;
            border: 1px solid var(--line-2);
            border-radius: 20px;
            background: #fff;
            color: var(--ink-3);
        }

        .search:focus-within {
            border-color: #C7D4F7;
        }

        .search input {
            border: 0;
            outline: 0;
            width: 100%;
            font-size: 14px;
            color: var(--ink);
            background: none;
        }

        .search input::placeholder {
            color: var(--ink-3);
        }

        .bell {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: var(--ink-2);
        }

        .bell .ic {
            width: 21px;
            height: 21px;
        }

        .bell i {
            position: absolute;
            top: 8px;
            right: 9px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--red);
            box-shadow: 0 0 0 2px #fff;
        }

        .me {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .me .av {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #E9EEFA;
            color: #3060FC;
            display: grid;
            place-items: center;
        }

        .me .av .ic {
            width: 20px;
            height: 20px;
            stroke-width: 1.6;
        }

        .me .ic {
            width: 16px;
            height: 16px;
            color: var(--ink-3);
        }

        /* ===== page ===== */
        .page {
            max-width: 1536px;
            margin: 0 auto;
            padding: 19px 50px 40px;
        }

        /* banner h135 */
        .banner {
            height: 135px;
            border-radius: var(--r);
            background: linear-gradient(101deg, #D8E3FC 0%, #E4ECFD 52%, #E9EFFD 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 34px;
            position: relative;
            overflow: hidden;
        }

        .banner::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(90% 160% at 86% 14%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, 0) 62%);
            pointer-events: none;
        }

        .banner h1 {
            margin: 0;
            font-size: 30px;
            font-weight: 600;
            letter-spacing: -.4px;
            color: #1B2559;
            line-height: 1.3;
        }

        .banner p {
            margin: 8px 0 0;
            font-size: 16px;
            color: #56618A;
        }

        .banner .cta {
            position: relative;
            z-index: 1;
            width: 156px;
            height: 48px;
            border-radius: 24px;
            background: #fff;
            color: var(--brand);
            font-size: 16px;
            font-weight: 600;
            box-shadow: 0 6px 18px -8px rgba(28, 43, 96, .35);
        }

        /* stats: h169 gap25 */
        .stats {
            margin-top: 24px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

        .stat {
            height: 169px;
            background: var(--card);
            border-radius: var(--r);
            padding: 19px 26px 25px;
            display: flex;
            flex-direction: column;
        }

        .stat-k {
            font-size: 16px;
            color: var(--ink-3);
            line-height: 1.4;
        }

        .stat-v {
            margin-top: 9px;
            font-size: 31px;
            font-weight: 600;
            letter-spacing: -1.2px;
            color: var(--brand);
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
        }

        .stat-btn {
            margin-top: auto;
            align-self: flex-start;
            height: 36px;
            padding: 0 28px;
            border-radius: 8px;
            background: var(--brand);
            color: #fff;
            font-size: 15px;
            font-weight: 500;
        }

        .stat-btn:hover {
            background: var(--brand-d);
        }

        /* filter row */
        .filter {
            margin-top: 25px;
            height: 38px;
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .chips {
            display: flex;
            align-items: center;
            gap: 30px;
            flex: 1;
            min-width: 0;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .chips::-webkit-scrollbar {
            display: none;
        }

        .chip {
            flex: 0 0 auto;
            font-size: 15px;
            color: var(--ink-2);
            white-space: nowrap;
        }

        .chip.on {
            height: 38px;
            padding: 0 25px;
            border-radius: 19px;
            background: var(--brand);
            color: #fff;
        }

        .sort {
            flex: 0 0 auto;
            position: relative;
        }

        .sort select {
            appearance: none;
            width: 168px;
            height: 38px;
            padding: 0 34px 0 16px;
            border: 1px solid var(--line-2);
            border-radius: 8px;
            background: #fff;
            font-size: 15px;
            color: var(--ink-2);
            outline: none;
            cursor: pointer;
        }

        .sort::after {
            content: "";
            position: absolute;
            right: 16px;
            top: 15px;
            width: 7px;
            height: 7px;
            border-right: 1.5px solid #98A2B3;
            border-bottom: 1.5px solid #98A2B3;
            transform: rotate(45deg);
            pointer-events: none;
        }

        .tools {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .viewtoggle {
            flex: 0 0 auto;
            display: flex;
            border: 1px solid var(--line-2);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
        }

        .viewtoggle button {
            width: 40px;
            height: 36px;
            display: grid;
            place-items: center;
            color: #98A2B3;
            transition: background .15s, color .15s;
        }

        .viewtoggle button + button {
            border-left: 1px solid var(--line-2);
        }

        .viewtoggle button:hover {
            color: var(--ink-2);
        }

        .viewtoggle button.on {
            background: #EFF3FE;
            color: var(--brand);
        }

        .viewtoggle .ic {
            width: 17px;
            height: 17px;
            stroke-width: 1.9;
        }

        /* task grid: 3col gap27 gap22 */
        .grid {
            margin-top: 25px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px 27px;
        }

        .task {
            height: 195px;
            background: var(--card);
            border-radius: var(--r);
            padding: 23px 25px 23px 27px;
            display: flex;
            flex-direction: column;
        }

        .task-hd {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .tile {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
        }

        .tile .ic {
            width: 26px;
            height: 26px;
            stroke-width: 1.8;
        }

        .t-purple {
            background: #9870FC;
            color: #fff;
        }

        .t-orange {
            background: #FC9C44;
            color: #fff;
        }

        .t-green {
            background: #34C08C;
            color: #fff;
        }

        .t-teal {
            background: #28C0E0;
            color: #fff;
        }

        .t-pink {
            background: #FC8CB4;
            color: #fff;
        }

        .t-blue {
            background: #5C8CFC;
            color: #fff;
        }

        .task-title {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: -.1px;
            color: var(--ink);
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .task-meta {
            margin-top: 11px;
            display: flex;
            align-items: center;
            gap: 22px;
            font-size: 14px;
            color: var(--ink-3);
        }

        .task-meta span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .task-meta .ic {
            width: 15px;
            height: 15px;
            stroke-width: 1.6;
        }

        .task-ft {
            margin-top: auto;
            padding-top: 18px;
            border-top: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .remain {
            font-size: 15px;
            color: var(--ink-3);
        }

        .go {
            width: 80px;
            height: 34px;
            border-radius: 999px;
            background: var(--brand);
            color: #fff;
            font-size: 15px;
            font-weight: 500;
        }

        .go:hover {
            background: var(--brand-d);
        }

        /* ---- 条状（列表）布局 ---- */
        .grid.list {
            grid-template-columns: 1fr;
            gap: 12px;
            margin-top: 25px;
        }

        .grid.list .task {
            height: auto;
            min-height: 84px;
            flex-direction: row;
            align-items: center;
            gap: 20px;
            padding: 16px 22px 16px 20px;
        }

        .grid.list .task-hd {
            flex: 1 1 auto;
            min-width: 0;
            gap: 16px;
        }

        .grid.list .tile {
            width: 44px;
            height: 44px;
            border-radius: 11px;
        }

        .grid.list .tile .ic {
            width: 24px;
            height: 24px;
        }

        .grid.list .task-title {
            font-size: 17px;
        }

        .grid.list .task-meta {
            margin: 0;
            flex: 0 0 auto;
            gap: 0;
        }

        .grid.list .task-meta span {
            width: 118px;
        }

        .grid.list .task-ft {
            margin: 0;
            padding: 0;
            border-top: 0;
            flex: 0 0 auto;
            gap: 20px;
        }

        .grid.list .remain {
            width: 104px;
            font-size: 14px;
            text-align: right;
        }

        .grid.list .go {
            width: 78px;
        }

        /* pagination */
        .pager {
            margin-top: 33px;
            display: flex;
            justify-content: center;
            gap: 12px;
        }

        .pg {
            min-width: 41px;
            height: 39px;
            border-radius: 8px;
            border: 1px solid var(--line-2);
            background: #fff;
            color: var(--ink-2);
            font-size: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .pg.on {
            background: var(--brand);
            border-color: var(--brand);
            color: #fff;
        }

        .pg .ic {
            width: 16px;
            height: 16px;
        }

        /* drawer */
        .mask {
            position: fixed;
            inset: 0;
            background: rgba(17, 24, 39, .38);
            z-index: 40;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s;
        }

        .mask.on {
            opacity: 1;
            pointer-events: auto;
        }

        .sheet {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -48%);
            width: 460px;
            background: #fff;
            border-radius: 14px;
            z-index: 41;
            opacity: 0;
            pointer-events: none;
            transition: opacity .18s, transform .2s;
            max-height: 92vh;
            display: flex;
            flex-direction: column;
        }

        .sheet.on {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%);
        }

        .sheet-hd {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px 4px;
        }

        .sheet-hd h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }

        .xbtn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #F3F5F9;
            color: var(--ink-2);
            display: grid;
            place-items: center;
        }

        .sheet-bd {
            padding: 14px 24px 4px;
            overflow-y: auto;
        }

        .sheet-ft {
            padding: 14px 24px 22px;
        }

        .field {
            margin-bottom: 16px;
        }

        .field>label {
            display: block;
            font-size: 13px;
            color: var(--ink-2);
            margin-bottom: 8px;
        }

        .inp {
            width: 100%;
            height: 44px;
            padding: 0 14px;
            border: 1px solid var(--line-2);
            border-radius: 8px;
            outline: none;
            font-size: 15px;
        }

        .inp:focus {
            border-color: var(--brand);
        }

        .seg {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .seg button {
            height: 44px;
            border-radius: 8px;
            border: 1px solid var(--line-2);
            font-size: 15px;
            color: var(--ink-2);
        }

        .seg button.on {
            border-color: var(--brand);
            background: #EFF3FE;
            color: var(--brand);
            font-weight: 500;
        }

        .up {
            width: 92px;
            height: 92px;
            border: 1px dashed #C9D0DC;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            font-size: 12px;
            color: var(--ink-3);
            overflow: hidden;
            cursor: pointer;
        }

        .up img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .amt {
            position: relative;
        }

        .amt .cur {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--ink-2);
        }

        .amt .inp {
            padding-left: 32px;
            padding-right: 84px;
            font-size: 18px;
            font-weight: 600;
        }

        .amt .all {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            height: 28px;
            padding: 0 10px;
            border-radius: 6px;
            background: #EFF3FE;
            color: var(--brand);
            font-size: 12px;
        }

        .err {
            color: var(--red);
            font-size: 12px;
            margin-top: 6px;
            display: none;
        }

        .err.on {
            display: block;
        }

        .note {
            font-size: 12px;
            line-height: 1.7;
            color: var(--ink-3);
            background: #F7F8FB;
            border-radius: 8px;
            padding: 10px 12px;
        }

        .btn-primary {
            width: 100%;
            height: 46px;
            border-radius: 9px;
            background: var(--brand);
            color: #fff;
            font-size: 15px;
            font-weight: 500;
        }

        .btn-line {
            height: 46px;
            border-radius: 9px;
            border: 1px solid var(--line-2);
            color: var(--ink-2);
            font-size: 15px;
        }

        .copyline {
            background: #F7F8FB;
            border-radius: 8px;
            padding: 12px 14px;
            font-size: 13px;
            font-family: ui-monospace, Menlo, Consolas, monospace;
            color: var(--ink-2);
            word-break: break-all;
        }

        .toast-host {
            position: fixed;
            top: 18px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 60;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
            pointer-events: none;
        }

        .toast {
            background: #111827;
            color: #fff;
            font-size: 14px;
            padding: 10px 18px;
            border-radius: 8px;
            box-shadow: 0 12px 30px -10px rgba(17, 24, 39, .4);
        }

        .hide {
            display: none !important;
        }

        /* responsive: keep proportions on smaller screens */
        @media (max-width:1400px) {
            .topbar-in {
                padding: 0 32px;
            }

            .page {
                padding-left: 32px;
                padding-right: 32px;
            }
        }

        @media (max-width:1180px) {
            .nav {
                display: none;
            }

            .grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width:900px) {
            .search {
                display: none;
            }

            .stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px;
            }

            .banner {
                height: auto;
                padding: 22px 24px;
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            .banner h1 {
                font-size: 24px;
            }

            .grid {
                grid-template-columns: 1fr;
            }

            .task {
                height: auto;
            }

            .grid.list .task {
                flex-wrap: wrap;
                row-gap: 10px;
                padding: 14px 16px;
            }

            .grid.list .task-hd {
                flex: 1 1 100%;
            }

            .grid.list .task-title {
                font-size: 16px;
            }

            .grid.list .task-meta {
                flex: 1 1 auto;
                gap: 16px;
            }

            .grid.list .task-meta span {
                width: auto;
            }

            .grid.list .remain {
                width: auto;
                text-align: left;
            }

            .grid.list .task-ft {
                flex: 0 0 auto;
            }

            .grid.list .go {
                width: auto;
                padding: 0 16px;
            }

            .filter {
                gap: 16px;
            }

            .chips {
                gap: 20px;
            }
        }

        @media (max-width:560px) {
            .topbar-in,
            .page {
                padding-left: 16px;
                padding-right: 16px;
            }

            .stats {
                grid-template-columns: 1fr;
            }

            .stat {
                height: auto;
                min-height: 120px;
            }

            .sort {
                display: none;
            }

            .task-title {
                font-size: 16px;
            }

            .sheet {
                width: calc(100% - 24px);
            }
        }
        /* ===== 我的收益 / 邀请 / 帮助 ===== */
        .sec-hd {
            margin: 24px 0 0;
        }

        .sec-hd h2 {
            margin: 0;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: -.3px;
        }

        .sec-hd p {
            margin: 4px 0 0;
            font-size: 14px;
            color: var(--ink-3);
        }

        .row-card {
            background: #fff;
            border-radius: var(--r);
            padding: 4px 22px;
            margin-top: 16px;
        }

        .i-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 0;
            border-bottom: 1px solid var(--line);
        }

        .i-row:last-child {
            border-bottom: 0;
        }

        .i-row .tile {
            width: 40px;
            height: 40px;
            border-radius: 10px;
        }

        .i-row .tile .ic {
            width: 20px;
            height: 20px;
        }

        .i-main {
            flex: 1;
            min-width: 0;
        }

        .i-t {
            font-size: 15px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .i-s {
            font-size: 13px;
            color: var(--ink-3);
            margin-top: 2px;
        }

        .i-amt {
            font-size: 17px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .i-amt.plus {
            color: var(--brand);
        }

        .i-amt.minus {
            color: var(--ink);
        }

        .i-tag {
            font-size: 11px;
            color: var(--ink-3);
            background: #F2F4F8;
            border-radius: 5px;
            padding: 2px 6px;
            margin-left: 6px;
        }

        .faq {
            background: #fff;
            border-radius: var(--r);
            padding: 2px 22px;
            margin-top: 16px;
            max-width: 980px;
        }

        .help-foot {
            max-width: 980px;
        }

        .faq details {
            border-bottom: 1px solid var(--line);
        }

        .faq details:last-child {
            border-bottom: 0;
        }

        .faq summary {
            cursor: pointer;
            list-style: none;
            padding: 17px 0;
            font-size: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .faq summary::-webkit-details-marker {
            display: none;
        }

        .faq summary::after {
            content: "";
            width: 7px;
            height: 7px;
            border-right: 1.5px solid var(--ink-3);
            border-bottom: 1.5px solid var(--ink-3);
            transform: rotate(45deg);
            transition: transform .2s;
            flex: 0 0 auto;
        }

        .faq details[open] summary::after {
            transform: rotate(-135deg);
        }

        .faq p {
            margin: 0 0 17px;
            font-size: 14px;
            color: var(--ink-2);
            line-height: 1.85;
        }

        .me-wrap {
            position: relative;
        }

        .menu {
            position: absolute;
            right: 0;
            top: 46px;
            width: 176px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px;
            box-shadow: 0 14px 34px -10px rgba(15, 23, 42, .26);
            padding: 6px;
            z-index: 40;
            display: none;
        }

        .menu.on {
            display: block;
        }

        .menu button {
            display: flex;
            width: 100%;
            align-items: center;
            gap: 9px;
            height: 40px;
            padding: 0 10px;
            border-radius: 7px;
            font-size: 14px;
            color: var(--ink-2);
        }

        .menu button:hover {
            background: #F4F6FA;
            color: var(--ink);
        }

        .menu .ic {
            width: 16px;
            height: 16px;
            color: var(--ink-3);
        }

        .menu hr {
            border: 0;
            border-top: 1px solid var(--line);
            margin: 5px 6px;
        }

        /* ===== 真实数据接入新增件（原型之外的补充） ===== */
        .task-badge { font-size:12px; padding:3px 9px; border-radius:6px; background:var(--line); color:var(--ink-2); flex:0 0 auto; }
        .task-hd .task-badge { margin-left:auto; }
        .empty { grid-column:1/-1; text-align:center; padding:64px 20px; color:var(--ink-3); font-size:14px; }
        .empty b { display:block; font-size:16px; color:var(--ink-2); font-weight:600; margin-bottom:8px; }
        .loading { grid-column:1/-1; text-align:center; padding:64px 20px; color:var(--ink-3); font-size:14px; }
        .btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 16px; border-radius:9px; background:var(--brand); color:#fff; font-size:14px; font-weight:500; }
        .btn-ghost:hover { background:var(--brand-d); }
        .btn-ghost[disabled] { opacity:.5; cursor:not-allowed; }
        .btn-plain { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px; border-radius:9px; background:#fff; border:1px solid var(--line-2); color:var(--ink-2); font-size:14px; }
        .btn-plain:hover { border-color:var(--brand); color:var(--brand); }
        .stack { display:flex; flex-direction:column; gap:12px; }
        .line-between { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
        .muted { color:var(--ink-3); font-size:13px; }
        .apply-box { background:linear-gradient(120deg,#EEF3FF,#F7F9FF); border-radius:var(--r); padding:22px 24px; margin-bottom:16px; }
        .apply-box h3 { margin:0 0 6px; font-size:17px; }
        .apply-box p { margin:0 0 14px; font-size:13px; color:var(--ink-2); line-height:1.8; }
        .notice { background:var(--amber-bg); color:var(--amber); border-radius:9px; padding:10px 14px; font-size:13px; margin:12px 0; }
        .notice.red { background:var(--red-bg); color:var(--red); }
        .notice.green { background:var(--green-bg); color:var(--green); }
        .sub-tabs { display:flex; gap:6px; margin:16px 0 12px; border-bottom:1px solid var(--line); }
        .sub-tabs button { padding:10px 16px; font-size:14px; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; }
        .sub-tabs button.on { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
        .mini-list { display:flex; flex-direction:column; }
        .mini-empty { text-align:center; padding:30px; color:var(--ink-3); font-size:13px; }
        .stat-v.sm { font-size:32px; }
        .stat .stat-sub { font-size:12px; color:var(--ink-3); margin-top:2px; }
        .faq b { color:var(--brand); font-weight:600; }
        .pg[disabled] { opacity:.4; cursor:not-allowed; }
        .copyline { word-break:break-all; }

        /* 不用 display:none：脚本一旦被拦截（预览器 CSP、CDN 失败）会留下一整页纯白。
           Vue 正常挂载时会移除 v-cloak，元素立刻可见；未挂载则 2.5s 后
           由动画显出 .nojs-tip 静态兜底，至少给出注册/登录入口。 */
        [v-cloak] { visibility: hidden; opacity: 0; animation: cloak-off .01s 2.5s forwards; }
        @keyframes cloak-off { to { visibility: visible; opacity: 1; } }

        /* ===== 条状布局接真实数据后的修正 =====
           原型里「剩余 N 份」只有 6 个字，固定 104px 够用；
           真实数据是「截止 2026-11-20」，会被折成两行。
           同时原型条状没有类型徽章，这里让它紧跟标题而不是被 auto margin 推远。 */
        .grid.list .remain { width: auto; min-width: 0; white-space: nowrap; }
        .grid.list .task-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .grid.list .task-badge { flex: 0 0 auto; white-space: nowrap; }
        .grid.list .task-hd .task-badge { margin-left: 0; }

        /* ===== 窄屏可用性补充（原型隐藏了 nav/search，真实站点需要替代入口） ===== */
        .m-search, .m-tabbar { display: none; }

        @media (max-width:1180px) {
            .m-tabbar {
                display: flex;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 35;
                height: 62px;
                padding-bottom: env(safe-area-inset-bottom, 0);
                background: #fff;
                border-top: 1px solid var(--line);
                box-shadow: 0 -4px 18px rgba(17, 24, 39, .05);
            }
            .m-tabbar button {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                font-size: 11px;
                color: var(--ink-3);
            }
            .m-tabbar button .ic { width: 20px; height: 20px; }
            .m-tabbar button.on { color: var(--brand); font-weight: 600; }
            main.page { padding-bottom: 86px; }
            /* 抽屉别被底栏盖住 */
            .sheet { z-index: 45; }
            .mask { z-index: 44; }
        }

        @media (max-width:900px) {
            .m-search {
                display: flex;
                align-items: center;
                gap: 9px;
                height: 42px;
                padding: 0 14px;
                margin-bottom: 4px;
                background: #fff;
                border: 1px solid var(--line-2);
                border-radius: 10px;
                color: var(--ink-3);
            }
            .m-search input {
                flex: 1;
                min-width: 0;
                border: 0;
                outline: 0;
                background: transparent;
                font-size: 14px;
                color: var(--ink);
            }
        }

        /* 390px 下四张指标卡竖排会占满整屏，任务列表被挤出首屏；
           原型 560px 断点用单列，这里收紧为两列，保留同样的卡片语言 */
        @media (max-width:560px) {
            .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .stat { min-height: 126px; height: auto; padding: 16px 15px 15px; }
            .stat-k { font-size: 13px; }
            .stat-v { font-size: 25px; margin-top: 6px; }
            .stat-btn { height: 32px; padding: 0 16px; font-size: 13px; }
            .stat .stat-sub { font-size: 11px; }
            .banner h1 { font-size: 22px; }
            /* .filter 原本固定 height:38px，改纵向后会把 chips 裁掉 */
            .filter { height: auto; flex-direction: column; align-items: stretch; gap: 12px; }
            .chips { padding-bottom: 2px; }
            .tools { justify-content: flex-end; }
        }


        /* ===== 游客态（根路径公开首页） ===== */
        .guest-btn { height: 36px; padding: 0 18px; border-radius: 9px; font-size: 14px; font-weight: 500; white-space: nowrap; }
        .guest-cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
        .guest-notice { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .guest-notice a { color: var(--brand); font-weight: 600; text-decoration: underline; }
        .auth-sheet { text-align: center; padding: 34px 26px 30px; }
        .auth-sheet .tile { margin: 0 auto 16px; }
        .auth-sheet h4 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
        .auth-sheet p { margin: 0 0 22px; font-size: 13px; line-height: 1.8; color: var(--ink-3); }
        .auth-actions { display: flex; gap: 10px; justify-content: center; }
        .auth-actions .btn-plain, .auth-actions .btn-ghost { height: 40px; padding: 0 26px; text-decoration: none; }
        .auth-back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--ink-3); }
        .auth-back:hover { color: var(--brand); }
        .nojs-tip { max-width: 560px; margin: 90px auto; padding: 34px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 8px 30px rgba(17,24,39,.07); }
        .nojs-tip h2 { font-size: 20px; margin: 0 0 10px; }
        .nojs-tip p { font-size: 14px; color: var(--ink-3); margin: 0 0 20px; }

        @media (max-width:900px) {
            .guest-btn { padding: 0 12px; font-size: 13px; }
            .guest-notice { font-size: 12px; }
        }

        /* ===== 联系客服浮窗 ===== */
        .svc { position: fixed; right: 24px; bottom: 26px; z-index: 40; }
        .svc-btn {
            display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 20px;
            border-radius: 23px; background: var(--brand); color: #fff;
            font-size: 14px; font-weight: 500;
            box-shadow: 0 8px 22px rgba(48, 96, 252, .28); transition: transform .16s;
        }
        .svc-btn:hover { transform: translateY(-1px); }
        .svc-btn .ic { width: 18px; height: 18px; }
        .svc-pop {
            position: absolute; right: 0; bottom: 58px; width: 250px; padding: 16px 18px;
            background: #fff; border-radius: 14px;
            box-shadow: 0 14px 38px rgba(17, 24, 39, .16);
            opacity: 0; visibility: hidden; transform: translateY(8px);
            transition: opacity .18s, transform .18s, visibility .18s;
        }
        .svc:hover .svc-pop, .svc.on .svc-pop { opacity: 1; visibility: visible; transform: translateY(0); }
        .svc-hd { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
        .svc-note { font-size: 12px; color: var(--ink-3); line-height: 1.7; margin-bottom: 10px; }
        .svc-row {
            display: flex; align-items: center; gap: 8px; padding: 9px 10px;
            border-radius: 9px; background: #F7F9FF; font-size: 13px; margin-bottom: 8px;
        }
        .svc-row:last-child { margin-bottom: 0; }
        .svc-row .k { flex: 0 0 34px; color: var(--ink-3); font-size: 12px; }
        .svc-row .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
        .svc-row .cp { flex: 0 0 auto; color: var(--brand); font-size: 12px; }
        .svc-row.plain { background: transparent; padding: 0 2px; }
        .svc-row.plain .v { white-space: normal; }

        @media (max-width: 1180px) {
            .svc { right: 14px; bottom: 78px; }
            .svc-btn { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; }
            .svc-btn span { display: none; }
            .svc-pop { width: 220px; bottom: 58px; }
        }

        /* 后台可编辑的 FAQ 答案支持换行 */
        .faq p { white-space: pre-wrap; }

        /* ===== 公告条与公告抽屉 ===== */
        .annbar {
            display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px;
            margin-bottom: 14px; background: #fff; border: 1px solid var(--line);
            border-radius: 10px; cursor: pointer; transition: border-color .16s;
        }
        .annbar:hover { border-color: var(--brand); }
        .annbar-ic { width: 16px; height: 16px; color: var(--brand); flex: 0 0 auto; }
        .annbar-txt {
            flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; font-size: 14px; color: var(--ink);
        }
        .annbar-more { flex: 0 0 auto; font-size: 12px; color: var(--brand); }

        .ann-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
        .ann-item:first-child { padding-top: 0; }
        .ann-item:last-child { border-bottom: 0; }
        .ann-hd { display: flex; align-items: center; gap: 8px; font-size: 15px; }
        .ann-hd b { font-weight: 600; }
        .ann-top { padding: 1px 7px; border-radius: 6px; background: #FEF1E7; color: #C2601A; font-size: 11px; }
        .ann-time { font-size: 12px; color: var(--ink-3); margin: 4px 0 8px; }
        .ann-body { font-size: 13px; line-height: 1.85; color: var(--ink-2); white-space: pre-wrap; }