/* /Components/Dialog/DMAbilityLogDialog.razor.rz.scp.css */
/* the shell body must not scroll — .log-body is the single scroll container,
   otherwise the sticky column header detaches and rows slide past it */
.log-body[b-89vxaen8jb] {
    padding: 0 1.5rem 1.25rem;
    max-height: calc(64dvh / var(--dm-zoom));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
    font-family: "Roboto Mono", sans-serif;
}

/* Column headers */
.log-columns[b-89vxaen8jb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 6px 8px;
    font-size: 10px;
    color: var(--label-color);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--panel-border);
    position: sticky;
    top: 0;
    background: var(--bg-deep);
    z-index: 1;
}

.log-col-time[b-89vxaen8jb] { width: 60px; flex-shrink: 0; text-align: right; }
.log-col-icon[b-89vxaen8jb] { width: 22px; flex-shrink: 0; }
.log-col-spell[b-89vxaen8jb] { width: 180px; flex-shrink: 0; }
.log-col-target[b-89vxaen8jb] { width: 100px; flex-shrink: 0; }
.log-col-divider[b-89vxaen8jb] { width: 1px; flex-shrink: 0; }
.log-col-buffs[b-89vxaen8jb] { flex: 1; text-align: right; }

.log-phase[b-89vxaen8jb] {
    font-size: 10px;
    font-weight: 700;
    color: var(--main-color);
    text-transform: uppercase;
    padding: 0.85rem 0 0.35rem;
    letter-spacing: 1.5px;
}

.log-row[b-89vxaen8jb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    font-size: 11.5px;
    border-bottom: 1px solid var(--panel-border-inner);
}

.log-row:last-child[b-89vxaen8jb] {
    border-bottom: none;
}

.log-time[b-89vxaen8jb] {
    color: var(--label-color);
    width: 60px;
    flex-shrink: 0;
    font-size: 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.log-icon[b-89vxaen8jb] {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: var(--sub-alt-color);
    flex-shrink: 0;
}

.log-spell[b-89vxaen8jb] {
    width: 180px;
    flex-shrink: 0;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-target[b-89vxaen8jb] {
    width: 100px;
    flex-shrink: 0;
    color: var(--label-color);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-divider[b-89vxaen8jb] {
    width: 1px;
    align-self: stretch;
    background: var(--panel-border-inner);
    flex-shrink: 0;
}

.log-buffs[b-89vxaen8jb] {
    display: flex;
    gap: 2px;
    flex: 1;
    justify-content: flex-start;
}

.log-buff-icon[b-89vxaen8jb] {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: var(--sub-alt-color);
}
/* /Components/Dialog/DMTalentsDialog.razor.rz.scp.css */
/* ---- tree view — sectioned panels, nodes at real in-game positions ---- */

.talents-trees[b-db18ay6gn4] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    max-height: calc(70dvh / var(--dm-zoom));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
    padding: 22px 26px 10px;
}

/* blueprint cell like everywhere else on the site — corner ticks included */
.tree-panel[b-db18ay6gn4] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 10px 10px;
}

/* the hero tree is short — center it between the tall class/spec panels */
.tree-panel.hero-panel[b-db18ay6gn4] {
    align-self: center;
}

.tree-panel-label[b-db18ay6gn4] {
    letter-spacing: 2px;
}

.tree-canvas[b-db18ay6gn4] {
    position: relative;
    margin: 0 auto;
}

/* ---- connection lines ---- */

.tree-lines[b-db18ay6gn4] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tree-lines line.active[b-db18ay6gn4] {
    stroke: color-mix(in srgb, var(--main-color) 45%, var(--panel-border));
    stroke-width: 1.5;
}

.tree-lines line.inactive[b-db18ay6gn4] {
    stroke: var(--panel-border-inner);
    stroke-width: 1;
}

/* ---- point gates ---- */

.tree-gate[b-db18ay6gn4] {
    position: absolute;
    left: 10px;
    right: 10px;
    border-top: 1px dashed var(--panel-border);
}

.tree-gate-label[b-db18ay6gn4] {
    position: absolute;
    right: 0;
    top: -7px;
    padding: 0 4px;
    background-color: var(--bg-deep);
    color: var(--faint-color);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 14px;
}

/* ---- nodes ---- */

.tree-node[b-db18ay6gn4] {
    position: absolute;
    width: 32px;
    height: 32px;
    text-decoration: none;
}

.tree-node-icon[b-db18ay6gn4] {
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--main-color) 40%, var(--panel-border));
    background-color: var(--sub-alt-color);
    transition: border-color 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.tree-node:hover .tree-node-icon[b-db18ay6gn4] {
    border-color: var(--main-color);
}

/* the scaffold — nodes the build did not take */
.tree-node.unpicked .tree-node-icon[b-db18ay6gn4] {
    border-color: var(--panel-border-inner);
    filter: grayscale(0.9) brightness(0.55);
    opacity: 0.45;
}

.tree-node.unpicked:hover .tree-node-icon[b-db18ay6gn4] {
    filter: none;
    opacity: 1;
    border-color: var(--sub-color);
}

.tree-node.choice .tree-node-icon[b-db18ay6gn4] {
    border-color: color-mix(in srgb, var(--main-color) 65%, transparent);
}

.tree-node.keystone .tree-node-icon[b-db18ay6gn4] {
    border-color: var(--main-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--main-color) 45%, transparent);
}

.tree-node-rank[b-db18ay6gn4] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 13px;
    text-align: center;
    background-color: var(--bg-deep);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    color: var(--text-color);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 13px;
    padding: 0 2px;
    font-variant-numeric: tabular-nums;
}

/* ---- responsive ---- */

@media (max-width: 1100px) {
    .talents-trees[b-db18ay6gn4] {
        flex-direction: column;
        align-items: center;
    }
}
/* /Components/Dialog/DMWarningsDialog.razor.rz.scp.css */
.warn-body[b-0h3vecsg30] {
    padding: 20px 24px;
    font-family: "Roboto Mono", sans-serif;
}

.warn-list[b-0h3vecsg30] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.warn-row[b-0h3vecsg30] {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--panel-border-inner);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-color);
}

.warn-row[b-0h3vecsg30]::before {
    content: "warning";
    font-family: 'Material Icons Sharp';
    font-size: 14px;
    line-height: 18px;
    flex: none;
    color: var(--warning-color);
}

.warn-row:first-child[b-0h3vecsg30] {
    padding-top: 0;
}

.warn-row:last-child[b-0h3vecsg30] {
    padding-bottom: 0;
    border-bottom: none;
}
/* /Components/Graph/DMLineGraph.razor.rz.scp.css */
canvas.chart-container[b-s8201lakzd] {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/* /Components/Icons/DMIcon.razor.rz.scp.css */
.dmicon[b-r9hebionxi] {
    display: inline-block;
    vertical-align: middle;
    font-size: 24px; /* overridden by Height */
    line-height: 1;
}
/* /Components/Input/DMDataListInput.razor.rz.scp.css */
.datalist-container[b-8xignjq689] {
    position: relative;
    margin: 0;
    padding: 0;
}

.custom-input[b-8xignjq689] {
    width: 100%;
    background-color: transparent;
    color: var(--text-color);
    font-size: 28px;
    box-sizing: border-box;
    outline: none;
    caret-color: var(--main-color);
    font-family: "Roboto Mono", sans-serif;
}

.suggestions-list[b-8xignjq689] {
    text-align: left;
    position: absolute;
    top: calc(100% + 12px);
    left: -31px;
    right: -31px;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-deep);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    max-height: 180px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    scrollbar-width: none;
}

.suggestions-list[b-8xignjq689]::-webkit-scrollbar {
    display: none;
}

.suggestion-item[b-8xignjq689] {
    padding: 10px 30px;
    cursor: pointer;
    font-size: 14.5px;
    color: var(--sub-color);
    border-bottom: 1px solid var(--panel-border-inner);
    transition: color 0.1s ease, background-color 0.1s ease;
}

.suggestion-item:last-child[b-8xignjq689] {
    border-bottom: none;
}

.suggestion-item:hover[b-8xignjq689],
.suggestion-item.active[b-8xignjq689] {
    color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 6%, transparent);
}

.custom-input[b-8xignjq689]::placeholder {
    color: var(--text-color-disabled);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.custom-input:focus[b-8xignjq689]::placeholder {
    opacity: 0.4;
}

.custom-input:focus[b-8xignjq689] {
    color: var(--text-color);
}
/* /Components/Loading/DMLoadingText.razor.rz.scp.css */
.dm-loading-overlay[b-148pli1ec3] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-family: "Roboto Mono", sans-serif;
}

/* blurs the page behind without dimming it */
.dm-loading-blur[b-148pli1ec3] {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(5px);
    background-color: transparent;
}

.dm-loading-panel[b-148pli1ec3] {
    position: relative;
    z-index: 1;
    min-width: 460px;
    max-width: calc(92dvw / var(--dm-zoom));
    border: 1px solid var(--panel-border);
    background-color: var(--bg-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 40px 20px;
    gap: 4px;
}

.dm-loading-row[b-148pli1ec3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 0 8px;
}

.dm-loading-spinner[b-148pli1ec3] {
    width: 18px;
    height: 18px;
    animation: dm-spin-b-148pli1ec3 1.2s linear infinite;
    flex: none;
}

.dm-loading-check[b-148pli1ec3] {
    color: var(--ok-color);
    font-size: 17px;
    flex: none;
}

.dm-loading-text[b-148pli1ec3] {
    font-size: 15.5px;
    margin: 0;
}

.dm-loading-number[b-148pli1ec3] {
    display: inline-block;
    color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 10%, transparent);
    padding: 1px 8px;
    font-weight: 700;
    animation: dm-number-change-b-148pli1ec3 0.2s ease-in-out;
}

.dm-loading-text-animated[b-148pli1ec3] {
    animation: dm-text-slide-in-b-148pli1ec3 0.3s ease-out;
}

/* Queue icon row — you at the left, front of the line at the right */
.dm-queue-row[b-148pli1ec3] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 26px;
    padding: 12px 8px 4px;
}

.dm-queue-slot[b-148pli1ec3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.dm-queue-slot svg[b-148pli1ec3] {
    width: 18px;
    height: 18px;
    fill: var(--sub-color);
}

.dm-queue-slot .dm-queue-place[b-148pli1ec3] {
    color: var(--faint-color);
    font-size: 10.5px;
}

.dm-queue-slot.you svg[b-148pli1ec3] {
    width: 23px;
    height: 23px;
    fill: var(--main-color);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--main-color) 50%, transparent));
}

.dm-queue-slot.you .dm-queue-place[b-148pli1ec3] {
    color: var(--main-color);
    font-weight: 700;
}

.dm-queue-you[b-148pli1ec3] {
    color: var(--main-color);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.dm-queue-caption[b-148pli1ec3] {
    color: var(--faint-color);
    font-size: 11px;
    padding-top: 8px;
}

@keyframes dm-spin-b-148pli1ec3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dm-number-change-b-148pli1ec3 {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(1.1);
    }
    50% { opacity: 0.5; }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dm-text-slide-in-b-148pli1ec3 {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Loading/DMSimProgress.razor.rz.scp.css */
.dm-loading-overlay[b-6uhoer9oki] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-family: "Roboto Mono", sans-serif;
}

/* blurs the page behind without dimming it */
.dm-loading-blur[b-6uhoer9oki] {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(5px);
    background-color: transparent;
}

.sim-progress-panel[b-6uhoer9oki] {
    position: relative;
    z-index: 1;
    /* one fixed width for every state — the panel must not jump when the
       queue row is swapped for the log region */
    width: min(720px, calc(92dvw / var(--dm-zoom)));
    border: 1px solid var(--panel-border);
    background-color: var(--bg-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 40px 20px;
    gap: 4px;
}

/* ---- header ---- */

.sim-header-row[b-6uhoer9oki] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 0 8px;
}

/* fixed slot so the icon swap (spinner ⇄ check ⇄ cross) never shifts the text */
.sim-icon-slot[b-6uhoer9oki] {
    width: 24px;
    height: 24px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sim-spinner[b-6uhoer9oki] {
    width: 18px;
    height: 18px;
    animation: sim-spin-b-6uhoer9oki 1.2s linear infinite;
}

/* corner-tick status icons — a small reticle in the panel's blueprint
   language: the tick frame locks on, then the mark stamps in */
.sim-status-icon[b-6uhoer9oki] {
    width: 24px;
    height: 24px;
}

.sim-status-icon .ticks[b-6uhoer9oki] {
    opacity: 0;
    transform: scale(1.35);
    transform-origin: center;
    animation: sim-ticks-lock-b-6uhoer9oki 0.25s ease-out forwards;
}

.sim-status-icon .mark[b-6uhoer9oki] {
    opacity: 0;
    transform: scale(0.4);
    transform-origin: center;
    animation: sim-mark-pop-b-6uhoer9oki 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.15) 0.18s forwards;
}

.sim-status-icon .mark-2[b-6uhoer9oki] {
    animation-delay: 0.28s;
}

.sim-status-icon.ok .mark[b-6uhoer9oki] {
    stroke: var(--ok-color);
}

.sim-status-icon.ok .ticks[b-6uhoer9oki] {
    stroke: color-mix(in srgb, var(--ok-color) 65%, transparent);
}

.sim-status-icon.fail .mark[b-6uhoer9oki] {
    stroke: var(--error-color);
}

.sim-status-icon.fail .ticks[b-6uhoer9oki] {
    stroke: color-mix(in srgb, var(--error-color) 65%, transparent);
}

.sim-text[b-6uhoer9oki] {
    font-size: 15.5px;
    margin: 0;
}

.sim-number[b-6uhoer9oki] {
    display: inline-block;
    color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 10%, transparent);
    padding: 1px 8px;
    font-weight: 700;
    animation: sim-number-change-b-6uhoer9oki 0.2s ease-in-out;
}

