/* ============================================================
   TotalCall — Top N "Arkusz" (sheet) workspace.
   Self-contained, namespaced under .topn-workspace.
   Design tokens map onto the app theme vars so light + dark
   both work. All classes are topn- prefixed and must not leak
   into the global stylesheet.
   ============================================================ */

.topn-workspace {
    --prediction-action-bar-offset: calc(var(--app-mobile-nav-height) - 1px);
    --prediction-bottom-bar-space: calc(var(--app-mobile-nav-height) + 5.4rem);

    /* design palette mapped to app theme tokens */
    --tn-bg: var(--bg-page);
    --tn-panel: var(--bg-surface);
    --tn-panel-2: var(--bg-surface-muted);
    --tn-card: var(--bg-surface-strong);
    --tn-card-hi: color-mix(in srgb, var(--bg-surface-strong) 86%, var(--text-primary) 14%);
    --tn-bd: var(--border-strong);
    --tn-bd-soft: var(--border);
    --tn-txt: var(--text-primary);
    --tn-txt-2: var(--text-secondary);
    --tn-txt-3: var(--text-muted);
    --tn-red: var(--accent);
    --tn-red-bright: var(--accent-strong);
    --tn-red-dim: color-mix(in srgb, var(--accent) 12%, transparent);
    --tn-red-bd: color-mix(in srgb, var(--accent) 34%, transparent);
    --tn-green: var(--success);
    --tn-green-bg: color-mix(in srgb, var(--success) 13%, transparent);
    --tn-green-bd: color-mix(in srgb, var(--success) 34%, transparent);
    --tn-amber: var(--warning);
    --tn-amber-bg: color-mix(in srgb, var(--warning) 13%, transparent);
    --tn-amber-bd: color-mix(in srgb, var(--warning) 32%, transparent);
    --tn-r: 14px;
    --tn-r-sm: 10px;
    --tn-shadow: 0 40px 80px -28px rgb(2 7 13 / 0.7);
    --tn-sheet-gap: 8px;
    --tn-sheet-r: 20px;

    position: relative;
    min-width: 0;
    color: var(--tn-txt);
    padding-bottom: var(--prediction-bottom-bar-space);
    font-variant-numeric: tabular-nums;
}

.topn-desktop {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.topn-mobile {
    display: none;
    flex-direction: column;
    min-width: 0;
}

@media (min-width: 1024px) {
    .app-shell:has(.topn-workspace) {
        height: 100dvh;
        overflow: hidden;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .app-shell:has(.topn-workspace) .app-shell__main {
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .app-shell__content:has(.topn-workspace) {
        height: 100%;
        min-height: 0;
        padding-bottom: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .app-shell__content:has(.topn-workspace) .app-shell__meta {
        margin-top: 0.25rem;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .app-shell__article:has(.topn-workspace) {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }

    .topn-workspace {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
    }

    .topn-desktop {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 7.25rem;
    }

    .topn-workspace__body {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .topn-sheet {
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .topn-sheet__body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--tn-bd) 72%, var(--tn-txt-3)) transparent;
    }

    .topn-sheet__body::-webkit-scrollbar {
        width: 9px;
    }

    .topn-sheet__body::-webkit-scrollbar-track {
        background: transparent;
    }

    .topn-sheet__body::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--tn-bd) 72%, var(--tn-txt-3));
        background-clip: padding-box;
        border: 2px solid transparent;
        border-radius: 999px;
    }

    .topn-sheet__body::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--tn-red) 42%, var(--tn-bd));
        background-clip: padding-box;
    }
}

.topn-workspace input,
.topn-workspace button,
.topn-workspace select {
    font-family: inherit;
}

/* ---------------------------------------------------------------
   Header band: breadcrumb + module switcher + title + progress
   --------------------------------------------------------------- */
.topn-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 2px 0;
}

.topn-header__bc {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tn-txt-3);
}

.topn-header__bc strong {
    color: var(--tn-txt);
}

.topn-header__bc-sep {
    color: var(--tn-txt-3);
    flex: none;
}

.topn-modswitch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--tn-txt);
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.topn-modswitch:hover:not(:disabled) {
    background: var(--tn-card-hi);
}

.topn-modswitch:disabled {
    cursor: default;
}

.topn-modswitch__icon {
    color: var(--tn-red-bright);
}

.topn-modswitch__chevron {
    color: var(--tn-txt-3);
    transform: rotate(90deg);
}

.topn-header__title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}

.topn-header__status {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 20px;
    border: 1px solid transparent;
}

.topn-header__status--prog {
    color: var(--tn-amber);
    background: var(--tn-amber-bg);
    border-color: var(--tn-amber-bd);
}

.topn-header__status--done {
    color: var(--tn-green);
    background: var(--tn-green-bg);
    border-color: var(--tn-green-bd);
}

.topn-header__status--todo {
    color: var(--tn-txt-3);
    background: var(--tn-panel-2);
    border-color: var(--tn-bd-soft);
}

.topn-header__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.topn-header__progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topn-header__progress-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--tn-txt-3);
}

.topn-header__progress-track {
    width: 120px;
    height: 6px;
    border-radius: 20px;
    background: var(--tn-panel-2);
    overflow: hidden;
}

.topn-header__progress-track i {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--tn-green), color-mix(in srgb, var(--tn-green) 60%, #5eead4));
}

.topn-header__progress strong {
    font-size: 12px;
    font-weight: 800;
    color: var(--tn-txt);
}

.topn-header__lock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tn-amber);
}

.topn-header__lock strong {
    color: var(--tn-txt);
}

.topn-header__lock-distance {
    color: var(--tn-amber);
}

/* ---------------------------------------------------------------
   Category tab strip (primary switcher)
   --------------------------------------------------------------- */
.topn-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
}

.topn-strip__edge {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--tn-bd);
    background: var(--tn-panel-2);
    color: var(--tn-txt-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: none;
}

.topn-strip__edge:hover {
    background: var(--tn-card-hi);
    color: var(--tn-txt);
}

.topn-strip__edge-icon--prev {
    transform: rotate(180deg);
}

.topn-strip__scroll {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.topn-strip__scroll::-webkit-scrollbar {
    display: none;
}

.topn-strip__group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topn-strip__group-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--tn-txt-3);
    text-transform: uppercase;
    padding: 5px 8px;
    border-radius: 7px;
    background: var(--tn-panel-2);
    white-space: nowrap;
}

.topn-strip__divider {
    width: 1px;
    height: 26px;
    background: var(--tn-bd-soft);
    flex: none;
}

