/* One small task, in the same quiet glass as the rest of BOLT. */
.monthly-view { text-align: center; }
.monthly-eyebrow { display: block; padding-inline: 22px; color: #bed6ed; font-size: 11px; font-weight: 500; letter-spacing: .1px; }
.monthly-view #dialog-title { font-size: 23px; }
.monthly-view #dialog-description { max-width: 320px; margin-inline: auto; font-size: 13px; line-height: 1.9; text-wrap: pretty; }
.monthly-pass { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; min-height: 136px; margin: 21px 0 24px; padding: 20px 23px; border: 1px solid #b4d9ff32; border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at 100% 0, #3477ad29, transparent 70%), linear-gradient(125deg, #0c1727b0, #13263b73); box-shadow: inset 0 1px #ecf7ff10, 0 12px 32px #0002; }
.monthly-pass::before { content: ''; position: absolute; width: 200px; height: 200px; left: -70px; top: -120px; border: 1px solid #c4e4ff12; border-radius: 50%; box-shadow: 0 0 0 24px #c4e4ff04, 0 0 0 48px #c4e4ff03; pointer-events: none; }
.pass-brand { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pass-brand .app-logo { width: 67px; height: 67px; border: 0; background: none; box-shadow: none; }
.pass-brand > span:last-child { font: 8px/1.5 Arial, sans-serif; color: #c0d3e8; letter-spacing: 2px; }
.pass-duration { display: flex; align-items: baseline; gap: 7px; padding-bottom: 10px; padding-left: 12px; }
.pass-duration strong { font: 300 65px/1.1 Arial, sans-serif; letter-spacing: -4px; color: #eef6ff; }
.pass-duration > span { font-size: 16px; color: #c7d9ec; }
.pass-free { position: absolute; bottom: 15px; left: 27px; color: #d9eacb; font-size: 11px; }
.pass-light { position: absolute; z-index: -1; inset: -50% -60%; pointer-events: none; background: linear-gradient(110deg, transparent 40%, #c7eaff0a 50%, transparent 60%); animation: pass-light 8s ease-in-out infinite; }
.monthly-one-task { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; color: #c9ded0; font-size: 11px; }
.monthly-one-task .icon { width: 14px; height: 14px; stroke-width: 2; }
.monthly-start { position: relative; overflow: hidden; justify-content: space-between; gap: 9px; margin-top: 24px; padding: 13px 18px; min-height: 55px; border-color: #a8d8ff70; background: linear-gradient(110deg, #183b5f, #28699e); box-shadow: inset 0 1px #e7f6ff29, 0 8px 30px #006dbe18; }
.monthly-start::before { content: ''; position: absolute; width: 40%; inset-block: 0; left: -45%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, #e2f4ff16, transparent); animation: cta-glint 7s ease-in-out infinite; pointer-events: none; }
.monthly-start .icon, .monthly-return .icon { width: 18px; height: 18px; transform: rotate(180deg); }
.monthly-back { margin-top: 10px; }
.monthly-task-view #dialog-title, .monthly-tutorial-view #dialog-title { margin-top: 14px; }
.task-browser { margin-top: 20px; overflow: hidden; border: 1px solid #b3d5f62c; border-radius: 17px; background: #050d18a1; box-shadow: inset 0 1px #dcedff08; }
.task-browser-bar { display: flex; align-items: center; justify-content: space-between; min-height: 35px; gap: 12px; padding: 0 13px; border-bottom: 1px solid #a5d1ff12; background: #bedcff04; color: #bacbde; font-size: 10px; direction: ltr; }
.browser-dots { display: flex; gap: 4px; width: 28px; }
.browser-dots i { width: 4px; height: 4px; border-radius: 50%; background: #92abc14d; }
.task-page-mark { display: flex; justify-content: end; width: 28px; color: #a9d6f4; }
.task-page-mark .icon { width: 13px; height: 13px; }
.task-link-placeholder { min-height: 197px; padding: 18px 12px 23px; background: radial-gradient(ellipse at 50% 10%, #1d568c23, transparent 75%); }
.task-link-placeholder > strong { display: block; margin-top: 13px; font-size: 15px; font-weight: 500; color: #d9e7f6; }
.task-link-placeholder > p { font-size: 11px; color: #a9bdd4; margin-top: 3px; }
.task-orbit { position: relative; display: grid; place-items: center; width: 86px; height: 86px; margin-inline: auto; }
.task-orbit .app-logo { width: 57px; height: 57px; border-radius: 17px; background: #91caff08; }
.task-orbit-ring { position: absolute; inset: 0; border: 1px solid #9bd9ff19; border-radius: 50%; }
.task-orbit-ring::before { content: ''; position: absolute; inset: -1px; border: 1px solid transparent; border-top-color: #b4e4ff94; border-radius: inherit; animation: task-orbit 12s linear infinite; }
.task-orbit-ring::after { content: ''; position: absolute; inset: 7px; border: 1px dashed #9bd9ff19; border-radius: inherit; }
.task-video-button { display: flex; width: 100%; align-items: center; gap: 11px; min-height: 66px; padding: 10px 12px; margin-top: 12px; border: 1px solid #a5d3fc22; border-radius: 15px; text-align: right; background: #badcff05; transition: background .25s, border-color .25s, transform .35s var(--ease); }
.task-play-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border: 1px solid #b6dbfb28; border-radius: 50%; color: #c9e8ff; background: #5da5e00a; }
.task-play-icon .icon { width: 16px; height: 16px; margin-left: 2px; }
.task-video-button > span:nth-child(2) { flex: 1; }
.task-video-button strong { display: block; font-size: 12px; font-weight: 500; color: #dfedfb; }
.task-video-button small { display: block; font-size: 10px; color: #a6bdd5; margin-top: 2px; }
.task-video-arrow .icon { width: 14px; height: 14px; color: #a6c4df; transform: rotate(180deg); }
.task-video-button:active { transform: scale(.98); }
.task-video-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 16 / 10; margin-top: 23px; padding: 20px 12px; border: 1px solid #aad4fc24; border-radius: 18px; background: radial-gradient(ellipse at 50% 10%, #28507c2b, transparent 80%), #060f1b94; }
.tutorial-play { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border: 1px solid #a9d9ff38; border-radius: 50%; background: #89bfff0b; color: #c2e6ff; }
.tutorial-play .icon { width: 23px; height: 23px; margin-left: 3px; }
.task-video-preview strong { font-size: 16px; font-weight: 500; }
.task-video-preview > span:last-child { font-size: 11px; color: #b4c8de; }
.monthly-return { gap: 9px; }
#action-dialog.task-view { max-width: 510px; }
#action-dialog.task-view #dialog-content { padding: 25px 20px 14px; }
.monthly-task-view #dialog-title { margin-top: 0; padding-inline: 28px; }
.monthly-task-view #dialog-description { max-width: 370px; }
.task-browser-live { margin-top: 16px; }
.task-live-window { position: relative; height: clamp(200px, calc(100dvh - 460px), 470px); overflow: hidden; background: #080f19; }
.task-iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border: 0; background: #080f19; color-scheme: normal; transform-origin: top left; }
.task-frame-loading { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 22px; background: #091522; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; }
.is-loading .task-frame-loading { opacity: 1; visibility: visible; }
.task-frame-loading > span { max-width: 250px; color: #bfd4ea; font-size: 12px; }
.task-open-external { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; margin-top: 2px; border-radius: 10px; color: #c4dff5; font-size: 11px; }
.task-open-external .icon { width: 14px; height: 14px; }
.monthly-task-view .task-video-button { min-height: 58px; margin-top: 0; }
.monthly-task-view .monthly-back { margin-top: 4px; }
@media (hover: hover) { .task-video-button:hover { background: #a1d1ff0c; border-color: #b6dcff48; } }
@media (hover: hover) { .task-open-external:hover { color: #eff8ff; background: #b8dcff08; } }
@media (max-width: 599px) { #action-dialog.task-view { max-width: none; } }
@media (max-width: 359px) {
  .monthly-view #dialog-title { font-size: 21px; }
  .monthly-pass { min-height: 121px; padding: 17px; margin-block: 17px 19px; }
  .pass-brand .app-logo { width: 57px; height: 57px; }
  .pass-duration strong { font-size: 58px; }
  .monthly-start { padding-inline: 13px; font-size: 14px; }
  .task-video-button { gap: 8px; padding-inline: 9px; }
  .task-video-button strong { font-size: 11px; }
  .task-link-placeholder { min-height: 179px; padding-top: 12px; }
}
@media (max-height: 600px) {
  .monthly-pass { min-height: 110px; margin-block: 16px; }
  .pass-brand .app-logo { width: 53px; height: 53px; }
  .pass-duration strong { font-size: 55px; }
  .monthly-start { margin-top: 17px; }
  .task-link-placeholder { min-height: 154px; padding-block: 10px 15px; }
  .task-orbit { width: 64px; height: 64px; }
  .task-orbit .app-logo { width: 45px; height: 45px; border-radius: 12px; }
  .task-link-placeholder > strong { margin-top: 9px; }
  .task-video-preview { aspect-ratio: auto; min-height: 170px; }
}
@keyframes pass-light { 0%, 18% { transform: translateX(50%) rotate(-12deg); } 70%, 100% { transform: translateX(-50%) rotate(-12deg); } }
@keyframes cta-glint { 0%, 25% { transform: translateX(0) skewX(-18deg); } 65%, 100% { transform: translateX(390%) skewX(-18deg); } }
@keyframes task-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .monthly-view *, .monthly-view *::before, .monthly-view *::after { animation: none !important; transition: none !important; } }