.sim-text-animated[b-6uhoer9oki] {
    animation: sim-text-slide-in-b-6uhoer9oki 0.3s ease-out;
}

.sim-percent[b-6uhoer9oki] {
    color: var(--main-color);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    animation: sim-fade-in-b-6uhoer9oki 0.25s ease-out;
}

/* ---- simulation body (progress bar + log) ---- */

.sim-body[b-6uhoer9oki] {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* fade the whole region in once, so it reads as "already there" at the
       start of the sim rather than popping up when the first line arrives */
    animation: sim-fade-in-b-6uhoer9oki 0.28s ease-out;
}

.sim-progressbar[b-6uhoer9oki] {
    width: 100%;
    height: 3px;
    background-color: var(--panel-border-inner);
    margin-bottom: 10px;
}

.sim-progressbar-fill[b-6uhoer9oki] {
    height: 100%;
    width: 0;
    background-color: var(--main-color);
    transition: width 0.4s ease;
}

.sim-progressbar-fill.done[b-6uhoer9oki] {
    background-color: var(--ok-color);
    transition: width 0.45s ease, background-color 0.45s ease;
}

/* ---- queue icon row — you at the left, front of the line at the right ---- */

.sim-queue-row[b-6uhoer9oki] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 26px;
    padding: 12px 8px 4px;
    animation: sim-fade-in-b-6uhoer9oki 0.28s ease-out;
}

.sim-queue-slot[b-6uhoer9oki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.sim-queue-slot svg[b-6uhoer9oki] {
    width: 18px;
    height: 18px;
    fill: var(--sub-color);
}

.sim-queue-slot .sim-queue-place[b-6uhoer9oki] {
    color: var(--faint-color);
    font-size: 10.5px;
}

.sim-queue-slot.you svg[b-6uhoer9oki] {
    width: 23px;
    height: 23px;
    fill: var(--main-color);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--main-color) 50%, transparent));
}

.sim-queue-slot.you .sim-queue-place[b-6uhoer9oki] {
    color: var(--main-color);
    font-weight: 700;
}

.sim-queue-you[b-6uhoer9oki] {
    color: var(--main-color);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.sim-queue-caption[b-6uhoer9oki] {
    color: var(--faint-color);
    font-size: 11px;
    padding-top: 8px;
}

/* ---- live SimC log ---- */

.sim-log-label[b-6uhoer9oki] {
    align-self: flex-start;
    margin-bottom: 6px;
}

.sim-log[b-6uhoer9oki] {
    width: 100%;
    height: 190px;
    overflow-y: auto;
    display: flex;
    /* chronological order so text selection behaves; DMSimLog.js keeps the
       scroll pinned to the bottom while lines stream in */
    flex-direction: column;
    border: 1px solid var(--panel-border-inner);
    background-color: var(--bg-color);
    padding: 8px 10px;
}

/* short logs start at the bottom edge like a terminal — margin-auto instead of
   justify-content so the overflowing part stays scrollable */
.sim-log > .sim-log-line:first-child[b-6uhoer9oki] {
    margin-top: auto;
}

.sim-log-line[b-6uhoer9oki] {
    color: var(--sub-color);
    font-size: 11.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    flex-shrink: 0;
}

.sim-log-line:last-child[b-6uhoer9oki] {
    color: var(--text-color);
}

.sim-log-waiting[b-6uhoer9oki] {
    color: var(--faint-color);
    font-style: italic;
}

/* faire greeting lines that open every log */
.sim-log-flavor[b-6uhoer9oki],
.sim-log-flavor:last-child[b-6uhoer9oki] {
    color: var(--text-color);
}

/* ---- failure ---- */

/* the error rendered as the log's final line */
.sim-log-error[b-6uhoer9oki],
.sim-log-error:last-child[b-6uhoer9oki] {
    color: var(--error-color);
    animation: sim-fade-in-b-6uhoer9oki 0.28s ease-out;
}

.sim-failed-actions[b-6uhoer9oki] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-top: 12px;
}

/* ---- animations ---- */