.topn-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 9px;
    border-radius: 10px;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd-soft);
    font-size: 13px;
    font-weight: 800;
    color: var(--tn-txt-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.topn-cat:hover {
    background: var(--tn-card-hi);
    color: var(--tn-txt);
}

.topn-cat__badge {
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 800;
}

.topn-cat__check {
    display: block;
}

.topn-cat--todo .topn-cat__badge {
    width: 7px;
    min-width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tn-bd-soft);
}

.topn-cat--prog {
    border-color: var(--tn-amber-bd);
    color: var(--tn-txt);
}

.topn-cat--prog .topn-cat__badge {
    background: var(--tn-amber-bg);
    color: var(--tn-amber);
    padding: 0 4px;
}

.topn-cat--done {
    border-color: var(--tn-green-bd);
    color: var(--tn-txt);
}

.topn-cat--done .topn-cat__badge {
    background: var(--tn-green-bg);
    color: var(--tn-green);
}

.topn-cat--active {
    background: linear-gradient(135deg, var(--tn-red-bright), var(--tn-red));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--tn-red) 70%, transparent);
}

.topn-cat--active .topn-cat__badge {
    background: rgb(255 255 255 / 0.22);
    color: #fff;
    padding: 0 4px;
}

.topn-strip__jump {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tn-txt-2);
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    border-radius: 10px;
    padding: 8px 13px;
    cursor: pointer;
    flex: none;
}

.topn-strip__jump:hover {
    background: var(--tn-card-hi);
    color: var(--tn-txt);
}

.topn-strip__jump kbd {
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    background: var(--tn-card);
    border: 1px solid var(--tn-bd);
    border-radius: 5px;
    padding: 2px 6px;
    color: var(--tn-txt-3);
}

/* ---------------------------------------------------------------
   Body: hint + mode bar
   --------------------------------------------------------------- */
.topn-workspace__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ---------------------------------------------------------------
   The sheet table
   --------------------------------------------------------------- */
.topn-source-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tn-green);
    box-shadow: 0 0 0 3px var(--tn-green-bg);
}

.topn-sheet {
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd-soft);
    border-radius: 15px;
    overflow: visible;
}

.topn-sheet__head {
    display: grid;
    grid-template-columns: 82px 2.1fr 1fr 1fr 1fr 1.1fr 1fr 116px;
    padding: 0 8px;
    border-bottom: 1px solid var(--tn-bd);
    background: color-mix(in srgb, var(--tn-bg) 40%, transparent);
}

.topn-sheet__th {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: var(--tn-txt-3);
    text-transform: uppercase;
    padding: 13px 12px;
}

.topn-sheet__th--num {
    text-align: center;
}

.topn-rowgroup {
    border-bottom: 1px solid var(--tn-bd-soft);
}

.topn-rowgroup:last-child {
    border-bottom: 0;
}

.topn-rowgroup {
    animation: topn-row-enter 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: opacity 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.topn-rowgroup--tail {
    opacity: 0.76;
}

.topn-rowgroup--authored {
    background: color-mix(in srgb, var(--tn-green) 4%, transparent);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tn-green) 72%, transparent);
}

.topn-rowgroup--popover-open {
    position: relative;
    z-index: 35;
}

.topn-row {
    display: grid;
    grid-template-columns: 82px 2.1fr 1fr 1fr 1fr 1.1fr 1fr 116px;
    align-items: center;
    padding: 0 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tn-bd-soft);
}

.topn-rowgroup .topn-row {
    border-bottom: 0;
}

.topn-row:last-child {
    border-bottom: 0;
}

.topn-row--lead {
    background: linear-gradient(90deg, color-mix(in srgb, var(--tn-red) 6%, transparent), transparent 60%);
}

.topn-rowgroup--context,
.topn-row--context {
    background: color-mix(in srgb, var(--tn-red) 5%, transparent);
    box-shadow: inset 3px 0 0 var(--tn-red-bright);
}

.topn-cell {
    padding: 13px 12px;
    min-width: 0;
}

.topn-cell--num {
    display: flex;
    justify-content: center;
}

.topn-row__rank {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12px;
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    color: var(--tn-txt-2);
}

.topn-row--lead .topn-row__rank {
    background: var(--tn-red-dim);
    border-color: var(--tn-red-bd);
    color: var(--tn-red-bright);
}

.topn-row__rank--p1 {
    color: #f5c451;
    border-color: color-mix(in srgb, #f5c451 44%, var(--tn-bd));
}

.topn-row__rank--p2 {
    color: #b8c2cf;
    border-color: color-mix(in srgb, #b8c2cf 44%, var(--tn-bd));
}

.topn-row__rank--p3 {
    color: #c98a5b;
    border-color: color-mix(in srgb, #c98a5b 44%, var(--tn-bd));
}

/* drag handle + reorder states */
.topn-pos {
    display: flex;
    align-items: center;
    gap: 5px;
}

.topn-compare-pick {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    border: 1.5px solid color-mix(in srgb, var(--score) 42%, var(--tn-bd));
    border-radius: 10px;
    background: color-mix(in srgb, var(--score) 8%, transparent);
    color: transparent;
    line-height: 0;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.topn-compare-pick:hover,
.topn-compare-pick:focus-visible {
    border-color: var(--score);
    background: color-mix(in srgb, var(--score) 14%, transparent);
}

.topn-compare-pick.topn-compare-pick--on,
.topn-compare-pick.topn-compare-pick--on:hover,
.topn-compare-pick.topn-compare-pick--on:focus-visible {
    background: var(--score);
    border-color: var(--score);
    color: #fff;
}

.topn-compare-pick svg {
    display: block;
    flex: none;
}

.topn-grip {
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tn-txt-3);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.12s;
}

.topn-row:hover .topn-grip {
    opacity: 0.85;
}

.topn-grip:active {
    cursor: grabbing;
}

.topn-pos__move {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.topn-row:hover .topn-pos__move,
.topn-pos:focus-within .topn-pos__move {
    opacity: 1;
}

.topn-pos__move button {
    width: 18px;
    height: 14px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tn-txt-3);
    cursor: pointer;
}

.topn-pos__move button:hover:not(:disabled) {
    color: var(--tn-red-bright);
}

.topn-pos__move button:disabled {
    opacity: 0.3;
    cursor: default;
}

.topn-pos__up {
    transform: rotate(-90deg);
}

.topn-pos__down {
    transform: rotate(90deg);
}

.topn-row--dragging {
    background: linear-gradient(90deg, color-mix(in srgb, var(--tn-red) 12%, transparent), color-mix(in srgb, var(--tn-red) 3%, transparent)) !important;
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.6), 0 0 0 1px var(--tn-red-bd);
    border-radius: 12px;
    position: relative;
    z-index: 5;
}

.topn-row--dragging .topn-grip {
    opacity: 1;
    color: var(--tn-red-bright);
    cursor: grabbing;
}

.topn-row--shifted {
    opacity: 0.78;
}

.topn-row--compare-selected {
    background: color-mix(in srgb, var(--score) 7%, transparent);
    box-shadow: inset 3px 0 0 var(--score);
}

.topn-dropline {
    height: 0;
    border-top: 2px dashed var(--tn-red-bright);
    margin: 0 10px;
    position: relative;
}

.topn-dropline::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tn-red-bright);
}

