/* DV Mobile UI refresh — visual overrides only, business logic remains unchanged. */
:root {
    --dv-primary: #6d5dfc;
    --dv-primary-strong: #5546e8;
    --dv-primary-soft: #f0eeff;
    --dv-blue: #3b82f6;
    --dv-green: #10b981;
    --dv-orange: #f59e0b;
    --dv-bg: #f5f6fa;
    --dv-card: #ffffff;
    --dv-text: #171923;
    --dv-muted: #767b8c;
    --dv-line: #e9eaf0;
    --dv-shadow: 0 10px 30px rgba(31, 35, 48, .07);
}

html, body { background: var(--dv-bg) !important; color: var(--dv-text); }
body::before, body::after, .bg-orb { display: none !important; }

.navbar {
    height: 68px !important;
    padding: 0 max(22px, calc((100vw - 1180px)/2)) !important;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid var(--dv-line) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
}
.navbar-brand { color: var(--dv-text) !important; font-weight: 800 !important; }
.navbar-brand i { color: var(--dv-primary); }
.navbar-links a { color: #626779 !important; border-radius: 10px !important; }
.navbar-links a:hover, .navbar-links a.active {
    color: var(--dv-primary) !important;
    background: var(--dv-primary-soft) !important;
}

.main-content { width: min(1180px, calc(100% - 32px)) !important; margin: 0 auto !important; padding: 92px 0 100px !important; }
.card, .glass, .glass-card, .task-execution-card {
    background: var(--dv-card) !important;
    border: 1px solid var(--dv-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--dv-shadow) !important;
    backdrop-filter: none !important;
}
.page-header { margin-bottom: 20px !important; }
.page-header h2 { color: var(--dv-text) !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.5px; }
.global-back-link, .back-link {
    width: 40px; height: 40px; border-radius: 12px !important;
    background: #fff !important; color: #454a5c !important;
    border: 1px solid var(--dv-line) !important; box-shadow: 0 4px 14px rgba(31,35,48,.06);
}

.btn, .btn-primary {
    min-height: 42px; border-radius: 12px !important; border: 0 !important;
    background: linear-gradient(135deg, var(--dv-primary), var(--dv-primary-strong)) !important;
    color: #fff !important; font-weight: 700 !important; box-shadow: 0 7px 18px rgba(109,93,252,.2) !important;
}
.btn:hover, .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn-outline {
    background: #fff !important; color: var(--dv-primary) !important;
    border: 1px solid #dcd8ff !important; box-shadow: none !important;
}
input, textarea, select, .form-input {
    min-height: 46px; border-radius: 12px !important; border: 1px solid #dfe1e8 !important;
    background: #fff !important; color: var(--dv-text) !important; box-shadow: none !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--dv-primary) !important; box-shadow: 0 0 0 3px rgba(109,93,252,.12) !important; }

.home-tools { gap: 12px !important; }
.home-tool {
    background: #fff !important; color: #454a5c !important; border: 1px solid var(--dv-line) !important;
    border-radius: 16px !important; box-shadow: 0 6px 22px rgba(31,35,48,.05) !important;
}
.home-tool-icon { background: var(--dv-primary-soft) !important; color: var(--dv-primary) !important; }
.section-title { color: var(--dv-text) !important; font-size: 22px !important; font-weight: 800 !important; }
.task-rule { background: #fff8e8 !important; color: #876214 !important; border: 1px solid #fde7ad !important; border-radius: 12px !important; }
.task-tabs { background: #fff !important; border: 1px solid var(--dv-line); border-radius: 14px; padding: 6px !important; }
.task-summary { gap: 8px !important; }
.stats-pill { background: #fff !important; color: #555b6e !important; border: 1px solid var(--dv-line) !important; }

.material-grid { gap: 16px !important; }
.mat-card { overflow: hidden; padding: 0 0 16px !important; transition: transform .2s ease, box-shadow .2s ease; }
.mat-card:hover { transform: translateY(-3px); box-shadow: 0 15px 36px rgba(31,35,48,.1) !important; }
.mat-thumb { border-radius: 0 !important; background: #eceafa !important; }
.mat-title, .mat-desc, .task-meta, .task-region, .task-side, .mat-next-hint { margin-left: 16px !important; margin-right: 16px !important; }
.mat-title { margin-top: 15px !important; color: var(--dv-text) !important; font-weight: 800 !important; }
.task-price { color: #ef5b4c !important; font-weight: 900 !important; }
.mat-next-hint { color: var(--dv-primary) !important; background: var(--dv-primary-soft) !important; border-radius: 10px; padding: 9px 11px; }

.task-execution-title { background: linear-gradient(135deg, #252044, #594cc4) !important; color: #fff !important; border-radius: 16px !important; }
.wizard-step, .task-step-card { border: 1px solid var(--dv-line) !important; border-radius: 14px !important; background: #fff !important; }
.wizard-step.is-current { border-color: #bdb6ff !important; box-shadow: 0 0 0 3px rgba(109,93,252,.08) !important; }
.wizard-step summary { color: var(--dv-text) !important; }
.step-badge, .task-step.active .task-step-dot { background: var(--dv-primary) !important; color: #fff !important; }
.task-step.done .task-step-dot { background: var(--dv-green) !important; }
.next-action { background: var(--dv-primary-soft) !important; color: var(--dv-primary-strong) !important; border: 0 !important; }

.profile-menu, .referral-section { background: #fff !important; border: 1px solid var(--dv-line) !important; border-radius: 16px !important; box-shadow: var(--dv-shadow) !important; }
.profile-menu a { color: #35394a !important; border-bottom-color: var(--dv-line) !important; }
.profile-menu a i:first-child { color: var(--dv-primary); }

.picker-overlay { background: rgba(18,20,30,.55) !important; backdrop-filter: blur(6px); }
.picker-sheet { background: #fff !important; color: var(--dv-text) !important; border-radius: 24px 24px 0 0 !important; border: 0 !important; }
.announcement-video, .referral-guide-video, .task-tutorial-video { display: block; width: 100%; min-height: 180px; background: #111827; border-radius: 14px; object-fit: contain; }
.announcement-video:focus { outline: 3px solid rgba(109,93,252,.25); outline-offset: 2px; }

.mobile-tab {
    background: rgba(255,255,255,.96) !important; border-top: 1px solid var(--dv-line) !important;
    box-shadow: 0 -8px 30px rgba(31,35,48,.08) !important; backdrop-filter: blur(18px);
}
.mobile-tab a { color: #9296a5 !important; }
.mobile-tab a.active { color: var(--dv-primary) !important; }
.mobile-tab a.active i { background: var(--dv-primary-soft); border-radius: 12px; padding: 7px 14px; }
.leaderboard-list { margin-top: 16px; padding: 6px 18px !important; }
.leader-row { display:flex; align-items:center; gap:14px; padding:16px 4px; border-bottom:1px solid var(--dv-line); }
.leader-row:last-child { border-bottom:0; }.leader-row>b { width:34px; color:var(--dv-primary); }.leader-row span { flex:1; font-weight:700; }.leader-row small { color:var(--dv-muted); }.leader-row strong { color:#ef5b4c; }
.my-rank { margin-top:14px; padding:18px !important; display:flex; justify-content:space-between; gap:10px; }.my-rank b { color:var(--dv-primary); }.my-rank span { color:var(--dv-muted); }
.leaderboard-tabs { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.leaderboard-tabs:before { content:'任务收益榜'; width:100%; font-size:18px; font-weight:800; color:var(--dv-text); }
.leaderboard-list { position:relative; overflow:hidden; }
.leaderboard-list:before { content:'按已结算任务收益排名 · 每日更新'; display:block; padding:12px 4px 8px; color:var(--dv-muted); font-size:12px; }
.leader-row:first-of-type { background:linear-gradient(90deg,#fff8df,transparent); border-radius:12px; }
.leader-row:nth-of-type(2) { background:linear-gradient(90deg,#f4f7fb,transparent); border-radius:12px; }
.leader-row:nth-of-type(3) { background:linear-gradient(90deg,#fff1e8,transparent); border-radius:12px; }
.leader-row:first-of-type>b { color:#d59b18; font-size:19px; }.leader-row:nth-of-type(2)>b { color:#8090a4; font-size:18px; }.leader-row:nth-of-type(3)>b { color:#bc704a; font-size:18px; }
.leaderboard-choice { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; align-items:stretch; }
.global-board-card { background:linear-gradient(160deg,#08164b 0%,#102b86 52%,#1d4cc4 100%); border:1px solid rgba(117,157,255,.5); border-radius:24px; padding:20px; box-shadow:0 18px 40px rgba(12,37,117,.28); color:#fff; overflow:hidden; position:relative; }
.global-board-card:after { content:''; position:absolute; width:180px; height:180px; border-radius:50%; right:-80px; top:-90px; background:rgba(76,121,255,.22); pointer-events:none; }.global-board-card.task { border-top:3px solid #ffd34e; }.global-board-card.referral { border-top:3px solid #ff7b82; }
.global-board-head { display:flex; align-items:center; gap:12px; padding-bottom:15px; border-bottom:1px solid rgba(181,204,255,.22); position:relative; z-index:1; }.global-board-head>i { font-size:29px; color:#ffd34e; }.global-board-card.referral .global-board-head>i { color:#ff7b82; }.global-board-head b,.global-board-head small { display:block; }.global-board-head b { font-size:21px; letter-spacing:.02em; }.global-board-head small { color:rgba(232,239,255,.75); font-size:12px; margin-top:3px; }
.global-board-head:after { content:'\f521'; font-family:'Font Awesome 6 Free'; font-weight:900; margin-left:auto; font-size:48px; color:rgba(227,236,255,.34); transform:rotate(10deg); }
.global-board-body { padding-top:10px; position:relative; z-index:1; }.global-board-body:before { content:'排名                 用户                                      本月收益'; display:block; white-space:pre; color:#c7d7ff; font-size:12px; padding:2px 8px 7px; }.global-rank-row { display:flex; align-items:center; gap:12px; padding:13px 8px; border-bottom:1px solid rgba(181,204,255,.18); }.global-rank-row>b { width:28px; color:#dbe7ff; font-size:18px; text-align:center; }.global-rank-row span { flex:1; font-weight:700; color:#fff; }.global-rank-row small { color:rgba(232,239,255,.7); display:none; }.global-rank-row strong { color:#ffe27b; font-size:17px; min-width:92px; text-align:right; }.global-rank-row:nth-child(1),.global-rank-row:nth-child(2),.global-rank-row:nth-child(3) { border:1px solid rgba(255,255,255,.18); border-radius:14px; margin:7px 0; padding:14px 8px; }.global-rank-row:nth-child(1) { background:linear-gradient(90deg,rgba(255,190,40,.3),rgba(255,255,255,.06)); border-color:#f8c940; }.global-rank-row:nth-child(2) { background:linear-gradient(90deg,rgba(196,213,239,.25),rgba(255,255,255,.05)); }.global-rank-row:nth-child(3) { background:linear-gradient(90deg,rgba(224,137,85,.28),rgba(255,255,255,.05)); }.global-my-rank { margin-top:16px; padding:15px 14px; border-radius:14px; background:linear-gradient(90deg,rgba(71,125,255,.75),rgba(89,145,255,.42)); color:#fff; font-size:14px; font-weight:800; display:flex; justify-content:space-between; gap:8px; }
.global-rank-row span:before { content:'\f007'; font-family:'Font Awesome 6 Free'; font-weight:900; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; margin-right:8px; vertical-align:middle; background:rgba(255,255,255,.9); color:#9aa9c9; font-size:14px; }
.global-rank-row:nth-child(1)>b,.global-rank-row:nth-child(2)>b,.global-rank-row:nth-child(3)>b { position:relative; color:transparent; font-size:0; }
.global-rank-row:nth-child(1)>b:before,.global-rank-row:nth-child(2)>b:before,.global-rank-row:nth-child(3)>b:before { content:'1'; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#8a5600; font-size:20px; font-weight:900; background:linear-gradient(145deg,#fff7b0,#ffc928 58%,#e79300); border:2px solid #fff1a0; box-shadow:0 3px 8px rgba(0,0,0,.3); }
.global-rank-row:nth-child(2)>b:before { content:'2'; color:#53627a; background:linear-gradient(145deg,#fff,#b9c9df 58%,#8498b5); border-color:#e9f1ff; }
.global-rank-row:nth-child(3)>b:before { content:'3'; color:#834022; background:linear-gradient(145deg,#ffe2bd,#f29b62 58%,#bc5a33); border-color:#ffd8b8; }
.leader-choice-card { display:flex; flex-direction:column; gap:10px; padding:24px; min-height:190px; border-radius:20px; color:#fff !important; text-decoration:none; box-shadow:0 14px 30px rgba(31,35,48,.12); }
.leader-choice-card.task { background:linear-gradient(135deg,#5546e8,#8a7dff); }.leader-choice-card.referral { background:linear-gradient(135deg,#e88a32,#f3b34b); }
.leader-choice-card>i { font-size:30px; opacity:.9; }.leader-choice-card>b { font-size:20px; }.leader-choice-card>span { opacity:.85; font-size:13px; }.leader-choice-card>em { margin-top:auto; font-style:normal; font-size:13px; }
@media(max-width:760px){.leaderboard-choice{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.leader-choice-card{min-height:150px;padding:12px;border-radius:17px;}.leader-choice-card>i{font-size:22px}.leader-choice-card>b{font-size:15px}.leader-choice-card>span,.leader-choice-card>em{font-size:11px}.global-board-card{padding:12px;border-radius:18px}.global-board-head{gap:7px;padding-bottom:10px}.global-board-head>i{font-size:21px}.global-board-head b{font-size:14px}.global-board-head small{font-size:10px}.global-board-head:after{font-size:27px}.global-board-body:before{font-size:9px;padding:3px 2px 6px}.global-rank-row{gap:5px;padding:9px 3px}.global-rank-row>b{width:24px}.global-rank-row>b:before{width:27px;height:27px;font-size:14px}.global-rank-row span{font-size:12px;white-space:nowrap}.global-rank-row span:before{width:24px;height:24px;margin-right:4px;font-size:10px}.global-rank-row strong{font-size:12px;min-width:54px}.global-my-rank{margin-top:10px;padding:9px 7px;font-size:11px;display:block}.global-my-rank span{display:block;margin-top:3px}}
.my-rank { background:linear-gradient(135deg,#f0eeff,#f7f9ff) !important; border-color:#dcd8ff !important; }

#supportWidget .support-fab { background: linear-gradient(135deg, #6d5dfc, #3b82f6) !important; box-shadow: 0 10px 30px rgba(79,70,229,.32) !important; }
.mobile-home-hero,.mobile-task-hero{display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;color:#18358e;border-radius:18px;padding:22px 20px;margin-bottom:16px;background:linear-gradient(120deg,#e8e3ff,#d9ecff 58%,#f8dafa);box-shadow:0 10px 24px rgba(97,105,196,.13)}.mobile-home-hero b,.mobile-task-hero b{display:block;font-size:23px;line-height:1.3}.mobile-home-hero span,.mobile-task-hero span{display:block;margin-top:8px;color:#586ba8;font-size:12px}.mobile-home-hero>i,.mobile-task-hero>i{display:grid;place-items:center;width:66px;height:66px;border-radius:20px;color:#fff;font-size:26px;background:linear-gradient(145deg,#8f7bff,#6355df);box-shadow:0 12px 22px rgba(94,78,218,.28);transform:rotate(8deg)}.mobile-task-hero{background:linear-gradient(120deg,#e7e0ff,#e2efff 58%,#f8d9f7)}.mobile-task-hero small{display:flex;gap:6px;margin-top:13px}.mobile-task-hero small em{font-style:normal;font-size:10px;background:rgba(255,255,255,.75);padding:5px 8px;border-radius:99px;color:#41559a}.mobile-task-hero small em:first-child{color:#5946dd;font-weight:700}

body[data-theme="dark"] {
    --dv-bg: #11131a; --dv-card: #1b1e28; --dv-text: #f5f6fa; --dv-muted: #a5a9b7; --dv-line: #2b2f3c;
}
body[data-theme="dark"] .navbar, body[data-theme="dark"] .mobile-tab,
body[data-theme="dark"] .btn-outline, body[data-theme="dark"] input,
body[data-theme="dark"] textarea, body[data-theme="dark"] select,
body[data-theme="dark"] .home-tool, body[data-theme="dark"] .task-tabs,
body[data-theme="dark"] .stats-pill, body[data-theme="dark"] .wizard-step,
body[data-theme="dark"] .task-step-card, body[data-theme="dark"] .picker-sheet { background: #1b1e28 !important; color: var(--dv-text) !important; }
@media(max-width:760px){.mobile-home-hero,.mobile-task-hero{padding:17px 14px;border-radius:17px}.mobile-home-hero b,.mobile-task-hero b{font-size:18px}.mobile-home-hero>i,.mobile-task-hero>i{width:52px;height:52px;font-size:21px;border-radius:16px}.mobile-task-hero small{gap:4px}.mobile-task-hero small em{padding:4px 5px;font-size:9px}}
@media(max-width:760px){#taskExecution>.task-execution-card>.task-execution-title{display:none!important}}

@media (max-width: 760px) {
    .navbar { height: 58px !important; padding: 0 16px !important; }
    .navbar-links { display: none !important; }
    .navbar-brand span { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .main-content { width: 100% !important; padding: 74px 14px 92px !important; }
    .page-header h2 { font-size: 21px !important; }
    .home-tools { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
    .home-tool { min-width: 0; padding: 12px 4px !important; font-size: 12px !important; }
    .home-tool-icon { width: 42px !important; height: 42px !important; }
    .material-grid { grid-template-columns: 1fr !important; }
    .mat-card { border-radius: 17px !important; }
    .task-execution-card { padding: 12px !important; }
    .task-execution-title { padding: 18px !important; }
    .task-progress { overflow-x: auto; padding-bottom: 5px; }
    .task-step { min-width: 65px; }
    .task-wizard-actions { position: sticky; bottom: 72px; background: rgba(255,255,255,.96); padding: 10px; border-radius: 14px; box-shadow: 0 8px 26px rgba(31,35,48,.12); z-index: 8; }
    body[data-theme="dark"] .task-wizard-actions { background: rgba(27,30,40,.96); }
    .picker-sheet { max-height: 88vh !important; overflow-y: auto !important; }
}