@keyframes sim-spin-b-6uhoer9oki {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes sim-ticks-lock-b-6uhoer9oki {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sim-mark-pop-b-6uhoer9oki {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sim-fade-in-b-6uhoer9oki {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes sim-number-change-b-6uhoer9oki {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(1.1);
    }
    50% { opacity: 0.5; }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sim-text-slide-in-b-6uhoer9oki {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Logo/DMLogo.razor.rz.scp.css */
.logo-main-div[b-17xlhq6204] {
    display: flex;
    align-items: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.logo-inner[b-17xlhq6204] {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.icon[b-17xlhq6204] {
    display: flex;
    width: 30px;
    height: 30px;
}

.icon svg[b-17xlhq6204] {
    width: 30px;
    height: 30px;
}

.icon svg path[b-17xlhq6204] {
    fill: var(--main-color);
}

.text[b-17xlhq6204] {
    color: var(--text-color);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-left: 1px;
}
/* /Components/Navbar/DMModeSwitcher.razor.rz.scp.css */
.mode-switcher[b-fzi8irjgi6] {
    font-size: 12px;
}

.mode-switcher > a[b-fzi8irjgi6] {
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 22px;
}
/* /Components/Navbar/DMNavbar.razor.rz.scp.css */
/* Segmented sim-options bar */
.options-bar[b-ij0yxjn0yv] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-color);
    font-family: "Roboto Mono", sans-serif;
    font-size: 13px;
    width: fit-content;
}

.options-bar[b-ij0yxjn0yv]  .custom-radio-group {
    display: flex;
    flex-direction: row;
    gap: 0;
}

.options-bar[b-ij0yxjn0yv]  .radio-select {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: var(--label-color);
    border-right: 1px solid var(--panel-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.options-bar[b-ij0yxjn0yv]  .radio-select:hover {
    color: var(--sub-color);
}

.options-bar[b-ij0yxjn0yv]  .radio-select.selected {
    color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 7%, transparent);
}

.options-bar[b-ij0yxjn0yv]  .radio-select.selected:hover {
    color: var(--main-color);
}

/* Fight length + boss count travel together: dungeonslice locks both */
.fight-shape[b-ij0yxjn0yv] {
    display: flex;
    align-items: stretch;
}

.fight-shape.locked[b-ij0yxjn0yv] {
    opacity: 0.35;
    pointer-events: none;
}

/* Boss count segment */
.boss-segment[b-ij0yxjn0yv] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    color: var(--sub-color);
    white-space: nowrap;
}

.boss-count-display[b-ij0yxjn0yv] {
    /* sized for the widest case ("10 bosses") so the +/− never shift */
    min-width: 9ch;
    text-align: center;
}

.boss-count-button[b-ij0yxjn0yv] {
    color: var(--label-color);
    width: 18px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s ease;
}

.boss-count-button:hover[b-ij0yxjn0yv] {
    color: var(--text-color);
}

.boss-count-button.accent[b-ij0yxjn0yv] {
    color: var(--main-color);
}
/* /Components/Radio/DMRadio.razor.rz.scp.css */
.radio-select[b-7d2tnsxje7] {
    cursor: pointer;
}

.radio-select:hover[b-7d2tnsxje7] {
    color: var(--text-color);
    transition: color 0.1s ease;
}

.radio-select.selected[b-7d2tnsxje7] {
    color: var(--main-color);
}
/* /Components/Radio/DMRadioGroup.razor.rz.scp.css */
.custom-radio-group[b-m660akw52d] {
    display: flex;
    flex-direction: row;
    gap: 15px;
}
/* /Components/Select/DMSelect.razor.rz.scp.css */
.select-container[b-vd4daatbrc] {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: "Roboto Mono", sans-serif;
    font-size: 10pt;
    display: flex;
    align-items: center;
}

.dropdown-arrow[b-vd4daatbrc] {
    visibility: collapse;
}

.custom-select[b-vd4daatbrc] {
    width: 100%;
    margin: 2px;
    padding: 2px 2px;
    color: var(--sub-color);
    transition: color 0.3s ease-in;
    cursor: pointer;
    text-align: start;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.custom-select:hover[b-vd4daatbrc],
.custom-select:focus-visible[b-vd4daatbrc] {
    color: var(--text-color);
}

/* inset instead of 100vw/100vh: viewport units are not rescaled by the
   global --dm-zoom, so they would overshoot the screen */
.dropdown-overlay[b-vd4daatbrc] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.dropdown-list[b-vd4daatbrc] {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: -4px;
    right: 0;
    margin-top: 6px;
    padding: 0;
    background: var(--sub-alt-color);
    border-radius: var(--default-borderradius);
    max-height: 200px;
    scrollbar-width: none;
    cursor: pointer;
    color: var(--text-color);
    box-shadow: 0 0 0 6px var(--bg-color);
    -webkit-box-shadow: 0 0 0 6px var(--bg-color);
    display: grid;
    gap: .25em;
    overflow: hidden;
}

/* the items are DMSelectItem components, hence ::deep */
.dropdown-list[b-vd4daatbrc]  .dropdown-item {
    padding: 0 8px;
    background: var(--sub-alt-color);
    cursor: pointer;
    text-align: start;
    align-self: start;
    font-size: 10pt;
    color: var(--text-color);
    margin: 0;
    width: 100%;
    overflow: clip;
}

.dropdown-list[b-vd4daatbrc]  .dropdown-item:hover,
.dropdown-list[b-vd4daatbrc]  .dropdown-item:focus-visible {
    color: var(--sub-alt-color);
    background: var(--text-color);
}
/* /Components/Skeleton/DMSkeleton.razor.rz.scp.css */
/* Base surface */
.dmskel[b-r9oi6pge77] {
    position: relative;
    display: block;
    overflow: hidden;
    /* Theme-able colors via CSS variables */
    --dmskel-base: color-mix(in srgb, currentColor 10%, transparent);
    --dmskel-wave1: color-mix(in srgb, currentColor 18%, transparent);
    --dmskel-wave2: color-mix(in srgb, currentColor 30%, transparent);
}

/* Single block for Rectangle/Circle */
.dmskel .dmskel-block[b-r9oi6pge77] {
    height: 100%;
    width: 100%;
    background: var(--dmskel-base);
    border-radius: inherit;
}

/* Text mode: stack lines */
.dmskel.dmskel-text[b-r9oi6pge77] {
    width: 100%;
}
.dmskel .dmskel-line[b-r9oi6pge77] {
    display: block;
    background: var(--dmskel-base);
    border-radius: 999px;
}

/* Accessible off-screen text */
.dmskel-sr[b-r9oi6pge77] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Shapes */
.dmskel-rect[b-r9oi6pge77] { border-radius: inherit; }
.dmskel-circle[b-r9oi6pge77] { border-radius: 50%; }

/* Animations */
@keyframes dmskel-wave-b-r9oi6pge77 {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes dmskel-pulse-b-r9oi6pge77 {
    0%   { opacity: 0.6; }
    50%  { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Wave shimmer (uses a moving gradient overlay) */
.dmskel-anim-wave .dmskel-block[b-r9oi6pge77],
.dmskel-anim-wave .dmskel-line[b-r9oi6pge77] {
    position: relative;
}
.dmskel-anim-wave .dmskel-block[b-r9oi6pge77]::after,
.dmskel-anim-wave .dmskel-line[b-r9oi6pge77]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
    transparent 0%,
    var(--dmskel-wave1) 30%,
    var(--dmskel-wave2) 50%,
    var(--dmskel-wave1) 70%,
    transparent 100%);
    animation: dmskel-wave-b-r9oi6pge77 1.6s infinite;
}

/* Pulse */
.dmskel-anim-pulse .dmskel-block[b-r9oi6pge77],
.dmskel-anim-pulse .dmskel-line[b-r9oi6pge77] {
    animation: dmskel-pulse-b-r9oi6pge77 1.2s ease-in-out infinite;
}

/* None */
.dmskel-anim-none .dmskel-block[b-r9oi6pge77]::after,
.dmskel-anim-none .dmskel-line[b-r9oi6pge77]::after {
    display: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dmskel-anim-wave .dmskel-block[b-r9oi6pge77]::after,
    .dmskel-anim-wave .dmskel-line[b-r9oi6pge77]::after {
        animation: none;
    }
    .dmskel-anim-pulse .dmskel-block[b-r9oi6pge77],
    .dmskel-anim-pulse .dmskel-line[b-r9oi6pge77] {
        animation: none;
    }
}
/* /Components/Table/DMAbilityTable.razor.rz.scp.css */
/* Breakdown Table — a subgrid so the value columns shrink to their widest
   content across all rows, like table cells did */
.breakdown-table[b-jqoor31vwk] {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  font-family: "Roboto Mono", sans-serif;
}

.breakdown-head[b-jqoor31vwk],
.breakdown-row[b-jqoor31vwk] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}

.breakdown-head[b-jqoor31vwk] {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 56px;
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--panel-border);
}

.breakdown-row[b-jqoor31vwk] {
  position: relative;
  border-bottom: 1px solid var(--panel-border-inner);
}

.breakdown-row:last-child[b-jqoor31vwk] {
  border-bottom: none;
}

.breakdown-head .breakdown-cell[b-jqoor31vwk] {
  padding: 0 18px;
}

.breakdown-row .breakdown-cell[b-jqoor31vwk] {
  padding: 4px 18px;
}

.breakdown-cell:not(:first-child)[b-jqoor31vwk] {
  text-align: right;
}

.breakdown-row .breakdown-cell:not(:first-child)[b-jqoor31vwk] {
  font-size: 12.5px;
  color: var(--sub-color);
}

.breakdown-row span:nth-of-type(2)[b-jqoor31vwk] {
  color: var(--label-color);
}

.breakdown-table-header[b-jqoor31vwk] {
  color: var(--text-color);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.breakdown-table-subheader[b-jqoor31vwk] {
  color: var(--faint-color);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.breakdown-table-col-ability[b-jqoor31vwk] {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: lowercase;
  font-size: 13px;
  color: var(--text-color);
}

.breakdown-table .fakeImg[b-jqoor31vwk] {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  border: 1px solid var(--panel-border);
  background-color: var(--sub-alt-color);
}

.breakdown-row:hover[b-jqoor31vwk] {
  color: var(--main-color);
  transition: color 0.2s ease;
}

.breakdown-row:hover .breakdown-table-col-ability[b-jqoor31vwk] {
  color: var(--main-color);
}

/* percentage bar riding the row's bottom border */
.breakdown-row[b-jqoor31vwk]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: var(--percentage);
  animation: bar-animation-b-jqoor31vwk 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  background-color: var(--sub-color);
  transition: background-color 0.2s ease;
}

/* last row has no border below — keep its bar inside the container */
.breakdown-row:last-child[b-jqoor31vwk]::after {
  bottom: 0;
}

.breakdown-row:hover[b-jqoor31vwk]::after {
  background-color: var(--main-color);
}

@keyframes bar-animation-b-jqoor31vwk {
  0% {
    width: 0;
  }
  100% {
    width: var(--percentage);
  }
}

a[b-jqoor31vwk] {
  text-decoration: none;
  color: inherit;
}

.pet-icon[b-jqoor31vwk] {
  border-color: var(--main-color);
}

/* the pet marker rides after the name — same tag language as the vault tag */
.pet-tag[b-jqoor31vwk] {
  flex: none;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--main-color) 65%, transparent);
  border-radius: 2px;
  color: var(--main-color);
  font-size: 9.5px;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* /Components/Table/DMBuffTable.razor.rz.scp.css */
/* Breakdown Table — a subgrid so the value column shrinks to its widest
   content across all rows, like table cells did */
.breakdown-table[b-k2n3t05hdk] {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  font-family: "Roboto Mono", sans-serif;
}

.breakdown-head[b-k2n3t05hdk],
.breakdown-row[b-k2n3t05hdk] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}

.breakdown-head[b-k2n3t05hdk] {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 56px;
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--panel-border);
}

.breakdown-row[b-k2n3t05hdk] {
  position: relative;
  border-bottom: 1px solid var(--panel-border-inner);
}

.breakdown-row:last-child[b-k2n3t05hdk] {
  border-bottom: none;
}

.breakdown-head .breakdown-cell[b-k2n3t05hdk] {
  padding: 0 18px;
}

.breakdown-row .breakdown-cell[b-k2n3t05hdk] {
  padding: 4px 18px;
}

.breakdown-cell:not(:first-child)[b-k2n3t05hdk] {
  text-align: right;
}

.breakdown-row .breakdown-cell:not(:first-child)[b-k2n3t05hdk] {
  font-size: 12.5px;
  color: var(--sub-color);
}

.breakdown-row span:nth-of-type(2)[b-k2n3t05hdk] {
  color: var(--label-color);
}

.constant-buffs[b-k2n3t05hdk] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
  flex-wrap: nowrap;
  justify-self: center;
}

.constant-buffs-item[b-k2n3t05hdk] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.constant-buffs .fakeImg[b-k2n3t05hdk] {
  width: 26px;
  height: 26px;
}

.breakdown-table-header[b-k2n3t05hdk] {
  color: var(--text-color);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.breakdown-table-header-row[b-k2n3t05hdk] {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.breakdown-table-subheader[b-k2n3t05hdk] {
  color: var(--faint-color);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.breakdown-table-col-ability[b-k2n3t05hdk] {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: lowercase;
  font-size: 13px;
  color: var(--text-color);
}

.breakdown-table .fakeImg[b-k2n3t05hdk] {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  border: 1px solid var(--panel-border);
  background-color: var(--sub-alt-color);
}

.breakdown-row:hover[b-k2n3t05hdk] {
  color: var(--main-color);
  transition: color 0.2s ease;
}

.breakdown-row:hover .breakdown-table-col-ability[b-k2n3t05hdk] {
  color: var(--main-color);
}

/* percentage bar riding the row's bottom border */
.breakdown-row[b-k2n3t05hdk]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: var(--percentage);
  animation: bar-animation-b-k2n3t05hdk 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  background-color: var(--sub-color);
  transition: background-color 0.2s ease;
}

/* last row has no border below — keep its bar inside the container */
.breakdown-row:last-child[b-k2n3t05hdk]::after {
  bottom: 0;
}

.breakdown-row:hover[b-k2n3t05hdk]::after {
  background-color: var(--main-color);
}

@keyframes bar-animation-b-k2n3t05hdk {
  0% {
    width: 0;
  }
  100% {
    width: var(--percentage);
  }
}

a[b-k2n3t05hdk] {
  text-decoration: none;
  color: inherit;
}
/* /Components/Table/DMGearList.razor.rz.scp.css */
/* Gear Strip */
.gear-list[b-zr5urqn6zb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    width: 100%;
    font-family: "Roboto Mono", sans-serif;
    /* queried below to drop the talents when the strip runs out of room */
    container-type: inline-size;
    container-name: gear-strip;
}

.gear-group[b-zr5urqn6zb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gear-group-label[b-zr5urqn6zb] {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--faint-color);
}

.gear-group-icons[b-zr5urqn6zb] {
    display: flex;
    gap: 5px;
}

.gear-item[b-zr5urqn6zb] {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.gear-icon[b-zr5urqn6zb] {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background-color: var(--sub-alt-color);
    border: 1px solid var(--panel-border);
    display: block;
    transition: border-color 0.15s ease;
}

.gear-item:hover .gear-icon[b-zr5urqn6zb] {
    border-color: var(--main-color);
}

/* hero keystone — the build-defining talent leads the strip highlighted */
.gear-icon.keystone[b-zr5urqn6zb] {
    border-color: var(--main-color);
    box-shadow: 0 0 6px color-mix(in srgb, var(--main-color) 40%, transparent);
}

/* talents sit centered in the space between gear and avg ilvl — this auto
   margin splits the leftover space evenly with the ilvl block's */
.gear-group-talents[b-zr5urqn6zb] {
    margin-left: auto;
}

/* Talents are by far the widest group and the first thing that pushes the strip
   onto a second row. Measured: the full strip needs 1173px to stay on one line,
   699px without the talents. Below the threshold the group is dropped, so the
   strip stays one row and the spell/buff lists underneath keep that height.
   A container query rather than a media query on purpose: the wrapper is scaled
   by --dm-zoom and capped by --content-max-width, so the viewport width says
   very little about how much room the strip actually has. */
@container gear-strip (max-width: 1200px) {
    .gear-group-talents[b-zr5urqn6zb] {
        display: none;
    }
}

/* Even without the talents the strip needs 767px, so on the narrowest usable
   window (the 768px step, which leaves the strip 609px) it would wrap the avg
   ilvl block onto a second row. Drop the group labels, tighten the gaps and
   take the icons down a notch, which brings it to 537px and keeps one row all
   the way down. The labels are the cheapest thing to lose: the icons say what
   they are. */
@container gear-strip (max-width: 780px) {
    .gear-list[b-zr5urqn6zb] {
        gap: 8px 10px;
    }

    .gear-group > .gear-group-label[b-zr5urqn6zb] {
        display: none;
    }

    .gear-icon[b-zr5urqn6zb] {
        width: 24px;
        height: 24px;
    }
}

/* Average item level block */
.gear-ilvl[b-zr5urqn6zb] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-left: auto;
    text-align: right;
}

.gear-ilvl-value[b-zr5urqn6zb] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}
/* /Components/Table/DMProfileSummary.razor.rz.scp.css */
/* Read-back of a parsed simc profile. It takes the place of the pasted string
   inside the paste field, so it is sized like the textarea it replaces: the
   cell must not change height when a paste lands. */
.profile-summary[b-oik9tddrmp] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 76px;
    font-family: "Roboto Mono", sans-serif;
}

/* the armory portrait leads the row, exactly as tall as the read-back block
   so it sits flush with the name above and the gear strip below */
.profile-avatar[b-oik9tddrmp] {
    width: 76px;
    height: 76px;
    flex: none;
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    background-color: var(--bg-deep);
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.profile-summary-body[b-oik9tddrmp] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.profile-summary-head[b-oik9tddrmp] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-summary-name[b-oik9tddrmp] {
    font-size: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-color);
}

.profile-summary-meta[b-oik9tddrmp] {
    font-size: 12px;
    color: var(--sub-color);
}
/* /Components/Table/DMRankingList.razor.rz.scp.css */
/* Ranking List — blueprint table */
.ranking-list[b-yt8t48p32p] {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: "Roboto Mono", sans-serif;
}

.ranking-row[b-yt8t48p32p] {
    display: grid;
    grid-template-columns: 44px 1fr 320px 120px 100px;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--panel-border-inner);
}

.ranking-row:last-child[b-yt8t48p32p] {
    border-bottom: none;
}

.ranking-row.expandable[b-yt8t48p32p] {
    cursor: pointer;
}

/* Vault choice marker */
.ranking-vault-tag[b-yt8t48p32p] {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--main-color) 65%, transparent);
    border-radius: 2px;
    color: var(--main-color);
    font-size: 9.5px;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Expanded equipped → new diff */
.ranking-diff[b-yt8t48p32p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 2px 2px;
    border-top: 1px dashed var(--panel-border-inner);
    margin-top: 4px;
}

