/* 用户端统一视觉系统：轻量、清爽、可扩展，不改变业务逻辑。 */
:root {
  /* Brand */
  --ds-primary:#2563eb; --ds-primary-hover:#1d4ed8; --ds-primary-soft:#eff6ff; --ds-primary-border:#bfdbfe;
  /* State */
  --ds-success:#16a34a; --ds-success-soft:#f0fdf4; --ds-warning:#d97706; --ds-warning-soft:#fffbeb; --ds-danger:#dc2626; --ds-danger-soft:#fef2f2; --ds-income:#b7791f;
  /* Surface */
  --ds-bg:#f6f8fb; --ds-card:#ffffff; --ds-input:#f8fafc; --ds-line:#e2e8f0;
  /* Text */
  --ds-ink:#172033; --ds-body:#334155; --ds-muted:#64748b; --ds-placeholder:#94a3b8; --ds-disabled:#cbd5e1;
  /* Typography and geometry */
  --ds-font-sans:Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ds-font-mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ds-radius-sm:10px; --ds-radius-md:14px; --ds-radius-lg:16px;
  --ds-shadow-sm:0 5px 16px rgba(15,23,42,.04); --ds-shadow-md:0 7px 22px rgba(15,23,42,.05);
}
body, button, input, select, textarea { font-family:var(--ds-font-sans)!important; }
button, input, select, textarea { letter-spacing:0!important; }
body:not(.logged-in) { background:var(--ds-bg)!important; }
body.logged-in { background:var(--ds-bg)!important; color:var(--ds-body)!important; }
body.logged-in::before,body.logged-in::after,body.logged-in .bg-orb { display:none!important; }
.navbar { height:68px!important; background:rgba(255,255,255,.94)!important; border-bottom:1px solid var(--ds-line)!important; box-shadow:0 1px 10px rgba(15,23,42,.04)!important; backdrop-filter:blur(18px)!important; }
.navbar-brand,.navbar-brand span { color:var(--ds-ink)!important; background:none!important; -webkit-text-fill-color:initial!important; text-shadow:none!important; }
.navbar-brand i { color:var(--ds-primary)!important; background:none!important; -webkit-text-fill-color:initial!important; }
.navbar-links a { color:#64748b!important; border-radius:10px!important; }
.navbar-links a:hover,.navbar-links a.active { color:var(--ds-primary)!important; background:var(--ds-primary-soft)!important; box-shadow:none!important; text-shadow:none!important; }
.navbar-user { color:var(--ds-body)!important; background:#f8fafc!important; border:1px solid var(--ds-line)!important; box-shadow:none!important; }
.theme-toggle-nav { color:var(--ds-muted)!important; background:#f8fafc!important; border-color:var(--ds-line)!important; }
.main-content { max-width:1180px!important; padding-top:96px!important; color:var(--ds-body)!important; }
.card,.glass,.task-execution-card { background:var(--ds-card)!important; border:1px solid var(--ds-line)!important; border-radius:16px!important; box-shadow:0 7px 22px rgba(15,23,42,.05)!important; backdrop-filter:none!important; }
.card:hover,.glass:hover,.task-execution-card:hover { transform:none!important; box-shadow:var(--ds-shadow-md)!important; }
.btn,.btn-primary,button,input[type=submit] { min-height:42px; border-radius:10px!important; font-weight:600!important; font-family:var(--ds-font-sans)!important; transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease!important; }
.btn-primary { background:var(--ds-primary)!important; color:#fff!important; box-shadow:0 7px 16px rgba(37,99,235,.18)!important; }
.btn-primary:hover { background:var(--ds-primary-hover)!important; }
.btn-outline { color:var(--ds-body)!important; background:#fff!important; border:1px solid #cbd5e1!important; box-shadow:none!important; }
button:disabled,.btn:disabled,input:disabled,select:disabled,textarea:disabled { color:var(--ds-disabled)!important; background:#f1f5f9!important; border-color:#e2e8f0!important; box-shadow:none!important; cursor:not-allowed!important; }
input,select,textarea,.form-input { min-height:44px; background:var(--ds-input)!important; color:var(--ds-ink)!important; border:1px solid var(--ds-line)!important; border-radius:var(--ds-radius-sm)!important; box-shadow:none!important; font-family:var(--ds-font-sans)!important; }
input:focus,select:focus,textarea:focus,.form-input:focus { border-color:#76a5f7!important; box-shadow:0 0 0 4px rgba(37,99,235,.1)!important; background:#fff!important; }
.input-error,.is-invalid { border-color:#fca5a5!important; background:var(--ds-danger-soft)!important; }
.field-error,.error-text { display:block; margin-top:-10px; margin-bottom:10px; color:var(--ds-danger); font-size:12px; }
.badge,.status-badge { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; line-height:1.2; }
.badge-success,.status-success { color:var(--ds-success)!important; background:var(--ds-success-soft)!important; }
.badge-warning,.status-warning { color:var(--ds-warning)!important; background:var(--ds-warning-soft)!important; }
.badge-danger,.status-danger { color:var(--ds-danger)!important; background:var(--ds-danger-soft)!important; }
.badge-info,.status-info { color:var(--ds-primary)!important; background:var(--ds-primary-soft)!important; }
.empty-state { display:grid; place-items:center; gap:8px; min-height:180px; padding:28px 16px; color:var(--ds-muted)!important; text-align:center; background:#fff; border:1px dashed var(--ds-line); border-radius:var(--ds-radius-lg); }
.empty-state i { color:#94a3b8; font-size:26px; }.empty-state p{margin:0;font-size:13px}
.loading-state { display:flex; align-items:center; justify-content:center; gap:8px; min-height:118px; color:var(--ds-body)!important; }
.loading-state .spinner { width:18px; height:18px; border-width:2px; }
.loading-state small { color:var(--ds-muted); font-size:11px; }
.section-title { font-size:20px!important; line-height:1.35; }
.task-tabs .btn { min-height:36px; padding:0 14px!important; border-radius:999px!important; background:#fff!important; color:var(--ds-muted)!important; border:1px solid var(--ds-line)!important; box-shadow:none!important; }
.task-tabs .btn:first-child,.task-tabs .btn.active { color:#fff!important; background:var(--ds-primary)!important; border-color:var(--ds-primary)!important; }
.stats-pill { min-height:42px; border-radius:var(--ds-radius-md)!important; }
table { border-color:var(--ds-line)!important; } th { color:var(--ds-muted)!important; background:#f8fafc!important; font-size:12px; } td { color:var(--ds-body)!important; border-color:var(--ds-line)!important; }
.home-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:18px; padding:28px 30px; color:#fff; background:var(--ds-primary); border-radius:18px; box-shadow:0 14px 28px rgba(37,99,235,.16); }
.home-kicker { display:block; margin-bottom:8px; font-size:11px; letter-spacing:.16em; font-weight:800; opacity:.76; }
.home-hero h1 { margin:0 0 7px; font-size:28px; line-height:1.25; letter-spacing:-.02em; }
.home-hero p { margin:0; max-width:560px; color:rgba(255,255,255,.82); font-size:14px; }
.home-hero-actions { display:flex; gap:9px; margin-top:18px; flex-wrap:wrap; }
.home-hero .btn-primary { color:var(--ds-primary)!important; background:#fff!important; box-shadow:none!important; }
.home-hero .btn-outline { color:#fff!important; background:rgba(255,255,255,.12)!important; border-color:rgba(255,255,255,.42)!important; }
.home-hero-mark { display:flex; flex:0 0 170px; flex-direction:column; align-items:center; gap:5px; padding:20px 12px; text-align:center; border:1px solid rgba(255,255,255,.22); border-radius:14px; background:rgba(255,255,255,.1); }
.home-hero-mark i { font-size:28px; }.home-hero-mark b{font-size:14px}.home-hero-mark small{font-size:11px;color:rgba(255,255,255,.74)}
.home-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 18px; }
.home-summary-card { padding:17px 18px; background:var(--ds-card); border:1px solid var(--ds-line); border-radius:var(--ds-radius-md); box-shadow:var(--ds-shadow-sm); }
.home-summary-card span { display:block; color:var(--ds-muted); font-size:12px; }.home-summary-card span i{margin-right:5px;color:var(--ds-primary)}
.home-summary-card b { display:block; margin-top:7px; color:var(--ds-ink); font-size:25px; line-height:1.15; }.home-summary-card b em{font-size:13px;color:var(--ds-muted);font-style:normal;font-weight:500}.home-summary-card small{display:block;margin-top:5px;color:#94a3b8;font-size:11px}
.home-tools { gap:10px!important; margin:0 0 26px!important; }
.home-tool { min-height:92px!important; align-items:flex-start!important; padding:15px!important; text-align:left!important; border:1px solid var(--ds-line)!important; border-radius:14px!important; box-shadow:0 5px 16px rgba(15,23,42,.04)!important; color:var(--ds-ink)!important; background:#fff!important; }
.home-tool-icon { width:34px!important; height:34px!important; margin-bottom:7px; border-radius:10px!important; background:var(--ds-primary-soft)!important; color:var(--ds-primary)!important; }.home-tool b{font-size:13px}.home-tool small{color:var(--ds-muted);font-size:11px}
.section-title { color:var(--ds-ink)!important; font-weight:700!important; }
.task-rule { background:#fffbeb!important; border:1px solid #fde68a!important; color:#9a6b15!important; }
.task-summary .stats-pill { background:#fff!important; border:1px solid var(--ds-line)!important; color:var(--ds-muted)!important; }
.leaderboard-list,.leaderboard-choice,.global-board-card,.leader-choice-card,.my-rank { border-radius:var(--ds-radius-lg)!important; }
.leader-row,.global-rank-row { display:grid!important; grid-template-columns:40px minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:58px; padding:10px 4px; border-bottom:1px solid var(--ds-line)!important; color:var(--ds-body); }
.leader-row:last-child,.global-rank-row:last-child { border-bottom:0!important; }
.leader-row>b,.global-rank-row>b { display:grid; place-items:center; width:28px; height:28px; color:var(--ds-muted); font-size:12px; font-weight:700; }
.leader-row:nth-child(1)>b,.global-rank-row:nth-child(1)>b { color:#b7791f; background:#fffbeb; border-radius:50%; }.leader-row:nth-child(2)>b,.global-rank-row:nth-child(2)>b{color:#64748b;background:#f1f5f9;border-radius:50%}.leader-row:nth-child(3)>b,.global-rank-row:nth-child(3)>b{color:#a16207;background:#fef3c7;border-radius:50%}
.leader-row span,.global-rank-row span { color:var(--ds-ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.leader-row small,.global-rank-row small{color:var(--ds-muted);font-size:11px}.leader-row strong,.global-rank-row strong{color:var(--ds-income);font-size:14px;white-space:nowrap}
.my-rank,.global-my-rank { margin-top:12px!important; padding:13px 15px!important; color:var(--ds-primary)!important; background:var(--ds-primary-soft)!important; border:1px solid var(--ds-primary-border)!important; }
.global-board-head,.leaderboard-section-head { padding-bottom:12px; border-bottom:1px solid var(--ds-line); }.global-board-head b{color:var(--ds-ink)!important}.global-board-head small{color:var(--ds-muted)!important}
#taskExecution .task-execution-card { overflow:hidden; }.task-execution-title{border-bottom:1px solid var(--ds-line);}.task-execution-title h3{color:var(--ds-ink)!important}.task-execution-section{border-top:0!important;background:#fff;border-bottom:1px solid #f1f5f9}.task-execution-section:last-child{border-bottom:0}.task-progress{margin:16px 0!important}.task-step.active .task-step-dot{background:var(--ds-primary-soft)!important;color:var(--ds-primary)!important;box-shadow:0 0 0 4px rgba(37,99,235,.1)!important}.task-step.done .task-step-dot{background:var(--ds-success-soft)!important;color:var(--ds-success)!important}.next-action{border-left-color:var(--ds-primary)!important;background:var(--ds-primary-soft)!important}.next-action b{color:var(--ds-ink)!important}.task-submit-btn,.claim-primary-action{background:var(--ds-primary)!important;color:#fff!important}
.mobile-tab { background:rgba(255,255,255,.97)!important; border-top:1px solid var(--ds-line)!important; box-shadow:0 -5px 20px rgba(15,23,42,.08)!important; backdrop-filter:blur(18px)!important; }
.mobile-tab a { color:#94a3b8!important; }.mobile-tab a.active{color:var(--ds-primary)!important}.mobile-tab a.active i{background:var(--ds-primary-soft)!important;color:var(--ds-primary)!important}
@media(max-width:768px){.main-content{width:100%!important;padding:82px 14px 98px!important}.home-hero{display:block;padding:22px 20px}.home-hero h1{font-size:23px}.home-hero-mark{display:none}.home-summary{gap:8px}.home-summary-card{padding:13px 11px}.home-summary-card b{font-size:20px}.home-summary-card small{font-size:10px}.home-tools{grid-template-columns:repeat(2,1fr)!important}.home-tool{min-height:86px!important}.home-hero-actions .btn{flex:1 1 auto}.mobile-tab{height:calc(70px + env(safe-area-inset-bottom,0px))!important}}
@media(max-width:768px){
  .main-content { padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important; }
  .page-header { margin-bottom:12px!important; }
  .task-tabs { padding-bottom:2px!important; scrollbar-width:none; }
  .task-tabs::-webkit-scrollbar { display:none; }
  .task-summary { gap:7px!important; }
  .stats-pill { min-width:0!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mat-card { width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; grid-template-columns:52px minmax(0,1fr) minmax(76px,auto)!important; column-gap:9px!important; padding:12px!important; }
  .mat-thumb { width:52px!important; height:52px!important; }
  .mat-title { font-size:14px!important; }
  .task-meta,.mat-desc { font-size:10px!important; }
  .task-side { min-width:0!important; gap:7px!important; }
  .task-price { font-size:17px!important; }
  .task-side .btn { min-height:34px!important; padding:0 9px!important; font-size:11px!important; white-space:nowrap; }
  .empty-state { min-height:150px!important; padding:24px 14px!important; }
  .loading-state { min-height:112px!important; flex-wrap:wrap; padding:22px 14px!important; }
  .loading-state small { flex-basis:100%; text-align:center; margin-top:-3px; }
}
@media (min-width:769px) and (max-width:1120px) {
  .navbar { padding:0 16px!important; }
  .navbar-links { min-width:0; flex:1; margin:0 12px; overflow-x:auto; scrollbar-width:none; }
  .navbar-links::-webkit-scrollbar { display:none; }
  .navbar-links a { flex:0 0 auto; padding:9px 11px!important; font-size:12px!important; }
  .main-content { width:calc(100% - 32px)!important; max-width:960px!important; }
  .material-grid { min-width:0!important; }
  .mat-card { width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; grid-template-columns:58px minmax(0,1fr) minmax(86px,auto)!important; }
  .mat-title,.mat-desc { min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; }
  .task-side { min-width:0!important; justify-self:end!important; }
}