:root {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #162441;
  background: #f4f7fc;
  font-synthesis: none;
  font-size: 15px;
  --blue: #1677ff;
  --muted: #8290a8;
  --line: #e7edf6;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
  transition: filter 0.15s;
}
button:hover {
  filter: brightness(0.96);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.secondary {
  background: #edf4ff;
  color: var(--blue);
}
button.outline {
  background: #fff;
  color: var(--blue);
  border: 1px solid #b4d3ff;
}
button.danger {
  background: #fff0f0;
  color: #e54747;
}
button.small {
  padding: 7px 12px;
  font-size: 13px;
}
button.ghost {
  background: none;
  color: #6e7f9e;
  padding: 8px;
}
a {
  color: var(--blue);
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 28px;
  letter-spacing: -0.7px;
}
h2 {
  font-size: 21px;
}
h3 {
  font-size: 17px;
}
small,
.muted {
  color: var(--muted);
}
small {
  font-size: 12px;
}
.sub {
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.7;
}
.brand {
  font-size: 21px;
  font-weight: 800;
  display: flex;
  gap: 12px;
  align-items: center;
}
.brand i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--blue);
  border-radius: 11px;
  color: #fff;
  font-style: normal;
}
.shell {
  max-width: 1440px;
  margin: auto;
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 225px;
  padding: 32px 22px;
  border-right: 1px solid var(--line);
  background: #fff;
  position: fixed;
  height: 100vh;
  z-index: 5;
}
.sidebar nav {
  margin-top: 44px;
  display: grid;
  gap: 8px;
}
.navlink {
  padding: 14px 18px;
  border-radius: 9px;
  color: #6a7891;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.navlink.active {
  color: var(--blue);
  background: #edf4ff;
}
.sidebar footer {
  position: absolute;
  bottom: 26px;
  left: 35px;
  font-size: 12px;
  color: #8996ac;
}
.main {
  margin-left: 225px;
  width: calc(100% - 225px);
  padding: 30px 40px 60px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #63728c;
}
.avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e2edff;
  color: var(--blue);
  font-weight: 700;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 25px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 3px 15px #12305c03;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stack {
  display: grid;
  gap: 18px;
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.between {
  justify-content: space-between;
}
.wrap {
  flex-wrap: wrap;
}
.tag {
  display: inline-flex;
  align-items: center;
  background: #eef4fc;
  color: #6881a4;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.tag.green {
  background: #e9faef;
  color: #1aa263;
}
.tag.orange {
  background: #fff4dd;
  color: #cc8a1b;
}
.price {
  font-size: 30px;
  color: #ed5155;
  font-weight: 750;
  letter-spacing: -0.7px;
  margin: 17px 0;
}
.price span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.task-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #e2eeff, #f5f9ff);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 25px;
  color: #1677ff;
  flex-shrink: 0;
}
.task-card .task-foot {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tabs {
  display: flex;
  gap: 8px;
  background: #eaf0f9;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 24px;
  width: fit-content;
}
.tabs button {
  background: none;
  color: #74829b;
  padding: 9px 22px;
  font-size: 14px;
}
.tabs button.active {
  background: white;
  color: var(--blue);
  box-shadow: 0 2px 7px #112e5010;
}
.stat {
  font-size: 30px;
  font-weight: 750;
  margin-top: 12px;
}
.stat.blue {
  color: var(--blue);
}
.metric {
  padding: 22px;
}
.divider {
  height: 1px;
  background: var(--line);
  margin: 23px 0;
}
.field {
  display: grid;
  gap: 8px;
  margin-bottom: 17px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: #5a6b88;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  padding: 12px 14px;
  color: #243755;
  background: white;
  outline: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #6aa8ff;
  box-shadow: 0 0 0 3px #1677ff10;
}
textarea {
  resize: vertical;
  min-height: 110px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.full {
  grid-column: 1/-1;
}
.help {
  font-size: 12px;
  line-height: 1.6;
  color: #8b99ae;
}
.notice {
  padding: 14px 17px;
  background: #f0f6ff;
  border-radius: 9px;
  color: #5276a5;
  line-height: 1.7;
  font-size: 13px;
}
.error {
  background: #fff0f0;
  color: #c83f3f;
}
.success {
  background: #edf9f2;
  color: #218957;
}
.empty {
  padding: 65px 20px;
  text-align: center;
  color: #8b98ae;
  line-height: 2;
}
.empty .symbol {
  font-size: 40px;
  margin-bottom: 12px;
  color: #c0d3ef;
}
.loading {
  padding: 70px;
  text-align: center;
  color: #8190a8;
}
.bottomnav {
  display: none;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
}
th {
  text-align: left;
  background: #f4f7fc;
  color: #7c8ca5;
  font-weight: 500;
}
td,
th {
  padding: 15px;
  border-bottom: 1px solid var(--line);
}
td .row {
  gap: 6px;
}
.timer {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  letter-spacing: 1px;
  font-weight: 800;
  padding: 25px 0 8px;
}
.location {
  padding: 16px 18px;
  background: #f4f8ff;
  border-radius: 11px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.location strong {
  display: block;
}
.actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.actions > * {
  flex: 1;
}
.details {
  white-space: pre-wrap;
  line-height: 1.9;
  color: #64748d;
  margin-top: 16px;
  overflow-wrap: anywhere;
}
.auth {
  max-width: 460px;
  margin: 8vh auto;
  padding: 32px;
}
.auth .brand {
  margin-bottom: 38px;
}
.auth h1 {
  margin-bottom: 10px;
}
.auth form {
  margin-top: 30px;
}
.auth button[type="submit"] {
  width: 100%;
  margin-top: 5px;
}
.auth-foot {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
}
.setup {
  max-width: 840px;
  margin: 40px auto;
  padding: 20px;
}
.setup .brand {
  margin-bottom: 24px;
}
.checks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.check {
  padding: 10px 15px;
  border-radius: 8px;
  background: #eaf8f0;
  color: #239368;
  font-size: 13px;
}
.check.fail {
  background: #fff0ed;
  color: #d14c40;
}
.file-box {
  border: 1px dashed #b9cbea;
  border-radius: 12px;
  padding: 28px 15px;
  text-align: center;
  background: #f8faff;
  cursor: pointer;
  color: #6885af;
}
.file-box input {
  margin-top: 14px;
  font-size: 12px;
  border: 0;
  background: none;
}
.previews {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.previews img,
.evidence-img {
  width: 120px;
  height: 140px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f7fc;
}
.evidence-img {
  cursor: zoom-in;
}
.record {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
dialog {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 20px 100px #17305333;
  padding: 28px;
  width: min(92vw, 720px);
  max-height: 90vh;
  color: #162441;
}
dialog::backdrop {
  background: #16244166;
}
dialog .heading {
  margin-bottom: 24px;
}
dialog img.large {
  max-width: 100%;
  height: auto;
}
.toast {
  opacity: 1;
}
#toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: #172943;
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  z-index: 100;
  display: none;
  max-width: 90vw;
  white-space: pre-wrap;
}
.text-right {
  text-align: right;
}
.space {
  margin-top: 20px;
}
.mono {
  font-variant-numeric: tabular-nums;
}
.list-line {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.icon {
  width: 20px;
  text-align: center;
}
.badge {
  font-size: 11px;
  color: #8090aa;
  background: #f2f5fb;
  border-radius: 5px;
  padding: 4px 7px;
}
.help-list {
  line-height: 2;
  color: #6c7d96;
  padding-left: 20px;
}
.cap {
  font-size: 12px;
  letter-spacing: 1px;
  color: #8b9ab1;
  margin-bottom: 8px;
}
.desktop-only {
  display: block;
}
@media (min-width: 1440px) {
  .sidebar {
    margin-left: 0;
  }
  .shell {
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
}
@media (max-width: 1000px) {
  .main {
    padding: 24px;
  }
  .sidebar {
    width: 185px;
    padding: 28px 14px;
  }
  .main {
    margin-left: 185px;
    width: calc(100% - 185px);
  }
  .grid.three {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  body {
    background: #f5f8fd;
  }
  .sidebar {
    display: none;
  }
  .main {
    margin: 0;
    width: 100%;
    padding: 22px 17px calc(95px + env(safe-area-inset-bottom));
  }
  .topbar {
    margin-bottom: 27px;
  }
  .topbar .brand {
    font-size: 23px;
  }
  .heading {
    margin-bottom: 20px;
  }
  h1 {
    font-size: 25px;
  }
  .grid,
  .grid.three {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 20px;
    border-radius: 15px;
  }
  .grid.metrics {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .metric {
    padding: 17px;
  }
  .stat {
    font-size: 25px;
  }
  .bottomnav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 8px calc(9px + env(safe-area-inset-bottom));
    background: #fffffff2;
    border-top: 1px solid var(--line);
    z-index: 5;
    backdrop-filter: blur(14px);
    justify-content: space-around;
  }
  .bottomnav a {
    display: grid;
    gap: 5px;
    text-align: center;
    color: #8997ad;
    font-size: 11px;
    min-width: 45px;
  }
  .bottomnav a.active {
    color: var(--blue);
  }
  .bottomnav .icon {
    font-size: 21px;
    width: auto;
  }
  .auth {
    margin: 5vh 16px;
    padding: 25px;
  }
  .setup {
    margin: 10px auto;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .tabs {
    width: 100%;
  }
  .tabs button {
    flex: 1;
    padding: 9px 10px;
  }
  .profile span {
    display: none;
  }
  .desktop-only {
    display: none;
  }
  .admin-tabs {
    display: flex;
    overflow: auto;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 5px;
  }
  .admin-tabs a {
    white-space: nowrap;
    background: #eaf1fc;
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 12px;
  }
  .admin-tabs .active {
    background: var(--blue);
    color: white;
  }
  .timer {
    font-size: 43px;
  }
  .task-card .price {
    font-size: 29px;
  }
  .topbar .badge {
    display: none;
  }
}
@media (min-width: 701px) {
  .admin-tabs {
    display: none;
  }
}

.tutorial-video { width:100%; max-height:65vh; background:#000; border-radius:12px; }

.topbar .notification-link { display:inline-flex; }

.tutorial-image {display:block;max-width:100%;max-height:65vh;object-fit:contain;margin:auto;}

/* Reference design: ice-blue surfaces, compact cards and unified navigation. */
.icon svg,.notification-link svg {width:23px;height:23px;display:block}
.bottomnav a .icon{display:grid;place-items:center}
.bottomnav a.active svg{stroke-width:2.2;fill:#0877ff12}
.promo-banner{background:#dff2ff url('/api/brand-assets/banner') center/cover no-repeat;border-radius:16px;padding:30px 22px;margin-bottom:22px;min-height:155px;display:flex;flex-direction:column;justify-content:center}
.promo-banner h2{font-size:23px;line-height:1.45;color:#102647}
.promo-banner small{color:#405b83;margin-top:9px}
.user-shell .cap{display:none}
.user-shell .price{color:#ff414f}
.task-icon{background:linear-gradient(140deg,#00d76c,#00b75c)!important;border-radius:14px!important;color:white!important;flex-shrink:0}
.task-icon svg{width:42px;height:42px}
.task-card .task-foot{flex-direction:column;align-items:stretch;gap:14px}
.task-card .task-foot button{width:100%;background:linear-gradient(110deg,#0068ff,#0083ff);color:white}
.task-card .price{margin-top:20px}
.task-steps{list-style:none;counter-reset:steps;margin:20px 0;padding:0;color:#73829c;font-size:14px}
.task-steps>li{counter-increment:steps;position:relative;padding-left:28px;line-height:1.8;margin:9px 0}
.task-steps>li:before{content:counter(steps);position:absolute;left:0;top:3px;border-radius:50%;background:#e4ebf5;color:#4d6284;width:19px;height:19px;line-height:19px;text-align:center;font-size:12px;font-weight:600}
.step-materials,.step-pictures{display:flex;gap:12px;flex-wrap:wrap}
.step-materials img{max-width:160px;max-height:200px;display:block;margin:8px 0}
.step-edit{padding:16px;border:1px solid var(--line);border-radius:12px;margin:12px 0;counter-increment:editor}
.step-edit strong:after{content:' ' counter(editor)}
#step-editor{counter-reset:editor}
.step-edit textarea{width:100%;margin:10px 0;min-height:80px}
.step-pictures img{width:75px;height:90px;object-fit:contain}
.step-image{display:flex;flex-direction:column}
.payment-thumb{height:80px;width:80px;object-fit:contain;display:block}
.payment-preview{display:block;width:200px;max-height:260px;object-fit:contain;margin:0 auto 20px}
.team-summary{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:linear-gradient(110deg,#2c8fff,#60c8fa);padding:25px 20px;border-radius:14px;color:white}
.team-summary small{color:#e9f7ff}.team-summary h2{margin-top:12px}
.team-member{padding:18px 0;border-bottom:1px solid var(--line)}
.team-income{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;font-size:13px;line-height:1.9}
.submission-actions{margin:14px 0}.submission-actions button{width:100%}
.job-track{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0 15px;margin-top:16px;font-size:12px;color:#98a5bd}
.job-track span:before{content:'✓';display:block;background:#d3ddec;border:4px solid #f3f7fd;border-radius:50%;width:25px;height:25px;line-height:17px;margin:0 auto 6px;text-align:center;color:white}
.job-track span.done:before{background:#0074ff}
.job-link{display:block;text-align:center;background:#eaf3ff;border-radius:10px;padding:12px;color:#0074ff;font-weight:600}
@media(max-width:700px){
 .user-shell{background:linear-gradient(110deg,#f4faff,#f7faff)}
 .user-shell .main{padding:24px 16px calc(96px + env(safe-area-inset-bottom))}
 .user-shell .topbar{margin-bottom:4px}.user-shell .topbar .brand{font-size:26px;color:#0674ff;letter-spacing:-1px}
 .user-shell .topbar .brand>.badge{display:none}
 .user-shell .heading h1{display:none}.user-shell .heading{margin:0 0 22px;min-height:22px}
 .user-shell .heading .sub{font-size:13px;margin-top:5px}
 .user-shell .profile{gap:12px}.user-shell .avatar{height:36px;width:36px;background:#e0edff;color:#0074ff}
 .user-shell .card{padding:18px;border:1px solid #e8eff8;border-radius:16px;box-shadow:0 5px 18px #9db2cf06}
 .promo-banner{min-height:154px;padding:23px 20px;margin-bottom:18px}.promo-banner h2{font-size:21px}.promo-banner small{font-size:11px}
 .user-shell .tabs{background:#edf3fb;border-radius:13px;margin-bottom:16px;padding:0}.user-shell .tabs button{border-radius:12px;min-height:42px}
 .user-shell .tabs button.active{background:#0074ff;color:white;box-shadow:0 4px 10px #0074ff17}
 .user-shell .price{font-size:29px}.user-shell .price span{font-size:13px}
 .user-shell .task-card{padding:20px}.user-shell .task-card .task-icon{width:52px;height:52px}
 .user-shell .bottomnav{min-height:72px;padding-top:12px;background:#fff}.bottomnav .icon svg{width:23px;height:23px}.bottomnav a{gap:6px}
 dialog{padding:22px 20px;width:calc(100vw - 28px);border-radius:18px;max-height:90dvh}
 dialog .heading{margin-bottom:20px}dialog .heading h2{font-size:21px}
 .team-income{font-size:11px}.user-shell .notice{font-size:12px;line-height:1.8}
}

.user-shell .heading h1.job-heading{display:block;font-size:19px;margin-top:18px}

#toast, .form-error { white-space: pre-line; }

.brand-logo { width:34px; height:34px; border-radius:10px; vertical-align:middle; margin-right:8px; flex-shrink:0; }
.login-hero { display:block; width:100%; height:210px; object-fit:cover; border-radius:18px; margin:18px 0; }
@media(max-width:600px) { .topbar .brand {font-size:21px} .topbar .brand-logo {width:28px;height:28px;margin-right:5px} .auth .login-hero {height:190px} }

.dialog-notice { position:sticky; bottom:0; z-index:3; margin-top:16px; padding:14px 16px; color:white; background:#173052; border-radius:12px; white-space:pre-line; font-size:14px; line-height:1.7; }
.portal-hero{border-radius:16px;background-size:cover;background-position:center;padding:24px 20px;min-height:125px;margin:14px 0;display:flex;flex-direction:column;justify-content:center}.portal-hero h2{font-size:24px;margin:0 0 8px}.portal-hero p{font-size:13px;max-width:64%;margin:0}.rank-hero{background-image:url('/api/brand-assets/rank')}.help-hero{background-image:url('/api/brand-assets/help')}.rank-switch{display:flex;padding:3px;border:1px solid #d6e5fc;border-radius:30px;background:#fff}.rank-switch button{flex:1;border-radius:26px}.rank-period{display:flex;gap:8px;margin-top:12px}.rank-period button{flex:1;padding:8px 4px;font-size:13px;background:transparent;color:#7890b2}.rank-period .active{background:#e4f0ff;color:#0074ff}.podium{display:flex;align-items:flex-end;text-align:center;margin:18px 0 0;gap:4px}.podium-slot{position:relative;flex:1;min-width:0;border-radius:12px 12px 0 0;padding:36px 4px 16px;background:linear-gradient(#e8f6ff,#cce7ff);display:flex;align-items:center;flex-direction:column;gap:7px}.place-1{background:linear-gradient(#fff0b0,#fff9df);padding-top:52px}.place-3{background:linear-gradient(#ffe0c9,#fff2e8);padding-top:26px}.rank-avatar{display:grid;place-items:center;width:57px;height:57px;border:4px solid #d2e6ff;border-radius:50%;background:linear-gradient(#b2d9ff,#258bff);color:#fff;font-size:25px}.place-1 .rank-avatar{border-color:#ffdb67}.medal{position:absolute;top:-14px;border:3px solid #d9e3f0;border-radius:50%;background:#91a4c2;color:#fff;width:28px;height:28px;line-height:23px;font-weight:800}.place-1 .medal{background:#f1b129;border-color:#ffe19a}.place-3 .medal{background:#cc8a54;border-color:#ffd4b1}.podium-slot strong{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium-slot b{font-size:19px;color:#0074ff}.place-1 b,.place-3 b{color:#99500d}.rank-list{padding:14px;margin-top:0}.rank-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px 4px;border-bottom:1px solid #edf2fa;font-size:14px}.rank-header{font-size:12px;color:#587095}.rank-name{display:flex;align-items:center;gap:10px;overflow-wrap:anywhere}.mini-avatar{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#dceeff;color:#1683ff;font-style:normal}.rank-mine{display:flex;justify-content:space-between;gap:8px;background:#eaf4ff;border-radius:12px;padding:18px 12px;margin-top:10px;font-size:14px}.rank-mine strong{color:#0074ff}.help-search{border-radius:24px;background:#fff;margin:0 0 10px}.help-article{display:flex;align-items:center;text-align:left;width:100%;gap:14px;background:#fff;color:#152646;border:1px solid #e4edfa;border-radius:18px;margin:8px 0;padding:16px}.help-article>span:nth-child(2){flex:1;min-width:0}.help-article strong{display:block;font-size:15px}.help-article small{display:block;color:#7c8da8;font-size:12px;margin:5px 0}.help-article em{font-size:11px;background:#e9f2ff;color:#2780fa;border-radius:6px;padding:3px 6px;font-style:normal}.help-icon{width:48px;height:54px;border-radius:13px;background:#edf4ff;color:#5095ff;display:grid;place-items:center;flex-shrink:0}.help-icon svg{width:30px;height:30px}.color-1{background:#fff0f0;color:#ff6375}.color-2{background:#e6f5ff;color:#008bff}.color-3{background:#f1eaff;color:#985afa}.color-4{background:#e5f8f0;color:#00ad94}.article-body{white-space:pre-wrap;line-height:1.9;overflow-wrap:anywhere}.article-picture{max-width:100%;max-height:360px;object-fit:contain;border-radius:12px}.file-box{display:flex!important;flex-direction:column;gap:16px;position:static!important;width:100%;box-sizing:border-box;margin-top:16px!important}.file-box input{max-width:100%;min-width:0}.location{position:static!important;margin-bottom:16px}.accepted-state{padding:26px 12px;background:linear-gradient(135deg,#f0f7ff,#fff);border-radius:12px;text-align:center;margin-top:14px}.accepted-state svg{width:48px;height:48px;color:#69aaff}.accepted-state p{margin:8px 0;color:#7c91af}.review-link{color:#0074ff}.task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.carousel{position:relative;overflow:hidden;border-radius:18px;margin-bottom:12px;touch-action:pan-y}.carousel img{width:100%;aspect-ratio:2.8;object-fit:cover;display:block}.carousel-dots{display:flex;gap:5px;justify-content:center;position:absolute;bottom:8px;left:0;right:0}.carousel-dots button{padding:0;width:6px;height:6px;background:#fff8;border-radius:50%}.carousel-dots button.active{width:18px;background:#fff}.rolling-notice{background:#eaf3ff;border-radius:10px;padding:10px 14px;color:#377cc4;font-size:13px;overflow:hidden;white-space:nowrap;margin-bottom:14px}.rolling-notice span{display:inline-block;min-width:100%;animation:notice-scroll 22s linear infinite}@keyframes notice-scroll{from{transform:translateX(100%)}to{transform:translateX(-100%)}}@media(max-width:600px){.tasks-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.task-card{padding:14px!important;min-width:0}.task-card .price{font-size:24px}.task-card .task-head{flex-wrap:wrap}.task-card h3{font-size:14px}.task-card .app-icon{width:38px;height:38px}.task-card button{padding:10px 6px;font-size:13px}.task-card .help{font-size:11px}.portal-hero h2{font-size:22px}.topbar .profile>span{display:none}.rank-row{font-size:13px}.bottomnav a{font-size:11px}}

.user-shell .heading h1.portal-heading{display:block;font-size:27px;margin:14px 0 8px}.tasks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.podium-slot{background:linear-gradient(transparent 0 55%,#d6edff 55%,#edf8ff 100%);padding-top:16px}.place-1{background:linear-gradient(transparent 0 55%,#ffe9a6 55%,#fff9e4 100%);padding-top:32px}.place-3{background:linear-gradient(transparent 0 55%,#ffddc4 55%,#fff2e9 100%);padding-top:6px}.medal{top:0}.place-1 .medal{top:16px}.place-3 .medal{top:-10px}@media(max-width:600px){.tasks-grid .task-card>.row{align-items:flex-start;flex-direction:column;gap:7px}.task-card .task-icon{width:38px;height:38px}.task-card .tag{font-size:10px}.task-card .task-foot small{font-size:10px}.task-card h3{overflow-wrap:anywhere}}

.personal-hero{background-image:url('/api/brand-assets/personal')}

/* Team invitation and settled-income summary. */
.invite-code{display:block;width:100%;margin:12px 0;color:#1264dc;background:#edf5ff;border:1px dashed #9ac4ff;border-radius:12px;padding:16px 10px;font-size:24px;font-weight:750;letter-spacing:1px;overflow-wrap:anywhere;user-select:text}
.invite-link{width:100%;margin-top:4px}
.team-income{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0 4px}
.income-tile{background:#f2f7ff;border:1px solid #e4edfc;border-radius:12px;padding:12px;min-width:0}
.income-tile:nth-child(2){background:#f1faf8;border-color:#dcefe9}
.income-tile:nth-child(3){background:#f7f4ff;border-color:#ebe4fb}
.income-tile h4{font-size:13px;margin:0 0 12px;color:#354e74}
.income-metric{display:flex;flex-direction:column;gap:2px;margin-top:9px}
.income-metric span{font-size:11px;color:#71839e}
.income-metric strong{font-size:17px;line-height:1.4;color:#176ce4;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.income-metric.commission strong{color:#233f65;font-size:15px}
@media(max-width:400px){.team-income{gap:6px}.income-tile{padding:10px 7px}.income-metric strong{font-size:15px}.invite-code{font-size:21px}}

.step-copy{white-space:pre-wrap;overflow-wrap:anywhere}.step-toolbar{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0;align-items:center}.step-toolbar label{display:flex;gap:8px;align-items:center}.step-toolbar input[type=color]{width:48px;padding:3px;height:36px}.step-toolbar input[type=checkbox]{width:auto}.step-toolbar select{width:80px}.evidence-examples{margin-top:20px;padding:16px;background:#f3f8ff;border-radius:12px}.evidence-examples .step-materials{display:flex;flex-wrap:wrap;gap:10px}.evidence-examples img{max-width:160px;max-height:180px;object-fit:contain}

.evidence-examples button{display:flex;flex-direction:column;align-items:center;gap:10px;width:180px}.example-caption-text{color:#314967;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.example-edit-item{width:190px}.example-lightbox{max-width:min(92vw,850px);padding:18px;text-align:center}.example-lightbox img{display:block;max-width:100%;max-height:72vh;object-fit:contain;margin:16px auto}.example-lightbox p{white-space:pre-wrap;overflow-wrap:anywhere}

.copyable-text{font:inherit;color:inherit;white-space:pre-wrap;background:#e8f2ff;border:0;border-bottom:1px dashed #1677ff;border-radius:4px;padding:1px 4px;cursor:pointer;text-align:left;max-width:100%;overflow-wrap:anywhere}.copyable-text:hover{background:#d6e8ff}.copy-item{display:flex;align-items:center;gap:12px;padding:8px;background:#f0f6ff;margin-top:6px}.copy-item span{white-space:pre-wrap;overflow-wrap:anywhere}

.copy-hint{font-size:12px;color:#1677ff;white-space:nowrap;margin-left:6px}.material-save{display:flex;flex-direction:column;align-items:flex-start;background:transparent;color:#1677ff;padding:0;text-align:left;border:0;font-size:13px}.material-save img{cursor:pointer}.material-save small{color:#73829c;font-weight:normal}.moments-material{padding:14px;background:#edf5ff;border-radius:12px;margin:12px 0}.moments-caption{white-space:pre-wrap;overflow-wrap:anywhere}.material-result{font-size:13px}.material-lightbox{max-height:85vh;overflow:auto}.material-lightbox img{max-height:55vh}.moments-editor{margin-top:12px}