.ranking-diff-row[b-yt8t48p32p] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ranking-diff-slot[b-yt8t48p32p] {
    width: 90px;
    color: var(--faint-color);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ranking-diff-icon[b-yt8t48p32p] {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    border: 1px solid var(--panel-border);
    background-color: var(--sub-alt-color);
    display: block;
}

.ranking-diff-icon.new[b-yt8t48p32p] {
    border-color: var(--main-color);
}

.ranking-diff-arrow[b-yt8t48p32p] {
    color: var(--faint-color);
    font-size: 12px;
}

.ranking-diff-empty[b-yt8t48p32p] {
    width: 26px;
    text-align: center;
    color: var(--faint-color);
}

.ranking-diff-label[b-yt8t48p32p] {
    color: var(--sub-color);
    font-size: 12px;
    text-transform: lowercase;
}

/* Lead cell — the tested item's icon (or rank number on baseline rows) */
.ranking-lead[b-yt8t48p32p] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ranking-lead-icon[b-yt8t48p32p] {
    width: 38px;
    height: 38px;
    border-radius: 3px;
    background-color: var(--sub-alt-color);
    border: 1px solid var(--panel-border);
    display: block;
    transition: border-color 0.15s ease;
}

.ranking-row:hover .ranking-lead-icon[b-yt8t48p32p] {
    border-color: var(--main-color);
}

.ranking-rank[b-yt8t48p32p] {
    color: var(--label-color);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.ranking-info[b-yt8t48p32p] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.ranking-name[b-yt8t48p32p] {
    color: var(--text-color);
    font-size: 14.5px;
    /* tall enough that the inline vault tag's border is not clipped by the
       overflow below */
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: lowercase;
}

.ranking-name.baseline[b-yt8t48p32p] {
    font-weight: 700;
}

.ranking-row:hover .ranking-name[b-yt8t48p32p] {
    color: var(--main-color);
    transition: color 0.2s ease;
}

/* Small flat gear strip */
.ranking-strip[b-yt8t48p32p] {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.ranking-icon-link[b-yt8t48p32p] {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.ranking-strip-icon[b-yt8t48p32p] {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background-color: var(--sub-alt-color);
    display: block;
}

.ranking-strip-icon.equip-swapped[b-yt8t48p32p] {
    outline: 1px solid var(--main-color);
    outline-offset: 1px;
}

/* Bar */
.ranking-bar[b-yt8t48p32p] {
    height: 6px;
    background-color: var(--panel-border-inner);
    position: relative;
    overflow: hidden;
}

.ranking-bar-fill[b-yt8t48p32p] {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: rgba(255, 255, 255, 0.12);
    border-right: 1px solid var(--sub-color);
    animation: bar-grow-b-yt8t48p32p 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ranking-bar-fill.baseline[b-yt8t48p32p] {
    background-color: rgba(255, 255, 255, 0.28);
    border-right: 1px solid var(--text-color);
}

/* Values */
.ranking-dps[b-yt8t48p32p] {
    color: var(--text-color);
    font-size: 15.5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ranking-dps.baseline[b-yt8t48p32p] {
    font-weight: 700;
}

.ranking-delta[b-yt8t48p32p] {
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ranking-delta.positive[b-yt8t48p32p] {
    color: var(--ok-color);
}

.ranking-delta.negative[b-yt8t48p32p] {
    color: var(--error-color);
}

.ranking-delta.neutral[b-yt8t48p32p] {
    color: var(--label-color);
}

@keyframes bar-grow-b-yt8t48p32p {
    from {
        width: 0;
    }
}

@media (max-width: 1024px) {
    .ranking-row[b-yt8t48p32p] {
        grid-template-columns: 44px 1fr 100px 90px;
    }

    .ranking-bar[b-yt8t48p32p] {
        display: none;
    }
}
/* /Dialogues/HelpDialog.razor.rz.scp.css */
/* Tabs — attached bar under the shell header */
.help-tabs[b-76ygb17q1a] {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--panel-border);
}

.help-tab[b-76ygb17q1a] {
    padding: 9px 16px;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--label-color);
    border-right: 1px solid var(--panel-border);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.help-tab:hover[b-76ygb17q1a] {
    color: var(--sub-color);
}

.help-tab.active[b-76ygb17q1a] {
    color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 7%, transparent);
}

/* Panels — fixed height on purpose: the dialog is centred, so a taller panel
   used to shift the whole box (and the tab row with it) out from under the
   cursor mid-click. Long panels scroll inside instead. */
.help-panel[b-76ygb17q1a] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 24px;
    height: 460px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
}

.help-block[b-76ygb17q1a] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.help-block p[b-76ygb17q1a] {
    margin: 0;
    color: var(--sub-color);
    font-size: 13px;
    line-height: 1.7;
}

.help-block ul[b-76ygb17q1a],
.help-block ol[b-76ygb17q1a] {
    margin: 0;
    padding-left: 1.4rem;
    color: var(--sub-color);
    font-size: 13px;
    line-height: 1.6;
}

.help-block li[b-76ygb17q1a] {
    margin-bottom: 6px;
}

.help-block li:last-child[b-76ygb17q1a] {
    margin-bottom: 0;
}

.help-block li[b-76ygb17q1a]::marker {
    color: var(--label-color);
    font-size: 10px;
}

.help-block strong[b-76ygb17q1a] {
    color: var(--text-color);
    font-weight: 600;
}

.help-block code[b-76ygb17q1a] {
    background: color-mix(in srgb, var(--main-color) 8%, transparent);
    padding: 0 5px;
    font-family: "Roboto Mono", monospace;
    font-size: 0.95em;
    color: var(--main-color);
}
/* /Dialogues/LegalDialog.razor.rz.scp.css */
.legal-row[b-o419s8tv1y] {
    display: grid;
    grid-template-columns: 150px 1fr;
    border-bottom: 1px solid var(--panel-border-inner);
}

.legal-row:last-child[b-o419s8tv1y] {
    border-bottom: none;
}

.legal-row-label[b-o419s8tv1y] {
    padding: 18px 20px;
    border-right: 1px solid var(--panel-border-inner);
}

.legal-row-text[b-o419s8tv1y] {
    padding: 18px 22px;
    color: var(--sub-color);
    font-size: 13px;
    line-height: 1.7;
}
/* /Dialogues/StatusDialog.razor.rz.scp.css */
/* ---- Header (rendered inside the shell title bar) ---- */

.status-header[b-ptq0x8isw1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-indicator[b-ptq0x8isw1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-b-ptq0x8isw1 2s ease-in-out infinite;
}

.status-indicator.online[b-ptq0x8isw1] {
    background-color: var(--ok-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--ok-color) 60%, transparent);
}

.status-indicator.maintenance[b-ptq0x8isw1] {
    background-color: var(--warning-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--warning-color) 60%, transparent);
}

.status-indicator.offline[b-ptq0x8isw1] {
    background-color: var(--error-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--error-color) 60%, transparent);
    animation: none;
}

.status-label[b-ptq0x8isw1] {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-color);
}

/* ---- Stats Grid ---- */

.stats-grid[b-ptq0x8isw1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--panel-border);
}

.stat-card[b-ptq0x8isw1] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-right: 1px solid var(--panel-border-inner);
}

.stat-card:last-child[b-ptq0x8isw1] {
    border-right: none;
}

.stat-value[b-ptq0x8isw1] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Services / Workers ---- */

.services-section[b-ptq0x8isw1] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 24px 6px;
}

.services-section .dm-label[b-ptq0x8isw1] {
    margin-bottom: 8px;
}

.service-row[b-ptq0x8isw1] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    border-bottom: 1px solid var(--panel-border-inner);
}

.service-row:last-child[b-ptq0x8isw1] {
    border-bottom: none;
}

