:root {
    --mblg-bg: #050505;
    --mblg-card: #0D1016;
    --mblg-card-2: #10141C;
    --mblg-accent: #FF3B3B;
    --mblg-text: #E5E7EB;
    --mblg-muted: rgba(229, 231, 235, .58);
    --mblg-border: rgba(255, 255, 255, .06);
    --mblg-border-strong: rgba(255, 59, 59, .32);
}

.mblg-admin-wrap {
    padding-right: 20px;
}

@media screen and (max-width: 782px) {
    .mblg-admin-wrap {
        padding-right: 10px;
    }
}

.mblg-ut-root {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 28px;
    margin: -20px 0 46px;
    word-wrap: break-word;
    color: var(--mblg-text);
    background:
        radial-gradient(circle at 94% 0%, rgba(255, 59, 59, .24), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
        var(--mblg-card);
    border: 1px solid var(--mblg-border);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04);
    overflow: visible;
}

.mblg-ut-root::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 59, 59, .08), inset 0 1px 32px rgba(255, 59, 59, .04);
}

.mblg-ut-header {
    position: relative;
    padding: 0 0 18px;
    margin-bottom: 0;
    background: transparent;
    border-bottom: 0;
}

.mblg-ut-title {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.mblg-ut-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 1px;
}

.mblg-ut-table {
    position: relative;
    width: 100%;
    color: var(--mblg-text);
    background: rgba(5, 5, 5, .36);
    border: 1px solid var(--mblg-border);
    border-radius: 12px;
    overflow: hidden;
    font-size: 15px;
}

.mblg-ut-table_row {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 100px 170px;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--mblg-border);
    background: rgba(255, 255, 255, .012);
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.mblg-ut-table_row:last-child {
    border-bottom: 0;
}

.mblg-ut-table_row[data-purchase-url] {
    cursor: pointer;
}

.mblg-ut-table_row[data-purchase-url] > div,
.mblg-ut-table_row[data-purchase-url] .mblg-ut-task_title,
.mblg-ut-table_row[data-purchase-url] .mblg-ut-task_desc,
.mblg-ut-table_row[data-purchase-url] .mblg-ut-task_mb_title {
    cursor: pointer;
}

.mblg-ut-table_row:not(.mblg-ut-table_h):hover {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 59, 59, .18);
    box-shadow: inset 3px 0 0 rgba(255, 59, 59, .75), 0 14px 40px rgba(0, 0, 0, .22);
    transform: translateY(-1px);
}

.mblg-ut-table_row:not(.mblg-ut-table_h):hover .mblg-ut-task_title,
.mblg-ut-table_row:not(.mblg-ut-table_h):hover .mblg-ut-task_desc,
.mblg-ut-table_row:not(.mblg-ut-table_h):hover .mblg-ut-task_mb_title,
.mblg-ut-table_row:not(.mblg-ut-table_h):hover .mblg-ut-task_points,
.mblg-ut-table_row:not(.mblg-ut-table_h):hover .task_progress {
    color: #ff3b3b;
}

.mblg-ut-table_h {
    min-height: 56px;
    color: rgba(229, 231, 235, .68);
    font-size: 13px;
    font-weight: 700;
    background: rgba(255, 255, 255, .025) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mblg-ut-table_row > div {
    position: relative;
    min-width: 0;
    padding: 18px 18px;
    box-sizing: border-box;
}

.mblg-ut-table_row > div:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, .035);
}

.mblg-ut-table_h > div {
    padding-top: 0;
    padding-bottom: 0;
}

.mblg-ut-task_num {
    color: rgba(229, 231, 235, .86);
    font-weight: 800;
    text-align: center;
}

.task_name_text {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
    padding-right: 34px;
}

.mblg-ut-task_preview,
.mblg-ut-task_preview_mb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 59, 59, .28);
    border-radius: 12px;
    background: radial-gradient(circle at 50% 35%, rgba(255, 59, 59, .24), rgba(255, 59, 59, .06) 48%, rgba(255, 255, 255, .025));
    box-shadow: inset 0 0 18px rgba(255, 59, 59, .08), 0 0 22px rgba(255, 59, 59, .06);
}

.mblg-ut-task_preview {
    display: none;
}

.mblg-ut-task_preview_mb img,
.mblg-ut-task_preview img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 59, 59, .35));
}

.mblg-ut-task_copy {
    min-width: 0;
}

