/* 台股資金地圖 · 每日簽到與任務 (r41) — 我的 › 今日任務／簽到、頂列的小進度圈、手機底部「我的」的小圈、徽章彈出。字級一律 calc(N px * var(--fz, 1))（r34）。 */
/* the progress ring (top bar on desktop; the phone's top bar is full, so there it sits on the 我的 tab) */
.tq-ring .bg { fill: none; stroke: var(--line-2); stroke-width: 2.4; }
.tq-ring .fg { fill: none; stroke: var(--buy); stroke-width: 2.4; stroke-linecap: round; transition: stroke-dasharray .5s; }
.tq-ring .ck { fill: none; stroke: var(--gold); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tq-ring .dot { fill: var(--gold); stroke: var(--bg); stroke-width: 1.2; }
#tq-badge { gap: 5px; padding: 0 8px 0 6px; color: var(--fg-3); }
#tq-badge .tq-bn { font: 500 calc(11.5px * var(--fz, 1)) var(--font-mono); color: var(--fg-2); }
#tq-badge:hover .tq-bn { color: var(--fg); }
#tq-badge.tq-pulse { animation: tq-pulse .7s ease-out; }
@keyframes tq-pulse { 0% { box-shadow: 0 0 0 0 rgba(243,198,94,.55); } 100% { box-shadow: 0 0 0 10px rgba(243,198,94,0); } }
@media (max-width: 860px) { #tq-badge { display: none; } }
#bottomnav button[data-tab="me"] { position: relative; }
.tq-mini { position: absolute; top: 5px; left: calc(50% + 12px); line-height: 0; pointer-events: none; }
.tq-medal { position: fixed; z-index: 60; transform: translate(-50%, 0); font-size: calc(26px * var(--fz, 1)); pointer-events: none; animation: tq-medal 1.6s ease-out forwards; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
@keyframes tq-medal { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.4); } 25% { opacity: 1; transform: translate(-50%, 18px) scale(1.25); } 70% { opacity: 1; transform: translate(-50%, 22px) scale(1); } 100% { opacity: 0; transform: translate(-50%, 8px) scale(.9); } }
@media (max-width: 860px) { @keyframes tq-medal { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -26px) scale(1.25); } 70% { opacity: 1; transform: translate(-50%, -30px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -16px) scale(.9); } } }
@media (prefers-reduced-motion: reduce) { #tq-badge.tq-pulse, .tq-medal { animation: none; } .tq-ring .fg { transition: none; } }

/* 我的 › 今日任務／簽到 */
.tq { display: flex; flex-direction: column; gap: 8px; }
.tq h4 { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 0; }
.tq h4 small { color: var(--fg-3); font-size: calc(11px * var(--fz, 1)); font-weight: 400; }
.tq-n { font: 500 calc(11px * var(--fz, 1)) var(--font-mono); font-style: normal; color: var(--fg-2); background: var(--bg-4); border-radius: 999px; padding: 0 7px; }
.tq-met { color: var(--gold); font-size: calc(11.5px * var(--fz, 1)); font-weight: 500; }
.tq-ck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.tq-ckb { height: 34px; padding: 0 16px; font-size: calc(13px * var(--fz, 1)); font-weight: 600; }
.tq-ckb.tq-done, .tq-ckb.tq-done:hover { background: rgba(243,198,94,.06); color: var(--gold); border-color: rgba(243,198,94,.25); cursor: default; }
.tq-ckb:disabled:not(.tq-done) { opacity: .5; cursor: default; }
.tq-st { display: flex; flex-direction: column; min-width: 0; }
.tq-st b { font-size: calc(13.5px * var(--fz, 1)); } .tq-st small { font-size: calc(11px * var(--fz, 1)); color: var(--fg-3); }
.tq-q { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg-3); font-size: calc(12px * var(--fz, 1)); }
.tq-q:hover, .tq-q[aria-expanded="true"] { color: var(--fg); border-color: var(--fg-3); }
.tq-help { padding: 8px 10px; border-radius: 8px; background: var(--bg-3); font-size: calc(11.5px * var(--fz, 1)); line-height: 1.6; color: var(--fg-2); }
.tq-help ul { margin: 0; padding-left: 16px; } .tq-help li + li { margin-top: 3px; }
.tq-next { margin: 0; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-3); }
.tq-wk { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--fz, 1)); color: var(--fg-2); }
.tq-wk b { margin-left: auto; font-weight: 500; font-family: var(--font-mono); font-size: calc(11.5px * var(--fz, 1)); }
.tq-dots { display: inline-flex; gap: 4px; }
.tq-dots i { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: calc(10px * var(--fz, 1)); color: var(--fg-3); background: var(--bg-4); }
.tq-dots i.on { background: rgba(243,198,94,.2); color: var(--gold); } .tq-dots i.td { outline: 1px solid var(--fg-3); outline-offset: 1px; }
.tq-list { display: flex; flex-direction: column; gap: 2px; }
.tq-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 32px; padding: 3px 4px; border-radius: 6px; font-size: calc(12.5px * var(--fz, 1)); }
.tq-row:hover { background: var(--bg-3); }
.tq-ic { text-align: center; font-size: calc(14px * var(--fz, 1)); line-height: 1; }
.tq-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-row.ok .tq-t { color: var(--fg-3); }
.tq-ok { color: var(--gold); font-weight: 700; padding: 0 8px; }
.tq-go { font-size: calc(11.5px * var(--fz, 1)); color: var(--buy); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.tq-go:hover { background: rgba(61,220,203,.12); } .tq-go:disabled { color: var(--fg-3); cursor: default; }
.tq-cal { margin-top: 2px; }
.tq-calh { display: flex; align-items: center; justify-content: space-between; font-size: calc(12px * var(--fz, 1)); color: var(--fg-2); }
.tq-calh b { font-weight: 500; }
.tq-nav { width: 26px; height: 22px; border-radius: 6px; color: var(--fg-2); font-size: calc(14px * var(--fz, 1)); } .tq-nav:hover:not(:disabled) { background: var(--bg-3); color: var(--fg); } .tq-nav:disabled { opacity: .3; cursor: default; }
.tq-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 4px; }
.tq-w { font-style: normal; text-align: center; font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); }
.tq-d { position: relative; display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 6px; font: calc(11px * var(--fz, 1)) var(--font-mono); color: var(--fg-3); background: var(--bg-3); }
.tq-d.ck { background: rgba(243,198,94,.16); color: var(--gold); }
.tq-d.gl em { position: absolute; right: 1px; top: -3px; font-style: normal; font-size: calc(9px * var(--fz, 1)); }
.tq-d.td { outline: 1px solid var(--fg-2); outline-offset: -1px; color: var(--fg); }
.tq-d.fu { opacity: .35; }
.tq-legend { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); }
.tq-legend .tq-d { display: inline-flex; width: 18px; height: 16px; font-size: calc(9.5px * var(--fz, 1)); }
.tq-legend .tq-d + .tq-d, .tq-legend .tq-d.gl { margin-left: 6px; }
.tq-bd { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-b { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-3); background: var(--bg-3); opacity: .55; }
.tq-b i { font-style: normal; filter: grayscale(1); } .tq-b em { font-style: normal; font-family: var(--font-mono); color: var(--gold); }
.tq-b.on { opacity: 1; color: var(--fg); background: rgba(243,198,94,.1); border: 1px solid rgba(243,198,94,.35); } .tq-b.on i { filter: none; }
.tq-note { margin: 2px 0 0; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-2); } .tq-note a { color: var(--buy); }
.tq-disc { margin: 0; font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); }