.topn-dropline__label {
    position: absolute;
    right: 0;
    top: -9px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tn-red-bright);
    background: var(--tn-bg);
    padding: 0 6px;
}

.topn-who {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.topn-who__av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    color: var(--tn-txt-2);
}

.topn-who__text {
    min-width: 0;
}

.topn-who__name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.topn-who__name > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topn-who__name--muted {
    color: var(--tn-txt-3);
}

.topn-who__flag {
    font-size: 14px;
    line-height: 1;
    flex: none;
}

.topn-who__nom {
    font-size: 10.5px;
    color: var(--tn-txt-3);
    font-weight: 700;
    margin-top: 2px;
}

.topn-who__nom strong {
    color: var(--tn-txt-2);
}

.topn-who__badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.topn-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 7px;
    border: 1px solid var(--tn-bd-soft);
    border-radius: 20px;
    color: var(--tn-txt-3);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.topn-source-badge--mine {
    color: var(--tn-green);
    border-color: var(--tn-green-bd);
    background: var(--tn-green-bg);
}

.topn-modepill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--tn-txt-3);
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd-soft);
    border-radius: 20px;
    padding: 3px 8px;
    margin-top: 4px;
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
}

.topn-modepill:hover {
    border-color: var(--tn-bd);
    color: var(--tn-txt-2);
}

.topn-modepill--total {
    color: var(--tn-green);
    border-color: var(--tn-green-bd);
    background: var(--tn-green-bg);
}

.topn-modepill__swap {
    opacity: 0.7;
    flex: none;
}

/* cells: inputs + locked + total editor */
.topn-input {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    border-radius: 9px;
    padding: 9px 11px;
    color: var(--tn-txt);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    outline: 0;
}

.topn-input::placeholder {
    color: var(--tn-txt-3);
    font-weight: 700;
}

.topn-input:focus {
    border-color: var(--tn-red-bright);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tn-red) 16%, transparent);
}

.topn-input:disabled {
    opacity: 0.7;
}

.topn-input--ghost {
    background: transparent;
    border-style: dashed;
    border-color: var(--tn-bd-soft);
    color: var(--tn-txt-3);
}

.topn-input--locked {
    background: transparent;
    border-style: dashed;
    border-color: var(--tn-bd-soft);
    color: var(--tn-txt-3);
    font-size: 15px;
}

.topn-total-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--tn-green-bg);
    border: 1px solid var(--tn-green-bd);
    border-radius: 9px;
    padding: 6px 11px;
}

.topn-total-edit:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tn-green) 18%, transparent);
}

.topn-total-edit--default {
    border-style: dashed;
    background: transparent;
}

.topn-total-edit__input {
    width: 56px;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--tn-green);
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}

.topn-total-edit__input::placeholder {
    color: color-mix(in srgb, var(--tn-green) 60%, transparent);
}

.topn-total-edit__unit {
    font-size: 11px;
    color: var(--tn-green);
    font-weight: 700;
    opacity: 0.7;
}

.topn-pred {
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--tn-green);
}

.topn-pred small {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--tn-txt-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1px;
}

.topn-pred--muted {
    color: var(--tn-txt-3);
}

.topn-delta {
    display: block;
    text-align: center;
    color: var(--tn-txt-2);
    font-size: 14px;
    font-weight: 800;
}

.topn-delta small {
    display: block;
    margin-top: 1px;
    color: var(--tn-txt-3);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.topn-delta--up {
    color: var(--tn-green);
}

.topn-delta--down {
    color: var(--tn-red-bright);
}

.topn-delta--muted,
.topn-delta--equal {
    color: var(--tn-txt-3);
}

.topn-row__acts {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.topn-row__act {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--tn-bd);
    background: var(--tn-panel);
    color: var(--tn-txt-3);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.topn-row__act:hover:not(:disabled) {
    color: var(--tn-txt);
    background: var(--tn-card-hi);
}

.topn-row__act--ctx:hover {
    color: var(--tn-red-bright);
    border-color: var(--tn-red-bd);
    background: var(--tn-red-dim);
}

.topn-row__act--fill-on {
    color: var(--tn-red-bright);
    border-color: var(--tn-red-bd);
    background: var(--tn-red-dim);
}

.topn-row__act--reset:hover {
    color: var(--tn-red-bright);
    border-color: var(--tn-red-bd);
    background: var(--tn-red-dim);
}

.topn-cutoff {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--tn-amber) 6%, transparent);
    animation: topn-cutoff-enter 0.24s ease both;
}

.topn-cutoff__label,
.topn-cutoff__hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tn-amber);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.topn-cutoff__line {
    height: 1px;
    flex: 1;
    background: color-mix(in srgb, var(--tn-amber) 52%, transparent);
}

.topn-cutoff__hint {
    color: var(--tn-txt-3);
    font-size: 9px;
}

.topn-expander {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-top: 1px solid var(--tn-bd-soft);
    background: color-mix(in srgb, var(--tn-panel) 64%, transparent);
    color: var(--tn-txt-2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.topn-expander:hover {
    color: var(--tn-txt);
    background: var(--tn-card-hi);
}

.topn-expander strong {
    color: var(--tn-txt-3);
}

.topn-expander__icon {
    transition: transform 0.18s ease;
}

.topn-expander__icon--up {
    transform: rotate(-90deg);
}

.topn-row__act:disabled {
    opacity: 0.5;
    cursor: default;
}

/* per-row compact fill trigger (in the Predicted cell) */
.topn-fillmini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--tn-txt-2);
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    border-radius: 8px;
    padding: 6px 9px;
    cursor: pointer;
    white-space: nowrap;
}

.topn-fillmini:hover {
    background: var(--tn-card-hi);
    color: var(--tn-txt);
    border-color: var(--tn-red-bd);
}