.service-dot[b-ptq0x8isw1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.service-dot.online[b-ptq0x8isw1], .service-dot.idle[b-ptq0x8isw1] {
    background-color: var(--ok-color);
}

.service-dot.busy[b-ptq0x8isw1] {
    background-color: var(--warning-color);
}

.service-dot.offline[b-ptq0x8isw1] {
    background-color: var(--error-color);
}

.service-dot.unknown[b-ptq0x8isw1] {
    background-color: var(--sub-color);
}

.service-name[b-ptq0x8isw1] {
    font-size: 13.5px;
    color: var(--text-color);
    flex: 1;
}

.service-detail[b-ptq0x8isw1] {
    font-size: 12.5px;
    color: var(--label-color);
    font-variant-numeric: tabular-nums;
}

.service-detail.latency-good[b-ptq0x8isw1] {
    color: var(--ok-color);
}

.service-detail.latency-ok[b-ptq0x8isw1] {
    color: var(--warning-color);
}

.service-detail.latency-slow[b-ptq0x8isw1] {
    color: var(--error-color);
}

/* ---- Problems ---- */

.issues-section[b-ptq0x8isw1] {
    padding-bottom: 22px;
}

.issues-section .problem-row[b-ptq0x8isw1] {
    border: 1px solid var(--panel-border);
    border-left: 2px solid var(--sub-color);
    padding: 9px 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.problem-glyph[b-ptq0x8isw1] {
    font-size: 10px;
    color: var(--sub-color);
    flex: none;
}

.issues-section .problem-row span:last-child[b-ptq0x8isw1] {
    font-size: 13px;
    color: var(--sub-color);
    line-height: 1.4;
    text-align: left;
}

.problem-row.severity-error[b-ptq0x8isw1] {
    border-left-color: var(--error-color);
}

.problem-row.severity-error .problem-glyph[b-ptq0x8isw1] {
    color: var(--error-color);
}

.problem-row.severity-warning[b-ptq0x8isw1] {
    border-left-color: var(--warning-color);
}

.problem-row.severity-warning .problem-glyph[b-ptq0x8isw1] {
    color: var(--warning-color);
}

.problem-row.severity-info[b-ptq0x8isw1] {
    border-left-color: var(--main-color);
}

.problem-row.severity-info .problem-glyph[b-ptq0x8isw1] {
    color: var(--main-color);
}

.problem-row.no-issues[b-ptq0x8isw1] {
    border-left-color: var(--ok-color);
}

.problem-row.no-issues .problem-glyph[b-ptq0x8isw1] {
    color: var(--ok-color);
}

/* ---- Animation ---- */

@keyframes pulse-b-ptq0x8isw1 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ---- Responsive ---- */

@media (max-width: 500px) {
    .stats-grid[b-ptq0x8isw1] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Dialogues/TeamDialog.razor.rz.scp.css */
.team-body[b-01jyvm6o9f] {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    gap: 12px;
    font-family: "Roboto Mono", sans-serif;
}

.member-block[b-01jyvm6o9f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 10px;
}

.member-header[b-01jyvm6o9f] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.member-name[b-01jyvm6o9f] {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

a.member-name:hover[b-01jyvm6o9f] {
    color: var(--main-color);
}

.member-link-mark[b-01jyvm6o9f] {
    color: var(--main-color);
    font-size: 10px;
}

.member-bio[b-01jyvm6o9f] {
    color: var(--sub-color);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

.contributions-label[b-01jyvm6o9f] {
    margin-top: 6px;
}

.contributions-grid[b-01jyvm6o9f] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.contribution-item[b-01jyvm6o9f] {
    border: 1px solid var(--panel-border);
    padding: 5px 10px;
    color: var(--sub-color);
    font-size: 11.5px;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.contribution-item:hover[b-01jyvm6o9f] {
    border-color: var(--main-color);
    color: var(--main-color);
}

.team-loading[b-01jyvm6o9f] {
    color: var(--sub-color);
    font-size: 13px;
}

/* Thanks-to section */
.thanks-divider[b-01jyvm6o9f] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.thanks-divider-line[b-01jyvm6o9f] {
    flex: 1;
    height: 1px;
    background: var(--panel-border);
}

.thanks-list[b-01jyvm6o9f] {
    display: flex;
    flex-direction: column;
}

.thanks-row[b-01jyvm6o9f] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--panel-border-inner);
}

.thanks-row:last-child[b-01jyvm6o9f] {
    border-bottom: none;
}

.thanks-name[b-01jyvm6o9f] {
    color: var(--text-color);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

a.thanks-name:hover[b-01jyvm6o9f] {
    color: var(--main-color);
}

.thanks-did[b-01jyvm6o9f] {
    color: var(--label-color);
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* /Dialogues/VersionDialog.razor.rz.scp.css */
.version-row[b-0a3x1jchlz] {
    display: grid;
    grid-template-columns: 110px 1fr;
    border-bottom: 1px solid var(--panel-border-inner);
}

.version-row:last-child[b-0a3x1jchlz] {
    border-bottom: none;
}

.version-side[b-0a3x1jchlz] {
    padding: 18px 0 18px 24px;
    border-right: 1px solid var(--panel-border-inner);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.version-title[b-0a3x1jchlz] {
    color: var(--sub-color);
    font-size: 16px;
    font-weight: 700;
}

.version-title.latest[b-0a3x1jchlz] {
    color: var(--text-color);
}

.version-title.milestone[b-0a3x1jchlz] {
    color: var(--main-color);
}

.version-date[b-0a3x1jchlz] {
    color: var(--label-color);
    font-size: 11px;
}

.latest-badge[b-0a3x1jchlz] {
    border: 1px solid color-mix(in srgb, var(--main-color) 40%, transparent);
    color: var(--main-color);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 6px;
    margin-top: 5px;
    align-self: flex-start;
}

.milestone-badge[b-0a3x1jchlz] {
    background: var(--main-color);
    color: var(--bg-deep);
    -webkit-text-fill-color: var(--bg-deep);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 6px;
    margin-top: 5px;
    align-self: flex-start;
}

.version-body[b-0a3x1jchlz] {
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.description-text[b-0a3x1jchlz] {
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.5;
}

.version-body .dm-label[b-0a3x1jchlz] {
    font-size: 11px;
}

.change-list[b-0a3x1jchlz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.change-item[b-0a3x1jchlz] {
    color: var(--sub-color);
    font-size: 12.5px;
    line-height: 1.6;
}

/* ---- prehistory — the projects before the faire ---- */

.history-divider[b-0a3x1jchlz] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 10px;
}

.history-divider[b-0a3x1jchlz]::before,
.history-divider[b-0a3x1jchlz]::after {
    content: "";
    height: 1px;
    flex: 1;
    background-color: var(--panel-border-inner);
}

.history-row .version-side[b-0a3x1jchlz] {
    /* no version numbers back then — the era name carries the row */
    justify-content: center;
}

.history-title[b-0a3x1jchlz] {
    color: var(--label-color);
    font-size: 13px;
    font-weight: 700;
    text-transform: lowercase;
}

.history-text[b-0a3x1jchlz] {
    color: var(--label-color);
    font-size: 12.5px;
    line-height: 1.6;
    font-style: italic;
}

.history-closing[b-0a3x1jchlz] {
    text-align: center;
    color: var(--sub-color);
    font-size: 12.5px;
    font-style: italic;
    padding: 18px 24px 6px;
    margin: 0;
}

.state-text[b-0a3x1jchlz] {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--sub-color);
    padding: 24px;
}

.state-text.pulsing[b-0a3x1jchlz] {
    animation: loading-fade-b-0a3x1jchlz 1.6s ease-in-out infinite;
}

@keyframes loading-fade-b-0a3x1jchlz {
    0% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.95;
    }
    100% {
        opacity: 0.45;
    }
}
/* /Layout/DMMobileGate.razor.rz.scp.css */
.mobile-gate[b-rzxhwjvm5e] {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--bg-color);
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    font-family: "Roboto Mono", sans-serif;
}

/* The gate covers everything below the smallest usable --content-max-width
   step. 768px is the last width that still resolves to the 502px step, where
   the result pages fall apart, so the gate has to include it. */
@media (max-width: 768px) {
    .mobile-gate[b-rzxhwjvm5e] {
        display: flex;
    }
}

.gate-panel[b-rzxhwjvm5e] {
    border: 1px solid var(--panel-border);
    background-color: var(--bg-deep);
    width: 100%;
    max-width: 420px;
    padding: 44px 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.gate-logo[b-rzxhwjvm5e] {
    transform: scale(1.5);
    transform-origin: center;
    margin-bottom: 12px;
}

.gate-text[b-rzxhwjvm5e] {
    color: var(--sub-color);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
    max-width: 320px;
}

/* /Layout/MainLayout.razor.rz.scp.css */
main[b-zfpxbumzzs] {
    background-color: var(--bg-color);
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: calc(26px * var(--dm-zoom)) calc(26px * var(--dm-zoom));
    color: var(--text-color);
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    padding-bottom: 1dvh;
    font-family: "Roboto Mono", sans-serif;
}

@media (max-width: 1024px) {
    main[b-zfpxbumzzs] {
        overflow-y: auto !important;
    }
}

/* Global UI scale lives here — main itself stays at 1:1 so it keeps matching
   the viewport exactly, everything inside the wrapper is drawn --dm-zoom
   larger. The max-width keeps the scaled wrapper inside the window on narrow
   screens (viewport units are not rescaled by zoom, hence the division), minus
   --content-gutter on each side so the content never touches the window edge
   in the widths where the current --content-max-width step does not fit. */
.wrapper[b-zfpxbumzzs] {
    zoom: var(--dm-zoom);
    width: var(--content-max-width);
    max-width: calc((100dvw - 2 * var(--content-gutter)) / var(--dm-zoom));
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content[b-zfpxbumzzs] {
    display: flex;
    flex: 1;
    min-height: 0; /* lets result pages shrink + scroll instead of pushing the footer out */
    width: 100%;
    align-items: center;
    position: relative;
}

.nav-bar[b-zfpxbumzzs] {
    margin-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--sub-color);
    font-family: "Roboto Mono", sans-serif;
}

.nav-bar-left[b-zfpxbumzzs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.nav-bar-center[b-zfpxbumzzs] {
    display: flex;
    justify-content: center;
}

.logo[b-zfpxbumzzs] {
    display: flex;
}

.nav-bar-buttons[b-zfpxbumzzs] {
    display: flex;
    flex-direction: row;
    gap: 1.1rem;
    font-size: 13px;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.nav-bar-buttons .text-button a[b-zfpxbumzzs] {
    color: var(--sub-color);
    transition: color 0.15s ease;
}

.nav-bar-buttons .text-button a:hover[b-zfpxbumzzs] {
    color: var(--text-color);
}

.bottom-bar[b-zfpxbumzzs] {
    margin-top: auto; /* Pushes it to the bottom */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* less below than above: the window edge already provides room down there */
    padding: 14px 0 7px;
    font-family: "Roboto Mono", sans-serif;
    color: var(--faint-color);
    font-size: 12px;
    line-height: 1rem;
}

.bottom-bar #right[b-zfpxbumzzs] {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.bottom-bar #left[b-zfpxbumzzs] {
    display: flex;
    gap: 1rem;
}

.version-separator[b-zfpxbumzzs] {
    color: var(--faint-color);
}

.text-button[b-zfpxbumzzs] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 12px;
    color: var(--faint-color);
    cursor: pointer;
    transition: color 0.15s ease;
}

.text-button:hover[b-zfpxbumzzs] {
    color: var(--text-color);
}

/* anchor variant (e.g. the addon page link) matches the button look */
a.text-button[b-zfpxbumzzs] {
    text-decoration: none;
}

.text-button.accent[b-zfpxbumzzs] {
    color: var(--main-color);
}

/* Status button severity colors */
.status-button-error[b-zfpxbumzzs],
.status-button-unknown[b-zfpxbumzzs] {
    color: var(--error-color) !important;
}

.status-button-warning[b-zfpxbumzzs] {
    color: var(--warning-color) !important;
}

.status-button-info[b-zfpxbumzzs] {
    color: var(--main-color) !important;
}

.hidden[b-zfpxbumzzs] {
    display: none;
}
/* /Pages/Auth/AuthPage.razor.rz.scp.css */
.auth-wrapper[b-5lkujj7ly1] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: "Roboto Mono", sans-serif;
}

.auth-container[b-5lkujj7ly1] {
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-panel[b-5lkujj7ly1] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 44px 52px;
}

.auth-panel.login-panel[b-5lkujj7ly1] {
    border-right: 1px solid var(--panel-border);
}

.auth-submit[b-5lkujj7ly1] {
    width: 100%;
    text-align: center;
    margin-top: 4px;
    padding: 13px 0;
    font-size: 14px;
}

.auth-submit.outline[b-5lkujj7ly1] {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 13px 0;
}

.auth-remember[b-5lkujj7ly1] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12.5px;
    color: var(--sub-color);
}

.auth-forgot[b-5lkujj7ly1] {
    font-size: 12px;
    text-align: right;
    color: var(--label-color);
    cursor: pointer;
    transition: color 0.15s ease;
}

.auth-forgot:hover[b-5lkujj7ly1] {
    color: var(--main-color);
}

/* visually hidden but still focusable, the label draws the box */
.auth-checkbox[b-5lkujj7ly1] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.auth-checkbox:focus-visible + .auth-checkbox-label[b-5lkujj7ly1]::before {
    outline: 1px solid var(--main-color);
    outline-offset: 2px;
}

.auth-checkbox + .auth-checkbox-label[b-5lkujj7ly1] {
    position: relative;
    padding-left: 1.5rem;
    cursor: pointer;
    color: var(--sub-color);
    font-size: 12.5px;
    user-select: none;
}

.auth-checkbox + .auth-checkbox-label[b-5lkujj7ly1]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: transparent;
    border: 1px solid var(--panel-border);
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.auth-checkbox + .auth-checkbox-label:hover[b-5lkujj7ly1]::before {
    border-color: var(--sub-color);
}

.auth-checkbox:checked + .auth-checkbox-label[b-5lkujj7ly1]::before {
    background-color: color-mix(in srgb, var(--main-color) 15%, transparent);
    border-color: var(--main-color);
}

.auth-checkbox:checked + .auth-checkbox-label[b-5lkujj7ly1]::after {
    content: "check";
    font-family: 'Material Icons Sharp';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 10px;
    color: var(--main-color);
}

@media (max-width: 1024px) {
    .auth-container[b-5lkujj7ly1] {
        grid-template-columns: 1fr;
    }

    .auth-panel.login-panel[b-5lkujj7ly1] {
        border-right: none;
        border-bottom: 1px solid var(--panel-border);
    }
}

.loading-spinner[b-5lkujj7ly1] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid transparent;
    border-top: 2px solid var(--text-color);
    border-right: 2px solid var(--text-color);
    border-bottom: 2px solid var(--text-color);
    border-radius: 50%;
    width: 16pt;
    height: 16pt;
    animation: spin-b-5lkujj7ly1 2s linear infinite;
    z-index: 9999;
}

@keyframes spin-b-5lkujj7ly1 {
    0%      { transform: rotate(0deg); }
    100%    { transform: rotate(360deg); }
}
/* /Pages/Profile/Component/DMActivityTable.razor.rz.scp.css */
.activity-table[b-7na7vgj8ns] {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: "Roboto Mono", sans-serif;
}

/* fixed 44px rows so the list cap lands on an exact row boundary
   (no half-clipped last entry) */
.activity-header[b-7na7vgj8ns],
.activity-row[b-7na7vgj8ns] {
    display: grid;
    grid-template-columns: 110px 1fr 130px 110px 40px;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 22px;
    box-sizing: border-box;
}

.activity-header[b-7na7vgj8ns] {
    border-bottom: 1px solid var(--panel-border);
    position: sticky;
    top: 0;
    background: var(--bg-color);
    z-index: 1;
}

.dm-label.right[b-7na7vgj8ns] {
    text-align: right;
}

.activity-row[b-7na7vgj8ns] {
    font-size: 13.5px;
    border-bottom: 1px solid var(--panel-border-inner);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.activity-row:last-child[b-7na7vgj8ns] {
    border-bottom: none;
}

.activity-row:hover[b-7na7vgj8ns] {
    background-color: color-mix(in srgb, var(--main-color) 4%, transparent);
}

.activity-type.type-quicksim[b-7na7vgj8ns] {
    color: var(--main-color);
}

.activity-type.type-statweights[b-7na7vgj8ns] {
    color: var(--accent-statweights);
}

.activity-type.type-topgear[b-7na7vgj8ns] {
    color: #e0b052;
}

.activity-name[b-7na7vgj8ns] {
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-realm[b-7na7vgj8ns] {
    color: var(--sub-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-when[b-7na7vgj8ns] {
    color: var(--label-color);
    text-align: right;
    white-space: nowrap;
}

.activity-open[b-7na7vgj8ns] {
    color: var(--label-color);
    text-align: right;
    transition: color 0.15s ease, transform 0.15s ease;
}

.activity-row:hover .activity-open[b-7na7vgj8ns] {
    color: var(--main-color);
    transform: translateX(2px);
}

/* Empty state — fixed height so the panel stays a consistent size when empty */
.empty-state[b-7na7vgj8ns] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 520px;
}

.empty-state-text[b-7na7vgj8ns] {
    color: var(--label-color);
    font-size: 12px;
}

@media (max-width: 768px) {
    .activity-header[b-7na7vgj8ns],
    .activity-row[b-7na7vgj8ns] {
        grid-template-columns: 100px 1fr 90px 40px;
    }

    .activity-realm[b-7na7vgj8ns],
    .activity-header .dm-label:nth-child(3)[b-7na7vgj8ns] {
        display: none;
    }
}
/* /Pages/Profile/Dialoge/DeleteAccountDialog.razor.rz.scp.css */
.dd-body[b-abdis8jsf4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 24px;
    font-family: "Roboto Mono", sans-serif;
    max-width: 100%;
}

.dd-confirm[b-abdis8jsf4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dd-keyword[b-abdis8jsf4] {
    color: var(--error-color);
    letter-spacing: 1.5px;
}

.dd-warning-inline[b-abdis8jsf4] {
    margin: 0;
    font-size: 10px;
    color: var(--faint-color);
    line-height: 1.6;
}

.dd-actions[b-abdis8jsf4] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 6px;
}

.dd-cancel[b-abdis8jsf4] {
    color: var(--label-color);
    font-size: 11px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.dd-cancel:hover[b-abdis8jsf4] {
    color: var(--text-color);
}

.dd-actions .dm-button[b-abdis8jsf4] {
    padding: 9px 24px;
    font-size: 11px;
}

.dd-error[b-abdis8jsf4] {
    margin: 0;
    font-size: 11px;
    color: var(--error-color);
    line-height: 1.5;
}
/* /Pages/Profile/Dialoge/UpdateAccountDialog.razor.rz.scp.css */
.ua-body[b-nqmdehwbim] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 24px;
    font-family: "Roboto Mono", sans-serif;
}

.ua-field[b-nqmdehwbim] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ua-hint[b-nqmdehwbim] {
    margin: 4px 0 0;
    font-size: 9.5px;
    color: var(--faint-color);
    line-height: 1.4;
}

.ua-actions[b-nqmdehwbim] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 6px;
}

.ua-cancel[b-nqmdehwbim] {
    color: var(--label-color);
    font-size: 11px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.ua-cancel:hover[b-nqmdehwbim] {
    color: var(--text-color);
}

.ua-actions .dm-button[b-nqmdehwbim] {
    padding: 9px 24px;
    font-size: 11px;
}
/* /Pages/Profile/ProfilePage.razor.rz.scp.css */
.profile-page[b-towrynsilg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centered while it fits — "safe" top-aligns when it overflows */
    justify-content: center;
    justify-content: safe center;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    width: var(--content-max-width);
    margin: 0 auto;
    padding: 14px 0;
    gap: 22px;
    font-family: "Roboto Mono", sans-serif;
}

/*TOPBAR*/
.profile-topbar[b-towrynsilg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    flex: none;
    padding: 24px 30px;
    color: var(--text-color);
}

.profile-identity[b-towrynsilg] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.profile-avatar[b-towrynsilg] {
    width: 54px;
    height: 54px;
    border: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    flex: none;
}

.profile-info[b-towrynsilg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.profile-info .name[b-towrynsilg] {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-button[b-towrynsilg] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: var(--label-color);
    transition: color 0.15s ease;
}

.edit-button:hover[b-towrynsilg] {
    color: var(--main-color);
}

.profile-info .joined[b-towrynsilg] {
    font-size: 12px;
    color: var(--label-color);
}

.profile-actions[b-towrynsilg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/*ACTIVITY LIST — caps at an exact row multiple (sticky header + 13 rows),
  shrinks + scrolls on short windows, centered by the page when it fits */
.profile-content[b-towrynsilg] {
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    /* header (44px) + 13 rows × 44px */
    max-height: 616px;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-color);
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
}
/* /Pages/QuickSim/InputPage.razor.rz.scp.css */
.input-view-content[b-rmng02eei1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: var(--content-max-width);
}

.char-selection[b-rmng02eei1] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--input-max-width);
    margin: 0 auto;
    gap: 36px;
}

/* Name + realm duo cell */
.input-duo[b-rmng02eei1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.duo-half[b-rmng02eei1] {
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.duo-half:first-child[b-rmng02eei1] {
    border-right: 1px solid var(--panel-border);
}

.char-line[b-rmng02eei1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Region dropdown prefixed to the realm input */
.realm-line[b-rmng02eei1] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.realm-input[b-rmng02eei1] {
    flex: 1;
    min-width: 0;
}

.region-select[b-rmng02eei1] {
    flex: none;
    border-right: 1px solid var(--panel-border);
    padding-right: 14px;
}

.region-select[b-rmng02eei1]  .custom-select {
    font-size: 22px;
    color: var(--main-color);
    padding: 0;
    margin: 0;
    width: auto;
}

.region-select[b-rmng02eei1]  .dropdown-arrow {
    display: none;
}

.region-select[b-rmng02eei1]  .custom-select:hover {
    color: var(--text-color);
}

.region-select[b-rmng02eei1]  .custom-select::after {
    content: "▾";
    font-size: 12px;
    margin-left: 4px;
    color: var(--label-color);
}

/* Shared input look inside blueprint cells */
.blueprint-input[b-rmng02eei1] {
    width: 100%;
    background-color: transparent;
    color: var(--text-color);
    font-size: 28px;
    outline: none;
    caret-color: var(--main-color);
    font-family: "Roboto Mono", sans-serif;
}

.blueprint-input[b-rmng02eei1]::placeholder {
    color: var(--text-color-disabled);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.blueprint-input:focus[b-rmng02eei1]::placeholder {
    opacity: 0.4;
}

/* SimC cell */
/* Same box on quicksim, stat weights and top gear: the paste field must not
   change size when you switch between the three. */
.simc-cell[b-rmng02eei1] {
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.simc-row[b-rmng02eei1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.simc-left[b-rmng02eei1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.simc-textarea[b-rmng02eei1] {
    resize: none;
    /* exactly the height of the profile read-back that replaces it, so the
       cell does not resize when a paste lands */
    min-height: 76px;
    max-height: 76px;
    overflow: hidden;
    line-height: 1.3;
    scrollbar-width: none;
}

.simc-textarea[b-rmng02eei1]::-webkit-scrollbar {
    display: none;
}

.simc-hint[b-rmng02eei1] {
    font-size: 11.5px;
    color: #3c3a44;
    white-space: nowrap;
    align-self: flex-end;
    padding-bottom: 4px;
}

/* Footer row: options bar + simulate */
.form-footer[b-rmng02eei1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Validation Circle */
.validation-circle[b-rmng02eei1] {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
    opacity: 0;
    animation: fadeIn-b-rmng02eei1 0.2s ease forwards;
}

.validation-circle.spinning[b-rmng02eei1] {
    border: 2px solid var(--panel-border);
    border-top-color: var(--main-color);
    animation: fadeIn-b-rmng02eei1 0.2s ease forwards, spin-b-rmng02eei1 0.6s linear infinite;
}

.validation-circle.valid[b-rmng02eei1] {
    border: 2px solid var(--ok-color);
}

.validation-circle.valid[b-rmng02eei1]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 6px;
    border-right: 1.5px solid var(--ok-color);
    border-bottom: 1.5px solid var(--ok-color);
    transform: translate(-50%, -60%) rotate(45deg);
}

.validation-circle.invalid[b-rmng02eei1] {
    border: 2px solid var(--error-color);
}

.validation-circle.invalid[b-rmng02eei1]::before,
.validation-circle.invalid[b-rmng02eei1]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5px;
    height: 7px;
    background: var(--error-color);
}

.validation-circle.invalid[b-rmng02eei1]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.validation-circle.invalid[b-rmng02eei1]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

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

@keyframes fadeIn-b-rmng02eei1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 1024px) {
    .input-duo[b-rmng02eei1] {
        grid-template-columns: 1fr;
    }

    .duo-half:first-child[b-rmng02eei1] {
        border-right: none;
        border-bottom: 1px solid var(--panel-border);
    }

    .form-footer[b-rmng02eei1] {
        justify-content: center;
    }
}

/* Right side of the paste row once a profile is in: the marker and the way
   back to an empty field. */
/* Pinned into the cell's top right corner instead of riding in the row: as a
   flex item it took width away from the profile, which left the item level
   floating short of the right edge. */
.simc-actions[b-rmng02eei1] {
    position: absolute;
    top: 26px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.simc-clear[b-rmng02eei1] {
    font-family: "Roboto Mono", sans-serif;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* it is the only thing to press in this state, so it reads like a button
       and not like a disabled label */
    color: var(--text-color);
    background: none;
    border: 1px solid var(--sub-color);
    padding: 4px 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.simc-clear:hover[b-rmng02eei1] {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 8%, transparent);
}

.simc-hint.parsed[b-rmng02eei1] {
    color: var(--main-color);
}
/* /Pages/QuickSim/ResultPage.razor.rz.scp.css */
/* General Layout */
.result-container[b-j2klzjmr07] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centered while everything fits — "safe" falls back to top when it overflows */
    justify-content: center;
    justify-content: safe center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    gap: 18px;
    padding: 10px 0;
}

/* Breadcrumb + actions row */
.result-topline[b-j2klzjmr07] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.result-breadcrumb[b-j2klzjmr07] {
    font-size: 12px;
    color: var(--faint-color);
}

.result-actions[b-j2klzjmr07] {
    display: flex;
    gap: 8px;
}

/* Top section with DPS and Graph */
.top-section[b-j2klzjmr07] {
    display: grid;
    grid-template-columns: 330px 1fr;
    width: 100%;
    flex-shrink: 0;
}

.dps-container[b-j2klzjmr07] {
    border-right: 1px solid var(--panel-border);
    padding: 12px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dps-content[b-j2klzjmr07] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.dps-name[b-j2klzjmr07] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
}

.dps-value[b-j2klzjmr07] {
    font-size: 34px;
    font-weight: 700;
    color: var(--main-color);
    font-variant-numeric: tabular-nums;
}

.dps-caption[b-j2klzjmr07] {
    font-size: 11.5px;
    color: var(--label-color);
}

.dps-spec[b-j2klzjmr07] {
    font-size: 12px;
    color: var(--sub-color);
    margin-top: 6px;
    line-height: 1.5;
}

.dps-skeleton[b-j2klzjmr07] {
    gap: 0.5rem;
}

.graph-container[b-j2klzjmr07] {
    padding: 10px 18px;
    min-width: 0;
}

/* Gear strip cell */
.gear-section[b-j2klzjmr07] {
    width: 100%;
    padding: 12px 22px;
    display: flex;
    align-items: center;
}

/* the warning button rides left of talents, in warning colors */
.result-actions[b-j2klzjmr07]  .warn-action {
    color: var(--warning-color);
    border-color: color-mix(in srgb, var(--warning-color) 55%, transparent);
}

.result-actions[b-j2klzjmr07]  .warn-action:hover {
    color: var(--warning-color);
    border-color: var(--warning-color);
    background-color: color-mix(in srgb, var(--warning-color) 8%, transparent);
}

/* Bottom section: two side-by-side lists. Caps at ~10 rows on tall windows;
   on short windows it shrinks and the lists scroll, so it never overlaps the
   footer. The cap lives on the section and the columns stretch to it, so both
   the ceiling (max-height) and the shrink (flex) apply to the same box. */
.bottom-section[b-j2klzjmr07] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 22px;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    /* header (56px) + ~10 rows */
    max-height: 450px;
}

.breakdown-container[b-j2klzjmr07] {
    border: 1px solid var(--panel-border);
    background-color: var(--bg-color);
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
    display: flex;
    flex-direction: column;
}

/* the table must keep its content height so the container scrolls
   instead of the rows getting compressed */
.breakdown-container[b-j2klzjmr07]  .breakdown-table {
    flex: none;
}

.breakdown-container[b-j2klzjmr07]::-webkit-scrollbar {
    width: 4px;
}

.breakdown-container[b-j2klzjmr07]::-webkit-scrollbar-thumb {
    background-color: var(--panel-border);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .top-section[b-j2klzjmr07] {
        grid-template-columns: 1fr;
    }

    .dps-container[b-j2klzjmr07] {
        border-right: none;
        border-bottom: 1px solid var(--panel-border);
    }

    .bottom-section[b-j2klzjmr07] {
        flex-direction: column;
    }

    .breakdown-container[b-j2klzjmr07] {
        flex: none;
    }
}
/* /Pages/StatWeights/InputPage.razor.rz.scp.css */
.input-view-content[b-4qshc46f74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: var(--content-max-width);
}

.char-selection[b-4qshc46f74] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--input-max-width);
    margin: 0 auto;
    gap: 36px;
}

/* SimC cell */
/* Same box on quicksim, stat weights and top gear: the paste field must not
   change size when you switch between the three. */
.simc-cell[b-4qshc46f74] {
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.simc-row[b-4qshc46f74] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.simc-left[b-4qshc46f74] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.blueprint-input[b-4qshc46f74] {
    width: 100%;
    background-color: transparent;
    color: var(--text-color);
    font-size: 28px;
    outline: none;
    caret-color: var(--main-color);
    font-family: "Roboto Mono", sans-serif;
}

.blueprint-input[b-4qshc46f74]::placeholder {
    color: var(--text-color-disabled);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.blueprint-input:focus[b-4qshc46f74]::placeholder {
    opacity: 0.4;
}

.simc-textarea[b-4qshc46f74] {
    resize: none;
    /* exactly the height of the profile read-back that replaces it, so the
       cell does not resize when a paste lands */
    min-height: 76px;
    max-height: 76px;
    overflow: hidden;
    line-height: 1.3;
    scrollbar-width: none;
}

.simc-textarea[b-4qshc46f74]::-webkit-scrollbar {
    display: none;
}

.simc-hint[b-4qshc46f74] {
    font-size: 11.5px;
    color: #3c3a44;
    white-space: nowrap;
    align-self: flex-end;
    padding-bottom: 4px;
}

.simc-note[b-4qshc46f74] {
    font-size: 11.5px;
    color: var(--faint-color);
    margin-top: -22px;
}

/* Footer row: options bar + weigh stats */
.form-footer[b-4qshc46f74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .form-footer[b-4qshc46f74] {
        justify-content: center;
    }
}

/* Right side of the paste row once a profile is in: the marker and the way
   back to an empty field. */
/* Pinned into the cell's top right corner instead of riding in the row: as a
   flex item it took width away from the profile, which left the item level
   floating short of the right edge. */
.simc-actions[b-4qshc46f74] {
    position: absolute;
    top: 26px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.simc-clear[b-4qshc46f74] {
    font-family: "Roboto Mono", sans-serif;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* it is the only thing to press in this state, so it reads like a button
       and not like a disabled label */
    color: var(--text-color);
    background: none;
    border: 1px solid var(--sub-color);
    padding: 4px 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.simc-clear:hover[b-4qshc46f74] {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 8%, transparent);
}

.simc-hint.parsed[b-4qshc46f74] {
    color: var(--main-color);
}
/* /Pages/StatWeights/ResultPage.razor.rz.scp.css */
/* General Layout */
.result-container[b-xlryvwhehi] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* centered while everything fits — "safe" falls back to top when it overflows */
    justify-content: center;
    justify-content: safe center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    gap: 22px;
    padding: 10px 0 24px;
}

.result-topline[b-xlryvwhehi] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.result-breadcrumb[b-xlryvwhehi] {
    font-size: 12px;
    color: var(--faint-color);
}

/* Header cell */
.top-section[b-xlryvwhehi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    flex-shrink: 0;
    padding: 22px 26px;
}

.header-left[b-xlryvwhehi] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.header-name[b-xlryvwhehi] {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 700;
}

.header-spec[b-xlryvwhehi] {
    color: var(--main-color);
    font-size: 12.5px;
}

.header-right[b-xlryvwhehi] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    text-align: right;
}

.header-dps[b-xlryvwhehi] {
    color: var(--main-color);
    font-size: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.header-caption[b-xlryvwhehi] {
    color: var(--faint-color);
    font-size: 11.5px;
}

/* Weights cell — content-sized, shrinks and scrolls when the window is small */
.weights-cell[b-xlryvwhehi] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
}

.weights-header[b-xlryvwhehi] {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--panel-border);
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bg-color);
    flex: none;
}

.weights-header .dm-label.light[b-xlryvwhehi] {
    color: var(--text-color);
}

.weight-entry[b-xlryvwhehi] {
    position: relative;
    padding: 10px 18px;
    border-bottom: 1px solid var(--panel-border-inner);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.weight-entry:last-child[b-xlryvwhehi] {
    border-bottom: none;
}

/* percentage bar riding the row's bottom border — same language as the
   quicksim breakdown table */
.weight-entry[b-xlryvwhehi]::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 1px;
    width: var(--percentage);
    animation: bar-animation-b-xlryvwhehi 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    background-color: var(--sub-color);
    transition: background-color 0.2s ease;
}

/* last row has no border below — keep its bar inside the container */
.weight-entry:last-child[b-xlryvwhehi]::after {
    bottom: 0;
}

.weight-entry:hover[b-xlryvwhehi]::after {
    background-color: var(--main-color);
}

.weight-left[b-xlryvwhehi] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    position: relative;
}

.stat-icon[b-xlryvwhehi] {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    border: 1px solid var(--panel-border);
    object-fit: cover;
    flex-shrink: 0;
}

.weight-entry.primary .stat-icon[b-xlryvwhehi] {
    border-color: var(--main-color);
}

.weight-stat[b-xlryvwhehi] {
    text-transform: lowercase;
    color: var(--text-color);
}

.weight-entry.primary .weight-stat[b-xlryvwhehi],
.weight-entry.primary .weight-value[b-xlryvwhehi] {
    color: var(--main-color);
    font-weight: 700;
}

.weight-entry:hover .weight-stat[b-xlryvwhehi] {
    color: var(--main-color);
    transition: color 0.2s ease;
}

.weight-right[b-xlryvwhehi] {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-shrink: 0;
    position: relative;
}

.weight-value[b-xlryvwhehi] {
    color: var(--sub-color);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.weight-error[b-xlryvwhehi] {
    font-size: 11px;
    color: var(--label-color);
    font-variant-numeric: tabular-nums;
}

.weights-empty[b-xlryvwhehi] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--sub-color);
    font-family: "Roboto Mono", sans-serif;
    font-size: 13px;
}

/* Bottom cards */
.cards-grid[b-xlryvwhehi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    width: 100%;
}

.what-if-cell[b-xlryvwhehi] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.what-if-row[b-xlryvwhehi] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.what-if-stat[b-xlryvwhehi] {
    color: #c9c6cf;
}

.what-if-gain[b-xlryvwhehi] {
    color: var(--sub-color);
    font-variant-numeric: tabular-nums;
}

.what-if-gain.primary[b-xlryvwhehi] {
    color: var(--main-color);
}

.pawn-cell[b-xlryvwhehi] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.pawn-header[b-xlryvwhehi] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pawn-string[b-xlryvwhehi] {
    display: block;
    font-family: "Roboto Mono", monospace;
    font-size: 12px;
    color: #6d6a75;
    background: transparent;
    word-break: break-all;
    line-height: 1.7;
    white-space: pre-wrap;
}

@keyframes bar-animation-b-xlryvwhehi {
    0% {
        width: 0;
    }
    100% {
        width: var(--percentage);
    }
}

@media (max-width: 1024px) {
    .top-section[b-xlryvwhehi] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-right[b-xlryvwhehi] {
        align-items: flex-start;
        text-align: left;
    }

    .cards-grid[b-xlryvwhehi] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/TopGear/Dialoge/TopGearSettingsDialog.razor.rz.scp.css */
/* the shell body carries no padding of its own — every dialog brings its own */
.tgs-body[b-o2jnev593y] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 26px 20px;
    font-family: "Roboto Mono", sans-serif;
}

/* ---- category cards, two per row, forced to equal halves ---- */

.tgs-grid[b-o2jnev593y] {
    display: grid;
    /* minmax(0,...) keeps long nowrap content (set names) from widening a
       column past its half — Safari propagates such min-contents into the
       track where Chrome does not, and the dialog body clips the excess */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.tgs-card[b-o2jnev593y] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--panel-border-inner);
    min-width: 0;
}

/* the enhancements card spans both columns at the bottom */
.tgs-card.tgs-wide[b-o2jnev593y] {
    grid-column: 1 / -1;
}

.tgs-card-head[b-o2jnev593y] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tgs-card.planned[b-o2jnev593y] {
    opacity: 0.75;
}

.tgs-card-desc[b-o2jnev593y] {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--label-color);
}

.tgs-planned-tag[b-o2jnev593y] {
    flex: none;
    margin-left: auto;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--faint-color);
    border: 1px solid var(--panel-border);
    padding: 1px 5px;
}

@media (max-width: 900px) {
    .tgs-grid[b-o2jnev593y] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- fight rows: label left, segmented control right ---- */

.tgs-row[b-o2jnev593y] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tgs-row.locked[b-o2jnev593y] {
    opacity: 0.35;
    pointer-events: none;
}

.tgs-row-label[b-o2jnev593y] {
    width: 7ch;
    flex: none;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--label-color);
}

/* same segmented look as the options bar on the paste step */
.tgs-segment[b-o2jnev593y] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-color);
    font-size: 12px;
    width: fit-content;
}