/* r53 (§16) 連續簽到的獎勵：階梯、領取鈕、領到的成績單與訊號、補簽卡。顏色全用既有變數（深色不另開淺色面）。 */
.tq-rw { display: flex; flex-direction: column; gap: 6px; }
.tq-rwl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.tq-rs { display: flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 7px; border-radius: 6px; background: var(--bg-3); color: var(--fg-3); font-size: calc(11.5px * var(--fz, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq-rs i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--bg-4); font: 500 calc(10px * var(--fz, 1)) var(--font-mono); }
.tq-rs.claimed { color: var(--gold); background: rgba(243,198,94,.12); } .tq-rs.claimed i { background: rgba(243,198,94,.22); color: var(--gold); }
.tq-rs.due { color: var(--fg); background: rgba(61,220,203,.12); outline: 1px solid rgba(61,220,203,.4); outline-offset: -1px; } .tq-rs.due i { background: rgba(61,220,203,.22); color: var(--buy); }
.tq-rs.missed { opacity: .5; text-decoration: line-through; }
.tq-claim { height: 34px; padding: 0 14px; font-size: calc(12.5px * var(--fz, 1)); font-weight: 600; }
.tq-rwn { margin: 0; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-3); }
.tq-got { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; border-radius: 8px; background: var(--bg-3); }
.tq-got b { font-size: calc(12px * var(--fz, 1)); font-weight: 500; }
.tq-got small { font-size: calc(10.5px * var(--fz, 1)); color: var(--fg-3); }
.tq-card { display: block; line-height: 0; }
.tq-card img { width: 100%; max-width: 230px; border-radius: 6px; border: 1px solid var(--line-2); }
.tq-sig { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.tq-sig li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: calc(12px * var(--fz, 1)); }
.tq-sig i { font-style: normal; color: var(--fg-3); font-size: calc(11px * var(--fz, 1)); }
.tq-sig b { font-family: var(--font-mono); font-weight: 600; }
.tq-more { font-size: calc(11.5px * var(--fz, 1)); color: var(--buy); }
.tq-mk { margin: 0; font-size: calc(11.5px * var(--fz, 1)); color: var(--fg-2); }

/* r53：有獎可領時，進度圈變金色（桌機頂列與手機「我的」都是），讓從官網公告跳過來的人一眼找得到。 */
#tq-badge.gift { border-color: rgba(243,198,94,.5); background: rgba(243,198,94,.1); }
#tq-badge.gift .tq-bn { color: var(--gold); }
#tq-badge.gift .tq-ring .fg { stroke: var(--gold); }
.tq-mini.gift .tq-ring .fg { stroke: var(--gold); }
.tq-mini.gift .tq-ring .bg { stroke: rgba(243,198,94,.35); }