.topn-fillmini--on {
    color: var(--tn-red-bright);
    border-color: var(--tn-red-bd);
    background: var(--tn-red-dim);
}

.topn-fillmini__ic {
    color: var(--tn-red-bright);
    flex: none;
}

.topn-fillmini__ch {
    color: var(--tn-txt-3);
    flex: none;
    transform: rotate(90deg);
}

/* fill popover (anchored directly to the compact trigger) */
.topn-fillwrap {
    position: relative;
    display: inline-flex;
    justify-content: center;
}

.topn-fillpop {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 268px;
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    border-radius: 13px;
    box-shadow: var(--tn-shadow);
    padding: 7px;
}

.topn-fillpop--actions {
    z-index: 40;
    right: 0;
    left: auto;
    width: min(268px, calc(100vw - 32px));
    max-height: min(280px, calc(100dvh - 32px));
    overflow-y: auto;
    transform: none;
}

.topn-fillpop--up {
    top: auto;
    bottom: calc(100% + 8px);
}

.topn-fillpop__head,
.topn-bulkmenu .topn-fillpop__head {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--tn-txt-3);
    text-transform: uppercase;
    padding: 7px 9px 5px;
}

.topn-fill-opt {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    background: transparent;
    border: 0;
    text-align: left;
}

.topn-fill-opt:hover {
    background: var(--tn-card);
}

.topn-fill-opt__ic {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd-soft);
    color: var(--tn-red-bright);
}

.topn-fill-opt__t {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--tn-txt-2);
}

.topn-fill-opt__v {
    font-size: 14px;
    font-weight: 800;
    color: var(--tn-txt);
    flex: none;
}

.topn-fillpop__note {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--tn-txt-3);
    padding: 6px 10px 4px;
    border-top: 1px solid var(--tn-bd-soft);
    margin-top: 5px;
}

.topn-fill-opt--loading,
.topn-fill-opt--loading:hover {
    cursor: default;
    background: transparent;
}

.topn-fill-opt--loading .topn-fill-opt__t {
    color: var(--tn-txt-3);
}

.topn-spinner {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--tn-red-bright) 28%, transparent);
    border-top-color: var(--tn-red-bright);
    animation: topn-spin 0.7s linear infinite;
}

@keyframes topn-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------
   Footer tools
   --------------------------------------------------------------- */
.topn-foottools {
    display: flex;
    flex: none;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 2px 2px 4px;
}

.topn-tool {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tn-txt-2);
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    border-radius: 10px;
    padding: 9px 14px;
    cursor: pointer;
}

.topn-tool:hover:not(:disabled) {
    background: var(--tn-card-hi);
    color: var(--tn-txt);
}

.topn-tool:disabled {
    opacity: 0.5;
    cursor: default;
}

.topn-tool--accent {
    color: var(--tn-red-bright);
    border-color: var(--tn-red-bd);
    background: var(--tn-red-dim);
}

.topn-tool--ghost {
    background: transparent;
}

.topn-tool--compare {
    color: var(--score);
    border-color: color-mix(in srgb, var(--score) 38%, var(--tn-bd));
    background: color-mix(in srgb, var(--score) 10%, transparent);
}

.topn-tool--on {
    color: var(--tn-red-bright);
    border-color: var(--tn-red-bd);
    background: var(--tn-red-dim);
}

.topn-tool--compare.topn-tool--on {
    color: var(--score);
    border-color: color-mix(in srgb, var(--score) 46%, var(--tn-bd));
    background: color-mix(in srgb, var(--score) 16%, transparent);
}

.topn-bulk__ch {
    opacity: 0.6;
    flex: none;
    transform: rotate(90deg);
}

.topn-bulkwrap {
    position: relative;
}

.topn-bulkmenu {
    position: absolute;
    bottom: 46px;
    left: 0;
    width: 248px;
    z-index: 30;
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    border-radius: 13px;
    box-shadow: var(--tn-shadow);
    padding: 7px;
}

.topn-foottools__count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--tn-txt-3);
}

.topn-comparebar {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--score) 38%, var(--tn-bd));
    border-radius: 13px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--score) 13%, transparent), color-mix(in srgb, var(--score) 4%, transparent));
    box-shadow: 0 18px 44px -30px rgb(0 0 0 / 0.65);
}

.topn-comparebar__avatars {
    display: flex;
    align-items: center;
    min-width: 72px;
}

.topn-comparebar__avatar,
.topn-comparebar__empty-dot {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--tn-panel-2);
    margin-left: -9px;
}

.topn-comparebar__avatar:first-child,
.topn-comparebar__empty-dot:first-child {
    margin-left: 0;
}

.topn-comparebar__avatar {
    background: var(--score);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.topn-comparebar__empty-dot {
    background: var(--tn-panel);
    border-color: color-mix(in srgb, var(--score) 34%, var(--tn-bd));
}

.topn-comparebar__text {
    min-width: 0;
}

.topn-comparebar__text strong {
    display: block;
    color: var(--tn-txt);
    font-size: 13px;
    font-weight: 900;
}

.topn-comparebar__text span {
    display: block;
    color: var(--tn-txt-2);
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 1px;
}

.topn-comparebar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.topn-comparebar__cancel,
.topn-comparebar__go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

.topn-comparebar__cancel {
    border: 1px solid var(--tn-bd);
    background: transparent;
    color: var(--tn-txt-2);
}

.topn-comparebar__go {
    border: 0;
    background: var(--score);
    color: #fff;
}

.topn-comparebar__go:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---------------------------------------------------------------
   Module switcher menu (anchored popover)
   --------------------------------------------------------------- */
.topn-modmenu-layer {
    position: absolute;
    inset: 0;
    z-index: 50;
}

.topn-modmenu__scrim {
    position: fixed;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.topn-modmenu {
    position: absolute;
    top: 44px;
    left: 0;
    width: min(400px, 92vw);
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    border-radius: 16px;
    box-shadow: var(--tn-shadow);
    padding: 10px;
}

.topn-modmenu__head {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--tn-txt-3);
    text-transform: uppercase;
    padding: 8px 10px 6px;
}

.topn-modmenu__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border-radius: 11px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
}

.topn-modmenu__item:hover {
    background: var(--tn-card);
}

.topn-modmenu__item--active {
    background: var(--tn-red-dim);
    box-shadow: inset 0 0 0 1px var(--tn-red-bd);
}

.topn-modmenu__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    color: var(--tn-txt-2);
}

.topn-modmenu__item--active .topn-modmenu__icon {
    background: var(--tn-red-dim);
    border-color: var(--tn-red-bd);
    color: var(--tn-red-bright);
}