.tgs-segment[b-o2jnev593y]  .custom-radio-group {
    display: flex;
    flex-direction: row;
    gap: 0;
}

.tgs-segment[b-o2jnev593y]  .radio-select {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    color: var(--label-color);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tgs-segment[b-o2jnev593y]  .radio-select + .radio-select {
    border-left: 1px solid var(--panel-border);
}

.tgs-segment[b-o2jnev593y]  .radio-select:hover {
    color: var(--sub-color);
}

.tgs-segment[b-o2jnev593y]  .radio-select.selected {
    color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 7%, transparent);
}

.tgs-boss-segment[b-o2jnev593y] {
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    color: var(--sub-color);
    white-space: nowrap;
}

.tgs-boss-display[b-o2jnev593y] {
    /* sized for the widest case ("10 bosses") so the +/− never shift */
    min-width: 9ch;
    text-align: center;
    font-size: 12px;
}

.tgs-boss-button[b-o2jnev593y] {
    color: var(--label-color);
    background: none;
    border: none;
    width: 18px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s ease;
}

.tgs-boss-button:hover[b-o2jnev593y] {
    color: var(--text-color);
}

.tgs-boss-button.accent[b-o2jnev593y] {
    color: var(--main-color);
}

/* ---- the carry toggle: blueprint checkbox ---- */

