* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #f5f5f5;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul, li {
    list-style: none;
}
.container {
    padding: 0 10px;
    max-width: 600px;
    margin: 0 auto;
}
textarea {
    resize: none;
}
a {
    text-decoration: none;
}
[data-href] {
    cursor: pointer;
}
.loaderCenterPage {
    width: 100%;
    height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    font-size: 14px;
}
.transformScaleYes {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.transformScaleNot {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}
.ready-load {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 105;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
}
.ready-load>span {
    position: absolute;
    bottom: 30px;
    background: linear-gradient(45deg, #0076b1 33%, #00a300 66%, #990016);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: table;
    font-weight: bold;
}
.bc-standard {
    background-color: #336699;
}
.cl-standard {
    color: #336699;
}
.bc-fff {
    background-color: #fff;
}
.flex {
    display: flex;
}
.flex-column {
    flex-direction: column;
}
.flex-y-center {
    align-items: center;
}
.flex-x-center {
    justify-content: center;
}
.flex-xy-center {
    justify-content: center;
    align-items: center;
}
.flex-between {
    justify-content: space-between;
}
.flex-wrap {
    flex-wrap: wrap;
}
.xy45px {
    width: 45px;
    height: 45px;
}
.share-cnt {
    width: 100%;
}
.bw-share-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f3f7ff, #ffffff);
    border: 1px solid rgba(22, 119, 255, 0.12);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}
.bw-share-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    font-size: 23px;
}
.bw-share-content {
    flex: 1;
    min-width: 0;
}
.bw-share-title {
    font-size: 15px;
    font-weight: 800;
    color: #101828;
    line-height: 1.25;
}
.bw-share-text {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 500;
    color: #667085;
    line-height: 1.35;
}
.bw-share-main-btn {
    border: 0;
    outline: 0;
    border-radius: 14px;
    padding: 11px 15px;
    background: #1677ff;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.bw-share-main-btn:active {
    transform: scale(0.97);
}
.bw-share-fallback {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.bw-share-fallback.is-active {
    display: flex;
}
.bw-share-copy, .bw-share-link {
    border: 0;
    outline: 0;
    border-radius: 13px;
    padding: 11px 13px;
    background: #f2f4f7;
    color: #101828;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-share-copy {
    background: #101828;
    color: #fff;
}
.bw-share-copy:active, .bw-share-link:active {
    transform: scale(0.97);
}
.bw-share-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: #101828;
    color: #fff;
    padding: 11px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
    z-index: 99999;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.bw-share-toast.is-active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 480px) {
.bw-share-box {
    padding: 13px;
    gap: 10px;
}
.bw-share-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 21px;
}
.bw-share-title {
    font-size: 14px;
}
.bw-share-text {
    font-size: 12px;
}
.bw-share-main-btn {
    padding: 10px 13px;
    font-size: 13px;
}
.bw-share-copy, .bw-share-link {
    flex: 1;
    min-width: calc(50% - 4px);
    padding: 11px 10px;
}
}
.header {
    height: 50px;
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #f5f5f5;
    z-index: 99;
}
.header ul {
    height: 50px;
}
.header ul>li {
    padding: 12px;
    font-weight: bold;
    border-radius: 16px;
}
.headerLiScroll {
    overflow-y: scroll;
    height: 50px;
    text-align: center;
    width: 75%;
}
.header ul>li.bw-main-header-logo {
    padding: 4px 0;
    border-radius: 0;
    display: flex;
    align-items: center;
}
.bw-main-header-logo img {
    display: block;
    width: 164px;
    max-width: 100%;
    height: auto;
}
.header ul>li.bw-main-header-spacer {
    flex: 1;
    min-width: 8px;
    padding: 0;
}
.header ul>li.bw-header-notification-action {
    position: relative;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border-radius: 14px;
    color: #336699;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(31, 72, 111, 0.09);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.bw-header-notification-action>i {
    font-size: 18px;
}
.bw-header-notification-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(31, 72, 111, 0.14);
}
.bw-header-notification-action:active {
    transform: scale(0.96);
}
.bw-header-notification-action.has-unread {
    background: #eef6ff;
}
.bw-header-notification-action.has-unread>i {
    animation: bwHeaderBell 1.4s ease-in-out 1;
}
.bw-header-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #f5f5f5;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.28);
}
@keyframes bwHeaderBell {
0%, 100% {
    transform: rotate(0);
}
20% {
    transform: rotate(12deg);
}
40% {
    transform: rotate(-10deg);
}
60% {
    transform: rotate(7deg);
}
80% {
    transform: rotate(-4deg);
}
}
@media (max-width: 480px) {
.bw-main-header-logo img {
    width: 148px;
}
.header ul>li.bw-header-notification-action {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 13px;
}
}
nav {
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    bottom: 0;
    height: 56px;
    z-index: 99;
    text-align: center;
}
nav div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 56px;
    padding:0!important;
}
nav .nav-li {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    margin: 0 -10px;
    color: #b0b2b8;
}
nav .nav-li>i {
    font-size: 24px;
}
nav .nav-li>span {
    font-size: 10px;
    margin-top: 4px;
}
.content {
    margin: 55px 0;
}
.main-discipline-list ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.main-discipline-list ul>li {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 110px;
    padding: 14px 10px;
    text-align: center;
    font-weight: 700;
    color: #1f2937;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
    transition: .25s ease;
}
.main-discipline-list ul>li:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.14);
}
.main-discipline-list ul>li>span.title {
    font-size: 14px;
    line-height: 1.35;
}
.subject-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.subject-icon i {
    font-size: 24px;
    color: #fff;
}
@media (max-width: 480px) {
.main-discipline-list ul>li {
    min-height: 98px;
    padding: 12px 8px;
}
.subject-icon {
    width: 46px;
    height: 46px;
}
.subject-icon i {
    font-size: 21px;
}
.main-discipline-list ul>li>span.title {
    font-size: 13px;
}
}
.themes-cnt {
    margin-top: 5px;
}
.themes-cnt ul {
    margin-top: 10px;
}
.themes-cnt ul>li {
    flex-wrap: wrap;
    word-break: break-word;
    background-color: #842694;
    width: 30%;
    color: #fff;
    margin: 3px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    overflow-y: hidden;
}
.profile-info {
    text-align: center;
    margin-bottom: 50px;
}
.profile-info>ul>li:first-child>span {
    color: #fff;
    font-size: 30px;
    width: 65px;
    height: 65px;
    margin: 0 auto;
    border-radius: 50%;
}
.profile-info>ul>li:last-child {
    margin-top: 6px;
    font-weight: bold;
}
.all-btn {
    outline: none;
    width: 100%;
    border-radius: 16px;
    height: 50px;
    font-size: 16px;
    color: #fff;
    border: none;
    position: relative;
    transition-duration: 0.2s;
    overflow: hidden;
}
.all-btn:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s;
}
.all-btn:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
}
.all-btn:hover {
    background-color: #2b5178;
}
.q-qusn span[data-ask]:has(>table) {
    flex-direction: column;
    align-items: flex-start;
}
.q-qusn span[data-ask]:has(>table)>table {
    margin-top: 8px;
}
.shake {
    animation: shake 0.4s;
}
.success {
    animation: success 0.8s;
}
@keyframes shake {
0% {
    transform: translateX(3px);
}
10% {
    transform: translateX(-3px);
}
20% {
    transform: translateX(-6px);
}
30% {
    transform: translateX(6px);
}
40% {
    transform: translateX(3px);
}
50% {
    transform: translateX(-3px);
}
60% {
    transform: translateX(-6px);
}
70% {
    transform: translateX(6px);
}
80% {
    transform: translateX(-3px);
}
90%, 100% {
    transform: translateX(3px);
}
}
@keyframes success {
0% {
    transform: scale(1);
}
20% {
    transform: scale(1.05);
}
40% {
    transform: scale(1);
}
60% {
    transform: scale(1.05);
}
100% {
    transform: scale(1);
}
}
.q-qusn {
    height: 30vh;
    padding: 15px 12px;
    margin-top: 12px;
    border-radius: 14px;
    min-height: 180px;
    max-height: 30vh;
    font-size: 15px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e5e7eb;
}
.q-qusn>span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: auto;
    line-height: 1.45;
    word-break: break-word;
}
#timer {
    font-size: 12px;
    color: #000;
    font-weight: 600;
}
.q-answ {
    margin-top: 18px;
}
.q-answ ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.q-answ li {
    text-align: center;
    padding: 13px 10px;
    margin: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s ease;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    line-height: 1.4;
}
.q-answ li:hover {
    border-color: #cfd6df;
    background: #fafafa;
}
.q-next-btn {
    width: 150px;
    height: 44px;
    margin: 12px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #336699;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.q-next-btn:hover {
    background-color: #2b5a88;
}
.q-qusn>span::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
}
.q-qusn>span::-webkit-scrollbar-thumb {
    background: #d6d6d6;
    border-radius: 10px;
}
.q-nt-ans {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 70px;
    z-index: 10000;
    background: #2372fa;
    color: #fff;
    padding: 12px;
    text-align: center;
    border-radius: 10px;
    width: calc(100% - 20px);
    max-width: 500px;
    font-size: 14px;
}
.cons-screen-head {
    margin-bottom: 16px;
}
.cons-screen-head p {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}
.cons-group {
    margin-bottom: 18px;
}
.cons-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
}
.cons-group-title span:first-child {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}
.cons-group-title span:last-child {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cons-subject-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cons-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 13px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cons-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(17, 24, 39, 0.10);
    border-color: #dbe3ee;
}
.cons-card:active {
    transform: scale(0.985);
}
.cons-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cons-card-icon i {
    color: #fff;
    font-size: 20px;
}
.cons-card-body {
    flex: 1;
    min-width: 0;
}
.cons-card-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    line-height: 1.3;
    word-break: break-word;
}
.cons-card-subtitle {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1.35;
}
.cons-card-arrow {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    transition: background .2s ease, transform .2s ease;
}
.cons-card:hover .cons-card-arrow {
    background: #e2ecf7;
    transform: translateX(2px);
}
.bg-kz-history {
    background: #F97316;
}
.bg-world-history {
    background: #6366F1;
}
.bg-law {
    background: #F59E0B;
}
.bg-reading {
    background: #FF4D9D;
}
.bg-math-literacy {
    background: #22C55E;
}
.bg-geography {
    background: #10B981;
}
.bg-math {
    background: #0EA5E9;
}
.bg-physics {
    background: #14B8A6;
}
.bg-it {
    background: #3B82F6;
}
.bg-biology {
    background: #84CC16;
}
.bg-chemistry {
    background: #EF4444;
}
.bg-english {
    background: #A855F7;
}
.bg-kazakh {
    background: #06B6D4;
}
.bg-kazakh-lit {
    background: #8B5CF6;
}
.bg-russian {
    background: #EAB308;
}
.bg-russian-lit {
    background: #D946EF;
}
@media (max-width: 480px) {
.cons-card {
    padding: 12px;
    border-radius: 16px;
}
.cons-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}
.cons-card-icon i {
    font-size: 18px;
}
.cons-card-title {
    font-size: 14px;
}
.cons-card-subtitle {
    font-size: 11px;
}
.cons-card-arrow {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}
}
.lessons-list>ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lessons-list>ul>li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: 16px;
    padding: 13px 14px;
    cursor: pointer;
    transition: .2s ease;
}
.lessons-list>ul>li:hover {
    border-color: #d7e2ee;
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.06);
    transform: translateY(-1px);
}
.lessons-list>ul>li:active {
    transform: scale(0.99);
}
.lesson-num {
    min-width: 30px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #eef4fb;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.lesson-name {
    flex: 1;
    min-width: 0;
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}
.lesson-go {
    color: #336699;
    font-size: 20px;
    flex-shrink: 0;
    transition: .2s ease;
}
.lessons-list>ul>li:hover .lesson-go {
    transform: scale(1.08);
}
.lessons-empty {
    background: #fff;
    border: 1px dashed #d5dce5;
    border-radius: 16px;
    padding: 18px 14px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}
@media (max-width: 480px) {
.lessons-list>ul {
    gap: 8px;
}
.lessons-list>ul>li {
    padding: 12px;
    border-radius: 14px;
    gap: 10px;
}
.lesson-num {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 9px;
}
}
.cons-page-text {
    border-radius: 16px;
    padding: 20px;
    background: #fff;
    overflow-wrap: break-word;
    overflow-x: scroll;
    margin-top: 10px;
    line-height: 24px;
}
table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    margin: 6px 0;
}
th, td {
    border: 1px solid #336699;
    padding: 5px;
}
.bw-community-tabs {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
    padding: 5px;
    background: #e9eef5;
    border-radius: 16px;
    position: sticky;
    top: 49px;
    z-index: 15;
}
.bw-community-tab {
    min-height: 43px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #667085;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: .2s ease;
}
.bw-community-tab i {
    font-size: 15px;
}
.bw-community-tab.is-active {
    color: #214f7d;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15,23,42,.08);
}
.bw-community-panel-general, .bw-groups-panel {
    min-height: 180px;
}
.bw-groups-kicker {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .78;
}
.bw-create-group-btn {
    min-width: 106px;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 13px;
    background: #fff;
    color: #285f91;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    flex-shrink: 0;
}
.bw-group-search>i {
    color: #8090a3;
    font-size: 14px;
}
.bw-group-search input::placeholder {
    color: #9aa5b5;
}
.bw-group-search button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    background: #f1f4f8;
    color: #667085;
    cursor: pointer;
}
.bw-groups-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 2px 9px;
}
.bw-groups-section-head h4 {
    margin: 0;
    color: #182230;
    font-size: 15px;
}
.bw-groups-section-head p {
    margin-top: 2px;
    color: #8b96a5;
    font-size: 11px;
}
.bw-groups-section-head>span {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 10px;
    background: #eaf1f8;
    color: #336699;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bw-groups-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bw-group-card-main {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.bw-group-card-copy {
    flex: 1;
    min-width: 0;
}
.bw-group-card-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.bw-group-card-topline>b {
    color: #182230;
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
}
.bw-group-private {
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: 8px;
    background: #f2f4f7;
    color: #667085;
    font-size: 9px;
    font-weight: 800;
}
.bw-group-subject {
    display: block;
    margin-top: 3px;
    color: #336699;
    font-size: 11px;
    font-weight: 800;
}
.bw-group-meta>span {
    color: #7c8796;
    font-size: 10px;
    font-weight: 700;
}
.bw-group-member-chip {
    padding: 3px 7px;
    border-radius: 8px;
    background: #eaf8ef;
    color: #279255 !important;
}
.bw-group-open-btn, .bw-group-join-btn, .bw-groups-retry-btn {
    width: 100%;
    min-height: 39px;
    border: 0;
    border-radius: 12px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.bw-group-open-btn {
    background: #edf4fb;
    color: #336699;
}
.bw-group-open-btn i {
    font-size: 10px;
}
.bw-group-join-btn, .bw-groups-retry-btn {
    background: #336699;
    color: #fff;
}
.bw-group-open-btn:disabled, .bw-group-join-btn:disabled, .bw-create-group-btn:disabled{
    opacity: .6;
    cursor: default;
}
.bw-groups-empty {
    padding: 26px 18px;
    border: 1px dashed #d8e0e9;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}
.bw-groups-empty-small {
    padding: 19px 15px;
}
.bw-groups-empty-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 9px;
    border-radius: 15px;
    background: #edf3f9;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.bw-groups-empty>b {
    color: #1d2939;
    font-size: 14px;
}
.bw-groups-empty>p {
    max-width: 330px;
    margin: 5px auto 0;
    color: #7b8795;
    font-size: 12px;
    line-height: 1.45;
}
.bw-groups-empty .bw-group-join-btn, .bw-groups-empty .bw-groups-retry-btn {
    width: auto;
    margin: 12px auto 0;
}
.bw-group-create-page {
    padding-bottom: 30px;
}
.bw-group-create-hero {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 19px;
    background: linear-gradient(135deg,#eef5fb,#fff);
    border: 1px solid #dce7f2;
}
.bw-group-create-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 15px;
    background: #336699;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.bw-group-create-hero span {
    color: #336699;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.bw-group-create-hero h3 {
    margin-top: 3px;
    color: #182230;
    font-size: 18px;
}
.bw-group-create-hero p {
    margin-top: 5px;
    color: #6f7b89;
    font-size: 12px;
    line-height: 1.4;
}
.bw-group-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 14px;
}
.bw-group-field {
    display: block;
    padding: 13px;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    background: #fff;
}
.bw-group-field>span, .bw-group-privacy-title>span {
    display: block;
    margin-bottom: 7px;
    color: #27364a;
    font-size: 12px;
    font-weight: 900;
}
.bw-group-field input, .bw-group-field select, .bw-group-field textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #182230;
    font-size: 14px;
    font-family: inherit;
}
.bw-group-field select {
    height: 34px;
}
.bw-group-field textarea {
    line-height: 1.45;
    resize: none;
}
.bw-group-field small {
    display: block;
    margin-top: 6px;
    color: #98a2b3;
    font-size: 10px;
}
.bw-group-privacy-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
}
.bw-group-privacy-title>span {
    margin: 0;
}
.bw-group-privacy-title small {
    color: #98a2b3;
    font-size: 10px;
}
.bw-group-privacy-options {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bw-group-privacy-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: .2s ease;
}
.bw-group-privacy-card.is-active {
    border-color: #77a2ca;
    background: #f5f9fd;
    box-shadow: 0 0 0 2px rgba(51,102,153,.08);
}
.bw-group-privacy-card>input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bw-group-privacy-card>i {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    background: #edf3f9;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bw-group-privacy-card>div {
    flex: 1;
    min-width: 0;
}
.bw-group-privacy-card b {
    color: #1f2937;
    font-size: 13px;
}
.bw-group-privacy-card p {
    margin-top: 3px;
    color: #7a8695;
    font-size: 11px;
    line-height: 1.4;
}
.bw-group-radio-dot {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #c9d2dd;
    border-radius: 50%;
    position: relative;
}
.bw-group-privacy-card.is-active .bw-group-radio-dot {
    border-color: #336699;
}
.bw-group-privacy-card.is-active .bw-group-radio-dot:after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #336699;
}
.bw-group-form-error {
    padding: 11px 12px;
    border-radius: 12px;
    background: #fff1f0;
    color: #c9362b;
    font-size: 12px;
    font-weight: 700;
}
.bw-group-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
body.bw-group-chat-active {
    overflow: hidden;
}
.content.bw-group-chat-active {
    margin-bottom: 0;
}
.bw-group-chat-page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: calc(100vh - 55px);
    max-height: calc(100vh - 55px);
    overflow: hidden;
    padding: 0 14px;
}
.bw-group-chat-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid #e3e8ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,.05);
}
.bw-group-chat-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 15px;
    background: linear-gradient(135deg,#336699,#4f87ba);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.bw-group-chat-head-copy {
    flex: 1;
    min-width: 0;
}
.bw-group-chat-head-copy>span {
    color: #336699;
    font-size: 10px;
    font-weight: 900;
}
.bw-group-chat-head-copy h3 {
    margin-top: 2px;
    color: #182230;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bw-group-chat-head-copy p {
    margin-top: 3px;
    color: #8490a0;
    font-size: 10px;
}
.bw-group-menu-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 12px;
    background: #f1f4f7;
    color: #526173;
    cursor: pointer;
}
.bw-group-info-panel {
    flex-shrink: 0;
    margin-top: 8px;
    padding: 13px;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    background: #fff;
}
.bw-group-info-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.bw-group-info-row+.bw-group-info-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
}
.bw-group-info-row>i {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
    background: #edf3f9;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bw-group-info-row>div {
    flex: 1;
    min-width: 0;
}
.bw-group-info-row b {
    color: #1f2937;
    font-size: 12px;
}
.bw-group-info-row p {
    margin-top: 3px;
    color: #707c8a;
    font-size: 11px;
    line-height: 1.4;
}
.bw-copy-code-btn {
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    padding: 8px 10px;
    background: #eef4fa;
    color: #336699;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
}
.bw-group-info-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
}
.bw-group-owner-badge {
    color: #a66b00;
    font-size: 11px;
    font-weight: 800;
}
.bw-group-leave-btn {
    border: 0;
    border-radius: 11px;
    padding: 9px 11px;
    background: #fff1f0;
    color: #c9362b;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.bw-group-chat-notice {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f7f9fb;
    color: #7c8796;
    font-size: 10px;
    line-height: 1.35;
}
.bw-group-chat-notice i {
    color: #336699;
}
.bw-group-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 5px 12px;
    scroll-behavior: smooth;
}
.bw-group-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 9px;
}
.bw-group-message:not(.is-mine) {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 7px;
    align-items: end;
}
.bw-group-message.is-mine {
    align-items: flex-end;
}
.bw-group-message-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: end;
    width: 32px;
    height: 32px;
    min-width: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5ef;
    border-radius: 50%;
    background: #eaf1f8;
    color: #336699;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    user-select: none;
}
.bw-group-message-author {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin: 0 0 3px 7px;
    color: #7a8796;
    font-size: 9px;
    font-weight: 800;
}
.bw-group-message-bubble {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    max-width: 84%;
    padding: 9px 10px 6px;
    border-radius: 15px 15px 15px 5px;
    background: #fff;
    border: 1px solid #e3e8ef;
    box-shadow: 0 4px 12px rgba(15,23,42,.04);
}
.bw-group-message.is-mine .bw-group-message-bubble {
    justify-self: auto;
}
.bw-group-message.is-mine .bw-group-message-bubble {
    border-color: #336699;
    border-radius: 15px 15px 5px 15px;
    background: #336699;
    color: #fff;
}
.bw-group-message-bubble p {
    margin: 0;
    font-size: 13px;
    line-height: 1.42;
    word-break: break-word;
    user-select: text;
}
.bw-group-message-bubble time {
    display: block;
    margin-top: 3px;
    text-align: right;
    color: #98a2b3;
    font-size: 8px;
}
.bw-group-message.is-mine time {
    color: rgba(255,255,255,.7);
}
.bw-group-chat-empty {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #788596;
}
.bw-group-chat-empty>div {
    width: 49px;
    height: 49px;
    margin-bottom: 9px;
    border-radius: 16px;
    background: #eaf1f8;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bw-group-chat-empty b {
    color: #263447;
    font-size: 13px;
}
.bw-group-chat-empty p {
    margin-top: 4px;
    font-size: 11px;
}
.bw-group-message-form {
    flex-shrink: 0;
    display: flex;
    position: relative;
    bottom: auto;
    z-index: 20;
    margin: 0 -14px;
    padding: 9px 14px 8px;
    border-top: 1px solid #e2e7ee;
    background: #fff;
    box-shadow: 0 -8px 20px rgba(15,23,42,.04);
}
.bw-group-message-form textarea {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    max-height: 120px;
    padding: 11px 13px;
    border: 1px solid #dfe5ec;
    border-radius: 15px;
    outline: 0;
    background: #f7f9fb;
    color: #182230;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.35;
    resize: none;
}
.bw-group-message-form button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border: 0;
    border-radius: 14px;
    background: #336699;
    color: #fff;
    cursor: pointer;
}
.bw-group-message-form button:disabled {
    opacity: .55;
}
.bw-community-toast {
    position: fixed;
    left: 50%;
    bottom: 76px;
    z-index: 100000;
    max-width: calc(100% - 28px);
    padding: 10px 14px;
    border-radius: 999px;
    background: #152033;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,16px);
    transition: .2s ease;
    box-shadow: 0 10px 28px rgba(15,23,42,.22);
}
.bw-community-toast.is-active {
    opacity: 1;
    transform: translate(-50%,0);
}
.bw-community-toast.is-error {
    background: #b42318;
}
@media (max-width:480px) {
.bw-create-group-btn {
    width: 100%;
}
.bw-group-card {
    padding: 12px;
    border-radius: 16px;
}
.bw-group-chat-page {
    height: calc(100vh - 55px);
    max-height: calc(100vh - 55px);
    padding-left: 12px;
    padding-right: 12px;
}
.bw-group-message-form {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
}
.bw-group-message-bubble {
    max-width: 88%;
}
}
.bw-groups-view {
    padding-bottom: 18px;
}
.bw-groups-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e3e9f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15,23,42,.05);
}
.bw-groups-toolbar-copy {
    flex: 1;
    min-width: 0;
}
.bw-groups-toolbar .bw-groups-kicker {
    margin: 0 0 3px;
    color: #336699;
    opacity: 1;
    font-size: 10px;
}
.bw-groups-toolbar h3 {
    margin: 0;
    color: #182230;
    font-size: 17px;
    line-height: 1.25;
}
.bw-groups-toolbar p {
    margin-top: 4px;
    color: #748092;
    font-size: 11px;
    line-height: 1.4;
}
.bw-groups-toolbar p b {
    color: #336699;
}
.bw-groups-toolbar .bw-create-group-btn {
    width: auto;
    min-width: auto;
    height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 12px;
    background: #336699;
    color: #fff;
    box-shadow: none;
}
.bw-group-search-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.bw-group-search {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid #e1e7ef;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    border-color: #dce4ed;
    border-radius: 15px;
    box-shadow: 0 5px 16px rgba(15,23,42,.035);
}
.bw-group-search:focus-within {
    border-color: #7fa7cc;
    box-shadow: 0 0 0 3px rgba(51,102,153,.09);
}
.bw-group-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #152033;
    font-size: 13px;
}
.bw-group-search-help {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 7px 3px 0;
    color: #7c8796;
    font-size: 10px;
    line-height: 1.35;
}
.bw-group-search-help i {
    color: #336699;
}
.bw-group-search-help b {
    color: #52677d;
}
.bw-search-results-section {
    padding: 12px;
    border: 1px solid #dce7f1;
    border-radius: 18px;
    background: #f6f9fc;
}
.bw-search-results-section .bw-groups-section-head {
    margin-top: 0;
}
.bw-groups-section {
    margin-top: 15px;
}
.bw-group-card {
    border: 1px solid #e5eaf0;
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(15,23,42,.045);
}
.bw-group-card-icon {
    background: linear-gradient(135deg,#e8f1fa,#d8e8f6);
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 13px;
}
.bw-group-card-copy>p {
    color: #687486;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 5px;
}
.bw-group-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}
.bw-group-card-actions {
    margin-top: 9px;
}
.bw-group-open-btn, .bw-group-join-btn {
    min-height: 37px;
}
.bw-group-owner-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bw-group-owner-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.bw-group-settings-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 35px;
    padding: 0 11px;
    border: 0;
    border-radius: 11px;
    background: #edf4fb;
    color: #336699;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.bw-group-settings-btn:active {
    transform: scale(.98);
}
.bw-group-settings-code {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px dashed #bfd0e1;
    border-radius: 16px;
    background: #f7faff;
}
.bw-group-settings-code>i {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    background: #eaf2fa;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bw-group-settings-code>div {
    flex: 1;
    min-width: 0;
}
.bw-group-settings-code b {
    display: block;
    color: #1f2937;
    font-size: 12px;
}
.bw-group-settings-code p {
    margin-top: 3px;
    color: #707c8a;
    font-size: 11px;
    line-height: 1.4;
}
.bw-group-delete-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 35px;
    padding: 0 11px;
    border: 0;
    border-radius: 11px;
    background: #fff1f0;
    color: #c9362b;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.bw-group-delete-btn:disabled {
    opacity: .58;
    cursor: default;
}
@media (max-width:480px) {
.bw-groups-toolbar {
    padding: 13px;
    align-items: flex-start;
}
.bw-groups-toolbar h3 {
    font-size: 16px;
}
.bw-groups-toolbar p {
    max-width: 250px;
}
.bw-groups-toolbar .bw-create-group-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
}
.bw-groups-toolbar .bw-create-group-btn span {
    display: none;
}
.bw-group-search input {
    font-size: 12px;
}
.bw-group-owner-line {
    align-items: flex-start;
    flex-direction: column;
}
.bw-group-owner-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
.bw-group-settings-btn, .bw-group-delete-btn {
    width: 100%;
}
}
.bw-group-system-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 92%;
    margin: 12px auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2f6;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}
.bw-group-system-message i {
    color: #336699;
    font-size: 10px;
}
.bw-group-system-message span {
    word-break: break-word;
}
.bw-group-system-message span b {
    color: #475467;
    font-weight: 800;
}
.bw-group-system-message time {
    color: #98a2b3;
    font-size: 9px;
    font-weight: 500;
}
.bw-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(15,23,42,0);
    visibility: hidden;
    transition: background .18s ease, visibility .18s ease;
}
.bw-confirm-overlay.is-active {
    background: rgba(15,23,42,.48);
    visibility: visible;
}
.bw-confirm-modal {
    width: 100%;
    max-width: 480px;
    padding: 22px 18px 18px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15,23,42,.28);
    text-align: center;
    transform: translateY(35px) scale(.97);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.bw-confirm-overlay.is-active .bw-confirm-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.bw-confirm-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4fb;
    color: #336699;
    font-size: 22px;
}
.bw-confirm-icon.is-danger {
    background: #feecec;
    color: #dc2626;
}
.bw-confirm-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: #111827;
}
.bw-confirm-text {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #667085;
}
.bw-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}
.bw-confirm-actions button {
    min-height: 48px;
    padding: 11px 12px;
    border: 0;
    outline: 0;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-confirm-actions button:active {
    transform: scale(.97);
}
.bw-confirm-cancel {
    background: #f2f4f7;
    color: #344054;
}
.bw-confirm-submit {
    background: #336699;
    color: #fff;
}
.bw-confirm-submit.is-danger {
    background: #dc2626;
    color: #fff;
}
@media (min-width:600px) {
.bw-confirm-overlay {
    align-items: center;
}
.bw-confirm-modal {
    max-width: 400px;
}
}
body.bw-members-modal-open {
    overflow: hidden;
}
.bw-group-members-trigger {
    width: max-content;
    max-width: 100%;
    margin-top: 3px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #8490a0;
    font-family: inherit;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-group-members-trigger .fa-chevron-right {
    font-size: 8px;
    transition: transform .18s ease;
}
.bw-group-members-trigger:active .fa-chevron-right {
    transform: translateX(2px);
}
.bw-group-info-members-btn {
    width: 100%;
    margin-top: 12px;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid #edf0f4;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.bw-group-info-members-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
    background: #edf3f9;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bw-group-info-members-copy {
    flex: 1;
    min-width: 0;
}
.bw-group-info-members-copy b {
    display: block;
    color: #1f2937;
    font-size: 12px;
}
.bw-group-info-members-copy small {
    display: block;
    margin-top: 2px;
    color: #707c8a;
    font-size: 10px;
}
.bw-group-info-members-btn>.fa-chevron-right {
    color: #98a2b3;
    font-size: 10px;
}
.bw-group-members-overlay {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    background: rgba(15,23,42,0);
    visibility: hidden;
    pointer-events: none;
    transition: background .2s ease, visibility .2s ease;
}
.bw-group-members-overlay.is-active {
    background: rgba(15,23,42,.52);
    visibility: visible;
    pointer-events: auto;
}
.bw-group-members-sheet {
    width: 100%;
    max-width: 520px;
    max-height: min(78vh,680px);
    padding: 8px 14px 14px;
    border-radius: 24px 24px 20px 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15,23,42,.32);
    display: flex;
    flex-direction: column;
    transform: translateY(42px) scale(.98);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.bw-group-members-overlay.is-active .bw-group-members-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.bw-group-members-handle {
    width: 42px;
    height: 4px;
    margin: 1px auto 10px;
    border-radius: 999px;
    background: #d8dee7;
}
.bw-group-members-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 12px;
    border-bottom: 1px solid #edf0f4;
}
.bw-group-members-head>div {
    min-width: 0;
}
.bw-group-members-head span {
    display: block;
    color: #336699;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.bw-group-members-head h4 {
    margin-top: 2px;
    color: #182230;
    font-size: 18px;
    line-height: 1.25;
}
.bw-group-members-head p {
    margin-top: 2px;
    color: #8490a0;
    font-size: 11px;
}
.bw-group-members-close {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 0;
    border-radius: 13px;
    background: #f1f4f7;
    color: #526173;
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-group-members-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 1px 2px;
    overscroll-behavior: contain;
}
.bw-group-member-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    padding: 9px 8px;
    border-radius: 15px;
}
.bw-group-member-item+.bw-group-member-item {
    border-top: 1px solid #f0f2f5;
}
.bw-group-member-item.is-owner {
    margin-bottom: 4px;
    border: 1px solid #f0dfb1;
    background: linear-gradient(135deg,#fffaf0,#fff);
}
.bw-group-member-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg,#336699,#4f87ba);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(51,102,153,.18);
}
.bw-group-member-item.is-owner .bw-group-member-avatar {
    background: linear-gradient(135deg,#d99a18,#f1bd42);
    box-shadow: 0 6px 14px rgba(217,154,24,.18);
}
.bw-group-member-copy {
    flex: 1;
    min-width: 0;
}
.bw-group-member-copy>b {
    display: block;
    overflow: hidden;
    color: #182230;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bw-group-member-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}
.bw-group-member-role {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 7px;
    background: #f2f4f7;
    color: #667085;
    font-size: 9px;
    font-weight: 800;
}
.bw-group-member-role.is-admin {
    background: #fff0c7;
    color: #996500;
}
.bw-group-member-role.is-me {
    background: #e9f3ff;
    color: #336699;
}
.bw-group-member-owner-icon {
    flex-shrink: 0;
    color: #d99a18;
    font-size: 15px;
}
.bw-group-member-active-icon {
    flex-shrink: 0;
    color: #b9c2ce;
    font-size: 12px;
}
.bw-group-members-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8490a0;
    text-align: center;
}
.bw-group-members-empty i {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #edf3f9;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.bw-group-members-empty b {
    color: #344054;
    font-size: 13px;
}
@media (max-width:480px) {
.bw-group-members-overlay {
    padding: 0;
}
.bw-group-members-sheet {
    max-height: 82vh;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
}
.bw-group-member-kick-btn {
    min-height: 34px;
    flex-shrink: 0;
    padding: 0 10px;
    border: 1px solid #ffd5d2;
    border-radius: 11px;
    background: #fff1f0;
    color: #b42318;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, background .16s ease, opacity .16s ease;
}
.bw-group-member-kick-btn:active {
    transform: scale(.96);
    background: #ffe4e1;
}
.bw-group-member-kick-btn:disabled {
    opacity: .62;
    cursor: default;
}
.bw-group-member-kick-btn i {
    font-size: 11px;
}
@media (max-width:380px) {
.bw-group-member-kick-btn {
    width: 36px;
    min-width: 36px;
    padding: 0;
}
.bw-group-member-kick-btn span {
    display: none;
}
}
.bw-mistakes-page, .bw-mistakes-result-page {
    padding-bottom: 24px;
}
.bw-mistakes-hero {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border-radius: 20px;
    background: linear-gradient(135deg,#244f7c,#3f7fb9);
    color: #fff;
    box-shadow: 0 12px 28px rgba(51,102,153,.22);
}
.bw-mistakes-hero-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.16);
    font-size: 22px;
}
.bw-mistakes-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ffe48a;
}
.bw-mistakes-hero h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
}
.bw-mistakes-hero p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255,255,255,.82);
}
.bw-mistakes-summary {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #e3e9f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
.bw-mistakes-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bw-mistakes-count-copy b {
    display: block;
    color: #152033;
    font-size: 15px;
}
.bw-mistakes-count-copy span {
    display: block;
    margin-top: 3px;
    color: #7b8796;
    font-size: 12px;
    line-height: 1.4;
}
.bw-mistakes-count {
    min-width: 58px;
    height: 58px;
    padding: 0 10px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef5fc;
    color: #285f91;
    font-size: 24px;
    font-weight: 900;
}
.bw-mistakes-start {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #336699;
    font-weight: 800;
    cursor: pointer;
}
.bw-mistakes-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 13px;
    border-radius: 16px;
    background: #eef5fc;
    color: #516274;
    font-size: 12px;
    line-height: 1.45;
}
.bw-mistakes-note i {
    margin-top: 2px;
    color: #336699;
}
.bw-mistakes-empty {
    margin-top: 12px;
    padding: 26px 16px;
    border: 1px solid #e4eaf1;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}
.bw-mistakes-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 11px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf7ee;
    color: #24904b;
    font-size: 23px;
}
.bw-mistakes-empty b {
    display: block;
    color: #182230;
    font-size: 16px;
}
.bw-mistakes-empty p {
    margin-top: 5px;
    color: #778395;
    font-size: 12px;
    line-height: 1.45;
}
.mistakes-q-cnt .q-pst {
    padding-bottom: 12px;
}
.bw-mistakes-result-card {
    margin-top: 8px;
    padding: 24px 18px;
    border: 1px solid #e3e9f0;
    border-radius: 22px;
    background: #fff;
    text-align: center;
    box-shadow: 0 10px 28px rgba(15,23,42,.07);
}
.bw-mistakes-result-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 13px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf7ee;
    color: #24904b;
    font-size: 28px;
}
.bw-mistakes-result-card h3 {
    color: #172033;
    font-size: 20px;
}
.bw-mistakes-result-card>p {
    margin-top: 6px;
    color: #748094;
    font-size: 13px;
    line-height: 1.5;
}
.bw-mistakes-result-stats {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin-top: 17px;
}
.bw-mistakes-result-stat {
    padding: 13px 8px;
    border-radius: 15px;
    background: #f3f6f9;
}
.bw-mistakes-result-stat b {
    display: block;
    color: #1d2a3b;
    font-size: 21px;
}
.bw-mistakes-result-stat span {
    display: block;
    margin-top: 3px;
    color: #7b8796;
    font-size: 11px;
}
.bw-mistakes-result-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 16px;
}
.bw-mistakes-secondary-btn {
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: #edf1f5;
    color: #263548;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.q-cnt, .mistakes-q-cnt {
    --bw-warning: #F59E0B;
}
.q-cnt .bw-quiz-mode, .mistakes-q-cnt .bw-quiz-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--bw-primary-soft);
    color: var(--bw-primary);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
}
.mistakes-q-cnt .bw-quiz-mode {
    background: #FFF7ED;
    color: #C2410C;
}
.q-cnt .bw-quiz-progress-fill, .mistakes-q-cnt .bw-quiz-progress-fill {
    background: linear-gradient(90deg,#2563EB 0%,#60A5FA 100%);
}
.q-cnt .bw-quiz-question-kicker, .mistakes-q-cnt .bw-quiz-question-kicker {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--bw-primary-soft);
    color: var(--bw-primary);
    font-size: 10.5px;
    line-height: 1;
    font-weight: 900;
}
.q-cnt .q-qusn .bw-quiz-question-content>span:has(>table), .mistakes-q-cnt .q-qusn .bw-quiz-question-content>span:has(>table) {
    text-align: left;
}
.q-cnt .q-answ li:active, .mistakes-q-cnt .q-answ li:active {
    transform: scale(.985);
}
.q-cnt .q-answ li:hover, .mistakes-q-cnt .q-answ li:hover {
    border-color: #BFDBFE;
    background: #F8FBFF;
}
.q-cnt .q-answ li.is-correct, .mistakes-q-cnt .q-answ li.is-correct {
    background: var(--bw-success-soft) !important;
}
.q-cnt .q-answ li.is-wrong, .mistakes-q-cnt .q-answ li.is-wrong {
    background: var(--bw-danger-soft) !important;
}
@keyframes bwQuizShake {
0%, 100% {
    transform: translateX(0);
}
25% {
    transform: translateX(-4px);
}
75% {
    transform: translateX(4px);
}
}
@keyframes bwFeedbackIn {
from {
    opacity: 0;
    transform: translateY(5px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.q-cnt .bw-quiz-feedback.is-correct, .mistakes-q-cnt .bw-quiz-feedback.is-correct {
    background: var(--bw-success-soft);
}
.q-cnt .bw-quiz-feedback.is-wrong, .mistakes-q-cnt .bw-quiz-feedback.is-wrong {
    background: var(--bw-danger-soft);
}
.q-cnt .bw-quiz-feedback p span, .mistakes-q-cnt .bw-quiz-feedback p span {
    color: var(--bw-text);
    font-weight: 850;
}
.q-cnt .q-next-btn.is-ready, .mistakes-q-cnt .q-next-btn.is-ready {
    background: linear-gradient(135deg,#2563EB 0%,#3B82F6 100%);
}
.q-cnt .q-next-btn.is-ready:active, .mistakes-q-cnt .q-next-btn.is-ready:active {
    transform: scale(.985);
}
.q-cnt .q-nt-ans, .mistakes-q-cnt .q-nt-ans {
    display: block !important;
    position: fixed;
}
.bw-result-page {
    min-height: calc(100vh - 70px);
    padding-top: 4px;
    padding-bottom: 24px;
}
.bw-result-shell {
    min-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(37,99,235,.10);
    border-radius: 24px;
    background: radial-gradient(circle at 88% 5%,rgba(96,165,250,.12),transparent 30%),
    linear-gradient(180deg,#F9FCFF 0%,#F5F7FB 100%);
    box-shadow: 0 18px 48px rgba(15,23,42,.10);
}
.bw-result-topbar {
    padding: 13px 13px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bw-result-topbar>div span, .bw-result-topbar>div strong {
    display: block;
}
.bw-result-topbar>div span {
    color: #667085;
    font-size: 10.5px;
    font-weight: 800;
}
.bw-result-topbar>div strong {
    margin-top: 2px;
    color: #101828;
    font-size: 15px;
    font-weight: 950;
}
.bw-result-topbar>button {
    width: 36px;
    height: 36px;
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    color: #475467;
    font-size: 14px;
}
.bw-result-viewport {
    width: 100%;
    flex: 1;
    overflow: hidden;
    touch-action: pan-y;
}
.bw-result-track {
    height: 100%;
    display: flex;
    transition: transform .3s cubic-bezier(.22,.75,.28,1);
}
.bw-result-slide {
    width: 100%;
    min-width: 100%;
    min-height: 470px;
    padding: 14px 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.bw-result-slide h2 {
    margin-top: 8px;
    color: #101828;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -.6px;
    font-weight: 950;
}
.bw-result-slide>p {
    max-width: 330px;
    margin-top: 8px;
    color: #667085;
    font-size: 13px;
    line-height: 1.48;
    font-weight: 650;
}
.bw-result-kicker {
    margin-top: 12px;
    color: #2563EB;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .45px;
    text-transform: uppercase;
}
.bw-result-trophy {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37,99,235,.14);
    border-radius: 27px;
    background: linear-gradient(180deg,#FFFFFF 0%,#EFF6FF 100%);
    box-shadow: 0 16px 34px rgba(37,99,235,.16);
}
.bw-result-trophy span {
    font-size: 43px;
    filter: drop-shadow(0 7px 10px rgba(15,23,42,.12));
}
.bw-result-slide--hero.is-perfect .bw-result-trophy {
    background: linear-gradient(180deg,#FFFBEB 0%,#FEF3C7 100%);
    border-color: #FDE68A;
    box-shadow: 0 16px 34px rgba(245,158,11,.17);
}
.bw-result-slide--hero.is-great .bw-result-trophy {
    background: linear-gradient(180deg,#F5F3FF 0%,#EDE9FE 100%);
    border-color: #DDD6FE;
}
.bw-result-slide--hero.is-good .bw-result-trophy, .bw-result-slide--hero.is-practice .bw-result-trophy {
    background: linear-gradient(180deg,#EFF6FF 0%,#DBEAFE 100%);
    border-color: #BFDBFE;
}
.bw-result-confetti i {
    position: absolute;
    width: 7px;
    height: 14px;
    border-radius: 3px;
    background: #60A5FA;
    opacity: .75;
    animation: bwConfettiFloat 2.8s ease-in-out infinite;
}
.bw-result-confetti i:nth-child(1) {
    left: 12%;
    top: 15%;
    transform: rotate(15deg);
}
.bw-result-confetti i:nth-child(2) {
    left: 22%;
    top: 30%;
    background: #F59E0B;
    animation-delay: .3s;
}
.bw-result-confetti i:nth-child(3) {
    right: 13%;
    top: 18%;
    background: #22C55E;
    animation-delay: .6s;
}
.bw-result-confetti i:nth-child(4) {
    right: 24%;
    top: 34%;
    background: #A855F7;
    animation-delay: .9s;
}
.bw-result-confetti i:nth-child(5) {
    left: 10%;
    bottom: 26%;
    background: #EC4899;
    animation-delay: 1.2s;
}
.bw-result-confetti i:nth-child(6) {
    right: 10%;
    bottom: 24%;
    background: #F97316;
    animation-delay: 1.5s;
}
@keyframes bwConfettiFloat {
0%, 100% {
    transform: translateY(0) rotate(12deg);
    opacity: .45;
}
50% {
    transform: translateY(-8px) rotate(28deg);
    opacity: .9;
}
}
.bw-result-score-row {
    width: 100%;
    max-width: 340px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 132px minmax(0,1fr);
    align-items: stretch;
    gap: 10px;
}
.bw-result-ring {
    width: 132px;
    height: 132px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: conic-gradient(#2563EB 0 var(--score),#DDE8F7 var(--score) 360deg);
    box-shadow: 0 14px 30px rgba(37,99,235,.13);
}
.bw-result-ring>div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37,99,235,.08);
    border-radius: 50%;
    background: rgba(255,255,255,.96);
}
.bw-result-ring strong {
    color: #101828;
    font-size: 27px;
    line-height: 1;
    font-weight: 950;
}
.bw-result-ring span {
    margin-top: 4px;
    color: #667085;
    font-size: 10.5px;
    font-weight: 800;
}
.bw-result-main-stat {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border: 1px solid rgba(37,99,235,.10);
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    text-align: left;
    box-shadow: 0 9px 22px rgba(30,51,86,.06);
}
.bw-result-main-stat>span {
    color: #667085;
    font-size: 10.5px;
    font-weight: 800;
}
.bw-result-main-stat strong {
    margin-top: 7px;
    color: #101828;
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
}
.bw-result-main-stat strong small {
    color: #98A2B3;
    font-size: 15px;
}
.bw-result-main-stat em {
    margin-top: 10px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 900;
}
.bw-result-slide-icon {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #BFDBFE;
    border-radius: 21px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 27px;
    box-shadow: 0 12px 26px rgba(37,99,235,.12);
}
.bw-result-slide-icon.is-warning {
    border-color: #FED7AA;
    background: #FFF7ED;
    color: #EA580C;
    box-shadow: 0 12px 26px rgba(249,115,22,.12);
}
.bw-result-slide-icon.is-success {
    border-color: #BBF7D0;
    background: #F0FDF4;
    color: #16A34A;
    box-shadow: 0 12px 26px rgba(34,197,94,.12);
}
.bw-result-slide-icon.is-primary {
    border-color: #C7D2FE;
    background: #EEF2FF;
    color: #4F46E5;
}
.bw-result-stats-grid {
    width: 100%;
    max-width: 350px;
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}
.bw-result-stat {
    min-height: 112px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #E4E7EC;
    border-radius: 17px;
    background: rgba(255,255,255,.82);
}
.bw-result-stat i {
    font-size: 16px;
}
.bw-result-stat strong {
    margin-top: 8px;
    color: #101828;
    font-size: 21px;
    line-height: 1;
    font-weight: 950;
}
.bw-result-stat span {
    margin-top: 5px;
    color: #667085;
    font-size: 10.5px;
    font-weight: 800;
}
.bw-result-stat.is-correct i {
    color: #16a34a;
}
.bw-result-stat.is-wrong i {
    color: #7c3aed;
}
.bw-result-stat.is-time i {
    color: #2563EB;
}
.bw-result-level-card {
    width: 100%;
    max-width: 350px;
    margin-top: 10px;
    padding: 13px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 7px 12px;
    border: 1px solid #E4E7EC;
    border-radius: 17px;
    background: rgba(255,255,255,.82);
    text-align: left;
}
.bw-result-level-card div strong, .bw-result-level-card div span {
    display: block;
}
.bw-result-level-card div strong {
    color: #101828;
    font-size: 12.5px;
    font-weight: 900;
}
.bw-result-level-card div span {
    margin-top: 3px;
    color: #667085;
    font-size: 10.5px;
    font-weight: 700;
}
.bw-result-level-card>b {
    color: #2563EB;
    font-size: 15px;
    font-weight: 950;
}
.bw-result-level-track {
    grid-column: 1/-1;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #EAF0F8;
}
.bw-result-level-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#2563EB 0%,#60A5FA 100%);
}
.bw-result-premium-card, .bw-result-achievement {
    width: 100%;
    max-width: 350px;
    margin-top: 20px;
    padding: 13px;
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    border: 1px solid #FDE68A;
    border-radius: 18px;
    background: linear-gradient(135deg,#FFFBEB 0%,#FFF7D6 100%);
    text-align: left;
}
.bw-result-premium-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #FEF3C7;
    color: #D97706;
    font-size: 20px;
}
.bw-result-premium-card strong, .bw-result-premium-card span, .bw-result-achievement strong, .bw-result-achievement span {
    display: block;
}
.bw-result-premium-card strong, .bw-result-achievement strong {
    color: #101828;
    font-size: 12.5px;
    font-weight: 900;
}
.bw-result-premium-card span, .bw-result-achievement span {
    margin-top: 3px;
    color: #667085;
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 700;
}
.bw-result-premium-card button {
    border: none;
    border-radius: 12px;
    padding: 10px 11px;
    background: #F59E0B;
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
}
.bw-result-achievement {
    grid-template-columns: 46px minmax(0,1fr);
    border-color: #BBF7D0;
    background: linear-gradient(135deg,#F0FDF4 0%,#ECFDF5 100%);
}
.bw-result-achievement>i {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #DCFCE7;
    color: #16A34A;
    font-size: 21px;
}
.bw-result-next-actions {
    width: 100%;
    max-width: 350px;
    margin-top: 20px;
    display: grid;
    gap: 9px;
}
.bw-result-next-actions button {
    min-height: 52px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 900;
}
.bw-result-action-primary {
    border: none;
    background: linear-gradient(135deg,#2563EB 0%,#3B82F6 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(37,99,235,.20);
}
.bw-result-action-secondary {
    border: 1px solid #D0D5DD;
    background: rgba(255,255,255,.84);
    color: #344054;
}
.bw-result-dots {
    min-height: 24px;
    padding: 4px 12px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.bw-result-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #CBD5E1;
    transition: .2s ease;
}
.bw-result-dots button.active {
    width: 22px;
    background: #2563EB;
}
.bw-result-controls {
    padding: 8px 13px 13px;
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    gap: 9px;
}
.bw-result-prev, .bw-result-next {
    height: 50px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 900;
}
.bw-result-prev {
    border: 1px solid #D0D5DD;
    background: rgba(255,255,255,.84);
    color: #344054;
}
.bw-result-prev:disabled {
    opacity: .38;
}
.bw-result-next {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(135deg,#2563EB 0%,#3B82F6 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(37,99,235,.20);
}
.bw-result-next.is-finish {
    background: linear-gradient(135deg,#16A34A 0%,#22C55E 100%);
    box-shadow: 0 12px 24px rgba(34,197,94,.18);
}
@media (max-width:380px) {
.q-cnt .q-qusn, .mistakes-q-cnt .q-qusn {
    min-height: 160px;
    padding: 13px;
}
.q-cnt .bw-quiz-question-content, .mistakes-q-cnt .bw-quiz-question-content {
    min-height: 115px;
}
.q-cnt .q-answ li, .mistakes-q-cnt .q-answ li {
    min-height: 50px;
    grid-template-columns: 34px minmax(0,1fr) 26px;
    padding: 8px;
}
.q-cnt .bw-answer-key, .mistakes-q-cnt .bw-answer-key {
    width: 34px;
    height: 34px;
}
.bw-result-slide {
    min-height: 430px;
    padding-left: 14px;
    padding-right: 14px;
}
.bw-result-slide h2 {
    font-size: 23px;
}
.bw-result-score-row {
    grid-template-columns: 118px minmax(0,1fr);
}
.bw-result-ring {
    width: 118px;
    height: 118px;
}
.bw-result-stat {
    min-height: 102px;
}
}
.q-cnt, .mistakes-q-cnt {
    width: 100%;
    height: calc(100vh - 55px);
    min-height: 0;
    margin-bottom: -55px;
    overflow: hidden;
    background: #f5f5f5;
    --bw-primary: #2563EB;
    --bw-primary-dark: #1D4ED8;
    --bw-primary-soft: #EFF6FF;
    --bw-text: #101828;
    --bw-muted: #667085;
    --bw-line: #E4E7EC;
    --bw-card: #FFFFFF;
    --bw-success: #16A34A;
    --bw-success-soft: #F0FDF4;
    --bw-danger: #DC2626;
    --bw-danger-soft: #FEF2F2;
}
.q-cnt .bw-quiz-shell, .mistakes-q-cnt .bw-quiz-shell {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 5px;
    padding-bottom: 0;
    overflow: hidden;
}
.q-cnt .q-pst, .mistakes-q-cnt .q-pst {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-bottom: 68px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
}
.q-cnt .bw-quiz-session-card, .mistakes-q-cnt .bw-quiz-session-card {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 10px 12px;
    border: 1px solid rgba(37, 99, 235, 0.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}
.q-cnt .bw-quiz-progress-copy, .mistakes-q-cnt .bw-quiz-progress-copy {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 12px;
}
.q-cnt .bw-quiz-progress-copy strong, .mistakes-q-cnt .bw-quiz-progress-copy strong {
    color: #101828;
    font-size: 14px;
    font-weight: 900;
}
.q-cnt .bw-quiz-progress-copy>span:last-child, .mistakes-q-cnt .bw-quiz-progress-copy>span:last-child {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.q-cnt .bw-quiz-timer, .mistakes-q-cnt .bw-quiz-timer {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 58px;
    padding: 7px 10px;
    border: 1px solid #E4E7EC;
    border-radius: 999px;
    background: #F8FAFC;
    color: #344054;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.q-cnt .bw-quiz-progress, .mistakes-q-cnt .bw-quiz-progress {
    height: 6px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #EAF0F8;
}
.q-cnt .bw-quiz-progress-fill, .mistakes-q-cnt .bw-quiz-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563EB 0%, #60A5FA 100%);
    transition: width 0.28s ease;
}
.q-cnt .bw-quiz-slide, .mistakes-q-cnt .bw-quiz-slide {
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin-top: 8px;
    overflow: hidden;
}
.q-cnt .bw-quiz-slide.transformScaleYes, .mistakes-q-cnt .bw-quiz-slide.transformScaleYes {
    position: relative !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    transform: none !important;
    transition: none !important;
    overflow: hidden;
}
.q-cnt .bw-quiz-slide.transformScaleNot, .mistakes-q-cnt .bw-quiz-slide.transformScaleNot {
    display: none !important;
}
.q-cnt .q-qusn, .mistakes-q-cnt .q-qusn {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 135px;
    max-height: 175px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 160px;
    flex: 0 0 160px;
    margin: 0;
    padding: 12px 13px 9px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E4E7EC;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    text-align: center;
}
.q-cnt .bw-quiz-question-content, .mistakes-q-cnt .bw-quiz-question-content {
    width: 100%;
    min-width: 0;
    min-height: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.q-cnt .q-qusn .bw-quiz-question-content>span, .mistakes-q-cnt .q-qusn .bw-quiz-question-content>span {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    color: #101828;
    font-size: 15px;
    line-height: 1.46;
    font-weight: 700;
    word-break: break-word;
    overflow-wrap: break-word;
}
.q-cnt .q-answ, .mistakes-q-cnt .q-answ {
    width: 100%;
    min-width: 0;
    min-height: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-top: 8px;
    padding-bottom: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.q-cnt .q-answ::-webkit-scrollbar, .mistakes-q-cnt .q-answ::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.q-cnt .q-answ ul, .mistakes-q-cnt .q-answ ul {
    width: 100%;
    margin: 0;
    padding: 0 0 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 7px;
}
.q-cnt .q-answ li, .mistakes-q-cnt .q-answ li {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 7px 9px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 34px 9px 1fr 9px 26px;
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    gap: 9px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    background: #fff;
    color: #101828;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.045);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.q-cnt .bw-answer-key, .mistakes-q-cnt .bw-answer-key {
    width: 34px;
    height: 34px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    background: #F8FAFC;
    color: #64748B;
    font-size: 11px;
    font-weight: 900;
}
.q-cnt .bw-answer-copy, .mistakes-q-cnt .bw-answer-copy {
    min-width: 0;
    color: inherit;
    font-size: 13.5px;
    line-height: 1.34;
    font-weight: 700;
    word-break: break-word;
    overflow-wrap: break-word;
}
.q-cnt .bw-answer-state, .mistakes-q-cnt .bw-answer-state {
    width: 26px;
    height: 26px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 50%;
    color: transparent;
    font-size: 11px;
}
.q-cnt .q-answ li.is-correct, .mistakes-q-cnt .q-answ li.is-correct {
    border-color: #86EFAC !important;
    background: #F0FDF4 !important;
    color: #166534 !important;
}
.q-cnt .q-answ li.is-correct .bw-answer-key, .mistakes-q-cnt .q-answ li.is-correct .bw-answer-key {
    border-color: #86EFAC;
    background: #DCFCE7;
    color: #15803D;
}
.q-cnt .q-answ li.is-correct .bw-answer-state, .mistakes-q-cnt .q-answ li.is-correct .bw-answer-state {
    background: #22C55E;
    color: #fff;
}
.q-cnt .q-answ li.is-wrong, .mistakes-q-cnt .q-answ li.is-wrong {
    border-color: #FCA5A5 !important;
    background: #FEF2F2 !important;
    color: #991B1B !important;
    animation: bwQuizShake 0.35s ease;
}
.q-cnt .q-answ li.is-wrong .bw-answer-key, .mistakes-q-cnt .q-answ li.is-wrong .bw-answer-key {
    border-color: #FCA5A5;
    background: #FEE2E2;
    color: #B91C1C;
}
.q-cnt .q-answ li.is-wrong .bw-answer-state, .mistakes-q-cnt .q-answ li.is-wrong .bw-answer-state {
    background: #EF4444;
    color: #fff;
}
.q-cnt .bw-quiz-feedback, .mistakes-q-cnt .bw-quiz-feedback {
    display: none;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 54px;
    margin-top: 8px;
    padding: 9px 11px;
    grid-template-columns: 34px minmax(0, 1fr);
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 9px;
    border: 1px solid #E4E7EC;
    border-radius: 15px;
    overflow: hidden;
}
.q-cnt .bw-quiz-feedback.show, .mistakes-q-cnt .bw-quiz-feedback.show {
    display: -ms-grid;
    display: grid;
    animation: bwFeedbackIn 0.2s ease;
}
.q-cnt .bw-quiz-feedback.is-correct, .mistakes-q-cnt .bw-quiz-feedback.is-correct {
    border-color: #BBF7D0;
    background: #F0FDF4;
}
.q-cnt .bw-quiz-feedback.is-wrong, .mistakes-q-cnt .bw-quiz-feedback.is-wrong {
    border-color: #FECACA;
    background: #FEF2F2;
}
.q-cnt .bw-feedback-icon, .mistakes-q-cnt .bw-feedback-icon {
    width: 34px;
    height: 34px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 11px;
    background: #fff;
    font-size: 13px;
}
.q-cnt .bw-quiz-feedback.is-correct .bw-feedback-icon, .mistakes-q-cnt .bw-quiz-feedback.is-correct .bw-feedback-icon {
    color: #16A34A;
}
.q-cnt .bw-quiz-feedback.is-wrong .bw-feedback-icon, .mistakes-q-cnt .bw-quiz-feedback.is-wrong .bw-feedback-icon {
    color: #DC2626;
}
.q-cnt .bw-quiz-feedback strong, .mistakes-q-cnt .bw-quiz-feedback strong {
    display: block;
    color: #101828;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
}
.q-cnt .bw-quiz-feedback p, .mistakes-q-cnt .bw-quiz-feedback p {
    margin-top: 2px;
    color: #667085;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 600;
    word-break: break-word;
}
.q-cnt .bw-quiz-bottom, .mistakes-q-cnt .bw-quiz-bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 20;
    width: 100% !important;
    height: 68px;
    margin: 0 !important;
    padding: 8px 0 !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #f5f5f5 !important;
    border-top: 1px solid #E4E7EC;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.05);
    transform: none !important;
}
.q-cnt .q-next-btn, .mistakes-q-cnt .q-next-btn {
    height: 52px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 16px;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 16px;
    background: #CBD5E1;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: none;
}
.q-cnt .q-next-btn.is-ready, .mistakes-q-cnt .q-next-btn.is-ready {
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}
.q-cnt .q-next-btn:disabled, .mistakes-q-cnt .q-next-btn:disabled {
    cursor: default;
    opacity: 1;
}
.q-cnt .q-nt-ans, .mistakes-q-cnt .q-nt-ans {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 76px !important;
    z-index: 30;
    width: auto !important;
    max-width: none !important;
    padding: 12px 14px;
    border-radius: 14px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.q-cnt .q-nt-ans.show, .mistakes-q-cnt .q-nt-ans.show {
    opacity: 1;
    transform: translateY(0) !important;
}
.bw-question-more {
    display: none;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    margin-top: 6px;
    padding: 7px 10px;
    border: 0;
    border-radius: 11px;
    background: #EEF4FB;
    color: #336699;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.q-qusn.has-question-overflow .bw-question-more {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.bw-question-more[hidden] {
    display: none !important;
}
.bw-question-more i {
    font-size: 10px;
}
html.bw-question-modal-open {
    overflow: hidden !important;
}
.bw-question-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200000;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.bw-question-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.bw-question-modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, 0.52);
}
.bw-question-modal-sheet {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 600px;
    max-height: 82vh;
    padding: 7px 14px 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -18px 60px rgba(15, 23, 42, 0.30);
    transform: translateY(100%);
    transition: transform 0.24s ease;
}
.bw-question-modal.is-open .bw-question-modal-sheet {
    transform: translateY(0);
}
.bw-question-modal-handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 7px;
    border-radius: 999px;
    background: #D8DEE7;
}
.bw-question-modal-head {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 54px;
    padding: 4px 0 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #E8EDF5;
}
.bw-question-modal-head div span, .bw-question-modal-head div strong {
    display: block;
}
.bw-question-modal-head div span {
    color: #7B8494;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.bw-question-modal-head div strong {
    margin-top: 3px;
    color: #14171F;
    font-size: 17px;
    font-weight: 900;
}
.bw-question-modal-close {
    width: 38px;
    height: 38px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    border: 0;
    border-radius: 12px;
    background: #F1F5F9;
    color: #14171F;
    font-size: 15px;
}
.bw-question-modal-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 120px;
    padding: 17px 2px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: #14171F;
    font-size: 16px;
    line-height: 1.62;
    font-weight: 600;
    word-break: break-word;
    user-select: text;
}
.bw-question-modal-content>span {
    display: block;
    width: 100%;
}
.bw-question-modal-content table {
    max-width: 100%;
    overflow-x: auto;
}
.bw-question-modal-done {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: #336699;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
}
@media (max-height: 680px) {
.q-cnt .q-qusn, .mistakes-q-cnt .q-qusn {
    min-height: 115px;
    max-height: 140px;
    -webkit-flex-basis: 125px;
    flex-basis: 125px;
    padding: 10px 11px 8px;
}
.q-cnt .q-answ li, .mistakes-q-cnt .q-answ li {
    min-height: 46px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.q-cnt .bw-answer-copy, .mistakes-q-cnt .bw-answer-copy {
    font-size: 12.5px;
}
.q-cnt .bw-quiz-feedback, .mistakes-q-cnt .bw-quiz-feedback {
    min-height: 48px;
    padding-top: 7px;
    padding-bottom: 7px;
}
.q-cnt .bw-quiz-feedback p, .mistakes-q-cnt .bw-quiz-feedback p {
    display: none;
}
.bw-question-modal-sheet {
    max-height: 88vh;
}
}
body.bw-message-actions-open {
    overflow: hidden;
}
.bw-group-pinned-message {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
    padding: 7px;
    border: 1px solid #d8e5f1;
    border-radius: 15px;
    background: linear-gradient(135deg,#f2f7fc,#fff);
    box-shadow: 0 5px 14px rgba(51,102,153,.07);
}
.bw-group-pinned-open {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.bw-group-pinned-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 11px;
    background: #336699;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.bw-group-pinned-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.bw-group-pinned-copy small {
    color: #336699;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.bw-group-pinned-copy b {
    margin-top: 1px;
    color: #26364a;
    font-size: 10px;
}
.bw-group-pinned-copy>span {
    margin-top: 1px;
    overflow: hidden;
    color: #687587;
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bw-group-pinned-open>i {
    color: #8b99a9;
    font-size: 10px;
}
.bw-group-pinned-remove {
    width: 32px;
    min-width: 32px;
    border: 0;
    border-radius: 10px;
    background: #eaf1f8;
    color: #58708a;
    cursor: pointer;
}
.bw-group-message {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-group-message.is-pinned .bw-group-message-bubble {
    box-shadow: 0 0 0 2px rgba(51,102,153,.17), 0 5px 14px rgba(15,23,42,.06);
}
.bw-group-message.is-highlighted .bw-group-message-bubble {
    animation: bwGroupMessageHighlight 1.25s ease;
}
@keyframes bwGroupMessageHighlight {
0%, 100% {
    transform: scale(1);
}
35% {
    transform: scale(1.035);
    box-shadow: 0 0 0 4px rgba(51,102,153,.22);
}
}
.bw-group-reply-quote {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 7px;
    padding: 7px 8px;
    border: 0;
    border-left: 3px solid #336699;
    border-radius: 8px;
    background: #f1f5f9;
    text-align: left;
    cursor: pointer;
}
.bw-group-reply-quote b {
    color: #336699;
    font-size: 9px;
}
.bw-group-reply-quote span {
    max-width: 100%;
    overflow: hidden;
    color: #667085;
    font-size: 9px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bw-group-message.is-mine .bw-group-reply-quote {
    border-left-color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.14);
}
.bw-group-message.is-mine .bw-group-reply-quote b, .bw-group-message.is-mine .bw-group-reply-quote span {
    color: #fff;
}
.bw-group-message-form {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
}
.bw-group-message-compose-row {
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.bw-group-message-compose-row textarea {
    flex: 1;
}
.bw-group-reply-preview {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 11px;
    background: #f1f5f9;
}
.bw-group-reply-preview-icon {
    width: 29px;
    height: 29px;
    min-width: 29px;
    border-radius: 9px;
    background: #e2ebf4;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.bw-group-reply-preview-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.bw-group-reply-preview-copy b {
    color: #336699;
    font-size: 10px;
}
.bw-group-reply-preview-copy small {
    margin-top: 1px;
    overflow: hidden;
    color: #687587;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bw-group-message-form .bw-group-reply-preview button {
    width: 29px;
    height: 29px;
    min-width: 29px;
    border-radius: 9px;
    background: transparent;
    color: #7b8795;
}
.bw-group-message-actions-overlay {
    position: fixed;
    inset: 0;
    z-index: 100500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
    background: rgba(15,23,42,.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.bw-group-message-actions-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}
.bw-group-message-actions-sheet {
    width: 100%;
    max-width: 520px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15,23,42,.25);
    transform: translateY(24px);
    transition: transform .2s ease;
}
.bw-group-message-actions-overlay.is-active .bw-group-message-actions-sheet {
    transform: translateY(0);
}
.bw-group-message-actions-handle {
    width: 38px;
    height: 4px;
    margin: 2px auto 9px;
    border-radius: 999px;
    background: #d7dde5;
}
.bw-group-message-actions-preview {
    margin-bottom: 7px;
    padding: 10px 11px;
    border-radius: 13px;
    background: #f5f7fa;
}
.bw-group-message-actions-preview b {
    display: block;
    color: #336699;
    font-size: 10px;
}
.bw-group-message-actions-preview p {
    margin-top: 3px;
    max-height: 38px;
    overflow: hidden;
    color: #536174;
    font-size: 11px;
    line-height: 1.4;
}
.bw-group-message-actions-sheet>button {
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #263447;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.bw-group-message-actions-sheet>button:hover {
    background: #f3f6f9;
}
.bw-group-message-actions-sheet>button i {
    width: 27px;
    color: #336699;
    text-align: center;
    font-size: 15px;
}
.bw-group-message-actions-sheet>button.is-cancel {
    justify-content: center;
    margin-top: 4px;
    background: #f2f4f7;
    color: #667085;
}
body.bw-poll-modal-open {
    overflow: hidden;
}
.bw-group-poll-open-btn {
    width: 43px;
    height: 43px;
    min-width: 43px;
    border: 0;
    border-radius: 13px;
    background: #edf4fb;
    color: #336699;
    font-size: 16px;
    cursor: pointer;
}
.bw-group-poll-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 7px 0;
}
.bw-group-poll-message:not(.is-mine) {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 7px;
    align-items: end;
}
.bw-group-poll-message.is-mine {
    align-items: flex-end;
}
.bw-group-poll-message:not(.is-mine)>.bw-group-message-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.bw-group-poll-message>.bw-group-message-author {
    grid-column: 2;
    grid-row: 1;
    margin: 0 8px 4px;
}
.bw-group-poll-card {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    width: min(92%, 390px);
    padding: 13px;
    border: 1px solid #dfe7ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15,23,42,.07);
}
.bw-group-poll-message.is-mine .bw-group-poll-card {
    border-color: #cfe0ef;
    background: #f7fbff;
}
.bw-group-poll-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.bw-group-poll-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #336699;
    color: #fff;
    font-size: 15px;
}
.bw-group-poll-head>div {
    flex: 1;
    min-width: 0;
}
.bw-group-poll-head small {
    display: block;
    color: #336699;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.bw-group-poll-head h4 {
    margin-top: 3px;
    color: #182230;
    font-size: 14px;
    line-height: 1.35;
    word-break: break-word;
}
.bw-group-poll-closed {
    flex-shrink: 0;
    padding: 4px 7px;
    border-radius: 8px;
    background: #eef0f3;
    color: #77808d;
    font-size: 9px;
    font-weight: 900;
}
.bw-group-poll-options {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
}
.bw-group-poll-option {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 45px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid #dfe6ee;
    border-radius: 13px;
    background: #fff;
    color: #263447;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}
.bw-group-poll-option-bar {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #edf5fc;
    transition: width .25s ease;
}
.bw-group-poll-option.is-selected {
    border-color: #336699;
    box-shadow: 0 0 0 1px rgba(51,102,153,.08);
}
.bw-group-poll-radio {
    width: 23px;
    height: 23px;
    min-width: 23px;
    border: 2px solid #c9d3df;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 9px;
    background: #fff;
}
.bw-group-poll-option.is-selected .bw-group-poll-radio {
    border-color: #336699;
    background: #336699;
    color: #fff;
}
.bw-group-poll-option-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    word-break: break-word;
}
.bw-group-poll-option-result {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.bw-group-poll-option-result b {
    color: #336699;
    font-size: 11px;
}
.bw-group-poll-option-result small {
    color: #8994a3;
    font-size: 8px;
}
.bw-group-poll-option:disabled {
    cursor: default;
    opacity: 1;
}
.bw-group-poll-card.is-loading .bw-group-poll-option {
    opacity: .65;
}
.bw-group-poll-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #8792a2;
    font-size: 9px;
}
.bw-group-poll-footer time {
    margin-left: auto;
}
.bw-group-poll-close {
    margin-left: 3px;
    padding: 7px 9px;
    border: 0;
    border-radius: 9px;
    background: #edf4fb;
    color: #336699;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}
.bw-group-poll-modal {
    position: fixed;
    inset: 0;
    z-index: 100600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.bw-group-poll-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.bw-group-poll-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.48);
}
.bw-group-poll-sheet {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 7px 14px calc(15px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -18px 60px rgba(15,23,42,.28);
    transform: translateY(100%);
    transition: transform .24s ease;
    -webkit-overflow-scrolling: touch;
}
.bw-group-poll-modal.is-open .bw-group-poll-sheet {
    transform: translateY(0);
}
.bw-group-poll-sheet-handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: #d8dee7;
}
.bw-group-poll-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 12px;
    border-bottom: 1px solid #e8edf5;
}
.bw-group-poll-sheet-head span {
    display: block;
    color: #7b8494;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}
.bw-group-poll-sheet-head h4 {
    margin-top: 3px;
    color: #182230;
    font-size: 17px;
}
.bw-group-poll-modal-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    color: #182230;
}
#bwGroupPollForm {
    padding-top: 14px;
}
.bw-group-poll-field {
    display: block;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #fff;
}
.bw-group-poll-field>span, .bw-group-poll-options-title b {
    display: block;
    color: #27364a;
    font-size: 11px;
    font-weight: 900;
}
.bw-group-poll-field textarea {
    width: 100%;
    margin-top: 7px;
    border: 0;
    outline: 0;
    resize: none;
    color: #182230;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}
.bw-group-poll-field small {
    display: block;
    margin-top: 5px;
    color: #98a2b3;
    font-size: 9px;
}
.bw-group-poll-options-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 2px 8px;
}
.bw-group-poll-options-title small {
    color: #98a2b3;
    font-size: 9px;
}
.bw-group-poll-create-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bw-group-poll-create-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 7px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #fff;
}
.bw-group-poll-create-option>span {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf4fb;
    color: #336699;
    font-size: 10px;
    font-weight: 900;
}
.bw-group-poll-create-option input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #182230;
    font-family: inherit;
    font-size: 13px;
}
.bw-group-poll-option-remove {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: 0;
    border-radius: 9px;
    background: #f4f6f8;
    color: #8a94a2;
}
.bw-group-poll-add-option {
    width: 100%;
    min-height: 43px;
    margin-top: 9px;
    border: 1px dashed #b9c9d9;
    border-radius: 13px;
    background: #f8fbfe;
    color: #336699;
    font-size: 11px;
    font-weight: 900;
}
.bw-group-poll-error {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 11px;
    background: #fff0f0;
    color: #c33b3b;
    font-size: 10px;
    font-weight: 800;
}
.bw-group-poll-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 14px;
    background: #336699;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}
.bw-community-tab {
    position: relative;
}
.bw-community-unread-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(239, 68, 68, .24);
}
.bw-group-card.has-unread {
    border-color: #8eb5d8;
    box-shadow: 0 8px 22px rgba(51, 102, 153, .12);
}
.bw-group-card-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    flex-shrink: 0;
}
.bw-group-unread-badge {
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #336699;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.bw-group-unread-badge i {
    font-size: 9px;
}
.bw-group-card.has-unread .bw-group-open-btn {
    background: #336699;
    color: #fff;
}
.bw-group-new-message-preview b {
    color: #336699;
    font-weight: 900;
}
@media (max-width: 480px) {
.bw-community-unread-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    line-height: 18px;
    font-size: 9px;
}
.bw-group-card-topline {
    gap: 6px;
}
.bw-group-card-badges {
    max-width: 48%;
}
.bw-group-unread-badge {
    min-height: 22px;
    padding: 4px 7px;
    font-size: 9px;
}
}
.q-cnt .bw-quiz-bottom, .mistakes-q-cnt .bw-quiz-bottom {
    gap: 8px;
}
.q-cnt .q-next-btn, .mistakes-q-cnt .q-next-btn {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}
.q-cnt .bw-explain-btn, .mistakes-q-cnt .bw-explain-btn {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 52px;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid #F5C451;
    border-radius: 16px;
    background: linear-gradient(135deg, #FFF8DB 0%, #FFE7A0 100%);
    color: #9A6700;
    box-shadow: 0 10px 22px rgba(245, 158, 11, .18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.q-cnt .bw-explain-btn[hidden], .mistakes-q-cnt .bw-explain-btn[hidden] {
    display: none !important;
}
.q-cnt .bw-explain-btn.is-ready, .mistakes-q-cnt .bw-explain-btn.is-ready {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    animation: bwExplainButtonIn .2s ease;
}
.q-cnt .bw-explain-btn:active, .mistakes-q-cnt .bw-explain-btn:active {
    transform: scale(.96);
}
.q-cnt .bw-explain-btn:disabled, .mistakes-q-cnt .bw-explain-btn:disabled {
    cursor: default;
}
.bw-explain-symbol {
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
}
.bw-explain-crown {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    background: #F59E0B;
    color: #fff;
    font-size: 8px;
    box-shadow: 0 4px 10px rgba(245, 158, 11, .28);
}
.bw-explain-btn.is-loading .bw-explain-symbol {
    color: transparent;
}
.bw-explain-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(154, 103, 0, .25);
    border-top-color: #9A6700;
    border-radius: 50%;
    animation: bwExplainSpin .7s linear infinite;
}
@keyframes bwExplainButtonIn {
from {
    opacity: 0;
    transform: scale(.85);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
@keyframes bwExplainSpin {
to {
    transform: rotate(360deg);
}
}
body.bw-explanation-modal-open {
    overflow: hidden;
}
.bw-explanation-overlay {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 12px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .18s ease, visibility .18s ease;
}
.bw-explanation-overlay.is-open {
    visibility: visible;
    opacity: 1;
}
.bw-explanation-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(3px);
}
.bw-explanation-sheet {
    position: relative;
    z-index: 1;
    width: min(100%, 600px);
    max-height: min(78vh, 620px);
    overflow: hidden;
    padding: 10px 14px 14px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .28);
    transform: translateY(28px);
    transition: transform .22s ease;
}
.bw-explanation-overlay.is-open .bw-explanation-sheet {
    transform: translateY(0);
}
.bw-explanation-handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: #D0D5DD;
}
.bw-explanation-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
}
.bw-explanation-head-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFF4CC, #FFE08A);
    color: #A16207;
    font-size: 17px;
}
.bw-explanation-head>div:nth-child(2) {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}
.bw-explanation-head span {
    display: block;
    color: #B7791F;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.bw-explanation-head h3 {
    margin-top: 2px;
    color: #101828;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 900;
}
.bw-explanation-close {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 0;
    border-radius: 13px;
    background: #F2F4F7;
    color: #475467;
    cursor: pointer;
}
.bw-explanation-content {
    max-height: calc(min(78vh, 620px) - 155px);
    margin-top: 14px;
    padding: 14px;
    overflow-y: auto;
    border: 1px solid #E4E7EC;
    border-radius: 17px;
    background: linear-gradient(180deg, #FFFCF2 0%, #FFFFFF 100%);
    color: #344054;
    font-size: 14px;
    line-height: 1.62;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
}
.bw-explanation-done {
    width: 100%;
    height: 50px;
    margin-top: 12px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .20);
}
@media (min-width: 700px) {
.bw-explanation-overlay {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.bw-explanation-sheet {
    transform: translateY(18px) scale(.98);
}
.bw-explanation-overlay.is-open .bw-explanation-sheet {
    transform: translateY(0) scale(1);
}
}
.bw-daily-card[hidden], .bw-card-details[hidden], .bw-card-opening-actions>button[hidden], .bw-daily-card-result[hidden], .bw-card-formula[hidden] {
    display: none !important;
}
.bw-daily-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: radial-gradient(circle at 92% 14%, rgba(255,255,255,.22), transparent 26%),
    radial-gradient(circle at 12% 115%, rgba(90,211,255,.22), transparent 44%),
    linear-gradient(135deg, #111a3d 0%, #273ea0 52%, #6b3fd3 100%);
    isolation: isolate;
}
.bw-daily-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    mask-image: linear-gradient(90deg, #000, transparent 76%);
}
.bw-daily-card::after {
    content: "";
    position: absolute;
    border: 28px solid rgba(255,255,255,.08);
    border-radius: 50%;
    z-index: -1;
}
.bw-daily-card-copy {
    flex: 1;
    min-width: 0;
}
.bw-daily-card h3 {
    margin: 0;
    letter-spacing: -.02em;
}
.bw-daily-card-description {
    margin: 7px 0 0;
    color: rgba(255,255,255,.76);
}
.bw-daily-card-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(7, 13, 35, .28);
    border: 1px solid rgba(255,255,255,.12);
    font-weight: 800;
    color: #fff;
}
.bw-daily-card-result {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.13);
}
.bw-daily-card-mini-image {
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(255,255,255,.12);
}
.bw-daily-card-mini-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.bw-daily-card-result-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.bw-daily-card-result-copy b, .bw-daily-card-result-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-daily-card-result-copy small {
    margin-top: 2px;
    color: rgba(255,255,255,.65);
    font-weight: 700;
}
.bw-daily-card-action {
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}
.bw-daily-card-action:disabled {
    cursor: default;
}
.bw-daily-card-pack {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 35%),
    linear-gradient(160deg, #f8d878, #d99a24 52%, #7e4c08);
    border: 2px solid rgba(255,255,255,.64);
    transition: transform .24s ease, box-shadow .24s ease;
}
.bw-daily-card-pack::before, .bw-daily-card-pack::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(88,49,3,.3);
}
.bw-daily-card-pack i {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6f430a;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.7);
}
.bw-daily-card-pack-shine {
    position: absolute;
    top: -35%;
    left: -65%;
    width: 42%;
    height: 180%;
    transform: rotate(22deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
}
.bw-daily-card.is-ready .bw-daily-card-pack {
    animation: bwDailyPackFloat 2.8s ease-in-out infinite;
}
.bw-daily-card.is-ready .bw-daily-card-pack-shine {
    animation: bwDailyPackShine 2.6s ease-in-out infinite;
}
.bw-daily-card-action:not(:disabled):hover .bw-daily-card-pack {
    transform: rotate(1deg) translateY(-4px) scale(1.03);
    box-shadow: 0 18px 30px rgba(0,0,0,.3), inset 0 0 0 3px rgba(96,55,4,.24);
}
.bw-daily-card.is-opened .bw-daily-card-pack {
    filter: saturate(.72);
    transform: rotate(0) scale(.92);
}
.bw-daily-card-action-label {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #293d91;
    font-weight: 900;
}
@keyframes bwDailyPackFloat {
0%, 100% {
    transform: rotate(5deg) translateY(0);
}
50% {
    transform: rotate(2deg) translateY(-7px);
}
}
@keyframes bwDailyPackShine {
0%, 42% {
    left: -65%;
    opacity: 0;
}
55% {
    opacity: 1;
}
75%, 100% {
    left: 130%;
    opacity: 0;
}
}
body.bw-daily-card-modal-open {
    overflow: hidden;
}
.bw-card-opening-modal {
    display: none;
}
.bw-card-opening-modal.is-open {
    display: flex;
}
.bw-card-opening-backdrop {
    position: absolute;
    border: 0;
    background: radial-gradient(circle at 50% 30%, rgba(70,94,220,.28), transparent 42%),
    rgba(3, 7, 20, .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.bw-card-opening-dialog {
    --rarity-a: #aeb9c8;
    --rarity-b: #eef5ff;
    --rarity-glow: rgba(207,221,239,.34);
    position: relative;
    padding: 17px 16px 16px;
    color: #fff;
    background: radial-gradient(circle at 50% 20%, rgba(74,92,190,.24), transparent 36%),
    linear-gradient(180deg, #121936, #080d20 68%, #070a15);
    scrollbar-width: none;
}
.bw-card-opening-dialog::-webkit-scrollbar {
    display: none;
}
.bw-card-opening-close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: #fff;
    cursor: pointer;
}
.bw-card-opening-topline {
    padding-right: 45px;
}
.bw-card-opening-topline span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    color: #9eace5;
}
.bw-card-opening-topline b {
    font-size: 10px;
    color: rgba(255,255,255,.65);
}
.bw-card-opening-stage {
    margin-top: 2px;
    perspective: 1000px;
}
.bw-card-opening-glow {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--rarity-glow), transparent 68%);
    transition: .55s ease;
}
.bw-card-opening-flash {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(255,255,255,.98), rgba(255,255,255,.32) 28%, transparent 67%);
}
.bw-card-opening-modal.is-flashing .bw-card-opening-flash {
    animation: bwDailyFlash .75s ease-out forwards;
}
@keyframes bwDailyFlash {
0% {
    opacity: 0;
    transform: scale(.6);
}
18% {
    opacity: 1;
}
100% {
    opacity: 0;
    transform: scale(1.35);
}
}
.bw-card-opening-particles {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}
.bw-card-opening-particles i {
    position: absolute;
    left: 50%;
    top: 52%;
    box-shadow: 0 0 12px var(--rarity-a);
}
.bw-card-opening-modal.is-revealed .bw-card-opening-particles i {
    animation: bwDailyParticle 1.15s ease-out forwards;
}
.bw-card-opening-particles i:nth-child(1) {
    --x: -125px;
    --y: -135px;
    animation-delay: .02s !important;
}
.bw-card-opening-particles i:nth-child(2) {
    --x: 118px;
    --y: -112px;
    animation-delay: .08s !important;
}
.bw-card-opening-particles i:nth-child(3) {
    --x: -142px;
    --y: 28px;
    animation-delay: .14s !important;
}
.bw-card-opening-particles i:nth-child(4) {
    --x: 138px;
    --y: 48px;
    animation-delay: .04s !important;
}
.bw-card-opening-particles i:nth-child(5) {
    --x: -92px;
    --y: 145px;
    animation-delay: .18s !important;
}
.bw-card-opening-particles i:nth-child(6) {
    --x: 96px;
    --y: 151px;
    animation-delay: .11s !important;
}
.bw-card-opening-particles i:nth-child(7) {
    --x: -25px;
    --y: -164px;
    animation-delay: .2s !important;
}
.bw-card-opening-particles i:nth-child(8) {
    --x: 34px;
    --y: 164px;
    animation-delay: .06s !important;
}
@keyframes bwDailyParticle {
0% {
    transform: translate(0,0) scale(.2) rotate(0);
    opacity: 0;
}
18% {
    opacity: 1;
}
100% {
    transform: translate(var(--x),var(--y)) scale(1.1) rotate(210deg);
    opacity: 0;
}
}
.bw-card-pack-large {
    position: relative;
    z-index: 3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, rgba(255,255,255,.32), transparent 30%),
    radial-gradient(circle at 50% 42%, rgba(255,241,177,.5), transparent 28%),
    linear-gradient(160deg, #f0cb61, #c88017 60%, #5a3307);
    border: 3px solid rgba(255,255,255,.68);
    transform: rotate(-3deg);
    transition: opacity .42s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .42s ease;
    animation: bwLargePackIdle 2.4s ease-in-out infinite;
}
.bw-card-pack-large::before, .bw-card-pack-large::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    height: 9px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(78,42,3,.48) 0 5px, rgba(255,255,255,.18) 5px 10px);
}
.bw-card-pack-large::before {
    top: 12px;
}
.bw-card-pack-large::after {
    bottom: 12px;
}
.bw-card-pack-large-top {
    position: absolute;
    left: -5%;
    right: -5%;
    top: -2px;
    height: 34px;
    transform-origin: top center;
    background: linear-gradient(#8c520a, #d89b2d);
    border-bottom: 2px solid rgba(255,255,255,.28);
    transition: transform .46s ease, opacity .35s ease;
}
.bw-card-pack-large-logo {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d4108;
    background: rgba(255,255,255,.65);
    border: 2px solid rgba(255,255,255,.76);
    font-weight: 1000;
    letter-spacing: -.06em;
}
.bw-card-pack-large-text {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .13em;
    color: #5d3505;
}
.bw-card-pack-large-line {
    width: 78px;
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(92,51,4,.36);
}
@keyframes bwLargePackIdle {
0%, 100% {
    transform: rotate(-3deg) translateY(0);
}
50% {
    transform: rotate(2deg) translateY(-8px);
}
}
.bw-card-opening-modal.is-pack-open .bw-card-pack-large-top {
    transform: translateY(-26px) rotateX(112deg);
    opacity: 0;
}
.bw-card-opening-modal.is-revealed .bw-card-pack-large {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(80px) scale(.68) rotate(7deg);
    animation: none;
}
@keyframes bwPackShake {
0%, 100% {
    transform: translateX(0) rotate(-2deg);
}
25% {
    transform: translateX(-5px) rotate(-4deg);
}
50% {
    transform: translateX(4px) rotate(2deg);
}
75% {
    transform: translateX(-3px) rotate(-1deg);
}
}
.bw-reward-card {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    color: #101526;
    background: linear-gradient(145deg, var(--rarity-b), #fff 42%, var(--rarity-a));
    border: 3px solid var(--rarity-b);
    box-shadow: 0 26px 55px rgba(0,0,0,.48),
    0 0 34px var(--rarity-glow),
    inset 0 0 0 2px rgba(17,23,40,.13);
    opacity: 0;
    transform-style: preserve-3d;
}
.bw-card-opening-modal.is-revealed .bw-reward-card {
    opacity: 1;
    transform: translateY(0) rotateY(0) scale(1);
}
.bw-reward-card[data-rarity="1"] {
    --rarity-a: #aeb9c8;
    --rarity-b: #eff5fc;
    --rarity-glow: rgba(210,222,238,.35);
}
.bw-reward-card[data-rarity="2"] {
    --rarity-a: #54cb87;
    --rarity-b: #d8ffe7;
    --rarity-glow: rgba(79,232,143,.42);
}
.bw-reward-card[data-rarity="3"] {
    --rarity-a: #4e9cf2;
    --rarity-b: #d8ecff;
    --rarity-glow: rgba(60,148,255,.46);
}
.bw-reward-card[data-rarity="4"] {
    --rarity-a: #a76bf3;
    --rarity-b: #eedcff;
    --rarity-glow: rgba(166,91,255,.48);
}
.bw-reward-card[data-rarity="5"] {
    --rarity-a: #f1a629;
    --rarity-b: #fff0a9;
    --rarity-glow: rgba(255,183,49,.55);
}
.bw-reward-card[data-rarity="6"] {
    --rarity-a: #ff668b;
    --rarity-b: #ffd5e1;
    --rarity-glow: rgba(255,74,130,.58);
}
@keyframes bwCardFoil {
0%, 28% {
    transform: rotate(24deg) translateX(-55%);
}
62%, 100% {
    transform: rotate(24deg) translateX(55%);
}
}
.bw-reward-rarity, .bw-reward-number {
    font-size: 8px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: .08em;
}
.bw-reward-rarity {
    color: #202941;
}
.bw-reward-number {
    color: #647087;
}
.bw-reward-card-image {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(135deg, #e7edf7, #bec9d8);
    border: 2px solid rgba(255,255,255,.78);
    box-shadow: inset 0 0 0 1px rgba(20,27,45,.13);
}
.bw-reward-card-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.bw-reward-card-image img.is-empty, .bw-reward-card-image img:not([src]) {
    display: none;
}
.bw-reward-card-image-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(31,43,65,.35);
    font-size: 34px;
}
.bw-reward-subject {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .1em;
    color: #637089;
}
.bw-card-opening-message.is-error {
    color: #ff8da2;
}
.bw-card-opening-actions {
    display: flex;
}
.bw-card-open-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #382005;
    background: linear-gradient(180deg, #ffe980, #f2ae2e);
    box-shadow: 0 11px 25px rgba(218,145,24,.25), inset 0 1px 0 rgba(255,255,255,.78);
}
.bw-card-open-button:disabled {
    opacity: .68;
    cursor: default;
}
.bw-card-details-button {
    width: 100%;
    color: #fff;
    background: linear-gradient(135deg, #3856c8, #6b45cb);
    box-shadow: 0 10px 24px rgba(63,75,187,.24);
}
.bw-card-details {
    background: rgba(255,255,255,.045);
}
.bw-card-details span, .bw-card-details-grid span, .bw-card-formula span {
    display: block;
    margin-bottom: 4px;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.bw-card-details p {
    margin: 0;
}
.bw-card-details-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
}
.bw-card-details-grid>div, .bw-card-formula {
    padding: 10px;
    border-radius: 13px;
    background: rgba(255,255,255,.045);
}
.bw-card-formula {
    margin-top: 9px;
}
.bw-card-formula b {
    display: block;
    overflow-wrap: anywhere;
    font-family: "Cambria Math", "Times New Roman", serif;
    font-size: 17px;
    color: #fff1ae;
}
@media (max-width: 480px) {
.bw-card-opening-dialog {
    padding: 15px 13px calc(13px + env(safe-area-inset-bottom));
}
.bw-card-opening-stage {
    min-height: 370px;
}
.bw-card-details-grid {
    grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-daily-card-pack, .bw-daily-card-pack-shine, .bw-card-pack-large, .bw-card-opening-particles i{
    animation: none !important;
}
}
.bw-daily-card {
    margin: 4px 0 16px;
    border-radius: 18px;
    gap: 10px;
}
.bw-daily-card::after {
    width: 120px;
    height: 120px;
    right: -52px;
    bottom: -66px;
    border-width: 20px;
}
.bw-daily-card h3 {
    line-height: 1.15;
}
.bw-daily-card-description {
    max-width: 280px;
    margin-top: 4px;
    line-height: 1.35;
}
.bw-daily-card-status {
    min-height: 22px;
    margin-top: 8px;
    padding: 0 8px;
    font-size: 9px;
}
.bw-daily-card-result {
    max-width: 280px;
    margin-top: 7px;
    padding: 5px;
    border-radius: 11px;
    gap: 7px;
}
.bw-daily-card-mini-image {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}
.bw-daily-card-result-copy b {
    font-size: 11px;
}
.bw-daily-card-result-copy small {
    font-size: 8px;
}
.bw-daily-card-action {
    width: 78px;
    min-width: 78px;
    gap: 5px;
}
.bw-daily-card-pack {
    width: 52px;
    height: 72px;
    border-radius: 9px;
    border-width: 1px;
    transform: rotate(4deg);
}
.bw-daily-card-pack::before, .bw-daily-card-pack::after {
    left: 5px;
    right: 5px;
    height: 3px;
}
.bw-daily-card-pack::before {
    top: 6px;
}
.bw-daily-card-pack::after {
    bottom: 6px;
}
.bw-daily-card-pack i {
    width: 28px;
    height: 28px;
    font-size: 13px;
    box-shadow: 0 4px 9px rgba(88,49,3,.2);
}
.bw-daily-card-action-label {
    min-height: 23px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 8px;
    box-shadow: 0 5px 12px rgba(0,0,0,.14);
}
@media (max-width: 480px) {
.bw-daily-card {
    margin-bottom: 14px;
    border-radius: 16px;
    gap: 8px;
}
.bw-daily-card-status {
    min-height: 20px;
    margin-top: 7px;
    padding: 0 7px;
    font-size: 8px;
}
.bw-daily-card-action {
    width: 68px;
    min-width: 68px;
}
.bw-daily-card-pack {
    width: 46px;
    height: 64px;
    border-radius: 8px;
}
.bw-daily-card-pack i {
    width: 25px;
    height: 25px;
    font-size: 12px;
}
.bw-daily-card-action-label {
    min-height: 21px;
    padding: 0 6px;
    font-size: 8px;
}
}
html.bw-daily-card-modal-open, body.bw-daily-card-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}
body.bw-daily-card-modal-open {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
}
.bw-card-opening-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: -webkit-fill-available;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2147483646 !important;
    isolation: isolate;
    transform: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}
.bw-card-opening-modal.is-open {
    display: block !important;
}
.bw-card-opening-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100vw;
    height: 100dvh;
}
.bw-card-opening-dialog {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: calc(12px + env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    calc(14px + env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none !important;
}
.bw-card-opening-dialog>:not(.bw-card-opening-close) {
    width: min(100%, 430px);
}
.bw-card-opening-close {
    position: fixed !important;
    z-index: 2147483647 !important;
}
body.bw-daily-card-modal-open .header, body.bw-daily-card-modal-open nav {
    pointer-events: none !important;
}
@media (max-width: 480px) {
.bw-card-opening-modal {
    padding: 0 !important;
    align-items: stretch !important;
}
.bw-card-opening-dialog {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    padding: calc(10px + env(safe-area-inset-top))
      12px
      calc(12px + env(safe-area-inset-bottom)) !important;
}
.bw-card-opening-stage {
    min-height: min(60dvh, 440px) !important;
}
}
.bw-daily-card {
    min-height: 136px;
    padding: 16px 17px;
    border: 1px solid rgba(255,255,255,.24);
    background: radial-gradient(circle at 88% 18%, rgba(255,231,146,.28), transparent 25%),
    radial-gradient(circle at 6% 110%, rgba(64,217,255,.28), transparent 48%),
    linear-gradient(135deg, #0b1438 0%, #263fa4 48%, #7c3aed 100%);
    box-shadow: 0 16px 35px rgba(30, 49, 128, .24), inset 0 1px 0 rgba(255,255,255,.18);
}
.bw-daily-card::before {
    opacity: .14;
    background-size: 19px 19px;
    animation: bwDailyGridMove 16s linear infinite;
}
@keyframes bwDailyGridMove {
to {
    background-position: 38px 19px;
}
}
@keyframes bwDailyOrb {
50% {
    transform: translateY(10px) scale(1.1);
    opacity: .72;
}
}
.bw-daily-card h3 {
    font-size: 18px;
    text-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.bw-daily-card-description {
    font-size: 10.5px;
}
.bw-daily-card-status {
    gap: 6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.bw-daily-card-status i {
    font-size: 8px;
    color: #bcd2ff;
}
.bw-daily-card-action {
    perspective: 700px;
}
.bw-daily-card-pack {
    background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 35%),
    radial-gradient(circle at 50% 45%, rgba(255,245,190,.52), transparent 31%),
    linear-gradient(160deg, #ffe38a, #e7a92d 52%, #7d4805);
    box-shadow: 0 10px 22px rgba(0,0,0,.26), 0 0 18px rgba(255,195,71,.22), inset 0 0 0 2px rgba(96,55,4,.22);
}
.bw-daily-card-pack-stars i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff9c9;
    box-shadow: 0 0 7px #fff1a1;
    animation: bwDailyMiniStar 1.6s ease-in-out infinite;
}
.bw-daily-card-pack-stars i:nth-child(1) {
    top: 21%;
    left: 19%;
}
.bw-daily-card-pack-stars i:nth-child(2) {
    top: 29%;
    right: 17%;
    animation-delay: .45s;
}
.bw-daily-card-pack-stars i:nth-child(3) {
    bottom: 20%;
    left: 25%;
    animation-delay: .8s;
}
@keyframes bwDailyMiniStar {
50% {
    transform: scale(2);
    opacity: .35;
}
}
.bw-card-opening-backdrop {
    background: radial-gradient(circle at 50% 24%, var(--rarity-glow, rgba(70,94,220,.3)), transparent 42%),
    radial-gradient(circle at 12% 82%, rgba(63,86,214,.24), transparent 36%),
    linear-gradient(150deg, rgba(3,7,20,.94), rgba(8,8,31,.97));
}
.bw-card-opening-modal[data-rarity="1"] {
    --rarity-a: #aeb9c8;
    --rarity-b: #eff5fc;
    --rarity-glow: rgba(210,222,238,.38);
    --rarity-deep: #526074;
}
.bw-card-opening-modal[data-rarity="2"] {
    --rarity-a: #54cb87;
    --rarity-b: #d8ffe7;
    --rarity-glow: rgba(79,232,143,.48);
    --rarity-deep: #176c43;
}
.bw-card-opening-modal[data-rarity="3"] {
    --rarity-a: #4e9cf2;
    --rarity-b: #d8ecff;
    --rarity-glow: rgba(60,148,255,.55);
    --rarity-deep: #175da8;
}
.bw-card-opening-modal[data-rarity="4"] {
    --rarity-a: #a76bf3;
    --rarity-b: #eedcff;
    --rarity-glow: rgba(166,91,255,.58);
    --rarity-deep: #6627a8;
}
.bw-card-opening-modal[data-rarity="5"] {
    --rarity-a: #f1a629;
    --rarity-b: #fff0a9;
    --rarity-glow: rgba(255,183,49,.66);
    --rarity-deep: #9d5708;
}
.bw-card-opening-modal[data-rarity="6"] {
    --rarity-a: #ff668b;
    --rarity-b: #ffd5e1;
    --rarity-glow: rgba(255,74,130,.7);
    --rarity-deep: #a3154a;
}
.bw-card-opening-dialog {
    background: radial-gradient(circle at 50% 18%, var(--rarity-glow), transparent 31%),
    radial-gradient(circle at 100% 90%, rgba(63,55,153,.2), transparent 42%),
    linear-gradient(180deg, #101734 0%, #080d20 66%, #050812 100%) !important;
}
.bw-card-opening-dialog::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 10% 20%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 18%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 64%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 76%, #fff 0 1px, transparent 1.5px);
    background-size: 130px 130px, 170px 170px, 190px 190px, 220px 220px;
}
@keyframes bwStarDrift {
to {
    background-position: 130px 260px, -170px 170px, 190px -190px, -220px -110px;
}
}
.bw-card-opening-close, .bw-card-sound-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.075);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .18s ease, background .18s ease;
}
.bw-card-opening-close:active, .bw-card-sound-toggle:active {
    transform: scale(.92);
}
.bw-card-opening-tools {
    display: flex;
    align-items: center;
}
.bw-card-opening-topline>span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bw-card-sound-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 11px;
    cursor: pointer;
}
.bw-card-sound-toggle.is-muted {
    color: rgba(255,255,255,.46);
    background: rgba(255,255,255,.035);
}
.bw-card-opening-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 230px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.55);
    z-index: 0;
}
.bw-card-opening-aurora {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 45% 55% 50% 50%;
    background: conic-gradient(from 90deg, transparent, var(--rarity-glow), transparent 38%, rgba(89,112,255,.18), transparent 72%, var(--rarity-glow));
    filter: blur(26px);
    opacity: .48;
    animation: bwAuroraSpin 10s linear infinite;
    z-index: 0;
}
.bw-card-opening-rays {
    position: absolute;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    opacity: 0;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.15) 0 3deg, transparent 3deg 18deg);
    mask-image: radial-gradient(circle, transparent 0 26%, #000 44%, transparent 74%);
    -webkit-mask-image: radial-gradient(circle, transparent 0 26%, #000 44%, transparent 74%);
    z-index: 1;
}
.bw-card-opening-modal.is-revealed .bw-card-opening-rays {
    opacity: .52;
    animation: bwRaysSpin 14s linear infinite;
}
@keyframes bwAuroraSpin {
to {
    transform: rotate(360deg) scale(1.08);
}
}
@keyframes bwRaysSpin {
to {
    transform: rotate(360deg);
}
}
.bw-card-opening-glow {
    background: radial-gradient(circle, var(--rarity-glow), transparent 66%);
}
@keyframes bwGlowBreath {
50% {
    transform: scale(1.13);
    opacity: .95;
}
}
.bw-card-opening-particles i {
    border-radius: 50%;
    background: var(--rarity-b);
    box-shadow: 0 0 14px var(--rarity-a), 0 0 28px var(--rarity-glow);
}
.bw-card-opening-particles i:nth-child(9) {
    --x: -178px;
    --y: -48px;
    animation-delay: .03s !important;
}
.bw-card-opening-particles i:nth-child(10) {
    --x: 174px;
    --y: -34px;
    animation-delay: .12s !important;
}
.bw-card-opening-particles i:nth-child(11) {
    --x: -166px;
    --y: 104px;
    animation-delay: .08s !important;
}
.bw-card-opening-particles i:nth-child(12) {
    --x: 164px;
    --y: 116px;
    animation-delay: .17s !important;
}
.bw-card-opening-particles i:nth-child(13) {
    --x: -54px;
    --y: -190px;
    animation-delay: .22s !important;
}
.bw-card-opening-particles i:nth-child(14) {
    --x: 70px;
    --y: -188px;
    animation-delay: .01s !important;
}
.bw-card-opening-particles i:nth-child(15) {
    --x: -38px;
    --y: 195px;
    animation-delay: .1s !important;
}
.bw-card-opening-particles i:nth-child(16) {
    --x: 48px;
    --y: 196px;
    animation-delay: .2s !important;
}
.bw-card-opening-particles i:nth-child(17) {
    --x: -195px;
    --y: 15px;
    animation-delay: .15s !important;
}
.bw-card-opening-particles i:nth-child(18) {
    --x: 194px;
    --y: 12px;
    animation-delay: .06s !important;
}
.bw-card-opening-particles i:nth-child(19) {
    --x: -130px;
    --y: 168px;
    animation-delay: .25s !important;
}
.bw-card-opening-particles i:nth-child(20) {
    --x: 136px;
    --y: 170px;
    animation-delay: .13s !important;
}
.bw-card-pack-large {
    background: linear-gradient(140deg, rgba(255,255,255,.4), transparent 29%),
    radial-gradient(circle at 50% 40%, rgba(255,250,210,.65), transparent 27%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #ffe795, #d8951f 58%, #5b3206);
    box-shadow: 0 28px 65px rgba(0,0,0,.48), 0 0 40px rgba(255,190,51,.2), inset 0 0 0 6px rgba(95,53,5,.2);
}
.bw-card-pack-large-seal {
    position: absolute;
    top: 20px;
    right: 17px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff4b0;
    background: #784609;
    border: 2px solid rgba(255,255,255,.42);
    box-shadow: 0 5px 12px rgba(60,30,2,.28);
    font-size: 11px;
}
.bw-card-pack-large-logo {
    width: 88px;
    height: 88px;
    font-size: 28px;
    box-shadow: 0 12px 28px rgba(83,45,3,.3), 0 0 0 8px rgba(255,255,255,.12);
}
.bw-card-pack-large-hint {
    position: absolute;
    bottom: 27px;
    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .16em;
    color: rgba(83,46,3,.62);
}
.bw-card-opening-modal.is-opening .bw-card-pack-large {
    animation: bwPackShake .3s linear infinite, bwPackCharge 1.1s ease-in-out infinite;
}
@keyframes bwPackCharge {
50% {
    filter: brightness(1.22) saturate(1.18);
    box-shadow: 0 30px 72px rgba(0,0,0,.5), 0 0 62px var(--rarity-glow), inset 0 0 0 6px rgba(95,53,5,.2);
}
}
.bw-reward-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --pointer-x: 50%;
    --pointer-y: 50%;
    width: 246px;
    min-height: 365px;
    padding: 11px;
    border-radius: 25px;
    border-width: 3px;
    outline: none;
    transform: translateY(88px) rotateY(110deg) rotateX(10deg) scale(.58);
    transition: opacity .58s ease, transform .82s cubic-bezier(.16,.84,.22,1.12), box-shadow .24s ease;
    will-change: transform;
}
.bw-card-opening-modal.is-revealed .bw-reward-card {
    transform: translateY(0) rotateY(var(--tilt-y)) rotateX(var(--tilt-x)) scale(1);
}
.bw-reward-card.is-tilting {
    transition: transform .08s linear, box-shadow .18s ease;
    box-shadow: 0 34px 72px rgba(0,0,0,.56), 0 0 46px var(--rarity-glow), inset 0 0 0 2px rgba(17,23,40,.13);
}
.bw-card-opening-modal.is-high-rarity.is-revealed .bw-reward-card {
    animation: bwHighRarityPulse 2.6s ease-in-out infinite;
}
@keyframes bwHighRarityPulse {
50% {
    box-shadow: 0 29px 62px rgba(0,0,0,.5), 0 0 62px var(--rarity-glow), inset 0 0 0 2px rgba(17,23,40,.13);
}
}
.bw-reward-card-image {
    height: 198px;
    border-radius: 16px;
}
.bw-reward-rarity {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.bw-reward-rarity i {
    color: var(--rarity-deep);
    font-style: normal;
    font-size: 10px;
    text-shadow: 0 0 8px var(--rarity-glow);
}
.bw-card-opening-actions{
    gap: 9px;
}
.bw-card-open-button, .bw-card-details-button{
    position: relative;
    overflow: hidden;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.bw-card-open-button::after, .bw-card-details-button::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -35%;
    width: 28%;
    height: 300%;
    transform: rotate(24deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
    animation: bwButtonShine 2.8s ease-in-out infinite;
}
@keyframes bwButtonShine {
0%, 46% {
    left: -35%;
    opacity: 0;
}
58% {
    opacity: 1;
}
78%, 100% {
    left: 130%;
    opacity: 0;
}
}
.bw-card-open-button:active, .bw-card-details-button:active{
    transform: scale(.97);
}
.bw-card-details-button {
    display: inline-flex;
}
.bw-card-details {
    margin-top: 13px;
    background: radial-gradient(circle at 100% 0, var(--rarity-glow), transparent 28%),
    rgba(255,255,255,.052);
    border-color: rgba(255,255,255,.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    animation: bwDetailsIn .35s ease both;
}
@keyframes bwDetailsIn {
from {
    opacity: 0;
    transform: translateY(12px);
}
}
.bw-card-details-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.bw-card-details-head-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin: 0 !important;
    border-radius: 13px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    background: linear-gradient(135deg, var(--rarity-deep), var(--rarity-a));
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    font-size: 15px !important;
}
.bw-card-details-head small {
    color: #8292d3;
    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .12em;
}
.bw-card-details-head h3 {
    margin: 2px 0 0;
    font-size: 15px;
}
.bw-card-details-section, .bw-card-details-grid>div, .bw-card-formula {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
}
.bw-card-details-section+.bw-card-details-section {
    margin-top: 9px;
}
.bw-card-details span, .bw-card-details-grid span, .bw-card-formula span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #9aa9e4;
}
.bw-card-details p {
    font-size: 12px;
    line-height: 1.65;
    white-space: pre-line;
    color: rgba(255,255,255,.82);
    user-select: text;
    -webkit-user-select: text;
}
.bw-card-details-full p {
    font-size: 12.5px;
    line-height: 1.72;
}
.bw-card-formula b {
    padding: 9px 10px;
    border-radius: 11px;
    text-align: center;
    background: rgba(0,0,0,.15);
}
.bw-daily-card-toast {
    position: fixed;
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 2147483647;
    max-width: calc(100vw - 28px);
    padding: 11px 15px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: #fff;
    background: rgba(13,18,38,.94);
    box-shadow: 0 14px 35px rgba(0,0,0,.34);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 15px) scale(.96);
    transition: .22s ease;
}
.bw-daily-card-toast.is-active {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}
@media (max-width: 480px) {
.bw-daily-card {
    min-height: 122px;
    padding: 13px 14px;
}
.bw-daily-card h3 {
    font-size: 16px;
}
.bw-daily-card-description {
    max-width: 235px;
    font-size: 9.5px;
}
.bw-card-opening-topline {
    padding-right: 43px;
}
.bw-card-opening-topline>span {
    font-size: 8px;
}
.bw-card-opening-tools b {
    display: none;
}
.bw-card-opening-stage {
    min-height: min(62dvh, 460px) !important;
}
.bw-card-opening-modal.is-details-open .bw-card-opening-stage {
    min-height: 350px !important;
}
.bw-card-pack-large {
    width: 176px;
    height: 252px;
}
.bw-reward-card {
    width: min(246px, 76vw);
    min-height: 354px;
}
.bw-reward-card-image {
    height: 190px;
}
.bw-card-details {
    padding: 12px;
}
.bw-card-details p, .bw-card-details-full p {
    font-size: 12px;
}
}
@media (max-height: 680px) {
.bw-card-opening-stage {
    min-height: 390px !important;
}
.bw-card-pack-large {
    transform: scale(.9) rotate(-3deg);
}
.bw-reward-card {
    transform-origin: center;
}
.bw-card-opening-modal.is-revealed .bw-reward-card {
    transform: translateY(0) rotateY(var(--tilt-y)) rotateX(var(--tilt-x)) scale(.9);
}
}
@media (prefers-reduced-motion: reduce) {
.bw-daily-card::before, .bw-card-opening-dialog::before, .bw-card-opening-aurora, .bw-card-opening-rays, .bw-card-opening-glow, .bw-card-opening-modal.is-high-rarity.is-revealed .bw-reward-card, .bw-card-open-button::after, .bw-card-details-button::after{
    animation: none !important;
}
}
.bw-card-rarity-splash {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 12;
    width: min(82vw, 360px);
    transform: translate(-50%, -50%) scale(.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 0;
    pointer-events: none;
    filter: blur(8px);
    text-align: center;
}
.bw-card-rarity-splash span {
    font-size: 42px;
    line-height: 1;
    color: var(--rarity-b);
    text-shadow: 0 0 12px var(--rarity-a),
    0 0 28px var(--rarity-glow),
    0 0 52px var(--rarity-glow);
}
.bw-card-rarity-splash b {
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    color: #fff;
    background: rgba(5, 8, 20, .54);
    box-shadow: 0 12px 35px rgba(0,0,0,.3), 0 0 24px var(--rarity-glow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 1000;
    letter-spacing: .18em;
}
.bw-card-opening-modal.is-revealed .bw-card-rarity-splash {
    animation: bwRaritySplash 1.08s cubic-bezier(.16,.82,.2,1) both;
}
.bw-card-opening-modal.is-high-rarity.is-revealed .bw-card-opening-dialog {
    animation: bwLegendaryImpact .48s ease both;
}
.bw-card-opening-modal.is-high-rarity.is-revealed .bw-card-opening-flash {
    box-shadow: 0 0 90px 42px var(--rarity-glow);
}
.bw-card-opening-modal[data-rarity="6"].is-revealed .bw-card-rarity-splash span {
    animation: bwMythicSymbol 1.4s ease-in-out infinite alternate;
}
.bw-card-sound-toggle:not(.is-muted) i {
    animation: bwSoundAlive 1.9s ease-in-out infinite;
}
@keyframes bwRaritySplash {
0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.35) rotate(-8deg);
    filter: blur(10px);
}
26% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18) rotate(2deg);
    filter: blur(0);
}
62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
}
100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(.92);
    filter: blur(2px);
}
}
@keyframes bwLegendaryImpact {
0%, 100% {
    transform: translate3d(0,0,0);
}
18% {
    transform: translate3d(-4px,2px,0) rotate(-.35deg);
}
36% {
    transform: translate3d(5px,-2px,0) rotate(.4deg);
}
54% {
    transform: translate3d(-3px,1px,0) rotate(-.2deg);
}
72% {
    transform: translate3d(2px,0,0);
}
}
@keyframes bwMythicSymbol {
from {
    transform: scale(.94) rotate(-5deg);
    filter: hue-rotate(0deg);
}
to {
    transform: scale(1.1) rotate(5deg);
    filter: hue-rotate(35deg);
}
}
@keyframes bwSoundAlive {
0%, 100% {
    transform: scale(1);
}
50% {
    transform: scale(1.1);
}
}
@media (prefers-reduced-motion: reduce) {
.bw-card-opening-modal.is-revealed .bw-card-rarity-splash, .bw-card-opening-modal.is-high-rarity.is-revealed .bw-card-opening-dialog, .bw-card-sound-toggle:not(.is-muted) i {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
}
}
@keyframes bwRealCardSettle {
0% {
    filter: brightness(1.45);
}
45% {
    filter: brightness(1.1);
}
100% {
    filter: brightness(1);
}
}
@keyframes bwPhysicalHolo {
0%, 100% {
    box-shadow: 0 4px 0 rgba(255,255,255,.28), 0 9px 0 var(--tcg-metal-3), 0 28px 58px rgba(0,0,0,.52), 0 0 35px var(--rarity-glow);
}
50% {
    box-shadow: 0 4px 0 rgba(255,255,255,.38), 0 9px 0 var(--tcg-metal-3), 0 34px 68px rgba(0,0,0,.58), 0 0 72px var(--rarity-glow);
}
}
.bw-clean-tcg-card {
    --clean-a: #9aa4b2;
    --clean-b: #e7edf4;
    --clean-glow: rgba(148,163,184,.34);
    position: relative !important;
    width: min(304px, calc(100vw - 44px)) !important;
    aspect-ratio: 5 / 7 !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 28px !important;
    padding: 0 !important;
    overflow: visible !important;
    isolation: isolate;
    color: #fff;
    background: transparent !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.56),
    0 0 38px var(--clean-glow) !important;
    transform-style: preserve-3d;
}
.bw-clean-tcg-card[data-rarity="1"] {
    --clean-a: #8b95a4;
    --clean-b: #e8edf4;
    --clean-glow: rgba(148,163,184,.28);
}
.bw-clean-tcg-card[data-rarity="2"] {
    --clean-a: #24a66a;
    --clean-b: #baf4d3;
    --clean-glow: rgba(46,204,113,.34);
}
.bw-clean-tcg-card[data-rarity="3"] {
    --clean-a: #2f7fd8;
    --clean-b: #c7e3ff;
    --clean-glow: rgba(59,130,246,.40);
}
.bw-clean-tcg-card[data-rarity="4"] {
    --clean-a: #7c3dd1;
    --clean-b: #e4d2ff;
    --clean-glow: rgba(139,92,246,.46);
}
.bw-clean-tcg-card[data-rarity="5"] {
    --clean-a: #d28a12;
    --clean-b: #ffeaa2;
    --clean-glow: rgba(245,158,11,.56);
}
.bw-clean-tcg-card[data-rarity="6"] {
    --clean-a: #df3f77;
    --clean-b: #ffd4e4;
    --clean-glow: rgba(236,72,153,.62);
}
.bw-clean-card-edge {
    position: absolute;
    z-index: -2;
    background: linear-gradient(140deg, rgba(255,255,255,.96), rgba(255,255,255,.16) 22%, transparent 40%),
    linear-gradient(145deg, var(--clean-b), var(--clean-a) 42%, #111827 100%);
}
.bw-clean-card-inner {
    background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.12), transparent 30%),
    linear-gradient(165deg, #111827 0%, #0b1220 58%, #080d17 100%);
}
.bw-clean-card-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(3,7,18,.92), rgba(3,7,18,.54) 62%, transparent);
}
.bw-clean-card-title-wrap>span {
    margin-bottom: 4px;
    color: var(--clean-b);
}
.bw-clean-card-title-wrap h2 {
    color: #fff !important;
}
.bw-clean-card-power {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: rgba(4,10,20,.56);
    backdrop-filter: blur(12px);
}
.bw-clean-card-power b {
    color: #fff;
    line-height: 1;
}
.bw-clean-card-power i {
    color: var(--clean-b);
}
.bw-clean-tcg-card .bw-clean-card-image {
    position: absolute !important;
    background: #111827 !important;
}
.bw-clean-card-image-shade {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(2,6,18,.30) 0%, transparent 34%, transparent 48%, rgba(2,6,18,.22) 64%, rgba(2,6,18,.96) 100%),
    linear-gradient(90deg, rgba(2,6,18,.10), transparent 20% 80%, rgba(2,6,18,.10));
}
.bw-clean-card-badges {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bw-clean-tcg-card .bw-reward-subject, .bw-clean-tcg-card .bw-reward-rarity {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #fff !important;
    background: rgba(4,9,18,.58) !important;
    backdrop-filter: blur(14px);
    text-transform: uppercase;
    white-space: nowrap;
}
.bw-clean-tcg-card .bw-reward-subject {
    overflow: hidden;
    text-overflow: ellipsis;
}
.bw-clean-tcg-card .bw-reward-rarity {
    border-color: rgba(255,255,255,.44) !important;
}
.bw-clean-tcg-card .bw-reward-rarity i {
    font-style: normal;
}
.bw-clean-card-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 35px;
    color: #fff;
}
.bw-clean-card-info h3 {
    color: #fff;
}
.bw-clean-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255,255,255,.58);
}
.bw-clean-card-meta span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-clean-card-meta .bw-reward-number {
    flex-shrink: 0;
    color: var(--clean-b);
}
.bw-clean-card-footer {
    position: absolute;
    left: 17px;
    right: 17px;
    bottom: 13px;
    line-height: 1;
}
.bw-clean-card-footer span:last-child {
    color: var(--clean-b);
}
.bw-clean-card-holo, .bw-clean-card-glare {
    position: absolute;
    inset: 0;
    z-index: 12;
    border-radius: 28px;
    pointer-events: none;
}
.bw-clean-card-holo {
    background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.38), transparent 17%),
    conic-gradient(from 120deg at var(--pointer-x) var(--pointer-y),
      transparent,
      rgba(72,255,221,.20),
      rgba(125,105,255,.22),
      rgba(255,88,181,.18),
      rgba(255,222,75,.20),
      transparent 68%);
    mix-blend-mode: screen;
    transition: opacity .22s ease;
}
.bw-clean-card-glare {
    background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,.34) 44%, transparent 59%);
    transform: translateX(-45%);
    transition: transform .35s ease, opacity .2s ease;
}
.bw-clean-tcg-card.is-tilting .bw-clean-card-glare {
    transform: translateX(45%);
}
.bw-clean-tcg-card.is-tilting .bw-clean-card-holo, .bw-clean-tcg-card[data-rarity="4"] .bw-clean-card-holo, .bw-clean-tcg-card[data-rarity="5"] .bw-clean-card-holo, .bw-clean-tcg-card[data-rarity="6"] .bw-clean-card-holo {
    opacity: .42;
}
.bw-card-opening-modal.is-revealed .bw-clean-tcg-card {
    animation: bwCleanCardReveal .82s cubic-bezier(.16,.86,.25,1.08) both !important;
}
.bw-card-opening-modal.is-high-rarity.is-revealed .bw-clean-tcg-card {
    animation: bwCleanCardReveal .82s cubic-bezier(.16,.86,.25,1.08) both,
    bwCleanCardBreath 3.4s ease-in-out 1s infinite !important;
}
@keyframes bwCleanCardReveal {
0% {
    opacity: 0;
    transform: perspective(1000px) translateY(42px) rotateX(14deg) scale(.82);
    filter: brightness(1.8) blur(4px);
}
62% {
    opacity: 1;
    transform: perspective(1000px) translateY(-5px) rotateX(-2deg) scale(1.025);
    filter: brightness(1.12) blur(0);
}
100% {
    opacity: 1;
    transform: perspective(1000px) translateY(0) rotateX(0) scale(1);
    filter: brightness(1);
}
}
@keyframes bwCleanCardBreath {
0%, 100% {
    box-shadow: 0 28px 70px rgba(0,0,0,.56), 0 0 34px var(--clean-glow) !important;
}
50% {
    box-shadow: 0 32px 78px rgba(0,0,0,.62), 0 0 70px var(--clean-glow) !important;
}
}
@media (max-width:390px) {
.bw-clean-tcg-card {
    width: min(282px, calc(100vw - 38px)) !important;
}
.bw-clean-card-title-wrap h2 {
    font-size: 20px !important;
}
.bw-clean-card-badges {
    bottom: 120px;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-card-opening-modal.is-revealed .bw-clean-tcg-card, .bw-card-opening-modal.is-high-rarity.is-revealed .bw-clean-tcg-card {
    animation: none !important;
}
}
.bw-card-opening-modal {
    --card-width: min(304px, calc(100vw - 32px));
}
.bw-card-opening-dialog {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: calc(10px + env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    calc(14px + env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
    background: radial-gradient(circle at 50% 35%, var(--rarity-glow, rgba(90,110,170,.20)), transparent 34%),
    linear-gradient(180deg, #11182b 0%, #090f1d 58%, #060a13 100%) !important;
}
.bw-card-opening-dialog::before {
    opacity: .09 !important;
    animation: none !important;
}
.bw-card-opening-dialog>:not(.bw-card-opening-close) {
    width: min(100%, 390px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
.bw-card-opening-topline {
    min-height: 42px;
    padding: 0 46px 0 2px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bw-card-opening-topline>span {
    min-width: 0;
    color: rgba(255,255,255,.68) !important;
    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    white-space: nowrap;
}
.bw-card-opening-tools {
    flex-shrink: 0;
    gap: 7px !important;
}
.bw-card-opening-tools>b {
    display: none !important;
}
.bw-card-opening-close, .bw-card-sound-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 13px !important;
    color: rgba(255,255,255,.9) !important;
    background: rgba(255,255,255,.065) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 14px !important;
}
.bw-card-opening-close {
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
}
.bw-card-opening-stage {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: min(438px, calc(100dvh - 165px)) !important;
    margin: 2px auto 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    isolation: isolate;
}
.bw-card-opening-stage::after {
    bottom: 8px !important;
    width: min(245px, 72vw) !important;
    height: 22px !important;
    opacity: .46 !important;
    filter: blur(13px) !important;
}
.bw-card-opening-aurora, .bw-card-opening-rays {
    opacity: 0 !important;
}
.bw-card-opening-modal.is-high-rarity.is-revealed .bw-card-opening-aurora {
    opacity: .18 !important;
}
.bw-card-opening-modal.is-high-rarity.is-revealed .bw-card-opening-rays {
    opacity: .12 !important;
}
.bw-card-opening-glow {
    width: 270px !important;
    height: 270px !important;
    opacity: .26 !important;
    filter: blur(16px) !important;
    animation: none !important;
}
.bw-card-opening-particles i {
    width: 4px !important;
    height: 4px !important;
    opacity: 0;
}
.bw-card-pack-large {
    width: 168px !important;
    height: 238px !important;
    border-radius: 20px !important;
}
.bw-card-opening-stage>.bw-clean-tcg-card {
    --paper: #f5f1e7;
    --paper-2: #ebe5d8;
    --ink: #18202d;
    --muted: #687181;
    --line: rgba(34,42,55,.16);
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: var(--card-width) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22px !important;
    overflow: visible !important;
    opacity: 0;
    background: transparent !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.14),
    0 0 24px var(--clean-glow) !important;
    transform: translate(-50%, -42%)
    perspective(1000px)
    rotateY(82deg)
    rotateX(6deg)
    scale(.80) !important;
    transform-origin: center center !important;
    transform-style: preserve-3d;
    transition: opacity .42s ease,
    transform .68s cubic-bezier(.18,.82,.2,1.06),
    box-shadow .2s ease !important;
    animation: none !important;
    will-change: transform;
}
.bw-card-opening-modal.is-revealed .bw-card-opening-stage>.bw-clean-tcg-card {
    opacity: 1 !important;
    transform: translate(-50%, -50%)
    perspective(1000px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    scale(1) !important;
    animation: none !important;
}
.bw-card-opening-modal.is-high-rarity.is-revealed .bw-card-opening-stage>.bw-clean-tcg-card {
    animation: bwFinalCardGlow 1.65s ease-out .45s 1 both !important;
}
@keyframes bwFinalCardGlow {
0%, 100% {
    box-shadow: 0 22px 48px rgba(0,0,0,.52),
      0 0 0 1px rgba(255,255,255,.14),
      0 0 24px var(--clean-glow);
}
50% {
    box-shadow: 0 26px 58px rgba(0,0,0,.58),
      0 0 0 1px rgba(255,255,255,.18),
      0 0 42px var(--clean-glow);
}
}
.bw-clean-card-edge {
    inset: -4px !important;
    border-radius: 25px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.18) 22%, transparent 42%),
    linear-gradient(145deg, var(--clean-b), var(--clean-a) 46%, #303846 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 -6px 12px rgba(0,0,0,.25),
    0 6px 0 rgba(3,7,14,.72) !important;
}
.bw-clean-card-inner {
    position: relative !important;
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.52) !important;
    border-radius: 21px !important;
    color: var(--ink) !important;
    background: repeating-linear-gradient(0deg, rgba(40,46,55,.018) 0 1px, transparent 1px 3px),
    linear-gradient(155deg, #fffdf7 0%, var(--paper) 52%, var(--paper-2) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(35,43,54,.11),
    inset 0 -18px 30px rgba(72,57,31,.07) !important;
}
.bw-clean-card-top {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 52px !important;
    padding: 3px 4px 8px !important;
    color: var(--ink) !important;
    background: transparent !important;
    pointer-events: auto !important;
}
.bw-clean-card-title-wrap {
    min-width: 0 !important;
}
.bw-clean-card-title-wrap>span {
    display: block !important;
    margin: 0 0 4px !important;
    overflow: hidden;
    color: var(--clean-a) !important;
    font-family: Arial, sans-serif !important;
    font-size: 6.5px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.bw-clean-card-title-wrap h2 {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.06 !important;
    text-align: left !important;
    text-overflow: clip !important;
    text-shadow: none !important;
    white-space: normal !important;
    word-break: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.bw-clean-card-power {
    align-self: center !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    border: 1px solid rgba(38,46,57,.18) !important;
    border-radius: 999px !important;
    color: var(--ink) !important;
    background: rgba(255,255,255,.56) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter: none !important;
}
.bw-clean-card-power b {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}
.bw-clean-card-power i {
    color: var(--clean-a) !important;
    font-size: 10px !important;
}
.bw-clean-tcg-card .bw-clean-card-image {
    position: relative !important;
    inset: auto !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 2px solid rgba(29,38,50,.32) !important;
    border-radius: 13px !important;
    background: #d8dde4 !important;
    box-shadow: 0 2px 0 rgba(255,255,255,.9),
    0 5px 12px rgba(24,31,42,.16),
    inset 0 0 0 1px rgba(255,255,255,.35) !important;
}
.bw-clean-tcg-card .bw-clean-card-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    filter: saturate(1.02) contrast(1.02) !important;
    transform: none !important;
}
.bw-clean-card-image-shade {
    background: linear-gradient(to bottom, transparent 55%, rgba(5,10,18,.30) 100%) !important;
}
.bw-clean-card-badges {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    gap: 6px !important;
}
.bw-clean-tcg-card .bw-reward-subject, .bw-clean-tcg-card .bw-reward-rarity {
    min-height: 23px !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 999px !important;
    font-family: Arial, sans-serif !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.18) !important;
}
.bw-clean-tcg-card .bw-reward-subject {
    max-width: 65%;
    color: #fff !important;
    background: rgba(10,15,24,.66) !important;
}
.bw-clean-tcg-card .bw-reward-rarity {
    flex-shrink: 0;
    color: #121923 !important;
    background: linear-gradient(135deg, var(--clean-b), var(--clean-a)) !important;
}
.bw-clean-tcg-card .bw-reward-rarity i {
    color: currentColor !important;
    font-size: 8px !important;
    text-shadow: none !important;
}
.bw-clean-tcg-card .bw-reward-rarity b {
    font-size: 7px !important;
}
.bw-clean-card-info {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    min-height: 0 !important;
    color: var(--ink) !important;
}
.bw-clean-card-info h3 {
    margin: 0 0 5px !important;
    overflow: hidden !important;
    color: var(--ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    white-space: nowrap !important;
}
.bw-clean-card-info p {
    margin: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    color: #4e5868 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 560 !important;
    line-height: 1.42 !important;
    text-align: left !important;
    text-shadow: none !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.bw-clean-card-meta {
    border-top: 1px solid var(--line) !important;
    color: var(--muted) !important;
    font-family: Arial, sans-serif !important;
    font-size: 7px !important;
    font-weight: 750 !important;
    letter-spacing: .02em !important;
}
.bw-clean-card-meta .bw-reward-number {
    color: var(--clean-a) !important;
    font-size: 8px !important;
}
.bw-clean-card-footer {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    flex: 0 0 auto;
    border-top: 1px solid rgba(34,42,55,.10);
    color: #7b8390 !important;
    font-family: Arial, sans-serif !important;
    font-size: 6.5px !important;
    font-weight: 850 !important;
    letter-spacing: .09em !important;
}
.bw-clean-card-footer span:last-child {
    color: var(--clean-a) !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
}
.bw-clean-card-glare {
    z-index: 11 !important;
    border-radius: 22px !important;
    opacity: .13 !important;
    background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.52) 45%, transparent 60%) !important;
}
.bw-clean-card-holo {
    z-index: 10 !important;
    border-radius: 22px !important;
    opacity: 0 !important;
}
.bw-clean-tcg-card.is-tilting .bw-clean-card-glare {
    opacity: .34 !important;
}
.bw-clean-tcg-card.is-tilting .bw-clean-card-holo {
    opacity: .16 !important;
}
.bw-clean-tcg-card[data-rarity="4"] .bw-clean-card-holo {
    opacity: .18 !important;
}
.bw-clean-tcg-card[data-rarity="5"] .bw-clean-card-holo {
    opacity: .30 !important;
}
.bw-clean-tcg-card[data-rarity="6"] .bw-clean-card-holo {
    opacity: .42 !important;
}
.bw-card-opening-message {
    width: min(100%, 340px) !important;
    min-height: 20px !important;
    margin: 5px auto 8px !important;
    color: rgba(255,255,255,.72) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-shadow: none !important;
}
.bw-card-opening-actions {
    width: min(100%, 340px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
}
.bw-card-open-button, .bw-card-details-button {
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 17px !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #4166d8, #6d3dd0) !important;
    box-shadow: 0 10px 24px rgba(64,66,190,.28) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}
.bw-card-open-button::after, .bw-card-details-button::after {
    display: none !important;
}
.bw-card-details-button i, .bw-card-open-button i {
    font-size: 13px !important;
}
.bw-card-details {
    width: min(100%, 390px) !important;
    margin: 13px auto 0 !important;
    padding: 13px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
}
.bw-card-opening-modal.is-details-open .bw-card-opening-stage {
    height: 410px !important;
    min-height: 365px !important;
}
@media (max-width: 390px) {
.bw-card-opening-modal {
    --card-width: min(286px, calc(100vw - 30px));
}
.bw-card-opening-stage {
    height: min(414px, calc(100dvh - 162px)) !important;
}
.bw-clean-card-inner {
    padding: 9px !important;
}
.bw-clean-card-top {
    min-height: 48px !important;
    padding-bottom: 7px !important;
}
.bw-clean-card-title-wrap h2 {
    font-size: 16.5px !important;
}
.bw-clean-card-power {
    min-height: 28px !important;
    padding: 5px 7px !important;
}
.bw-clean-card-power b {
    font-size: 12px !important;
}
.bw-clean-card-info h3 {
    font-size: 14px !important;
}
.bw-clean-card-info p {
    min-height: 27px !important;
    font-size: 9px !important;
}
.bw-card-opening-message {
    margin-top: 3px !important;
    font-size: 10px !important;
}
.bw-card-open-button, .bw-card-details-button {
    min-height: 48px !important;
}
}
@media (max-height: 700px) {
.bw-card-opening-stage {
    height: min(388px, calc(100dvh - 154px)) !important;
}
.bw-card-opening-modal {
    --card-width: min(270px, calc(100vw - 32px));
}
.bw-card-opening-message {
    margin-top: 2px !important;
    margin-bottom: 6px !important;
}
.bw-card-open-button, .bw-card-details-button {
    min-height: 46px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-card-opening-stage>.bw-clean-tcg-card, .bw-card-opening-modal.is-revealed .bw-card-opening-stage>.bw-clean-tcg-card, .bw-card-opening-modal.is-high-rarity.is-revealed .bw-card-opening-stage>.bw-clean-tcg-card {
    animation: none !important;
    transition-duration: .01ms !important;
}
}
.bw-card-opening-particles i:nth-child(n/**/+13) {
    display: none !important;
}
.bw-clean-tcg-card .bw-clean-card-image img {
    contain: paint;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
html.bw-lite-card-fx .bw-card-opening-backdrop {
    background: rgba(3, 7, 20, .94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.bw-lite-card-fx .bw-card-opening-dialog, html.bw-lite-card-fx .bw-card-opening-close, html.bw-lite-card-fx .bw-card-sound-toggle {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.bw-lite-card-fx .bw-card-opening-dialog {
    background: linear-gradient(180deg, #11182b 0%, #090f1d 58%, #060a13 100%) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.48) !important;
}
html.bw-lite-card-fx .bw-card-opening-aurora, html.bw-lite-card-fx .bw-card-opening-rays, html.bw-lite-card-fx .bw-card-opening-stage::after {
    display: none !important;
}
html.bw-lite-card-fx .bw-card-opening-glow {
    width: 235px !important;
    height: 235px !important;
    opacity: .18 !important;
    filter: blur(10px) !important;
}
html.bw-lite-card-fx .bw-card-opening-particles i:nth-child(n/**/+7) {
    display: none !important;
}
html.bw-lite-card-fx .bw-card-pack-large {
    animation: none !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.36), inset 0 0 0 4px rgba(95,53,5,.18) !important;
}
html.bw-lite-card-fx .bw-card-opening-modal.is-opening .bw-card-pack-large {
    animation: bwPackShakeLite .34s linear 2 !important;
}
@keyframes bwPackShakeLite {
0%, 100% {
    transform: translateX(0) rotate(-2deg);
}
33% {
    transform: translateX(-3px) rotate(-3deg);
}
66% {
    transform: translateX(3px) rotate(1deg);
}
}
html.bw-lite-card-fx .bw-card-opening-stage>.bw-clean-tcg-card {
    will-change: auto !important;
    transform-style: flat !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.12),
    0 0 18px var(--clean-glow) !important;
}
html.bw-lite-card-fx .bw-card-opening-modal.is-high-rarity.is-revealed .bw-card-opening-stage>.bw-clean-tcg-card {
    animation: none !important;
}
html.bw-lite-card-fx .bw-clean-card-holo {
    display: none !important;
}
html.bw-lite-card-fx .bw-clean-card-glare, html.bw-lite-card-fx .bw-clean-tcg-card.is-tilting .bw-clean-card-glare {
    opacity: .08 !important;
}
@media (hover: none), (pointer: coarse) {
.bw-card-opening-stage>.bw-clean-tcg-card {
    will-change: auto !important;
    transform-style: flat;
}
.bw-clean-card-holo {
    display: none !important;
}
.bw-clean-card-glare {
    opacity: .09 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-card-opening-particles, .bw-card-opening-aurora, .bw-card-opening-rays, .bw-card-opening-glow, .bw-clean-card-holo {
    display: none !important;
}
.bw-card-pack-large, .bw-card-opening-modal.is-opening .bw-card-pack-large, .bw-card-opening-modal.is-high-rarity.is-revealed .bw-card-opening-stage>.bw-clean-tcg-card {
    animation: none !important;
}
}
.bw-card-opening-stage {
    height: min(500px, calc(100dvh - 150px)) !important;
    padding: 18px 0 12px !important;
}
.bw-clean-card-info {
    padding: 9px 5px 4px !important;
}
.bw-clean-card-info p {
    min-height: 28px !important;
}
.bw-clean-card-meta {
    margin-top: 6px !important;
    padding-top: 6px !important;
}
.bw-clean-card-footer {
    min-height: 18px !important;
    padding: 3px 5px 1px !important;
}
.bw-clean-tcg-card[data-rarity="4"]::before, .bw-clean-tcg-card[data-rarity="5"]::before, .bw-clean-tcg-card[data-rarity="6"]::before {
    position: absolute;
    left: 50%;
    top: -13px;
    z-index: 40;
    min-width: 112px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    transform: translateX(-50%);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .13em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.42);
    pointer-events: none;
}
.bw-clean-tcg-card[data-rarity="4"]::before {
    content: "◆  ЭПИКАЛЫҚ  ◆";
    background: linear-gradient(135deg, #4c1d95, #a855f7 55%, #6d28d9);
}
.bw-clean-tcg-card[data-rarity="5"]::before {
    content: "♛  АҢЫЗ  ♛";
    color: #4a2700;
    text-shadow: 0 1px rgba(255,255,255,.55);
    background: linear-gradient(135deg, #fff1a8, #f59e0b 52%, #ffd86a);
}
.bw-clean-tcg-card[data-rarity="6"]::before {
    content: "✦  МИФТІК  ✦";
    background: linear-gradient(110deg, #7c3aed, #ec4899 38%, #fb7185 68%, #8b5cf6);
    box-shadow: 0 7px 20px rgba(236,72,153,.42), inset 0 1px 0 rgba(255,255,255,.55);
}
.bw-clean-tcg-card[data-rarity="4"]::after, .bw-clean-tcg-card[data-rarity="5"]::after, .bw-clean-tcg-card[data-rarity="6"]::after {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: 29px;
    pointer-events: none;
}
.bw-clean-tcg-card[data-rarity="4"]::after {
    border: 1px solid rgba(192,132,252,.60);
    box-shadow: 0 0 22px rgba(168,85,247,.32);
}
.bw-clean-tcg-card[data-rarity="5"]::after {
    border: 2px solid rgba(255,214,102,.72);
    box-shadow: 0 0 28px rgba(245,158,11,.48), 0 0 58px rgba(245,158,11,.18);
}
.bw-clean-tcg-card[data-rarity="6"]::after {
    border: 2px solid rgba(255,151,190,.82);
    box-shadow: 0 0 30px rgba(236,72,153,.55), 0 0 70px rgba(124,58,237,.25);
}
.bw-clean-tcg-card[data-rarity="1"] .bw-clean-card-edge {
    background: linear-gradient(145deg, #f5f7fa, #9da8b6 48%, #475569) !important;
}
.bw-clean-tcg-card[data-rarity="2"] .bw-clean-card-edge {
    background: linear-gradient(135deg, rgba(255,255,255,.95), transparent 25%),
    linear-gradient(145deg, #d8ffe7, #36b977 48%, #14532d) !important;
}
.bw-clean-tcg-card[data-rarity="3"] .bw-clean-card-edge {
    background: linear-gradient(135deg, rgba(255,255,255,.98), transparent 24%),
    linear-gradient(145deg, #e0f2fe, #3b82f6 46%, #1e3a8a) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65),
    inset 0 0 0 4px rgba(59,130,246,.18),
    inset 0 -7px 13px rgba(5,35,85,.32),
    0 6px 0 rgba(3,7,14,.72) !important;
}
.bw-clean-tcg-card[data-rarity="4"] .bw-clean-card-edge {
    background: linear-gradient(135deg, rgba(255,255,255,.98), transparent 20%),
    conic-gradient(from 210deg, #4c1d95, #d8b4fe, #7c3aed, #f0abfc, #4c1d95) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 0 0 5px rgba(76,29,149,.22),
    inset 0 -8px 14px rgba(45,13,90,.36),
    0 7px 0 rgba(18,5,35,.78) !important;
}
.bw-clean-tcg-card[data-rarity="5"] .bw-clean-card-edge {
    background: linear-gradient(135deg, rgba(255,255,255,1), transparent 20%),
    conic-gradient(from 205deg, #8a4b05, #ffe89a, #f59e0b, #fff4b8, #b96d08, #ffe89a, #8a4b05) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.85),
    inset 0 0 0 5px rgba(114,63,4,.22),
    inset 0 -9px 16px rgba(90,43,0,.38),
    0 8px 0 rgba(48,24,0,.82) !important;
}
.bw-clean-tcg-card[data-rarity="6"] .bw-clean-card-edge {
    background: linear-gradient(135deg, rgba(255,255,255,1), transparent 18%),
    conic-gradient(from 200deg, #6d28d9, #f0abfc, #fb7185, #fde68a, #67e8f9, #a78bfa, #ec4899, #6d28d9) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 0 0 5px rgba(126,34,206,.20),
    inset 0 -9px 17px rgba(91,14,76,.36),
    0 8px 0 rgba(45,7,40,.84) !important;
}
.bw-clean-tcg-card[data-rarity="4"] .bw-clean-card-inner {
    background: repeating-linear-gradient(0deg, rgba(76,29,149,.020) 0 1px, transparent 1px 3px),
    linear-gradient(155deg, #fffefe 0%, #f7f1ff 55%, #eaddf8 100%) !important;
}
.bw-clean-tcg-card[data-rarity="5"] .bw-clean-card-inner {
    background: repeating-linear-gradient(0deg, rgba(133,77,14,.022) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 88% 8%, rgba(255,215,86,.20), transparent 27%),
    linear-gradient(155deg, #fffdf4 0%, #fff5d6 56%, #ead8a6 100%) !important;
}
.bw-clean-tcg-card[data-rarity="6"] .bw-clean-card-inner {
    background: repeating-linear-gradient(0deg, rgba(126,34,206,.018) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 88% 8%, rgba(236,72,153,.18), transparent 28%),
    radial-gradient(circle at 8% 92%, rgba(103,232,249,.13), transparent 30%),
    linear-gradient(155deg, #fffafe 0%, #fce7f3 52%, #e9d5ff 100%) !important;
}
.bw-clean-tcg-card[data-rarity="3"] .bw-clean-card-image {
    border-color: rgba(37,99,235,.62) !important;
    box-shadow: 0 2px 0 rgba(255,255,255,.9), 0 6px 14px rgba(30,64,175,.22), inset 0 0 0 1px rgba(255,255,255,.40) !important;
}
.bw-clean-tcg-card[data-rarity="4"] .bw-clean-card-image {
    border-color: rgba(126,34,206,.68) !important;
    box-shadow: 0 2px 0 rgba(255,255,255,.92), 0 7px 16px rgba(88,28,135,.28), inset 0 0 0 2px rgba(216,180,254,.32) !important;
}
.bw-clean-tcg-card[data-rarity="5"] .bw-clean-card-image {
    border: 3px double rgba(180,104,5,.82) !important;
    box-shadow: 0 2px 0 rgba(255,255,255,.95), 0 8px 19px rgba(146,82,5,.32), inset 0 0 0 2px rgba(255,235,155,.44) !important;
}
.bw-clean-tcg-card[data-rarity="6"] .bw-clean-card-image {
    border: 3px double rgba(190,24,93,.78) !important;
    box-shadow: 0 2px 0 rgba(255,255,255,.95), 0 8px 20px rgba(157,23,77,.31), inset 0 0 0 2px rgba(240,171,252,.42) !important;
}
.bw-clean-tcg-card[data-rarity="4"] .bw-clean-card-power {
    border-color: rgba(126,34,206,.30) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(233,213,255,.82)) !important;
}
.bw-clean-tcg-card[data-rarity="5"] .bw-clean-card-power {
    border-color: rgba(180,104,5,.38) !important;
    background: linear-gradient(135deg, #fffdf4, #ffe9a6) !important;
    box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(180,104,5,.17) !important;
}
.bw-clean-tcg-card[data-rarity="6"] .bw-clean-card-power {
    border-color: rgba(190,24,93,.34) !important;
    background: linear-gradient(135deg, #fff, #fbcfe8 48%, #ddd6fe) !important;
    box-shadow: inset 0 1px 0 #fff, 0 3px 11px rgba(190,24,93,.18) !important;
}
.bw-clean-tcg-card[data-rarity="4"] .bw-reward-rarity, .bw-clean-tcg-card[data-rarity="5"] .bw-reward-rarity, .bw-clean-tcg-card[data-rarity="6"] .bw-reward-rarity {
    min-height: 25px !important;
    padding: 6px 10px !important;
    font-size: 7.5px !important;
    box-shadow: 0 4px 12px var(--clean-glow) !important;
}
.bw-clean-tcg-card[data-rarity="5"] .bw-reward-rarity {
    border-color: rgba(255,245,190,.78) !important;
    background: linear-gradient(135deg, #fff5b8, #f59e0b) !important;
}
.bw-clean-tcg-card[data-rarity="6"] .bw-reward-rarity {
    color: #fff !important;
    border-color: rgba(255,255,255,.64) !important;
    background: linear-gradient(110deg, #7c3aed, #ec4899 52%, #fb7185) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}
.bw-card-opening-modal[data-rarity="1"] .bw-card-opening-particles i:nth-child(n/**/+5), .bw-card-opening-modal[data-rarity="2"] .bw-card-opening-particles i:nth-child(n/**/+7), .bw-card-opening-modal[data-rarity="3"] .bw-card-opening-particles i:nth-child(n/**/+9), .bw-card-opening-modal[data-rarity="4"] .bw-card-opening-particles i:nth-child(n/**/+13), .bw-card-opening-modal[data-rarity="5"] .bw-card-opening-particles i:nth-child(n/**/+17) {
    display: none !important;
}
.bw-card-opening-modal[data-rarity="5"] .bw-card-opening-particles i:nth-child(-n/**/+16), .bw-card-opening-modal[data-rarity="6"] .bw-card-opening-particles i:nth-child(-n/**/+20) {
    display: block !important;
}
.bw-card-opening-modal[data-rarity="4"].is-revealed .bw-card-opening-rays {
    opacity: .12 !important;
}
.bw-card-opening-modal[data-rarity="5"].is-revealed .bw-card-opening-rays {
    opacity: .25 !important;
}
.bw-card-opening-modal[data-rarity="6"].is-revealed .bw-card-opening-rays {
    opacity: .38 !important;
}
.bw-card-opening-modal[data-rarity="4"].is-revealed .bw-clean-card-inner {
    animation: bwEpicCardPunch .72s cubic-bezier(.18,.82,.2,1.08) .22s 1 both;
}
.bw-card-opening-modal[data-rarity="5"].is-revealed .bw-clean-card-inner {
    animation: bwLegendCardPunch .88s cubic-bezier(.18,.82,.2,1.08) .22s 1 both;
}
.bw-card-opening-modal[data-rarity="6"].is-revealed .bw-clean-card-inner {
    animation: bwMythicCardPunch 1.02s cubic-bezier(.18,.82,.2,1.08) .18s 1 both;
}
@keyframes bwEpicCardPunch {
0% {
    transform: scale(.965);
    filter: brightness(1.35) saturate(1.25);
}
55% {
    transform: scale(1.012);
    filter: brightness(1.08) saturate(1.12);
}
100% {
    transform: scale(1);
    filter: none;
}
}
@keyframes bwLegendCardPunch {
0% {
    transform: scale(.95);
    filter: brightness(1.55) saturate(1.40);
}
50% {
    transform: scale(1.018);
    filter: brightness(1.12) saturate(1.15);
}
100% {
    transform: scale(1);
    filter: none;
}
}
@keyframes bwMythicCardPunch {
0% {
    transform: scale(.93);
    filter: brightness(1.75) saturate(1.55) hue-rotate(-12deg);
}
42% {
    transform: scale(1.025);
    filter: brightness(1.18) saturate(1.28) hue-rotate(8deg);
}
72% {
    transform: scale(.995);
    filter: brightness(1.05) saturate(1.12);
}
100% {
    transform: scale(1);
    filter: none;
}
}
.bw-card-opening-modal[data-rarity="5"].is-revealed .bw-clean-card-glare, .bw-card-opening-modal[data-rarity="6"].is-revealed .bw-clean-card-glare {
    animation: bwRareGlareSweep 1.05s ease-out .26s 1 both !important;
}
@keyframes bwRareGlareSweep {
0% {
    opacity: 0;
    transform: translateX(-65%);
}
42% {
    opacity: .62;
}
100% {
    opacity: .10;
    transform: translateX(65%);
}
}
.bw-card-opening-modal[data-rarity="4"] .bw-card-rarity-splash::before, .bw-card-opening-modal[data-rarity="5"] .bw-card-rarity-splash::before, .bw-card-opening-modal[data-rarity="6"] .bw-card-rarity-splash::before {
    display: block;
    margin-bottom: 8px;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .18em;
    color: rgba(255,255,255,.78);
}
.bw-card-opening-modal[data-rarity="4"] .bw-card-rarity-splash::before {
    content: "EPIC DROP";
}
.bw-card-opening-modal[data-rarity="5"] .bw-card-rarity-splash::before {
    content: "LEGENDARY DROP";
}
.bw-card-opening-modal[data-rarity="6"] .bw-card-rarity-splash::before {
    content: "MYTHIC DROP";
}
@media (max-width: 390px) {
.bw-card-opening-stage {
    height: min(462px, calc(100dvh - 145px)) !important;
}
.bw-card-opening-stage>.bw-clean-tcg-card {
    aspect-ratio: 2.5 / 3.82 !important;
}
.bw-clean-card-info {
    padding-top: 7px !important;
}
.bw-clean-card-meta {
    margin-top: 5px !important;
    padding-top: 5px !important;
}
}
@media (max-height: 700px) {
.bw-card-opening-modal {
    --card-width: min(258px, calc(100vw - 34px));
}
.bw-card-opening-stage {
    height: min(416px, calc(100dvh - 136px)) !important;
    padding-top: 14px !important;
}
}
html.bw-lite-card-fx .bw-card-opening-modal[data-rarity="5"] .bw-card-opening-particles i:nth-child(n/**/+7), html.bw-lite-card-fx .bw-card-opening-modal[data-rarity="6"] .bw-card-opening-particles i:nth-child(n/**/+7) {
    display: none !important;
}
html.bw-lite-card-fx .bw-card-opening-modal[data-rarity="4"].is-revealed .bw-clean-card-inner, html.bw-lite-card-fx .bw-card-opening-modal[data-rarity="5"].is-revealed .bw-clean-card-inner, html.bw-lite-card-fx .bw-card-opening-modal[data-rarity="6"].is-revealed .bw-clean-card-inner, html.bw-lite-card-fx .bw-card-opening-modal[data-rarity="5"].is-revealed .bw-clean-card-glare, html.bw-lite-card-fx .bw-card-opening-modal[data-rarity="6"].is-revealed .bw-clean-card-glare {
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
.bw-card-opening-modal[data-rarity="4"].is-revealed .bw-clean-card-inner, .bw-card-opening-modal[data-rarity="5"].is-revealed .bw-clean-card-inner, .bw-card-opening-modal[data-rarity="6"].is-revealed .bw-clean-card-inner, .bw-card-opening-modal[data-rarity="5"].is-revealed .bw-clean-card-glare, .bw-card-opening-modal[data-rarity="6"].is-revealed .bw-clean-card-glare {
    animation: none !important;
}
}
.bw-card-opening-stage {
    height: min(525px, calc(100dvh - 148px)) !important;
    min-height: 455px !important;
    max-height: 525px !important;
    overflow: visible !important;
}
.bw-card-opening-stage>.bw-clean-tcg-card {
    aspect-ratio: auto !important;
}
.bw-clean-card-inner {
    height: auto !important;
    min-height: 0 !important;
}
.bw-clean-card-info {
    flex: 0 0 auto !important;
}
.bw-clean-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.bw-card-opening-modal.is-rarity-tease .bw-card-opening-glow {
    opacity: .72 !important;
    animation: bwDopamineCharge .62s ease-in-out infinite alternate !important;
}
.bw-card-opening-modal.is-rarity-tease .bw-card-pack-large {
    animation: bwDopaminePackCharge .24s linear infinite !important;
}
.bw-card-opening-modal[data-rarity="5"].is-rarity-tease .bw-card-opening-stage, .bw-card-opening-modal[data-rarity="6"].is-rarity-tease .bw-card-opening-stage {
    filter: saturate(1.12) brightness(1.04);
}
@keyframes bwDopamineCharge {
from {
    transform: translate(-50%, -50%) scale(.88);
    opacity: .38;
}
to {
    transform: translate(-50%, -50%) scale(1.14);
    opacity: .86;
}
}
@keyframes bwDopaminePackCharge {
0%, 100% {
    transform: translateX(0) rotate(-2deg) scale(1);
}
25% {
    transform: translateX(-2px) rotate(-2.8deg) scale(1.006);
}
75% {
    transform: translateX(2px) rotate(-1.1deg) scale(1.006);
}
}
.bw-card-impact-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 13;
    width: 280px;
    height: 280px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.bw-card-impact-rings i {
    position: absolute;
    inset: 0;
    border: 2px solid var(--rarity-a, #8b5cf6);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 20px var(--rarity-glow, rgba(139,92,246,.55));
}
.bw-card-opening-modal.is-rarity-hit .bw-card-impact-rings i {
    animation: bwDopamineRing .95s cubic-bezier(.12,.74,.18,1) 1 both;
}
.bw-card-opening-modal.is-rarity-hit .bw-card-impact-rings i:nth-child(2) {
    animation-delay: .10s;
}
.bw-card-opening-modal.is-rarity-hit .bw-card-impact-rings i:nth-child(3) {
    animation-delay: .20s;
}
@keyframes bwDopamineRing {
0% {
    opacity: .88;
    transform: scale(.28);
}
68% {
    opacity: .34;
}
100% {
    opacity: 0;
    transform: scale(1.72);
}
}
.bw-card-rarity-crown {
    position: absolute;
    left: 50%;
    top: 5px;
    z-index: 58;
    display: none;
    width: 58px;
    height: 44px;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -28px) scale(.5) rotate(-12deg);
    opacity: 0;
    color: #ffe58b;
    font-size: 30px;
    text-shadow: 0 3px 0 #8a4b05, 0 0 18px rgba(255,208,66,.95);
    pointer-events: none;
}
.bw-card-opening-modal[data-rarity="5"] .bw-card-rarity-crown, .bw-card-opening-modal[data-rarity="6"] .bw-card-rarity-crown {
    display: flex;
}
.bw-card-opening-modal[data-rarity="6"] .bw-card-rarity-crown {
    color: #fff;
    text-shadow: 0 3px 0 #7c3aed,
    0 0 12px #67e8f9,
    0 0 24px #ec4899;
}
.bw-card-opening-modal.is-celebrating .bw-card-rarity-crown {
    animation: bwDopamineCrown 1.45s cubic-bezier(.18,.86,.22,1.12) .08s 1 both;
}
@keyframes bwDopamineCrown {
0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(.35) rotate(-18deg);
}
32% {
    opacity: 1;
    transform: translate(-50%, -14px) scale(1.18) rotate(8deg);
}
54% {
    transform: translate(-50%, -10px) scale(.94) rotate(-3deg);
}
78% {
    opacity: 1;
    transform: translate(-50%, -12px) scale(1) rotate(0);
}
100% {
    opacity: 0;
    transform: translate(-50%, -35px) scale(.92);
}
}
.bw-card-drop-banner {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 62;
    width: min(310px, calc(100vw - 48px));
    padding: 12px 18px 13px;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 18px;
    transform: translate(-50%, -50%) scale(.56);
    opacity: 0;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, rgba(35,52,86,.96), rgba(72,48,132,.96));
    box-shadow: 0 16px 42px rgba(0,0,0,.48), 0 0 32px var(--rarity-glow);
    pointer-events: none;
}
.bw-card-drop-banner small, .bw-card-drop-banner strong, .bw-card-drop-banner span {
    display: block;
}
.bw-card-drop-banner small {
    margin-bottom: 3px;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .22em;
    opacity: .78;
}
.bw-card-drop-banner strong {
    font-size: clamp(24px, 7vw, 38px);
    font-weight: 1000;
    letter-spacing: -.035em;
    line-height: 1;
    text-shadow: 0 3px 10px rgba(0,0,0,.28);
}
.bw-card-drop-banner span {
    margin-top: 5px;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .15em;
    opacity: .88;
}
.bw-card-opening-modal[data-rarity="3"] .bw-card-drop-banner {
    background: linear-gradient(135deg, rgba(18,69,137,.97), rgba(38,111,206,.97));
}
.bw-card-opening-modal[data-rarity="4"] .bw-card-drop-banner {
    background: linear-gradient(135deg, rgba(65,20,118,.98), rgba(151,56,220,.97));
}
.bw-card-opening-modal[data-rarity="5"] .bw-card-drop-banner {
    color: #4b2800;
    border-color: rgba(255,249,205,.92);
    background: linear-gradient(135deg, #fff2a8, #f59e0b 52%, #ffd86a);
    box-shadow: 0 18px 48px rgba(0,0,0,.52), 0 0 44px rgba(245,158,11,.78);
}
.bw-card-opening-modal[data-rarity="6"] .bw-card-drop-banner {
    border-color: rgba(255,255,255,.86);
    background: linear-gradient(110deg, #5b21b6, #db2777 42%, #fb7185 67%, #7c3aed);
    box-shadow: 0 18px 52px rgba(0,0,0,.56),
    0 0 34px rgba(236,72,153,.82),
    0 0 66px rgba(103,232,249,.36);
}
.bw-card-opening-modal.is-celebrating .bw-card-drop-banner {
    animation: bwDopamineBanner 1.85s cubic-bezier(.16,.84,.18,1.08) .04s 1 both;
}
.bw-card-opening-modal[data-rarity="1"].is-celebrating .bw-card-drop-banner, .bw-card-opening-modal[data-rarity="2"].is-celebrating .bw-card-drop-banner {
    animation-duration: 1.15s;
}
@keyframes bwDopamineBanner {
0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.48) rotate(-3deg);
}
24% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.10) rotate(1deg);
}
42% {
    transform: translate(-50%, -50%) scale(.97) rotate(0);
}
68% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1);
}
100% {
    opacity: 0;
    transform: translate(-50%, -118%) scale(.90);
}
}
.bw-card-confetti {
    position: absolute;
    inset: 0;
    z-index: 57;
    overflow: visible;
    pointer-events: none;
}
.bw-card-confetti i {
    --tx: 0px;
    --ty: -190px;
    --rot: 180deg;
    --delay: 0s;
    --confetti: #fff;
    position: absolute;
    left: 50%;
    top: 48%;
    width: 7px;
    height: 12px;
    border-radius: 2px;
    opacity: 0;
    background: var(--confetti);
    box-shadow: 0 0 8px rgba(255,255,255,.38);
}
.bw-card-opening-modal.is-celebrating .bw-card-confetti i {
    animation: bwDopamineConfetti 1.55s cubic-bezier(.16,.72,.28,1) var(--delay) 1 both;
}
@keyframes bwDopamineConfetti {
0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2) rotate(0);
}
12%, 78% {
    opacity: 1;
}
100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.92) rotate(var(--rot));
}
}
.bw-card-confetti i:nth-child(1) {
    --tx: -152px;
    --ty: -205px;
    --rot: 420deg;
    --delay: .00s;
    --confetti: #fef08a;
}
.bw-card-confetti i:nth-child(2) {
    --tx: -112px;
    --ty: -242px;
    --rot: -350deg;
    --delay: .03s;
    --confetti: #c4b5fd;
}
.bw-card-confetti i:nth-child(3) {
    --tx: -72px;
    --ty: -188px;
    --rot: 540deg;
    --delay: .07s;
    --confetti: #f9a8d4;
}
.bw-card-confetti i:nth-child(4) {
    --tx: -35px;
    --ty: -260px;
    --rot: -420deg;
    --delay: .01s;
    --confetti: #67e8f9;
}
.bw-card-confetti i:nth-child(5) {
    --tx: 18px;
    --ty: -220px;
    --rot: 380deg;
    --delay: .05s;
    --confetti: #fff7ae;
}
.bw-card-confetti i:nth-child(6) {
    --tx: 58px;
    --ty: -265px;
    --rot: -520deg;
    --delay: .02s;
    --confetti: #fb7185;
}
.bw-card-confetti i:nth-child(7) {
    --tx: 102px;
    --ty: -196px;
    --rot: 470deg;
    --delay: .08s;
    --confetti: #93c5fd;
}
.bw-card-confetti i:nth-child(8) {
    --tx: 148px;
    --ty: -232px;
    --rot: -410deg;
    --delay: .04s;
    --confetti: #fde68a;
}
.bw-card-confetti i:nth-child(9) {
    --tx: -166px;
    --ty: -105px;
    --rot: 620deg;
    --delay: .10s;
    --confetti: #f0abfc;
}
.bw-card-confetti i:nth-child(10) {
    --tx: 166px;
    --ty: -118px;
    --rot: -620deg;
    --delay: .06s;
    --confetti: #5eead4;
}
.bw-card-confetti i:nth-child(11) {
    --tx: -142px;
    --ty: 18px;
    --rot: 520deg;
    --delay: .12s;
    --confetti: #fda4af;
}
.bw-card-confetti i:nth-child(12) {
    --tx: 142px;
    --ty: 12px;
    --rot: -500deg;
    --delay: .09s;
    --confetti: #a5b4fc;
}
.bw-card-confetti i:nth-child(13) {
    --tx: -92px;
    --ty: 92px;
    --rot: 680deg;
    --delay: .04s;
    --confetti: #fef08a;
}
.bw-card-confetti i:nth-child(14) {
    --tx: 88px;
    --ty: 86px;
    --rot: -680deg;
    --delay: .11s;
    --confetti: #f9a8d4;
}
.bw-card-confetti i:nth-child(15) {
    --tx: -38px;
    --ty: 118px;
    --rot: 560deg;
    --delay: .07s;
    --confetti: #67e8f9;
}
.bw-card-confetti i:nth-child(16) {
    --tx: 34px;
    --ty: 126px;
    --rot: -560deg;
    --delay: .02s;
    --confetti: #fde68a;
}
.bw-card-confetti i:nth-child(17) {
    --tx: -188px;
    --ty: -28px;
    --rot: 740deg;
    --delay: .05s;
    --confetti: #fb7185;
}
.bw-card-confetti i:nth-child(18) {
    --tx: 188px;
    --ty: -36px;
    --rot: -740deg;
    --delay: .08s;
    --confetti: #c4b5fd;
}
.bw-card-confetti i:nth-child(19) {
    --tx: -12px;
    --ty: -292px;
    --rot: 820deg;
    --delay: .12s;
    --confetti: #ffffff;
}
.bw-card-confetti i:nth-child(20) {
    --tx: 12px;
    --ty: 142px;
    --rot: -820deg;
    --delay: .09s;
    --confetti: #f472b6;
}
.bw-card-opening-modal[data-rarity="1"] .bw-card-confetti i:nth-child(n/**/+5), .bw-card-opening-modal[data-rarity="2"] .bw-card-confetti i:nth-child(n/**/+7), .bw-card-opening-modal[data-rarity="3"] .bw-card-confetti i:nth-child(n/**/+9), .bw-card-opening-modal[data-rarity="4"] .bw-card-confetti i:nth-child(n/**/+13), .bw-card-opening-modal[data-rarity="5"] .bw-card-confetti i:nth-child(n/**/+17) {
    display: none;
}
.bw-card-opening-modal.is-screen-shake .bw-card-opening-dialog {
    animation: bwDopamineScreenHit .48s cubic-bezier(.22,.78,.22,1) 1 both !important;
}
@keyframes bwDopamineScreenHit {
0%, 100% {
    transform: translate3d(0,0,0);
}
18% {
    transform: translate3d(-5px, 2px, 0) rotate(-.25deg);
}
36% {
    transform: translate3d(5px, -2px, 0) rotate(.25deg);
}
54% {
    transform: translate3d(-3px, 1px, 0);
}
72% {
    transform: translate3d(3px, -1px, 0);
}
}
.bw-card-opening-modal.is-mega-hit.is-rarity-hit .bw-card-opening-flash {
    opacity: 1 !important;
    animation: bwDopamineMegaFlash .58s ease-out 1 both !important;
}
@keyframes bwDopamineMegaFlash {
0% {
    opacity: 0;
    transform: scale(.35);
}
16% {
    opacity: 1;
    transform: scale(1.18);
}
100% {
    opacity: 0;
    transform: scale(1.65);
}
}
.bw-card-opening-modal.is-jackpot.is-rarity-hit .bw-clean-card-edge {
    animation: bwDopamineMythicEdge 1.25s ease-out 1 both !important;
}
.bw-card-opening-modal.is-jackpot.is-rarity-hit .bw-clean-tcg-card::after {
    animation: bwDopamineMythicAura 1.35s ease-out 1 both !important;
}
@keyframes bwDopamineMythicEdge {
0% {
    filter: brightness(2) saturate(1.8) hue-rotate(-25deg);
}
35% {
    filter: brightness(1.38) saturate(1.45) hue-rotate(28deg);
}
100% {
    filter: none;
}
}
@keyframes bwDopamineMythicAura {
0% {
    opacity: 0;
    transform: scale(.86) rotate(-4deg);
}
34% {
    opacity: 1;
    transform: scale(1.05) rotate(2deg);
}
100% {
    opacity: 1;
    transform: scale(1) rotate(0);
}
}
@media (max-width: 390px) {
.bw-card-opening-modal {
    --card-width: min(282px, calc(100vw - 30px));
}
.bw-card-opening-stage {
    height: min(490px, calc(100dvh - 145px)) !important;
    min-height: 430px !important;
    max-height: 490px !important;
}
.bw-card-drop-banner {
    width: min(280px, calc(100vw - 42px));
}
}
@media (max-height: 700px) {
.bw-card-opening-modal {
    --card-width: min(248px, calc(100vw - 34px));
}
.bw-card-opening-stage {
    height: min(405px, calc(100dvh - 142px)) !important;
    min-height: 375px !important;
    max-height: 405px !important;
}
.bw-clean-card-inner {
    padding: 8px !important;
}
.bw-clean-card-top {
    min-height: 42px !important;
}
.bw-clean-card-title-wrap h2 {
    font-size: 15px !important;
}
.bw-clean-card-info h3 {
    font-size: 12.8px !important;
}
.bw-clean-card-info p {
    min-height: 22px !important;
    font-size: 8.2px !important;
}
}
html.bw-lite-card-fx .bw-card-impact-rings, html.bw-lite-card-fx .bw-card-confetti, html.bw-lite-card-fx .bw-card-rarity-crown {
    display: none !important;
}
html.bw-lite-card-fx .bw-card-opening-modal.is-rarity-tease .bw-card-opening-glow, html.bw-lite-card-fx .bw-card-opening-modal.is-rarity-tease .bw-card-pack-large, html.bw-lite-card-fx .bw-card-opening-modal.is-screen-shake .bw-card-opening-dialog, html.bw-lite-card-fx .bw-card-opening-modal.is-mega-hit.is-rarity-hit .bw-card-opening-flash, html.bw-lite-card-fx .bw-card-opening-modal.is-jackpot.is-rarity-hit .bw-clean-card-edge, html.bw-lite-card-fx .bw-card-opening-modal.is-jackpot.is-rarity-hit .bw-clean-tcg-card::after {
    animation: none !important;
}
html.bw-lite-card-fx .bw-card-opening-modal.is-celebrating .bw-card-drop-banner {
    animation: bwDopamineBannerLite 1.1s ease-out 1 both !important;
}
@keyframes bwDopamineBannerLite {
0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.84);
}
20%, 70% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1);
}
100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(.96);
}
}
@media (prefers-reduced-motion: reduce) {
.bw-card-impact-rings, .bw-card-confetti, .bw-card-rarity-crown {
    display: none !important;
}
.bw-card-opening-modal.is-celebrating .bw-card-drop-banner, .bw-card-opening-modal.is-rarity-tease .bw-card-opening-glow, .bw-card-opening-modal.is-rarity-tease .bw-card-pack-large, .bw-card-opening-modal.is-screen-shake .bw-card-opening-dialog, .bw-card-opening-modal.is-mega-hit.is-rarity-hit .bw-card-opening-flash, .bw-card-opening-modal.is-jackpot.is-rarity-hit .bw-clean-card-edge, .bw-card-opening-modal.is-jackpot.is-rarity-hit .bw-clean-tcg-card::after {
    animation: none !important;
}
}
.bw-community-tabs {
    grid-template-columns: repeat(3,minmax(0,1fr));
}
.bw-community-panel-general, .bw-community-quizzes-panel, .bw-groups-panel {
    min-height: 180px;
}
.bw-community-quizzes-view, .bw-cq-editor-page, .bw-cq-play-page {
    padding-bottom: 34px;
}
.bw-cq-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg,#1f4f7c,#3f7fb9 65%,#5d91c1);
    color: #fff;
    box-shadow: 0 14px 32px rgba(31,79,124,.24);
}
.bw-cq-hero:after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -70px;
    top: -90px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
}
.bw-cq-hero>div, .bw-cq-create-btn {
    position: relative;
    z-index: 1;
}
.bw-cq-kicker, .bw-cq-editor-hero>div>span, .bw-cq-result-kicker {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .78;
}
.bw-cq-hero h3, .bw-cq-editor-hero h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}
.bw-cq-hero p, .bw-cq-editor-hero p {
    max-width: 390px;
    margin-top: 6px;
    color: rgba(255,255,255,.84);
    font-size: 12px;
    line-height: 1.45;
}
.bw-cq-create-btn {
    min-width: 112px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #214f7d;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(15,23,42,.15);
    cursor: pointer;
}
.bw-cq-create-btn i {
    margin-right: 6px;
}
.bw-cq-create-btn.is-premium {
    background: #fff5cc;
    color: #8a6200;
}
.bw-cq-list-tabs {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: stretch;
    gap: 7px;
    margin: 0 0 13px;
    padding: 5px;
    border: 1px solid #dce4ed;
    border-radius: 16px;
    background: #edf2f7;
    text-align: left;
    box-sizing: border-box;
}
.bw-cq-list-tabs button {
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #6b788a;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.bw-cq-list-tabs button:active {
    transform: scale(.98);
}
.bw-cq-list-tabs button.is-active {
    background: #fff;
    color: #2c618f;
    box-shadow: 0 5px 14px rgba(15,23,42,.08);
}
.bw-cq-list-tabs button>b {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(51,102,153,.10);
    font-size: 9px;
}
.bw-cq-list-tabs button.is-active>b {
    background: #e8f1fa;
    color: #285f91;
}
.bw-cq-search-panel {
    display: flex;
    gap: 8px;
    margin-bottom: 7px;
}
.bw-cq-search {
    flex: 1;
    min-width: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #dbe3ed;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15,23,42,.05);
}
.bw-cq-search:focus-within {
    border-color: #6f9dc8;
    box-shadow: 0 0 0 3px rgba(51,102,153,.10);
}
.bw-cq-search>i {
    color: #6b7b8e;
}
.bw-cq-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: #172033;
}
.bw-cq-search button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
}
#bwCommunityQuizSearchBtn {
    min-width: 78px;
    border: 0;
    border-radius: 14px;
    background: #336699;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.bw-cq-search-help {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 3px 16px;
    color: #718096;
    font-size: 11px;
    line-height: 1.4;
}
.bw-cq-section {
    margin-top: 18px;
}
.bw-cq-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 0 2px;
}
.bw-cq-section-head h4 {
    margin: 0;
    color: #182334;
    font-size: 16px;
}
.bw-cq-section-head p {
    margin-top: 3px;
    color: #8190a4;
    font-size: 11px;
}
.bw-cq-section-head>span {
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #e9f1f8;
    color: #2d628f;
    font-size: 11px;
    font-weight: 900;
}
.bw-cq-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.bw-cq-card {
    padding: 14px;
    border: 1px solid #e1e7ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(15,23,42,.06);
}
.bw-cq-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bw-cq-author-avatar {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg,#336699,#5b8fbe);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}
.bw-cq-card-author {
    flex: 1;
    min-width: 0;
}
.bw-cq-card-author b, .bw-cq-card-author span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bw-cq-card-author b {
    color: #192333;
    font-size: 13px;
}
.bw-cq-card-author span {
    margin-top: 2px;
    color: #7b899c;
    font-size: 10px;
    font-weight: 700;
}
.bw-cq-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}
.bw-cq-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}
.bw-cq-badge.is-public {
    background: #eaf8ef;
    color: #168447;
}
.bw-cq-badge.is-private {
    background: #f2f4f7;
    color: #556274;
}
.bw-cq-badge.is-owner {
    background: #eef4ff;
    color: #2f62a0;
}
.bw-cq-card-body {
    padding: 13px 1px 10px;
}
.bw-cq-card-body h4 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    line-height: 1.35;
    word-break: break-word;
}
.bw-cq-card-body p {
    margin-top: 6px;
    color: #68778b;
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
}
.bw-cq-card-body p.is-muted {
    color: #a0a9b7;
}
.bw-cq-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 11px;
}
.bw-cq-card-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border-radius: 10px;
    background: #f5f7fa;
    color: #5d6b7d;
    font-size: 10px;
    font-weight: 800;
}
.bw-cq-code, .bw-cq-existing-code {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    padding: 9px 11px;
    border: 1px dashed #aac0d5;
    border-radius: 13px;
    background: #f5f9fd;
    color: #315f89;
}
button.bw-cq-code {
    cursor: pointer;
    text-align: left;
}
.bw-cq-code>span {
    flex: 1;
    font-size: 11px;
}
.bw-cq-code small {
    color: #66839f;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}
.bw-cq-card-actions {
    display: flex;
    gap: 7px;
}
.bw-cq-card-actions button {
    height: 42px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .15s ease,opacity .15s ease;
}
.bw-cq-card-actions button:active {
    transform: scale(.97);
}
.bw-cq-card-actions button:disabled {
    opacity: .55;
    cursor: default;
}
.bw-cq-start-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    background: #336699;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}
.bw-cq-share-btn, .bw-cq-icon-btn {
    width: 42px;
    flex: 0 0 42px;
    background: #edf2f7;
    color: #42698e;
}
.bw-cq-icon-btn.is-danger {
    background: #fff0f0;
    color: #d64545;
}
.bw-cq-empty {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    border: 1px dashed #d7dfe9;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}
.bw-cq-empty>i {
    margin-bottom: 10px;
    color: #6b91b6;
    font-size: 28px;
}
.bw-cq-empty>b {
    color: #263446;
    font-size: 15px;
}
.bw-cq-empty>p {
    max-width: 390px;
    margin-top: 5px;
    color: #7b899a;
    font-size: 12px;
    line-height: 1.45;
}
.bw-cq-empty>button {
    margin-top: 12px;
    min-height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 12px;
    background: #336699;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-empty.is-error {
    border-color: #f1baba;
    background: #fff8f8;
}
.bw-cq-empty.is-error>i {
    color: #d94b4b;
}
.bw-cq-editor-hero {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 13px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(135deg,#285f91,#4c86b9);
    color: #fff;
    box-shadow: 0 12px 28px rgba(51,102,153,.20);
}
.bw-cq-editor-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(255,255,255,.16);
    font-size: 21px;
}
.bw-cq-editor-plan {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
}
.bw-cq-editor-plan.is-premium {
    background: #fff0ad;
    color: #775300;
}
.bw-cq-empty.is-limit {
    border-color: #ead18e;
    background: #fffaf0;
}
.bw-cq-empty.is-limit>i {
    color: #a87500;
}
.bw-cq-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.bw-cq-empty-actions>button {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: #9a6a00;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-empty-actions>button.is-secondary {
    background: #edf2f7;
    color: #41617e;
}
.bw-cq-editor-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bw-cq-editor-card {
    padding: 14px;
    border: 1px solid #e1e7ef;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15,23,42,.05);
}
.bw-cq-editor-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.bw-cq-editor-card-title>span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaf2f9;
    color: #336699;
}
.bw-cq-editor-card-title>div {
    flex: 1;
    min-width: 0;
}
.bw-cq-editor-card-title b, .bw-cq-editor-card-title small {
    display: block;
}
.bw-cq-editor-card-title b {
    color: #172235;
    font-size: 14px;
}
.bw-cq-editor-card-title small {
    margin-top: 2px;
    color: #8793a4;
    font-size: 10px;
}
.bw-cq-questions-title>strong {
    padding: 7px 9px;
    border-radius: 10px;
    background: #edf3f8;
    color: #315f89;
    font-size: 10px;
}
.bw-cq-field {
    display: block;
    margin-top: 12px;
}
.bw-cq-field:first-of-type {
    margin-top: 0;
}
.bw-cq-field>span {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    color: #344054;
    font-size: 11px;
    font-weight: 900;
}
.bw-cq-field>span em {
    color: #98a2b3;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}
.bw-cq-field input, .bw-cq-field textarea, .bw-cq-field select, .bw-cq-answer-editor textarea {
    width: 100%;
    border: 1px solid #dbe2eb;
    outline: 0;
    border-radius: 12px;
    background: #fbfcfd;
    color: #172033;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    transition: border .18s ease,box-shadow .18s ease,background .18s ease;
}
.bw-cq-field input, .bw-cq-field select {
    height: 45px;
    padding: 0 12px;
}
.bw-cq-field textarea, .bw-cq-answer-editor textarea {
    padding: 10px 11px;
    resize: vertical;
}
.bw-cq-field input:focus, .bw-cq-field textarea:focus, .bw-cq-field select:focus, .bw-cq-answer-editor textarea:focus {
    border-color: #6c99c3;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(51,102,153,.10);
}
.bw-cq-field input.has-error, .bw-cq-field textarea.has-error, .bw-cq-answer-editor textarea.has-error {
    border-color: #e05252;
    box-shadow: 0 0 0 3px rgba(224,82,82,.09);
}
.bw-cq-field>small {
    display: block;
    margin-top: 4px;
    color: #98a2b3;
    font-size: 9px;
    text-align: right;
}
.bw-cq-visibility-options {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}
.bw-cq-visibility-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 125px;
    padding: 13px;
    border: 1px solid #dfe5ed;
    border-radius: 15px;
    background: #fafbfd;
    cursor: pointer;
}
.bw-cq-visibility-card.is-active {
    border-color: #6f9bc3;
    background: #f1f7fc;
    box-shadow: 0 0 0 3px rgba(51,102,153,.08);
}
.bw-cq-visibility-card>input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bw-cq-visibility-card>i {
    margin-top: 2px;
    color: #47749d;
    font-size: 18px;
}
.bw-cq-visibility-card>div {
    flex: 1;
}
.bw-cq-visibility-card b, .bw-cq-visibility-card p {
    display: block;
}
.bw-cq-visibility-card b {
    color: #213044;
    font-size: 12px;
}
.bw-cq-visibility-card p {
    margin-top: 5px;
    color: #758397;
    font-size: 10px;
    line-height: 1.45;
}
.bw-cq-visibility-card>span {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid #b7c2cf;
    border-radius: 50%;
}
.bw-cq-visibility-card.is-active>span {
    border: 5px solid #336699;
}
.bw-cq-existing-code {
    margin: 12px 0 0;
}
.bw-cq-existing-code>div {
    flex: 1;
}
.bw-cq-existing-code span, .bw-cq-existing-code b {
    display: block;
}
.bw-cq-existing-code span {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}
.bw-cq-existing-code b {
    margin-top: 2px;
    font-size: 15px;
    letter-spacing: .08em;
}
.bw-cq-existing-code button {
    border: 0;
    border-radius: 10px;
    padding: 8px 10px;
    background: #336699;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}
.bw-cq-editor-questions {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.bw-cq-question-editor {
    padding: 12px;
    border: 1px solid #dfe6ef;
    border-radius: 16px;
    background: #f9fbfd;
}
.bw-cq-question-editor>header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.bw-cq-question-editor>header>span {
    color: #26364a;
    font-size: 12px;
    font-weight: 900;
}
.bw-cq-question-editor>header>div {
    display: flex;
    gap: 5px;
}
.bw-cq-question-editor>header button {
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 9px;
    background: #e9eef5;
    color: #60748b;
    cursor: pointer;
}


/* Community Quiz: question types (single/multiple/matching) */
.bw-cq-question-editor>header>span {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.bw-cq-question-editor>header>span>em {
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef4fb;
    color: #336699;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}
.bw-cq-type-field small[data-question-type-help] {
    position: static;
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 600;
}
.bw-cq-dynamic-answer-area {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bw-cq-editor-hint, .bw-cq-answer-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 12px;
    background: #eef6ff;
    color: #315f8a;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 800;
}
.bw-cq-question-editor[data-question-kind="multiple"] .bw-cq-answer-editor>input {
    border-radius: 5px;
}
.bw-cq-matching-editor {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bw-cq-match-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.bw-cq-match-editor-left, .bw-cq-match-editor-right {
    min-width: 0;
    padding: 11px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #f8fafc;
}
.bw-cq-match-editor-left>b, .bw-cq-match-editor-right>b {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-size: 11px;
    font-weight: 900;
}
.bw-cq-match-editor-left label, .bw-cq-match-editor-right label {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    margin-top: 8px;
}
.bw-cq-match-editor-left label>span, .bw-cq-match-editor-right label>span {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #336699;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}
.bw-cq-match-editor-left textarea, .bw-cq-match-editor-right textarea,
.bw-cq-match-editor-left select {
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid #d8e0e9;
    border-radius: 11px;
    outline: none;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 12px;
    resize: none;
}
.bw-cq-match-editor-left select {
    grid-column: 2;
    margin-top: -2px;
}
.bw-cq-match-editor-right .bw-cq-add-answer {
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    padding: 10px;
    border-radius: 12px;
}
.bw-cq-match-editor-left textarea:focus, .bw-cq-match-editor-right textarea:focus,
.bw-cq-match-editor-left select:focus {
    border-color: #6b9bc8;
    box-shadow: 0 0 0 3px rgba(51,102,153,.10);
}
.community-quiz-cnt .bw-cq-question-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.community-quiz-cnt .bw-cq-question-kicker>em {
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef4fb;
    color: #336699;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}
.community-quiz-cnt .bw-community-quiz-answers button.is-selected,
.community-quiz-cnt .bw-cq-match-option.is-selected {
    border-color: #60a5fa !important;
    background: #eff6ff !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,.10);
}
.community-quiz-cnt .bw-community-quiz-answers button.is-selected>span,
.community-quiz-cnt .bw-cq-match-option.is-selected>span {
    border-color: #60a5fa;
    background: #dbeafe;
    color: #1d4ed8;
}
.community-quiz-cnt .bw-community-quiz-answers.is-multiple {
    display: flex;
    flex-direction: column;
}
.community-quiz-cnt .bw-community-quiz-answers .bw-cq-answer-hint {
    flex: 0 0 auto;
    margin-bottom: 2px;
}
.community-quiz-cnt .bw-cq-matching-play {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.community-quiz-cnt .bw-cq-matching-board {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.community-quiz-cnt .bw-cq-match-group {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #fff;
}
.community-quiz-cnt .bw-cq-match-group>header {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}
.community-quiz-cnt .bw-cq-match-group>header>span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #336699;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}
.community-quiz-cnt .bw-cq-match-group>header>b {
    color: #172033;
    font-size: 12.5px;
    line-height: 1.35;
    word-break: break-word;
}
.community-quiz-cnt .bw-cq-match-group>div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
}
.community-quiz-cnt .bw-cq-match-option {
    min-width: 0;
    min-height: 48px;
    padding: 7px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) 22px;
    align-items: center;
    gap: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #344054;
    text-align: left;
    cursor: pointer;
}
.community-quiz-cnt .bw-cq-match-option>span {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
}
.community-quiz-cnt .bw-cq-match-option>b {
    min-width: 0;
    color: inherit;
    font-size: 11px;
    line-height: 1.3;
    word-break: break-word;
}
.community-quiz-cnt .bw-cq-match-option>i {
    color: transparent;
    font-size: 10px;
}
.community-quiz-cnt .bw-cq-match-option.is-correct {
    border-color: #86efac !important;
    background: #f0fdf4 !important;
    color: #166534;
}
.community-quiz-cnt .bw-cq-match-option.is-correct>i {
    color: #16a34a;
}
.community-quiz-cnt .bw-cq-match-option.is-wrong {
    border-color: #fca5a5 !important;
    background: #fef2f2 !important;
    color: #991b1b;
}
.community-quiz-cnt .bw-cq-match-option.is-wrong>i {
    color: #dc2626;
}
.community-quiz-cnt .bw-cq-answer-feedback.is-partial {
    border-color: #fde68a;
    background: #fffbeb;
}
.community-quiz-cnt .bw-cq-answer-feedback.is-partial>span {
    color: #d97706;
}
@media (max-width: 520px) {
    .bw-cq-match-editor-grid {
        grid-template-columns: 1fr;
    }
    .community-quiz-cnt .bw-cq-match-group>div {
        grid-template-columns: 1fr;
    }
}
.bw-cq-question-editor>header button[data-community-question-remove] {
    background: #ffeded;
    color: #d64545;
}
.bw-cq-question-editor>header button:disabled {
    opacity: .35;
}
.bw-cq-answer-editors {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 11px;
}
.bw-cq-add-answer {
    background: #f3f7fb;
    font-family: inherit;
    transition: background .18s ease,border-color .18s ease,transform .18s ease;
}
.bw-cq-add-answer:hover {
    border-color: #6f96b9;
    background: #ebf3f9;
}
.bw-cq-add-answer i {
    margin-right: 5px;
}
.bw-cq-answer-editor {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 8px;
    border: 1px solid #dfe5ed;
    border-radius: 13px;
    background: #fff;
}
.bw-cq-answer-editor.is-correct {
    border-color: #64b889;
    background: #f2fbf6;
    box-shadow: 0 0 0 2px rgba(45,154,92,.08);
}
.bw-cq-answer-editor>input {
    position: absolute;
    opacity: 0;
}
.bw-cq-answer-editor>span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eaf0f6;
    color: #446b90;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-answer-editor.is-correct>span {
    background: #2f9c5f;
    color: #fff;
}
.bw-cq-answer-editor textarea {
    min-height: 60px;
    padding: 7px;
    border-radius: 9px;
    font-size: 11px;
}
.bw-cq-answer-editor>i {
    position: absolute;
    right: 7px;
    top: 7px;
    color: #2f9c5f;
    font-size: 10px;
    opacity: 0;
}
.bw-cq-answer-editor.is-correct>i {
    opacity: 1;
}
.bw-cq-add-question {
    width: 100%;
    min-height: 45px;
    margin-top: 12px;
    border: 1px dashed #8faecb;
    border-radius: 13px;
    background: #f2f7fb;
    color: #315f89;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-add-question i {
    margin-right: 6px;
}
.bw-cq-add-question:disabled {
    opacity: .45;
}
.bw-cq-form-error {
    padding: 11px 13px;
    border: 1px solid #f2b8b8;
    border-radius: 12px;
    background: #fff1f1;
    color: #b63434;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}
.bw-cq-save-btn {
    min-height: 50px;
    border: 0;
    border-radius: 15px;
    background: #336699;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(51,102,153,.22);
    cursor: pointer;
}
.bw-cq-save-btn i {
    margin-right: 7px;
}
.bw-cq-save-btn:disabled {
    opacity: .6;
}
body.bw-cq-info-open {
    overflow: hidden;
}
.community-quiz-cnt .bw-cq-info-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10050;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transform: none !important;
    transition: opacity .2s ease, visibility .2s ease;
}
.community-quiz-cnt .bw-cq-info-overlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none !important;
}
.community-quiz-cnt .bw-cq-info-backdrop {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(15,23,42,.46);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.community-quiz-cnt .bw-cq-info-sheet, .community-quiz-cnt .bw-cq-info-sheet--detailed {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    max-height: 82%;
    margin: 0;
    padding: 9px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -18px 46px rgba(15,23,42,.20);
    transform: translateY(105%);
    transition: transform .24s ease;
}
.community-quiz-cnt .bw-cq-info-overlay.is-open .bw-cq-info-sheet, .community-quiz-cnt .bw-cq-info-overlay.is-open .bw-cq-info-sheet--detailed {
    transform: translateY(0);
}
.bw-cq-info-handle {
    background: #d5dce5;
}
.bw-cq-info-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.bw-cq-info-head>div {
    min-width: 0;
}
.bw-cq-info-head small {
    display: block;
    color: #7990a6;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}
.bw-cq-info-head h3 {
    margin: 3px 0 0;
    color: #18263a;
    font-size: 17px;
    line-height: 1.3;
    word-break: break-word;
}
.bw-cq-info-head>button {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 11px;
    background: #eef2f6;
    color: #53667a;
    cursor: pointer;
}
.bw-cq-info-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 11px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #f8fafc;
}
.bw-cq-info-author>span {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #336699;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}
.bw-cq-info-author>div {
    min-width: 0;
}
.bw-cq-info-author small, .bw-cq-info-author b, .bw-cq-info-author em {
    display: block;
}
.bw-cq-info-author small {
    color: #8a98a9;
    font-size: 8px;
    font-weight: 800;
}
.bw-cq-info-author b {
    margin-top: 1px;
    color: #1e2d41;
    font-size: 13px;
}
.bw-cq-info-author em {
    margin-top: 2px;
    color: #6f7f91;
    font-size: 9px;
    font-style: normal;
}
.bw-cq-info-description {
    margin-top: 11px;
    padding: 11px 12px;
    border-radius: 14px;
    background: #f5f8fb;
    color: #59697c;
    font-size: 11px;
    line-height: 1.55;
}
.bw-cq-info-stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
    margin-top: 11px;
}
.bw-cq-info-stats>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 8px;
    border: 1px solid #e4e9f0;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}
.bw-cq-info-stats i {
    color: #4d7ca7;
    font-size: 13px;
}
.bw-cq-info-stats b {
    margin-top: 5px;
    color: #1d2c40;
    font-size: 14px;
}
.bw-cq-info-stats span {
    margin-top: 1px;
    color: #8b98a7;
    font-size: 8px;
}
.bw-cq-info-access {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    padding: 11px 12px;
    border-radius: 14px;
    background: #edf4fa;
    color: #315f89;
}
.bw-cq-info-access>i {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
}
.bw-cq-info-access b, .bw-cq-info-access span {
    display: block;
}
.bw-cq-info-access b {
    font-size: 11px;
}
.bw-cq-info-access span {
    margin-top: 2px;
    color: #69819a;
    font-size: 9px;
    line-height: 1.4;
}
.bw-cq-info-done {
    width: 100%;
    min-height: 45px;
    margin-top: 13px;
    border: 0;
    border-radius: 13px;
    background: #336699;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf3;
}
.bw-cq-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#336699,#57a0dc);
    transition: width .25s ease;
}
.bw-community-quiz-slide {
    animation: bwCqSlideIn .22s ease;
}
@keyframes bwCqSlideIn {
from {
    opacity: 0;
    transform: translateY(8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.bw-cq-question-card {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 17px;
    border: 1px solid #e1e7ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 9px 22px rgba(15,23,42,.06);
}
.bw-cq-question-number {
    margin-bottom: 9px;
    color: #6a88a6;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.bw-cq-question-text {
    color: #172033;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.55;
    text-align: center;
    word-break: break-word;
}
.bw-community-quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.bw-community-quiz-answers button {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #dfe5ed;
    border-radius: 14px;
    background: #fff;
    color: #27364a;
    text-align: left;
    cursor: pointer;
    transition: border .18s ease,background .18s ease,transform .12s ease;
}
.bw-community-quiz-answers button:active:not(:disabled) {
    transform: scale(.992);
}
.bw-community-quiz-answers button>span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf2f7;
    color: #45698b;
    font-size: 11px;
    font-weight: 900;
}
.bw-community-quiz-answers button>b {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}
.bw-community-quiz-answers button>i {
    width: 20px;
    color: transparent;
    text-align: center;
}
.bw-community-quiz-answers button.is-correct {
    border-color: #4cb276;
    background: #eefaf3;
}
.bw-community-quiz-answers button.is-correct>span {
    background: #36a765;
    color: #fff;
}
.bw-community-quiz-answers button.is-correct>i {
    color: #2f9d5d;
}
.bw-community-quiz-answers button.is-wrong {
    border-color: #e26868;
    background: #fff1f1;
}
.bw-community-quiz-answers button.is-wrong>span {
    background: #d95757;
    color: #fff;
}
.bw-community-quiz-answers button.is-wrong>i {
    color: #d64545;
}
.bw-community-quiz-answers button:disabled {
    cursor: default;
}
.bw-cq-answer-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 11px;
    border-radius: 14px;
}
.bw-cq-answer-feedback.is-correct {
    background: #eaf8f0;
    color: #257d4c;
}
.bw-cq-answer-feedback.is-wrong {
    background: #fff0f0;
    color: #b83d3d;
}
.bw-cq-answer-feedback>span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255,255,255,.72);
}
.bw-cq-answer-feedback b, .bw-cq-answer-feedback p {
    display: block;
}
.bw-cq-answer-feedback b {
    font-size: 12px;
}
.bw-cq-answer-feedback p {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.4;
}
.bw-cq-user-explanation {
    margin-top: 9px;
    padding: 12px;
    border: 1px solid #eadca8;
    border-radius: 14px;
    background: #fffaf0;
}
.bw-cq-user-explanation>span {
    display: block;
    margin-bottom: 5px;
    color: #936d18;
    font-size: 10px;
    font-weight: 900;
}
.bw-cq-user-explanation p {
    color: #655a3f;
    font-size: 11px;
    line-height: 1.5;
    word-break: break-word;
}
.bw-cq-play-bottom {
    position: sticky;
    bottom: 64px;
    z-index: 8;
    padding: 11px 0 4px;
    background: linear-gradient(to bottom,rgba(245,245,245,0),#f5f5f5 28%);
}
.bw-community-quiz-next {
    width: 100%;
    min-height: 49px;
    border: 0;
    border-radius: 15px;
    background: #336699;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 9px 22px rgba(51,102,153,.20);
    cursor: pointer;
}
.bw-community-quiz-next i {
    margin-left: 7px;
}
.bw-community-quiz-next:disabled {
    background: #b9c3ce;
    box-shadow: none;
    cursor: default;
}
.bw-cq-result {
    padding: 25px 17px;
    border: 1px solid #e0e7ef;
    border-radius: 23px;
    background: linear-gradient(180deg,#fff,#f5f9fd);
    box-shadow: 0 14px 34px rgba(15,23,42,.08);
    text-align: center;
}
.bw-cq-result-trophy {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 13px;
    border-radius: 27px;
    background: linear-gradient(135deg,#eaf3fb,#fff);
    box-shadow: 0 10px 25px rgba(51,102,153,.14);
    font-size: 42px;
}
.bw-cq-result-kicker {
    color: #7187a0;
    opacity: 1;
}
.bw-cq-result h2 {
    margin: 0;
    color: #182334;
    font-size: 23px;
}
.bw-cq-result>p {
    max-width: 390px;
    margin: 7px auto 16px;
    color: #6f7e91;
    font-size: 12px;
    line-height: 1.5;
}
.bw-cq-result-score {
    width: 126px;
    height: 126px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border: 9px solid #dbeaf7;
    border-radius: 50%;
    background: #fff;
}
.bw-cq-result-score strong {
    color: #285f91;
    font-size: 28px;
}
.bw-cq-result-score span {
    margin-top: 3px;
    color: #748397;
    font-size: 9px;
    font-weight: 800;
}
.bw-cq-result-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 15px;
}
.bw-cq-result-meta span {
    padding: 8px 10px;
    border-radius: 10px;
    background: #edf3f8;
    color: #4b6580;
    font-size: 10px;
    font-weight: 800;
}
.bw-cq-result-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}
.bw-cq-result-actions button {
    min-height: 46px;
    border: 0;
    border-radius: 13px;
    background: #336699;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-result-actions button+button {
    background: #e9eef5;
    color: #3f5d7b;
}
.bw-cq-result-actions i {
    margin-right: 5px;
}
.bw-cq-locked-card {
    max-width: 430px;
    margin: 30px auto;
    padding: 24px 18px;
    border: 1px solid #e0e6ee;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15,23,42,.08);
    text-align: center;
}
.bw-cq-locked-card>span {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border-radius: 20px;
    background: #edf3f8;
    color: #396b98;
    font-size: 25px;
}
.bw-cq-locked-card h3 {
    margin: 0;
    color: #182334;
    font-size: 20px;
}
.bw-cq-locked-card p {
    margin-top: 5px;
    color: #7a8798;
    font-size: 12px;
}
.bw-cq-locked-card label {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
    padding: 0 12px;
    border: 1px solid #dce4ed;
    border-radius: 13px;
    background: #fafbfd;
}
.bw-cq-locked-card label b {
    color: #6a7f94;
}
.bw-cq-locked-card input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #213044;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bw-cq-locked-card>button {
    width: 100%;
    min-height: 46px;
    margin-top: 9px;
    border: 0;
    border-radius: 13px;
    background: #336699;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-locked-card>small {
    display: block;
    margin-top: 8px;
    color: #c14343;
    font-size: 10px;
    font-weight: 800;
}
@media (max-width: 480px) {
.bw-cq-list-tabs button {
    gap: 5px;
    padding: 0 7px;
    font-size: 11px;
}
.bw-community-tabs {
    gap: 4px;
    padding: 4px;
}
.bw-community-tab {
    min-height: 41px;
    gap: 5px;
    padding: 0 4px;
    font-size: 11px;
}
.bw-community-tab i {
    font-size: 13px;
}
.bw-cq-hero {
    align-items: flex-start;
    padding: 15px;
}
.bw-cq-hero h3 {
    font-size: 17px;
}
.bw-cq-hero p {
    font-size: 10px;
}
.bw-cq-create-btn {
    min-width: 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 14px;
}
.bw-cq-create-btn span {
    display: none;
}
.bw-cq-create-btn i {
    margin: 0;
}
.bw-cq-card {
    padding: 12px;
    border-radius: 17px;
}
.bw-cq-card-badges {
    max-width: 120px;
}
.bw-cq-badge.is-owner {
    display: none;
}
.bw-cq-card-stats span {
    flex: 1;
    justify-content: center;
    padding: 7px 5px;
}
.bw-cq-visibility-options, .bw-cq-answer-editors {
    grid-template-columns: 1fr;
}
.bw-cq-visibility-card {
    min-height: 100px;
}
.bw-cq-question-card {
    min-height: 165px;
    padding: 15px;
}
.bw-cq-question-text {
    font-size: 15px;
}
.bw-cq-play-bottom {
    bottom: 58px;
}
}
html.bw-cq-info-open, body.bw-cq-info-open {
    overflow: hidden;
}
.community-quiz-cnt {
    position: relative;
    width: 100%;
    height: calc(100vh - 55px);
    min-height: 0;
    margin-bottom: -55px;
    overflow: hidden;
    background: #f5f5f5;
    --bw-cq-primary: #2563eb;
    --bw-cq-primary-dark: #1d4ed8;
    --bw-cq-text: #101828;
    --bw-cq-muted: #667085;
    --bw-cq-line: #e4e7ec;
}
.community-quiz-cnt .bw-cq-play-page {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 5px;
    padding-bottom: 0;
    overflow: hidden;
}
.community-quiz-cnt .bw-community-quiz-test {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-bottom: 68px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
}
.community-quiz-cnt .bw-cq-session-card {
    flex: 0 0 auto;
    padding: 10px 12px;
    border: 1px solid rgba(37, 99, 235, 0.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}
.community-quiz-cnt .bw-cq-session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.community-quiz-cnt .bw-cq-session-row > strong {
    color: var(--bw-cq-text);
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.community-quiz-cnt .bw-cq-session-tools {
    display: flex;
    align-items: center;
    gap: 7px;
}
.community-quiz-cnt .bw-cq-mini-info {
    width: 31px;
    height: 31px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.community-quiz-cnt .bw-cq-mini-info:active {
    transform: scale(.96);
}
.community-quiz-cnt .bw-cq-session-timer {
    min-width: 68px;
    height: 31px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #f8fafc;
    color: #344054;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.community-quiz-cnt .bw-cq-session-timer i {
    color: #64748b;
    font-size: 10px;
}
.community-quiz-cnt .bw-cq-progress {
    height: 6px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #eaf0f8;
}
.community-quiz-cnt .bw-cq-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
    transition: width .28s ease;
}
.community-quiz-cnt .bw-community-quiz-slide {
    display: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin-top: 8px;
    overflow: hidden;
}
.community-quiz-cnt .bw-community-quiz-slide.is-active {
    position: relative;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 0;
    animation: bwCqCompactSlideIn .18s ease;
}
@keyframes bwCqCompactSlideIn {
from {
    opacity: 0;
    transform: translateY(5px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.community-quiz-cnt .bw-cq-question-card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 135px;
    max-height: 175px;
    flex: 0 0 160px;
    margin: 0;
    padding: 12px 13px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    text-align: center;
}
.community-quiz-cnt .bw-cq-question-number {
    display: block;
    margin-bottom: 8px;
    color: #6b85a0;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.community-quiz-cnt .bw-cq-question-text {
    width: 100%;
    color: var(--bw-cq-text);
    font-size: 15px;
    line-height: 1.46;
    font-weight: 700;
    word-break: break-word;
    overflow-wrap: break-word;
}
.community-quiz-cnt .bw-community-quiz-answers {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    margin-top: 8px;
    padding-bottom: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.community-quiz-cnt .bw-community-quiz-answers::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.community-quiz-cnt .bw-community-quiz-answers button {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    gap: 9px;
    align-items: center;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
    color: var(--bw-cq-text);
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.045);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.community-quiz-cnt .bw-community-quiz-answers button:active:not(:disabled) {
    transform: scale(.992);
}
.community-quiz-cnt .bw-community-quiz-answers button > span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}
.community-quiz-cnt .bw-community-quiz-answers button > b {
    min-width: 0;
    color: inherit;
    font-size: 13.5px;
    line-height: 1.34;
    font-weight: 700;
    word-break: break-word;
    overflow-wrap: break-word;
}
.community-quiz-cnt .bw-community-quiz-answers button > i {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: transparent;
    font-size: 11px;
}
.community-quiz-cnt .bw-community-quiz-answers button.is-correct {
    border-color: #86efac !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
}
.community-quiz-cnt .bw-community-quiz-answers button.is-correct > span {
    border-color: #86efac;
    background: #dcfce7;
    color: #15803d;
}
.community-quiz-cnt .bw-community-quiz-answers button.is-correct > i {
    background: #22c55e;
    color: #fff;
}
.community-quiz-cnt .bw-community-quiz-answers button.is-wrong {
    border-color: #fca5a5 !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
}
.community-quiz-cnt .bw-community-quiz-answers button.is-wrong > span {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #b91c1c;
}
.community-quiz-cnt .bw-community-quiz-answers button.is-wrong > i {
    background: #ef4444;
    color: #fff;
}
.community-quiz-cnt .bw-community-quiz-answers button:disabled {
    cursor: default;
}
.community-quiz-cnt .bw-cq-answer-feedback {
    flex: 0 0 auto;
    min-height: 54px;
    margin-top: 8px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    overflow: hidden;
}
.community-quiz-cnt .bw-cq-answer-feedback[hidden] {
    display: none !important;
}
.community-quiz-cnt .bw-cq-answer-feedback.is-correct {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.community-quiz-cnt .bw-cq-answer-feedback.is-wrong {
    border-color: #fecaca;
    background: #fef2f2;
}
.community-quiz-cnt .bw-cq-answer-feedback > span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fff;
    font-size: 13px;
}
.community-quiz-cnt .bw-cq-answer-feedback.is-correct > span {
    color: #16a34a;
}
.community-quiz-cnt .bw-cq-answer-feedback.is-wrong > span {
    color: #dc2626;
}
.community-quiz-cnt .bw-cq-answer-feedback b {
    display: block;
    color: #101828;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
}
.community-quiz-cnt .bw-cq-answer-feedback p {
    margin-top: 2px;
    color: #667085;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 600;
    word-break: break-word;
}
.community-quiz-cnt .bw-cq-user-explanation {
    flex: 0 0 auto;
    max-height: 92px;
    margin-top: 8px;
    padding: 9px 11px;
    overflow: auto;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffbeb;
}
.community-quiz-cnt .bw-cq-user-explanation[hidden] {
    display: none !important;
}
.community-quiz-cnt .bw-cq-user-explanation > span {
    display: block;
    margin-bottom: 4px;
    color: #92400e;
    font-size: 10px;
    font-weight: 900;
}
.community-quiz-cnt .bw-cq-user-explanation p {
    color: #6b4f1d;
    font-size: 10.5px;
    line-height: 1.4;
    word-break: break-word;
}
.community-quiz-cnt .bw-cq-play-bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 20;
    width: 100% !important;
    height: 68px;
    margin: 0 !important;
    padding: 8px 0 !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    background: #f5f5f5 !important;
    border-top: 1px solid #e4e7ec;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.05);
}
.community-quiz-cnt .bw-community-quiz-explain {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid #f5c451;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff8db 0%, #ffe7a0 100%);
    color: #9a6500;
    font-size: 17px;
    cursor: pointer;
}
.community-quiz-cnt .bw-community-quiz-explain[hidden] {
    display: none !important;
}
.community-quiz-cnt .bw-community-quiz-explain.is-active {
    border-color: #e0a900;
    background: #ffd95b;
}
.community-quiz-cnt .bw-community-quiz-next {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 16px;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 16px;
    background: #cbd5e1;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: none;
    cursor: default;
}
.community-quiz-cnt .bw-community-quiz-next.is-ready {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
    cursor: pointer;
}
.community-quiz-cnt .bw-community-quiz-next:disabled {
    opacity: 1;
}
.bw-cq-info-handle {
    display: block;
    width: 54px;
    height: 5px;
    margin: 0 auto 11px;
    border-radius: 999px;
    background: #d8e0e9;
}
.bw-cq-info-copy-code {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 13px;
    background: #336699;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-add-answer {
    min-height: 76px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed #a8bdd1;
    border-radius: 16px;
    background: #f8fbfe;
    color: #336699;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-add-answer:active {
    transform: scale(.99);
}
.community-quiz-cnt .bw-cq-result:not([hidden]) {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 480px) {
.community-quiz-cnt .bw-cq-question-card {
    min-height: 125px;
    max-height: 160px;
    flex-basis: 145px;
    padding: 11px 12px 9px;
}
.community-quiz-cnt .bw-cq-question-text {
    font-size: 14px;
}
.community-quiz-cnt .bw-community-quiz-answers button {
    min-height: 48px;
}
.community-quiz-cnt .bw-community-quiz-answers button > b {
    font-size: 13px;
}
}
.community-quiz-cnt .bw-cq-info-sheet--detailed {
    max-height: 82%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 9px 14px calc(18px + env(safe-area-inset-bottom, 0px));
}
.bw-cq-info-sheet--detailed .bw-cq-info-copy-code {
    margin-top: 11px;
}
.bw-cq-info-sheet--detailed .bw-cq-info-done {
    margin-top: 9px;
}
.bw-cq-limit-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 12px;
    padding: 11px 13px;
    border: 1px solid #dce6f0;
    border-radius: 15px;
    background: #f7fafd;
}
.bw-cq-limit-mini.is-full {
    border-color: #eadcad;
    background: #fffaf0;
}
.bw-cq-limit-mini-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bw-cq-limit-mini-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e7f0f9;
    color: #336699;
}
.bw-cq-limit-mini.is-full .bw-cq-limit-mini-icon {
    background: #fff0c7;
    color: #946200;
}
.bw-cq-limit-mini-copy div {
    min-width: 0;
}
.bw-cq-limit-mini b, .bw-cq-limit-mini small {
    display: block;
}
.bw-cq-limit-mini b {
    color: #1f2f44;
    font-size: 13px;
    font-weight: 800;
}
.bw-cq-limit-mini small {
    margin-top: 2px;
    color: #718198;
    font-size: 11px;
    line-height: 1.35;
}
.bw-cq-limit-mini > strong {
    min-width: 44px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #e7f0f9;
    color: #285f91;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}
.bw-cq-limit-mini.is-full > strong {
    background: #fff0c7;
    color: #946200;
}
[data-community-quiz-limit], [data-community-open-mine] {
    cursor: pointer;
    pointer-events: auto !important;
}
.bw-daily-goal-progress {
    margin-top: 13px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(7,14,42,.28);
    backdrop-filter: blur(8px);
}
.bw-daily-goal-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255,255,255,.76);
    font-size: 9px;
    font-weight: 800;
}
.bw-daily-goal-progress-copy b {
    color: #fff;
    font-size: 10px;
}
.bw-daily-goal-progress-track {
    display: block;
    height: 6px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
}
.bw-daily-goal-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#72e8ff,#a9ffcf);
    box-shadow: 0 0 14px rgba(114,232,255,.55);
    transition: width .35s ease;
}
@media (max-width:480px) {
.bw-daily-goal-progress {
    margin-top: 10px;
    padding: 8px 9px;
}
}
.bw-profile-page {
    width: 100%;
    padding: 8px 0 35px;
}
.bw-profile-page * {
    box-sizing: border-box;
}
.bw-profile-hero {
    position: relative;
    display: flex;
    min-height: 130px;
    padding: 22px;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    border-radius: 24px;
    color: #ffffff;
    background: radial-gradient(
            circle at 100% 0,
            rgba(255, 255, 255, 0.26),
            transparent 36%
        ),
        linear-gradient(135deg, #285f91 0%, #477fae 100%);
    box-shadow: 0 14px 34px rgba(51, 102, 153, 0.24);
}
.bw-profile-follow-stats {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
    margin-top: 10px;
    padding: 5px;
    border: 1px solid #e5eaf0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.05);
}

.bw-profile-follow-stat {
    display: flex;
    min-width: 0;
    min-height: 54px;
    padding: 8px 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.bw-profile-follow-stat:hover {
    background: #f5f8fb;
}

.bw-profile-follow-stat:active {
    background: #edf3f8;
    transform: scale(0.98);
}

.bw-profile-follow-stat:focus-visible {
    outline: 2px solid rgba(51, 102, 153, 0.35);
    outline-offset: -2px;
}

.bw-profile-follow-stat b {
    display: block;
    color: #182230;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.15;
}

.bw-profile-follow-stat span {
    display: block;
    margin-top: 4px;
    color: #7f8a99;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.bw-profile-follow-divider {
    width: 1px;
    margin: 9px 0;
    background: #e8edf2;
}

.bw-profile-hero-decoration {
    position: absolute;
    right: -45px;
    bottom: -65px;
    width: 170px;
    height: 170px;
    border: 28px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    pointer-events: none;
}
.bw-profile-avatar-wrap {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.bw-profile-avatar {
    display: flex;
    width: 76px;
    height: 76px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.28);
    border-radius: 24px;
    color: #285f91;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(21, 50, 78, 0.22);
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
}
.bw-profile-avatar > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #eef3f7;
}
.bw-profile-online {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 19px;
    height: 19px;
    border: 4px solid #3f78a8;
    border-radius: 50%;
    background: #38c878;
}
.bw-profile-user-info {
    position: relative;
    z-index: 2;
    min-width: 0;
    flex: 1;
}
.bw-profile-kicker {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bw-profile-user-info h2 {
    overflow: hidden;
    margin: 0;
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-profile-user-info p {
    display: flex;
    margin: 7px 0 0;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 600;
}
.bw-profile-stats {
    display: grid;
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.bw-profile-stat {
    display: flex;
    min-width: 0;
    padding: 13px;
    align-items: center;
    gap: 10px;
    border: 1px solid #e5eaf0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.05);
}
.bw-profile-stat-icon {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 17px;
}
.bw-profile-stat-week {
    color: #e68100;
    background: #fff4d7;
}
.bw-profile-stat-total {
    color: #5368d8;
    background: #edf0ff;
}
.bw-profile-stat > div {
    min-width: 0;
}
.bw-profile-stat b {
    display: block;
    overflow: hidden;
    color: #182230;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-profile-stat span:not(.bw-profile-stat-icon) {
    display: block;
    margin-top: 3px;
    color: #8b96a5;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}
.bw-profile-premium {
    position: relative;
    display: flex;
    margin-top: 12px;
    padding: 15px;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid #ffe096;
    border-radius: 20px;
    background: radial-gradient(
            circle at right top,
            rgba(255, 201, 72, 0.22),
            transparent 44%
        ),
        linear-gradient(135deg, #fff8df, #ffffff);
    box-shadow: 0 8px 22px rgba(208, 153, 27, 0.10);
    cursor: pointer;
    transition: transform 0.18s ease,
        box-shadow 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.bw-profile-premium::after {
    content: "";
    position: absolute;
    top: -35px;
    right: 45px;
    width: 75px;
    height: 130px;
    background: rgba(255, 255, 255, 0.42);
    transform: rotate(28deg);
    pointer-events: none;
}
.bw-profile-premium:hover {
    box-shadow: 0 12px 28px rgba(208, 153, 27, 0.16);
    transform: translateY(-2px);
}
.bw-profile-premium:active {
    transform: scale(0.985);
}
.bw-profile-premium-icon {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #ffc72f, #e89500);
    box-shadow: 0 7px 16px rgba(221, 148, 0, 0.24);
    font-size: 21px;
}
.bw-profile-premium-content {
    position: relative;
    z-index: 2;
    min-width: 0;
    flex: 1;
}
.bw-profile-premium-content span {
    display: block;
    color: #4b3711;
    font-size: 15px;
    font-weight: 900;
}
.bw-profile-premium-content p {
    margin: 4px 0 0;
    color: #8d7342;
    font-size: 11px;
    font-weight: 600;
}
.bw-profile-premium-arrow {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #a87400;
    background: rgba(255, 211, 99, 0.23);
    font-size: 12px;
}
.bw-profile-section {
    margin-top: 22px;
}
.bw-profile-section-title {
    margin: 0 5px 9px;
    color: #7a8494;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.bw-profile-menu {
    margin: 0;
    padding: 6px;
    overflow: hidden;
    border: 1px solid #e7ebf0;
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
    list-style: none;
}
.bw-profile-menu-item {
    position: relative;
    display: flex;
    min-height: 67px;
    padding: 9px;
    align-items: center;
    gap: 11px;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.18s ease,
        transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.bw-profile-menu-item + .bw-profile-menu-item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 12px;
    left: 64px;
    height: 1px;
    background: #edf0f4;
}
.bw-profile-menu-item:hover {
    background: #f7f9fc;
}
.bw-profile-menu-item:active {
    background: #f1f4f8;
    transform: scale(0.99);
}
.bw-profile-menu-icon {
    display: flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 18px;
}
.bw-icon-rating {
    color: #d88c00;
    background: #fff3d2;
}
.bw-icon-stats {
    color: #2d73c5;
    background: #eaf3ff;
}
.bw-icon-mistakes {
    color: #e55c5c;
    background: #fff0f0;
}
.bw-icon-support {
    color: #2f9b69;
    background: #e8f8ef;
}
.bw-icon-share {
    color: #8b5bc7;
    background: #f3eaff;
}
.bw-icon-rate {
    color: #e6a700;
    background: #fff7db;
}
.bw-icon-about {
    color: #397ba9;
    background: #eaf4fb;
}
.bw-icon-document {
    color: #687386;
    background: #f0f2f5;
}
.bw-icon-privacy {
    color: #268d88;
    background: #e8f8f7;
}
.bw-profile-menu-content {
    min-width: 0;
    flex: 1;
}
.bw-profile-menu-content > b, .bw-profile-menu-title-row > b {
    display: block;
    color: #202938;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.3;
}
.bw-profile-menu-content small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #929baa;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-profile-menu-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.bw-profile-premium-badge {
    display: inline-flex;
    padding: 4px 7px;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    color: #946400;
    background: #fff1bf;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}
.bw-profile-premium-badge i {
    font-size: 8px;
}
.bw-profile-menu-arrow {
    flex-shrink: 0;
    margin-right: 5px;
    color: #bac1cc;
    font-size: 11px;
    transition: color 0.18s ease,
        transform 0.18s ease;
}
.bw-profile-menu-item:hover .bw-profile-menu-arrow {
    color: #336699;
    transform: translateX(2px);
}
.bw-profile-footer {
    padding: 24px 0 4px;
    color: #b2bac5;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}
.bw-profile-empty {
    display: flex;
    min-height: 260px;
    padding: 30px 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px dashed #ccd5df;
    border-radius: 22px;
    background: #ffffff;
    color: #8a94a3;
    text-align: center;
}
.bw-profile-empty > i {
    margin-bottom: 14px;
    color: #336699;
    font-size: 36px;
}
.bw-profile-empty > b {
    color: #263142;
    font-size: 16px;
}
.bw-profile-empty > span {
    margin-top: 5px;
    font-size: 12px;
}
@media (max-width: 480px) {
.bw-profile-page {
    padding-top: 4px;
}
.bw-profile-hero {
    min-height: 118px;
    padding: 18px;
    gap: 13px;
    border-radius: 21px;
}
.bw-profile-follow-stats {
    margin-top: 8px;
    border-radius: 16px;
}
.bw-profile-follow-stat {
    min-height: 50px;
    padding: 7px 8px;
    border-radius: 12px;
}
.bw-profile-follow-stat b {
    font-size: 16px;
}
.bw-profile-follow-stat span {
    font-size: 9px;
}
.bw-profile-avatar {
    width: 67px;
    height: 67px;
    border-radius: 21px;
    font-size: 26px;
}
.bw-profile-user-info h2 {
    font-size: 19px;
}
.bw-profile-stats {
    gap: 8px;
}
.bw-profile-stat {
    padding: 11px;
    gap: 8px;
    border-radius: 16px;
}
.bw-profile-stat-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 15px;
}
.bw-profile-stat b {
    font-size: 15px;
}
.bw-profile-stat span:not(.bw-profile-stat-icon) {
    font-size: 9px;
}
.bw-profile-premium {
    padding: 13px;
    border-radius: 18px;
}
.bw-profile-premium-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 19px;
}
.bw-profile-section {
    margin-top: 19px;
}
.bw-profile-menu {
    padding: 5px;
    border-radius: 19px;
}
.bw-profile-menu-item {
    min-height: 63px;
    padding: 8px;
    gap: 10px;
    border-radius: 15px;
}
.bw-profile-menu-icon {
    flex-basis: 41px;
    width: 41px;
    height: 41px;
    border-radius: 13px;
    font-size: 17px;
}
.bw-profile-menu-content > b, .bw-profile-menu-title-row > b {
    font-size: 13px;
}
.bw-profile-menu-content small {
    font-size: 9px;
}
}
.bw-profile-user-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.bw-profile-user-heading h2 {
    min-width: 0;
}
.bw-profile-user-premium {
    display: inline-flex;
    padding: 5px 8px;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 226, 132, 0.38);
    border-radius: 9px;
    color: #ffe185;
    background: rgba(255, 196, 47, 0.14);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}
.bw-profile-user-premium i {
    font-size: 9px;
}
.bw-profile-user-meta {
    display: flex;
    margin-top: 7px;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
}
.bw-profile-user-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    font-weight: 600;
}
.bw-profile-user-meta span i {
    font-size: 9px;
}
.bw-profile-online {
    background: #aab4c0;
}
.bw-profile-online.is-online {
    background: #38c878;
}
.bw-profile-online.is-offline {
    background: #aab4c0;
}
.bw-profile-premium.is-active {
    border-color: #bce8ce;
    background: radial-gradient(
            circle at right top,
            rgba(57, 197, 119, 0.13),
            transparent 44%
        ),
        linear-gradient(135deg, #ecfbf3, #ffffff);
}
.bw-profile-premium.is-active .bw-profile-premium-icon {
    background: linear-gradient(135deg, #42cf82, #229b5d);
    box-shadow: 0 7px 16px rgba(34, 155, 93, 0.22);
}
.bw-profile-premium.is-active .bw-profile-premium-content span {
    color: #19643d;
}
.bw-profile-premium.is-active .bw-profile-premium-content p {
    color: #579174;
}
.bw-profile-premium.is-active .bw-profile-premium-arrow {
    color: #27875a;
    background: rgba(52, 190, 112, 0.12);
}
.bw-edit-profile-page {
    width: 100%;
    padding: 5px 0 35px;
}
.bw-edit-profile-page * {
    box-sizing: border-box;
}
.bw-edit-profile-user {
    display: flex;
    padding: 17px;
    align-items: center;
    gap: 13px;
    border-radius: 21px;
    color: #fff;
    background: radial-gradient(circle at right top,rgba(255,255,255,.22),transparent 42%),
    linear-gradient(135deg,#285f91,#477fae);
    box-shadow: 0 12px 28px rgba(51,102,153,.20);
}
.bw-edit-profile-avatar {
    position: relative;
    width: 62px;
    height: 62px;
    min-width: 62px;
    border: 3px solid rgba(255,255,255,.24);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: #fff;
    color: #285f91;
    font-size: 25px;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(17,45,70,.18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, box-shadow .18s ease;
}
.bw-edit-profile-avatar:hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 22px rgba(17,45,70,.23);
}
.bw-edit-profile-avatar:active {
    transform: scale(.96);
}
.bw-edit-profile-avatar:focus-visible {
    outline: 3px solid rgba(255,255,255,.48);
    outline-offset: 3px;
}
.bw-edit-profile-avatar > img {
    width: 100%;
    height: 100%;
    border-radius: 17px;
    display: block;
    object-fit: cover;
    background: #eef3f7;
}
.bw-edit-profile-user-copy {
    min-width: 0;
    flex: 1;
}
.bw-edit-profile-current-login {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-edit-profile-statuses {
    display: flex;
    margin-top: 7px;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.bw-edit-profile-premium-status, .bw-edit-profile-free-status, .bw-edit-profile-registration {
    display: inline-flex;
    padding: 5px 8px;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}
.bw-edit-profile-premium-status {
    color: #614400;
    background: #ffe18a;
}
.bw-edit-profile-free-status {
    color: #fff;
    background: rgba(255,255,255,.16);
}
.bw-edit-profile-registration {
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.10);
}
.bw-edit-profile-form {
    margin-top: 14px;
}
.bw-edit-profile-form-card {
    padding: 7px 15px;
    border: 1px solid #e5eaf0;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.055);
}
.bw-edit-profile-field {
    display: block;
    padding: 15px 0;
}
.bw-edit-profile-field + .bw-edit-profile-field {
    border-top: 1px solid #edf0f4;
}
.bw-edit-profile-label {
    display: flex;
    margin-bottom: 9px;
    align-items: center;
    gap: 7px;
    color: #344054;
    font-size: 12px;
    font-weight: 900;
}
.bw-edit-profile-label i {
    width: 17px;
    color: #336699;
    text-align: center;
}
.bw-edit-profile-field input[type="text"], .bw-edit-profile-field input[type="email"], .bw-edit-profile-field select {
    width: 100%;
    height: 47px;
    padding: 0 13px;
    border: 1px solid #dce3eb;
    border-radius: 14px;
    outline: 0;
    color: #182230;
    background: #f9fafc;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.bw-edit-profile-field select {
    cursor: pointer;
}
.bw-edit-profile-field input[type="text"]:focus, .bw-edit-profile-field input[type="email"]:focus, .bw-edit-profile-field select:focus {
    border-color: #72a0cc;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(51,102,153,.09);
}
.bw-edit-profile-field input::placeholder {
    color: #a8b0bc;
    font-weight: 500;
}
.bw-edit-profile-field small {
    display: block;
    margin-top: 7px;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
}
.bw-edit-subject-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bw-edit-subject-header .bw-edit-profile-label {
    margin-bottom: 9px;
}
.bw-edit-subject-counter {
    min-width: 38px;
    height: 26px;
    margin-bottom: 9px;
    padding: 0 8px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2f6;
    color: #7b8795;
    font-size: 10px;
    font-weight: 800;
}
.bw-edit-subject-counter b {
    color: #336699;
    font-size: 12px;
}
.bw-edit-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.bw-edit-subject-option {
    position: relative;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-edit-subject-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.bw-edit-subject-option span {
    min-height: 37px;
    padding: 0 11px;
    border: 1px solid #dfe5ec;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    color: #566273;
    font-size: 11px;
    font-weight: 700;
    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.bw-edit-subject-option span i {
    display: none;
    font-size: 9px;
}
.bw-edit-subject-option:hover span {
    border-color: #b9cada;
    background: #f2f7fb;
}
.bw-edit-subject-option input:checked + span {
    border-color: #336699;
    background: #336699;
    color: #fff;
    box-shadow: 0 5px 13px rgba(51,102,153,.18);
}
.bw-edit-subject-option input:checked + span i {
    display: inline-block;
}
.bw-edit-subject-option:active span {
    transform: scale(.97);
}
.bw-edit-profile-message {
    display: none;
    margin-top: 11px;
    padding: 12px 13px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}
.bw-edit-profile-message.is-success, .bw-edit-profile-message.is-error {
    display: block;
}
.bw-edit-profile-message.is-success {
    border: 1px solid #b9e9cd;
    background: #eaf9f0;
    color: #237849;
}
.bw-edit-profile-message.is-error {
    border: 1px solid #f1c3c3;
    background: #fff0f0;
    color: #b23b3b;
}
.bw-edit-profile-submit {
    width: 100%;
    min-height: 51px;
    margin-top: 12px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    outline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #336699;
    color: #fff;
    box-shadow: 0 9px 22px rgba(51,102,153,.22);
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, opacity .18s ease, transform .18s ease;
}
.bw-edit-profile-submit:hover {
    background: #2c5d8d;
}
.bw-edit-profile-submit:active {
    transform: scale(.985);
}
.bw-edit-profile-submit:disabled {
    opacity: .65;
    cursor: default;
    transform: none;
}
.bw-edit-profile-submit-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.16);
    font-size: 11px;
}
.bw-edit-profile-note {
    display: flex;
    margin-top: 13px;
    padding: 14px;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid #dce8f3;
    border-radius: 17px;
    background: #f3f8fc;
}
.bw-edit-profile-note > i {
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2edf6;
    color: #336699;
    font-size: 14px;
}
.bw-edit-profile-note b {
    display: block;
    color: #2a425b;
    font-size: 12px;
}
.bw-edit-profile-note p {
    margin: 4px 0 0;
    color: #76889a;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}
@media (max-width:480px) {
.bw-profile-edit-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
}
.bw-edit-profile-user {
    padding: 15px;
    border-radius: 19px;
}
.bw-edit-profile-avatar {
    width: 57px;
    height: 57px;
    min-width: 57px;
    border-radius: 18px;
    font-size: 22px;
}
.bw-edit-profile-current-login {
    font-size: 15px;
}
.bw-edit-profile-form-card {
    padding: 6px 13px;
    border-radius: 19px;
}
.bw-edit-subjects {
    gap: 6px;
}
.bw-edit-subject-option span {
    min-height: 35px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 10px;
}
}
.bw-profile-edit-button {
    position: relative;
    z-index: 3;
    display: flex;
    width: 40px;
    height: 40px;
    min-width: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 13px;
    outline: none;
    color: #fff;
    background: rgba(255,255,255,.14);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.bw-profile-edit-button:hover {
    background: rgba(255,255,255,.23);
}
.bw-profile-edit-button:active {
    transform: scale(.94);
}
.bw-profile-edit-button i {
    font-size: 14px;
}
.bw-icon-collection {
    color: #7a4fc5;
    background: #f2eaff;
}
.bw-collection-page {
    padding-bottom: 34px;
}
.bw-collection-page *, .bw-collection-modal * {
    box-sizing: border-box;
}
.bw-collection-hero {
    position: relative;
    min-height: 184px;
    padding: 21px;
    overflow: hidden;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #fff;
    background: radial-gradient(circle at 90% 8%, rgba(255,255,255,.24), transparent 29%),
    radial-gradient(circle at 7% 100%, rgba(159,103,255,.36), transparent 37%),
    linear-gradient(135deg, #253d74 0%, #3d4e99 47%, #754bb9 100%);
    box-shadow: 0 16px 36px rgba(49, 57, 125, .25);
}
.bw-collection-hero::before, .bw-collection-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.bw-collection-hero::before {
    right: 74px;
    top: -28px;
    width: 105px;
    height: 150px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    transform: rotate(18deg);
}
.bw-collection-hero::after {
    right: 18px;
    bottom: -70px;
    width: 190px;
    height: 190px;
    border: 34px solid rgba(255,255,255,.055);
    border-radius: 50%;
}
.bw-collection-hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    flex: 1;
}
.bw-collection-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: rgba(255,255,255,.74);
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .11em;
}
.bw-collection-kicker i {
    color: #f3c969;
}
.bw-collection-hero h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 1000;
    letter-spacing: -.02em;
}
.bw-collection-hero p {
    max-width: 340px;
    margin: 7px 0 15px;
    color: rgba(255,255,255,.76);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}
.bw-collection-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 330px;
    margin-bottom: 7px;
    color: rgba(255,255,255,.82);
    font-size: 9px;
    font-weight: 800;
}
.bw-collection-progress-copy b {
    color: #fff;
    font-size: 10px;
}
.bw-collection-progress-track {
    width: min(100%, 330px);
    height: 8px;
    padding: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(9, 18, 52, .29);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.17);
}
.bw-collection-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f5bd3e, #ffe79c);
    box-shadow: 0 0 12px rgba(255, 212, 94, .48);
}
.bw-collection-progress-ring {
    --bw-collection-progress: 0deg;
    position: relative;
    z-index: 2;
    flex: 0 0 104px;
    width: 104px;
    height: 104px;
    padding: 8px;
    border-radius: 50%;
    background: conic-gradient(#ffd363 var(--bw-collection-progress), rgba(255,255,255,.14) 0);
    box-shadow: 0 14px 24px rgba(18, 20, 60, .22);
}
.bw-collection-progress-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(28,43,96,.94), rgba(76,52,132,.94));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.bw-collection-progress-ring > div {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bw-collection-progress-ring b {
    font-size: 22px;
    font-weight: 1000;
    line-height: 1;
}
.bw-collection-progress-ring span {
    margin-top: 4px;
    color: rgba(255,255,255,.65);
    font-size: 8px;
    font-weight: 800;
}
.bw-collection-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}
.bw-collection-stats > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(19, 29, 48, .055);
}
.bw-collection-stats > div > span {
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.bw-collection-stats .is-blue {
    color: #2f72c7;
    background: #eaf3ff;
}
.bw-collection-stats .is-purple {
    color: #8051c8;
    background: #f2eaff;
}
.bw-collection-stats .is-gold {
    color: #bf7b00;
    background: #fff3d8;
}
.bw-collection-stats p {
    min-width: 0;
    margin: 0;
}
.bw-collection-stats b, .bw-collection-stats small {
    display: block;
}
.bw-collection-stats b {
    overflow: hidden;
    color: #172033;
    font-size: 15px;
    font-weight: 1000;
    line-height: 1.2;
    text-overflow: ellipsis;
}
.bw-collection-stats small {
    margin-top: 3px;
    color: #8790a0;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.25;
}
.bw-collection-controls {
    margin-top: 19px;
}
.bw-collection-search {
    display: flex;
    gap: 8px;
}
.bw-collection-search label {
    min-width: 0;
    height: 47px;
    padding: 0 14px;
    flex: 1;
    border: 1px solid #e1e6ed;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(22, 34, 52, .045);
}
.bw-collection-search label:focus-within {
    border-color: #8e6cca;
    box-shadow: 0 0 0 3px rgba(125, 81, 196, .09);
}
.bw-collection-search label i {
    color: #9ba4b3;
    font-size: 14px;
}
.bw-collection-search input {
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    color: #172033;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
}
.bw-collection-search input::placeholder {
    color: #a5adba;
}
.bw-collection-search > button {
    min-width: 74px;
    height: 47px;
    padding: 0 15px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #5c5bb0, #8251bf);
    box-shadow: 0 8px 18px rgba(93, 77, 172, .20);
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.bw-collection-state-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
    padding: 5px;
    border: 1px solid #e7eaf0;
    border-radius: 17px;
    background: #fff;
}
.bw-collection-state-tabs button {
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #747e8e;
    background: transparent;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}
.bw-collection-state-tabs button small {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8690a0;
    background: #edf0f4;
    font-size: 8px;
}
.bw-collection-state-tabs button.is-active {
    color: #fff;
    background: linear-gradient(135deg, #4b5d99, #7751b4);
    box-shadow: 0 6px 14px rgba(70, 73, 143, .17);
}
.bw-collection-state-tabs button.is-active small {
    color: #fff;
    background: rgba(255,255,255,.18);
}
.bw-collection-rarity-filter {
    display: flex;
    gap: 7px;
    margin: 10px -10px 0;
    padding: 0 10px 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}
.bw-collection-rarity-filter::-webkit-scrollbar {
    display: none;
}
.bw-collection-rarity-filter button {
    --rarity-color: #647084;
    flex: 0 0 auto;
    min-height: 35px;
    padding: 0 10px;
    border: 1px solid #e3e7ed;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #606b7b;
    background: #fff;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}
.bw-collection-rarity-filter button[data-rarity="1"] {
    --rarity-color: #7b8798;
}
.bw-collection-rarity-filter button[data-rarity="2"] {
    --rarity-color: #249a65;
}
.bw-collection-rarity-filter button[data-rarity="3"] {
    --rarity-color: #3374d3;
}
.bw-collection-rarity-filter button[data-rarity="4"] {
    --rarity-color: #8550ca;
}
.bw-collection-rarity-filter button[data-rarity="5"] {
    --rarity-color: #c98508;
}
.bw-collection-rarity-filter button[data-rarity="6"] {
    --rarity-color: #c13c91;
}
.bw-collection-rarity-filter button i {
    color: var(--rarity-color);
    font-style: normal;
    font-size: 11px;
}
.bw-collection-rarity-filter button small {
    color: #9ca4b0;
    font-size: 7px;
}
.bw-collection-rarity-filter button.is-active {
    border-color: var(--rarity-color);
    color: #fff;
    background: var(--rarity-color);
    box-shadow: 0 6px 13px rgba(70, 73, 143, .16);
}
.bw-collection-rarity-filter button.is-active i, .bw-collection-rarity-filter button.is-active small {
    color: #fff;
}
.bw-collection-result-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 2px 10px;
}
.bw-collection-result-head h3 {
    margin: 0;
    color: #172033;
    font-size: 17px;
    font-weight: 1000;
}
.bw-collection-result-head p {
    margin: 3px 0 0;
    color: #929baa;
    font-size: 9px;
    font-weight: 700;
}
.bw-collection-result-head > button {
    padding: 7px 9px;
    border: 0;
    border-radius: 10px;
    color: #7d58b3;
    background: #f1eaff;
    font-size: 8px;
    font-weight: 900;
    cursor: pointer;
}
.bw-collection-result-head > button i {
    margin-right: 3px;
}
.bw-collection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}
.bw-collection-card, .bw-collection-modal-card {
    --rarity: #7b8798;
    --rarity-deep: #596575;
    --rarity-soft: #eff2f5;
    --rarity-glow: rgba(92, 105, 120, .22);
}
.bw-collection-card[data-rarity="2"], .bw-collection-modal-card[data-rarity="2"] {
    --rarity: #2aa66e;
    --rarity-deep: #147b4c;
    --rarity-soft: #e8f8ef;
    --rarity-glow: rgba(35, 164, 105, .25);
}
.bw-collection-card[data-rarity="3"], .bw-collection-modal-card[data-rarity="3"] {
    --rarity: #3a7ce0;
    --rarity-deep: #235cb4;
    --rarity-soft: #e9f2ff;
    --rarity-glow: rgba(48, 111, 211, .27);
}
.bw-collection-card[data-rarity="4"], .bw-collection-modal-card[data-rarity="4"] {
    --rarity: #8c58d3;
    --rarity-deep: #6330aa;
    --rarity-soft: #f2eaff;
    --rarity-glow: rgba(132, 73, 207, .28);
}
.bw-collection-card[data-rarity="5"], .bw-collection-modal-card[data-rarity="5"] {
    --rarity: #e3a125;
    --rarity-deep: #a66c00;
    --rarity-soft: #fff3d7;
    --rarity-glow: rgba(222, 157, 29, .31);
}
.bw-collection-card[data-rarity="6"], .bw-collection-modal-card[data-rarity="6"] {
    --rarity: #d64ca2;
    --rarity-deep: #9d2773;
    --rarity-soft: #fdeafb;
    --rarity-glow: rgba(204, 61, 150, .31);
}
.bw-collection-card {
    position: relative;
    min-width: 0;
    padding: 5px;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    color: #172033;
    background: linear-gradient(145deg, var(--rarity), var(--rarity-deep));
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.bw-collection-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -50%;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.34) 49%, transparent 58%);
    transform: translateX(-38%) rotate(7deg);
    transition: opacity .18s ease, transform .5s ease;
}
.bw-collection-card.is-owned:hover::before {
    opacity: 1;
    transform: translateX(38%) rotate(7deg);
}
.bw-collection-card:active {
    transform: scale(.98);
}
.bw-collection-card-edge {
    position: absolute;
    z-index: 0;
    inset: 1px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 17px;
    pointer-events: none;
}
.bw-collection-card-image {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px 14px 10px 10px;
    display: block;
    background: linear-gradient(145deg, #e7eaf0, #cdd3dd);
}
.bw-collection-card-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.bw-collection-card:hover .bw-collection-card-image img {
    transform: scale(1.035);
}
.bw-collection-card-image-fallback, .bw-collection-modal-image-fallback {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca4b2;
    background: linear-gradient(145deg, #eef1f5, #dce1e8);
    font-size: 28px;
}
.bw-collection-card-image.is-image-error img, .bw-collection-modal-image.is-image-error img {
    display: none;
}
.bw-collection-card-shade, .bw-collection-modal-image-shade {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 54%, rgba(10,15,28,.43));
}
.bw-collection-card-lock {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.38);
}
.bw-collection-card-lock i {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17,25,40,.52);
    backdrop-filter: blur(5px);
    font-size: 13px;
}
.bw-collection-card-lock b {
    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .1em;
}
.bw-collection-card-quantity {
    position: absolute;
    z-index: 5;
    right: 7px;
    top: 7px;
    min-width: 27px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(15,21,36,.64);
    backdrop-filter: blur(7px);
    font-size: 8px;
    font-weight: 1000;
}
.bw-collection-card-body {
    position: relative;
    z-index: 2;
    min-height: 108px;
    padding: 9px 8px 7px;
    border-radius: 0 0 13px 13px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #fff, var(--rarity-soft));
}
.bw-collection-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.bw-collection-card-meta small {
    min-width: 0;
    overflow: hidden;
    color: #8a93a2;
    font-size: 6px;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.bw-collection-card-meta em {
    flex: 0 0 auto;
    color: var(--rarity-deep);
    font-size: 6px;
    font-style: normal;
    font-weight: 1000;
    text-transform: uppercase;
}
.bw-collection-card-body > b {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: #182033;
    font-size: 11px;
    font-weight: 1000;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.bw-collection-card-body > p {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    color: #7d8796;
    font-size: 7px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.bw-collection-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 7px;
}
.bw-collection-card-footer small {
    color: #9aa3b0;
    font-size: 7px;
    font-weight: 900;
}
.bw-collection-card-footer strong {
    color: var(--rarity-deep);
    font-size: 8px;
    font-weight: 1000;
}
.bw-collection-card-footer strong i {
    font-size: 7px;
}
.bw-collection-card.is-locked {
    filter: saturate(.68);
    box-shadow: 0 7px 17px rgba(48, 55, 67, .12);
}
.bw-collection-card.is-locked .bw-collection-card-body {
    background: #f1f3f6;
}
.bw-collection-card.is-locked .bw-collection-card-body > b, .bw-collection-card.is-locked .bw-collection-card-body > p {
    color: #939ba7;
}
.bw-collection-card-data {
    display: none !important;
}
.bw-collection-pagination {
    position: static;
    width: auto;
    height: auto;
    margin: 19px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: transparent;
}
.bw-collection-pagination button {
    width: 41px;
    height: 41px;
    border: 1px solid #e1e5eb;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5d4fa4;
    background: #fff;
    box-shadow: 0 6px 15px rgba(25,34,50,.06);
    cursor: pointer;
}
.bw-collection-pagination button:disabled {
    color: #b8bec7;
    background: #f0f2f5;
    box-shadow: none;
    cursor: default;
}
.bw-collection-pagination > span {
    min-width: 67px;
    height: 41px;
    padding: 0 13px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    background: linear-gradient(135deg, #4b5d99, #7751b4);
    box-shadow: 0 7px 16px rgba(74,65,145,.16);
}
.bw-collection-pagination b {
    font-size: 12px;
    font-weight: 1000;
}
.bw-collection-pagination small {
    color: rgba(255,255,255,.68);
    font-size: 9px;
    font-weight: 800;
}
.bw-collection-empty {
    padding: 32px 18px;
    border: 1px dashed #d8dde5;
    border-radius: 22px;
    text-align: center;
    background: #fff;
}
.bw-collection-empty > span {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7954b4;
    background: #f1eaff;
    font-size: 22px;
}
.bw-collection-empty h3 {
    margin: 0;
    color: #1d2534;
    font-size: 16px;
    font-weight: 1000;
}
.bw-collection-empty p {
    max-width: 330px;
    margin: 6px auto 15px;
    color: #8992a0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
}
.bw-collection-empty button {
    min-height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #4d5d99, #7b50b8);
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}
.bw-collection-login-required {
    margin-top: 6px;
}
.bw-collection-modal[hidden] {
    display: none !important;
}
.bw-collection-modal {
    position: fixed !important;
    z-index: 2147483645 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow-y: auto;
    display: flex;
    opacity: 0;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
}
.bw-collection-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.bw-collection-modal-backdrop {
    position: fixed;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 11, 22, .78);
    backdrop-filter: blur(9px);
}
.bw-collection-modal-dialog {
    position: relative;
    z-index: 1;
    padding: 17px;
    background: radial-gradient(circle at 80% 0, rgba(120,84,194,.27), transparent 34%),
    linear-gradient(160deg, #181d31, #101421);
}
.bw-collection-modal-close {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    cursor: pointer;
}
.bw-collection-modal-card {
    position: relative;
    background: linear-gradient(145deg, var(--rarity), var(--rarity-deep));
}
.bw-collection-modal-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -70%;
    opacity: .45;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.42) 49%, transparent 56%);
    transform: rotate(13deg);
    animation: bwCollectionCardShine 4.6s ease-in-out infinite;
}
@keyframes bwCollectionCardShine {
0%, 35% {
    transform: translateX(-33%) rotate(13deg);
    opacity: 0;
}
52% {
    opacity: .48;
}
72%, 100% {
    transform: translateX(33%) rotate(13deg);
    opacity: 0;
}
}
.bw-collection-modal-card-edge {
    position: absolute;
    z-index: 0;
    inset: 1px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 24px;
}
.bw-collection-modal-card-inner {
    position: relative;
    z-index: 2;
    background: linear-gradient(155deg, #fff, var(--rarity-soft));
}
.bw-collection-modal-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.bw-collection-modal-card-head > div {
    min-width: 0;
}
.bw-collection-modal-card-head small {
    display: block;
    font-weight: 1000;
    letter-spacing: .1em;
}
.bw-collection-modal-card-head h2 {
    display: -webkit-box;
    margin: 3px 0 0;
    overflow: hidden;
    font-weight: 1000;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.bw-collection-modal-card-head > span {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    background: var(--rarity-deep);
}
.bw-collection-modal-card-head > span b {
    font-size: 11px;
    font-weight: 1000;
}
.bw-collection-modal-card-head > span i {
    font-size: 8px;
}
.bw-collection-modal-image {
    position: relative;
    overflow: hidden;
    background: #e4e8ee;
}
.bw-collection-modal-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.bw-collection-modal-image > div {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.bw-collection-modal-image > div span {
    max-width: 55%;
    overflow: hidden;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    background: rgba(11,17,30,.66);
    backdrop-filter: blur(7px);
    font-weight: 1000;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.bw-collection-modal-image > div span:last-child {
    color: #fff;
    background: var(--rarity-deep);
}
.bw-collection-modal-card-copy h3 {
    margin: 0;
    font-weight: 1000;
}
.bw-collection-modal-card-copy p {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    font-weight: 600;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.bw-collection-modal-card-copy > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 900;
}
.bw-collection-modal-card-copy > div b {
    color: var(--rarity-deep);
    font-size: 10px;
}
.bw-collection-modal-details section {
    background: rgba(255,255,255,.055);
}
.bw-collection-modal-details section[hidden] {
    display: none !important;
}
.bw-collection-modal-details section > span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 1000;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.bw-collection-modal-details section p, .bw-collection-modal-details section > b {
    display: block;
    margin: 6px 0 0;
    font-weight: 600;
    white-space: pre-line;
    word-break: break-word;
}
.bw-collection-modal-details section > b {
    border-radius: 10px;
    background: rgba(0,0,0,.18);
    font-family: "Cambria", "Times New Roman", serif;
    text-align: center;
}
@media (max-width: 500px) {
.bw-collection-hero {
    min-height: 166px;
    padding: 17px;
}
.bw-collection-hero h2 {
    font-size: 21px;
}
.bw-collection-progress-ring {
    flex-basis: 86px;
    width: 86px;
    height: 86px;
    padding: 7px;
}
.bw-collection-progress-ring::before {
    inset: 7px;
}
.bw-collection-progress-ring b {
    font-size: 18px;
}
.bw-collection-stats > div {
    padding: 10px 8px;
    gap: 7px;
}
.bw-collection-stats > div > span {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 13px;
}
.bw-collection-stats b {
    font-size: 12px;
}
.bw-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.bw-collection-card-body {
    min-height: 105px;
}
}
@media (max-width: 370px) {
.bw-collection-hero {
    gap: 11px;
}
.bw-collection-progress-ring {
    flex-basis: 74px;
    width: 74px;
    height: 74px;
}
.bw-collection-progress-ring b {
    font-size: 16px;
}
.bw-collection-progress-ring span {
    font-size: 7px;
}
.bw-collection-stats {
    gap: 6px;
}
.bw-collection-stats > div {
    padding: 9px 6px;
}
.bw-collection-stats > div > span {
    display: none;
}
.bw-collection-search > button {
    min-width: 64px;
    padding: 0 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-collection-card, .bw-collection-card::before, .bw-collection-card-image img, .bw-collection-modal, .bw-collection-modal-dialog {
    transition: none !important;
}
.bw-collection-modal-card::before {
    animation: none !important;
}
}
.bw-collection-card {
    contain: layout paint style;
    content-visibility: auto;
    contain-intrinsic-size: 240px;
    box-shadow: 0 4px 11px rgba(28, 37, 52, .10);
    transition: transform .12s ease;
}
.bw-collection-card::before {
    display: none !important;
}
.bw-collection-card-image img {
    transition: none !important;
}
.bw-collection-card.is-owned:hover {
    transform: none;
    box-shadow: 0 4px 11px rgba(28, 37, 52, .10);
}
.bw-collection-card.is-owned:active {
    transform: scale(.985);
}
.bw-collection-card.is-locked .bw-collection-card-image {
    background: linear-gradient(145deg, rgba(255,255,255,.12), transparent),
    linear-gradient(145deg, var(--rarity), var(--rarity-deep));
}
.bw-collection-card.is-locked .bw-collection-card-image-fallback {
    color: rgba(255,255,255,.18);
    background: transparent;
}
.bw-collection-card.is-locked .bw-collection-card-image-fallback i {
    display: none;
}
.bw-collection-card.is-locked .bw-collection-card-image img {
    filter: none !important;
    transform: none !important;
}
.bw-collection-card-lock i, .bw-collection-card-quantity {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.bw-collection-card.is-loading {
    pointer-events: none;
    opacity: .68;
}
.bw-collection-card.is-loading::after {
    content: "";
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 3px solid rgba(255,255,255,.42);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bwCollectionLightSpin .65s linear infinite;
}
@keyframes bwCollectionLightSpin {
to {
    transform: rotate(360deg);
}
}
.bw-collection-modal {
    padding: 0 !important;
    overflow: hidden !important;
    align-items: flex-end !important;
    justify-content: stretch !important;
    transition: opacity .12s ease !important;
}
.bw-collection-modal-backdrop {
    background: rgba(13, 18, 28, .56) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.bw-collection-modal-dialog {
    width: 100% !important;
    max-width: none !important;
    max-height: 88dvh;
    margin: 0 !important;
    padding: 13px 12px calc(14px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0 !important;
    border-radius: 23px 23px 0 0 !important;
    color: #182033;
    background: #f6f7f9 !important;
    box-shadow: 0 -12px 32px rgba(10, 16, 28, .24) !important;
    transform: translateY(100%) !important;
    transition: transform .18s ease-out !important;
    -webkit-overflow-scrolling: touch;
}
.bw-collection-modal.is-open .bw-collection-modal-dialog {
    transform: translateY(0) !important;
}
.bw-collection-modal-dialog::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 4px;
    border-radius: 99px;
    background: #cfd4dc;
}
.bw-collection-modal-close {
    right: 12px !important;
    top: 12px !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: #4d5869 !important;
    background: #e8ebef !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.bw-collection-modal-card {
    width: 100% !important;
    margin: 34px 0 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #e3e7ed;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.bw-collection-modal-card::before, .bw-collection-modal-card-edge {
    display: none !important;
    animation: none !important;
}
.bw-collection-modal-card-inner {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas: "image head"
    "image copy";
    align-items: start;
    gap: 7px 11px;
    padding: 10px !important;
    border-radius: 17px !important;
    background: #fff !important;
}
.bw-collection-modal-card-head {
    grid-area: head;
    min-height: 0 !important;
    padding: 0 38px 0 0 !important;
    gap: 7px !important;
}
.bw-collection-modal-card-head small {
    color: var(--rarity-deep);
    font-size: 7px !important;
}
.bw-collection-modal-card-head h2 {
    margin-top: 3px !important;
    color: #172033 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}
.bw-collection-modal-card-head > span {
    min-width: 43px !important;
    height: 27px !important;
    padding: 0 7px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}
.bw-collection-modal-image {
    grid-area: image;
    width: 104px !important;
    height: 104px !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}
.bw-collection-modal-image > div {
    right: 5px !important;
    bottom: 5px !important;
    left: 5px !important;
    justify-content: flex-end !important;
}
.bw-collection-modal-image > div span {
    min-height: 19px !important;
    padding: 0 6px !important;
    border: 0 !important;
    background: rgba(14, 20, 31, .72) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: 6px !important;
}
#bwCollectionModalSubject {
    display: none !important;
}
#bwCollectionModalRarity {
    max-width: 100% !important;
    color: #fff !important;
    background: var(--rarity-deep) !important;
}
.bw-collection-modal-card-copy {
    grid-area: copy;
    min-width: 0;
    padding: 0 !important;
}
.bw-collection-modal-card-copy h3 {
    color: #354052 !important;
    font-size: 11px !important;
    line-height: 1.3;
}
.bw-collection-modal-card-copy p {
    min-height: 0 !important;
    margin-top: 3px !important;
    color: #778191 !important;
    font-size: 8.5px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 2 !important;
}
.bw-collection-modal-card-copy > div {
    margin-top: 6px !important;
    color: #949ca8 !important;
    font-size: 7px !important;
}
.bw-collection-modal-details {
    display: grid !important;
    gap: 7px !important;
    margin-top: 9px !important;
}
.bw-collection-modal-details section {
    padding: 11px !important;
    border: 1px solid #e4e8ee !important;
    border-radius: 14px !important;
    background: #fff !important;
}
.bw-collection-modal-details section > span {
    color: #7152a5 !important;
    font-size: 8px !important;
}
.bw-collection-modal-details section p, .bw-collection-modal-details section > b {
    margin-top: 5px !important;
    color: #536071 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}
.bw-collection-modal-details section > b {
    padding: 8px 9px !important;
    color: #293548 !important;
    background: #f1f3f6 !important;
    font-size: 12px !important;
}
@media (min-width: 600px) {
.bw-collection-modal {
    padding: 20px !important;
    align-items: center !important;
    justify-content: center !important;
}
.bw-collection-modal-dialog {
    width: min(100%, 440px) !important;
    max-height: min(88dvh, 760px);
    margin: auto !important;
    border-radius: 23px !important;
    transform: translateY(14px) scale(.985) !important;
}
.bw-collection-modal.is-open .bw-collection-modal-dialog {
    transform: translateY(0) scale(1) !important;
}
}
@media (hover: none), (pointer: coarse) {
.bw-collection-card:hover, .bw-collection-card.is-owned:hover {
    transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-collection-card.is-loading::after {
    animation-duration: 1.2s !important;
}
.bw-collection-modal, .bw-collection-modal-dialog, .bw-collection-card {
    transition-duration: .01ms !important;
}
}
.bw-collection-card-view-modal .bw-card-opening-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.bw-collection-card-view-modal .bw-card-opening-dialog::before, .bw-collection-card-view-modal .bw-clean-card-holo, .bw-collection-card-view-modal .bw-clean-card-glare, .bw-collection-card-view-modal .bw-clean-card-inner {
    animation: none !important;
}
.bw-card-opening-modal.is-collection-view .bw-card-opening-stage > .bw-clean-tcg-card, .bw-card-opening-modal.is-collection-view.is-revealed .bw-card-opening-stage > .bw-clean-tcg-card {
    animation: none !important;
    will-change: auto !important;
    transition: opacity .16s ease, transform .2s ease !important;
}
.bw-card-opening-modal.is-collection-view .bw-clean-card-glare {
    opacity: .10 !important;
    transform: none !important;
}
.bw-card-opening-modal.is-collection-view .bw-clean-card-holo {
    opacity: 0 !important;
    transform: none !important;
}
.bw-card-opening-modal.is-collection-view[data-rarity="4"] .bw-clean-card-holo {
    opacity: .09 !important;
}
.bw-card-opening-modal.is-collection-view[data-rarity="5"] .bw-clean-card-holo {
    opacity: .13 !important;
}
.bw-card-opening-modal.is-collection-view[data-rarity="6"] .bw-clean-card-holo {
    opacity: .16 !important;
}
.bw-collection-card-view-modal .bw-card-opening-topline > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.bw-collection-card-view-modal .bw-card-opening-tools > b {
    display: inline-flex !important;
    min-height: 27px;
    padding: 0 9px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.055);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .03em;
}
.bw-collection-card-view-modal .bw-card-opening-actions {
    grid-template-columns: 1fr !important;
}
.bw-collection-card-view-modal .bw-card-details-button {
    width: 100% !important;
}
@media (max-width: 480px) {
.bw-collection-card-view-modal .bw-card-opening-stage {
    height: min(430px, calc(100dvh - 170px)) !important;
    min-height: 345px !important;
}
.bw-collection-card-view-modal .bw-card-opening-topline {
    padding-right: 44px !important;
}
.bw-collection-card-view-modal .bw-card-opening-tools > b {
    display: inline-flex !important;
    max-width: 108px;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-card-opening-modal.is-collection-view .bw-card-opening-stage > .bw-clean-tcg-card, .bw-card-opening-modal.is-collection-view.is-revealed .bw-card-opening-stage > .bw-clean-tcg-card {
    transition-duration: .01ms !important;
}
}
.bw-card-opening-modal.is-details-open .bw-card-opening-stage, .bw-card-opening-modal.is-details-open .bw-card-opening-message {
    display: none !important;
}
.bw-card-opening-modal.is-details-open .bw-card-opening-dialog {
    align-items: stretch !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-behavior: auto !important;
}
.bw-card-opening-modal.is-details-open .bw-card-opening-topline {
    flex: 0 0 auto;
    margin-bottom: 6px !important;
}
.bw-card-opening-modal.is-details-open .bw-card-opening-actions {
    flex: 0 0 auto;
    margin-top: 2px !important;
}
.bw-card-opening-modal.is-details-open .bw-card-open-button {
    display: none !important;
}
.bw-card-opening-modal.is-details-open .bw-card-details-button {
    min-height: 44px !important;
    box-shadow: none !important;
}
.bw-card-opening-modal.is-details-open .bw-card-details {
    display: block;
    flex: 0 0 auto;
    width: min(100%, 620px) !important;
    margin: 8px auto max(12px, env(safe-area-inset-bottom)) !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
}
.bw-card-opening-modal.is-details-open .bw-card-details *, .bw-card-opening-modal.is-details-open .bw-card-details::before, .bw-card-opening-modal.is-details-open .bw-card-details::after, .bw-card-opening-modal.is-details-open .bw-card-opening-dialog::before, .bw-card-opening-modal.is-details-open .bw-card-opening-aurora, .bw-card-opening-modal.is-details-open .bw-card-opening-rays, .bw-card-opening-modal.is-details-open .bw-card-opening-glow, .bw-card-opening-modal.is-details-open .bw-card-opening-particles, .bw-card-opening-modal.is-details-open .bw-card-rarity-splash {
    animation: none !important;
    transition: none !important;
}
.bw-card-opening-modal.is-details-open .bw-card-opening-aurora, .bw-card-opening-modal.is-details-open .bw-card-opening-rays, .bw-card-opening-modal.is-details-open .bw-card-opening-glow, .bw-card-opening-modal.is-details-open .bw-card-opening-particles, .bw-card-opening-modal.is-details-open .bw-card-rarity-splash {
    display: none !important;
}
@media (max-width: 600px) {
.bw-card-opening-modal.is-details-open {
    padding: 0 !important;
    align-items: stretch !important;
}
.bw-card-opening-modal.is-details-open .bw-card-opening-dialog {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}
.bw-card-opening-modal.is-details-open .bw-card-details {
    width: 100% !important;
}
}


.bw-profile-weekly-rank {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 108px;
    margin-top: 12px;
    padding: 16px 18px;
    overflow: hidden;
    border: 1px solid #d8e6f3;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 96% 50%,
            rgba(51, 102, 153, 0.07) 0,
            rgba(51, 102, 153, 0.07) 52px,
            transparent 53px
        ),
        radial-gradient(
            circle at 96% 50%,
            transparent 0,
            transparent 76px,
            rgba(51, 102, 153, 0.05) 77px,
            rgba(51, 102, 153, 0.05) 103px,
            transparent 104px
        ),
        linear-gradient(110deg, #f4f9fe, #ffffff);
    box-shadow: 0 8px 22px rgba(31, 72, 111, 0.07);
}

.bw-profile-weekly-rank-icon {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #33699f;
    color: #ffffff;
    font-size: 27px;
    box-shadow: 0 8px 18px rgba(51, 105, 159, 0.20);
}

.bw-profile-weekly-rank-copy {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
}

.bw-profile-weekly-rank-copy > small {
    display: block;
    margin-bottom: 6px;
    color: #336699;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

.bw-profile-weekly-rank-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bw-profile-weekly-rank-title strong {
    color: #172033;
    font-family: inherit;
    font-size: 31px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.8px;
}

.bw-profile-weekly-rank-title span {
    display: inline-flex;
    height: 25px;
    padding: 0 9px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e7f0f9;
    color: #336699;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.bw-profile-weekly-rank-medal {
    position: relative;
    z-index: 2;
    flex: 0 0 36px;
    width: 36px;
    font-size: 28px;
    line-height: 1;
    text-align: center;
}

@media (max-width: 480px) {
    .bw-profile-weekly-rank {
        min-height: 98px;
        gap: 12px;
        padding: 14px;
        border-radius: 20px;
    }

    .bw-profile-weekly-rank-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 24px;
    }

    .bw-profile-weekly-rank-copy > small {
        margin-bottom: 5px;
        font-size: 10px;
    }

    .bw-profile-weekly-rank-title strong {
        font-size: 28px;
    }

    .bw-profile-weekly-rank-title span {
        height: 23px;
        padding: 0 8px;
        font-size: 9px;
    }

    .bw-profile-weekly-rank-medal {
        flex-basis: 30px;
        width: 30px;
        font-size: 24px;
    }
}

.bw-profile-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 13px;
}

.bw-profile-activity-item {
    min-width: 0;
    min-height: 58px;
    padding: 10px 11px;
    border: 1px solid #edf0f4;
    border-radius: 16px;
    background: #fafbfc;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bw-profile-activity-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #e8f8ef;
    color: #238e5d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.bw-profile-activity-copy {
    min-width: 0;
    flex: 1;
}

.bw-profile-activity-copy b,
.bw-profile-activity-copy small {
    display: block;
}

.bw-profile-activity-copy b {
    overflow: hidden;
    color: #172033;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-profile-activity-copy small {
    margin-top: 3px;
    color: #8993a2;
    font-size: 9px;
    font-weight: 700;
}

.bw-profile-activity-score {
    flex-shrink: 0;
    min-width: 53px;
    padding: 7px 9px;
    border-radius: 11px;
    background: #edf4fb;
    color: #336699;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}
.bw-public-profile-page {
    width: 100%;
    padding: 6px 0 36px;
}
.bw-public-profile-page *, .bw-public-profile-page *::before, .bw-public-profile-page *::after {
    box-sizing: border-box;
}
.bw-public-profile-hero {
    cursor: default;
}
.bw-public-profile-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
    margin-top: 12px;
}
.bw-public-profile-stats article {
    min-width: 0;
    padding: 12px 9px;
    border: 1px solid #e6eaf0;
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(19,29,48,.05);
}
.bw-public-profile-stats article > span {
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.bw-public-profile-stats .is-orange {
    color: #d98200;
    background: #fff3d6;
}
.bw-public-profile-stats .is-indigo {
    color: #586bd6;
    background: #edf0ff;
}
.bw-public-profile-stats .is-green {
    color: #238e5d;
    background: #e8f8ef;
}
.bw-public-profile-stats .is-blue {
    color: #2f72c7;
    background: #eaf3ff;
}
.bw-public-profile-stats article > div {
    min-width: 0;
}
.bw-public-profile-stats b, .bw-public-profile-stats small {
    display: block;
}
.bw-public-profile-stats b {
    overflow: hidden;
    color: #172033;
    font-size: 15px;
    font-weight: 1000;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-public-profile-stats small {
    margin-top: 3px;
    color: #8993a2;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.25;
}
.bw-public-profile-section {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #e6eaf0;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.055);
}
.bw-public-profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bw-public-profile-section-head > div {
    min-width: 0;
}
.bw-public-profile-section-head > div > span {
    display: block;
    color: #8d97a6;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}
.bw-public-profile-section-head h3 {
    margin: 3px 0 0;
    color: #172033;
    font-size: 16px;
    font-weight: 900;
}
.bw-public-profile-section-head > strong {
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6f47b7;
    background: #f1eaff;
    font-size: 12px;
    font-weight: 1000;
}
.bw-public-profile-status {
    min-height: 27px;
    padding: 0 10px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #7d8794;
    background: #f1f3f6;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}
.bw-public-profile-status.is-premium {
    color: #956200;
    background: #fff1bf;
}
.bw-public-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin-top: 13px;
}
.bw-public-profile-info-grid article {
    min-width: 0;
    min-height: 65px;
    padding: 11px;
    border: 1px solid #edf0f4;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafbfc;
}
.bw-public-profile-info-icon {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.bw-public-profile-info-icon.is-class {
    color: #586bd6;
    background: #edf0ff;
}
.bw-public-profile-info-icon.is-city {
    color: #d86969;
    background: #fff0f0;
}
.bw-public-profile-info-icon.is-instagram {
    background: #e1306c;
    color: #fff;
}
.bw-public-profile-info-icon.is-graduation {
    color: #2f9e67;
    background: #eaf8f1;
}
.bw-public-profile-info-grid article > div {
    min-width: 0;
}
.bw-public-profile-info-grid small, .bw-public-profile-info-grid b {
    display: block;
}
.bw-public-profile-info-grid small {
    color: #929baa;
    font-size: 8px;
    font-weight: 800;
}
.bw-public-profile-info-grid b {
    margin-top: 4px;
    overflow: hidden;
    color: #273142;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-public-profile-subjects {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
}
.bw-public-profile-subjects > span {
    color: #7f8998;
    font-size: 9px;
    font-weight: 900;
}
.bw-public-profile-subjects > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}
.bw-public-profile-subjects em {
    min-height: 31px;
    padding: 0 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #356899;
    background: #edf5fc;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}
.bw-public-profile-subjects small {
    color: #a0a8b3;
    font-size: 10px;
    font-weight: 700;
}
.bw-public-profile-collection-summary {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-top: 13px;
}
.bw-public-profile-collection-summary article {
    min-width: 0;
    padding: 11px 8px;
    border: 1px solid #edf0f4;
    border-radius: 15px;
    background: #fafbfc;
    text-align: center;
}
.bw-public-profile-collection-summary i {
    display: block;
    color: #7b58bf;
    font-size: 14px;
}
.bw-public-profile-collection-summary b, .bw-public-profile-collection-summary span {
    display: block;
}
.bw-public-profile-collection-summary b {
    margin-top: 6px;
    overflow: hidden;
    color: #202938;
    font-size: 14px;
    font-weight: 1000;
    text-overflow: ellipsis;
}
.bw-public-profile-collection-summary span {
    margin-top: 3px;
    color: #929baa;
    font-size: 8px;
    font-weight: 800;
}
.bw-public-profile-card-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 11px;
}
.bw-public-profile-card-list > article {
    position: relative;
    min-width: 0;
    min-height: 74px;
    padding: 8px;
    border: 1px solid #e8ebf0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    background: #fff;
}
.bw-public-profile-card-list > article.is-rarity-4, .bw-public-profile-card-list > article.is-rarity-5, .bw-public-profile-card-list > article.is-rarity-6 {
    border-color: #dfd2f5;
    background: linear-gradient(135deg,#fbf8ff,#fff);
}
.bw-public-profile-card-image {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0a8b4;
    background: #eef1f5;
}
.bw-public-profile-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.bw-public-profile-card-copy {
    min-width: 0;
    flex: 1;
}
.bw-public-profile-card-copy small, .bw-public-profile-card-copy b, .bw-public-profile-card-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-public-profile-card-copy small {
    color: #8f79b5;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}
.bw-public-profile-card-copy b {
    margin-top: 4px;
    color: #202938;
    font-size: 11px;
    font-weight: 900;
}
.bw-public-profile-card-copy span {
    margin-top: 3px;
    color: #929baa;
    font-size: 8px;
    font-weight: 700;
}
.bw-public-profile-card-list > article > em {
    position: absolute;
    right: 6px;
    bottom: 6px;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #67409f;
    background: #efe6ff;
    font-size: 8px;
    font-style: normal;
    font-weight: 1000;
}
.bw-public-profile-no-cards {
    min-height: 74px;
    margin-top: 11px;
    padding: 12px;
    border: 1px dashed #d8dee7;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #8d97a6;
    background: #fafbfc;
}
.bw-public-profile-no-cards > i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7950bd;
    background: #f0e9fb;
}
.bw-public-profile-no-cards b, .bw-public-profile-no-cards span {
    display: block;
}
.bw-public-profile-no-cards b {
    color: #344052;
    font-size: 11px;
    font-weight: 900;
}
.bw-public-profile-no-cards span {
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
}
.bw-public-profile-main-action, .bw-public-profile-empty-button {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border: 0;
    border-radius: 15px;
    outline: 0;
    color: #fff;
    background: #336699;
    box-shadow: 0 8px 18px rgba(51,102,153,.18);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-public-profile-main-action i {
    margin-right: 7px;
}
.bw-public-profile-main-action:active, .bw-public-profile-empty-button:active {
    transform: scale(.985);
}
@media (max-width:480px) {
.bw-public-profile-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
}
.bw-public-profile-section {
    padding: 14px;
    border-radius: 19px;
}
.bw-public-profile-info-grid, .bw-public-profile-card-list {
    grid-template-columns: 1fr;
}
}
.bw-edit-profile-avatar [hidden] {
    display: none !important;
}
.q-cnt .bw-multi-answer-hint, .mistakes-q-cnt .bw-multi-answer-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    padding: 8px 10px;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    background: #EFF6FF;
    color: #1D4ED8;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
}
.q-cnt .bw-multi-answer-hint i, .mistakes-q-cnt .bw-multi-answer-hint i {
    flex: 0 0 auto;
    font-size: 13px;
}
.q-cnt .q-answ li.is-selected:not(.is-correct):not(.is-wrong), .mistakes-q-cnt .q-answ li.is-selected:not(.is-correct):not(.is-wrong) {
    border-color: #60A5FA !important;
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.12);
}
.q-cnt .q-answ li.is-selected:not(.is-correct):not(.is-wrong) .bw-answer-key, .mistakes-q-cnt .q-answ li.is-selected:not(.is-correct):not(.is-wrong) .bw-answer-key {
    border-color: #93C5FD;
    background: #DBEAFE;
    color: #1D4ED8;
}
.q-cnt .q-answ li.is-selected:not(.is-correct):not(.is-wrong) .bw-answer-state, .mistakes-q-cnt .q-answ li.is-selected:not(.is-correct):not(.is-wrong) .bw-answer-state {
    background: #2563EB;
    color: #fff;
}
.q-cnt .bw-quiz-feedback.is-partial, .mistakes-q-cnt .bw-quiz-feedback.is-partial {
    border-color: #FDE68A;
    background: #FFFBEB;
}
.q-cnt .bw-quiz-feedback.is-partial .bw-feedback-icon, .mistakes-q-cnt .bw-quiz-feedback.is-partial .bw-feedback-icon {
    color: #D97706;
}
.q-cnt .q-answ li.is-revealed, .mistakes-q-cnt .q-answ li.is-revealed {
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18);
}
.q-cnt .bw-matching-answer-area, .mistakes-q-cnt .bw-matching-answer-area {
    padding-bottom: 8px;
}
.q-cnt .bw-match-answer-hint, .mistakes-q-cnt .bw-match-answer-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid #C7D2FE;
    border-radius: 12px;
    background: #EEF2FF;
    color: #4338CA;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
}
.q-cnt .bw-match-answer-hint i, .mistakes-q-cnt .bw-match-answer-hint i {
    flex: 0 0 auto;
    font-size: 13px;
}
.q-cnt .bw-matching-board, .mistakes-q-cnt .bw-matching-board {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.q-cnt .bw-match-group, .mistakes-q-cnt .bw-match-group {
    padding: 10px;
    border: 1px solid #E4E7EC;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.045);
}
.q-cnt .bw-match-left, .mistakes-q-cnt .bw-match-left {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}
.q-cnt .bw-match-left > span, .mistakes-q-cnt .bw-match-left > span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #E0E7FF;
    color: #4338CA;
    font-size: 12px;
    font-weight: 900;
}
.q-cnt .bw-match-left > strong, .mistakes-q-cnt .bw-match-left > strong {
    min-width: 0;
    color: #101828;
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 900;
    word-break: break-word;
    overflow-wrap: break-word;
}
.q-cnt .bw-match-options, .mistakes-q-cnt .bw-match-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.q-cnt .bw-match-option, .mistakes-q-cnt .bw-match-option {
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 8px;
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    background: #F8FAFC;
    color: #344054;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.q-cnt .bw-match-option:active, .mistakes-q-cnt .bw-match-option:active {
    transform: scale(.99);
}
.q-cnt .bw-match-option:disabled, .mistakes-q-cnt .bw-match-option:disabled {
    opacity: 1;
    cursor: default;
}
.q-cnt .bw-match-option-key, .mistakes-q-cnt .bw-match-option-key {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D8DEE8;
    border-radius: 9px;
    background: #fff;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
}
.q-cnt .bw-match-option-copy, .mistakes-q-cnt .bw-match-option-copy {
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.34;
    font-weight: 700;
    word-break: break-word;
    overflow-wrap: break-word;
}
.q-cnt .bw-match-option-state, .mistakes-q-cnt .bw-match-option-state {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 10px;
}
.q-cnt .bw-match-option.is-selected:not(.is-correct):not(.is-wrong), .mistakes-q-cnt .bw-match-option.is-selected:not(.is-correct):not(.is-wrong) {
    border-color: #818CF8;
    background: #EEF2FF;
    color: #3730A3;
    box-shadow: 0 7px 18px rgba(79, 70, 229, .12);
}
.q-cnt .bw-match-option.is-selected:not(.is-correct):not(.is-wrong) .bw-match-option-key, .mistakes-q-cnt .bw-match-option.is-selected:not(.is-correct):not(.is-wrong) .bw-match-option-key {
    border-color: #A5B4FC;
    background: #E0E7FF;
    color: #4338CA;
}
.q-cnt .bw-match-option.is-selected:not(.is-correct):not(.is-wrong) .bw-match-option-state, .mistakes-q-cnt .bw-match-option.is-selected:not(.is-correct):not(.is-wrong) .bw-match-option-state {
    background: #4F46E5;
    color: #fff;
}
.q-cnt .bw-match-option.is-correct, .mistakes-q-cnt .bw-match-option.is-correct {
    border-color: #86EFAC !important;
    background: #F0FDF4 !important;
    color: #166534 !important;
}
.q-cnt .bw-match-option.is-correct .bw-match-option-key, .mistakes-q-cnt .bw-match-option.is-correct .bw-match-option-key {
    border-color: #86EFAC;
    background: #DCFCE7;
    color: #15803D;
}
.q-cnt .bw-match-option.is-correct .bw-match-option-state, .mistakes-q-cnt .bw-match-option.is-correct .bw-match-option-state {
    background: #22C55E;
    color: #fff;
}
.q-cnt .bw-match-option.is-wrong, .mistakes-q-cnt .bw-match-option.is-wrong {
    border-color: #FCA5A5 !important;
    background: #FEF2F2 !important;
    color: #991B1B !important;
    animation: bwQuizShake .35s ease;
}
.q-cnt .bw-match-option.is-wrong .bw-match-option-key, .mistakes-q-cnt .bw-match-option.is-wrong .bw-match-option-key {
    border-color: #FCA5A5;
    background: #FEE2E2;
    color: #B91C1C;
}
.q-cnt .bw-match-option.is-wrong .bw-match-option-state, .mistakes-q-cnt .bw-match-option.is-wrong .bw-match-option-state {
    background: #EF4444;
    color: #fff;
}
.q-cnt .bw-match-option.is-revealed, .mistakes-q-cnt .bw-match-option.is-revealed {
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .18);
}
.q-cnt .bw-match-group.is-correct-group, .mistakes-q-cnt .bw-match-group.is-correct-group {
    border-color: #BBF7D0;
}
.q-cnt .bw-match-group.is-wrong-group, .mistakes-q-cnt .bw-match-group.is-wrong-group {
    border-color: #FECACA;
}
@media (max-height: 680px) {
.q-cnt .bw-match-group, .mistakes-q-cnt .bw-match-group {
    padding: 8px;
}
.q-cnt .bw-match-option, .mistakes-q-cnt .bw-match-option {
    min-height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.q-cnt .bw-match-option-copy, .mistakes-q-cnt .bw-match-option-copy {
    font-size: 11.5px;
}
}
.themes-cnt .bw-subject-test-builder, .themes-cnt .bw-subject-test-builder * {
    box-sizing: border-box;
}
.themes-cnt .bw-subject-test-builder {
    width: 100%;
    margin: 7px 0 22px;
    padding: 16px;
    border: 1px solid #dfe8f2;
    border-radius: 22px;
    background: radial-gradient(circle at right top, rgba(69, 135, 194, 0.13), transparent 42%),
    linear-gradient(145deg, #ffffff, #f7fbff);
    box-shadow: 0 12px 30px rgba(32, 70, 106, 0.10);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.themes-cnt .bw-subject-test-builder.has-premium-types {
    border-color: #ead28d;
    background: radial-gradient(circle at right top, rgba(247, 190, 52, 0.19), transparent 43%),
    linear-gradient(145deg, #fffdf6, #ffffff);
    box-shadow: 0 14px 32px rgba(151, 108, 18, 0.13);
}
.themes-cnt .bw-subject-test-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.themes-cnt .bw-subject-test-head-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #336699, #4f8bc2);
    box-shadow: 0 8px 18px rgba(51, 102, 153, 0.22);
    font-size: 20px;
}
.themes-cnt .bw-subject-test-kicker {
    display: block;
    margin-bottom: 3px;
    color: #6f8194;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}
.themes-cnt .bw-subject-test-head h3 {
    margin: 0;
    color: #172033;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}
.themes-cnt .bw-subject-test-head p {
    margin: 5px 0 0;
    color: #748092;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 600;
}
.themes-cnt .bw-subject-test-plan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}
.themes-cnt .bw-subject-test-plan-row {
    width: 100%;
    min-height: 65px;
    padding: 11px;
    border: 1px solid #e3e9f0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
}
.themes-cnt .bw-subject-test-plan-row.is-required {
    border-color: #cfe7da;
    background: #f7fcf9;
}
.themes-cnt .bw-subject-test-plan-row.is-premium {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.themes-cnt .bw-subject-test-plan-row.is-premium:hover {
    border-color: #dbc779;
    background: #fffdf5;
}
.themes-cnt .bw-subject-test-plan-row.is-premium.is-selected {
    border-color: #e1c15e;
    background: #fffaf0;
    box-shadow: 0 6px 16px rgba(180, 132, 20, .08);
}
.themes-cnt .bw-subject-test-plan-row.is-premium:active {
    transform: scale(.988);
}
.themes-cnt .bw-subject-test-plan-row.is-premium input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.themes-cnt .bw-subject-test-plan-check, .themes-cnt .bw-subject-test-checkbox {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.themes-cnt .bw-subject-test-plan-check {
    color: #fff;
    background: #31a96d;
    box-shadow: 0 6px 13px rgba(49, 169, 109, .19);
}
.themes-cnt .bw-subject-test-checkbox {
    border: 2px solid #cbd5e1;
    color: transparent;
    background: #f8fafc;
    transition: .18s ease;
}
.themes-cnt .bw-subject-test-premium-toggle:checked + .bw-subject-test-checkbox {
    border-color: #d8a91f;
    color: #fff;
    background: linear-gradient(135deg, #f1bf2f, #d8950c);
    box-shadow: 0 6px 14px rgba(216, 149, 12, .23);
}
.themes-cnt .bw-subject-test-plan-copy {
    flex: 1;
    min-width: 0;
}
.themes-cnt .bw-subject-test-plan-copy strong, .themes-cnt .bw-subject-test-plan-copy span {
    display: block;
}
.themes-cnt .bw-subject-test-plan-copy strong {
    color: #1e293b;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 900;
}
.themes-cnt .bw-subject-test-plan-copy span {
    margin-top: 3px;
    color: #7b8796;
    font-size: 9.5px;
    line-height: 1.35;
    font-weight: 600;
}
.themes-cnt .bw-subject-test-plan-row > em {
    flex: 0 0 auto;
    min-height: 25px;
    padding: 0 8px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #27865b;
    background: #e8f7ef;
    font-size: 8.5px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.themes-cnt .bw-subject-test-plan-row.is-premium > em {
    color: #956700;
    background: #fff1bd;
}
.themes-cnt .bw-subject-test-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.themes-cnt .bw-subject-test-summary > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: rgba(255,255,255,.82);
}
.themes-cnt .bw-subject-test-summary span, .themes-cnt .bw-subject-test-summary strong {
    display: block;
}
.themes-cnt .bw-subject-test-summary span {
    color: #8a95a4;
    font-size: 8.5px;
    font-weight: 800;
}
.themes-cnt .bw-subject-test-summary strong {
    margin-top: 3px;
    color: #273548;
    font-size: 13px;
    font-weight: 900;
}
.themes-cnt .bw-subject-test-required-info {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 15px;
    padding: 12px;
    border: 1px solid #d6e7f5;
    border-radius: 16px;
    background: #f5faff;
}
.themes-cnt .bw-subject-test-required-info > span {
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #336699;
    background: #e4f0fb;
    font-size: 15px;
}
.themes-cnt .bw-subject-test-required-info strong {
    display: block;
    color: #1f2c3d;
    font-size: 14px;
    font-weight: 900;
}
.themes-cnt .bw-subject-test-required-info p {
    margin: 3px 0 0;
    color: #758294;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 600;
}
.themes-cnt .bw-subject-test-start {
    width: 100%;
    min-height: 49px;
    margin-top: 12px;
    padding: 0 16px;
    border: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    background: linear-gradient(135deg, #336699, #447fb5);
    box-shadow: 0 9px 20px rgba(51, 102, 153, .22);
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.themes-cnt .has-premium-types .bw-subject-test-start {
    background: linear-gradient(135deg, #d99b10, #efbe36);
    box-shadow: 0 9px 20px rgba(210, 146, 10, .25);
}
.themes-cnt .bw-subject-test-start:active {
    transform: scale(.985);
}
.themes-cnt .bw-subject-test-start:disabled {
    opacity: .62;
    cursor: default;
}
.themes-cnt .bw-subject-test-builder.is-loading .bw-subject-test-start i {
    animation: bwSubjectTestArrowLoading .8s ease-in-out infinite alternate;
}
@keyframes bwSubjectTestArrowLoading {
from {
    transform: translateX(-2px);
}
to {
    transform: translateX(3px);
}
}
.themes-cnt .bw-theme-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 10px;
}
.themes-cnt .bw-theme-list-head span {
    display: block;
    color: #8a95a3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}
.themes-cnt .bw-theme-list-head h3 {
    margin: 3px 0 0;
    color: #202c3d;
    font-size: 16px;
    font-weight: 900;
}
.themes-cnt .bw-theme-list-head em {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 10px;
    color: #55708b;
    background: #edf3f8;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}
.q-cnt .bw-quiz-mode-badge {
    width: fit-content;
    max-width: 100%;
    min-height: 27px;
    margin-bottom: 8px;
    padding: 0 9px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #356899;
    background: #edf5fc;
    font-size: 9px;
    font-weight: 900;
}
.q-cnt .bw-quiz-mode-badge.is-premium {
    color: #946200;
    background: #fff1be;
}
@media (max-width: 480px) {
.themes-cnt .bw-subject-test-builder {
    padding: 14px;
    border-radius: 20px;
}
.themes-cnt .bw-subject-test-head-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 18px;
}
.themes-cnt .bw-subject-test-head h3 {
    font-size: 17px;
}
.themes-cnt .bw-subject-test-plan-row {
    min-height: 62px;
    padding: 10px;
}
.themes-cnt .bw-subject-test-plan-row > em {
    padding: 0 6px;
    font-size: 7.5px;
}
.themes-cnt .bw-subject-test-plan-copy strong {
    font-size: 12px;
}
.themes-cnt .bw-subject-test-plan-copy span {
    font-size: 9px;
}
}
.subject-section {
    margin-top: 22px;
}
.subject-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.subject-section-head h4 {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
}
.subject-section-head p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
    color: #8a94a3;
}
.subject-section-head > span {
    flex-shrink: 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eaf2fb;
    color: #336699;
    font-size: 11px;
    font-weight: 800;
}
.required-subject-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.required-subject-list > li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 11px 12px;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 17px;
    box-shadow: 0 5px 16px rgba(17, 24, 39, 0.055);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.required-subject-list > li:active {
    transform: scale(.985);
}
.required-subject-list .subject-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    margin: 0;
    border-radius: 14px;
}
.required-subject-list .subject-icon i {
    font-size: 20px;
}
.subject-content {
    flex: 1;
    min-width: 0;
}
.subject-content b {
    display: block;
    color: #182230;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
}
.subject-content small {
    display: block;
    margin-top: 3px;
    color: #8a94a3;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
}
.subject-arrow {
    flex-shrink: 0;
    color: #a5afbd;
    font-size: 12px;
}
.subject-section--profile .main-discipline-list ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.subject-section--profile .main-discipline-list ul > li {
    min-height: 94px;
    padding: 12px 8px;
    border-radius: 16px;
    box-shadow: 0 5px 16px rgba(17, 24, 39, 0.055);
}
.subject-section--profile .subject-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 13px;
}
.subject-section--profile .subject-icon i {
    font-size: 20px;
}
.subject-section--profile .main-discipline-list .title {
    font-size: 13px;
    line-height: 1.25;
}
@media (hover: hover) {
.required-subject-list > li:hover, .subject-section--profile .main-discipline-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(17, 24, 39, 0.09);
}
}
.cons-list-cnt {
    padding: 8px 0 24px;
}
.cons-list-cnt input[type="search"] {
    width: 100%;
    height: 46px;
    margin-bottom: 12px;
    padding: 0 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    outline: none;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.cons-list-cnt input[type="search"]::placeholder {
    color: #9ca3af;
}
.cons-list-cnt input[type="search"]:focus {
    border-color: #336699;
    box-shadow: 0 0 0 3px rgba(51, 102, 153, 0.12);
}
.cons-list-cnt input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}
.bw-mistakes-insights {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
    gap: 12px;
    margin-top: 12px;
}
.bw-mistakes-insight-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e8edf4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 50, 73, .06);
}
.bw-mistakes-insight-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.bw-mistakes-insight-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bw-mistakes-insight-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #eef5ff;
    color: #3478c4;
    font-size: 15px;
}
.bw-mistakes-insight-copy {
    min-width: 0;
}
.bw-mistakes-insight-copy b {
    display: block;
    color: #182334;
    font-size: 15px;
    line-height: 1.25;
}
.bw-mistakes-insight-copy span {
    display: block;
    margin-top: 3px;
    color: #7c8797;
    font-size: 12px;
    line-height: 1.35;
}
.bw-mistakes-subjects {
    display: grid;
    gap: 12px;
}
.bw-mistakes-subject-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.bw-mistakes-subject-main {
    min-width: 0;
}
.bw-mistakes-subject-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}
.bw-mistakes-subject-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-mistakes-subject-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f6;
}
.bw-mistakes-subject-fill {
    height: 100%;
    min-width: 7px;
    border-radius: inherit;
    background: linear-gradient(90deg, #4d8fd3, #6fa8e1);
}
.bw-mistakes-subject-count {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 11px;
    background: #f3f6fa;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}
.bw-mistakes-progress-body {
    display: flex;
    align-items: center;
    gap: 16px;
}
.bw-mistakes-progress-ring {
    --progress: 0;
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 102px;
    width: 102px;
    height: 102px;
    border-radius: 50%;
    background: conic-gradient(
                #3478c4 calc(var(--progress) * 1%),
                #e9eef5 0
            );
}
.bw-mistakes-progress-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #fff;
}
.bw-mistakes-progress-ring strong {
    position: relative;
    z-index: 1;
    color: #182334;
    font-size: 22px;
    line-height: 1;
}
.bw-mistakes-progress-info {
    min-width: 0;
}
.bw-mistakes-progress-info > b {
    display: block;
    color: #182334;
    font-size: 17px;
    line-height: 1.2;
}
.bw-mistakes-progress-info > span {
    display: block;
    margin-top: 5px;
    color: #7c8797;
    font-size: 12px;
    line-height: 1.35;
}
.bw-mistakes-week-result {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef8f1;
    color: #318052;
    font-size: 12px;
    font-weight: 700;
}
.bw-mistakes-insight-empty {
    padding: 14px;
    border-radius: 14px;
    background: #f7f9fc;
    color: #7c8797;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}
@media (max-width: 720px) {
.bw-mistakes-insights {
    grid-template-columns: 1fr;
}
.bw-mistakes-progress-body {
    align-items: center;
}
}
@media (max-width: 390px) {
.bw-mistakes-insight-card {
    padding: 14px;
    border-radius: 18px;
}
.bw-mistakes-progress-ring {
    flex-basis: 88px;
    width: 88px;
    height: 88px;
}
}
.unt-cnt, .unt-result-cnt {
    min-height: calc(100vh - 105px);
    padding: 12px 0 30px;
    background: #f5f5f5;
    color: #101828;
}
.bw-unt-builder, .bw-unt-result {
    max-width: 600px;
}
.bw-unt-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(37,99,235,.12);
    border-radius: 22px;
    background: linear-gradient(135deg,#eff6ff 0%,#ffffff 62%,#eef2ff 100%);
    box-shadow: 0 14px 34px rgba(15,23,42,.08);
}
.bw-unt-hero-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg,#2563eb,#4f46e5);
    color: #fff;
    font-size: 25px;
    box-shadow: 0 12px 24px rgba(37,99,235,.24);
}
.bw-unt-hero span, .bw-unt-section-head span, .bw-unt-required-card header span, .bw-unt-result-breakdown .bw-unt-section-head span {
    display: block;
    color: #2563eb;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bw-unt-hero h1 {
    margin: 3px 0 5px;
    color: #101828;
    font-size: 21px;
    line-height: 1.2;
}
.bw-unt-hero p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}
.bw-unt-format-card {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-top: 12px;
}
.bw-unt-format-item {
    padding: 14px 8px;
    border: 1px solid #e4e7ec;
    border-radius: 17px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 22px rgba(15,23,42,.045);
}
.bw-unt-format-item strong {
    display: block;
    color: #1d4ed8;
    font-size: 23px;
    line-height: 1;
    font-weight: 950;
}
.bw-unt-format-item span {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 800;
}
.bw-unt-required-card, .bw-unt-combinations, .bw-unt-rules-card, .bw-unt-result-breakdown {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15,23,42,.055);
}
.bw-unt-required-card header, .bw-unt-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.bw-unt-required-card h2, .bw-unt-section-head h2 {
    margin: 3px 0 0;
    color: #101828;
    font-size: 17px;
    line-height: 1.25;
}
.bw-unt-required-card header > strong, .bw-unt-section-head > strong {
    padding: 7px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.bw-unt-required-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 13px;
}
.bw-unt-required-list > div {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: #f8fafc;
}
.bw-unt-required-list i {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef2ff;
    color: #4f46e5;
}
.bw-unt-required-list span {
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}
.bw-unt-required-list b {
    min-width: 34px;
    padding: 6px 8px;
    border-radius: 10px;
    background: #fff;
    color: #101828;
    font-size: 12px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(15,23,42,.06);
}
.bw-unt-profile-picker {
    margin-top: 14px;
}
.bw-unt-picker-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.bw-unt-selection-status {
    margin: 0;
    color: #475467;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}
.bw-unt-clear-selection {
    flex-shrink: 0;
    min-height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 11px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.bw-unt-clear-selection[hidden] {
    display: none;
}
.bw-unt-subject-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}
.bw-unt-subject-option {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 24px;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px;
    border: 1.5px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
    color: #101828;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.bw-unt-subject-option:not(:disabled):hover {
    border-color: #bfdbfe;
    transform: translateY(-1px);
}
.bw-unt-subject-option:not(:disabled):active {
    transform: scale(.985);
}
.bw-unt-subject-option-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #f2f4f7;
    color: #667085;
    font-size: 17px;
    transition: .18s ease;
}
.bw-unt-subject-option-copy {
    min-width: 0;
}
.bw-unt-subject-option-copy strong {
    display: block;
    color: inherit;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
    word-break: break-word;
}
.bw-unt-subject-option-state {
    display: block;
    margin-top: 3px;
    color: #98a2b3;
    font-size: 9px;
    line-height: 1.25;
    font-weight: 800;
}
.bw-unt-subject-option-mark {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #d0d5dd;
    border-radius: 50%;
    color: transparent;
    font-size: 9px;
    transition: .18s ease;
}
.bw-unt-subject-option.is-first {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    box-shadow: 0 9px 22px rgba(37,99,235,.12);
}
.bw-unt-subject-option.is-first .bw-unt-subject-option-icon {
    background: #2563eb;
    color: #fff;
}
.bw-unt-subject-option.is-first .bw-unt-subject-option-state {
    color: #2563eb;
}
.bw-unt-subject-option.is-first .bw-unt-subject-option-mark {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}
.bw-unt-subject-option.is-second {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #15803d;
    box-shadow: 0 9px 22px rgba(22,163,74,.11);
}
.bw-unt-subject-option.is-second .bw-unt-subject-option-icon {
    background: #16a34a;
    color: #fff;
}
.bw-unt-subject-option.is-second .bw-unt-subject-option-state {
    color: #16a34a;
}
.bw-unt-subject-option.is-second .bw-unt-subject-option-mark {
    border-color: #16a34a;
    background: #16a34a;
    color: #fff;
}
.bw-unt-subject-option.is-disabled, .bw-unt-subject-option:disabled {
    border-color: #eef0f3;
    background: #f8fafc;
    color: #b8c0cc;
    opacity: .52;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.bw-unt-subject-option.is-disabled .bw-unt-subject-option-icon, .bw-unt-subject-option:disabled .bw-unt-subject-option-icon {
    background: #f1f3f5;
    color: #c5cbd3;
}
.bw-unt-subject-option.is-disabled .bw-unt-subject-option-state, .bw-unt-subject-option:disabled .bw-unt-subject-option-state {
    color: #b8c0cc;
}
.bw-unt-selected-profile {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 24px;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    background: #f0fdf4;
}
.bw-unt-selected-profile[hidden] {
    display: none;
}
.bw-unt-selected-profile-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #16a34a;
    color: #fff;
    font-size: 17px;
}
.bw-unt-selected-profile-copy {
    min-width: 0;
}
.bw-unt-selected-profile-copy small {
    display: block;
    color: #15803d;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.bw-unt-selected-profile-copy strong {
    display: block;
    margin-top: 2px;
    color: #14532d;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 900;
}
.bw-unt-selected-profile-copy span {
    display: block;
    margin-top: 2px;
    color: #3f7a52;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 700;
}
.bw-unt-selected-profile > .fa-circle-check {
    color: #16a34a;
    font-size: 20px;
}
@media (max-width: 430px) {
.bw-unt-subject-grid {
    grid-template-columns: 1fr;
}
.bw-unt-subject-option {
    min-height: 62px;
}
}
.bw-unt-rules-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 7px;
    color: #344054;
    font-size: 14px;
}
.bw-unt-rules-card h3 i {
    color: #2563eb;
}
.bw-unt-rules-card p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 600;
}
.bw-unt-start {
    width: 100%;
    height: 56px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg,#2563eb,#4f46e5);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(37,99,235,.25);
    cursor: pointer;
}
.bw-unt-start:disabled {
    opacity: .65;
    cursor: default;
}
.q-cnt.bw-unt-exam-cnt .q-pst {
    padding-bottom: 72px;
}
.q-cnt.bw-unt-exam-cnt .bw-quiz-session-card {
    padding: 9px 11px;
}
.q-cnt .bw-quiz-session-card.is-unt-session .bw-quiz-mode-badge {
    margin-bottom: 8px;
}
.bw-unt-session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.bw-unt-current-subject {
    min-width: 0;
}
.bw-unt-current-subject small {
    display: block;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.bw-unt-current-subject strong {
    display: block;
    max-width: 330px;
    margin-top: 2px;
    overflow: hidden;
    color: #101828;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-unt-map-open {
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 11px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.q-cnt.bw-unt-exam-cnt .bw-quiz-progress-copy > span:last-child {
    gap: 5px;
    color: #344054;
}
.q-cnt.bw-unt-exam-cnt .bw-quiz-timer {
    min-width: 82px;
    padding: 7px 9px;
    color: #1d4ed8;
    font-size: 11px;
}
.q-cnt.bw-unt-exam-cnt .q-pst.is-time-warning .bw-quiz-timer {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
    animation: bwUntTimePulse 1.2s ease-in-out infinite;
}
@keyframes bwUntTimePulse {
0%, 100% {
    opacity: 1;
}
50% {
    opacity: .65;
}
}
.q-cnt.bw-unt-exam-cnt .bw-quiz-question-kicker {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    margin-bottom: 6px;
    overflow-x: auto;
    white-space: nowrap;
}
.q-cnt.bw-unt-exam-cnt .bw-quiz-question-kicker > span, .q-cnt.bw-unt-exam-cnt .bw-quiz-question-kicker > small {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 900;
}
.q-cnt.bw-unt-exam-cnt .bw-quiz-question-kicker > span:first-child {
    background: #2563eb;
    color: #fff;
}
.q-cnt.bw-unt-exam-cnt .bw-quiz-question-kicker > span:nth-child(2) {
    background: #eff6ff;
    color: #1d4ed8;
}
.q-cnt.bw-unt-exam-cnt .bw-quiz-question-kicker > small {
    background: #f2f4f7;
    color: #667085;
}
.q-cnt.bw-unt-exam-cnt .bw-quiz-slide.transformScaleYes {
    margin-top: 6px;
}
.q-cnt.bw-unt-exam-cnt .q-qusn {
    flex-basis: 150px;
    min-height: 125px;
    max-height: 165px;
}
.q-cnt.bw-unt-exam-cnt .q-answ li.is-selected:not(.is-correct):not(.is-wrong), .q-cnt.bw-unt-exam-cnt .bw-match-option.is-selected:not(.is-correct):not(.is-wrong) {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    box-shadow: 0 8px 20px rgba(37,99,235,.12);
}
.q-cnt.bw-unt-exam-cnt .q-answ li.is-selected .bw-answer-state, .q-cnt.bw-unt-exam-cnt .bw-match-option.is-selected .bw-match-option-state {
    background: #2563eb;
    color: #fff;
}
.q-cnt .bw-quiz-bottom.bw-unt-bottom {
    gap: 8px;
}
.q-cnt .bw-unt-bottom .bw-unt-prev, .q-cnt .bw-unt-bottom .bw-unt-flag, .q-cnt .bw-unt-bottom .q-next-btn {
    height: 52px !important;
    margin: 0 !important;
    border: 0;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 900;
}
.q-cnt .bw-unt-bottom .bw-unt-prev {
    width: 100px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #e9eef5;
    color: #344054;
}
.q-cnt .bw-unt-bottom .bw-unt-prev:disabled {
    opacity: .42;
}
.q-cnt .bw-unt-bottom .bw-unt-flag {
    width: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: #ea580c;
    font-size: 16px;
    line-height: 1;
}
.q-cnt .bw-unt-bottom .bw-unt-flag.is-active {
    background: #ffedd5;
    box-shadow: inset 0 0 0 1px #fb923c;
}
.q-cnt .bw-unt-bottom .q-next-btn {
    flex: 1;
    width: auto !important;
}
.bw-unt-map-opened {
    overflow: hidden !important;
}
.bw-unt-map-overlay[hidden] {
    display: none !important;
}
.bw-unt-map-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s ease;
}
.bw-unt-map-overlay.is-open {
    opacity: 1;
}
.bw-unt-map-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.54);
    backdrop-filter: blur(3px);
}
.bw-unt-map-sheet {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -20px 50px rgba(15,23,42,.25);
    transition: transform .18s ease;
}
.bw-unt-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #e4e7ec;
}
.bw-unt-map-head span {
    display: block;
    color: #2563eb;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bw-unt-map-head h3 {
    margin: 3px 0 0;
    color: #101828;
    font-size: 18px;
}
.bw-unt-map-head button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f2f4f7;
    color: #344054;
    font-size: 16px;
}
.bw-unt-map-summary {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    padding: 10px 16px;
    background: #f8fafc;
}
.bw-unt-map-summary span {
    padding: 8px 10px;
    border-radius: 11px;
    background: #fff;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.bw-unt-map-summary b {
    color: #101828;
}
.bw-unt-map-groups {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 8px;
    -webkit-overflow-scrolling: touch;
}
.bw-unt-map-group + .bw-unt-map-group {
    margin-top: 16px;
}
.bw-unt-map-group h4 {
    margin: 0 0 8px;
    color: #344054;
    font-size: 12px;
    font-weight: 900;
}
.bw-unt-map-grid {
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    gap: 6px;
}
.bw-unt-map-question {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #fff;
    color: #475467;
    font-size: 10px;
    font-weight: 900;
}
.bw-unt-map-question.is-answered {
    border-color: #86efac;
    background: #dcfce7;
    color: #15803d;
}
.bw-unt-map-question.is-current {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,.16);
}
.bw-unt-map-question.is-flagged::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f97316;
}
.bw-unt-map-footer {
    padding: 10px 16px 16px;
    border-top: 1px solid #e4e7ec;
    background: #fff;
}
.bw-unt-map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.bw-unt-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #667085;
    font-size: 9.5px;
    font-weight: 700;
}
.bw-unt-map-legend i {
    width: 11px;
    height: 11px;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
}
.bw-unt-map-legend i.is-current {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,.13);
}
.bw-unt-map-legend i.is-answered {
    border-color: #86efac;
    background: #dcfce7;
}
.bw-unt-map-legend i.is-flagged {
    border-color: #fed7aa;
    background: #ffedd5;
}
.bw-unt-finish {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 15px;
    background: #101828;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}
.bw-unt-result-hero {
    padding: 22px 16px;
    border-radius: 24px;
    background: linear-gradient(145deg,#1d4ed8,#4338ca);
    color: #fff;
    text-align: center;
    box-shadow: 0 18px 38px rgba(37,99,235,.25);
}
.bw-unt-result-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255,255,255,.16);
    font-size: 25px;
}
.bw-unt-result-hero > span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .78;
}
.bw-unt-result-hero h1 {
    margin: 7px 0 2px;
    font-size: 54px;
    line-height: 1;
}
.bw-unt-result-hero h1 small {
    font-size: 19px;
    opacity: .75;
}
.bw-unt-result-hero > strong {
    display: block;
    margin-top: 7px;
    font-size: 17px;
}
.bw-unt-result-hero > p {
    max-width: 450px;
    margin: 7px auto 0;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
    opacity: .84;
}
.bw-unt-result-meta {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-top: 18px;
}
.bw-unt-result-meta > div {
    padding: 10px 6px;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
}
.bw-unt-result-meta i, .bw-unt-result-meta b, .bw-unt-result-meta span {
    display: block;
}
.bw-unt-result-meta i {
    margin-bottom: 5px;
    font-size: 14px;
    opacity: .8;
}
.bw-unt-result-meta b {
    font-size: 13px;
}
.bw-unt-result-meta span {
    margin-top: 2px;
    font-size: 8.5px;
    opacity: .7;
}
.bw-unt-result-subjects {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
}
.bw-unt-result-subject {
    display: grid;
    grid-template-columns: minmax(0,1fr) 54px;
    gap: 7px 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    background: #f8fafc;
}
.bw-unt-result-subject-copy {
    min-width: 0;
}
.bw-unt-result-subject-copy strong, .bw-unt-result-subject-copy span {
    display: block;
}
.bw-unt-result-subject-copy strong {
    color: #101828;
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 900;
}
.bw-unt-result-subject-copy span {
    margin-top: 2px;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}
.bw-unt-result-subject > b {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: #1d4ed8;
    font-size: 14px;
    text-align: right;
}
.bw-unt-result-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4e7ec;
}
.bw-unt-result-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#2563eb,#60a5fa);
}
.bw-unt-result-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 9px;
    margin-top: 14px;
}
.bw-unt-result-actions button {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 900;
}
.bw-unt-result-retry {
    background: linear-gradient(135deg,#2563eb,#4f46e5);
    color: #fff;
}
.bw-unt-result-home {
    background: #e9eef5;
    color: #344054;
}
.bw-quiz-build-error {
    margin-top: 30px;
    padding: 24px 18px;
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.07);
}
.bw-quiz-build-error-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #fff7ed;
    color: #ea580c;
    font-size: 23px;
}
.bw-quiz-build-error h2 {
    margin: 0;
    color: #101828;
    font-size: 19px;
}
.bw-quiz-build-error p {
    margin: 8px 0 16px;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
}
@media (max-width: 480px) {
.unt-cnt, .unt-result-cnt {
    padding-top: 8px;
}
.bw-unt-hero {
    padding: 15px;
}
.bw-unt-hero-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    font-size: 22px;
}
.bw-unt-hero h1 {
    font-size: 18px;
}
.bw-unt-hero p {
    font-size: 11.5px;
}
.bw-unt-required-card, .bw-unt-combinations, .bw-unt-rules-card, .bw-unt-result-breakdown {
    padding: 14px;
    border-radius: 18px;
}
.bw-unt-map-grid {
    grid-template-columns: repeat(6,minmax(0,1fr));
}
.q-cnt .bw-unt-bottom .bw-unt-prev {
    width: 52px;
    min-width: 52px;
}
.q-cnt .bw-unt-bottom .bw-unt-prev span {
    display: none;
}
.bw-unt-current-subject strong {
    max-width: 210px;
}
.bw-unt-result-hero h1 {
    font-size: 47px;
}
.bw-unt-result-actions {
    grid-template-columns: 1fr;
}
}
.bw-full-unt-entry {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 14px 0 18px;
    padding: 16px;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    background: linear-gradient(135deg,#1e3a8a 0%,#2563eb 58%,#0ea5e9 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(37,99,235,.24);
    -webkit-tap-highlight-color: transparent;
}
.bw-full-unt-entry::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -52px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
}
.bw-full-unt-entry:active {
    transform: scale(.985);
}
.bw-full-unt-entry-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.17);
    font-size: 23px;
    backdrop-filter: blur(8px);
}
.bw-full-unt-entry-copy {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}
.bw-full-unt-entry-copy small, .bw-full-unt-entry-copy strong, .bw-full-unt-entry-copy span {
    display: block;
}
.bw-full-unt-entry-copy small {
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
}
.bw-full-unt-entry-copy strong {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
}
.bw-full-unt-entry-copy span {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255,255,255,.82);
}
.bw-full-unt-entry-arrow {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #2563eb;
    font-size: 14px;
}
@media (max-width: 480px) {
.bw-full-unt-entry {
    padding: 14px;
    border-radius: 18px;
    gap: 11px;
}
.bw-full-unt-entry-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 14px;
    font-size: 20px;
}
.bw-full-unt-entry-copy strong {
    font-size: 15px;
}
.bw-full-unt-entry-copy span {
    font-size: 11px;
}
}
.bw-unt-result-saved {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 13px;
    font-weight: 700;
}
.bw-unt-result-mistakes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid rgba(245, 158, 11, .24);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(255, 255, 255, .96));
}
.bw-unt-result-mistakes > div {
    min-width: 0;
}
.bw-unt-result-mistakes > div > span {
    display: block;
    margin-bottom: 4px;
    color: #b45309;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.bw-unt-result-mistakes h2 {
    margin: 0 0 6px;
    font-size: 20px;
}
.bw-unt-result-mistakes p {
    margin: 0;
    color: #64748b;
    line-height: 1.45;
}
.bw-unt-result-mistakes button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: #f59e0b;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.bw-unt-history {
    margin-top: 24px;
}
.bw-unt-history-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.bw-unt-history-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.bw-unt-history-card:hover {
    border-color: rgba(51, 102, 153, .36);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}
.bw-unt-history-score {
    display: flex;
    align-items: baseline;
    min-width: 68px;
    color: #336699;
}
.bw-unt-history-score strong {
    font-size: 25px;
    line-height: 1;
}
.bw-unt-history-score small {
    font-size: 12px;
    font-weight: 800;
}
.bw-unt-history-copy {
    min-width: 0;
}
.bw-unt-history-copy strong, .bw-unt-history-copy small {
    display: block;
}
.bw-unt-history-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-unt-history-copy small {
    margin-top: 4px;
    color: #64748b;
}
.bw-unt-history-wrong {
    min-width: 48px;
    text-align: center;
}
.bw-unt-history-wrong b, .bw-unt-history-wrong small {
    display: block;
}
.bw-unt-history-wrong b {
    color: #dc2626;
    font-size: 18px;
}
.bw-unt-history-wrong small {
    color: #94a3b8;
    font-size: 11px;
}
.q-pst.is-saving-result {
    pointer-events: none;
    opacity: .72;
}
@media (max-width: 640px) {
.bw-unt-result-mistakes {
    align-items: stretch;
    flex-direction: column;
}
.bw-unt-result-mistakes button {
    width: 100%;
}
.bw-unt-history-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
}
.bw-unt-history-wrong {
    display: none;
}
.bw-unt-history-card > .fa-chevron-right {
    font-size: 12px;
}
}




/*  */


/* =========================================================
   BILIMWORLD — ЕНТ КОНСПЕКТ
   Основной контейнер: .ent-conspect
   ========================================================= */

.ent-conspect {
    --ent-primary: #336699;
    --ent-primary-dark: #28547f;
    --ent-primary-light: #eef5fb;

    --ent-text: #182230;
    --ent-text-secondary: #667085;
    --ent-text-light: #8b96a5;

    --ent-background: #f5f7fa;
    --ent-card: #ffffff;
    --ent-border: #e3e8ef;

    --ent-blue-light: #edf5ff;
    --ent-green: #16865c;
    --ent-green-light: #ecfdf3;
    --ent-orange: #c76616;
    --ent-orange-light: #fff6e8;
    --ent-red: #c43c47;
    --ent-red-light: #fff1f2;
    --ent-purple: #7551bd;
    --ent-purple-light: #f5f1ff;

    width: 100%;
    color: var(--ent-text);
    font-size: 15px;
    line-height: 1.65;
    word-break: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.ent-conspect *,
.ent-conspect *::before,
.ent-conspect *::after {
    box-sizing: border-box;
}

.ent-conspect h1,
.ent-conspect h2,
.ent-conspect h3,
.ent-conspect p,
.ent-conspect ul,
.ent-conspect ol,
.ent-conspect table {
    margin-top: 0;
}

.ent-conspect p:last-child,
.ent-conspect ul:last-child,
.ent-conspect ol:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HERO — ТАҚЫРЫПТЫҢ БАСЫ
   ========================================================= */

.ent-hero {
    position: relative;
    padding: 22px 20px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #d9e7f4;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at top right,
            rgba(51, 102, 153, 0.14),
            transparent 44%
        ),
        linear-gradient(135deg, #edf5fc 0%, #ffffff 72%);
    box-shadow: 0 10px 28px rgba(33, 70, 107, 0.08);
}

.ent-hero::after {
    content: "";
    position: absolute;
    top: -55px;
    right: -45px;
    width: 130px;
    height: 130px;
    border: 24px solid rgba(51, 102, 153, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.ent-hero-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(51, 102, 153, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ent-primary);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ent-hero-title {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
    color: #16283b;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.24;
    letter-spacing: -0.02em;
}

.ent-hero-description {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin-bottom: 0;
    color: var(--ent-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}


/* =========================================================
   НЕГІЗГІ БӨЛІМДЕР
   ========================================================= */

.ent-section {
    padding: 18px;
    margin-bottom: 12px;
    border: 1px solid var(--ent-border);
    border-radius: 19px;
    background: var(--ent-card);
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.045);
}

.ent-section-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    color: var(--ent-text);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.35;
}

.ent-section-title::before {
    content: "";
    display: block;
    width: 5px;
    height: 21px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--ent-primary);
}

.ent-section h3 {
    margin: 17px 0 8px;
    color: #27384a;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.4;
}

.ent-section-text {
    margin-bottom: 12px;
    color: #344054;
    font-size: 14px;
    line-height: 1.7;
}

.ent-section-text strong,
.ent-conspect p strong,
.ent-conspect li strong {
    color: #244e76;
    font-weight: 850;
}


/* =========================================================
   ТІЗІМДЕР
   В основном CSS BilimWorld маркеры отключены глобально,
   поэтому здесь возвращаем их.
   ========================================================= */

.ent-conspect .ent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ent-conspect ul.ent-list > li,
.ent-conspect ol.ent-list > li {
    position: relative;
    display: block;
    padding-left: 22px;
    color: #344054;
    font-size: 14px;
    line-height: 1.55;
    list-style: none;
}

.ent-conspect ul.ent-list > li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 3px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--ent-primary);
    border-radius: 50%;
    background: #fff;
}

.ent-conspect ol.ent-list {
    counter-reset: ent-list-counter;
}

.ent-conspect ol.ent-list > li {
    counter-increment: ent-list-counter;
    padding-left: 31px;
}

.ent-conspect ol.ent-list > li::before {
    content: counter(ent-list-counter);
    position: absolute;
    top: 1px;
    left: 0;
    width: 23px;
    height: 23px;
    border-radius: 8px;
    background: var(--ent-primary-light);
    color: var(--ent-primary);
    font-size: 11px;
    font-weight: 900;
    line-height: 23px;
    text-align: center;
}


/* =========================================================
   НЕГІЗГІ ҰҒЫМДАР — KEYWORDS
   ========================================================= */

.ent-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ent-keyword {
    display: inline-block;
    padding: 8px 11px;
    border: 1px solid #dbe7f2;
    border-radius: 11px;
    background: var(--ent-primary-light);
    color: #344d67;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.ent-keyword strong {
    color: var(--ent-primary-dark);
    font-weight: 900;
}


/* =========================================================
   МАҢЫЗДЫ ДЕРЕКТЕР — FACT CARDS
   ========================================================= */

.ent-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.ent-fact {
    min-width: 0;
    padding: 13px;
    border: 1px solid #e3eaf1;
    border-radius: 15px;
    background: #fafcfe;
}

.ent-fact-label {
    display: block;
    margin-bottom: 5px;
    color: var(--ent-text-light);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.ent-fact-value {
    display: block;
    color: #213c58;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
}


/* =========================================================
   ЖАЛПЫ HIGHLIGHT БЛОГЫ
   ========================================================= */

.ent-highlight {
    padding: 15px;
    margin: 12px 0;
    border: 1px solid #d9e8f5;
    border-left: 5px solid var(--ent-primary);
    border-radius: 15px;
    background: var(--ent-blue-light);
}

.ent-highlight-title {
    display: block;
    margin-bottom: 4px;
    color: var(--ent-primary-dark);
    font-size: 13px;
    font-weight: 900;
}

.ent-highlight-text {
    margin: 0;
    color: #40566d;
    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   МАҢЫЗДЫ
   ========================================================= */

.ent-important {
    position: relative;
    padding: 15px 16px 15px 46px;
    margin-bottom: 12px;
    border: 1px solid #f2d5a9;
    border-radius: 17px;
    background: var(--ent-orange-light);
    color: #71441d;
    font-size: 13px;
    line-height: 1.55;
}

.ent-important::before {
    content: "!";
    position: absolute;
    top: 15px;
    left: 14px;
    width: 23px;
    height: 23px;
    border-radius: 8px;
    background: #f59e0b;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 23px;
    text-align: center;
}

.ent-important strong {
    color: #9b4d0d;
    font-weight: 900;
}


/* =========================================================
   ХРОНОЛОГИЯ
   ========================================================= */

.ent-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 7px;
}

.ent-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 14px;
    width: 2px;
    border-radius: 999px;
    background: #dce8f3;
}

.ent-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0 14px 24px;
}

.ent-timeline-item::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 2px;
    width: 12px;
    height: 12px;
    border: 3px solid var(--ent-primary);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px var(--ent-primary-light);
}

.ent-timeline-date {
    color: var(--ent-primary);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
}

.ent-timeline-content {
    color: #344054;
    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   СЕБЕП → ОҚИҒА → НӘТИЖЕ
   ========================================================= */

.ent-cause {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-direction: column;
}

.ent-cause-item {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 13px 11px;
    border: 1px solid #e2e8ef;
    border-radius: 14px;
    background: #fafbfc;
    color: #344054;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.ent-cause-item:not(:last-child)::after {
         content: "↓";

    position: absolute;
    top: auto;
    right: 50%;
    z-index: 2;
    width: 22px;
    bottom: -14px;
    height: 18px;
    margin: 0 -11px 0 0;
    background: #fff;
    color: var(--ent-primary);
    font-size: 16px;
    font-weight: 900;
        line-height: 18px;
    text-align: center;
}


/* =========================================================
   КЕСТЕЛЕР
   ========================================================= */

.ent-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e1e7ee;
    border-radius: 14px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.ent-conspect .ent-table {
    width: 100%;
    min-width: 420px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    text-align: left;
}

.ent-conspect .ent-table th,
.ent-conspect .ent-table td {
    padding: 11px 12px;
    border: 0;
    border-right: 1px solid #e7ebf0;
    border-bottom: 1px solid #e7ebf0;
    color: #344054;
    font-size: 12px;
    line-height: 1.45;
    vertical-align: top;
}

.ent-conspect .ent-table th {
    background: var(--ent-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.015em;
}

.ent-conspect .ent-table td:first-child {
    color: #263d55;
    font-weight: 800;
}

.ent-conspect .ent-table tr:last-child td {
    border-bottom: 0;
}

.ent-conspect .ent-table th:last-child,
.ent-conspect .ent-table td:last-child {
    border-right: 0;
}

.ent-conspect .ent-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}


/* =========================================================
   ЕСТЕ САҚТА
   ========================================================= */

.ent-remember {
    position: relative;
    padding: 18px;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid #cfe9dc;
    border-radius: 19px;
    background: linear-gradient(135deg, #ecfdf3, #ffffff);
}

.ent-remember::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -38px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(22, 134, 92, 0.06);
}

.ent-remember-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #13724f;
    font-size: 17px;
    font-weight: 900;
}

.ent-remember-title::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--ent-green);
    color: #fff;
    font-size: 13px;
}

.ent-remember .ent-list {
    position: relative;
    z-index: 1;
}

.ent-remember .ent-list li {
    color: #315b4b;
}

.ent-remember ul.ent-list > li::before {
    border-color: var(--ent-green);
}


/* =========================================================
   ШАТАСТЫРМА
   ========================================================= */

.ent-confuse {
    padding: 18px;
    margin-bottom: 12px;
    border: 1px solid #f3ced2;
    border-radius: 19px;
    background: linear-gradient(135deg, var(--ent-red-light), #fff);
}

.ent-confuse-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: #a72e39;
    font-size: 17px;
    font-weight: 900;
}

.ent-confuse-title::before {
    content: "≠";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--ent-red);
    color: #fff;
    font-size: 14px;
}

.ent-confuse p {
    margin-bottom: 8px;
    color: #6f3b41;
    font-size: 13px;
    line-height: 1.6;
}

.ent-confuse p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   ҚЫСҚАША ҚОРЫТЫНДЫ
   ========================================================= */

.ent-summary {
    padding: 18px;
    margin-bottom: 5px;
    border: 1px solid #ded3f3;
    border-radius: 19px;
    background: linear-gradient(135deg, var(--ent-purple-light), #fff);
}

.ent-summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #6342a3;
    font-size: 17px;
    font-weight: 900;
}

.ent-summary-title::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--ent-purple);
    color: #fff;
    font-size: 13px;
}

.ent-summary .ent-list li {
    color: #504369;
}

.ent-summary ul.ent-list > li::before {
    border-color: var(--ent-purple);
}


/* =========================================================
   ТЕКСТІ БЕЛГІЛЕУ
   ========================================================= */

.ent-conspect ::selection {
    background: rgba(51, 102, 153, 0.2);
    color: #16283b;
}


/* =========================================================
   АҒЫМДАҒЫ .cons-page-text КОНТЕЙНЕРІМЕН ҮЙЛЕСІМДІЛІК
   ========================================================= */

.cons-page-text:has(.ent-conspect) {
    padding: 0;
    overflow-x: visible;
    background: transparent;
    line-height: normal;
}

.cons-page-text > .ent-conspect {
    width: 100%;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .ent-conspect {
        font-size: 14px;
    }

    .ent-hero {
        padding: 19px 16px;
        border-radius: 19px;
    }

    .ent-hero-title {
        font-size: 20px;
        line-height: 1.27;
    }

    .ent-hero-description {
        font-size: 13px;
    }

    .ent-section,
    .ent-remember,
    .ent-confuse,
    .ent-summary {
        padding: 15px;
        border-radius: 17px;
    }

    .ent-section-title,
    .ent-remember-title,
    .ent-confuse-title,
    .ent-summary-title {
        font-size: 16px;
    }

    .ent-section-text,
    .ent-conspect ul.ent-list > li,
    .ent-conspect ol.ent-list > li {
        font-size: 13px;
    }

    .ent-keyword {
        width: 100%;
        padding: 9px 10px;
    }

    .ent-facts {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ent-fact {
        padding: 12px;
    }

    .ent-timeline-item {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 9px;
    }

    .ent-timeline-date {
        font-size: 11px;
    }

    .ent-timeline-content {
        font-size: 12px;
    }

    .ent-cause-item {
        padding: 12px;
        text-align: left;
    }

    .ent-important {
        padding: 14px 14px 14px 43px;
        font-size: 12px;
    }

    .ent-important::before {
        top: 14px;
        left: 12px;
    }

    .ent-conspect .ent-table th,
    .ent-conspect .ent-table td {
        padding: 10px;
        font-size: 11px;
    }
}

/* Навигация между конспектами */
.cons-lesson-navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
	margin-bottom: 20px;
}

.cons-lesson-navigation.is-single {
	grid-template-columns: 1fr;
}

.cons-lesson-nav-btn {
	min-width: 0;
	min-height: 54px;
	padding: 10px 13px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background: #fff;
	color: #336699;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.cons-lesson-nav-btn:hover {
	border-color: #cfdce9;
	box-shadow: 0 10px 24px rgba(17, 24, 39, 0.09);
	transform: translateY(-1px);
}

.cons-lesson-nav-btn:active {
	transform: scale(0.98);
}

.cons-lesson-nav-btn.next {
	justify-content: flex-end;
	text-align: right;
}

.cons-lesson-nav-icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 12px;
	background: #eef4fb;
	color: #336699;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 800;
}

.cons-lesson-nav-content {
	flex: 1;
	min-width: 0;
}

.cons-lesson-nav-label {
	display: block;
	color: #94a3b8;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cons-lesson-nav-title {
	display: block;
	margin-top: 2px;
	color: #1f2937;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 480px) {
	.cons-lesson-navigation {
		gap: 8px;
	}

	.cons-lesson-nav-btn {
		min-height: 50px;
		padding: 9px;
		border-radius: 14px;
		gap: 7px;
	}

	.cons-lesson-nav-icon {
		width: 32px;
		height: 32px;
		min-width: 32px;
		border-radius: 10px;
		font-size: 15px;
	}

	.cons-lesson-nav-label {
		font-size: 9px;
	}

	.cons-lesson-nav-title {
		font-size: 11px;
	}
}
/* Тест сұрақтары */
.ent-tests {
	padding: 18px;
	margin-top: 12px;
	margin-bottom: 12px;
	border: 1px solid #cddff0;
	border-radius: 19px;
	background: linear-gradient(135deg, #edf5fc, #ffffff);
}

.ent-tests-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: #285b8c;
	font-size: 17px;
	font-weight: 900;
}

.ent-tests-title::before {
	content: "?";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	border-radius: 9px;
	background: #336699;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
}

.ent-tests .ent-list {
	margin: 0;
	padding: 0;
}

.ent-tests ol.ent-list > li {
	color: #30465c;
}

.ent-tests ol.ent-list > li::before {
	background: #e5f0fa;
	color: #336699;
}

.ent-test-answer-inline {
	color: #16865c;
	font-weight: 900;
}

@media (max-width: 480px) {
	.ent-tests {
		padding: 15px;
		border-radius: 17px;
	}

	.ent-tests-title {
		font-size: 16px;
	}
}

@media (max-width: 360px) {
	.ent-tests {
		padding: 14px;
	}
}
/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {
    .ent-hero {
        padding: 17px 14px;
    }

    .ent-hero-title {
        font-size: 18px;
    }

    .ent-section,
    .ent-remember,
    .ent-confuse,
    .ent-summary {
        padding: 14px;
    }

    .ent-timeline-item {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .ent-timeline-date {
        display: block;
    }
}


/* =========================
   Math formulas
   ========================= */

/* Дроби */
.frac {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 1.2;
}

.frac .top {
    display: block;
    padding: 0 4px;
    border-bottom: 1px solid #000;
}

.frac .bottom {
    display: block;
    padding: 0 4px;
}

/* Системы уравнений */
.eq-system {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    font-family: "Cambria", "Times New Roman", serif;
    color: #3f4756;
}

.eq-brace {
    display: inline-block;
    margin-top: -2px;
    font-size: 72px;
    line-height: 0.72;
    color: #2f3a4d;
    transform: scaleY(1.45);
    transform-origin: center;
}

.eq-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: 0.2px;
}

.eq-lines > div {
    white-space: nowrap;
}

.eq-lines sup,
.eq-lines sub {
    font-size: 0.6em;
    line-height: 0;
}

/* =========================================================
   BilimWorld ENT Conspect — Code Blocks
   Информатика конспектілеріндегі кодтар үшін
   ========================================================= */

/* Көпжолды код блогы */
.ent-conspect pre {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    padding: 18px 20px;
    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;

    background: #17212b;
    border: 1px solid rgba(51, 102, 153, 0.3);
    border-radius: 14px;

    color: #eef6ff;
    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        Monaco,
        monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;

    text-align: left;
    white-space: pre;
    tab-size: 4;
    -moz-tab-size: 4;

    direction: ltr;
    unicode-bidi: plaintext;

    box-shadow:
        0 8px 24px rgba(18, 38, 58, 0.1),
        inset 4px 0 0 #336699;

    -webkit-overflow-scrolling: touch;
}

/* pre ішіндегі code */
.ent-conspect pre code {
    display: block;
    width: max-content;
    min-width: 100%;
    padding: 0;
    margin: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;

    white-space: inherit;
    word-break: normal;
    overflow-wrap: normal;
}

/* Мәтін арасындағы қысқа код */
.ent-conspect p code,
.ent-conspect li code,
.ent-conspect td code,
.ent-conspect th code,
.ent-conspect .ent-highlight code,
.ent-conspect .ent-important code,
.ent-conspect .ent-fact code {
    display: inline;
    padding: 2px 7px;

    background: rgba(51, 102, 153, 0.09);
    border: 1px solid rgba(51, 102, 153, 0.16);
    border-radius: 6px;

    color: #254f78;
    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        Monaco,
        monospace;
    font-size: 0.92em;
    font-weight: 600;
    line-height: inherit;

    direction: ltr;
    unicode-bidi: isolate;

    white-space: normal;
    overflow-wrap: anywhere;
}

/* Код блогының scrollbar дизайны */
.ent-conspect pre::-webkit-scrollbar {
    height: 8px;
}

.ent-conspect pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.ent-conspect pre::-webkit-scrollbar-thumb {
    background: rgba(160, 198, 235, 0.42);
    border-radius: 10px;
}

.ent-conspect pre::-webkit-scrollbar-thumb:hover {
    background: rgba(160, 198, 235, 0.65);
}

/* Кодтан кейінгі және алдындағы аралықтар */
.ent-conspect .ent-section > pre:first-child {
    margin-top: 0;
}

.ent-conspect .ent-section > pre:last-child {
    margin-bottom: 0;
}

/* Ұзын код жолдары мобильді экранда көлденең жылжиды */
@media (max-width: 600px) {
    .ent-conspect pre {
        margin: 14px 0;
        padding: 16px;
        border-radius: 12px;

        font-size: 13px;
        line-height: 1.65;
    }

    .ent-conspect p code,
    .ent-conspect li code,
    .ent-conspect td code,
    .ent-conspect th code,
    .ent-conspect .ent-highlight code,
    .ent-conspect .ent-important code,
    .ent-conspect .ent-fact code {
        padding: 2px 5px;
        font-size: 0.88em;
    }
}

@media (max-width: 360px) {
    .ent-conspect pre {
        padding: 14px;
        font-size: 12.5px;
        line-height: 1.6;
    }
}

/* BilimWorld: context text opens from a button inside the question card */
.bw-context-modal-source[hidden] {
    display: none !important;
}

.q-cnt .bw-question-tools,
.mistakes-q-cnt .bw-question-tools {
    width: 100%;
    min-width: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-top: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    gap: 7px;
}

.q-cnt .bw-question-tools .bw-question-more,
.mistakes-q-cnt .bw-question-tools .bw-question-more {
    width: auto;
    min-width: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    margin-top: 0;
}

.q-cnt .bw-context-read,
.mistakes-q-cnt .bw-context-read {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 9px 7px 11px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #DBEAFE;
    border-radius: 11px;
    background: #EFF6FF;
    color: #1D4ED8;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.q-cnt .bw-question-tools.has-context .bw-context-read,
.mistakes-q-cnt .bw-question-tools.has-context .bw-context-read {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
}

.q-cnt .bw-context-read > span,
.mistakes-q-cnt .bw-context-read > span {
    min-width: 0;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.q-cnt .bw-context-read > span i,
.mistakes-q-cnt .bw-context-read > span i {
    font-size: 12px;
}

.q-cnt .bw-context-read > small,
.mistakes-q-cnt .bw-context-read > small {
    min-width: 34px;
    padding: 5px 7px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #2563EB;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 3px 9px rgba(37, 99, 235, 0.10);
}

.q-cnt .bw-context-read:active,
.mistakes-q-cnt .bw-context-read:active {
    transform: scale(0.985);
}

@media (hover: hover) {
    .q-cnt .bw-context-read:hover,
    .mistakes-q-cnt .bw-context-read:hover {
        border-color: #BFDBFE;
        background: #DBEAFE;
    }
}

.bw-question-modal.is-context-modal .bw-question-modal-head {
    border-bottom-color: #DBEAFE;
}

.bw-question-modal.is-context-modal .bw-question-modal-head div > span {
    color: #2563EB;
}

.bw-context-modal-head-actions {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
}

.bw-context-modal-count {
    min-width: 42px;
    padding: 7px 9px;
    border-radius: 999px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-align: center;
}

.bw-question-modal.is-context-modal .bw-question-modal-content {
    padding-top: 14px;
    padding-bottom: 14px;
}

.bw-context-modal-image {
    width: 100%;
    margin: 0 0 14px;
    padding: 9px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #E4E7EC;
    border-radius: 16px;
    background: #F8FAFC;
}

.bw-context-modal-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 42vh;
    border-radius: 11px;
    object-fit: contain;
}

.bw-context-modal-copy {
    color: #1F2937;
    font-size: 15px;
    line-height: 1.68;
    font-weight: 600;
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
}

.bw-context-modal-copy p {
    margin: 0 0 11px;
}

.bw-context-modal-copy p:last-child {
    margin-bottom: 0;
}

.bw-context-modal-copy table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
    overflow-x: auto;
}

.bw-context-modal-copy img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 380px) {
    .q-cnt .bw-context-read,
    .mistakes-q-cnt .bw-context-read,
    .q-cnt .bw-question-tools .bw-question-more,
    .mistakes-q-cnt .bw-question-tools .bw-question-more {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 10.5px;
    }

    .q-cnt .bw-context-read > span,
    .mistakes-q-cnt .bw-context-read > span {
        gap: 5px;
    }

    .q-cnt .bw-context-read > small,
    .mistakes-q-cnt .bw-context-read > small {
        min-width: 31px;
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* =========================================================
   КОНСПЕКТІНІ «ОҚЫДЫМ» ДЕП БЕЛГІЛЕУ
   ========================================================= */
.cons-read-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dbe5ef;
    border-radius: 18px;
    background: linear-gradient(135deg, #f5f9fd, #ffffff);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.cons-read-card.is-read {
    border-color: #b9e4c8;
    background: linear-gradient(135deg, #effbf3, #ffffff);
    box-shadow: 0 8px 22px rgba(34, 197, 94, 0.08);
}

.cons-read-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f1f8;
    color: #336699;
    font-size: 18px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.cons-read-card.is-read .cons-read-card-icon {
    background: #dcf7e5;
    color: #1f9d55;
    transform: scale(1.03);
}

.cons-read-card-copy {
    min-width: 0;
}

.cons-read-card-copy strong,
.cons-read-card-copy span {
    display: block;
}

.cons-read-card-copy strong {
    color: #172b3f;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.3;
}

.cons-read-card-copy span {
    margin-top: 3px;
    color: #738195;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.cons-read-toggle {
    min-width: 104px;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    border-radius: 13px;
    background: #336699;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 15px rgba(51, 102, 153, 0.2);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.cons-read-toggle:hover:not(.is-busy) {
    background: #2b5a88;
    box-shadow: 0 8px 18px rgba(51, 102, 153, 0.25);
}

.cons-read-toggle:active:not(.is-busy) {
    transform: scale(.97);
}

.cons-read-toggle.is-read {
    background: #22a75a;
    box-shadow: 0 6px 15px rgba(34, 167, 90, 0.2);
}

.cons-read-toggle.is-read:hover:not(.is-busy) {
    background: #1d914e;
}

.cons-read-toggle.is-read i {
    animation: bwConsReadCheck .26s ease;
}

.cons-read-toggle.is-busy {
    pointer-events: none;
    opacity: .65;
}

@keyframes bwConsReadCheck {
    0% { transform: scale(.7); }
    70% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Конспектілер тізіміндегі прогресс */
.cons-progress-card {
    margin-bottom: 12px;
    padding: 13px 14px;
    border: 1px solid #dce7f1;
    border-radius: 17px;
    background: linear-gradient(135deg, #eef5fb, #ffffff);
    box-shadow: 0 7px 18px rgba(17, 24, 39, 0.05);
}

.cons-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cons-progress-head span,
.cons-progress-head strong {
    display: block;
}

.cons-progress-head span {
    color: #7a8999;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cons-progress-head strong {
    margin-top: 2px;
    color: #1f3348;
    font-size: 14px;
    font-weight: 900;
}

.cons-progress-head>b {
    min-width: 46px;
    height: 32px;
    padding: 0 9px;
    border-radius: 11px;
    background: #336699;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}

.cons-progress-track {
    height: 7px;
    margin-top: 10px;
    border-radius: 999px;
    background: #dfe8f1;
    overflow: hidden;
}

.cons-progress-track>span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #336699, #22a75a);
    transition: width .35s ease;
}

.lessons-list>ul>li.is-read {
    border-color: #cde8d6;
    background: linear-gradient(135deg, #f7fdf9, #ffffff);
}

.lesson-status {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #336699;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.lesson-status.is-read {
    background: #dcf7e5;
    color: #1f9d55;
}

.lessons-list>ul>li:hover .lesson-status {
    transform: scale(1.06);
}

@media (max-width: 480px) {
    .cons-read-card {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 12px;
        border-radius: 16px;
    }

    .cons-read-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 16px;
    }

    .cons-read-card-copy strong {
        font-size: 13px;
    }

    .cons-read-card-copy span {
        font-size: 10px;
    }

    .cons-read-toggle {
        min-width: 92px;
        min-height: 40px;
        padding: 0 12px;
        font-size: 12px;
    }

    .lesson-status {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 11px;
    }
}

@media (max-width: 380px) {
    .cons-read-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .cons-read-toggle {
        grid-column: 1 / -1;
        width: 100%;
    }
}
/* =========================================================
 * BilimWorld avatar editor
 * ========================================================= */
.bw-edit-profile-avatar.bw-avatar-trigger {
    padding: 0;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.bw-avatar-trigger > img,
.bw-avatar-initial {
    width: 100%;
    height: 100%;
    border-radius: 17px;
}

.bw-avatar-trigger > img {
    display: block;
    object-fit: cover;
}

.bw-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #285f91;
}

.bw-avatar-trigger > img[hidden],
.bw-avatar-initial[hidden] {
    display: none !important;
}

.bw-avatar-camera,
.bw-avatar-loading {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
}

.bw-avatar-camera {
    right: -5px;
    bottom: -5px;
    width: 25px;
    height: 25px;
    border: 2px solid #fff;
    border-radius: 9px;
    background: #1f6feb;
    box-shadow: 0 5px 12px rgba(20, 52, 82, .24);
    font-size: 10px;
}

.bw-avatar-loading {
    display: none;
    inset: 0;
    border-radius: 17px;
    background: rgba(17, 24, 39, .58);
    font-size: 20px;
}

.bw-avatar-trigger.is-loading {
    pointer-events: none;
}

.bw-avatar-trigger.is-loading .bw-avatar-loading {
    display: flex;
}

.bw-avatar-trigger.is-loading .bw-avatar-camera {
    display: none;
}

.bw-avatar-trigger.is-error {
    animation: bwAvatarError .38s ease;
    box-shadow: 0 0 0 3px #ef4444, 0 8px 18px rgba(17, 45, 70, .18);
}

@keyframes bwAvatarError {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(4px);
    }
}

.bw-avatar-crop-modal[hidden] {
    display: none !important;
}

.bw-avatar-crop-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bw-avatar-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 12, 20, .72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.bw-avatar-crop-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0 auto;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    background: #111;
    color: #fff;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .32);
}

.bw-avatar-crop-header {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 76px;
    min-height: 58px;
    padding: 0 8px;
    align-items: center;
    background: #fff;
    color: #111827;
    text-align: center;
}

.bw-avatar-crop-header strong {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-avatar-crop-icon-button,
.bw-avatar-crop-save {
    min-height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bw-avatar-crop-icon-button {
    justify-self: start;
    width: 44px;
    border-radius: 13px;
    font-size: 19px;
}

.bw-avatar-crop-save {
    justify-self: end;
    color: #1f6feb;
    font-size: 14px;
    font-weight: 900;
}

.bw-avatar-crop-icon-button:active,
.bw-avatar-crop-save:active {
    transform: scale(.96);
}

.bw-avatar-crop-save:disabled {
    opacity: .5;
    cursor: default;
    transform: none;
}

.bw-avatar-crop-stage {
    position: relative;
    flex: 0 0 auto;
    width: min(100vw, 520px);
    width: min(100vw, 520px, calc(100dvh - 126px));
    height: min(100vw, 520px);
    height: min(100vw, 520px, calc(100dvh - 126px));
    min-width: 180px;
    min-height: 180px;
    margin: 0 auto;
    overflow: hidden;
    background: #191919;
    cursor: grab;
    touch-action: none;
}

.bw-avatar-crop-stage:active {
    cursor: grabbing;
}

.bw-avatar-crop-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.bw-avatar-crop-frame {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .82);
    pointer-events: none;
}

.bw-avatar-crop-frame::before,
.bw-avatar-crop-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.bw-avatar-crop-frame::before {
    top: 33.333%;
    bottom: 33.333%;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.bw-avatar-crop-frame::after {
    left: 33.333%;
    right: 33.333%;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, .25);
    border-right: 1px solid rgba(255, 255, 255, .25);
}

.bw-avatar-crop-controls {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 28px;
    gap: 12px;
    flex: 0 0 auto;
    padding: 14px 24px 4px;
    align-items: center;
}

.bw-avatar-crop-controls i:first-child {
    font-size: 13px;
}

.bw-avatar-crop-controls i:last-child {
    font-size: 21px;
}

.bw-avatar-crop-controls input[type="range"] {
    width: 100%;
    accent-color: #fff;
}

body.bw-avatar-crop-open {
    overflow: hidden;
    overscroll-behavior: none;
}

@media (max-height: 520px) {
    .bw-avatar-crop-stage {
        width: min(100vw, calc(100vh - 112px));
        height: min(100vw, calc(100vh - 112px));
    }

    .bw-avatar-crop-header {
        min-height: 52px;
    }

    .bw-avatar-crop-controls {
        padding-top: 8px;
    }
}

@media (max-width: 480px) {
    .bw-avatar-trigger > img,
    .bw-avatar-initial,
    .bw-avatar-loading {
        border-radius: 15px;
    }

    .bw-avatar-camera {
        right: -4px;
        bottom: -4px;
        width: 24px;
        height: 24px;
        border-radius: 8px;
    }

    .bw-avatar-crop-dialog {
        border-radius: 20px 20px 0 0;
    }
}


/* =========================================================
 * Study group avatars
 * ========================================================= */
.bw-group-avatar-field {
    position: relative;
    padding: 12px;
    border: 1px solid #e3e8ef;
    border-radius: 18px;
    background: #fff;
}

.bw-group-avatar-picker {
    display: flex;
    width: 100%;
    padding: 0;
    align-items: center;
    gap: 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.bw-group-avatar-preview {
    position: relative;
    display: flex;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 21px;
    background: linear-gradient(135deg, #e8f1fa, #d8e8f6);
    color: #336699;
    box-shadow: inset 0 0 0 1px rgba(51, 102, 153, .08);
    font-size: 25px;
}

.bw-group-avatar-preview > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
}

.bw-group-avatar-preview > i[hidden],
.bw-group-avatar-preview > img[hidden] {
    display: none !important;
}

.bw-group-avatar-preview > em {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #336699;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    box-shadow: 0 4px 11px rgba(51, 102, 153, .28);
}

.bw-group-avatar-copy {
    min-width: 0;
    flex: 1;
}

.bw-group-avatar-copy b {
    display: block;
    color: #1f2937;
    font-size: 13px;
    font-weight: 900;
}

.bw-group-avatar-copy small {
    display: block;
    margin-top: 4px;
    color: #7a8695;
    font-size: 11px;
    line-height: 1.4;
}

.bw-group-avatar-arrow {
    flex: 0 0 auto;
    color: #a0a9b5;
    font-size: 12px;
}

.bw-group-avatar-remove {
    display: inline-flex;
    margin: 11px 0 0 80px;
    padding: 7px 10px;
    align-items: center;
    gap: 6px;
    border: 1px solid #dce5ee;
    border-radius: 10px;
    background: #f7f9fb;
    color: #52677d;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.bw-group-avatar-remove[hidden] {
    display: none !important;
}

.bw-group-avatar-picker.is-error .bw-group-avatar-preview {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .14);
    animation: bw-group-avatar-shake .34s ease;
}

@keyframes bw-group-avatar-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.bw-group-card-icon.has-avatar,
.bw-group-chat-avatar.has-avatar {
    overflow: hidden;
    background: #edf2f7;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

.bw-group-card-icon > img,
.bw-group-chat-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 480px) {
    .bw-group-avatar-preview {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
        border-radius: 19px;
    }

    .bw-group-avatar-remove {
        margin-left: 74px;
    }
}

/* Compact group avatar: click the existing subject icon */
.bw-group-create-page > .bw-group-form {
    margin-top: 0;
}

button.bw-group-create-icon.bw-group-avatar-icon-trigger {
    position: relative;
    padding: 0;
    border: 0;
    outline: 0;
    overflow: visible;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.bw-group-avatar-icon-trigger > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
}

.bw-group-avatar-icon-trigger > img[hidden],
.bw-group-avatar-icon-trigger > i[hidden] {
    display: none !important;
}

.bw-group-avatar-icon-trigger > em {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: flex;
    width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #336699;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    box-shadow: 0 4px 10px rgba(51, 102, 153, .28);
}

.bw-group-avatar-icon-trigger.is-error {
    animation: bw-group-avatar-shake .34s ease;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .16);
}

.bw-user-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}



/* =========================================================
   Group chat Premium image messages
   ========================================================= */
.bw-group-message-form .bw-group-image-pick {
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    background: #eef5fb;
    color: #336699;
    font-size: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bw-group-message-form .bw-group-image-pick.is-premium-locked {
    background: #eef5fb;
    color: #336699;
}

.bw-group-message-form .bw-group-image-pick:active {
    transform: scale(.96);
}

.bw-group-image-preview[hidden] {
    display: none !important;
}

.bw-group-image-preview {
    position: relative;
    width: fit-content;
    max-width: min(100%, 240px);
    max-height: 300px;
    margin: 0;
    overflow: hidden;
    border-radius: 13px;
    background: #eef2f6;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
}

.bw-group-image-preview > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}

.bw-group-message-form .bw-group-image-preview > button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 27px;
    height: 27px;
    min-width: 27px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .8);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.bw-group-message-bubble.has-image {
    position: relative;
    width: fit-content;
    max-width: min(92%, 340px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.bw-group-message.is-mine .bw-group-message-bubble.has-image {
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.bw-group-message-bubble.has-image > .bw-group-reply-quote {
    margin: 0 0 6px;
}

.bw-group-message-bubble.has-image > p {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 6px;
    padding: 8px 10px;
    border: 1px solid #e3e8ef;
    border-radius: 13px 13px 13px 5px;
    background: #fff;
    color: #182230;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
}

.bw-group-message.is-mine .bw-group-message-bubble.has-image > p {
    margin-left: auto;
    border-color: #336699;
    border-radius: 13px 13px 5px 13px;
    background: #336699;
    color: #fff;
}

.bw-group-message-bubble.has-image > .bw-group-media-grid {
    margin: 0;
}

.bw-group-message-bubble.has-image > p + .bw-group-media-grid {
    margin-top: 0;
}

.bw-group-message-bubble.has-image > time {
    position: absolute;
    right: 7px;
    bottom: 6px;
    z-index: 2;
    margin: 0;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .58);
    color: #fff !important;
    font-size: 8px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bw-icon-logout {
    color: #dc2626;
    background: #fee2e2;
}

.bw-icon-logout + .bw-profile-menu-content b {
    color: #dc2626;
}

/* =========================================================
   Subject test builder — compact card + bottom sheet
   ========================================================= */
body.bw-subject-sheet-open {
    overflow: hidden;
}

.themes-cnt .bw-subject-test-builder {
    padding: 15px;
    border-radius: 20px;
    background: #fff;
    border-color: #e4eaf1;
    box-shadow: 0 9px 25px rgba(31, 55, 78, .08);
}

.themes-cnt .bw-subject-test-builder.has-premium-types {
    border-color: #e4eaf1;
    background: #fff;
    box-shadow: 0 9px 25px rgba(31, 55, 78, .08);
}

.themes-cnt .bw-subject-test-head {
    align-items: center;
}

.themes-cnt .bw-subject-test-head-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    font-size: 18px;
    box-shadow: none;
}

.themes-cnt .bw-subject-test-head h3 {
    font-size: 16px;
}

.themes-cnt .bw-subject-test-head p {
    margin-top: 3px;
    font-size: 10px;
}

.themes-cnt .bw-subject-test-overview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    padding: 11px 12px;
    border: 1px solid #e6ecf2;
    border-radius: 15px;
    background: #f8fafc;
}

.themes-cnt .bw-subject-test-overview-count {
    flex: 0 0 auto;
    min-width: 54px;
    height: 50px;
    padding: 0 8px;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #eaf2fb;
    color: #336699;
}

.themes-cnt .bw-subject-test-overview-count strong {
    font-size: 20px;
    line-height: 1;
    font-weight: 950;
}

.themes-cnt .bw-subject-test-overview-count span {
    margin-top: 3px;
    font-size: 8px;
    font-weight: 800;
}

.themes-cnt .bw-subject-test-overview-copy {
    min-width: 0;
    flex: 1;
}

.themes-cnt .bw-subject-test-overview-copy strong,
.themes-cnt .bw-subject-test-overview-copy span {
    display: block;
}

.themes-cnt .bw-subject-test-overview-copy strong {
    color: #1f2937;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 900;
}

.themes-cnt .bw-subject-test-overview-copy span {
    margin-top: 3px;
    color: #7a8796;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 650;
}

.themes-cnt .bw-subject-test-types-open {
    width: 100%;
    min-height: 52px;
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: #243244;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.themes-cnt .bw-subject-test-types-open:active {
    transform: scale(.99);
    background: #f9fafb;
}

.themes-cnt .bw-subject-test-types-open-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #336699;
    background: #edf4fb;
    font-size: 13px;
}

.themes-cnt .bw-subject-test-types-open-copy {
    min-width: 0;
    flex: 1;
}

.themes-cnt .bw-subject-test-types-open-copy strong,
.themes-cnt .bw-subject-test-types-open-copy small {
    display: block;
}

.themes-cnt .bw-subject-test-types-open-copy strong {
    font-size: 12px;
    font-weight: 900;
}

.themes-cnt .bw-subject-test-types-open-copy small {
    margin-top: 2px;
    color: #8a95a3;
    font-size: 8.5px;
    font-weight: 650;
}

.themes-cnt .bw-subject-test-types-selected {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #d99b10;
    font-size: 9px;
    font-weight: 900;
}

.themes-cnt .bw-subject-test-types-open-arrow {
    color: #99a5b2;
    font-size: 10px;
}

.themes-cnt .bw-subject-test-mini-summary {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 7px;
    padding-right: 2px;
    color: #8b96a3;
    font-size: 8.5px;
    font-weight: 750;
}

.themes-cnt .bw-subject-test-mini-summary strong {
    color: #5b6877;
    font-weight: 900;
}

.themes-cnt .bw-subject-test-start {
    margin-top: 9px;
}

.themes-cnt .has-premium-types .bw-subject-test-start {
    background: linear-gradient(135deg, #336699, #447fb5);
    box-shadow: 0 9px 20px rgba(51, 102, 153, .22);
}

/* Bottom sheet */
.bw-subject-type-sheet {
    position: fixed;
    inset: 0;
    z-index: 10050;
    visibility: hidden;
    pointer-events: none;
}

.bw-subject-type-sheet.is-open {
    visibility: visible;
    pointer-events: auto;
}

.bw-subject-type-sheet-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, .42);
    opacity: 0;
    transition: opacity .22s ease;
}

.bw-subject-type-sheet.is-open .bw-subject-type-sheet-backdrop {
    opacity: 1;
}

.bw-subject-type-sheet-panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(100%, 600px);
    max-height: min(82vh, 620px);
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -18px 50px rgba(15, 23, 42, .18);
    transform: translate(-50%, 105%);
    transition: transform .25s cubic-bezier(.2, .75, .25, 1);
    overflow-y: auto;
}

.bw-subject-type-sheet.is-open .bw-subject-type-sheet-panel {
    transform: translate(-50%, 0);
}

.bw-subject-type-sheet-handle {
    width: 40px;
    height: 4px;
    margin: 0 auto 11px;
    border-radius: 999px;
    background: #d7dde5;
}

.bw-subject-type-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.bw-subject-type-sheet-head h4 {
    margin: 0;
    color: #172033;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 950;
}

.bw-subject-type-sheet-head p {
    margin: 4px 0 0;
    color: #7b8795;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 650;
}

.bw-subject-type-sheet-close {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #687586;
    background: #f1f4f7;
    font-size: 13px;
    cursor: pointer;
}

.bw-subject-type-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bw-subject-type-option {
    position: relative;
    width: 100%;
    min-height: 64px;
    padding: 10px 11px;
    border: 1px solid #e4e9ef;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.bw-subject-type-option:active {
    transform: scale(.99);
}

.bw-subject-type-option.is-selected {
    border-color: #dfbd52;
    background: #fffaf0;
}

.bw-subject-type-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.bw-subject-type-option-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #336699;
    background: #edf4fb;
    font-size: 15px;
}

.bw-subject-type-option.is-selected .bw-subject-type-option-icon {
    color: #9b6a00;
    background: #fff0bd;
}

.bw-subject-type-option-copy {
    min-width: 0;
    flex: 1;
}

.bw-subject-type-option-copy strong,
.bw-subject-type-option-copy small {
    display: block;
}

.bw-subject-type-option-copy strong {
    color: #202c3b;
    font-size: 13px;
    font-weight: 900;
}

.bw-subject-type-option-copy small {
    margin-top: 3px;
    color: #84909d;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 650;
}

.bw-subject-type-premium {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a87300;
    background: #fff1bf;
    font-size: 9px;
}

.bw-subject-type-check {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border: 2px solid #cbd5df;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: #fff;
    font-size: 9px;
    transition: .18s ease;
}

.bw-subject-test-premium-toggle:checked ~ .bw-subject-type-check {
    border-color: #d8a91f;
    color: #fff;
    background: #d8a91f;
}

.bw-subject-type-sheet-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 11px;
    border-radius: 14px;
    background: #f6f8fa;
}

.bw-subject-type-sheet-summary span,
.bw-subject-type-sheet-summary strong {
    display: block;
}

.bw-subject-type-sheet-summary span {
    color: #8b96a3;
    font-size: 8px;
    font-weight: 800;
}

.bw-subject-type-sheet-summary strong {
    margin-top: 2px;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
}

.bw-subject-type-sheet-summary em {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-radius: 9px;
    color: #336699;
    background: #e9f2fb;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}

.bw-subject-type-sheet-done {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: #336699;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 480px) {
    .themes-cnt .bw-subject-test-builder {
        padding: 13px;
        border-radius: 18px;
    }

    .themes-cnt .bw-subject-test-overview {
        padding: 10px;
    }

    .bw-subject-type-sheet-panel {
        border-radius: 22px 22px 0 0;
    }
}


/* Subject question type sheet — viewport/portal fixes */
.themes-cnt .bw-subject-test-types-selected[hidden] {
    display: none !important;
}

.themes-cnt .bw-subject-test-types-open-arrow {
    transition: transform .2s ease;
}

.themes-cnt .bw-subject-test-builder.is-type-sheet-open .bw-subject-test-types-open-arrow {
    transform: rotate(180deg);
}

body > .bw-subject-type-sheet {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 1000 !important;
}

@supports not (height: 100dvh) {
    body > .bw-subject-type-sheet {
        height: 100vh !important;
    }
}

body > .bw-subject-type-sheet .bw-subject-type-sheet-backdrop {
    position: fixed !important;
    inset: 0 !important;
}

body > .bw-subject-type-sheet .bw-subject-type-sheet-panel {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(100%, 600px) !important;
    max-height: min(82dvh, 620px) !important;
    z-index: 1 !important;
}

body > .bw-subject-type-sheet.is-open .bw-subject-type-sheet-panel {
    transform: translate(-50%, 0) !important;
}

/* Subject question type sheet — sticky Premium footer */
.bw-subject-type-sheet-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bw-subject-type-sheet-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 1px 2px;
}

.bw-subject-type-sheet-footer {
    flex: 0 0 auto;
    margin: 10px -2px -2px;
    padding: 10px 2px 2px;
    border-top: 1px solid #edf0f4;
    background: #fff;
}

.bw-subject-type-premium-note[hidden] {
    display: none !important;
}

.bw-subject-type-premium-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    padding: 9px 10px;
    border: 1px solid #f0d98d;
    border-radius: 14px;
    background: #fffaf0;
}

.bw-subject-type-premium-note-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9b6a00;
    background: #ffedb0;
    font-size: 13px;
}

.bw-subject-type-premium-note-copy {
    min-width: 0;
    flex: 1;
}

.bw-subject-type-premium-note-copy strong,
.bw-subject-type-premium-note-copy small {
    display: block;
}

.bw-subject-type-premium-note-copy strong {
    color: #4b3a08;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
}

.bw-subject-type-premium-note-copy small {
    margin-top: 2px;
    color: #8a732f;
    font-size: 8.5px;
    line-height: 1.3;
    font-weight: 650;
}

.bw-subject-type-premium-cta {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #a87300;
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.bw-subject-type-sheet-footer .bw-subject-type-sheet-done {
    margin-top: 0;
}

@media (max-height: 620px) {
    body > .bw-subject-type-sheet .bw-subject-type-sheet-panel {
        max-height: 92dvh !important;
    }

    .bw-subject-type-premium-note-copy small {
        display: none;
    }
}

/* =========================================================
 * BilimWorld — контент бойынша кері байланыс
 * ========================================================= */
.bw-feedback-card,
.bw-feedback-card * {
    box-sizing: border-box;
}

.bw-feedback-card {
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.bw-feedback-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.bw-feedback-card-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: #ea580c;
    font-size: 17px;
}

.bw-feedback-card-head > div {
    min-width: 0;
    flex: 1;
}
.bw-feedback-card-head span{
    display: flex;
}
.bw-feedback-card-head strong {
    display: block;
}

.bw-feedback-card-head strong {
    color: #111827;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
}

.bw-feedback-card-head > div > span {
    margin-top: 3px;
    color: #6b7280;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 600;
}

.bw-feedback-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.bw-feedback-quick button {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #f9fafb;
    color: #374151;
    font-family: inherit;
    font-size: 10.5px;
    line-height: 1.15;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.bw-feedback-quick button:hover {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.bw-feedback-quick button:active {
    transform: scale(0.97);
}

.q-cnt .bw-question-report-row,
.mistakes-q-cnt .bw-question-report-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 9px;
}

.q-cnt .bw-question-report,
.mistakes-q-cnt .bw-question-report {
    min-height: 32px;
    padding: 6px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8b95a5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

@media (hover: hover) {
    .q-cnt .bw-question-report:hover,
    .mistakes-q-cnt .bw-question-report:hover {
        color: #dc2626;
        background: #fff7f7;
    }
}

.q-cnt .bw-question-report:active,
.mistakes-q-cnt .bw-question-report:active {
    color: #dc2626;
    background: #fff7f7;
    transform: scale(0.97);
}

.bw-feedback-open {
    overflow: hidden;
}

.bw-feedback-sheet {
    position: fixed;
    inset: 0;
    z-index: 100500;
    visibility: hidden;
    pointer-events: none;
}

.bw-feedback-sheet.is-open {
    visibility: visible;
    pointer-events: auto;
}

.bw-feedback-sheet-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(15, 23, 42, 0.44);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.bw-feedback-sheet.is-open .bw-feedback-sheet-backdrop {
    opacity: 1;
}

.bw-feedback-sheet-panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(600px, 100%);
    max-height: min(86dvh, 720px);
    overflow-y: auto;
    padding: 9px 14px calc(16px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    background: #ffffff;
    box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.18);
    transform: translate(-50%, 105%);
    transition: transform 0.22s ease;
    overscroll-behavior: contain;
}

.bw-feedback-sheet.is-open .bw-feedback-sheet-panel {
    transform: translate(-50%, 0);
}

.bw-feedback-sheet-handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 11px;
    border-radius: 999px;
    background: #d1d5db;
}

.bw-feedback-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bw-feedback-sheet-head > div > span {
    display: block;
    color: #f97316;
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.bw-feedback-sheet-head h3 {
    margin-top: 4px;
    color: #111827;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
}

.bw-feedback-sheet-close {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f3f4f6;
    color: #374151;
    font-size: 15px;
    cursor: pointer;
}

.bw-feedback-sheet-context {
    margin-top: 11px;
    padding: 9px 10px;
    border-radius: 11px;
    background: #f8fafc;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 750;
}

.bw-feedback-sheet-context[hidden] {
    display: none !important;
}

.bw-feedback-sheet-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
}

.bw-feedback-type {
    min-width: 0;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 850;
    cursor: pointer;
}

.bw-feedback-type i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: transparent;
    font-size: 9px;
}

.bw-feedback-type.is-selected {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
}

.bw-feedback-type.is-selected i {
    background: #f97316;
    color: #ffffff;
}

.bw-feedback-message-field {
    display: block;
    margin-top: 13px;
}

.bw-feedback-message-field > span {
    display: block;
    color: #374151;
    font-size: 11px;
    font-weight: 850;
}

.bw-feedback-message-field > span small {
    color: #9ca3af;
    font-size: 9px;
    font-weight: 700;
}

.bw-feedback-message-field textarea {
    display: block;
    width: 100%;
    min-height: 104px;
    margin-top: 7px;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 13px;
    outline: 0;
    background: #ffffff;
    color: #111827;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    resize: vertical;
    user-select: text;
    -webkit-user-select: text;
}

.bw-feedback-message-field textarea:focus {
    border-color: #fdba74;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.10);
}

.bw-feedback-message-field > em {
    display: block;
    margin-top: 4px;
    color: #9ca3af;
    font-size: 9px;
    line-height: 1;
    font-style: normal;
    text-align: right;
}

.bw-feedback-submit {
    width: 100%;
    min-height: 46px;
    margin-top: 13px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: #111827;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.bw-feedback-submit:disabled {
    opacity: 0.62;
    cursor: default;
}

.bw-feedback-submit.is-loading i {
    animation: bwFeedbackPulse 0.8s ease-in-out infinite alternate;
}

@keyframes bwFeedbackPulse {
    from { transform: translateX(-2px); opacity: 0.55; }
    to { transform: translateX(2px); opacity: 1; }
}

@media (max-width: 420px) {
    .bw-feedback-sheet-types {
        grid-template-columns: 1fr;
    }

    .bw-feedback-quick button {
        flex: 1 1 calc(50% - 4px);
    }

    .q-cnt .bw-question-report,
    .mistakes-q-cnt .bw-question-report {
        min-height: 30px;
        padding: 5px 7px;
        font-size: 10px;
    }
}

.ent-list > li {
    position: relative;
}

.ent-test-question-copy {
    display: inline;
}

.ent-test-feedback {
    margin-left: 7px;
    padding: 4px 7px;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    background: #fff7f7;
    color: #dc2626;
    font-family: inherit;
    font-size: 9px;
    line-height: 1;
    font-weight: 850;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
}

.ent-test-feedback i {
    margin-right: 3px;
}

.ent-test-feedback:active {
    transform: scale(0.97);
}


/* =========================================================
   КОНСПЕКТ — СУРЕТТЕР / СХЕМАЛАР
   ========================================================= */

.ent-conspect .ent-visual {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    padding: 7px;

    border: 1px solid var(--ent-border);
    border-radius: 18px;
    background: #f8fafc;

    overflow: hidden;
    box-sizing: border-box;

    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
}

.ent-conspect .ent-visual > img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
    border-radius: 12px;
    background: #fff;
}

/* Конспекттің өзі көлденең шықпасын */
.cons-page-text:has(.ent-conspect) {
    overflow-x: hidden;
}

.ent-conspect {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 480px) {
    .ent-conspect .ent-visual {
        margin: 12px 0;
        padding: 5px;
        border-radius: 14px;
    }

    .ent-conspect .ent-visual > img {
        border-radius: 10px;
    }
}

/* =========================================================
   COMMUNITY QUIZ — OWNER STATISTICS PAGE
   ========================================================= */
.bw-cq-icon-btn.is-statistics {
    background: #eef6ff;
    color: #2563eb;
}

.community-quiz-statistics-cnt {
    padding-bottom: 30px;
}

.bw-cqs-hero {
    margin: 8px 0 14px;
    padding: 18px;
    border: 1px solid #dfe8f2;
    border-radius: 20px;
    background: linear-gradient(135deg, #f4f8fc 0%, #ffffff 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}

.bw-cqs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: #336699;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bw-cqs-hero h3 {
    margin: 0;
    color: #152235;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 900;
    word-break: break-word;
}

.bw-cqs-hero p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 600;
}

.bw-cqs-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 16px;
}

.bw-cqs-summary-card {
    min-width: 0;
    padding: 14px 13px;
    border: 1px solid #e4e9ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .045);
}

.bw-cqs-summary-card span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #718096;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 800;
}

.bw-cqs-summary-card span i {
    color: #5e84aa;
}

.bw-cqs-summary-card b {
    display: block;
    margin-top: 6px;
    color: #172033;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
}

.bw-cqs-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 3px 2px 10px;
}

.bw-cqs-section-head h4 {
    margin: 0;
    color: #172033;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 900;
}

.bw-cqs-section-head span {
    flex: 0 0 auto;
    color: #8392a5;
    font-size: 10px;
    font-weight: 800;
}

.bw-cqs-attempts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bw-cqs-attempt {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid #e4e9ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.bw-cqs-user-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #edf3f8;
    color: #42698e;
    font-size: 15px;
}

.bw-cqs-user {
    min-width: 0;
}

.bw-cqs-user strong {
    display: block;
    overflow: hidden;
    color: #172033;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-cqs-user small {
    display: block;
    margin-top: 3px;
    color: #8190a3;
    font-size: 9.5px;
    line-height: 1.35;
    font-weight: 700;
}

.bw-cqs-result {
    min-width: 82px;
    text-align: right;
}

.bw-cqs-result b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef6ff;
    color: #2563eb;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
}

.bw-cqs-result b.is-high {
    background: #ecfdf3;
    color: #15803d;
}

.bw-cqs-result b.is-low {
    background: #fff1f2;
    color: #be123c;
}

.bw-cqs-result small {
    display: block;
    margin-top: 4px;
    color: #7b8797;
    font-size: 9.5px;
    line-height: 1.3;
    font-weight: 800;
}

.bw-cqs-empty,
.bw-cqs-access {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 18px;
    border: 1px dashed #d7dfe9;
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.bw-cqs-empty i,
.bw-cqs-access i {
    color: #6b91b6;
    font-size: 30px;
}

.bw-cqs-empty b,
.bw-cqs-access b {
    color: #172033;
    font-size: 15px;
    font-weight: 900;
}

.bw-cqs-empty p,
.bw-cqs-access p {
    max-width: 330px;
    margin: 0;
    color: #7c8a9c;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

@media (max-width: 430px) {
    .bw-cqs-hero {
        padding: 15px;
        border-radius: 18px;
    }

    .bw-cqs-hero h3 {
        font-size: 18px;
    }

    .bw-cqs-summary-card {
        padding: 12px;
    }

    .bw-cqs-summary-card b {
        font-size: 20px;
    }

    .bw-cqs-attempt {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px;
    }

    .bw-cqs-user-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .bw-cqs-result {
        min-width: 72px;
    }
}
/* =========================================================
 * Group chat: centered day labels + member activity
 * ========================================================= */
.bw-group-day-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    margin: 14px 0 12px;
    text-align: center;
    grid-column: 1 / -1;
    pointer-events: none;
}
.bw-group-day-separator > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: #f2f5f8;
    color: #7b8794;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
}
.bw-group-member-activity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: 4px;
}
.bw-group-member-activity > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    color: #8a96a5;
    font-size: 9px;
    line-height: 1.25;
    font-weight: 650;
}
.bw-group-member-activity > span i {
    width: 9px;
    flex: 0 0 9px;
    color: #a9b4c0;
    font-size: 7px;
    text-align: center;
}
.bw-group-member-last-online.is-online {
    color: #23925a;
    font-weight: 800;
}
.bw-group-member-last-online.is-online i {
    color: #35c878;
    filter: drop-shadow(0 0 4px rgba(53, 200, 120, .25));
}
.bw-group-member-joined i {
    font-size: 8px !important;
}
.bw-group-member-badges {
    margin-top: 6px;
}
.bw-group-member-item {
    min-height: 68px;
}

/* FIX: group chat day separator — no horizontal line, label always centered */
.bw-group-day-separator {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    grid-column: 1 / -1 !important;
}
.bw-group-day-separator::before,
.bw-group-day-separator::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border: 0 !important;
}
.bw-group-day-separator > span {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* FIX: chat message wrapper must never draw a horizontal line */
.bw-group-messages > article.bw-group-message,
.bw-group-messages > article.bw-group-message.is-mine {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bw-group-messages > article.bw-group-message::before,
.bw-group-messages > article.bw-group-message::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* =========================================================
   QA / Q&A — COMPACT SOCIAL UI
   One clean source of truth for qa.php + qa-ans.php
   ========================================================= */

/* ---------- Shared feed / detail cards ---------- */
.qa-cnt .qa-blocks,
.qa-ans-cnt .qa-blocks {
    min-width: 0;
}

.qa-blocks > ul {
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid #e6ebf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .045);
    line-height: 1.4;
}

.qa-feed-post[data-qa-inline-card] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.qa-feed-post[data-qa-inline-card] .qa-post-author,
.qa-feed-post[data-qa-inline-card] .qa-ava,
.qa-feed-post[data-qa-inline-card] .author_login {
    cursor: pointer;
}

.qa-blocks > ul > li:first-child {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    padding: 10px 12px 8px;
}

.qa-blocks > ul > li:first-child > .qa-ava {
    width: 36px;
    height: 36px;
    min-width: 36px;
    overflow: hidden;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #336699;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.qa-blocks > ul > li:first-child > span:nth-child(2),
.qa-post-body {
    flex: 1;
    min-width: 0;
    margin-left: 9px;
    color: #7b8794;
    font-size: 13px;
    line-height: 1.25;
}

.qa-post-main {
    align-items: flex-start !important;
}

.qa-blocks .author_login,
.qa-blocks > ul > li:first-child > span:nth-child(2) > b {
    color: #182230;
    font-size: 14px;
    font-weight: 800;
}

.qa-post-date {
    display: inline;
    margin: 0;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
}

.qa-post-text {
    display: block;
    margin-top: 4px;
    color: #222b36;
    font-size: 14.5px;
    line-height: 1.48;
    font-weight: 400;
    word-break: break-word;
    overflow-wrap: anywhere;
}


/* ---------- Q&A long text collapse ---------- */
.qa-post-text.bw-qa-text-collapsible,
.qa-ans-cnt .qa-answers p.bw-qa-text-collapsible {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

.qa-post-text.bw-qa-text-collapsible.is-expanded,
.qa-ans-cnt .qa-answers p.bw-qa-text-collapsible.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.bw-qa-text-toggle {
    display: inline-flex;
    align-items: center;
    margin: 3px 0 0;
    padding: 2px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #336699;
    font: inherit;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.25;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bw-qa-text-toggle:hover {
    text-decoration: underline;
}

.bw-qa-text-toggle:active {
    opacity: .68;
}

@media (max-width: 480px) {
    .qa-post-text.bw-qa-text-collapsible,
    .qa-ans-cnt .qa-answers p.bw-qa-text-collapsible {
        -webkit-line-clamp: 5;
    }
}

/* ---------- Official marker ---------- */
.qa-official-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 5px;
    padding: 3px 6px;
    border-radius: 7px;
    background: #336699;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.1;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: none;
}

.qa-official-badge i {
    width: auto;
    height: auto;
    background: transparent;
    color: inherit;
    font-size: 8px;
}

.qa-blocks > ul.qa-official-post {
    border-color: #bfd1e2;
}

/* ---------- Post images ---------- */
.bw-qa-post-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 360px);
    max-height: 480px;
    margin: 9px 0 1px;
    border-radius: 12px;
    object-fit: contain;
    background: #eef2f6;
}

.bw-qa-answer-image {
    width: auto;
    height: auto;
    max-width: min(100%, 300px);
    max-height: 400px;
    object-fit: contain;
}

.qa-ans-cnt .bw-qa-open-image {
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

.qa-ans-cnt .bw-qa-open-image:active {
    transform: scale(.985);
}

/* ---------- Compact action bar ---------- */
.qa-footer {
    min-height: 40px;
    padding: 5px 9px 7px;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.qa-footer-stats {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.qa-like-btn,
.qa-count,
.qa-delete-btn,
.qa-answer-reply-btn {
    min-height: 32px;
    margin: 0;
    padding: 5px 8px;
    border: 0;
    outline: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    color: #697586;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.qa-like-btn:hover:not(:disabled),
.qa-count:hover,
.qa-answer-reply-btn:hover,
.qa-delete-btn:hover:not(:disabled) {
    background: #f3f5f7;
}

.qa-like-btn:active:not(:disabled),
.qa-answer-reply-btn:active,
.qa-delete-btn:active:not(:disabled) {
    transform: scale(.96);
}

.qa-like-btn > i,
.qa-count > i,
.qa-answer-reply-btn > i,
.qa-delete-btn > i {
    font-size: 15px;
}

.qa-like-btn > i,
.qa-count > i,
.qa-answer-reply-btn > i {
    color: #62768a;
}

.qa-count > i,
.qa-answer-reply-btn,
.qa-answer-reply-btn > i,
.qa-reply-btn {
    color: #336699;
}

.qa-like-text,
.qa-count-text,
.qa-delete-text {
    font-size: 12.5px;
    font-weight: 650;
}

.qa-like-btn > b,
.qa-count > b {
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #7b8794;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1;
    text-align: center;
}

.qa-like-btn.is-liked,
.qa-like-btn.is-liked > i,
.qa-like-btn.is-liked > b {
    color: #336699;
}

.qa-like-btn.is-liked > i {
    animation: bwQaLikePop .22s ease;
}

.qa-like-btn.is-busy,
.qa-delete-btn.is-busy,
.qa-like-btn.is-own,
.qa-like-btn:disabled,
.qa-delete-btn:disabled {
    pointer-events: none;
    cursor: default;
    opacity: .5;
}

.qa-delete-btn,
.qa-delete-btn > i {
    color: #c2414c;
}

.qa-reply-btn {
    padding: 6px 6px;
    color: #336699;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.qa-answer-footer {
    justify-content: flex-start;
    gap: 1px;
}

@keyframes bwQaLikePop {
    0% { transform: scale(.82); }
    70% { transform: scale(1.13); }
    100% { transform: scale(1); }
}

/* ---------- Detail page ---------- */
.qa-ans-cnt h5 {
    margin: 14px 4px 7px;
    color: #667085;
    font-size: 14px;
    font-weight: 750;
}

.qa-ans-cnt .qa-detail-post {
    margin-bottom: 8px;
}

.qa-ans-cnt .qa-detail-footer {
    padding-bottom: 6px;
}

/* Answers should look like comments, not full cards */
.qa-ans-cnt .qa-answers {
    overflow: hidden;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    background: #fff;
}

.qa-ans-cnt .qa-answers > ul {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #eef1f4;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.qa-ans-cnt .qa-answers > ul:last-child {
    border-bottom: 0;
}

.qa-ans-cnt .qa-answers > ul > li:first-child {
    padding: 10px 11px 4px;
    align-items: flex-start !important;
}

.qa-ans-cnt .qa-answers > ul > li:first-child > .qa-ava {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 13px;
}

.qa-ans-cnt .qa-answers > ul > li:first-child > span:nth-child(2) {
    width: auto;
    flex: 1;
    min-width: 0;
    margin-left: 8px;
}

.qa-ans-cnt .qa-answers p {
    margin: 4px 0 0;
    color: #222b36;
    font-size: 14.5px;
    line-height: 1.5;
}

.qa-ans-cnt .qa-answers .qa-answer-footer {
    padding: 3px 9px 8px 54px;
}

/* ---------- Nested replies ---------- */
.qa-answers .qa-ans-blocks {
    margin-left: var(--qa-reply-indent, 0px);
    transition: margin-left .18s ease, border-color .18s ease;
}

.qa-answers .qa-ans-blocks.is-reply {
    position: relative;
    border-left: 2px solid #dbe3eb;
}

.qa-reply-context {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin-top: 3px;
    color: #7b8794;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
}

.qa-reply-context > i {
    color: #336699;
    font-size: 9px;
}

/* ---------- Reply target ---------- */
.bw-qa-reply-target[hidden] {
    display: none !important;
}

.bw-qa-reply-target {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
    padding: 6px 8px;
    border-radius: 9px;
    background: #eef5fb;
    color: #5b6f82;
    font-size: 11px;
    font-weight: 700;
}

.bw-qa-reply-target > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-qa-reply-target > span > i {
    margin-right: 4px;
    color: #336699;
}

.bw-qa-reply-target > span > b {
    color: #244e76;
}

.bw-qa-reply-target > button {
    width: 25px;
    height: 25px;
    min-width: 25px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.bw-qa-reply-target > button > i {
    font-size: 11px;
}

/* ---------- Inline thread inside feed ---------- */
.qa-count[data-qa-inline-toggle],
.qa-reply-btn[data-qa-inline-reply],
.bw-qa-notification[data-qa-inline-notification] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.qa-inline-thread {
    margin: -1px 0 11px 16px;
    padding-left: 10px;
    border-left: 2px solid #e5e9ee;
}

.qa-inline-content {
    min-width: 0;
}

.qa-inline-loading {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #7b8794;
    font-size: 12px;
}

.qa-inline-loading i {
    color: #336699;
    font-size: 13px;
}

.qa-inline-answers {
    margin: 0;
}

.qa-inline-thread .qa-blocks > ul {
    margin-bottom: 6px;
    border-radius: 12px;
    box-shadow: none;
}

.qa-inline-thread .qa-blocks > ul > li:first-child {
    padding-top: 8px;
}

.qa-inline-thread .qa-post-text,
.qa-inline-thread .qa-answers p {
    font-size: 13.5px;
    line-height: 1.45;
}

.qa-inline-thread .qa-answer-footer {
    padding-top: 1px;
    padding-bottom: 5px;
}

.qa-inline-thread .qa-add-ans.bw-qa-image-scope {
    position: relative;
    bottom: auto;
    margin: 6px 0 0;
    padding: 6px;
    border: 1px solid #e4e9ef;
    border-radius: 10px;
    background: #fff;
    z-index: 1;
}

.qa-inline-empty,
.qa-inline-error {
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid #edf0f3;
    border-radius: 10px;
    background: #fff;
    color: #8a929a;
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
}

.qa-inline-error {
    border-color: #fee2e2;
    background: #fff7f7;
    color: #dc2626;
}

.qa-feed-post.qa-thread-open {
    margin-bottom: 4px;
}

.qa-feed-post.qa-thread-open .qa-count,
.qa-feed-post.qa-thread-open .qa-count i,
.qa-feed-post.qa-thread-open .qa-count b {
    color: #285f91;
}

/* ---------- Notifications ---------- */
.bw-qa-notifications {
    margin: 6px 0 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.bw-qa-notifications-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    padding: 0 2px;
}

.bw-qa-notifications-head > div {
    min-width: 0;
}

.bw-qa-notifications-head span {
    display: none;
}

.bw-qa-notifications-head b {
    display: block;
    margin: 0;
    color: #344054;
    font-size: 13px;
    line-height: 1.25;
}

.bw-qa-notifications-head strong {
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #336699;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.bw-qa-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bw-qa-notification {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.bw-qa-notification:hover {
    border-color: #d6e0e9;
    background: #fbfcfd;
}

.bw-qa-notification:active {
    transform: scale(.99);
}

.bw-qa-notification-icon {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef5fb;
    color: #336699;
    font-size: 15px;
}

.bw-qa-notification-icon > span {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
}

.bw-qa-notification-copy {
    flex: 1;
    min-width: 0;
}

.bw-qa-notification-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px;
    color: #667085;
    font-size: 12px;
    line-height: 1.3;
}

.bw-qa-notification-title b {
    color: #182230;
    font-size: 13px;
}

.bw-qa-notification-copy p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-top: 2px;
    color: #475467;
    font-size: 12px;
    line-height: 1.35;
    word-break: break-word;
}

.bw-qa-notification-copy time {
    display: block;
    margin-top: 2px;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 600;
}

.bw-qa-notification-arrow {
    flex-shrink: 0;
    color: #a3afbc;
    font-size: 10px;
}

.bw-follow-notification-avatar {
    overflow: hidden;
    background: #336699;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.bw-follow-notification-avatar .bw-user-avatar-image {
    border-radius: 11px;
}

/* ---------- Share block on QA feed ---------- */
.qa-cnt .bw-share-box {
    gap: 10px;
    padding: 10px 11px;
    border-radius: 13px;
    box-shadow: none;
}

.qa-cnt .bw-share-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
    font-size: 19px;
}

.qa-cnt .bw-share-title {
    font-size: 13.5px;
    font-weight: 750;
}

.qa-cnt .bw-share-text {
    margin-top: 2px;
    font-size: 11.5px;
}

.qa-cnt .bw-share-main-btn {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12.5px;
}

/* ---------- Inline post composer ---------- */
.bw-qa-composer {
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid #e6ebf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .045);
}

.bw-qa-composer-top {
    display: flex;
    align-items: center;
    gap: 9px;
}

.bw-qa-composer-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    overflow: hidden;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #336699;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.bw-qa-composer-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bw-qa-composer-trigger {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #7b8794;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: text;
    transition: background .15s ease, border-color .15s ease;
}

.bw-qa-composer-trigger:hover {
    border-color: #d5dee8;
    background: #f4f7fa;
}

.bw-qa-composer-expanded[hidden] {
    display: none !important;
}

.bw-qa-composer-expanded {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #edf0f3;
}

.bw-qa-composer textarea {
    display: block;
    width: 100%;
    min-height: 92px;
    max-height: 240px;
    padding: 11px 12px;
    resize: vertical;
    outline: none;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
    color: #182230;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.48;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bw-qa-composer textarea:focus {
    border-color: #9ab5cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 153, .07);
}

.bw-qa-composer textarea::placeholder {
    color: #98a2b3;
    font-size: 13.5px;
    font-weight: 500;
}

.bw-qa-composer-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
}

.bw-qa-composer .bw-qa-image-tools {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.bw-qa-composer .bw-qa-image-pick {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    background: #f1f5f9;
    color: #336699;
    box-shadow: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 750;
    cursor: pointer;
}

.bw-qa-composer .bw-qa-image-pick > i {
    font-size: 15px;
}

.bw-qa-composer .bw-qa-image-pick > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-qa-composer .bw-qa-image-pick > small {
    margin-left: auto;
    min-height: 18px;
    padding: 0 5px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    background: #fff2bf;
    color: #8b6500;
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.bw-qa-composer .bw-qa-image-pick:active,
.bw-qa-composer .bw-qa-submit:active {
    transform: scale(.985);
}

.bw-qa-composer .bw-qa-image-pick.is-locked,
.bw-qa-composer .bw-qa-image-pick.is-premium-locked {
    background: #f4f6f8;
    color: #607386;
}

.bw-qa-image-preview[hidden] {
    display: none !important;
}

.bw-qa-image-preview {
    position: relative;
    width: min(100%, 220px);
    margin: 8px 0 0;
    overflow: hidden;
    border-radius: 10px;
    background: #eef2f6;
    box-shadow: none;
}

.bw-qa-image-preview > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
}

.bw-qa-composer .bw-qa-image-preview > button {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .78);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.bw-qa-composer .bw-qa-submit {
    width: auto;
    min-width: 108px;
    height: 40px;
    margin: 0;
    padding: 0 15px;
    border: 0;
    border-radius: 10px;
    background: #336699;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
}

.bw-qa-composer .bw-qa-submit:disabled {
    cursor: default;
    opacity: .62;
}

.bw-qa-composer .bw-group-chat-notice,
.qa-ans-cnt .bw-group-chat-notice {
    margin-top: 6px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 9.5px;
}

/* ---------- Sticky answer composer ---------- */
.qa-add-ans.bw-qa-image-scope {
    display: block;
    position: sticky;
    bottom: 0;
    margin: 9px -10px 0;
    padding: 8px 10px;
    border-top: 1px solid #e6ebf0;
    border-bottom: 0;
    background: rgba(255, 255, 255, .97);
    z-index: 12;
}

.bw-qa-answer-compose-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bw-qa-answer-compose-row > input[data-qa-answer-text] {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 13px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    outline: none;
    background: #f8fafc;
    color: #182230;
    font-family: inherit;
    font-size: 14px;
}

.bw-qa-answer-compose-row > input[data-qa-answer-text]:focus {
    border-color: #9ab5cc;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(51, 102, 153, .07);
}

.bw-qa-answer-image-pick,
.bw-qa-answer-send {
    width: 42px;
    min-width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bw-qa-answer-image-pick,
.bw-qa-answer-image-pick.is-locked,
.bw-qa-answer-image-pick.is-premium-locked {
    background: #eef5fb;
    color: #336699;
    font-size: 15px;
}

.bw-qa-answer-send {
    background: #336699;
    color: #fff;
    font-size: 15px;
}

.bw-qa-answer-image-pick:active,
.bw-qa-answer-send:active {
    transform: scale(.96);
}

.bw-qa-answer-send:disabled {
    cursor: default;
    opacity: .58;
}

.bw-qa-answer-preview[hidden] {
    display: none !important;
}

.bw-qa-answer-preview {
    position: relative;
    width: fit-content;
    max-width: min(100%, 180px);
    max-height: 220px;
    margin: 0 0 6px;
    overflow: hidden;
    border-radius: 9px;
    background: #eef2f6;
    box-shadow: none;
}

.bw-qa-answer-preview > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}

.bw-qa-answer-preview > button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .8);
    color: #fff;
    font-size: 10px;
    cursor: pointer;
}

/* ---------- Fullscreen image viewer ---------- */
body.bw-qa-image-viewer-open {
    overflow: hidden;
}

.bw-qa-image-viewer[hidden] {
    display: none !important;
}

.bw-qa-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.bw-qa-image-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 25, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bw-qa-image-viewer-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
    max-height: calc(100vh - 28px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bw-qa-image-viewer-dialog > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 28px);
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

.bw-qa-image-viewer-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .82);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.bw-qa-image-viewer-close:active {
    transform: scale(.95);
}

/* ---------- Mobile density ---------- */
@media (max-width: 480px) {
    .qa-blocks > ul {
        margin-bottom: 8px;
        border-radius: 13px;
    }

    .qa-blocks > ul > li:first-child {
        padding: 9px 10px 4px;
    }

    .qa-blocks > ul > li:first-child > .qa-ava {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .qa-post-text {
        margin-top: 3px;
        font-size: 14px;
        line-height: 1.44;
    }

    .qa-post-date {
        font-size: 10.5px;
    }

    .qa-footer {
        min-height: 36px;
        padding: 4px 7px 6px;
    }

    .qa-like-text,
    .qa-count-text,
    .qa-delete-text,
    .qa-answer-reply-btn > span {
        display: none;
    }

    .qa-like-btn,
    .qa-count,
    .qa-delete-btn,
    .qa-answer-reply-btn {
        min-height: 32px;
        padding: 5px 8px;
    }

    .qa-like-btn > i,
    .qa-count > i,
    .qa-delete-btn > i,
    .qa-answer-reply-btn > i {
        font-size: 16px;
    }

    .qa-cnt .bw-share-text {
        display: none;
    }

    .qa-cnt .bw-share-box {
        padding: 9px 10px;
    }

    .qa-inline-thread {
        margin-left: 9px;
        padding-left: 9px;
    }

    .qa-answers .qa-ans-blocks {
        margin-left: min(var(--qa-reply-indent, 12px), 22px);
    }

    .qa-ans-cnt .qa-answers .qa-answer-footer {
        padding-left: 48px;
    }

    .bw-qa-post-image {
        max-width: min(100%, 320px);
        max-height: 440px;
    }

    .bw-qa-answer-image {
        max-width: min(100%, 260px);
        max-height: 360px;
    }

    .bw-qa-composer {
        padding: 9px;
        border-radius: 13px;
    }

    .bw-qa-composer-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .bw-qa-composer-trigger {
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
    }

    .bw-qa-composer textarea {
        min-height: 84px;
    }

    .bw-qa-composer-actions {
        gap: 7px;
    }

    .bw-qa-composer .bw-qa-submit {
        min-width: 96px;
        padding: 0 12px;
    }

    .bw-qa-composer .bw-qa-image-pick > small {
        display: none;
    }
}


/* QA social row final alignment: name/badge/time + body */
.qa-post-main > .qa-post-body > .bw-qa-post-image {
    margin-top: 9px;
}

.qa-post-main + .qa-footer {
    padding-top: 3px;
}

/* =========================================================
   COMMUNITY MULTI PHOTO — up to 5 images in one image field
   ========================================================= */
.bw-media-preview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.bw-media-preview-item {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: #eef2f6;
}

.bw-media-preview-item > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bw-media-preview-item > button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .78) !important;
    color: #fff !important;
    font-size: 10px !important;
    cursor: pointer;
    z-index: 2;
}

.bw-media-preview-count {
    display: block;
    margin-top: 5px;
    color: #8a96a5;
    font-size: 10px;
    font-weight: 750;
    text-align: right;
}

.bw-qa-image-preview,
.bw-group-image-preview {
    width: min(100%, 360px) !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bw-group-image-preview {
    width: min(100%, 300px) !important;
}

.bw-media-grid {
    display: grid;
    gap: 2px;
    overflow: hidden;
    margin: 9px 0 1px;
    border-radius: 16px;
    background: #eef2f6;
    box-sizing: border-box;
    min-width: 0;
}

.bw-qa-media-grid {
    width: min(100%, 360px);
}

.bw-qa-answer-media-grid {
    width: min(100%, 300px);
}

/* Chat galleries: Telegram-like layout for 1–5 photos. */
.bw-group-media-grid,
.bw-direct-media-grid {
    width: min(82vw, 340px);
    max-width: 100%;
    margin: 0;
    border-radius: 16px;
}

.bw-media-grid > img,
.bw-media-grid .bw-qa-post-image,
.bw-media-grid .bw-qa-answer-image,
.bw-media-grid .bw-group-message-image,
.bw-media-grid .bw-direct-message-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    background: #eef2f6;
    box-shadow: none;
}

.bw-group-message-image,
.bw-direct-message-image {
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

.bw-group-message-image:active,
.bw-direct-message-image:active {
    transform: scale(.985);
}

/* One photo: natural proportions. */
.bw-media-grid.bw-media-count-1 {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: visible;
    background: transparent;
}

.bw-qa-media-grid.bw-media-count-1 > img {
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 360px) !important;
    max-height: 480px !important;
    border-radius: 12px !important;
    object-fit: contain !important;
}

.bw-qa-answer-media-grid.bw-media-count-1 > img {
    max-width: min(100%, 300px) !important;
    max-height: 400px !important;
}

.bw-group-media-grid.bw-media-count-1 > img,
.bw-direct-media-grid.bw-media-count-1 > img {
    width: auto !important;
    height: auto !important;
    max-width: min(82vw, 340px) !important;
    max-height: 440px !important;
    border-radius: 16px !important;
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

/* Two photos: equal halves. */
.bw-media-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    aspect-ratio: 1.45 / 1;
}

/* Three photos: one large left, two stacked right. */
.bw-media-count-3 {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 1.35 / 1;
}

.bw-media-count-3 > img:first-child {
    grid-row: 1 / 3;
}

/* Four photos: 2 × 2. */
.bw-media-count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 1.25 / 1;
}

/* Five photos: two on top, three below. */
.bw-media-count-5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 1.3 / 1;
}

.bw-media-count-5 > img:nth-child(1) {
    grid-column: 1 / 4;
}

.bw-media-count-5 > img:nth-child(2) {
    grid-column: 4 / 7;
}

.bw-media-count-5 > img:nth-child(3) {
    grid-column: 1 / 3;
}

.bw-media-count-5 > img:nth-child(4) {
    grid-column: 3 / 5;
}

.bw-media-count-5 > img:nth-child(5) {
    grid-column: 5 / 7;
}

@media (max-width: 480px) {
    .bw-media-preview-grid {
        gap: 4px;
    }

    .bw-media-preview-item > button {
        top: 3px;
        right: 3px;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }

    .bw-group-message-bubble.has-image,
    .bw-direct-message-bubble.has-image {
        max-width: min(92%, 340px);
    }

    .bw-group-media-grid,
    .bw-direct-media-grid {
        width: min(84vw, 340px);
    }

    .bw-group-media-grid.bw-media-count-1 > img,
    .bw-direct-media-grid.bw-media-count-1 > img {
        max-width: min(84vw, 340px) !important;
        max-height: 420px !important;
    }
}


/* =========================================================
   MEDIA PREVIEW / FLOW HELPERS
   ========================================================= */
.qa-post-body > .bw-media-grid,
.qa-answer-body > .bw-media-grid,
.qa-answer-copy > .bw-media-grid {
    clear: both;
}

.bw-qa-image-preview:not([hidden]),
.bw-qa-answer-preview:not([hidden]),
.bw-group-image-preview:not([hidden]) {
    display: block !important;
}

.bw-media-preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    max-width: 360px;
}

.bw-media-preview-item {
    min-height: 52px;
}

@media (max-width: 480px) {
    .bw-qa-media-grid {
        width: 100%;
    }

    .bw-qa-answer-media-grid {
        width: 100%;
    }

    .bw-media-preview-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}


/* =========================================================
   THREADS-LIKE QA PHOTO CAROUSEL + VIEWER NAVIGATION
   Groups keep the existing grid layout.
   ========================================================= */

/* Жалпы чат: 2–5 photos scroll horizontally like Threads. */
.bw-qa-media-grid:not(.bw-media-count-1) {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    gap: 7px !important;
    margin: 9px 0 1px !important;
    padding: 0 34px 2px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}

.bw-qa-media-grid:not(.bw-media-count-1)::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.bw-qa-media-grid:not(.bw-media-count-1) > img,
.bw-qa-media-grid:not(.bw-media-count-1) > .bw-qa-post-image,
.bw-qa-media-grid:not(.bw-media-count-1) > .bw-qa-answer-image {
    flex: 0 0 auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: calc(88% - 2px) !important;
    max-height: 430px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    object-fit: contain !important;
    background: #eef2f6 !important;
    box-shadow: none !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.bw-qa-answer-media-grid:not(.bw-media-count-1) > img {
    max-width: calc(88% - 2px) !important;
    max-height: 390px !important;
}

/* Viewer previous / next controls. */
.bw-qa-image-viewer-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    background: rgba(17, 24, 39, .78);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 7px 24px rgba(0, 0, 0, .24);
    -webkit-tap-highlight-color: transparent;
}

.bw-qa-image-viewer-nav[hidden] {
    display: none !important;
}

.bw-qa-image-viewer-nav.is-prev {
    left: 10px;
}

.bw-qa-image-viewer-nav.is-next {
    right: 10px;
}

.bw-qa-image-viewer-nav:disabled {
    opacity: .28;
    cursor: default;
}

.bw-qa-image-viewer-nav:not(:disabled):active {
    transform: translateY(-50%) scale(.92);
}

.bw-qa-image-viewer-count {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 3;
    transform: translateX(-50%);
    min-width: 48px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .18);
}

.bw-qa-image-viewer-count[hidden] {
    display: none !important;
}

@media (max-width: 480px) {
    .bw-qa-media-grid:not(.bw-media-count-1) {
        gap: 6px !important;
        padding-right: 40px !important;
    }

    .bw-qa-media-grid:not(.bw-media-count-1) > img,
    .bw-qa-media-grid:not(.bw-media-count-1) > .bw-qa-post-image,
    .bw-qa-media-grid:not(.bw-media-count-1) > .bw-qa-answer-image {
        max-width: calc(88% - 4px) !important;
        max-height: 390px !important;
    }

    .bw-qa-answer-media-grid:not(.bw-media-count-1) > img {
        max-height: 350px !important;
    }

    .bw-qa-image-viewer-nav {
        width: 40px;
        height: 40px;
        font-size: 15px;
        background: rgba(17, 24, 39, .68);
    }

    .bw-qa-image-viewer-nav.is-prev { left: 6px; }
    .bw-qa-image-viewer-nav.is-next { right: 6px; }

    .bw-qa-image-viewer-count {
        bottom: 8px;
        padding: 6px 9px;
        font-size: 10px;
    }
}

.main-discipline-list ul > li.is-elective {
    position: relative;
    border-color: #336699;
    background: #f7fbff;
    box-shadow: 0 8px 22px rgba(51, 102, 153, 0.12);
}

.elective-badge {
    position: absolute;
    top: 8px;
    right: 8px;

    padding: 4px 7px;
    border-radius: 8px;

    background: #eaf2f9;
    color: #336699;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
}

/* =========================================================
 * Community Quiz: image question generator
 * ========================================================= */
.bw-cq-auto-trigger {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #dfe6ee;
    border-radius: 15px;
    background: #fff;
    color: #24364a;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
    -webkit-tap-highlight-color: transparent;
}
.bw-cq-auto-trigger > i:first-child {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf4fb;
    color: #336699;
    font-size: 14px;
}
.bw-cq-auto-trigger > span {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.bw-cq-auto-trigger-arrow {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: 11px;
    transition: transform .18s ease;
}
.bw-cq-auto-trigger.is-open .bw-cq-auto-trigger-arrow {
    transform: rotate(180deg);
}
.bw-cq-auto-trigger:active {
    transform: scale(.995);
}

.bw-cq-auto-panel[hidden] {
    display: none !important;
}
.bw-cq-auto-panel {
    padding: 13px !important;
}

.bw-cq-ai-quota {
    min-height: 38px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 11px;
    background: #f3f6f9;
    color: #667085;
}
.bw-cq-ai-quota > span {
    font-size: 10px;
    font-weight: 800;
}
.bw-cq-ai-quota > b {
    color: #336699;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.bw-cq-ai-quota.is-full {
    background: #fff1f1;
}
.bw-cq-ai-quota.is-full > span,
.bw-cq-ai-quota.is-full > b {
    color: #b33a3a;
}

.bw-cq-ai-upload {
    min-height: 58px;
    margin-top: 10px;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px dashed #b8c7d6;
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-cq-ai-upload:active {
    transform: scale(.995);
}
.bw-cq-ai-upload > input {
    display: none;
}
.bw-cq-ai-upload > span {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf4fb;
    color: #336699;
    font-size: 14px;
}
.bw-cq-ai-upload > div {
    flex: 1;
    min-width: 0;
}
.bw-cq-ai-upload b {
    display: block;
    color: #26384c;
    font-size: 11px;
    font-weight: 800;
}
.bw-cq-ai-upload > i {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #336699;
    color: #fff;
    font-size: 10px;
}

.bw-cq-ai-previews {
    margin-top: 9px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
.bw-cq-ai-previews[hidden] {
    display: none !important;
}
.bw-cq-ai-preview {
    min-width: 0;
}
.bw-cq-ai-preview > div {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    background: #eef3f8;
}
.bw-cq-ai-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.bw-cq-ai-preview span {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
}
.bw-cq-ai-preview small {
    margin-top: 3px;
    display: block;
    overflow: hidden;
    color: #8793a3;
    font-size: 8px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-cq-ai-count-row {
    margin-top: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bw-cq-ai-count-row > b {
    color: #344054;
    font-size: 11px;
    font-weight: 800;
}
.bw-cq-ai-counts {
    display: flex;
    gap: 5px;
}
.bw-cq-ai-counts input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bw-cq-ai-counts span {
    min-width: 40px;
    height: 32px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e1eb;
    border-radius: 9px;
    background: #fff;
    color: #607185;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-ai-counts input:checked + span {
    border-color: #336699;
    background: #336699;
    color: #fff;
}

.bw-cq-ai-message {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    background: #eef5fb;
    color: #46647f;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
}
.bw-cq-ai-message[hidden] {
    display: none !important;
}
.bw-cq-ai-message.is-success {
    background: #ecfdf3;
    color: #167044;
}
.bw-cq-ai-message.is-error {
    background: #fff1f1;
    color: #b33a3a;
}

.bw-cq-ai-generate {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 12px;
    background: #336699;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.bw-cq-ai-generate:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.bw-cq-ai-generate:active:not(:disabled) {
    transform: scale(.995);
}

@media (max-width: 520px) {
    .bw-cq-auto-trigger {
        padding: 0 12px;
        font-size: 12px;
    }
    .bw-cq-ai-previews {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .bw-cq-ai-count-row {
        align-items: stretch;
        flex-direction: column;
    }
    .bw-cq-ai-counts label {
        flex: 1;
    }
    .bw-cq-ai-counts span {
        width: 100%;
    }
}

/* =========================================================
   BilimWorld — Weekly AI analysis
   Append to the end of style.css
   ========================================================= */

.bw-ai-analysis-page,
.bw-ai-quiz-page {
    padding-bottom: 28px;
}

.bw-ai-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid rgba(109, 40, 217, .13);
    border-radius: 21px;
    background:
        radial-gradient(circle at 100% 0, rgba(139, 92, 246, .22), transparent 38%),
        linear-gradient(135deg, #5b21b6 0%, #4f46e5 54%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 13px 30px rgba(79, 70, 229, .22);
}

.bw-ai-hero::after {
    content: "";
    position: absolute;
    width: 145px;
    height: 145px;
    right: -66px;
    bottom: -85px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
}

.bw-ai-hero-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 17px;
    background: rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    font-size: 22px;
}

.bw-ai-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.bw-ai-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    color: #f5ddff;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.bw-ai-hero h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
}

.bw-ai-hero p {
    max-width: 430px;
    margin-top: 5px;
    color: rgba(255,255,255,.82);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.bw-ai-week-pill {
    width: max-content;
    max-width: 100%;
    margin: 10px 0 0 auto;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #667085;
    font-size: 10px;
    font-weight: 850;
}

.bw-ai-stats-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.bw-ai-stat-item {
    padding: 14px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 17px;
    background: #fff;
    text-align: center;
    box-shadow: 0 7px 20px rgba(15,23,42,.045);
}

.bw-ai-stat-item strong {
    display: block;
    color: #5b21b6;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
}

.bw-ai-stat-item span {
    display: block;
    margin-top: 5px;
    color: #7b8493;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 800;
}

.bw-ai-preview-card,
.bw-ai-summary-card,
.bw-ai-ready-card,
.bw-ai-create-card,
.bw-ai-test-card,
.bw-ai-lock-card,
.bw-ai-empty {
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 23px rgba(15,23,42,.05);
}

.bw-ai-preview-card,
.bw-ai-summary-card,
.bw-ai-ready-card,
.bw-ai-create-card,
.bw-ai-test-card {
    padding: 15px;
}

.bw-ai-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bw-ai-section-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1edff;
    color: #6d28d9;
    font-size: 15px;
}

.bw-ai-section-title b {
    display: block;
    color: #162033;
    font-size: 14px;
    line-height: 1.25;
}

.bw-ai-section-title span:not(.bw-ai-section-icon) {
    display: block;
    margin-top: 2px;
    color: #8a93a3;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 650;
}

.bw-ai-subject-list {
    margin-top: 11px;
}

.bw-ai-subject-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 8px 0;
    border-top: 1px solid #f0f1f4;
}

.bw-ai-subject-row:first-child {
    border-top: 0;
}

.bw-ai-subject-row span {
    min-width: 0;
    color: #344054;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 750;
}

.bw-ai-subject-row b {
    min-width: 31px;
    height: 28px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f5f3ff;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 900;
}

.bw-ai-topic-preview-list {
    margin-top: 10px;
}

.bw-ai-topic-preview-row {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-top: 1px solid #f0f1f4;
}

.bw-ai-topic-preview-row:first-child {
    border-top: 0;
}

.bw-ai-topic-index {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f2f4f7;
    color: #667085;
    font-size: 10px;
    font-weight: 900;
}

.bw-ai-topic-preview-row > div {
    min-width: 0;
}

.bw-ai-topic-preview-row > div b {
    display: block;
    overflow: hidden;
    color: #263244;
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 800;
    text-overflow: ellipsis;
}

.bw-ai-topic-preview-row > div span {
    display: block;
    margin-top: 2px;
    color: #98a2b3;
    font-size: 9.5px;
    line-height: 1.25;
}

.bw-ai-topic-preview-row > strong {
    color: #7c3aed;
    font-size: 11px;
    font-weight: 900;
}

.bw-ai-create-card {
    overflow: hidden;
    border-color: #ddd6fe;
    background:
        radial-gradient(circle at 100% 0, rgba(124,58,237,.10), transparent 35%),
        linear-gradient(180deg, #fff, #fbfaff);
}

.bw-ai-create-copy > span,
.bw-ai-test-copy > span,
.bw-ai-main-heading > div > span,
.bw-ai-result-kicker {
    color: #7c3aed;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bw-ai-create-copy h4,
.bw-ai-test-copy h4 {
    margin-top: 5px;
    color: #171f32;
    font-size: 16px;
    line-height: 1.25;
}

.bw-ai-create-copy p,
.bw-ai-test-copy p {
    margin-top: 5px;
    color: #7a8494;
    font-size: 11px;
    line-height: 1.45;
}

.bw-ai-primary-btn,
.bw-ai-secondary-btn {
    min-height: 48px;
    border: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bw-ai-primary-btn {
    width: 100%;
    margin-top: 13px;
    padding: 0 14px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    box-shadow: 0 10px 22px rgba(99,102,241,.22);
}

.bw-ai-primary-btn:active,
.bw-ai-secondary-btn:active {
    transform: scale(.985);
}

.bw-ai-primary-btn:disabled {
    cursor: default;
    opacity: .7;
}

.bw-ai-secondary-btn {
    width: 100%;
    margin-top: 12px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #344054;
}

.bw-ai-generate-message {
    margin-top: 10px;
    padding: 10px 11px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 12px;
    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 750;
}

.bw-ai-generate-message.is-loading {
    background: #f5f3ff;
    color: #6d28d9;
}

.bw-ai-generate-message.is-success {
    background: #f0fdf4;
    color: #15803d;
}

.bw-ai-generate-message.is-error {
    background: #fef2f2;
    color: #b42318;
}

.bw-ai-ready-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bw-ai-ready-icon {
    width: 39px;
    height: 39px;
    min-width: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #ecfdf3;
    color: #16a34a;
    font-size: 17px;
}

.bw-ai-ready-head b {
    display: block;
    color: #172033;
    font-size: 14px;
}

.bw-ai-ready-head span:not(.bw-ai-ready-icon) {
    display: block;
    margin-top: 2px;
    color: #8490a0;
    font-size: 10px;
}

.bw-ai-best-result {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 11px;
    background: #fffbeb;
    color: #a16207;
    font-size: 10.5px;
    font-weight: 850;
}

.bw-ai-best-result i {
    margin-right: 5px;
}

.bw-ai-summary-card > p {
    margin-top: 12px;
    color: #344054;
    font-size: 12px;
    line-height: 1.58;
    font-weight: 600;
}

.bw-ai-focus-message {
    margin-top: 11px;
    padding: 11px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 13px;
    background: #f5f3ff;
    color: #5b21b6;
    font-size: 10.5px;
    line-height: 1.45;
    font-weight: 750;
}

.bw-ai-focus-message i {
    margin-top: 2px;
}

.bw-ai-notes-section {
    margin-top: 15px;
}

.bw-ai-main-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.bw-ai-main-heading h4 {
    margin-top: 4px;
    color: #151e2f;
    font-size: 17px;
    line-height: 1.2;
}

.bw-ai-heading-count {
    min-width: 38px;
    height: 34px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #ede9fe;
    color: #6d28d9;

    font-size: 12px;
    line-height: 1;
    font-weight: 900;

    white-space: nowrap;
    flex-shrink: 0;
}

.bw-ai-notes-list {
    display: grid;
    gap: 9px;
}

.bw-ai-note-card {
    padding: 14px;
    border: 1px solid #e7e8ec;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15,23,42,.04);
}

.bw-ai-note-top {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.bw-ai-note-number {
    width: 29px;
    height: 29px;
    min-width: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 10px;
    font-weight: 950;
}

.bw-ai-note-title {
    min-width: 0;
}

.bw-ai-note-title > span {
    display: block;
    color: #8b5cf6;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.bw-ai-note-title h5 {
    margin-top: 2px;
    color: #192335;
    font-size: 13px;
    line-height: 1.3;
}

.bw-ai-note-problem {
    margin-top: 10px;
    padding: 9px 10px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border-radius: 11px;
    background: #fff7ed;
    color: #9a4d0b;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
}

.bw-ai-note-problem i {
    margin-top: 2px;
}

.bw-ai-note-text {
    margin-top: 10px;
    color: #344054;
    font-size: 11.5px;
    line-height: 1.62;
    font-weight: 600;
}

.bw-ai-remember {
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    background: #faf5ff;
}

.bw-ai-remember b {
    display: block;
    color: #7e22ce;
    font-size: 10px;
}

.bw-ai-remember span {
    display: block;
    margin-top: 4px;
    color: #5f4b6d;
    font-size: 10.5px;
    line-height: 1.5;
    font-weight: 650;
}

.bw-ai-test-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 11px;
    border-color: #dbeafe;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 70%);
}

.bw-ai-test-card .bw-ai-primary-btn {
    grid-column: 1 / -1;
    margin-top: 3px;
}

.bw-ai-test-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #dbeafe;
    color: #2563eb;
    font-size: 19px;
}

.bw-ai-lock-card,
.bw-ai-empty {
    padding: 25px 16px;
    text-align: center;
}

.bw-ai-lock-icon,
.bw-ai-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #f1edff;
    color: #6d28d9;
    font-size: 22px;
}

.bw-ai-empty-icon.is-ai {
    background: #eef2ff;
    color: #4f46e5;
}

.bw-ai-lock-card h4,
.bw-ai-empty b {
    display: block;
    margin: 0;
    color: #182230;
    font-size: 16px;
}

.bw-ai-lock-card p,
.bw-ai-empty p {
    max-width: 390px;
    margin: 6px auto 0;
    color: #7b8796;
    font-size: 11.5px;
    line-height: 1.5;
}

.bw-ai-note-bottom {
    margin-top: 12px;
    padding: 10px 11px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 13px;
    background: #f2f4f7;
    color: #7b8493;
    font-size: 9.5px;
    line-height: 1.4;
    font-weight: 650;
}

.bw-ai-note-bottom i {
    margin-top: 2px;
    color: #667085;
}

/* ---------- AI quiz ---------- */

.bw-ai-quiz-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15,23,42,.045);
}

.bw-ai-quiz-head-copy > span {
    color: #7c3aed;
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .07em;
}

.bw-ai-quiz-head-copy h3 {
    margin: 4px 0 0;
    color: #172033;
    font-size: 18px;
    line-height: 1.2;
}

.bw-ai-quiz-head-copy p {
    margin-top: 4px;
    color: #8490a0;
    font-size: 10.5px;
    line-height: 1.35;
}

.bw-ai-quiz-counter {
    flex-shrink: 0;
    min-width: 52px;
    height: 44px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f5f3ff;
    color: #8b5cf6;
    font-size: 11px;
    font-weight: 850;
}

.bw-ai-quiz-counter strong {
    color: #5b21b6;
    font-size: 17px;
    font-weight: 950;
}

.bw-ai-quiz-progress {
    height: 6px;
    margin: 10px 3px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf3;
}

.bw-ai-quiz-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    transition: width .22s ease;
}

.bw-ai-quiz-test {
    margin-top: 10px;
}

.bw-ai-quiz-slide {
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.055);
}

.bw-ai-quiz-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.bw-ai-quiz-meta span,
.bw-ai-quiz-meta small {
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 1;
    font-weight: 850;
}

.bw-ai-quiz-meta span {
    background: #ede9fe;
    color: #6d28d9;
}

.bw-ai-quiz-meta small {
    background: #f2f4f7;
    color: #667085;
}

.bw-ai-quiz-question {
    margin-top: 13px;
    color: #172033;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.bw-ai-quiz-answers {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.bw-ai-answer {
    width: 100%;
    min-height: 53px;
    padding: 8px 9px;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 27px;
    align-items: center;
    gap: 9px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #fff;
    color: #263548;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(15,23,42,.035);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.bw-ai-answer:active {
    transform: scale(.986);
}

.bw-ai-answer-key {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
}

.bw-ai-answer-copy {
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.bw-ai-answer-state {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: transparent;
    font-size: 10px;
}

.bw-ai-answer.is-selected {
    border-color: #a78bfa;
    background: #faf5ff;
}

.bw-ai-answer.is-selected .bw-ai-answer-key {
    border-color: #c4b5fd;
    background: #ede9fe;
    color: #6d28d9;
}

.bw-ai-answer.is-correct {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.bw-ai-answer.is-correct .bw-ai-answer-key {
    border-color: #86efac;
    background: #dcfce7;
    color: #15803d;
}

.bw-ai-answer.is-correct .bw-ai-answer-state {
    background: #22c55e;
    color: #fff;
}

.bw-ai-answer.is-wrong {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.bw-ai-answer.is-wrong .bw-ai-answer-key {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #dc2626;
}

.bw-ai-answer.is-wrong .bw-ai-answer-state {
    background: #ef4444;
    color: #fff;
}

.bw-ai-answer-feedback {
    margin-top: 10px;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
}

.bw-ai-answer-feedback.is-correct {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.bw-ai-answer-feedback.is-wrong {
    border-color: #fecaca;
    background: #fef2f2;
}

.bw-ai-feedback-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fff;
    color: #7c3aed;
    font-size: 13px;
}

.bw-ai-answer-feedback b {
    display: block;
    color: #172033;
    font-size: 11px;
}

.bw-ai-answer-feedback p {
    margin-top: 3px;
    color: #667085;
    font-size: 10.5px;
    line-height: 1.45;
    font-weight: 600;
}

.bw-ai-quiz-actions {
    margin-top: 10px;
}

.bw-ai-quiz-next {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(99,102,241,.20);
}

.bw-ai-quiz-next:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: default;
}

.bw-ai-quiz-result {
    margin-top: 10px;
    padding: 26px 17px;
    border: 1px solid #e5e7eb;
    border-radius: 21px;
    background: #fff;
    text-align: center;
    box-shadow: 0 10px 27px rgba(15,23,42,.06);
}

.bw-ai-result-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #fff7ed;
    color: #d97706;
    font-size: 25px;
}

.bw-ai-quiz-result h3 {
    margin-top: 5px;
    color: #172033;
    font-size: 20px;
}

.bw-ai-result-score {
    margin-top: 11px;
    color: #7c3aed;
}

.bw-ai-result-score strong {
    font-size: 40px;
    line-height: 1;
    font-weight: 950;
}

.bw-ai-result-score span {
    font-size: 18px;
    font-weight: 850;
}

.bw-ai-quiz-result > p {
    max-width: 390px;
    margin: 9px auto 0;
    color: #7b8493;
    font-size: 11.5px;
    line-height: 1.45;
}

.bw-ai-result-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 15px;
}

.bw-ai-result-buttons .bw-ai-primary-btn,
.bw-ai-result-buttons .bw-ai-secondary-btn {
    margin-top: 0;
}

/* Button for mistakes.php */
.bw-mistakes-ai-card {
    margin-top: 12px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid #ddd6fe;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(124,58,237,.12), transparent 38%),
        linear-gradient(135deg, #faf8ff, #fff);
    box-shadow: 0 8px 22px rgba(76,29,149,.06);
}

.bw-mistakes-ai-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bw-mistakes-ai-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 8px 18px rgba(99,102,241,.22);
}

.bw-mistakes-ai-head b {
    display: block;
    color: #1b2435;
    font-size: 13px;
}

.bw-mistakes-ai-head span {
    display: block;
    margin-top: 2px;
    color: #7c8798;
    font-size: 10px;
    line-height: 1.35;
}

.bw-mistakes-ai-card .bw-ai-primary-btn {
    min-height: 44px;
    margin-top: 11px;
    font-size: 12px;
}

@media (max-width: 420px) {
    .bw-ai-hero {
        padding: 15px;
    }

    .bw-ai-hero-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 15px;
        font-size: 20px;
    }

    .bw-ai-hero h3 {
        font-size: 18px;
    }

    .bw-ai-result-buttons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 350px) {
    .bw-ai-stats-card {
        gap: 6px;
    }

    .bw-ai-stat-item strong {
        font-size: 21px;
    }

    .bw-ai-quiz-head {
        flex-direction: column;
    }

    .bw-ai-quiz-counter {
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bw-ai-primary-btn,
    .bw-ai-secondary-btn,
    .bw-ai-answer,
    .bw-ai-quiz-next,
    .bw-ai-quiz-progress-fill {
        transition: none;
    }
}

/* =========================================================
   BilimWorld — AI analysis v3
   SQL statistics + short AI diagnosis + existing mistakes flow
   ========================================================= */

.bw-ai-v3 {
    padding-bottom: 34px;
}

.bw-ai-v3-hero {
    margin-bottom: 12px;
}

.bw-ai-live-card {
    margin-top: 12px;
    padding: 15px;
    border: 1px solid #dfe7f2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
}

.bw-ai-live-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.bw-ai-live-head > div:first-child {
    min-width: 0;
}

.bw-ai-live-head > div:first-child > span,
.bw-ai-report-label span,
.bw-ai-plan-section .bw-ai-main-heading > div > span,
.bw-ai-v3-create-card .bw-ai-create-copy > span,
.bw-ai-practice-copy > span {
    display: block;
    color: #6d28d9;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: .08em;
}
.bw-ai-live-head h4 {
    margin: 4px 0 0;
    color: #172033;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 900;
}

.bw-ai-live-head small {
    display: block;
    margin-top: 4px;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 700;
}

.bw-ai-live-count {
    width: 66px;
    min-width: 66px;
    min-height: 62px;
    padding: 8px 6px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f3f0ff;
    color: #6d28d9;
    text-align: center;
}

.bw-ai-live-count strong {
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
}

.bw-ai-live-count span {
    margin-top: 4px;
    font-size: 8px;
    line-height: 1.15;
    font-weight: 850;
}

.bw-ai-live-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 13px;
}

.bw-ai-live-metrics > div {
    padding: 10px 7px;
    border: 1px solid #edf0f4;
    border-radius: 13px;
    background: #fafbfc;
    text-align: center;
}

.bw-ai-live-metrics strong,
.bw-ai-live-metrics span {
    display: block;
}

.bw-ai-live-metrics strong {
    color: #263247;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
}

.bw-ai-live-metrics span {
    margin-top: 4px;
    color: #8b95a7;
    font-size: 9px;
    font-weight: 750;
}

.bw-ai-live-topics {
    margin-top: 13px;
    border-top: 1px solid #f0f2f5;
}

.bw-ai-live-topic {
    min-height: 52px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f0f2f5;
}

.bw-ai-live-topic:last-child {
    border-bottom: 0;
}

.bw-ai-live-topic > div {
    min-width: 0;
}

.bw-ai-live-topic b {
    display: block;
    overflow: hidden;
    color: #253047;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-ai-live-topic small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #8b95a7;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-ai-live-topic > strong {
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1f2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 950;
}

.bw-ai-full-btn {
    width: 100%;
    margin-top: 12px;
}

.bw-ai-live-empty {
    margin-top: 13px;
    padding: 12px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fdf4;
    color: #15803d;
}

.bw-ai-live-empty > i {
    font-size: 20px;
}

.bw-ai-live-empty b,
.bw-ai-live-empty span {
    display: block;
}

.bw-ai-live-empty b {
    font-size: 12px;
    font-weight: 900;
}

.bw-ai-live-empty span {
    margin-top: 2px;
    color: #4d7c5d;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 650;
}

.bw-ai-report-label {
    margin-top: 18px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bw-ai-report-label b {
    display: block;
    margin-top: 3px;
    color: #344054;
    font-size: 12px;
    font-weight: 850;
}

.bw-ai-report-label > i {
    color: #98a2b3;
    font-size: 18px;
}

.bw-ai-v3-ready {
    border-color: #d7f4df;
    background: linear-gradient(180deg, #fbfffc 0%, #fff 100%);
}

.bw-ai-plan-section {
    margin-top: 16px;
}

.bw-ai-plan-list {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.bw-ai-plan-card {
    padding: 14px;
    border: 1px solid #e6e9ef;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 7px 21px rgba(15, 23, 42, .045);
}

.bw-ai-plan-card.is-high {
    border-color: #fed7d7;
    background: linear-gradient(180deg, #fffafa 0%, #fff 100%);
}

.bw-ai-plan-card.is-medium {
    border-color: #fde8c5;
    background: linear-gradient(180deg, #fffdf8 0%, #fff 100%);
}

.bw-ai-plan-top {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.bw-ai-plan-title {
    min-width: 0;
}

.bw-ai-plan-title small {
    display: block;
    color: #8b95a7;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 750;
}

.bw-ai-plan-title h5 {
    margin: 3px 0 0;
    color: #182230;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
}

.bw-ai-priority {
    max-width: 110px;
    padding: 6px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #667085;
    font-size: 8px;
    line-height: 1.15;
    font-weight: 900;
    text-align: center;
}

.bw-ai-plan-card.is-high .bw-ai-priority {
    background: #fee2e2;
    color: #b91c1c;
}

.bw-ai-plan-card.is-medium .bw-ai-priority {
    background: #fef3c7;
    color: #a16207;
}

.bw-ai-plan-stats {
    margin: 11px 0 0 41px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.bw-ai-plan-stats span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f6f7f9;
    color: #667085;
    font-size: 9px;
    font-weight: 800;
}

.bw-ai-plan-stats i {
    margin-right: 3px;
}

.bw-ai-plan-row {
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    background: #f8fafc;
}

.bw-ai-plan-row b {
    display: block;
    color: #344054;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
}

.bw-ai-plan-row p {
    margin: 4px 0 0;
    color: #596579;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 600;
}

.bw-ai-plan-row.is-problem {
    background: #fff7ed;
}

.bw-ai-plan-row.is-rule {
    background: #f5f3ff;
}

.bw-ai-plan-row.is-action {
    background: #eff6ff;
}

.bw-ai-v3-create-card,
.bw-ai-practice-card {
    margin-top: 14px;
}

.bw-ai-practice-card {
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 23px rgba(15, 23, 42, .05);
}

.bw-ai-practice-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 17px;
}

.bw-ai-practice-copy {
    margin: 10px 0 12px;
}

.bw-ai-practice-copy h4 {
    margin: 4px 0 0;
    color: #182230;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 900;
}

.bw-ai-practice-copy p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 600;
}

.bw-ai-generate-message.is-error {
    color: #b42318;
}

.bw-ai-generate-message.is-success {
    color: #15803d;
}

.bw-ai-primary-btn.is-loading,
.bw-ai-generate-btn.is-loading {
    opacity: .68;
    pointer-events: none;
}

/* =========================================================
   Mistakes page -> AI entry
   ========================================================= */

.bw-mistakes-ai-card {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #ddd6fe;
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 0, rgba(124, 58, 237, .10), transparent 36%),
        linear-gradient(135deg, #faf8ff 0%, #ffffff 100%);
    box-shadow: 0 8px 22px rgba(91, 33, 182, .07);
}

.bw-mistakes-ai-card.is-clean {
    margin-top: 14px;
}

.bw-mistakes-ai-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 18px;
}

.bw-mistakes-ai-copy {
    margin-top: 10px;
}

.bw-mistakes-ai-copy > span {
    display: block;
    color: #6d28d9;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
}

.bw-mistakes-ai-copy > b {
    display: block;
    margin-top: 4px;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 900;
}

.bw-mistakes-ai-copy > p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 600;
}

.bw-mistakes-ai-btn {
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    padding: 10px 13px;
    border: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #6d28d9;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.bw-mistakes-ai-btn:active {
    transform: scale(.985);
}

@media (max-width: 480px) {
    .bw-ai-live-card,
    .bw-ai-plan-card,
    .bw-ai-practice-card {
        padding: 13px;
    }

    .bw-ai-live-head h4 {
        font-size: 15px;
    }

    .bw-ai-live-count {
        width: 58px;
        min-width: 58px;
        min-height: 56px;
        border-radius: 16px;
    }

    .bw-ai-live-count strong {
        font-size: 21px;
    }

    .bw-ai-plan-top {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .bw-ai-priority {
        grid-column: 2;
        justify-self: start;
        margin-top: -2px;
    }

    .bw-ai-plan-stats {
        margin-left: 39px;
    }

    .bw-mistakes-ai-card {
        padding: 13px;
    }
}

/* =========================================================
 * BilimWorld Smart Recovery + AI Coach
 * ========================================================= */
.bw-smart-session-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding: 14px 15px;
    border: 1px solid #dfe8f2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}

.bw-smart-session-head > div {
    min-width: 0;
}

.bw-smart-session-head span {
    display: block;
    margin-bottom: 3px;
    color: #667085;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .07em;
}

.bw-smart-session-head b {
    display: block;
    color: #182230;
    font-size: 14px;
    line-height: 1.3;
}

.bw-smart-session-head small {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: 10px;
    background: #eaf1f8;
    color: #336699;
    font-size: 10px;
    font-weight: 900;
}

.bw-mistakes-schedule-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.bw-mistakes-topic-action {
    width: 100%;
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: inherit;

    appearance: none;
    -webkit-appearance: none;

    font-family: inherit;
    font-size: inherit;
    line-height: inherit;

    text-align: left;
    cursor: pointer;

    box-shadow: none;
    outline: none;

    -webkit-tap-highlight-color: transparent;
}

.bw-mistakes-topic-action:hover {
    background: transparent;
}

.bw-mistakes-topic-action:focus {
    outline: none;
}

.bw-mistakes-topic-action:active {
    background: transparent;
    transform: scale(.99);
}

.bw-ai-free-preview {
    position: relative;
    overflow: hidden;
}

.bw-ai-value-lock {
    margin-top: 12px;
}

.bw-ai-lock-benefits {
    display: grid;
    gap: 7px;
    width: 100%;
    margin: 14px 0;
    text-align: left;
}

.bw-ai-lock-benefits span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    background: #f7f9fc;
    color: #344054;
    font-size: 11px;
    font-weight: 800;
}

.bw-ai-lock-benefits i {
    color: #279447;
}

.bw-ai-cause-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 9px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 10px;
    font-weight: 850;
}

.bw-ai-cause-chip.is-high {
    background: #fff3e8;
    color: #a64b00;
}

.bw-ai-cause-chip.is-medium {
    background: #fff8dc;
    color: #8a6500;
}

.bw-ai-cause-chip small {
    padding-left: 3px;
    opacity: .65;
    font-size: 9px;
}

.bw-ai-topic-practice-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 13px;
    padding: 12px 13px;
    border: 0;
    border-radius: 14px;
    background: #336699;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bw-ai-topic-practice-btn:active {
    transform: scale(.985);
}

.bw-explanation-check-next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 13px 14px;
    border: 0;
    border-radius: 14px;
    background: #336699;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.bw-explanation-check-next + .bw-explanation-done {
    margin-top: 8px;
}

@media (max-width: 480px) {
    .bw-smart-session-head {
        padding: 12px 13px;
        border-radius: 16px;
    }

    .bw-ai-topic-practice-btn {
        padding: 11px 12px;
        font-size: 11px;
    }

    .bw-ai-cause-chip {
        max-width: 100%;
        flex-wrap: wrap;
    }
}


/* =========================================================
   Smart Recovery / AI plan -> compact conspect recommendation
   ========================================================= */
.bw-ai-conspect-recommendation {
    width: 100%;
    min-width: 0;
    margin-top: 11px;
    padding: 10px 11px;
    border: 1px solid #dbeafe;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
    overflow: hidden;
}

.bw-ai-conspect-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #2563eb;
    font-size: 14px;
    line-height: 1;
}

.bw-ai-conspect-copy {
    min-width: 0;
    width: 100%;
}

.bw-ai-conspect-copy b,
.bw-ai-conspect-copy span {
    display: block;
    min-width: 0;
}

.bw-ai-conspect-copy b {
    margin: 0;
    color: #1e3a5f;
    font-size: 11px;
    line-height: 1.28;
    font-weight: 900;
    white-space: normal;
    overflow-wrap: break-word;
}

.bw-ai-conspect-copy span {
    margin-top: 2px;
    color: #64748b;
    font-size: 9.5px;
    line-height: 1.3;
    font-weight: 650;
    white-space: normal;
    overflow-wrap: break-word;
}

@media (max-width: 390px) {
    .bw-ai-conspect-recommendation {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        padding: 9px 10px;
    }

    .bw-ai-conspect-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
        font-size: 13px;
    }

    .bw-ai-conspect-copy b {
        font-size: 10.5px;
    }

    .bw-ai-conspect-copy span {
        font-size: 9px;
    }
}
.bw-ai-plan-actions {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr;
}
.bw-ai-plan-actions.has-conspect {
    grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-columns: 1fr;

}
.bw-ai-topic-conspect-btn,
.bw-ai-topic-practice-btn {
    min-width: 0;
    min-height: 46px;
    padding: 9px 11px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: inherit;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.bw-ai-topic-conspect-btn {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}
.bw-ai-topic-practice-btn {
    border: 0;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .16);
}
.bw-ai-topic-conspect-btn:active,
.bw-ai-topic-practice-btn:active {
    transform: scale(.98);
}
/* =========================================================
   BilimWorld — Progress dashboard
   ========================================================= */
nav .nav-li {
    flex: 1 1 20%;
    width: auto;
    min-width: 0;
    margin: 0;
    align-items: center;
    transition: color .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}
nav .nav-li:active {
    transform: scale(.96);
}
nav .nav-li>i {
    font-size: 21px;
}
nav .nav-li>span {
    max-width: 100%;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-progress-page {
    padding-bottom: 26px;
}

.bw-progress-hero {
    position: relative;
    overflow: hidden;
    padding: 19px;
    border-radius: 24px;
    background: linear-gradient(135deg, #244f7c, #3f7fb9);
    color: #fff;
    box-shadow: 0 14px 32px rgba(51, 102, 153, .23);
}

.bw-progress-hero:after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    right: -58px;
    top: -72px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.bw-progress-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: rgba(255,255,255,.72);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bw-progress-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.bw-progress-score strong {
    display: block;
    font-size: 44px;
    line-height: .95;
    letter-spacing: -1.8px;
}

.bw-progress-score span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 700;
}

.bw-progress-delta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.bw-progress-delta.is-up { color: #dff9e7; }
.bw-progress-delta.is-down { color: #ffe4e4; }
.bw-progress-delta.is-flat { color: rgba(255,255,255,.78); }

.bw-progress-hero-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
    margin-top: 17px;
}

.bw-progress-hero-stat {
    min-width: 0;
    padding: 11px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    background: rgba(255,255,255,.10);
}

.bw-progress-hero-stat b,
.bw-progress-hero-stat span {
    display: block;
}

.bw-progress-hero-stat b {
    font-size: 17px;
    line-height: 1.1;
}

.bw-progress-hero-stat span {
    margin-top: 4px;
    overflow: hidden;
    color: rgba(255,255,255,.67);
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-progress-link {
    margin-top: 11px;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255,255,255,.88);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.bw-progress-section {
    margin-top: 18px;
}

.bw-progress-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 9px;
}

.bw-progress-section-head h4 {
    margin: 0;
    color: #182230;
    font-size: 16px;
}

.bw-progress-section-head span {
    color: #8a96a6;
    font-size: 10px;
    font-weight: 800;
}

.bw-progress-chart-card,
.bw-progress-focus-card,
.bw-progress-review-card,
.bw-progress-ai-card,
.bw-progress-empty-card {
    border: 1px solid #e3e9f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.055);
}

.bw-progress-chart-card {
    padding: 16px 14px 13px;
}

.bw-progress-chart-summary {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 13px;
}

.bw-progress-chart-summary b {
    color: #172033;
    font-size: 18px;
}

.bw-progress-chart-summary span {
    color: #8793a3;
    font-size: 11px;
    font-weight: 700;
}

.bw-progress-chart {
    height: 128px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    align-items: end;
    gap: 7px;
}

.bw-progress-day {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bw-progress-bar-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 10px;
    background: #f3f6f9;
    overflow: hidden;
}

.bw-progress-bar {
    width: 100%;
    min-height: 5px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #6fa7d5, #336699);
}

.bw-progress-day.is-empty .bw-progress-bar {
    min-height: 3px;
    background: #dfe6ee;
}

.bw-progress-day strong {
    color: #405065;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
}

.bw-progress-day span {
    color: #8a96a6;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.bw-progress-focus-card {
    padding: 5px 15px;
}

.bw-progress-focus-row {
    display: grid;
    grid-template-columns: 31px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f5;
}

.bw-progress-focus-row:last-child {
    border-bottom: 0;
}

.bw-progress-focus-index {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff1f1;
    color: #df5d5d;
    font-size: 11px;
    font-weight: 900;
}

.bw-progress-focus-copy {
    min-width: 0;
}

.bw-progress-focus-copy b,
.bw-progress-focus-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-progress-focus-copy b {
    color: #182230;
    font-size: 13px;
}

.bw-progress-focus-copy span {
    margin-top: 3px;
    color: #8a96a6;
    font-size: 10px;
}

.bw-progress-focus-count {
    min-width: 31px;
    height: 31px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f2f5f8;
    color: #59697c;
    font-size: 11px;
    font-weight: 900;
}

.bw-progress-review-card,
.bw-progress-ai-card {
    padding: 16px;
}

.bw-progress-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.bw-progress-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #edf4fa;
    color: #336699;
    font-size: 18px;
}

.bw-progress-card-icon.is-ai {
    background: #f3edff;
    color: #7650bd;
}

.bw-progress-card-copy {
    min-width: 0;
    flex: 1;
}

.bw-progress-card-copy b {
    display: block;
    color: #182230;
    font-size: 14px;
}

.bw-progress-card-copy p {
    margin-top: 4px;
    color: #7a8797;
    font-size: 11px;
    line-height: 1.45;
}

.bw-progress-review-count {
    margin-left: auto;
    color: #285f91;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.bw-progress-action {
    width: 100%;
    min-height: 44px;
    margin-top: 13px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #336699;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bw-progress-action.is-soft {
    background: #f1ecfb;
    color: #6f4eb0;
}

.bw-progress-action:active {
    transform: scale(.985);
}

.bw-progress-ai-summary {
    margin-top: 12px;
    padding: 12px 13px;
    border-radius: 15px;
    background: #f7f4fc;
    color: #5f5770;
    font-size: 11px;
    line-height: 1.55;
}

.bw-progress-empty-card {
    padding: 22px 16px;
    text-align: center;
}

.bw-progress-empty-card i {
    width: 46px;
    height: 46px;
    margin: 0 auto 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #eef4fa;
    color: #336699;
    font-size: 18px;
}

.bw-progress-empty-card b {
    display: block;
    color: #182230;
    font-size: 14px;
}

.bw-progress-empty-card p {
    margin-top: 5px;
    color: #8793a3;
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 380px) {
    nav .nav-li>i { font-size: 20px; }
    nav .nav-li>span { font-size: 8px; }
    .bw-progress-score strong { font-size: 40px; }
    .bw-progress-hero { padding: 17px; }
    .bw-progress-hero-stat { padding: 10px 7px; }
    .bw-progress-chart { gap: 5px; }
}

/* =========================================================
 * BilimWorld community people search
 * ========================================================= */
.bw-qa-header-action.is-people-search {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(31, 72, 111, .09);
    -webkit-tap-highlight-color: transparent;
}

.bw-qa-header-action.is-people-search i {
    margin: 0 !important;
    font-size: 17px;
}

.bw-people-search-page {
    padding-bottom: 34px;
}

.bw-people-search-hero {
    margin: 10px 0 12px;
    padding: 17px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eef5fb, #ffffff);
    border: 1px solid rgba(51, 102, 153, .10);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.bw-people-search-kicker {
    display: block;
    margin-bottom: 4px;
    color: #336699;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.bw-people-search-hero h2 {
    margin: 0;
    color: #152436;
    font-size: 20px;
    line-height: 1.2;
}

.bw-people-search-hero p {
    margin: 6px 0 0;
    color: #758295;
    font-size: 12px;
    line-height: 1.45;
}

.bw-people-search-box {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 0 15px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #dfe7ef;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .05);
}

.bw-people-search-box:focus-within {
    border-color: #8db2d3;
    box-shadow: 0 0 0 3px rgba(51, 102, 153, .08), 0 8px 22px rgba(15, 23, 42, .05);
}

.bw-people-search-box > i {
    width: 18px;
    color: #7f8fa1;
    font-size: 15px;
    text-align: center;
    flex-shrink: 0;
}

.bw-people-search-box input {
    min-width: 0;
    flex: 1;
    height: 50px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172334;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.bw-people-search-box input::placeholder {
    color: #98a4b3;
    font-weight: 600;
}

.bw-people-search-box button {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: #f1f4f7;
    color: #697789;
    cursor: pointer;
    flex-shrink: 0;
}

.bw-people-search-help {
    margin: 7px 4px 13px;
    color: #8793a2;
    font-size: 10px;
    font-weight: 700;
}

.bw-people-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 2px 9px;
}

.bw-people-results-head div {
    min-width: 0;
}

.bw-people-results-head b {
    display: block;
    color: #172334;
    font-size: 13px;
    font-weight: 900;
}

.bw-people-results-head span {
    display: block;
    margin-top: 2px;
    color: #8793a2;
    font-size: 10px;
    font-weight: 700;
}

.bw-people-results-head > strong {
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef4f9;
    color: #336699;
    font-size: 11px;
    font-weight: 900;
}

.bw-people-list {
    display: grid;
    gap: 8px;
}

.bw-people-card {
    width: 100%;
    min-height: 72px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid #e5ebf1;
    border-radius: 17px;
    background: #fff;
    color: inherit;
    text-align: left;
    font: inherit;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .045);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bw-people-card:active {
    transform: scale(.992);
}

.bw-people-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(135deg, #dfeaf4, #f2f7fb);
    color: #336699;
    font-size: 17px;
    font-weight: 900;
    flex-shrink: 0;
}

.bw-people-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.bw-people-copy {
    min-width: 0;
}

.bw-people-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bw-people-name-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #162235;
    font-size: 14px;
    font-weight: 900;
}

.bw-people-premium {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fff5d8;
    color: #b87900;
    font-size: 9px;
    flex-shrink: 0;
}

.bw-people-meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    color: #7d8998;
    font-size: 10px;
    font-weight: 700;
}

.bw-people-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bw-people-card > i {
    color: #a5afbb;
    font-size: 12px;
}

.bw-people-search-empty {
    min-height: 210px;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bw-people-search-empty > span {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border-radius: 17px;
    background: #edf4fa;
    color: #336699;
    font-size: 18px;
}

.bw-people-search-empty b {
    color: #263648;
    font-size: 14px;
    font-weight: 900;
}

.bw-people-search-empty p {
    max-width: 290px;
    margin: 6px 0 0;
    color: #8793a2;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .bw-people-search-hero {
        padding: 15px;
        border-radius: 18px;
    }

    .bw-people-search-hero h2 {
        font-size: 18px;
    }

    .bw-people-card {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        min-height: 66px;
        padding: 10px;
        border-radius: 15px;
    }

    .bw-people-avatar {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 16px;
    }
}

.bw-people-search-box input::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}

.bw-people-card {
    appearance: none;
    -webkit-appearance: none;
    outline: 0;
}

/* =========================================================
 * BilimWorld Social: follows + direct messages
 * ========================================================= */
.bw-social-profile-bar {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e6eaf0;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(19,29,48,.05);
}
.bw-social-profile-counts {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}
.bw-social-profile-counts button {
    min-width: 0;
    min-height: 58px;
    padding: 9px 10px;
    border: 0;
    border-radius: 14px;
    background: #f7f9fc;
    color: #172033;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-social-profile-counts button:active {
    transform: scale(.985);
}
.bw-social-profile-counts b,
.bw-social-profile-counts span {
    display: block;
}
.bw-social-profile-counts b {
    font-size: 16px;
    font-weight: 1000;
    line-height: 1.1;
}
.bw-social-profile-counts span {
    margin-top: 4px;
    color: #8993a2;
    font-size: 9px;
    font-weight: 900;
}
.bw-social-profile-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 9px;
}
.bw-social-profile-actions:has(> :only-child) {
    grid-template-columns: 1fr;
}
.bw-social-action {
    min-width: 0;
    min-height: 45px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #336699;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(51,102,153,.16);
    -webkit-tap-highlight-color: transparent;
}
.bw-social-action.is-message {
    background: #f0f5fb;
    color: #336699;
    box-shadow: none;
}
.bw-social-action.is-following {
    background: #e9f7ef;
    color: #238e5d;
    box-shadow: none;
}
.bw-social-action.is-loading {
    opacity: .65;
}
.bw-social-action:active {
    transform: scale(.985);
}

.bw-social-list-page,
.bw-messages-page,
.bw-direct-chat-page {
    width: 100%;
    padding: 6px 0 36px;
}
.bw-social-list-page *,
.bw-messages-page *,
.bw-direct-chat-page * {
    box-sizing: border-box;
}
.bw-social-list-head,
.bw-messages-intro,
.bw-direct-chat-peer {
    padding: 15px;
    border: 1px solid #e6eaf0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.055);
}
.bw-social-list-head small,
.bw-social-list-head h2,
.bw-messages-intro small,
.bw-messages-intro h2,
.bw-messages-intro p {
    display: block;
}
.bw-social-list-head small,
.bw-messages-intro small {
    color: #8d97a6;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}
.bw-social-list-head h2,
.bw-messages-intro h2 {
    margin: 4px 0 0;
    color: #172033;
    font-size: 17px;
    font-weight: 1000;
}
.bw-social-tabs {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 10px;
}
.bw-social-tabs button {
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid #e6eaf0;
    border-radius: 15px;
    background: #fff;
    color: #697386;
    cursor: pointer;
}
.bw-social-tabs button.is-active {
    border-color: #bfd3e8;
    background: #edf5fc;
    color: #336699;
}
.bw-social-tabs span,
.bw-social-tabs b {
    display: block;
}
.bw-social-tabs span {
    font-size: 9px;
    font-weight: 900;
}
.bw-social-tabs b {
    margin-top: 3px;
    font-size: 15px;
    font-weight: 1000;
}
.bw-social-people-list,
.bw-conversation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.bw-social-person-row,
.bw-conversation-row {
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid #e8ecf1;
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #172033;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15,23,42,.04);
    -webkit-tap-highlight-color: transparent;
}
.bw-social-person-row:active,
.bw-conversation-row:active {
    transform: scale(.99);
}
.bw-social-person-avatar,
.bw-conversation-avatar,
.bw-direct-chat-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #eaf2fa;
    color: #336699;
    font-size: 15px;
    font-weight: 1000;
    text-transform: uppercase;
}
.bw-social-person-avatar img,
.bw-conversation-avatar img,
.bw-direct-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bw-social-person-copy,
.bw-conversation-copy {
    flex: 1;
    min-width: 0;
}
.bw-social-person-name,
.bw-conversation-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.bw-social-person-name strong,
.bw-conversation-title strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-social-person-name i,
.bw-conversation-title em {
    color: #c58a00;
    font-size: 10px;
    font-style: normal;
}
.bw-social-person-copy small,
.bw-conversation-copy small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #8d97a6;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-social-person-row > .fa-chevron-right,
.bw-conversation-arrow {
    flex: 0 0 auto;
    color: #b0b8c3;
    font-size: 11px;
}
.bw-social-empty {
    min-height: 170px;
    margin-top: 12px;
    padding: 24px 18px;
    border: 1px dashed #d8dee7;
    border-radius: 19px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #8d97a6;
    text-align: center;
}
.bw-social-empty > i {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf4fb;
    color: #336699;
    font-size: 18px;
}
.bw-social-empty b {
    margin-top: 10px;
    color: #344052;
    font-size: 12px;
    font-weight: 1000;
}
.bw-social-empty span {
    max-width: 320px;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}
.bw-social-empty button {
    min-height: 40px;
    margin-top: 12px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: #336699;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.bw-messages-intro {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bw-messages-intro > span {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf3ff;
    color: #2f72c7;
    font-size: 18px;
}
.bw-messages-intro p {
    margin-top: 4px;
    color: #8993a2;
    font-size: 9px;
    font-weight: 700;
}
.bw-conversation-row.has-unread {
    border-color: #c9daec;
    background: #f8fbff;
}
.bw-conversation-avatar {
    position: relative;
    overflow: visible;
}
.bw-conversation-avatar img {
    border-radius: 14px;
}
.bw-conversation-avatar > i {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #c2c8d0;
}
.bw-conversation-avatar > i.is-online {
    background: #22c55e;
}
.bw-conversation-unread {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #336699;
    color: #fff;
    font-size: 8px;
    font-weight: 1000;
}

.bw-direct-chat-page {
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}
.bw-direct-chat-peer {
    padding: 10px;
}
.bw-direct-chat-peer-main {
    width: 100%;
    border: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #172033;
    text-align: left;
    cursor: pointer;
}
.bw-direct-chat-peer-main > span:last-child {
    flex: 1;
    min-width: 0;
}
.bw-direct-chat-peer-main b,
.bw-direct-chat-peer-main small {
    display: block;
}
.bw-direct-chat-peer-main b {
    overflow: hidden;
    font-size: 12px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-direct-chat-peer-main small {
    margin-top: 3px;
    color: #8993a2;
    font-size: 9px;
    font-weight: 700;
}
.bw-direct-chat-messages {
    flex: 1;
    min-height: 320px;
    max-height: calc(100vh - 250px);
    margin-top: 9px;
    padding: 12px 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.bw-direct-chat-loading,
.bw-direct-chat-empty {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8993a2;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}
.bw-direct-chat-loading i,
.bw-direct-chat-empty > i {
    margin-bottom: 9px;
    color: #336699;
    font-size: 18px;
}
.bw-direct-chat-empty b,
.bw-direct-chat-empty span {
    display: block;
}
.bw-direct-chat-empty b {
    color: #344052;
    font-size: 12px;
    font-weight: 1000;
}
.bw-direct-chat-empty span {
    margin-top: 4px;
    font-size: 9px;
}
.bw-direct-chat-empty.is-error i {
    color: #dc5a5a;
}
.bw-direct-message {
    display: flex;
    margin: 5px 0;
}
.bw-direct-message.is-mine {
    justify-content: flex-end;
}
.bw-direct-message.is-peer {
    justify-content: flex-start;
}
.bw-direct-message-bubble {
    max-width: 82%;
    padding: 9px 11px 7px;
    border-radius: 15px;
    background: #fff;
    color: #273142;
    box-shadow: 0 4px 14px rgba(15,23,42,.06);
    word-break: break-word;
}
.bw-direct-message.is-mine .bw-direct-message-bubble {
    border-bottom-right-radius: 5px;
    background: #336699;
    color: #fff;
}
.bw-direct-message.is-peer .bw-direct-message-bubble {
    border-bottom-left-radius: 5px;
}
.bw-direct-message-bubble span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    user-select: text;
    -webkit-user-select: text;
}
.bw-direct-message-bubble small {
    display: block;
    margin-top: 4px;
    color: #9aa3af;
    font-size: 7px;
    font-weight: 800;
    text-align: right;
}
.bw-direct-message.is-mine .bw-direct-message-bubble small {
    color: rgba(255,255,255,.72);
}
.bw-direct-chat-form {
    position: sticky;
    bottom: 57px;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid #e6eaf0;
    border-radius: 17px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    backdrop-filter: blur(10px);
}
.bw-direct-chat-form textarea {
    flex: 1;
    min-width: 0;
    min-height: 39px;
    max-height: 110px;
    padding: 10px 11px;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: #172033;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    user-select: text;
    -webkit-user-select: text;
}
.bw-direct-chat-form button {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #336699;
    color: #fff;
    cursor: pointer;
}
.bw-direct-chat-form button:disabled {
    opacity: .55;
}

@media (max-width: 480px) {
    .bw-social-profile-bar {
        border-radius: 17px;
    }
    .bw-social-action {
        min-height: 43px;
        font-size: 10px;
    }
    .bw-social-list-head,
    .bw-messages-intro,
    .bw-direct-chat-peer {
        border-radius: 18px;
    }
    .bw-direct-chat-messages {
        max-height: calc(100vh - 235px);
    }
}

.bw-header-message-action {
    position: relative;
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin-right: 7px;
    padding: 0 !important;
    border-radius: 14px !important;
    color: #336699;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(31,72,111,.09);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.bw-header-message-action > i {
    font-size: 17px;
}
.bw-header-message-action:active {
    transform: scale(.96);
}
.bw-header-message-action.has-unread {
    background: #eef6ff;
}
.bw-header-message-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #f5f5f5;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(239,68,68,.28);
}
@media (max-width: 480px) {
    .bw-header-message-action {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 13px !important;
    }
}

/* =========================================================
   DIRECT CHAT — group-chat style + multi-image messages
   ========================================================= */
body.bw-direct-chat-active {
    overflow: hidden;
}

.content.bw-direct-chat-active {
    margin-bottom: 0;
}

.bw-direct-chat-page {
    position: relative;
    min-height: 0;
    height: calc(100vh - 55px);
    height: calc(100dvh - 55px);
    max-height: calc(100vh - 55px);
    max-height: calc(100dvh - 55px);
    padding: 0 12px;
    overflow: hidden;
}

.bw-direct-chat-peer {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #e3e8ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

.bw-direct-chat-peer-main {
    min-height: 66px;
    padding: 10px 12px;
    gap: 11px;
}

.bw-direct-chat-peer-copy {
    flex: 1;
    min-width: 0;
}

.bw-direct-chat-peer-main .bw-direct-chat-peer-copy > small {
    display: block;
    margin: 0;
    color: #336699;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .02em;
}

.bw-direct-chat-peer-main .bw-direct-chat-peer-copy > b {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #182230;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-direct-chat-peer-main .bw-direct-chat-peer-copy > em {
    position: relative;
    display: block;
    margin-top: 3px;
    padding-left: 10px;
    color: #8490a0;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.bw-direct-chat-peer-main .bw-direct-chat-peer-copy > em::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c3cad3;
    transform: translateY(-50%);
}

.bw-direct-chat-peer-main .bw-direct-chat-peer-copy > em.is-online::before {
    background: #22c55e;
}

.bw-direct-chat-peer-arrow {
    flex: 0 0 auto;
    color: #9aa5b3;
    font-size: 11px;
}

.bw-direct-chat-messages {
    flex: 1;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 14px 4px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.bw-direct-chat-loading,
.bw-direct-chat-empty {
    min-height: 100%;
}

.bw-direct-message {
    display: flex;
    align-items: flex-end;
    margin-bottom: 9px;
}

.bw-direct-message.is-peer {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 7px;
    justify-content: start;
}

.bw-direct-message.is-mine {
    justify-content: flex-end;
}

.bw-direct-message-avatar {
    grid-column: 1;
    align-self: end;
    width: 32px;
    height: 32px;
    min-width: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5ef;
    border-radius: 50%;
    background: #eaf1f8;
    color: #336699;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    user-select: none;
}

.bw-direct-message-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bw-direct-message-bubble {
    max-width: 84%;
    padding: 9px 10px 6px;
    border: 1px solid #e3e8ef;
    border-radius: 15px 15px 15px 5px;
    background: #fff;
    color: #182230;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
    word-break: break-word;
}

.bw-direct-message.is-peer .bw-direct-message-bubble {
    grid-column: 2;
    justify-self: start;
}

.bw-direct-message.is-mine .bw-direct-message-bubble {
    border-color: #336699;
    border-radius: 15px 15px 5px 15px;
    background: #336699;
    color: #fff;
}

.bw-direct-message-bubble > p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.42;
    user-select: text;
    -webkit-user-select: text;
}

.bw-direct-message-bubble > time {
    display: block;
    margin-top: 3px;
    color: #98a2b3;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
}

.bw-direct-message.is-mine .bw-direct-message-bubble > time {
    color: rgba(255, 255, 255, .72);
}

.bw-direct-message-bubble.has-image {
    position: relative;
    width: fit-content;
    max-width: min(92%, 340px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.bw-direct-message.is-mine .bw-direct-message-bubble.has-image {
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.bw-direct-message-bubble.has-image > p {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 6px;
    padding: 8px 10px;
    border: 1px solid #e3e8ef;
    border-radius: 13px 13px 13px 5px;
    background: #fff;
    color: #182230;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
}

.bw-direct-message.is-mine .bw-direct-message-bubble.has-image > p {
    margin-left: auto;
    border-color: #336699;
    border-radius: 13px 13px 5px 13px;
    background: #336699;
    color: #fff;
}

.bw-direct-message-bubble.has-image > .bw-direct-media-grid {
    margin: 0;
}

.bw-direct-message-bubble.has-image > time {
    position: absolute;
    right: 7px;
    bottom: 6px;
    z-index: 2;
    margin: 0;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .58);
    color: #fff !important;
    font-size: 8px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bw-direct-chat-form {
    position: relative;
    bottom: auto;
    z-index: 20;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin: 0 -12px;
    padding: 9px 12px 8px;
    border: 0;
    border-top: 1px solid #e2e7ee;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, .04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.bw-direct-chat-compose-row {
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.bw-direct-chat-form textarea {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    max-height: 120px;
    padding: 11px 13px;
    border: 1px solid #dfe5ec;
    border-radius: 15px;
    outline: 0;
    resize: none;
    background: #f7f9fb;
    color: #182230;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.35;
    user-select: text;
    -webkit-user-select: text;
}

.bw-direct-chat-form .bw-direct-chat-compose-row > button {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bw-direct-chat-form .bw-direct-image-pick {
    background: #eef5fb;
    color: #336699;
    font-size: 16px;
}

.bw-direct-chat-form .bw-direct-chat-send {
    background: #336699;
    color: #fff;
}

.bw-direct-chat-form .bw-direct-chat-compose-row > button:active {
    transform: scale(.96);
}

.bw-direct-chat-form .bw-direct-chat-compose-row > button:disabled {
    opacity: .55;
}

.bw-direct-image-preview {
    width: min(100%, 300px) !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bw-direct-image-preview:not([hidden]) {
    display: block !important;
}

/* The generic old DM button rule must not restyle crop editor controls. */
.bw-direct-chat-form .bw-avatar-crop-icon-button,
.bw-direct-chat-form .bw-avatar-crop-save {
    height: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
}

.bw-direct-chat-form .bw-avatar-crop-icon-button {
    width: 44px;
    min-width: 44px;
    border-radius: 13px;
    font-size: 19px;
}

.bw-direct-chat-form .bw-avatar-crop-save {
    width: auto;
    min-width: 0;
    border-radius: 0;
    color: #1f6feb;
    font-size: 14px;
    font-weight: 900;
}

/* Poll is intentionally removed from study groups. */
#bwGroupPollOpen,
#bwGroupPollModal,
.bw-group-poll-message {
    display: none !important;
}

@media (max-width: 480px) {
    .bw-direct-chat-page {
        height: calc(100vh - 55px);
        height: calc(100dvh - 55px);
        max-height: calc(100vh - 55px);
        max-height: calc(100dvh - 55px);
        padding-left: 12px;
        padding-right: 12px;
    }

    .bw-direct-message-bubble {
        max-width: 88%;
    }

}

/* Direct-message image preview remove button: override legacy generic DM button styles. */
.bw-direct-chat-form .bw-media-preview-item > button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .78) !important;
    color: #fff !important;
    font-size: 10px;
    line-height: 1;
    box-shadow: none !important;
    z-index: 2;
}


/* =========================================================
   UNIFIED MESSAGES HUB — personal + study group chats
   ========================================================= */
.bw-messages-hub {
    width: 100%;
    padding-top: 4px;
    padding-bottom: 24px;
}
.bw-messages-hub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px 10px;
}
.bw-messages-hub-head > div { min-width: 0; }
.bw-messages-hub-head h3 {
    margin: 0;
    color: #172033;
    font-size: 19px;
    font-weight: 1000;
    letter-spacing: -.02em;
}
.bw-messages-hub-head p {
    margin-top: 3px;
    color: #8993a2;
    font-size: 10px;
    font-weight: 700;
}
.bw-messages-hub-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}
.bw-messages-hub-actions button {
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid #e1e7ee;
    border-radius: 12px;
    background: #fff;
    color: #336699;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}
.bw-messages-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 2px 0 10px;
    padding: 4px;
    border-radius: 14px;
    background: #e9edf2;
}
.bw-messages-filter {
    min-width: 0;
    min-height: 37px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #6f7b8a;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.bw-messages-filter.is-active {
    background: #fff;
    color: #233b55;
    box-shadow: 0 2px 8px rgba(15,23,42,.07);
}
.bw-messages-conversations {
    width: 100%;
}
.bw-chat-stream {
    overflow: hidden;
    border: 1px solid #e7ebf0;
    border-radius: 18px;
    background: #fff;
}
.bw-chat-stream-row {
    position: relative;
    width: 100%;
    min-height: 70px;
    padding: 9px 11px;
    border: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    color: #172033;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bw-chat-stream-row + .bw-chat-stream-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 70px;
    right: 0;
    height: 1px;
    background: #edf0f3;
}
.bw-chat-stream-row:active { background: #f5f7f9; }
.bw-chat-stream-row.has-unread { background: #f8fbff; }
.bw-chat-stream-avatar {
    position: relative;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf1f8;
    color: #336699;
    font-size: 17px;
    font-weight: 1000;
}
.bw-chat-stream-avatar.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bw-chat-stream-avatar > i { font-size: 18px; }
.bw-chat-stream-copy {
    flex: 1;
    min-width: 0;
}
.bw-chat-stream-top,
.bw-chat-stream-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.bw-chat-stream-top strong {
    min-width: 0;
    overflow: hidden;
    color: #172033;
    font-size: 12px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-chat-name-line {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bw-chat-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-chat-online-text {
    flex: 0 0 auto;
    color: #22a95b;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}
.bw-chat-stream-top time {
    flex: 0 0 auto;
    color: #9aa3af;
    font-size: 8px;
    font-weight: 800;
}
.bw-chat-stream-bottom { margin-top: 4px; }
.bw-chat-stream-preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #7c8796;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-chat-stream-preview b {
    color: #526173;
    font-weight: 900;
}
.bw-chat-unread {
    flex: 0 0 auto;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #336699;
    color: #fff;
    font-size: 8px;
    font-weight: 1000;
}
.bw-chat-kind {
    flex: 0 0 auto;
    color: #a1a9b4;
    font-size: 9px;
}
.bw-chat-stream-empty {
    padding: 28px 16px;
    color: #8993a2;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}
.bw-hub-personal-tools,
.bw-hub-group-tools {
    margin-top: 12px;
}
.bw-hub-tools-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0 2px;
}
.bw-hub-tools-title h4 {
    color: #243244;
    font-size: 12px;
    font-weight: 1000;
}
.bw-hub-tools-title p {
    margin-top: 2px;
    color: #929ba8;
    font-size: 9px;
    font-weight: 700;
}
.bw-hub-group-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.bw-hub-group-actions button {
    min-height: 42px;
    border: 0;
    border-radius: 13px;
    background: #fff;
    color: #336699;
    box-shadow: 0 3px 12px rgba(15,23,42,.06);
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}
.bw-hub-group-actions button:first-child { background: #336699; color: #fff; }
.bw-hub-personal-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    background: #f5f8fb;
    color: #687789;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
}
.bw-hub-personal-note i { margin-top: 2px; color: #336699; }
.bw-dm-access-notice {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 8px 0 6px;
    padding: 10px 11px;
    border: 1px solid #e2e8ef;
    border-radius: 14px;
    background: #f7f9fb;
    color: #657386;
}
.bw-dm-access-notice > i {
    flex: 0 0 auto;
    color: #7e8a98;
}
.bw-dm-access-notice > div {
    flex: 1;
    min-width: 0;
}
.bw-dm-access-notice b,
.bw-dm-access-notice span { display: block; }
.bw-dm-access-notice b { color: #344052; font-size: 10px; font-weight: 1000; }
.bw-dm-access-notice span { margin-top: 2px; font-size: 8px; font-weight: 700; line-height: 1.4; }
.bw-dm-access-notice button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: #336699;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}
.bw-direct-chat-form.is-locked { opacity: .72; }

@media (max-width: 480px) {
    .bw-messages-hub-head h3 { font-size: 17px; }
    .bw-messages-hub-head p { font-size: 9px; }
    .bw-chat-stream-row { min-height: 68px; padding: 9px 10px; }
    .bw-chat-stream-avatar { width: 48px; height: 48px; flex-basis: 48px; }
    .bw-chat-stream-row + .bw-chat-stream-row::before { left: 67px; }
    .bw-hub-group-actions { grid-template-columns: 1fr; }
    .bw-dm-access-notice { align-items: flex-start; }
}

/* =========================================================
 * Q&A detail — keyboard-aware answer composer
 * Тек жеке qa-ans беті. Inline thread және басқа беттер өзгермейді.
 * ========================================================= */
body.bw-qa-keyboard-open nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.bw-qa-keyboard-open .qa-ans-cnt > .container {
    padding-bottom: calc(var(--bw-qa-composer-height, 58px) + 8px);
}

body.bw-qa-keyboard-open
.qa-ans-cnt
.qa-add-ans.bw-qa-image-scope {
    position: fixed;
    left: 50%;
    bottom: var(--bw-qa-keyboard-offset, 0px);
    width: min(600px, 100%);
    max-width: 600px;
    margin: 0;
    padding: 8px 10px;
    transform: translateX(-50%);
    border-top: 1px solid #e6ebf0;
    border-bottom: 0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .06);
    z-index: 1000;
}

/* Inline жауаптар бұрынғы relative режимінде қалады. */
body.bw-qa-keyboard-open
.qa-inline-thread
.qa-add-ans.bw-qa-image-scope {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 6px 0 0;
    padding: 6px;
    transform: none;
    box-shadow: none;
    z-index: 1;
}


/* =========================================================
 * CHAT — keyboard-aware viewport
 * Group chat + direct chat.
 * Composer flow ішінде қалады; keyboard биіктігіне fixed болып көтерілмейді.
 * ========================================================= */
body.bw-chat-keyboard-open nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*
 * visualViewport төменгі координатасына дейін ғана чат көрсетіледі.
 * .content жоғарғы жағында 55px header offset бар, сондықтан оны шегереміз.
 */
body.bw-chat-keyboard-open .bw-group-chat-page,
body.bw-chat-keyboard-open .bw-direct-chat-page {
    height: calc(var(--bw-chat-viewport-bottom, 100vh) - 55px);
    max-height: calc(var(--bw-chat-viewport-bottom, 100vh) - 55px);
}

/* Message area ғана қысқарады және scroll болады. */
body.bw-chat-keyboard-open .bw-group-messages,
body.bw-chat-keyboard-open .bw-direct-chat-messages {
    min-height: 0;
    padding-bottom: 12px;
}

/* Group composer — flex flow ішінде. */
body.bw-chat-keyboard-open
.bw-group-chat-page
#bwGroupMessageForm {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0 -14px;
    transform: none;
    border-top: 1px solid #e2e7ee;
    background: #fff;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, .04);
    z-index: 20;
}

/* Direct composer — flex flow ішінде. */
body.bw-chat-keyboard-open
.bw-direct-chat-page
#bwDirectChatForm {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0 -12px;
    transform: none;
    border-top: 1px solid #e2e7ee;
    background: #fff;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, .04);
    z-index: 20;
}

@media (max-width: 480px) {
    body.bw-chat-keyboard-open
    .bw-group-chat-page
    #bwGroupMessageForm {
        margin-left: -12px;
        margin-right: -12px;
    }
}