.topn-modmenu__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topn-modmenu__name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.topn-modmenu__desc {
    font-size: 11.5px;
    color: var(--tn-txt-3);
    font-weight: 600;
    margin-top: 2px;
}

.topn-modmenu__check {
    margin-left: auto;
    color: var(--tn-green);
    flex: none;
}

.topn-modmenu__progress {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--tn-txt-3);
    flex: none;
}

.topn-modmenu__note {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--tn-txt-3);
    font-weight: 600;
    line-height: 1.5;
    padding: 11px 12px 6px;
    border-top: 1px solid var(--tn-bd-soft);
    margin-top: 6px;
}

.topn-modmenu__note-icon {
    color: var(--tn-amber);
    flex: none;
    margin-top: 1px;
}

/* ---------------------------------------------------------------
   Command palette
   --------------------------------------------------------------- */
.topn-palette-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgb(4 6 10 / 0.62);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
}

.topn-palette {
    width: min(580px, 100%);
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    border-radius: 16px;
    box-shadow: var(--tn-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 76vh;
}

.topn-palette__search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--tn-bd-soft);
}

.topn-palette__search-icon {
    color: var(--tn-txt-3);
    flex: none;
}

.topn-palette__search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--tn-txt);
    font-size: 16px;
    font-weight: 600;
    min-width: 0;
}

.topn-palette__search input::placeholder {
    color: var(--tn-txt-3);
}

.topn-palette__esc {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--tn-txt-3);
    border: 1px solid var(--tn-bd);
    border-radius: 5px;
    padding: 3px 7px;
}

.topn-palette__list {
    overflow-y: auto;
    padding: 8px;
}

.topn-palette__section {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--tn-txt-3);
    text-transform: uppercase;
    padding: 10px 12px 6px;
}

.topn-palette__empty {
    padding: 22px 12px;
    text-align: center;
    color: var(--tn-txt-3);
    font-size: 13px;
    font-weight: 600;
}

.topn-palette__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
}

.topn-palette__row--selected {
    background: var(--tn-red-dim);
    box-shadow: inset 0 0 0 1px var(--tn-red-bd);
}

.topn-palette__chip {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    color: var(--tn-txt-2);
}

.topn-palette__row--selected .topn-palette__chip {
    background: var(--tn-red-dim);
    border-color: var(--tn-red-bd);
    color: var(--tn-red-bright);
}

.topn-palette__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--tn-txt);
}

.topn-palette__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topn-palette__note {
    font-size: 11px;
    font-weight: 800;
}

.topn-palette__note--done {
    color: var(--tn-green);
}

.topn-palette__note--prog {
    color: var(--tn-amber);
}

.topn-palette__note--todo {
    color: var(--tn-txt-3);
}

.topn-palette__enter {
    font-size: 12px;
    color: var(--tn-txt-3);
}

.topn-palette__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 11px 16px;
    border-top: 1px solid var(--tn-bd-soft);
    font-size: 11px;
    font-weight: 700;
    color: var(--tn-txt-3);
}

.topn-palette__key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.topn-palette__key kbd {
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    background: var(--tn-card);
    border: 1px solid var(--tn-bd);
    border-radius: 4px;
    padding: 2px 5px;
    color: var(--tn-txt-2);
}

/* ---------------------------------------------------------------
   Athlete context drawer
   --------------------------------------------------------------- */
.topn-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 44;
    border: 0;
    background: rgb(4 6 10 / 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
    cursor: pointer;
}

.topn-drawer-scrim.is-open {
    opacity: 1;
    visibility: visible;
}

body:has(.topn-drawer.is-open) {
    overflow: hidden;
}

.topn-drawer {
    position: fixed;
    top: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 45;
    width: min(480px, calc(100vw - 32px));
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    border-radius: 18px;
    box-shadow: -34px 0 70px -30px rgb(0 0 0 / 0.55);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--tn-bd) 72%, var(--tn-txt-3)) transparent;
    transform: translateX(calc(100% + 16px));
    transition: transform 0.2s ease;
    padding: 16px 20px 24px;
    box-sizing: border-box;
}

.topn-drawer::-webkit-scrollbar {
    width: 9px;
}

.topn-drawer::-webkit-scrollbar-track {
    background: transparent;
}

.topn-drawer::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--tn-bd) 72%, var(--tn-txt-3));
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

.topn-drawer::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--tn-red) 42%, var(--tn-bd));
    background-clip: padding-box;
}

.topn-drawer.is-open {
    transform: translateX(0);
}

.topn-drawer__handle {
    display: none;
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: var(--tn-bd);
    margin: 2px auto 12px;
}

.topn-drawer__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--tn-bd);
    background: var(--tn-panel-2);
    color: var(--tn-txt-3);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.topn-drawer__close:hover {
    color: var(--tn-txt);
    background: var(--tn-card-hi);
}

/* ---------------------------------------------------------------
   Responsive: tablet + mobile reflow
   --------------------------------------------------------------- */
@media (max-width: 960px) {
    .topn-header__meta {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 899.98px) {
    .app-shell--no-mobile-tabs .topn-workspace {
        --prediction-action-bar-offset: calc(env(safe-area-inset-bottom) + 0.6rem);
        --prediction-bottom-bar-space: calc(env(safe-area-inset-bottom) + 4.4rem);
    }
}

@media (max-width: 720px) {
    .topn-desktop {
        display: none;
    }

    .topn-mobile {
        display: flex;
    }

    /* mobile sheets float with a gap from the screen edges */
    .topn-palette-scrim {
        align-items: flex-end;
        padding: 0 var(--tn-sheet-gap) var(--tn-sheet-gap);
    }

    .topn-palette {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - var(--tn-sheet-gap) * 2 - 1rem);
        border-radius: var(--tn-sheet-r);
    }

    /* athlete context drawer → floating bottom sheet */
    .topn-drawer {
        top: auto;
        left: var(--tn-sheet-gap);
        right: var(--tn-sheet-gap);
        bottom: var(--tn-sheet-gap);
        width: auto;
        max-height: calc(100dvh - var(--tn-sheet-gap) * 2 - 1rem);
        border: 1px solid var(--tn-bd);
        border-radius: var(--tn-sheet-r);
        transform: translateY(calc(100% + var(--tn-sheet-gap)));
        box-shadow: 0 -30px 70px -30px rgb(0 0 0 / 0.6);
        padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
    }

    .topn-drawer.is-open {
        transform: translateY(0);
    }

    .topn-drawer__handle {
        display: block;
    }

    /* iOS auto-zooms into inputs with font-size < 16px on focus —
       keep all focusable controls at 16px on mobile to prevent it. */
    .topn-palette__search input,
    .topn-workspace .ms-bs-search input {
        font-size: 16px;
    }

    .topn-comparebar {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .topn-comparebar__text {
        flex: 1 1 calc(100% - 88px);
    }

    .topn-comparebar__actions {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    }

    .topn-comparebar__cancel,
    .topn-comparebar__go {
        justify-content: center;
        min-height: 40px;
    }
}

/* ===============================================================
   MOBILE — "Arkusz" card list + bottom-sheet switcher (.ms-*)
   Rendered inside .topn-mobile / as workspace-level overlays.
   =============================================================== */
.topn-mobile {
    gap: 0;
}

.topn-mobile .ms-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 2px 8px;
}