.tgs-toggle[b-o2jnev593y] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.tgs-toggle input[b-o2jnev593y] {
    display: none;
}

.tgs-toggle-box[b-o2jnev593y] {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border: 1px solid var(--sub-color);
    background-color: var(--bg-deep);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tgs-toggle input:checked + .tgs-toggle-box[b-o2jnev593y] {
    border-color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 55%, var(--bg-deep));
}

.tgs-toggle-text[b-o2jnev593y] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-color);
}

/* ---- the crest wallet rows and the paper-upgrade button ---- */

.tgs-crests[b-o2jnev593y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tgs-crest-row[b-o2jnev593y] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--panel-border-inner);
    font-size: 12px;
}

.tgs-crest-row:last-child[b-o2jnev593y] {
    border-bottom: none;
}

.tgs-crest-name[b-o2jnev593y] {
    color: var(--sub-color);
}

.tgs-crest-amount[b-o2jnev593y] {
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.tgs-upgrade-button[b-o2jnev593y] {
    align-self: flex-start;
    font-family: "Roboto Mono", sans-serif;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-color);
    background: none;
    border: 1px solid var(--sub-color);
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tgs-upgrade-button:hover[b-o2jnev593y] {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 8%, transparent);
}

/* ---- the set floor rows ---- */

.tgs-sets[b-o2jnev593y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tgs-set-row[b-o2jnev593y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--panel-border-inner);
    font-size: 11.5px;
}

.tgs-set-row:last-child[b-o2jnev593y] {
    border-bottom: none;
}

.tgs-set-name[b-o2jnev593y] {
    flex: 1;
    min-width: 0;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tgs-set-owned[b-o2jnev593y] {
    flex: none;
    color: var(--faint-color);
    font-variant-numeric: tabular-nums;
}

.tgs-set-buttons[b-o2jnev593y] {
    flex: none;
    display: flex;
    gap: 4px;
}

.tgs-set-button[b-o2jnev593y] {
    font-family: "Roboto Mono", sans-serif;
    font-size: 10px;
    padding: 2px 6px;
    color: var(--label-color);
    background: none;
    border: 1px solid var(--panel-border);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tgs-set-button:hover:not(:disabled)[b-o2jnev593y] {
    color: var(--sub-color);
    border-color: var(--sub-color);
}

.tgs-set-button.active[b-o2jnev593y] {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 8%, transparent);
}

.tgs-set-button:disabled[b-o2jnev593y] {
    opacity: 0.35;
    cursor: default;
}

/* ---- the footnote under the grid ---- */

.tgs-note[b-o2jnev593y] {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--faint-color);
}
/* /Pages/TopGear/InputPage.razor.rz.scp.css */
.topgear-view-content[b-qmlftxhtz9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* the layout's .content centers its children at content height — stretch
       past that so the picker step can actually fill the window. The paste
       step stays visually centered through justify-content below. */
    align-self: stretch;
    /* centered while everything fits — "safe" falls back to top when it
       overflows, so nothing slides under the nav or bottom bar */
    justify-content: center;
    justify-content: safe center;
    flex: 1;
    width: var(--content-max-width);
    min-height: 0;
    overflow-y: auto;
    /* This is the only input view that scrolls, and a scroll container clips at
       its padding box: the corner ticks sit a few pixels outside their cell, so
       without this gutter they either get cut off or push out a horizontal
       scrollbar. The cell keeps its width, the room comes out of the slack. */
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
}

.topgear-selection[b-qmlftxhtz9] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--input-max-width);
    margin: 0 auto;
    /* same rhythm as .char-selection on quicksim and stat weights, so the paste
       field sits at the same height on all three and does not jump when you
       switch tabs */
    gap: 36px;
}

/* the picker gets the whole window: full content width, full height — the
   panels scale with the window, never with what happens to be inside them.
   The vertical padding trims ~100px off the stretch so it breathes. */
.topgear-selection.picking[b-qmlftxhtz9] {
    gap: 16px;
    padding: 55px 0 65px;
    max-width: none;
    flex: 1;
    min-height: 0;
}

/* ---- step 1: simc cell ---- */

/* Same box on quicksim, stat weights and top gear: the paste field must not
   change size when you switch between the three. */