.mblg-ut-task_title {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

.mblg-ut-task_desc {
    margin-top: 4px;
    color: var(--mblg-muted);
    font-size: 13px;
    line-height: 1.45;
}

.mblg-ut-task_num_mb,
.mblg-ut-task_mb_title,
.mblg-progress_text {
    display: none;
}

.mblg-ut-task_points {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}

.mblg-ut-points-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mblg-accent);
    border: 1px solid rgba(255, 59, 59, .34);
    border-radius: 999px;
    background: rgba(255, 59, 59, .08);
    box-shadow: 0 0 18px rgba(255, 59, 59, .12);
}

.task_progress {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mblg-progress-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.mblg-progress {
    display: inline-block;
    height: 8px;
    width: 100%;
    border-radius: 999px;
    line-height: 1;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.mblg-progress-bar {
    height: 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 20px;
    transition: width .6s ease;
    background: linear-gradient(90deg, #FF3B3B, #FF6A3B);
    box-shadow: 0 0 18px rgba(255, 59, 59, .32);
}

.mblg-progress-count {
    display: inline-block;
    flex: 0 0 auto;
    min-width: 42px;
    padding-left: 0;
    color: rgba(229, 231, 235, .72);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: right;
}

.mblg-completed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #37D68A;
    font-size: 13px;
    font-weight: 800;
}

.mblg-completed-icon {
    margin-right: 0;
    color: #37D68A;
    filter: drop-shadow(0 0 10px rgba(55, 214, 138, .22));
}

.mblg-ut-share_cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

button.mblg-task-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    min-width: 142px;
    margin: 0;
    padding: 11px 18px;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(255, 59, 59, .92), rgba(130, 13, 13, .92)) !important;
    border: 1px solid rgba(255, 59, 59, .42) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 24px rgba(255, 59, 59, .16), inset 0 1px 0 rgba(255, 255, 255, .12);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none !important;
    text-transform: none;
    letter-spacing: 0;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

button.mblg-task-share:hover,
button.mblg-task-share:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, #FF3B3B, #8E1111) !important;
    border-color: rgba(255, 118, 118, .7) !important;
    box-shadow: 0 0 34px rgba(255, 59, 59, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
    filter: saturate(1.05);
    outline: none;
    transform: translateY(-1px);
}

button.mblg-task-share:active {
    transform: translateY(0);
}

button.mblg-task-share-disabled,
button.mblg-task-share:disabled {
    opacity: .42 !important;
    cursor: not-allowed !important;
    filter: grayscale(.25);
    box-shadow: none;
}

.mblg-ut-tooltip-ui {
    z-index: 9999;
    max-width: 320px;
    padding: 12px 14px;
    color: var(--mblg-text);
    background: rgba(13, 16, 22, .96) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 59, 59, .08);
    font-size: 13px !important;
    line-height: 1.45;
}