.topn-mobile .ms-bar__ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--tn-bd);
    background: var(--tn-panel-2);
    display: grid;
    place-items: center;
    color: var(--tn-txt-2);
    flex: none;
    cursor: pointer;
}

.topn-mobile .ms-bar__ic-back {
    transform: rotate(180deg);
}

.topn-mobile .ms-catbtn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    background: transparent;
    border: 0;
    cursor: pointer;
    min-width: 0;
}

.topn-mobile .ms-catbtn__nm {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tn-txt);
    display: flex;
    align-items: center;
    gap: 6px;
}

.topn-mobile .ms-catbtn__ch {
    color: var(--tn-txt-3);
    flex: none;
    transform: rotate(90deg);
}

.topn-mobile .ms-catbtn__pos {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tn-txt-3);
}

.topn-mobile .ms-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 10px;
}

.topn-mobile .ms-modpill {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--tn-txt);
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    border-radius: 9px;
    padding: 7px 11px;
    cursor: pointer;
}

.topn-mobile .ms-modpill__mi {
    color: var(--tn-red-bright);
}

.topn-mobile .ms-modpill__ch {
    color: var(--tn-txt-3);
    flex: none;
    transform: rotate(90deg);
}

.topn-mobile .ms-sub__prog {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tn-txt-3);
}

.topn-mobile .ms-sub__st {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 800;
    padding: 5px 9px;
    border-radius: 20px;
    border: 1px solid transparent;
}

.topn-mobile .ms-sub__st--prog {
    color: var(--tn-amber);
    background: var(--tn-amber-bg);
    border-color: var(--tn-amber-bd);
}

.topn-mobile .ms-sub__st--done {
    color: var(--tn-green);
    background: var(--tn-green-bg);
    border-color: var(--tn-green-bd);
}

.topn-mobile .ms-sub__st--todo {
    color: var(--tn-txt-3);
    background: var(--tn-panel-2);
    border-color: var(--tn-bd-soft);
}

.topn-mobile .ms-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.topn-mobile .ms-podium-head,
.topn-mobile .ms-cutoff {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--tn-amber);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.topn-mobile .ms-podium-head__line,
.topn-mobile .ms-cutoff__line {
    height: 1px;
    flex: 1;
    background: color-mix(in srgb, var(--tn-amber) 52%, transparent);
}

.topn-mobile .ms-cutoff {
    padding: 3px 4px;
    color: var(--tn-txt-3);
    animation: topn-cutoff-enter 0.24s ease both;
}

.topn-mobile .ms-card {
    background: var(--tn-card);
    border: 1px solid var(--tn-bd-soft);
    border-radius: 15px;
    padding: 14px;
    overflow: hidden;
    width: 100%;
    text-align: left;
    animation: topn-row-enter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.topn-mobile .ms-card--lead {
    border-color: var(--tn-red-bd);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tn-red) 7%, transparent), transparent);
}

.topn-mobile .ms-card--context {
    box-shadow: inset 3px 0 0 var(--tn-red-bright);
}

.topn-mobile .ms-card--compare-selected {
    border-color: color-mix(in srgb, var(--score) 48%, var(--tn-bd));
    background: linear-gradient(180deg, color-mix(in srgb, var(--score) 9%, transparent), transparent);
    box-shadow: inset 3px 0 0 var(--score);
}

.topn-mobile .ms-card--tail {
    opacity: 0.78;
}

.topn-mobile .ms-card--authored {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tn-green) 72%, transparent);
}

