/* The selected task screen shares the home header and keeps all navigation intact. */
.tasks-screen {
  padding-inline: calc(16 * var(--won-unit));
  padding-bottom: calc(103 * var(--won-unit) + max(env(safe-area-inset-bottom), var(--tg-safe-bottom)));
}
.tasks-screen .app-header {
  width: calc(100% + 32 * var(--won-unit));
  height: calc(72 * var(--won-unit));
  margin: 0 calc(-16 * var(--won-unit)) calc(4 * var(--won-unit));
  padding: calc(16 * var(--won-unit));
}
.tasks-screen .wordmark { margin-left: calc(-14.5 * var(--won-unit)); }
.tasks-screen .wordmark > .won-wordmark { width: calc(126 * var(--won-unit)); height: calc(54 * var(--won-unit)); }
.tasks-screen .header-actions { gap: calc(9 * var(--won-unit)); transform: translateY(calc(2 * var(--won-unit))); }
.tasks-screen .app-header .icon-button { width: calc(40 * var(--won-unit)); height: calc(40 * var(--won-unit)); }
.tasks-screen .avatar-button {
  display: grid; place-items: center; width: calc(44 * var(--won-unit)); height: calc(44 * var(--won-unit));
  padding: 0; border-radius: 50%; border: 1px solid transparent;
  background: linear-gradient(110deg, #2e3441, #2a2e38 60%, #262a32) padding-box, linear-gradient(135deg, #8a96ad, #68768e 20%, #3b4453 48%, #2b303a 72%, #3a414d) border-box;
  box-shadow: inset 0 1px 0 #d1dcf00c, 0 1px 2px #00000016;
  font-size: calc(17 * var(--won-unit)); line-height: 1; font-weight: 400; color: #d2d9e6;
}
.tasks-screen #main { min-width: 0; }
.tasks-screen .tasks-summary.tasks-summary-emphasis {
  --summary-arc: #075ad7; --summary-arc-soft: #084297; --summary-arc-end: #00245c;
  display: flex; align-items: center; gap: calc(12 * var(--won-unit));
  height: calc(158 * var(--won-unit)); min-height: calc(158 * var(--won-unit));
  margin: 0 0 calc(16 * var(--won-unit)); padding: calc(22 * var(--won-unit)) calc(18 * var(--won-unit));
  border: 1px solid #397dca; border-radius: calc(15 * var(--won-unit));
  background: radial-gradient(ellipse at 6% 0%, #143b6b, transparent 55%), linear-gradient(112deg, #0c284b, #05152e 53%, #063a8c);
  box-shadow: inset 0 1px 0 #b5d6ff0a;
}
.tasks-screen .tasks-summary-icon { display: none; }
.tasks-screen .tasks-summary-copy {
  display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: calc(7 * var(--won-unit)); min-width: 0;
}
.tasks-screen .tasks-summary-label {
  display: block; margin: 0; color: #b1c3df;
  font-size: calc(16 * var(--won-unit)); line-height: 1.3;
}
.tasks-screen .tasks-summary-amount {
  display: block; color: #f8faff; font-size: calc(var(--summary-amount-size, 44) * var(--won-unit));
  font-weight: 700; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tasks-screen .tasks-summary-amount > span { color: inherit; font-size: inherit; font-weight: inherit; }
.tasks-screen .tasks-summary-complete { display: block; max-width: 235px; color: #dae8fa; font-size: 14px; font-weight: 500; line-height: 1.45; text-wrap: pretty; }
.tasks-screen .tasks-summary-toggle {
  display: grid; place-items: center; flex: 0 0 calc(40 * var(--won-unit));
  width: calc(40 * var(--won-unit)); height: calc(40 * var(--won-unit));
  margin-right: calc(-5 * var(--won-unit)); padding: 0;
  border-radius: calc(10 * var(--won-unit)); background: transparent; color: #c4d6f2;
}
.tasks-screen .tasks-summary-toggle .ui-icon { width: calc(23 * var(--won-unit)); height: calc(23 * var(--won-unit)); opacity: .9; }
.tasks-screen .segment {
  gap: 0; margin: 0 0 calc(12 * var(--won-unit)); padding: 0;
  min-height: calc(42 * var(--won-unit)); border: 1px solid #46505b80;
  border-radius: calc(13 * var(--won-unit)); background: #191c21;
}
.tasks-screen .segment button {
  min-width: 0; min-height: calc(42 * var(--won-unit)); margin: -1px;
  padding: calc(11 * var(--won-unit)) calc(5 * var(--won-unit));
  border: 1px solid transparent; border-radius: calc(13 * var(--won-unit));
  color: #b1bed3; font-size: calc(13 * var(--won-unit)); line-height: 1.25; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tasks-screen .segment button.active {
  border-color: #2a80d9;
  background: linear-gradient(110deg, #114789, #0e3e79);
  box-shadow: inset 0 1px 0 #84bbff0b; color: #f5f8ff; font-weight: 650;
}

/* Existing enhanced selects retain their trigger, focus and selected states. */
.task-toolbar { display: flex; align-items: center; gap: 8px; margin: 17px 0 0; }
.task-toolbar .task-search { flex: 1 1 0; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0 11px; gap: 8px; }
.task-toolbar .task-search > .ui-icon { width: 17px; height: 17px; }
.task-toolbar .task-search input { flex: 1 1 0; min-width: 0; width: 0; padding: 11px 0; font-size: 14px; }
.task-toolbar .task-search .icon-button { width: 25px; height: 30px; flex-shrink: 0; }
.task-toolbar-control { position: relative; display: block; flex: 0 0 44px; width: 44px; height: 44px; min-width: 0; cursor: pointer; }
.task-toolbar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.task-toolbar-control .wc-control { width: 44px; height: 44px; }
.task-toolbar-control .wc-trigger { justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 11px; background: #22252b; border-color: #ffffff0d; }
.task-toolbar-control .wc-trigger > .wc-value,
.task-toolbar-control .wc-trigger > .wc-icon { display: none; }
.task-toolbar-control .task-toolbar-pictogram { position: absolute; z-index: 1; top: 11px; left: 11px; width: 21px; height: 21px; object-fit: contain; opacity: .73; pointer-events: none; }
.task-toolbar-category:has(option:checked:not([value=""])) .wc-trigger,
.task-toolbar-sort:has(option:checked:not([value="recommended"])) .wc-trigger { background: #123359; border-color: #388be66b; }
.task-toolbar-category:has(option:checked:not([value=""])) .task-toolbar-pictogram,
.task-toolbar-sort:has(option:checked:not([value="recommended"])) .task-toolbar-pictogram { opacity: 1; filter: brightness(0) saturate(100%) invert(64%) sepia(37%) saturate(2379%) hue-rotate(184deg) brightness(104%) contrast(101%); }
.task-toolbar-category:has(option:checked:not([value=""]))::after,
.task-toolbar-sort:has(option:checked:not([value="recommended"]))::after { content: ''; position: absolute; top: 7px; right: 7px; width: 4px; height: 4px; border-radius: 50%; background: #5daaff; pointer-events: none; }
.task-toolbar-control .wc-trigger[aria-expanded="true"] { background: #263245; border-color: #4199ff; }
.task-toolbar-control .wc-trigger:focus-visible { outline: 2px solid #087cff; outline-offset: 2px; }
@media(max-width:359px) { .task-toolbar { gap: 6px; } .task-toolbar .task-search { padding: 0 9px; gap: 6px; } .task-toolbar .task-search input { font-size: 11px; } }
.tasks-screen .task-toolbar { margin: 0; gap: calc(9 * var(--won-unit)); }
.tasks-screen .task-toolbar .task-search,
.tasks-screen .task-toolbar-control .wc-trigger {
  border: 1px solid #40475280; border-radius: calc(12 * var(--won-unit));
  background: linear-gradient(120deg, #1a1f26, #181b20); box-shadow: inset 0 1px 0 #ffffff03;
}
.tasks-screen .task-toolbar .task-search input { font-size: calc(14 * var(--won-unit)); }
.tasks-screen .task-toolbar .task-search input::placeholder { color: #a2afc5; }
.tasks-screen .task-toolbar .task-search > .ui-icon { width: 20px; height: 20px; opacity: .9; }
.tasks-screen .task-toolbar-control .task-toolbar-pictogram { opacity: .9; }
.tasks-screen .task-toolbar-category:has(option:checked:not([value=""])) .wc-trigger,
.tasks-screen .task-toolbar-sort:has(option:checked:not([value="recommended"])) .wc-trigger { background: #123359; border-color: #388be66b; }
.tasks-screen .task-toolbar-control .wc-trigger[aria-expanded="true"] { background: #263245; border-color: #4199ff; }
.tasks-screen .task-result-count { margin: calc(10 * var(--won-unit)) 0 calc(8 * var(--won-unit)); color: #8c99ad; font-size: calc(11 * var(--won-unit)); line-height: 1.3; }
.tasks-screen .task-list { display: grid; gap: calc(12 * var(--won-unit)); overflow: visible; border: 0; border-radius: 0; background: none; }
.tasks-screen .task-row {
  --task-accent: #398bff; --task-glow: #398bff0d;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: calc(52 * var(--won-unit)) minmax(0, 1fr) auto;
  align-items: center; gap: calc(12 * var(--won-unit));
  min-height: calc(80 * var(--won-unit)); width: 100%;
  padding: calc(14 * var(--won-unit)) calc(14 * var(--won-unit)) calc(14 * var(--won-unit)) calc(22 * var(--won-unit));
  border: 0; border-radius: calc(15 * var(--won-unit));
  background: radial-gradient(ellipse at 0% 50%, var(--task-glow), transparent 42%), linear-gradient(115deg, #202226, #1e2024);
  box-shadow: none; text-align: left;
}
.tasks-screen .task-row::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(3 * var(--won-unit)); background: var(--task-accent); box-shadow: 0 0 calc(10 * var(--won-unit)) color-mix(in srgb, var(--task-accent) 28%, transparent); pointer-events: none; }
.tasks-screen .task-row.task-completed { --task-accent: #55c58d; --task-glow: #55c58d0d; }
.tasks-screen .task-row.task-pending { --task-accent: #e6bd58; --task-glow: #e6bd580d; }
.tasks-screen .task-row.task-rejected { --task-accent: #ff334c; --task-glow: #ff334c0d; }
.tasks-screen .task-row + .task-row { border: 0; }
.tasks-screen .task-row.task-priority { box-shadow: none; }
.tasks-screen .task-row:focus-visible { outline: 2px solid #88baff; outline-offset: 3px; }
.tasks-screen .task-icon {
  width: calc(52 * var(--won-unit)); height: calc(52 * var(--won-unit));
  margin-top: 0; border: 0; border-radius: calc(14 * var(--won-unit)); background: none;
}
.tasks-screen .task-icon > .brand-icon {
  width: 100%; height: 100%; border-radius: calc(14 * var(--won-unit)); object-fit: contain;
}
.tasks-screen .task-info { min-width: 0; padding-top: 0; container: task-copy / inline-size; }
.tasks-screen .task-title-line { display: flex; align-items: center; flex-wrap: nowrap; gap: calc(6 * var(--won-unit)); }
.tasks-screen .task-info .task-title {
  display: inline; color: #f5f7fc; font-size: calc(17 * var(--won-unit)); line-height: 1.25; font-weight: 650; letter-spacing: normal;
}
.tasks-screen .task-tags { display: inline-flex; flex-shrink: 0; align-items: center; flex-wrap: nowrap; gap: calc(6 * var(--won-unit)); margin: 0; }
.tasks-screen .task-tags:empty { display: none; }
.tasks-screen .age-tag,
.tasks-screen .partner-tag {
  display: inline-flex; align-items: center;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #88baff; font-size: calc(10 * var(--won-unit)); line-height: 1.25; white-space: nowrap;
}
.tasks-screen .task-info .task-description {
  margin: calc(5 * var(--won-unit)) 0 0; color: #adbbd2; font-size: calc(12.5 * var(--won-unit)); line-height: 1.4;
  white-space: nowrap; text-wrap: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis;
}
.tasks-screen .task-trailing { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; padding-top: 0; }
.tasks-screen .task-reward {
  color: #f7faff; font-size: calc(24 * var(--won-unit)); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: normal;
}
.tasks-screen .task-row.task-priority .task-reward { color: #f7faff; }
.tasks-screen .task-row-arrow { width: calc(17 * var(--won-unit)); height: calc(17 * var(--won-unit)); color: #c6d4eb; opacity: .9; }
.tasks-screen .task-completed .task-row-arrow { opacity: .7; }
.tasks-screen .task-list > .empty-state { border: 1px solid #ffffff0a; border-radius: calc(15 * var(--won-unit)); background: #1b2028; }
@media (max-width: 359px) {
  .tasks-screen .task-toolbar { gap: 6px; }
  .tasks-screen .task-toolbar .task-search { padding-inline: 9px; gap: 7px; }
  .tasks-screen .task-toolbar .task-search input { font-size: 12px; }
  .tasks-screen .task-row { gap: calc(9 * var(--won-unit)); padding-inline: calc(18 * var(--won-unit)) calc(12 * var(--won-unit)); }
  .tasks-screen .task-reward { font-size: calc(23 * var(--won-unit)); }
  .tasks-screen .task-title-line { column-gap: 5px; }
}

/* Match the home header's raster icon dimensions exactly. */
.tasks-screen .app-header .ui-icon { width: calc(25 * var(--won-unit)); height: calc(25 * var(--won-unit)); }
.tasks-screen .partner-tag, .tasks-screen .age-tag { color: #88baff; }
.tasks-screen .priority-tag { padding: 0; border: 0; background: transparent; font-size: calc(10 * var(--won-unit)); line-height: 1.25; white-space: nowrap; }
@container task-copy (max-width: 190px) { .tasks-screen .priority-tag { display: none; } }
.tasks-screen .task-icon { overflow: hidden; border-radius: calc(12 * var(--won-unit)); }
.tasks-screen [data-task="telegram"] .task-icon { background: #24a9e4; }
.tasks-screen [data-task="telegram"] .task-icon .brand-icon { transform: scale(1.2); }
.tasks-screen .task-status-tabs { position: relative; isolation: isolate; overflow: hidden; }
.tasks-screen .task-segment-selection { position: absolute; z-index: 0; inset-block: -1px; left: calc(var(--task-index, 0) * 50%); width: 50%; border: 1px solid #2a80d9; border-radius: calc(13 * var(--won-unit)); background: #144487; transition: left .2s cubic-bezier(.2, 0, 0, 1); pointer-events: none; }
.tasks-screen .task-status-tabs button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--won-unit)); margin: 0; }
.tasks-screen .task-status-tabs button.active { background: transparent; border-color: transparent; box-shadow: none; }
.tasks-screen .task-tab-count { opacity: .75; font-size: .9em; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .tasks-screen .task-segment-selection { transition: none; } }
.sheet .inline-status.task-status-pending { color: #eac76b; background: #bd983a12; border: 1px solid #d5ad4c52; }
.sheet .inline-status.task-status-completed { color: #7cd6a1; background: #4ca57412; border: 1px solid #63bc8a52; }
.sheet .inline-status.task-status-rejected { color: #f29197; background: #c95b6512; border: 1px solid #d66b7252; }


.tasks-screen #task-results { margin-top: calc(14 * var(--won-unit)); }
.tasks-screen .task-info .task-title { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tasks-screen .tasks-summary { position: relative; isolation: isolate; overflow: hidden; transition: border-color .2s ease-out, background-color .2s ease-out; }
.tasks-screen .tasks-summary::before { content: ''; position: absolute; z-index: 0; width: 104%; height: 135%; right: 24%; bottom: 66%; border-radius: 50%; background: linear-gradient(135deg, transparent 20%, var(--summary-arc-soft)); pointer-events: none; transition: background .2s ease-out; }
.tasks-screen .tasks-summary::after { content: ''; position: absolute; z-index: 0; width: 107%; height: 132%; left: 41%; top: 41%; border-radius: 50%; background: linear-gradient(135deg, var(--summary-arc), var(--summary-arc-end)); transform: rotate(-24deg); pointer-events: none; transition: background .2s ease-out; }
.tasks-screen .tasks-summary.tasks-summary-emphasis.is-completed { --summary-arc: #147b67; --summary-arc-soft: #175d4d; --summary-arc-end: #072b25; border-color: #3d957b; background: radial-gradient(ellipse at 6% 0%, #174a3c, transparent 55%), linear-gradient(112deg, #133e33, #08261f 53%, #105d4e); }
.tasks-screen .tasks-summary-copy { position: relative; z-index: 1; max-width: calc(100% - 116 * var(--won-unit)); }
.tasks-screen .task-summary-content { position: relative; display: flex; flex-direction: column; gap: calc(7 * var(--won-unit)); animation: task-summary-enter .2s ease-out both; }
.tasks-screen .tasks-summary-label { transition: color .2s ease-out; }
.tasks-screen .is-completed .tasks-summary-label { color: #afd9c5; }
.tasks-screen .tasks-summary-note { position: absolute; top: calc(100% + 6 * var(--won-unit)); left: 0; color: #c9d8ca; font-size: calc(11 * var(--won-unit)); line-height: 1.2; white-space: nowrap; }
.tasks-screen .tasks-summary-art { position: absolute; z-index: 1; inset-block: 0; right: calc(2 * var(--won-unit)); width: calc(160 * var(--won-unit)); color: #80b8ff; pointer-events: none; transition: color .2s ease-out; }
.tasks-screen .is-completed .tasks-summary-art { color: #8edabb; }
.tasks-screen .tasks-summary-art > span { position: absolute; display: block; }
.tasks-screen .tasks-summary-art svg { display: block; width: 100%; height: 100%; }
.tasks-screen .task-art-sheet { width: calc(60 * var(--won-unit)); height: calc(60 * var(--won-unit)); top: calc(14 * var(--won-unit)); right: calc(15 * var(--won-unit)); opacity: .22; transform: rotate(-10deg); transition: transform .2s ease-out; }
.tasks-screen .is-completed .task-art-sheet { transform: rotate(-4deg); }
.tasks-screen .task-art-check { width: calc(32 * var(--won-unit)); height: calc(32 * var(--won-unit)); top: calc(28 * var(--won-unit)); right: 0; opacity: .48; transform: rotate(9deg); }
.tasks-screen .task-art-gift { width: calc(25 * var(--won-unit)); height: calc(25 * var(--won-unit)); top: calc(8 * var(--won-unit)); left: 0; opacity: .1; transform: rotate(-18deg); }
@keyframes task-summary-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tasks-screen .task-summary-content { animation: none; } .tasks-screen .tasks-summary, .tasks-screen .tasks-summary::before, .tasks-screen .tasks-summary::after, .tasks-screen .tasks-summary-label, .tasks-screen .tasks-summary-art, .tasks-screen .task-art-sheet { transition: none; } }

.tasks-screen .tasks-summary-illustration { position: absolute; top: 50%; right: 0; width: calc(160 * var(--won-unit)); height: calc(136 * var(--won-unit)); object-fit: contain; opacity: 1; transform: translateY(-50%); filter: drop-shadow(0 calc(8 * var(--won-unit)) calc(6 * var(--won-unit)) #0004); }
@media (prefers-reduced-motion: reduce) { .tasks-screen .tasks-summary-illustration { transition: none; } }