.mblg-ut-tooltip {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(229, 231, 235, .46);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    transform: translateY(-50%);
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.mblg-ut-tooltip:hover {
    cursor: help;
    color: var(--mblg-accent);
    border-color: rgba(255, 59, 59, .28);
    background: rgba(255, 59, 59, .08);
}

.mblg-ut-tooltip.mblg-ut-tooltip-tb {
    display: none;
}

.mblg-ut-tooltip-ui:after {
    content: '';
    display: block;
    pointer-events: none;
    position: absolute;
    height: 0;
    width: 0;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(13, 16, 22, .96);
    border-left: 6px solid transparent;
    right: 34px;
    bottom: -6px;
}

.mblg-ut-tooltip-content {
    font-size: 13px;
    line-height: 1.45;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media (max-width: 991px) {
    .mblg-ut-root {
        padding: 20px;
        border-radius: 16px;
    }

    .mblg-ut-table {
        display: grid;
        gap: 14px;
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .mblg-ut-table_h {
        display: none !important;
    }

    .mblg-ut-table_row {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 0;
        padding: 16px;
        border: 1px solid var(--mblg-border);
        border-radius: 14px;
        background: rgba(255, 255, 255, .025);
        overflow: hidden;
    }

    .mblg-ut-table_row > div,
    .mblg-ut-table_h > div {
        padding: 8px 0;
        border-left: 0 !important;
    }

    .mblg-ut-task_num {
        grid-row: 1 / 5;
        align-self: start;
        padding-top: 14px !important;
        text-align: left;
    }

    .task_name,
    .mblg-ut-task_points,
    .task_progress {
        grid-column: 1;
    }

    .task_name_text {
        gap: 12px;
        padding-right: 0;
    }

    .mblg-ut-tooltip {
        top: 19px;
        right: 0;
        transform: none;
    }

    .mblg-ut-task_points {
        justify-content: flex-start;
        margin-top: 8px;
    }

    .task_progress {
        justify-content: flex-start;
    }

    .mblg-ut-share_cell {
        justify-content: flex-start;
        padding-top: 12px !important;
    }

    button.mblg-task-share {
        width: 100%;
        min-width: 0;
    }

    .mblg-ut-table_row.mblg-ut-table_h {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .mblg-ut-root {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        margin-left: 50%;
        margin-top: -21px;
        transform: translateX(-50%);
        padding: 14px;
        border-radius: 14px;
    }

    .mblg-ut-title {
        font-size: 22px;
    }

    .mblg-ut-table_row {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 14px;
    }

    .mblg-ut-task_preview_mb {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .mblg-ut-task_title {
        font-size: 14px;
    }

    .mblg-ut-task_desc {
        font-size: 12px;
    }
}


/* TVASHTAR 2026-06-17: compact activity level progress for task-list */
.mblg-ut-activity-progress {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(220px, 1fr);
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 14px 16px;
    color: var(--mblg-text);
    background: rgba(5, 5, 5, .34);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
}

.mblg-ut-activity-progress__meta {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.mblg-ut-activity-progress__label {
    color: var(--mblg-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.mblg-ut-activity-progress__meta strong {
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.15;
}

.mblg-ut-activity-progress__meta small {
    color: var(--mblg-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.mblg-ut-activity-progress__track {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mblg-ut-activity-progress__bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    overflow: hidden;
}

.mblg-ut-activity-progress__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #FF3B3B, #FF6A3B);
    box-shadow: 0 0 18px rgba(255, 59, 59, .30);
}

.mblg-ut-activity-progress__numbers {
    color: rgba(229, 231, 235, .74);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .mblg-ut-activity-progress {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
        padding: 13px;
    }

    .mblg-ut-activity-progress__track {
        grid-template-columns: 1fr auto;
    }
}


/* TVASHTAR 2026-06-17: activity progress help modal */
.mblg-ut-activity-progress__title-row { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.mblg-ut-activity-help { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border-radius:999px; border:1px solid rgba(255,59,59,.52); background:rgba(255,59,59,.10); color:#FF6A3B; font-size:13px; font-weight:900; line-height:1; cursor:pointer; }
.mblg-ut-activity-help:hover,.mblg-ut-activity-help:focus-visible { background:#FF3B3B; color:#fff; outline:none; }
.mblg-ut-activity-modal[hidden] { display:none; }
.mblg-ut-activity-modal { position:fixed; inset:0; z-index:2147483647; display:grid; place-items:center; padding:22px; }
.mblg-ut-activity-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(3px); }
.mblg-ut-activity-modal__panel { position:relative; width:min(720px,100%); max-height:min(82vh,720px); overflow:auto; padding:24px; color:#E5E7EB; background:linear-gradient(180deg,rgba(18,18,24,.98),rgba(5,5,5,.98)); border:1px solid rgba(255,59,59,.24); border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 34px rgba(255,59,59,.13); }
.mblg-ut-activity-modal__close { position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.mblg-ut-activity-modal h2 { margin:0 42px 10px 0; color:#fff; font-size:24px; font-weight:900; line-height:1.2; }
.mblg-ut-activity-modal p { margin:0 0 16px; color:rgba(229,231,235,.76); font-size:15px; line-height:1.55; }
.mblg-ut-activity-levels { overflow-x:auto; }
.mblg-ut-activity-levels table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:14px; }
.mblg-ut-activity-levels th,.mblg-ut-activity-levels td { padding:11px 13px; border-bottom:1px solid rgba(255,255,255,.07); text-align:left; vertical-align:top; }
.mblg-ut-activity-levels th { color:#FF6A3B; background:rgba(255,59,59,.08); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.mblg-ut-activity-levels td { color:#E5E7EB; font-size:14px; font-weight:700; }
.mblg-ut-activity-levels tr:last-child td { border-bottom:0; }
.mblg-ut-activity-levels tr:last-child td:last-child { color:#FF6A3B; }
html.mblg-ut-modal-open { overflow:hidden; }
@media (max-width:767px) { .mblg-ut-activity-modal { padding:14px; } .mblg-ut-activity-modal__panel { padding:20px 14px 16px; } .mblg-ut-activity-modal h2 { font-size:20px; } .mblg-ut-activity-levels th,.mblg-ut-activity-levels td { padding:9px 8px; font-size:12px; } }