.topn-mobile .ms-ctop {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topn-mobile .ms-move {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: none;
}

.topn-mobile .ms-move button {
    width: 26px;
    height: 21px;
    border-radius: 6px;
    border: 1px solid var(--tn-bd);
    background: var(--tn-panel-2);
    color: var(--tn-txt-2);
    font-size: 10px;
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 1;
    padding: 0;
}

.topn-mobile .ms-move button:hover:not(:disabled) {
    background: var(--tn-card-hi);
    color: var(--tn-txt);
    border-color: var(--tn-red-bd);
}

.topn-mobile .ms-move button:disabled {
    opacity: 0.4;
    cursor: default;
}

.topn-mobile .ms-compare-pick {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    border: 1.5px solid color-mix(in srgb, var(--score) 42%, var(--tn-bd));
    border-radius: 9px;
    background: color-mix(in srgb, var(--score) 8%, transparent);
    color: transparent;
    line-height: 0;
    cursor: pointer;
}

.topn-mobile .ms-compare-pick.ms-compare-pick--on,
.topn-mobile .ms-compare-pick.ms-compare-pick--on:hover,
.topn-mobile .ms-compare-pick.ms-compare-pick--on:focus-visible {
    background: var(--score);
    border-color: var(--score);
    color: #fff;
}

.topn-mobile .ms-compare-pick svg {
    display: block;
    flex: none;
}

.topn-mobile .ms-card__rk {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex: none;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    color: var(--tn-txt-2);
}

.topn-mobile .ms-card--lead .ms-card__rk {
    background: var(--tn-red-dim);
    border-color: var(--tn-red-bd);
    color: var(--tn-red-bright);
}

.topn-mobile .ms-card__rk--p1 {
    color: #f5c451;
    border-color: color-mix(in srgb, #f5c451 44%, var(--tn-bd));
}

.topn-mobile .ms-card__rk--p2 {
    color: #b8c2cf;
    border-color: color-mix(in srgb, #b8c2cf 44%, var(--tn-bd));
}

.topn-mobile .ms-card__rk--p3 {
    color: #c98a5b;
    border-color: color-mix(in srgb, #c98a5b 44%, var(--tn-bd));
}

.topn-mobile .ms-card__av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    color: var(--tn-txt-2);
}

.topn-mobile .ms-card__who {
    min-width: 0;
    flex: 1;
}

.topn-mobile .ms-card__n {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topn-mobile .ms-card--lead .ms-card__n {
    color: var(--tn-red-bright);
}

.topn-mobile .ms-card__flag {
    font-size: 14px;
    line-height: 1;
    flex: none;
}

.topn-mobile .ms-card__c {
    font-size: 11.5px;
    color: var(--tn-txt-2);
    font-weight: 600;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topn-mobile .ms-card__pred {
    text-align: right;
    flex: none;
}

.topn-mobile .ms-card__pred-k {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--tn-txt-3);
    text-transform: uppercase;
}

.topn-mobile .ms-card__pred-v {
    font-size: 18px;
    font-weight: 800;
    color: var(--tn-green);
    letter-spacing: -0.02em;
}

.topn-mobile .ms-card__pred-d {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--tn-green);
}

.topn-mobile .ms-card__pred-v--default,
.topn-mobile .ms-card__pred-src {
    color: var(--tn-txt-3);
}

.topn-mobile .ms-card__pred-src {
    margin-top: 1px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.topn-mobile .ms-card__pred-src--mine {
    color: var(--tn-green);
}

.topn-mobile .ms-card__chev {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--tn-bd);
    background: var(--tn-panel-2);
    display: grid;
    place-items: center;
    color: var(--tn-txt-3);
    flex: none;
    cursor: pointer;
}

.topn-mobile .ms-card__chev-icon {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.topn-mobile .ms-card__chev-icon--expanded {
    transform: rotate(90deg);
}

.topn-mobile .ms-chevron--up {
    transform: rotate(-90deg);
}

.topn-mobile .ms-chevron--down {
    transform: rotate(90deg);
}

.topn-mobile .ms-clifts {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 11px;
    padding-top: 11px;
    padding-inline: 0;
    border-top: 1px solid var(--tn-bd-soft);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background: transparent;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--tn-txt-2);
    cursor: pointer;
}

.topn-mobile .ms-clifts:hover,
.topn-mobile .ms-clifts:focus-visible {
    color: var(--tn-txt);
}

.topn-mobile .ms-clifts b {
    color: var(--tn-txt);
}

.topn-mobile .ms-clifts__sep {
    color: var(--tn-txt-3);
}

.topn-mobile .ms-clifts__muted {
    color: var(--tn-txt-3);
    font-weight: 600;
}

.topn-mobile .ms-clifts__pill {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tn-txt-3);
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd-soft);
    border-radius: 20px;
    padding: 3px 8px;
    white-space: nowrap;
}

.topn-mobile .ms-clifts__pill--total {
    color: var(--tn-green);
    border-color: var(--tn-green-bd);
    background: var(--tn-green-bg);
}

/* expanded editing card */
.topn-mobile .ms-card--editing {
    border-color: var(--tn-red-bd);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tn-red) 7%, transparent), transparent);
}

.topn-mobile .ms-edit {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--tn-bd-soft);
}

.topn-mobile .ms-edit-region {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
}

.topn-mobile .ms-edit-region--open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.topn-mobile .ms-edit-region__inner {
    min-height: 0;
    overflow: hidden;
}

.topn-mobile .ms-edit__seg {
    display: flex;
    gap: 4px;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 13px;
}

.topn-mobile .ms-edit__seg-btn {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--tn-txt-2);
    font-weight: 700;
    font-size: 12px;
    padding: 9px;
    border-radius: 7px;
    cursor: pointer;
}

.topn-mobile .ms-edit__seg-btn--on {
    background: var(--tn-card-hi);
    color: var(--tn-txt);
    box-shadow: inset 0 0 0 1px var(--tn-bd);
}

.topn-mobile .ms-field {
    margin-bottom: 10px;
}

.topn-mobile .ms-field label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: var(--tn-txt-3);
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.topn-mobile .ms-field__inp {
    display: flex;
    align-items: center;
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    border-radius: 12px;
    padding: 13px 15px;
}

.topn-mobile .ms-field__inp:focus-within {
    border-color: var(--tn-red-bright);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tn-red) 16%, transparent);
}

.topn-mobile .ms-field__inp--total {
    background: var(--tn-green-bg);
    border-color: var(--tn-green-bd);
}

.topn-mobile .ms-field__inp input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--tn-txt);
    font-size: 18px;
    font-weight: 800;
    width: 100%;
    min-width: 0;
}

.topn-mobile .ms-field__inp--total input {
    color: var(--tn-green);
}

.topn-mobile .ms-field__u {
    font-size: 13px;
    color: var(--tn-txt-3);
    font-weight: 700;
}

.topn-mobile .ms-field__inp--total .ms-field__u {
    color: var(--tn-green);
}

.topn-mobile .ms-field__step {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 8px;
}

.topn-mobile .ms-field__step button {
    width: 24px;
    height: 18px;
    border-radius: 5px;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    display: grid;
    place-items: center;
    color: var(--tn-txt-3);
    font-size: 10px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.topn-mobile .ms-field__step button:hover {
    color: var(--tn-txt);
    border-color: var(--tn-red-bd);
}

.topn-mobile .ms-etotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--tn-green-bg);
    border: 1px solid var(--tn-green-bd);
    border-radius: 12px;
    padding: 13px 15px;
    margin: 6px 0 13px;
}

.topn-mobile .ms-etotal__k {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--tn-green);
    text-transform: uppercase;
}

.topn-mobile .ms-etotal__v {
    font-size: 22px;
    font-weight: 800;
    color: var(--tn-green);
    letter-spacing: -0.02em;
}

.topn-mobile .ms-equick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.topn-mobile .ms-equick button {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tn-txt-2);
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    border-radius: 9px;
    padding: 8px 11px;
    cursor: pointer;
}

.topn-mobile .ms-equick__ic {
    color: var(--tn-red-bright);
    display: inline-flex;
}

.topn-mobile .ms-equick__loading {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tn-txt-3);
    padding: 8px 11px;
}

.topn-mobile .ms-eacts {
    display: flex;
    gap: 10px;
}

.topn-mobile .ms-eacts__reset {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tn-txt-2);
    background: transparent;
    border: 1px solid var(--tn-bd);
    border-radius: 11px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.topn-mobile .ms-eacts__reset:hover:not(:disabled) {
    color: var(--tn-red-bright);
    border-color: var(--tn-red-bd);
    background: var(--tn-red-dim);
}