.simc-cell[b-qmlftxhtz9] {
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.simc-row[b-qmlftxhtz9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.simc-left[b-qmlftxhtz9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.blueprint-input[b-qmlftxhtz9] {
    width: 100%;
    background-color: transparent;
    color: var(--text-color);
    /* same size as quicksim and stat weights, the paste field must not change
       when you switch pages */
    font-size: 28px;
    outline: none;
    caret-color: var(--main-color);
    font-family: "Roboto Mono", sans-serif;
}

.blueprint-input[b-qmlftxhtz9]::placeholder {
    color: var(--text-color-disabled);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.blueprint-input:focus[b-qmlftxhtz9]::placeholder {
    opacity: 0.4;
}

.simc-textarea[b-qmlftxhtz9] {
    resize: none;
    /* exactly the height of the profile read-back that replaces it, so the
       cell does not resize when a paste lands */
    min-height: 76px;
    max-height: 76px;
    overflow: hidden;
    line-height: 1.3;
    scrollbar-width: none;
}

.simc-textarea[b-qmlftxhtz9]::-webkit-scrollbar {
    display: none;
}

.simc-hint[b-qmlftxhtz9] {
    font-size: 11.5px;
    color: #3c3a44;
    white-space: nowrap;
    align-self: flex-end;
    padding-bottom: 4px;
}

.simc-hint.parsed[b-qmlftxhtz9] {
    color: var(--main-color);
}

/* ---- step 2: topline (back + run summary) ---- */

.pick-topline[b-qmlftxhtz9] {
    display: flex;
    align-items: baseline;
    gap: 18px;
}

.pick-back[b-qmlftxhtz9] {
    border: none;
    background: none;
    padding: 0;
    color: var(--faint-color);
    font-family: "Roboto Mono", sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s ease;
    flex: none;
}

.pick-back:hover[b-qmlftxhtz9] {
    color: var(--main-color);
}

.pick-summary[b-qmlftxhtz9] {
    font-size: 12px;
    color: var(--sub-color);
}

/* what is wrong with the current ticks, right-aligned in the topline */
.pick-warning[b-qmlftxhtz9] {
    margin-left: auto;
    font-size: 12px;
    color: var(--warning-color);
}

/* ---- two fixed pools: bags over vault, equipped inline in the bags ---- */

.picker-pools[b-qmlftxhtz9] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    flex: 1;
    /* below this the panels stop shrinking and the view scrolls instead */
    min-height: 380px;
}

.pool-cell[b-qmlftxhtz9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    min-height: 0;
}

/* the bags get every pixel the vault does not strictly need — a fuller bag
   never changes the layout, it scrolls inside */
.pool-bags[b-qmlftxhtz9] {
    flex: 1 1 0;
}

/* the vault is exactly one tile row: nine choices at most */
.pool-vault[b-qmlftxhtz9] {
    flex: 0 0 auto;
}

/* nine tiles always fit the wide panel, and warnings must be able to pop
   out below — so this row never becomes a clipping scroll container */
.pool-vault-row[b-qmlftxhtz9] {
    overflow: visible;
}

.pool-grid-vault[b-qmlftxhtz9] {
    flex-wrap: nowrap;
    /* one row of few, distinct choices — spread across the whole panel, the
       walls get exactly the same share as the gaps between the tiles */
    gap: 0;
    width: 100%;
    justify-content: space-evenly;
}

/* the panel keeps its size — whatever does not fit scrolls inside */
.pool-scroll[b-qmlftxhtz9] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
}

.pool-head[b-qmlftxhtz9] {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.pool-action[b-qmlftxhtz9] {
    border: none;
    background: none;
    padding: 0;
    color: color-mix(in srgb, var(--main-color) 75%, var(--sub-color));
    font-family: "Roboto Mono", sans-serif;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease;
}

.pool-action:hover[b-qmlftxhtz9] {
    color: var(--main-color);
}

.pool-empty[b-qmlftxhtz9] {
    font-size: 12px;
    color: var(--faint-color);
}

/* slot groups flow side by side and wrap — no dead space, no scrolling */
.pool-slots[b-qmlftxhtz9] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
}

.pool-slot-group[b-qmlftxhtz9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pool-slot-label[b-qmlftxhtz9] {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--label-color);
}

.pool-grid[b-qmlftxhtz9] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
}

.pool-entry[b-qmlftxhtz9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* a ticked item that fits no combination raises a warning on the tile */
.pool-tile.warned[b-qmlftxhtz9] {
    border-color: var(--warning-color);
    box-shadow: inset 0 0 0 1px var(--warning-color),
                0 0 7px color-mix(in srgb, var(--warning-color) 35%, transparent);
}

/* a catalyst copy carries the spark, top left on the same dark plate */
.pool-tile-cat[b-qmlftxhtz9] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px 3px 2px;
    font-size: 11px;
    line-height: 1;
    color: var(--main-color);
    background-color: color-mix(in srgb, var(--bg-deep) 85%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* a paper-upgraded copy carries the arrow, top left on the same dark plate */
.pool-tile-up[b-qmlftxhtz9] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px 3px 2px;
    font-size: 12px;
    line-height: 1;
    color: var(--ok-color);
    background-color: color-mix(in srgb, var(--bg-deep) 85%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* rides inside the tile corner on a dark plate, like the item level badge —
   readable on any icon art, and no scroll container ever clips it */
.pool-tile-warn[b-qmlftxhtz9] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1px 3px 2px;
    font-size: 12px;
    line-height: 1;
    color: var(--warning-color);
    background-color: color-mix(in srgb, var(--bg-deep) 85%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* only the vault tiles carry a slot caption — the bags are grouped by slot */
.pool-entry-slot[b-qmlftxhtz9] {
    font-size: 9.5px;
    color: var(--label-color);
    text-transform: lowercase;
    text-align: center;
    max-width: 52px;
}

/* ---- one item = one tile: icon plus item level, like a bag slot ---- */

.pool-tile[b-qmlftxhtz9] {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-deep);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pool-tile-icon[b-qmlftxhtz9] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* tiles are buttons, not images to pull out of the page */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    /* unticked tiles sit back a little, so the selection reads at a glance */
    opacity: 0.8;
    filter: saturate(0.8);
    transition: opacity 120ms ease, filter 120ms ease;
}

.pool-tile:hover[b-qmlftxhtz9] {
    border-color: var(--sub-color);
}

.pool-tile:hover .pool-tile-icon[b-qmlftxhtz9],
.pool-tile.selected .pool-tile-icon[b-qmlftxhtz9] {
    opacity: 1;
    filter: none;
}

.pool-tile.selected[b-qmlftxhtz9] {
    border-color: var(--main-color);
    /* the inset ring doubles the border without moving a single pixel */
    box-shadow: inset 0 0 0 1px var(--main-color),
                0 0 7px color-mix(in srgb, var(--main-color) 35%, transparent);
}

.pool-tile-ilvl[b-qmlftxhtz9] {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 3px;
    font-family: "Roboto Mono", sans-serif;
    font-size: 10px;
    line-height: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--text-color);
    background-color: color-mix(in srgb, var(--bg-deep) 80%, transparent);
    pointer-events: none;
}

.pool-tile.selected .pool-tile-ilvl[b-qmlftxhtz9] {
    color: var(--main-color);
}

/* worn items carry a corner mark and are locked into the pool — the baseline
   set is what every combination is measured against */
.pool-tile.equipped[b-qmlftxhtz9] {
    cursor: default;
}

.pool-tile.equipped[b-qmlftxhtz9]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 6px solid transparent;
    border-top-color: var(--main-color);
    border-left-color: var(--main-color);
    pointer-events: none;
}

/* the line between what is worn and what is carried inside a slot group */
.pool-sep[b-qmlftxhtz9] {
    width: 1px;
    align-self: stretch;
    flex: none;
    background-color: var(--panel-border);
    margin: 3px 4px;
}

/* sits directly under the pools, not a full gap away */
.picker-hint[b-qmlftxhtz9] {
    font-size: 11px;
    color: var(--faint-color);
    margin-top: -6px;
}

/* ---- footer rows ---- */

.form-footer[b-qmlftxhtz9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* settings bar + simulate button share the bottom row, same height */
.pick-footer[b-qmlftxhtz9] {
    justify-content: flex-end;
    align-items: stretch;
    gap: 20px;
    flex-wrap: nowrap;
}

/* the whole bar opens the settings dialog */
.settings-bar[b-qmlftxhtz9] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    border: 1px solid var(--panel-border);
    background: none;
    font-family: "Roboto Mono", sans-serif;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.settings-bar:hover[b-qmlftxhtz9] {
    border-color: var(--sub-color);
    background-color: color-mix(in srgb, var(--main-color) 3%, transparent);
}

.settings-bar .dm-label[b-qmlftxhtz9] {
    flex: none;
}

.settings-summary[b-qmlftxhtz9] {
    font-size: 12px;
    color: var(--sub-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-bar .combo-counter[b-qmlftxhtz9] {
    margin-left: auto;
}

.combo-counter[b-qmlftxhtz9] {
    font-size: 12px;
    color: var(--sub-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.combo-counter.over[b-qmlftxhtz9] {
    color: var(--error-color);
}

@media (max-width: 1024px) {
    .form-footer[b-qmlftxhtz9] {
        justify-content: center;
    }

    /* not enough height to be picky on small screens: panels size to their
       content and the page scrolls again like everywhere else */
    .topgear-selection.picking[b-qmlftxhtz9] {
        flex: none;
        padding: 10px 0 20px;
    }

    .picker-pools[b-qmlftxhtz9] {
        flex: none;
        min-height: 0;
    }

    .pool-bags[b-qmlftxhtz9],
    .pool-vault[b-qmlftxhtz9] {
        flex: none;
    }

    .pick-footer[b-qmlftxhtz9] {
        flex-wrap: wrap;
    }
}

/* Note under the paste cell. Stat weights carries the same line, which keeps
   the two pages the same height: without it the centered block sat 16px off
   and the paste field jumped when you switched tabs. */
.simc-note[b-qmlftxhtz9] {
    font-size: 11.5px;
    color: var(--faint-color);
    margin-top: -22px;
}

/* Right side of the paste row once a profile is in: the marker and the way
   back to an empty field. */
/* Pinned into the cell's top right corner instead of riding in the row: as a
   flex item it took width away from the profile, which left the item level
   floating short of the right edge. */
.simc-actions[b-qmlftxhtz9] {
    position: absolute;
    top: 26px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.simc-clear[b-qmlftxhtz9] {
    font-family: "Roboto Mono", sans-serif;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* it is the only thing to press in this state, so it reads like a button
       and not like a disabled label */
    color: var(--text-color);
    background: none;
    border: 1px solid var(--sub-color);
    padding: 4px 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.simc-clear:hover[b-qmlftxhtz9] {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 8%, transparent);
}
/* /Pages/TopGear/ResultPage.razor.rz.scp.css */
/* General Layout */
.result-container[b-lyum2l6nke] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centered while everything fits — "safe" falls back to top when it overflows */
    justify-content: center;
    justify-content: safe center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    gap: 22px;
    padding: 14px 0 10px;
}

.result-topline[b-lyum2l6nke] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.result-breadcrumb[b-lyum2l6nke] {
    font-size: 12px;
    color: var(--faint-color);
}

/* Vault preset marker in the topline */
.preset-chip[b-lyum2l6nke] {
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--main-color) 65%, transparent);
    border-radius: 2px;
    color: var(--main-color);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Baseline header cell */
.top-section[b-lyum2l6nke] {
    display: grid;
    grid-template-columns: 1fr 240px;
    width: 100%;
    flex-shrink: 0;
}

.baseline-left[b-lyum2l6nke] {
    padding: 16px 24px;
    border-right: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.baseline-title[b-lyum2l6nke] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.baseline-name[b-lyum2l6nke] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.baseline-spec[b-lyum2l6nke] {
    font-size: 12px;
    color: var(--sub-color);
    text-transform: lowercase;
    white-space: nowrap;
}

/* Baseline Equipment Row */
.baseline-equipment[b-lyum2l6nke] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.baseline-group[b-lyum2l6nke] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.baseline-group .dm-label[b-lyum2l6nke] {
    font-size: 10.5px;
}

.baseline-group-icons[b-lyum2l6nke] {
    display: flex;
    gap: 4px;
}

.baseline-icon-link[b-lyum2l6nke] {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.baseline-icon[b-lyum2l6nke] {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background-color: var(--sub-alt-color);
    border: 1px solid var(--panel-border);
    transition: border-color 0.15s ease;
}

.baseline-icon-link:hover .baseline-icon[b-lyum2l6nke] {
    border-color: var(--main-color);
}

.baseline-right[b-lyum2l6nke] {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.baseline-dps[b-lyum2l6nke] {
    color: var(--main-color);
    font-size: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Rankings section — content-sized so the page centers, shrinks + scrolls
   when the window is too small, and never shows more than about five rows
   at once: the rest scrolls inside */
.ranking-section[b-lyum2l6nke] {
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 470px;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 10px;
}

.ranking-section[b-lyum2l6nke]::-webkit-scrollbar {
    display: none;
}

.swap-hint[b-lyum2l6nke] {
    font-size: 11.5px;
    color: var(--faint-color);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .top-section[b-lyum2l6nke] {
        grid-template-columns: 1fr;
    }

    .baseline-left[b-lyum2l6nke] {
        border-right: none;
        border-bottom: 1px solid var(--panel-border);
    }

    .baseline-right[b-lyum2l6nke] {
        align-items: flex-start;
        text-align: left;
    }
}
/* /Provider/Dialog/DialogProvider.razor.rz.scp.css */
.dlg-overlay[b-ubm30p0qds] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* blurs the page behind without dimming it */
    background: transparent;
    backdrop-filter: blur(5px);
    z-index: 1000;
    outline: none;
}

/* transparent shell — the dialog content (DMDialogShell) paints its own
   frame, and the corner ticks reach 4px outside it */
.dlg-container[b-ubm30p0qds] {
    /* dialogs mount outside .wrapper, so they carry the global scale themselves */
    zoom: var(--dm-zoom);
    display: inline-block;
    background: transparent;
    overflow: visible;
}

/* focus fallback target when a dialog has no control of its own */
.dlg-container:focus[b-ubm30p0qds] {
    outline: none;
}
/* /Provider/Snackbar/SnackbarProvider.razor.rz.scp.css */
/* bottom-center mount */
.snackbar-root[b-893y5orc65] {
    /* mounts outside .wrapper, so it carries the global scale itself */
    zoom: var(--dm-zoom);
    position: fixed;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
    display: flex;
    justify-content: center;

    --snackbar-anim-ms: 220ms;
    --snackbar-leave-ms: 160ms;
}

/* the card */
.snackbar[b-893y5orc65] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 22px;
    border: 1px solid var(--panel-border);
    background: var(--bg-deep);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    pointer-events: auto;
    font-family: "Roboto Mono", sans-serif;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--text-color);
    max-width: min(36rem, calc(92vw / var(--dm-zoom)));
    will-change: transform, opacity;
}

/* level accents drive tick + border + icon color */
.snackbar.level-error[b-893y5orc65] {
    --tick-color: var(--error-color);
    border-color: color-mix(in srgb, var(--error-color) 50%, transparent);
    background: #1c1215;
}

.snackbar.level-warning[b-893y5orc65] {
    --tick-color: var(--warning-color);
    border-color: color-mix(in srgb, var(--warning-color) 50%, transparent);
    background: #1c1812;
}

.snackbar.level-info[b-893y5orc65] {
    --tick-color: var(--main-color);
    border-color: color-mix(in srgb, var(--main-color) 50%, transparent);
}

.icon[b-893y5orc65] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: none;
}

.level-info .icon[b-893y5orc65] { color: var(--main-color); }
.level-warning .icon[b-893y5orc65] { color: var(--warning-color); }
.level-error .icon[b-893y5orc65] { color: var(--error-color); }

.text[b-893y5orc65] {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    opacity: 0.95;
}

.close[b-893y5orc65] {
    color: var(--label-color);
    font-size: 12.5px;
    margin-left: 8px;
    cursor: pointer;
    flex: none;
    transition: color 140ms ease;
}

.close:hover[b-893y5orc65] {
    color: var(--text-color);
}

.close:focus-visible[b-893y5orc65] {
    outline: 1px solid var(--main-color);
    outline-offset: 2px;
}

/* slide in from the bottom, out toward it */
.snackbar.enter[b-893y5orc65] {
    animation: slide-up-in-b-893y5orc65 var(--snackbar-anim-ms) cubic-bezier(.2,.85,.35,1) both;
}
.snackbar.leave[b-893y5orc65] {
    animation: slide-down-out-b-893y5orc65 var(--snackbar-leave-ms) cubic-bezier(.2,.65,.3,1) both;
}
@keyframes slide-up-in-b-893y5orc65 {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes slide-down-out-b-893y5orc65 {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(12px); opacity: 0; }
}