
.badge-collection{background:#fff;border:1px solid #e2e8e4;border-radius:18px;padding:24px;min-width:0}
.badge-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.badge-filters{display:flex;gap:8px;flex-wrap:wrap}.badge-filters button{padding:8px 14px;border:1px solid #d9e4dd;border-radius:10px;background:#f6f8f6;color:#475569;font-weight:700;cursor:pointer}.badge-filters button[aria-pressed=true]{background:#08794f;color:#fff;border-color:#08794f}
#bvt-badges-container{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
#bvt-badges-container .badge-tile{font-family:inherit;text-align:center;position:relative;padding:20px 12px!important;border:1px solid #e1e7e2;border-radius:10px!important;background:#fafbf9;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;cursor:pointer;color:#334155;transition:transform .18s,box-shadow .18s}
#bvt-badges-container .badge-tile:hover{transform:translateY(-3px);box-shadow:0 7px 18px #173a2112}#bvt-badges-container .badge-tile:focus-visible{outline:3px solid #10b981;outline-offset:3px}
#bvt-badges-container .badge-tile.is-unlocked{background:linear-gradient(155deg,#fffbeb,#fff);border-color:#f2c660;box-shadow:0 3px 0 #ead6a4}
.badge-art{display:block;width:86px;height:100px;filter:grayscale(1);opacity:.42;flex-shrink:0}.is-unlocked .badge-art{filter:none;opacity:1}
#bvt-badges-container .badge-tile h3{font-size:15px!important;line-height:21px!important;font-weight:800;margin:0;color:#18392d}
#bvt-badges-container .badge-tile p{font-size:12px!important;line-height:18px!important;margin:0;color:#64746d;min-height:36px}
.badge-group{font-size:10px!important;letter-spacing:.05em;text-transform:uppercase;font-weight:800;color:#64746d}
.badge-status{font-size:11px!important;font-weight:800;color:#64746d}.is-unlocked .badge-status{color:#08794f}
.badge-progress{width:100%;height:5px;border-radius:8px;background:#e1e7e2;overflow:hidden;margin-top:auto}.badge-progress i{display:block;height:100%;background:#22b573;border-radius:8px}
.badge-note{font-size:12px;line-height:19px;color:#66756e;margin:0}.badge-empty{grid-column:1/-1;text-align:center;padding:30px;color:#64746d}
#badge-detail{width:min(440px,calc(100vw - 32px));max-height:85vh;border:0;border-radius:22px;padding:24px;box-shadow:0 18px 70px #18392d30;color:#18392d;font-family:inherit}#badge-detail::backdrop{background:#0f172a70}#badge-detail .badge-art{margin:0 auto;width:110px;height:125px}#badge-detail h3{font-size:23px;text-align:center;margin:12px 0}#badge-detail p{font-size:14px;line-height:23px;text-align:center}#badge-detail button{border:0;border-radius:10px;padding:10px 20px;background:#08794f;color:#fff;font-weight:800;cursor:pointer}#badge-detail .badge-close{float:right;background:#edf3ef;color:#18392d;padding:5px 10px}
#badge-celebration{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:90;background:#08794f;color:#fff;box-shadow:0 8px 32px #18392d40;border-radius:16px;padding:16px 22px;width:max-content;max-width:calc(100vw - 32px);font-weight:800;text-align:center}#badge-celebration[hidden]{display:none}
@media(min-width:1024px){.bvt-main-stack .badge-collection{grid-column:1/-1!important;grid-row:3!important;padding:24px!important}.bvt-main-stack .bvt-thinking-section{grid-column:1/span 7!important;grid-row:4!important}.bvt-main-stack .bvt-milestones-card{grid-column:8/span 5!important;grid-row:4!important}.bvt-bottom-layout{display:contents!important}}
@media(max-width:1023px){#bvt-badges-container{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.badge-collection{padding:16px}}
@media(max-width:640px){#bvt-badges-container{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}#bvt-badges-container .badge-tile{padding:14px 9px!important}.badge-art{width:70px;height:82px}#bvt-badges-container .badge-tile h3{font-size:13px!important;line-height:18px!important}.badge-filters button{font-size:12px;padding:7px 11px}.badge-note{font-size:11px}.badge-collection .bvt-section-head{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.badge-tile{transition:none!important}.badge-tile:hover{transform:none!important}}

/* One row: four visible badges on PC, two on phones. */
#bvt-badges-container{grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:calc((100% - 36px)/4)!important;grid-template-rows:auto!important;gap:12px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:4px;overscroll-behavior-x:contain;padding:6px 4px 14px;scrollbar-width:thin;scrollbar-color:#8fb9a2 #edf3ef;min-width:0;max-width:100%;}
#bvt-badges-container .badge-tile{scroll-snap-align:start;padding:14px 10px!important;gap:7px;min-height:230px;}
#bvt-badges-container .badge-art{width:62px;height:74px;}
#bvt-badges-container .badge-tile h3{font-size:14px!important;line-height:19px!important;min-height:38px;}
#bvt-badges-container .badge-tile p{font-size:11px!important;line-height:16px!important;min-height:32px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#bvt-badges-container .badge-empty{grid-column:1/-1;min-width:100%;}
.badge-scroll-controls{display:flex;align-items:center;gap:8px;}
.badge-scroll-controls small{font-size:11px;color:#64746d;}
.badge-scroll-controls button{width:34px;height:34px;border:1px solid #d9e4dd;border-radius:10px;background:#f6f8f6;color:#08794f;font-size:24px;line-height:1;cursor:pointer;}
@media(max-width:640px){#bvt-badges-container{grid-auto-columns:calc((100% - 8px)/2)!important;gap:8px!important;}#bvt-badges-container .badge-tile{padding:12px 8px!important;min-height:220px;}#bvt-badges-container .badge-art{width:54px;height:64px;}#bvt-badges-container .badge-tile h3{font-size:12px!important;line-height:17px!important;min-height:34px;}.badge-scroll-controls small{display:none;}}

#bvt-badges-container:has(.badge-empty){grid-auto-columns:100%!important;}


.badge-edge-scroll{display:none;}
.badge-strip-shell{position:relative;min-width:0;max-width:100%;}
@media(max-width:640px){
 .badge-scroll-controls{display:none;}
 .badge-strip-shell{margin-inline:3px;}
 .badge-edge-scroll{display:block;position:absolute;top:50%;transform:translateY(-50%);width:28px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;box-shadow:none;cursor:pointer;z-index:2;touch-action:manipulation;}
 .badge-edge-scroll::before{content:'';position:absolute;top:14px;left:7px;width:14px;height:14px;border-top:2px solid #334155;border-right:2px solid #334155;}
 .badge-edge-prev{left:-15px;}.badge-edge-next{right:-15px;}
 .badge-edge-prev::before{transform:rotate(-135deg);}.badge-edge-next::before{transform:rotate(45deg);}
 .badge-edge-scroll:focus-visible{outline:2px solid #08794f;outline-offset:1px;}
}