.topn-mobile .ms-expander {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--tn-bd);
    border-radius: 12px;
    background: transparent;
    color: var(--tn-txt-2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.topn-mobile .ms-expander strong {
    color: var(--tn-txt-3);
}

.topn-mobile .ms-expander__icon {
    transition: transform 0.18s ease;
}

.topn-mobile .ms-expander__icon--up {
    transform: rotate(-90deg);
}

.topn-mobile .topn-foottools {
    margin-top: 13px;
}

.topn-mobile .topn-foottools__count {
    width: 100%;
    margin-left: 0;
}

.topn-mobile .ms-eacts__save {
    flex: 1;
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--tn-red-bright), var(--tn-red));
    border: 0;
    border-radius: 11px;
    padding: 12px;
    cursor: pointer;
}

/* ---------- bottom-sheet switcher (module + category) ---------- */
.topn-workspace .ms-scrim {
    position: fixed;
    inset: 0;
    background: rgb(4 6 10 / 0.6);
    backdrop-filter: blur(2px);
    z-index: 58;
    border: 0;
}

.topn-workspace .ms-bottomsheet {
    position: fixed;
    left: var(--tn-sheet-gap);
    right: var(--tn-sheet-gap);
    bottom: var(--tn-sheet-gap);
    z-index: 60;
    background: var(--tn-panel);
    border: 1px solid var(--tn-bd);
    border-radius: var(--tn-sheet-r);
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - var(--tn-sheet-gap) * 2 - 1rem);
    overflow-y: auto;
    box-shadow: 0 -30px 60px -20px rgb(0 0 0 / 0.55);
    animation: topn-sheet-up 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.topn-workspace .ms-handle {
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: var(--tn-bd);
    margin: 4px auto 14px;
}

.topn-workspace .ms-bs-sec {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--tn-txt-3);
    text-transform: uppercase;
    margin: 6px 2px 9px;
}

.topn-workspace .ms-bs-mod {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--tn-card);
    border: 1px solid var(--tn-bd-soft);
    margin-bottom: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.topn-workspace .ms-bs-mod--on {
    border-color: var(--tn-red-bd);
    background: var(--tn-red-dim);
}

.topn-workspace .ms-bs-mod__ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    color: var(--tn-txt-2);
}

.topn-workspace .ms-bs-mod--on .ms-bs-mod__ic {
    background: var(--tn-red-dim);
    border-color: var(--tn-red-bd);
    color: var(--tn-red-bright);
}

.topn-workspace .ms-bs-mod__t {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.topn-workspace .ms-bs-mod__name {
    font-size: 14px;
    font-weight: 800;
}

.topn-workspace .ms-bs-mod__desc {
    font-size: 11px;
    color: var(--tn-txt-3);
    font-weight: 600;
    margin-top: 1px;
}

.topn-workspace .ms-bs-mod__ck {
    margin-left: auto;
    color: var(--tn-green);
    flex: none;
}

.topn-workspace .ms-bs-divider {
    height: 1px;
    background: var(--tn-bd-soft);
    margin: 14px 0;
}

.topn-workspace .ms-bs-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tn-panel-2);
    border: 1px solid var(--tn-bd);
    border-radius: 11px;
    padding: 11px 14px;
    margin-bottom: 12px;
}

.topn-workspace .ms-bs-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--tn-txt);
    font-size: 14px;
    font-weight: 600;
    min-width: 0;
}

.topn-workspace .ms-bs-search__k {
    color: var(--tn-txt-3);
    flex: none;
}

.topn-workspace .ms-bs-grouplbl {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--tn-txt-3);
    text-transform: uppercase;
    margin: 6px 2px 8px;
}

.topn-workspace .ms-bs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 6px;
}

.topn-workspace .ms-bs-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 11px 4px;
    border-radius: 11px;
    background: var(--tn-card);
    border: 1px solid var(--tn-bd-soft);
    cursor: pointer;
}

.topn-workspace .ms-bs-chip__w {
    font-size: 13px;
    font-weight: 800;
    color: var(--tn-txt);
}

.topn-workspace .ms-bs-chip__b {
    display: inline-flex;
    font-size: 9px;
    font-weight: 800;
    color: var(--tn-txt-3);
}

.topn-workspace .ms-bs-chip--done {
    border-color: var(--tn-green-bd);
}

.topn-workspace .ms-bs-chip--done .ms-bs-chip__b {
    color: var(--tn-green);
}

.topn-workspace .ms-bs-chip--prog {
    border-color: var(--tn-amber-bd);
}

.topn-workspace .ms-bs-chip--prog .ms-bs-chip__b {
    color: var(--tn-amber);
}

.topn-workspace .ms-bs-chip--active {
    border-color: var(--tn-red-bd);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tn-red) 10%, transparent), transparent);
}

.topn-workspace .ms-bs-chip--active .ms-bs-chip__w {
    color: var(--tn-red-bright);
}

/* ===============================================================
   Overlay entrance animations
   =============================================================== */
@keyframes topn-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes topn-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes topn-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes topn-sheet-up {
    from { opacity: 0.5; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes topn-row-enter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes topn-cutoff-enter {
    from { opacity: 0; transform: scaleX(0.96); }
    to { opacity: 1; transform: scaleX(1); }
}

/* scrims fade in */
.topn-palette-scrim,
.topn-modmenu__scrim,
.topn-workspace .ms-scrim {
    animation: topn-fade 0.18s ease both;
}

/* centered modal (desktop) */
.topn-palette {
    animation: topn-modal-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* anchored menus + popovers */
.topn-modmenu,
.topn-fillpop {
    animation: topn-pop 0.15s ease both;
    transform-origin: top center;
}

.topn-bulkmenu {
    animation: topn-pop 0.15s ease both;
    transform-origin: bottom left;
}

/* nicer drawer slide curve */
.topn-drawer {
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* on mobile the palette enters as a bottom sheet */
@media (max-width: 720px) {
    .topn-palette {
        animation: topn-sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topn-palette-scrim,
    .topn-modmenu__scrim,
    .topn-workspace .ms-scrim,
    .topn-workspace .ms-bottomsheet,
    .topn-palette,
    .topn-modmenu,
    .topn-fillpop,
    .topn-bulkmenu,
    .topn-rowgroup,
    .topn-cutoff,
    .topn-expander__icon,
    .topn-mobile .ms-card,
    .topn-mobile .ms-cutoff,
    .topn-mobile .ms-expander__icon,
    .topn-mobile .ms-edit-region,
    .topn-mobile .ms-card__chev-icon,
    .topn-drawer {
        animation: none !important;
        transition: none !important;
    }
}