/* Version 1: independent tasks with a shared reward strip. Version 3 preserves the previous layout. */
body.learning-active .workspace{background:#fff}
.learning-bento .learn-bento-challenge{margin:0 0 38px}
.learn-bento-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 22px}
.learn-bento-head>p{font-size:16px;line-height:26px;font-weight:500;color:#434c67;margin:0}
.learn-bento-count{display:flex;align-items:baseline;gap:8px;white-space:nowrap;background:#f3f3fc;border-radius:24px;padding:10px 16px;color:#555d78;font-size:13px}
.learn-bento-count b{font-size:23px;line-height:26px;color:#697dff}
.learn-bento-tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.learn-bento-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid #d9e2ff;border-radius:18px;min-height:274px;padding:23px;background:linear-gradient(125deg,#f8faff,#edf3ff);transition:box-shadow .2s,transform .2s}
.learn-bento-card:hover{transform:translateY(-2px);box-shadow:0 9px 24px #56699410}
.learn-bento-card.tone-1{border-color:#e1dafa;background:linear-gradient(125deg,#fbf9ff,#f0edff)}
.learn-bento-card.tone-2{border-color:#d8e9df;background:linear-gradient(125deg,#fbfdfb,#edf5ef)}
.learn-bento-status{position:relative;z-index:3;display:inline-flex;align-items:center;gap:7px;border-radius:20px;padding:5px 10px;background:#dfe3f05c;color:#788097;font-size:12px;line-height:18px}
.learn-bento-status i{width:13px;height:13px;border-radius:50%;border:1.5px solid #929aaf;box-sizing:border-box}
.learn-bento-status svg{width:14px!important;height:14px!important}
.learn-bento-card.is-done .learn-bento-status{background:#e4f3e9;color:#45845c}
.learn-bento-copy{position:relative;z-index:2;max-width:76%;margin-top:22px;pointer-events:none}
.learn-bento-copy h3{font-size:21px;line-height:29px;font-weight:600;margin:0 0 9px;color:#242b40}
.learn-bento-copy p{font-size:14px;line-height:23px;margin:0;color:#798297;max-width:210px}
.learn-bento-person{position:absolute;z-index:1;right:-7px;bottom:-4px;width:52%;height:207px;object-fit:contain;object-position:bottom right;pointer-events:none}
.learn-bento-card footer{position:relative;z-index:3;display:flex;align-items:center;gap:8px;margin-top:48px}
.learn-bento-card footer .learn-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 15px;min-height:39px;border-radius:11px;font-size:13px;line-height:18px;box-shadow:none;background:#697dff;border-color:#697dff;color:#fff}
.learn-bento-card footer .learn-btn:hover{background:#586eec}
.learn-bento-cash{position:absolute;z-index:3;top:21px;right:14px;display:flex;align-items:center;gap:4px;padding:6px 9px;border:1px solid #ffb8a1;border-radius:18px 18px 18px 4px;background:linear-gradient(100deg,#ff7557,#ff5f56);color:white;font-size:11px;line-height:17px;white-space:nowrap;box-shadow:0 3px 10px #ee76561c}
.learn-bento-cash strong{font:750 17px/17px Arial,sans-serif}
.learn-bento-cash-claim{border:0;background:#fff6ef;color:#d96a40;font-size:11px;padding:8px;border-radius:8px}
.learn-bento-reward{display:flex;align-items:center;gap:22px;margin-top:22px;border:1px solid #dedff6;border-radius:18px;padding:18px 25px;background:linear-gradient(110deg,#fcfaff,#f6f7fe);min-height:118px}
.learn-bento-medal{width:88px;flex:none}
.learn-bento-medal .learn-medal{width:88px;height:88px;margin:0;filter:none;opacity:1}
.learn-bento-medal img{width:100%;height:100%;object-fit:contain;filter:none;opacity:.8}
.learn-bento-reward-copy{flex:1;border-left:1px solid #d9dced;padding-left:23px}
.learn-bento-reward-copy h3{font-size:20px;line-height:28px;font-weight:600;margin:0 0 6px;color:#303951}
.learn-bento-reward-copy p{font-size:13px;line-height:22px;color:#8991a6;margin:0}
.learn-bento-progress{display:flex;align-items:center;gap:18px;margin:0 20px}
.learn-bento-progress span{width:27px;height:27px;border:1.5px solid #bdc4d6;border-radius:50%;background:#fff9;display:grid;place-items:center}
.learn-bento-progress span.done{background:#697dff;border-color:#697dff;color:#fff}
.learn-bento-progress svg{width:17px!important;height:17px!important}
.learn-bento-reward>.learn-btn{min-width:134px;min-height:42px;border-radius:13px;font-size:14px}
.learn-bento-reward>.learn-btn:disabled{background:#e4e5ee;border:1px solid #e1e3ec;color:#a1a6b8;box-shadow:none;cursor:default}
@media(min-width:1550px){.learn-bento-card{min-height:298px;padding:28px}.learn-bento-copy h3{font-size:24px;line-height:33px}.learn-bento-person{height:240px;width:51%}.learn-bento-card footer{margin-top:58px}}
@media(max-width:1100px){.learn-bento-tasks{gap:12px}.learn-bento-card{padding:18px;min-height:300px}.learn-bento-copy{max-width:90%}.learn-bento-copy h3{font-size:19px;line-height:27px}.learn-bento-person{height:165px;width:57%;opacity:.95}.learn-bento-card footer{margin-top:82px}.learn-bento-cash{top:57px;left:18px;right:auto}.learn-bento-card.tone-2 .learn-bento-copy{margin-top:47px}.learn-bento-card.tone-2 footer{margin-top:57px}.learn-bento-progress{margin:0;gap:10px}.learn-bento-reward{gap:15px;padding:18px}.learn-bento-reward-copy{padding-left:15px}.learn-bento-reward-copy h3{font-size:17px}}
@media(max-width:760px){.learn-bento-head{align-items:flex-start;gap:12px}.learn-bento-head>p{font-size:14px}.learn-bento-count{padding:7px 11px;font-size:11px}.learn-bento-tasks{grid-template-columns:1fr}.learn-bento-card{min-height:240px;padding:22px}.learn-bento-person{height:220px;width:44%}.learn-bento-copy{max-width:65%}.learn-bento-copy h3{font-size:22px;line-height:30px}.learn-bento-card footer,.learn-bento-card.tone-2 footer{margin-top:38px}.learn-bento-cash{top:22px;left:auto;right:15px}.learn-bento-card.tone-2 .learn-bento-copy{margin-top:22px}.learn-bento-reward{flex-wrap:wrap}.learn-bento-medal{width:65px}.learn-bento-medal .learn-medal{width:65px;height:65px}.learn-bento-reward-copy{min-width:170px}.learn-bento-progress{margin-left:auto}.learn-bento-reward>.learn-btn{min-width:120px}}

/* Reference cutouts retain the original artwork instead of redrawing it. */
.learn-bento-cash{top:32px;right:14px;width:151px;height:47px;padding:0;border:0;background:none;border-radius:0;box-shadow:none}
.learn-bento-cash img{display:block;width:100%;height:100%;object-fit:contain}
.learn-bento-medal>img{display:block;width:100%;height:90px;object-fit:contain;opacity:1}
.learn-version-zone{width:260px}
.learn-bento-person{width:73%;height:245px;right:-15px;bottom:-4px}
.learn-bento-cash{width:180px;height:56px;top:24px;right:10px}
.learn-bento-medal{width:104px}
.learn-bento-medal>img{height:96px;transform:scale(1.18)}
.learn-bento-card.tone-2 .learn-bento-copy p{max-width:160px}
.learn-bento-card.tone-2 .learn-bento-person{height:220px;width:65%}
.learn-bento-card footer,.learn-bento-card.tone-2 footer{position:absolute;left:23px;right:18px;bottom:30px;margin:0}
@media(max-width:1100px){.learn-bento-card footer,.learn-bento-card.tone-2 footer{left:18px;bottom:24px;margin:0}}
/* Reference polish: unified progress type, tactile actions and gentle feedback. */
.learn-bento-count{gap:5px;font-size:18px;line-height:26px;font-weight:500}
.learn-bento-count b,.learn-bento-count span{font-family:inherit;font-size:18px;line-height:26px}
.learn-bento-count .learn-bento-total{color:#434c67;font-weight:600}
.learn-bento-card{cursor:pointer;transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.learn-bento-card:focus-visible{outline:2px solid #697dff;outline-offset:4px}
.learn-bento-person{transform-origin:bottom right;transition:transform .42s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.learn-bento-card:hover .learn-bento-person,.learn-bento-card:focus-within .learn-bento-person{transform:scale(1.035) translateY(-2px)}}
.learning-bento .learn-bento-card footer .learn-btn.primary{background:linear-gradient(160deg,#8390ff 0%,#697dff 36%,#5765f6 100%);border:1px solid #7c88ff;box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 0 #3c46c530,0 3px 7px #697dff20;transition:box-shadow .2s,filter .2s,transform .2s}
.learning-bento .learn-bento-card footer .learn-btn.primary:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 #ffffff90,0 4px 10px #697dff30}
.learning-bento .learn-bento-card footer .learn-btn.primary:active{transform:translateY(1px)}
.learn-bento-reward:not(.is-claimed) .learn-bento-medal>img{filter:grayscale(1);opacity:.72}
.learn-bento-reward.is-claimed .learn-bento-medal>img{filter:none;opacity:1}
/* Only the new version 1 claim dialog uses the portrait 3:4 composition. */
body.learning-bento-active .learn-modal.learn-v1-claimed[open]{box-sizing:border-box;width:min(420px,calc((100dvh - 48px)*.75),calc(100vw - 32px));max-width:none;height:auto;aspect-ratio:3/4;max-height:none;display:flex;flex-direction:column;padding:32px 0 0;border-radius:24px}
body.learning-bento-active .learn-v1-claimed .learn-modal-body{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 22px 8px;min-height:0}
body.learning-bento-active .learn-v1-claimed .learn-celebrate{padding:0;width:100%}
body.learning-bento-active .learn-v1-claimed .learn-celebrate .learn-medal{width:180px;height:180px;margin:0 auto 20px}
body.learning-bento-active .learn-v1-claimed .learn-celebrate h3{font-size:20px;line-height:30px;margin-bottom:12px}
body.learning-bento-active .learn-v1-claimed .learn-celebrate p{font-size:12px;line-height:23px}
body.learning-bento-active .learn-v1-claimed>footer{flex:none;flex-direction:column-reverse;align-items:stretch;padding:14px 28px 26px;gap:10px}
body.learning-bento-active .learn-v1-claimed>footer .learn-btn{min-height:40px;border-radius:12px}
@media(max-height:650px){body.learning-bento-active .learn-v1-claimed .learn-celebrate .learn-medal{width:120px;height:120px;margin-bottom:10px}body.learning-bento-active .learn-v1-claimed .learn-modal-body{padding-top:12px}body.learning-bento-active .learn-v1-claimed .learn-celebrate h3{font-size:17px}body.learning-bento-active .learn-v1-claimed>footer{padding-bottom:18px}}
@media(prefers-reduced-motion:reduce){.learn-bento-card,.learn-bento-person{transition:none!important;transform:none!important}}
/* Requested refinements, scoped to the new version 1. */
.learn-bento-head{justify-content:flex-start;gap:16px}
.learn-bento-count{order:-1;flex:none;gap:5px;padding:9px 14px}
.learn-bento-count .learn-bento-total,.learn-bento-count span{font-size:14px;font-weight:400;line-height:24px}
.learn-bento-head>p{font-size:13px;line-height:23.4px;font-weight:400;color:#858e9e}
.learn-bento-cash{width:210px;max-width:56%;height:65px;right:7px;top:15px}
.learning-bento .learn-bento-card footer .learn-btn.primary{font-size:14px!important;line-height:21px;border-radius:16px;padding:10px 18px}
.learn-bento-reward{min-height:100px;padding:10px 23px;gap:20px}
.learn-bento-medal{width:90px}
.learn-bento-medal>img{height:78px;transform:scale(1.12)}
.learn-bento-progress span.done{background:#39a66f;border-color:#39a66f;color:#fff}
.learning-bento .learn-bento-reward>.learn-btn:disabled,.learning-bento .learn-bento-reward>.learn-btn:disabled:hover,.learning-bento .learn-bento-reward>.learn-btn:disabled:active{background:#e4e5ee;border-color:#e1e3ec;color:#a1a6b8;box-shadow:none;cursor:default!important;transform:none;filter:none;transition:none}
body.learning-bento-active .learn-v1-claimed .learn-celebrate .learn-medal{width:220px;height:220px;margin-bottom:12px}
body.learning-bento-active .learn-v1-claimed .learn-celebrate p{font-size:14px;line-height:25px}
.learning-bento .learn-course-tags>span+span{font-size:12px;line-height:20px}
.learning-bento .learn-course{cursor:pointer;transition:transform .23s,box-shadow .23s,border-color .23s}
.learning-bento .learn-course:hover{border-color:#bcc8ff;box-shadow:0 8px 22px #6878b018;transform:translateY(-2px)}
.learning-bento .learn-course:focus-visible{outline:2px solid #697dff;outline-offset:4px}
.learning-bento .learn-course-body{padding:17px 20px 20px;flex:none}
.learning-v1.learning-bento .learn-course-body h3{height:auto;min-height:0;margin-bottom:0}
/* Same pill segmented style as My Work's project/task/question tabs. */
.learning-bento .learn-simple-courses .learn-tabs{width:max-content;height:36px;padding:4px;display:flex;align-items:center;gap:6px;border-radius:100px;background:#f6f8fa;flex-shrink:0}
.learning-bento .learn-simple-courses .learn-tabs button{margin:0;min-height:0;height:28px;padding:2px 12px;border:0;border-radius:100px;display:flex;align-items:center;justify-content:center;gap:4px;color:#42464e;background:transparent;font:400 14px/24px 'PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:normal;box-shadow:none}
.learning-bento .learn-simple-courses .learn-tabs button:hover,.learning-bento .learn-simple-courses .learn-tabs button.active{color:#1664ff;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.07),0 .5px 1px rgba(0,0,0,.05),0 0 0 .5px rgba(213,219,227,.7)}
.learning-bento .learn-simple-courses .learn-tabs button:hover{font-weight:400}
.learning-bento .learn-simple-courses .learn-tabs button.active{font-weight:500}
@media(max-width:1100px) and (min-width:761px){.learn-bento-cash{top:43px;left:15px;right:auto;width:165px;max-width:70%}}
@media(max-width:760px){.learn-bento-head{gap:10px}.learn-bento-head>p{font-size:13px}.learn-bento-cash{top:20px;left:auto;right:7px;width:195px}.learn-bento-reward{padding:12px 16px}.learn-bento-medal{width:70px}.learn-bento-medal>img{height:65px}}
@media(max-height:650px){body.learning-bento-active .learn-v1-claimed .learn-celebrate .learn-medal{width:150px;height:150px}body.learning-bento-active .learn-v1-claimed .learn-celebrate p{font-size:13px;line-height:22px}}
@media(min-width:1550px){.learn-bento-person{width:69%;height:280px}}
@media(max-width:1100px) and (min-width:761px){.learn-bento-cash{top:48px;left:16px;right:auto;width:142px}}
@media(max-width:760px){.learn-bento-cash{top:28px;left:auto;right:14px}.learn-bento-medal>img{height:70px}}
/* 2026-11-09: readable task dialogs and compact course cards. */
body.learning-bento-active .learn-v1-task-modal,
body.learning-bento-active .learn-v1-claimed{border-radius:12px!important}
body.learning-bento-active .learn-v1-task-modal .learn-v2-profile-grid h3{font-size:15px}
body.learning-bento-active .learn-v1-task-modal .learn-v2-profile-grid header button,
body.learning-bento-active .learn-v1-task-modal .learn-v2-add{font-size:14px!important}
body.learning-bento-active .learn-v1-task-modal .learn-v2-contact,
body.learning-bento-active .learn-v1-task-modal .learn-v2-contact>b{font-size:13px}
body.learning-bento-active .learn-v1-task-modal .learn-v2-contact>span{width:52px;flex-shrink:0}
body.learning-bento-active .learn-v1-task-modal .learn-v2-record b{font-size:14px}
body.learning-bento-active .learn-v1-task-modal .learn-v2-record p{font-size:13px}
body.learning-bento-active .learn-v1-task-modal .learn-v2-record small{font-size:12px}
body.learning-bento-active .learn-v1-task-modal .learn-v2-tags>span{font-size:13px}
body.learning-bento-active .learn-v1-task-modal .learn-v2-field,
body.learning-bento-active .learn-v1-task-modal .learn-v2-field input,
body.learning-bento-active .learn-v1-task-modal .learn-v2-field select,
body.learning-bento-active .learn-v1-task-modal .learn-v2-candidate,
body.learning-bento-active .learn-v1-task-modal .learn-v2-candidate select{font-size:13px}
body.learning-bento-active .learn-v1-task-modal .learn-v2-demo{display:none}
.learn-bento-count b,.learn-bento-count .learn-bento-total,.learn-bento-count span{font-size:15px}
.learn-bento-head{justify-content:space-between}
.learn-bento-head>p{text-align:right;margin-left:auto}
.learning-bento .learn-course-body{padding-bottom:32px}
.learning-bento .learn-course:hover{border-color:#e8eaf2;box-shadow:0 8px 22px #6878b018}
/* Workspace spacing and progress-row alignment. */
body.learning-active .workspace{padding:40px 32px}
body.learning-active #learningPage{margin-top:0;margin-bottom:0}
.learn-bento-head{align-items:flex-end;margin-bottom:16px}
.learn-bento-count{padding:8px 20px}

/* White badge reward strip. */
.learn-bento-reward{background:#fff}
/* Badge title follows challenge completion; claimed reward uses task 3's mint background. */
.learn-bento-reward:not(.ready) .learn-bento-reward-copy h3{color:#8991a6}
.learn-bento-reward.is-claimed{background:linear-gradient(125deg,#fbfdfb,#edf5ef);border-color:#d8e9df}
/* Reward action shares the task-button typography and surface. */
.learning-bento .learn-bento-reward>.learn-btn{font-size:14px!important;line-height:21px;border-radius:16px;padding:10px 18px;min-height:43px;font-weight:inherit}
.learning-bento .learn-bento-reward>.learn-btn:not(:disabled){background:linear-gradient(160deg,#8390ff 0%,#697dff 36%,#5765f6 100%);border:1px solid #7c88ff;color:#fff;box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 0 #3c46c530,0 3px 7px #697dff20;transition:box-shadow .2s,filter .2s,transform .2s}
.learning-bento .learn-bento-reward>.learn-btn:not(:disabled):hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 #ffffff90,0 4px 10px #697dff30}
.learning-bento .learn-bento-reward>.learn-btn:not(:disabled):active{transform:translateY(1px)}

/* Completed challenge seal: preserve badge art, copy, button and layout. */
.learn-bento-progress span.done{border:0;border-radius:0;background:transparent url('./public/assets/learning-completed-seal.svg') center/100% 100% no-repeat;filter:drop-shadow(0 1px 1px rgba(41,125,75,.14));color:#fff}
.learn-bento-progress span.done svg{width:15px!important;height:15px!important;filter:drop-shadow(0 1px 0 rgba(24,110,66,.2))}
/* Larger completion seals with a tighter rhythm. */
.learn-bento-progress{gap:10px}
.learn-bento-progress span.done{width:36px;height:36px;flex-shrink:0}
.learn-bento-progress span.done svg{width:18px!important;height:18px!important}
/* Move claim copy only; retain the dialog, artwork and footer geometry. */
body.learning-bento-active .learn-v1-claimed .learn-celebrate h3,
body.learning-bento-active .learn-v1-claimed .learn-celebrate p{position:relative;top:-26px}
/* Phone layout: keep navigation reachable and courses readable without a desktop minimum width. */
@media(max-width:767px){
  body.learning-active{min-width:0;background:#fff}
  body.learning-active .sidebar{position:relative;inset:auto;width:100%;padding:12px 16px 0;display:flex;align-items:flex-start;gap:12px;background:#fff}
  body.learning-active .brand-logo{width:28px;height:30px}
  body.learning-active .side-nav{position:static;transform:none;display:flex;flex-direction:row;width:100%;max-height:none;gap:4px;overflow-x:auto;margin:0;flex-wrap:nowrap;padding-bottom:8px}
  body.learning-active .nav-item{width:60px;height:60px;padding:8px 4px;font-size:11px;flex:none}
  body.learning-active .side-bottom{display:none}
  body.learning-active .workspace{margin-left:0;border:0;border-radius:0;padding:24px 16px max(24px,env(safe-area-inset-bottom));min-width:0}
  body.learning-active .workspace::after{display:none}
  .learning-bento .learn-simple-courses>.learn-section-title{flex-wrap:wrap;gap:14px}
  .learning-bento .learn-simple-courses .learn-tabs{max-width:100%;height:auto;min-height:44px}
  .learning-bento .learn-simple-courses .learn-tabs button{height:36px;font-size:14px}
  .learning-bento .learn-course-grid{grid-template-columns:1fr}
  .learning-bento .learn-bento-copy h3{font-size:21px}
  .learning-bento .learn-bento-reward-copy{min-width:0;flex:1}
  .learning-bento .learn-bento-reward{gap:12px}
  .learning-bento .learn-header{gap:12px}
  .learning-bento .learn-header p{font-size:13px;line-height:22px}
  .learn-modal{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
}
/* Override the legacy page-wide button font reset for these shared tabs. */
.learning-bento .learn-simple-courses .learn-tabs button{font-size:14px!important;line-height:24px!important}
/* Full course cover, including the typography, inside the video dialog. */
.learn-modal .learn-video .learn-poster-cover{display:block;width:100%;max-width:480px;height:auto;aspect-ratio:16/9;margin:0 auto;padding:0;overflow:hidden;border-radius:10px}
.learn-modal .learn-video .learn-poster-cover img{position:static;display:block;width:100%;height:100%;object-fit:contain;transform:none;max-width:none}
.learn-course-grid{align-content:start}
/* Compact reward lives inside the progress component, not in a standalone strip. */
.learning-bento .learn-bento-count{align-items:center;gap:14px;padding:5px 8px 5px 20px;background:#f6f7fb;border:1px solid #e9ecf5}
.learn-compact-count{display:flex;align-items:baseline;gap:6px}
.learning-bento .learn-compact-count b,.learning-bento .learn-compact-count span{font-size:15px;line-height:24px}
.learn-compact-badge{display:flex;align-items:center;gap:6px;min-height:44px;border:0;border-left:1px solid #e2e6ef;background:transparent;padding:0 10px 0 14px;color:#929aaf;border-radius:0 22px 22px 0;cursor:pointer}
.learn-compact-badge img{width:38px;height:38px;object-fit:contain;filter:grayscale(1);opacity:.65}
.learn-compact-badge span{font-size:13px!important;font-weight:400}
.learn-compact-badge svg{width:15px;height:15px}
.learn-compact-badge:hover{background:#eef0f7}
.learn-compact-badge.claimable{color:#586bea;background:#eef0ff;border-left-color:#d8dfff}
.learn-compact-badge.claimable img,.learn-compact-badge.claimed img{filter:none;opacity:1}
.learn-compact-badge.claimed{color:#468969}
.learn-compact-badge-detail{text-align:center}.learn-compact-badge-detail>img{width:120px;height:120px;object-fit:contain;filter:grayscale(1);opacity:.75}.learn-compact-badge-detail.claimed>img{filter:none;opacity:1}
.learn-compact-badge-detail h3{font-size:18px}.learn-compact-badge-detail p{font-size:13px;color:#929caf;line-height:23px}
.learn-compact-badge-detail ul{list-style:none;text-align:left;margin:22px 0 0;padding:0}.learn-compact-badge-detail li{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #edf0f5;font-size:14px;color:#69758d}.learn-compact-badge-detail small{font-size:12px;color:#98a4b9;white-space:nowrap}
@media(max-width:767px){.learning-bento .learn-bento-count{gap:8px;padding-left:12px}.learn-compact-badge{padding-left:8px;padding-right:6px;gap:4px}.learn-compact-badge img{width:32px;height:32px}.learn-compact-badge span{font-size:12px!important}.learn-modal .learn-video{padding:16px 12px}}
/* Image-only badge entry, with a touch-safe button and an accessible hover label. */
.learning-bento .learn-compact-badge{position:relative;border:0;border-radius:50%;padding:0;width:44px;height:44px;min-height:44px;justify-content:center;background:transparent;cursor:pointer}
.learning-bento .learn-compact-badge.claimable{background:#eef0ff}
.learning-bento .learn-compact-badge:hover,.learning-bento .learn-compact-badge:focus-visible{background:#eef0f7}
.learn-compact-badge:hover img,.learn-compact-badge:focus-visible img{filter:none;opacity:1}
.learn-compact-badge .learn-badge-tooltip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(3px);white-space:nowrap;font-size:12px!important;line-height:20px;font-weight:400;padding:6px 10px;background:#fff;border:1px solid #dfe6f4;border-radius:8px;color:#42464e;box-shadow:0 8px 24px #23355720;opacity:0;visibility:hidden;pointer-events:none;z-index:30;transition:opacity .15s,transform .15s}
.learn-compact-badge:hover .learn-badge-tooltip,.learn-compact-badge:focus-visible .learn-badge-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
body.learning-bento-active .learn-modal.learn-badge-info[open]{box-sizing:border-box;width:min(420px,calc((100dvh - 48px)*.75),calc(100vw - 32px));max-width:none;height:auto;aspect-ratio:3/4;max-height:none;display:flex;flex-direction:column;padding:20px 0 0;border-radius:12px;overflow:hidden}
.learn-badge-info>header{padding:0 24px;margin-bottom:0;flex:none;min-height:32px}
.learn-badge-info .learn-modal-body{padding:12px 24px 24px;overflow:auto;min-height:0;flex:1}
.learn-compact-badge-detail>img{width:105px;height:105px}
.learn-compact-badge-detail h3{font-size:17px;line-height:26px;margin:10px 0 8px}
.learn-compact-badge-detail p{font-size:13px;line-height:22px;margin:0}
.learn-compact-badge-detail ul{display:grid;gap:10px;margin-top:20px}
.learn-compact-badge-detail li{padding:12px;border:1px solid #e7ebf2;background:#f8f9fc;border-radius:10px;align-items:center;gap:10px;font-size:13px;color:#8b95a8}
.learn-compact-badge-detail li>i{font:500 12px/28px Arial,sans-serif;text-align:center;flex:none;width:28px;height:28px;border-radius:50%;background:#eceff5;color:#9ca6b7}
.learn-compact-badge-detail li>span{flex:1;text-align:left;line-height:20px}
.learn-compact-badge-detail li>small{font-size:11px;color:#a1a9b9}
.learn-compact-badge-detail li.done{background:#edf8f1;border-color:#cfe9d9;color:#367958}
.learn-compact-badge-detail li.done>i{color:#fff;background:#49a677;font-size:15px}
.learn-compact-badge-detail li.done>small{color:#3f956a;font-weight:500}
@media(max-width:767px){.learn-badge-info .learn-modal-body{padding:10px 16px 20px}.learn-badge-info>header{padding:0 16px}.learn-compact-badge-detail li{padding:10px;gap:8px}.learn-compact-badge-detail>img{width:90px;height:90px}.learn-compact-badge-detail h3{font-size:16px}}
/* Tighter entry; color change and tooltip provide the hover feedback. */
.learning-bento .learn-bento-count{gap:6px}
.learning-bento .learn-compact-badge:hover,.learning-bento .learn-compact-badge:focus-visible{background:transparent}
/* Match the claim artwork scale and anchor task states to equal bottom/side insets. */
.learn-badge-info .learn-modal-body{display:flex;flex-direction:column;padding:12px 24px 24px}
.learn-badge-info .learn-compact-badge-detail{display:flex;flex-direction:column;flex:1;min-height:min-content}
.learn-badge-info .learn-compact-badge-detail>img{width:220px;height:220px;flex:none;align-self:center;margin-top:-32px}
.learn-badge-info .learn-compact-badge-detail ul{margin: auto 0 0;padding:16px 0 0;flex:none}
@media(max-width:767px){
 .learning-bento .learn-bento-count{gap:4px}
 .learn-badge-info .learn-modal-body{padding:10px 16px 16px}
 .learn-badge-info .learn-compact-badge-detail>img{width:180px;height:180px;margin-top:-32px}
 .learn-badge-info .learn-compact-badge-detail ul{padding-top:12px}
}
@media(max-width:420px){.learn-badge-info .learn-compact-badge-detail>img{width:166px;height:166px}}

/* Badge entry stays transparent, including its ready-to-claim state. */
.learning-bento .learn-compact-badge,
.learning-bento .learn-compact-badge.claimable,
.learning-bento .learn-compact-badge.claimed,
.learning-bento .learn-compact-badge:hover,
.learning-bento .learn-compact-badge:focus-visible{background:transparent}
.learning-bento .learn-compact-count>b:first-child{font-weight:700}
/* Keep the status and quick action in the same position without shifting the row. */
.learn-compact-badge-detail li>.learn-badge-task-action{display:grid;flex:0 0 64px;place-items:center}
.learn-badge-task-action>small,.learn-badge-task-action>button{grid-area:1/1}
.learn-badge-task-action>button{box-sizing:border-box;min-height:44px;width:64px;padding:0 6px;border:1px solid #d8dfff;border-radius:8px;background:#eef1ff;color:#586bea;font-family:inherit;font-size:13px;line-height:20px;font-weight:500;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s}
.learn-compact-badge-detail li.pending:hover .learn-badge-task-action>small,
.learn-compact-badge-detail li.pending:focus-within .learn-badge-task-action>small{visibility:hidden}
.learn-compact-badge-detail li.pending:hover .learn-badge-task-action>button,
.learn-compact-badge-detail li.pending:focus-within .learn-badge-task-action>button{opacity:1;pointer-events:auto}
.learn-badge-task-action>button:hover{background:#e2e7ff}
.learn-badge-task-action>button:focus-visible{outline:2px solid #697dff;outline-offset:2px}
@media(hover:none),(pointer:coarse){.learn-badge-task-action>small{visibility:hidden}.learn-badge-task-action>button{opacity:1;pointer-events:auto}}

/* Compact inline action; the full unfinished row is the hit target. */
.learn-badge-task-action>button{min-height:0;height:auto;width:auto;padding:0;border:0;border-radius:0;background:transparent;white-space:nowrap;line-height:20px}
.learn-badge-task-action>button:hover{background:transparent}
.learn-compact-badge-detail li>.learn-badge-task-action{flex-basis:72px}
.learn-compact-badge-detail li.pending{cursor:pointer;transition:background .15s,border-color .15s}
.learn-compact-badge-detail li.pending:hover,.learn-compact-badge-detail li.pending:focus-within{border-color:#697dff;background:#eef3ff}
.learn-compact-badge-detail li.pending:focus-visible{outline:2px solid #697dff;outline-offset:2px}
.learn-compact-badge .learn-badge-tooltip{font-size:13px!important}
/* Refined badge hints and incomplete task feedback. */
.learn-compact-badge .learn-badge-tooltip{font-size:14px!important;padding:8px 14px;line-height:22px}
.learn-compact-badge-detail li.pending:hover,.learn-compact-badge-detail li.pending:focus-within{color:#586bea}
.learn-compact-badge-detail li.pending:hover>i,.learn-compact-badge-detail li.pending:focus-within>i{color:#586bea;background:#dce5ff}
body.learning-bento-active .learn-v1-claimed>footer .learn-btn{font-size:15px!important}
.learn-badge-info .learn-compact-badge-detail h3,.learn-badge-info .learn-compact-badge-detail>p{position:relative;top:-18px}
/* Align completed and pending badge task status geometry. */
.learn-compact-badge-detail li>i,
.learn-compact-badge-detail li.done>i{box-sizing:border-box;width:28px;height:28px;flex:0 0 28px;line-height:28px}
.learn-compact-badge-detail li>small,
.learn-compact-badge-detail li .learn-badge-task-action>small{box-sizing:border-box;font-size:11px;line-height:20px;font-weight:400}
.learn-compact-badge-detail li>small{flex:0 0 72px;width:72px;text-align:center}
.learn-badge-task-action>small{width:72px;text-align:center}

/* Actual course content defines the bottom of the page. */
.learning-bento .learn-course-grid{align-content:start;overflow-anchor:none}
.learn-compact-badge-detail li>i,.learn-compact-badge-detail li.done>i{box-sizing:border-box;display:grid;place-items:center;width:28px;height:28px;min-width:28px;min-height:28px;flex:0 0 28px;padding:0;border:0;box-shadow:none;line-height:1;border-radius:50%}
.learn-compact-badge-detail li>small,.learn-compact-badge-detail li.done>small,.learn-compact-badge-detail li .learn-badge-task-action>small{font-size:13px;line-height:20px;font-weight:400}

/* A quiet reward reminder, only while all challenges are done and unclaimed. */
.learning-bento .learn-compact-badge.claimable{isolation:isolate}
.learning-bento .learn-compact-badge.claimable img{transform-origin:50% 65%;animation:learn-claim-wiggle 5.8s ease-in-out infinite}
.learning-bento .learn-compact-badge.claimable::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid #8c92ff;box-shadow:0 0 10px #9e96ff50;pointer-events:none;z-index:-1;opacity:0;animation:learn-claim-halo 5.8s ease-out infinite}
.learning-bento .learn-compact-badge.claimable:hover img,.learning-bento .learn-compact-badge.claimable:focus-visible img{animation:none;transform:scale(1.08)}
.learning-bento .learn-compact-badge.claimable:hover::before,.learning-bento .learn-compact-badge.claimable:focus-visible::before{animation:none;opacity:0}
@keyframes learn-claim-wiggle{0%,14%,100%{transform:scale(1) rotate(0)}3%{transform:scale(1.08) rotate(-6deg)}6%{transform:scale(1.08) rotate(6deg)}9%{transform:scale(1.06) rotate(-4deg)}12%{transform:scale(1.03) rotate(2deg)}}
@keyframes learn-claim-halo{0%{opacity:0;transform:scale(.85)}3%{opacity:.6}14%{opacity:0;transform:scale(1.55)}15%,100%{opacity:0;transform:scale(1.55)}}
@media(prefers-reduced-motion:reduce){.learning-bento .learn-compact-badge.claimable img,.learning-bento .learn-compact-badge.claimable::before{animation:none}.learning-bento .learn-compact-badge.claimable:hover img,.learning-bento .learn-compact-badge.claimable:focus-visible img{transform:none}}
/* Three staggered, pale-blue ripples; .8s motion followed by a 3s rest. */
.learning-bento .learn-compact-badge.claimable img{animation-duration:3.8s}
.learning-bento .learn-compact-badge.claimable::before,
.learning-bento .learn-compact-badge.claimable::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid #aaa5ff;background:transparent;box-shadow:0 0 9px #b4aaff60;pointer-events:none;z-index:-1;opacity:0;animation:learn-claim-ripple 3.8s ease-out infinite}
.learning-bento .learn-compact-badge.claimable::after{animation-delay:.16s}
.learning-bento .learn-compact-badge.claimable{background-image:none}
.learning-bento .learn-compact-badge.claimable .learn-claim-ripple{position:absolute;inset:5px;border:1px solid #aaa5ff;border-radius:50%;box-shadow:0 0 9px #b4aaff60;pointer-events:none;z-index:-1;opacity:0;animation:learn-claim-ripple 3.8s .32s ease-out infinite}
@keyframes learn-claim-ripple{0%{opacity:0;transform:scale(.8)}4%{opacity:.8}28%{opacity:0;transform:scale(1.85)}29%,100%{opacity:0;transform:scale(1.85)}}
@keyframes learn-claim-wiggle{0%,21%,100%{transform:scale(1) rotate(0)}4.5%{transform:scale(1.08) rotate(-6deg)}9%{transform:scale(1.08) rotate(6deg)}13.5%{transform:scale(1.06) rotate(-4deg)}18%{transform:scale(1.03) rotate(2deg)}}
.learning-bento .learn-compact-badge.claimable:hover::before,.learning-bento .learn-compact-badge.claimable:hover::after,.learning-bento .learn-compact-badge.claimable:hover .learn-claim-ripple,
.learning-bento .learn-compact-badge.claimable:focus-visible::before,.learning-bento .learn-compact-badge.claimable:focus-visible::after,.learning-bento .learn-compact-badge.claimable:focus-visible .learn-claim-ripple{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.learning-bento .learn-compact-badge.claimable::before,.learning-bento .learn-compact-badge.claimable::after,.learning-bento .learn-compact-badge.claimable .learn-claim-ripple{animation:none;opacity:0}}

/* Two staggered waves: blue first, purple second. */
.learning-bento .learn-compact-badge.claimable::before{border-color:#91b9ff;box-shadow:0 0 9px #a7c9ff60;animation-delay:0s}
.learning-bento .learn-compact-badge.claimable::after{border-color:#b29aff;box-shadow:0 0 9px #c2acff60;animation-delay:.2s}