/* ===================================
   Калькулятор результатов стрелка
   =================================== */

/* Box-sizing для всех элементов калькулятора */
.calculator-container,
.calculator-container * {
    box-sizing: border-box;
}

/* Контейнер калькулятора */
.calculator-container {
    /* Один радиус для полей и ± (как --radius-12 в UI Kit, не radius-xl) */
    --gc-btn-radius: var(--radius-12);
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    box-sizing: border-box;
}

/* Скругление: время, зоны, ± — одно значение */
.calculator-container .calculator-fields .gc-input,
.calculator-container .calculator-fields .calc-input-group .gc-input,
.calculator-container .calculator-fields .calc-input-group .gc-btn {
    border-radius: var(--radius-12);
}

/* Улучшения для десктопа */
@media (min-width: 992px) {
    .calculator-container {
        max-width: 900px;
    }
    
    /* Кнопка сохранения не фиксирована на десктопе */
    .fix-cont {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        background: transparent;
        border-top: none;
        padding: 0;
        margin-top: var(--space-6);
    }
    
    .btn-fixed {
        border-radius: var(--gc-btn-radius);
        height: 52px;
        font-size: var(--font-size-base);
    }


    /* Двухколоночный layout для полей ввода зон */
    .calculator-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }
    
    /* Время, чекбокс и полная ширина группы — на всю сетку */
    .calculator-fields .calc-form-group-horizontal:has(#time),
    .calculator-fields .calc-checkbox-group {
        grid-column: 1 / -1;
    }
    
    /* Увеличиваем размеры на десктопе */
    .calculator-fields .calc-input-group .gc-btn {
        height: 56px !important;
        font-size: var(--font-size-24);
    }
    
    .calculator-fields .calc-input-group .gc-input {
        width: 90px;
        height: 56px;
        font-size: var(--font-size-24);
    }
    
    .calc-form-group-horizontal > label {
        width: 90px;
    }
    
    /* Убираем стрелки в number инпутах на десктопе */
    .calculator-fields .calc-input-group .gc-input[type="number"]::-webkit-inner-spin-button,
    .calculator-fields .calc-input-group .gc-input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    .calculator-fields .calc-input-group .gc-input[type="number"] {
        -moz-appearance: textfield;
    }
}

/* Offset для мобильного навбара калькулятора */
.gc-mobile-nav-offset-calculator {
    height: calc(128px + env(safe-area-inset-top, 0px));
}

/* На десктопе скрываем offset */
@media (min-width: 992px) {
    .gc-mobile-nav-offset-calculator {
        display: none;
    }
}

/* Навбар калькулятора должен иметь обычное скругление и убираем padding-bottom */
@media (max-width: 991.98px) {
    .gc-mobile-nav-top:has(.gc-calculator-weapon-bar) {
        border-radius: 0 !important;
        padding-bottom: 0 !important; /* Убираем нижний padding чтобы не было двойного отступа */
    }
}

/* Контейнер блока выбора оружия */
.gc-calculator-weapon-bar {
    width: 100%;
}

/* Внутри shell без горизонтального padding — inset как у title_bar */
.gc-mobile-nav-top .gc-calculator-weapon-bar {
    width: 100%;
    margin: 0;
    padding: 0 var(--space-3);
    box-sizing: border-box;
}

/* Блок выбора оружия в навбаре */
.gc-calculator-weapon-selector {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    user-select: none;
    transition: var(--transition-base);
    background: var(--surface-panel);
    color: var(--text-primary);
    border: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    width: 100%;
    text-align: left;
}

.gc-calculator-weapon-selector:hover,
.gc-calculator-weapon-selector:focus {
    background: color-mix(in srgb, var(--surface-canvas) 30%, transparent);
    color: var(--text-primary);
    outline: none;
}

.gc-calculator-weapon-selector:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
}

.gc-calculator-weapon-selector .weapon-selector-placeholder {
    color: var(--text-secondary);
    font-size: var(--font-size-14);
}

/* Двухстрочный блок с типом и подписью */
.gc-calc-weapon-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.gc-calc-weapon-info .catalog-nav-title {
    font-size: var(--font-size-14);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-calc-weapon-info .catalog-nav-subtitle {
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-calc-weapon-badge {
    flex-shrink: 0;
    margin-left: auto;
}

.gc-calc-weapon-chevron {
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    flex-shrink: 0;
}

/* Аватарка стрелка в мобильном навбаре */
.gc-nav-spacer--end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.gc-nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.gc-nav-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--font-size-14);
}

/* Блок профиля стрелка */
/* Десктопная объединённая шапка */
.calc-desktop-header {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-16);
    overflow: hidden;
}

/* Убираем все бордеры/радиус у сабхедера — рамка задана родителем */
.calc-desktop-header .gc-subheader--toolbar {
    border: none !important;
    border-radius: 0;
    margin-bottom: 0;
}

/* Отдельный модуль выбора оружия между шапкой и формой */
.calc-weapon-module {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-16);
    overflow: hidden;
}

/* В модуле разделитель сверху не нужен (у модуля своя рамка) */
.calc-weapon-module .gc-calculator-weapon-selector {
    border-top: none;
}

/* Аватар стрелка в сабхедере */
.calc-subheader-avatar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* gc-subheader-title с обрезкой */
.calc-subheader-shooter .gc-subheader-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shooter-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-subtle);
    flex-shrink: 0;
}

.shooter-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.shooter-name {
    font-size: var(--font-size-18);
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weapon-name {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weapon-chevron {
    font-size: 0.7rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.challenge-submit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

.challenge-submit-form .calculator-form {
    flex-grow: 0;
    overflow: visible;
    overflow-y: visible;
}

.challenge-submit-form .calculator-container {
    padding-bottom: 0;
}

/* Форма калькулятора */
.calculator-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* Доказательства — та же колонка; разделитель не нужен (есть gap у .calculator-container) */
.calculator-container .challenge-submit-proof {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.calculator-container .challenge-submit-proof .split-form-section-content,
.calculator-container .challenge-submit-proof .gc-form-group {
    width: 100%;
    min-width: 0;
}

.calculator-container .challenge-submit-proof .gc-form-group > .gc-input,
.calculator-container .challenge-submit-proof .gc-form-group > textarea.gc-input {
    width: 100%;
    max-width: none;
    align-self: stretch;
    text-align: left;
}

/* Поля калькулятора внутри fieldset (в т.ч. readonly режим) */
.calculator-fields {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Fieldset disabled не тушим целиком (лейблы должны читаться).
 * ± и инпуты — kit disabled: .gc-btn:disabled opacity 0.6, .gc-input:disabled --text-disabled.
 * Не перебивать opacity/color — иначе readonly выглядит как редактирование. */
.calculator-fields[disabled] {
    opacity: 1;
}

.calculator-fields[disabled] .gc-input,
.calculator-fields .calc-input-group .gc-input:disabled {
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    cursor: not-allowed;
}

.calculator-fields[disabled] .calc-input-group .gc-btn,
.calculator-fields .calc-input-group .gc-btn:disabled {
    color: var(--text-disabled);
}

/* Группа ввода */
.calc-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Группа ввода с лейблом слева (для зон) */
.calc-form-group-horizontal {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

/* Лейбл слева в калькуляторе (не gc-form-label — это другой паттерн) */
.calc-form-group-horizontal > label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    width: 80px;
    flex-shrink: 0;
    line-height: 1.2;
    margin: 0;
}

/* Input группа с кнопками +/-.
 * Dark: мягкий elevated fill (I7.364). Light: kit rest — primary / transparent,
 * не elevated (gray/200) и не control-hover (gray/300): на белой панели это «чёрные» поля. */
.calculator-fields {
    --gc-input-bg: light-dark(var(--surface-primary), var(--surface-elevated));
    --gc-input-bg-hover: light-dark(var(--surface-primary), var(--surface-interaction-control-hover));
    --gc-input-border: var(--border-default);
    --gc-btn-outline-bg: light-dark(transparent, var(--surface-elevated));
    --gc-btn-outline-hover-bg: light-dark(
        color-mix(in srgb, var(--text-primary) 6%, transparent),
        var(--surface-interaction-control-hover)
    );
}

.calculator-fields .calc-input-group {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.calculator-fields .calc-input-group .gc-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 48px !important;
    font-size: var(--font-size-20);
    font-weight: 400;
    padding: 0;
}

/* Нижняя CTA: gc-btn-black (перебивает legacy .btn-fixed в styles.css) */
.fix-cont .gc-btn.btn-fixed.gc-btn-black {
    background-color: var(--fill-emphasis-inverse) !important;
    border-color: transparent !important;
    color: var(--text-on-solid-inverse) !important;
}

.fix-cont .gc-btn.btn-fixed.gc-btn-black:hover:not(:disabled):not([disabled]) {
    background-color: var(--gray-100) !important;
    border-color: transparent !important;
    color: var(--text-on-solid-inverse) !important;
}

[data-theme="light"] .fix-cont .gc-btn.btn-fixed.gc-btn-black {
    background-color: var(--fill-emphasis) !important;
    border-color: transparent !important;
    color: var(--text-on-solid) !important;
}

[data-theme="light"] .fix-cont .gc-btn.btn-fixed.gc-btn-black:hover:not(:disabled):not([disabled]) {
    background-color: var(--gray-800) !important;
    border-color: transparent !important;
    color: var(--text-on-solid) !important;
}

html[data-theme="dark"] .fix-cont .gc-btn.btn-fixed.gc-btn-black {
    background-color: var(--badge-selected-bg) !important;
    border-color: var(--badge-selected-bg) !important;
    color: var(--badge-selected-color) !important;
}

html[data-theme="dark"] .fix-cont .gc-btn.btn-fixed.gc-btn-black:hover:not(:disabled):not([disabled]) {
    background-color: var(--badge-selected-bg) !important;
    border-color: var(--badge-selected-bg) !important;
    color: var(--badge-selected-color) !important;
    filter: brightness(0.94);
}

/* Кастомизация gc-input для калькулятора (только поля ±, не доказательства) */
.calculator-fields .calc-input-group .gc-input {
    width: 80px;
    min-width: 0;
    flex-shrink: 0;
    text-align: center;
    font-size: var(--font-size-20);
    font-weight: 600;
    height: 48px;
}

/* Инпут времени в калькуляторе */
.calc-form-group-horizontal .gc-input#time {
    flex: 1;
    font-size: var(--font-size-20);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Чекбокс "Вне зачета" */
.calc-checkbox-group {
    padding: var(--space-2) 0;
}

.calc-checkbox-group .gc-checkbox-wrapper {
    margin: 0;
}

.calc-checkbox-group .gc-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Readonly-пояснение: gc-callout --stack/--tint в styles.css; gc-info-block.calc-readonly-info — Challenges Submit */
.gc-info-block.calc-readonly-info {
    background-color: var(--surface-control);
    border: 1px solid var(--border-subtle);
    border-radius: var(--gc-btn-radius);
    padding: var(--space-2);
    color: var(--text-primary);
    font-size: var(--font-size-14);
}

.gc-info-block.calc-readonly-info i {
    color: var(--text-secondary);
}

/* Фиксированная кнопка снизу */
.fix-cont {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-canvas);
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
}

.fix-cont-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .fix-cont-container {
        max-width: 900px;
    }
}

.fix-cont-inner {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
    width: 100%;
}

.fix-cont-inner .btn-fixed,
.fix-cont-inner .gc-btn.btn-fixed {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* На мобильных устройствах */
@media (max-width: 991.98px) {
    .fix-cont {
        bottom: var(--space-4); /* Отступ снизу */
        left: 0;
        right: 0;
        padding: 0 var(--space-4); /* Только боковые отступы */
        border: none;
        background: transparent;
    }
}

.btn-fixed {
    flex: 1;
    box-sizing: border-box;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--gc-btn-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 52px;
}

.btn-fixed .shots-counter {
    font-size: var(--font-size-13);
    font-weight: 400;
    opacity: 0.75;
    line-height: 1;
}

/* Disabled-кнопка в readonly не должна темнеть до чёрного текста */
.btn-fixed-readonly:disabled {
    background: var(--surface-control) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
    opacity: 1;
}

.btn-next-shooter {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--gc-btn-radius);
    border: 1px solid var(--border-subtle);
    background: var(--surface-panel);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
    min-width: 0;
    max-width: 160px;
    height: 52px;
    transition: background 0.15s;
}

.btn-next-shooter:hover:not(:disabled) {
    background: color-mix(in srgb, var(--fill-primary) 6%, transparent);
    color: var(--text-primary);
    text-decoration: none;
}

.btn-next-shooter:disabled {
    opacity: 0.55;
    pointer-events: none;
}

.btn-next-shooter-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-align: right;
}

.btn-next-shooter-label {
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    line-height: 1;
    white-space: nowrap;
}

.btn-next-shooter-name {
    font-size: var(--font-size-15);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.btn-next-shooter-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.btn-next-shooter-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--font-size-14);
}

.btn-next-shooter-chevron {
    color: var(--text-secondary);
    font-size: var(--font-size-13);
    flex-shrink: 0;
}

/* На мобильных - кнопка растягивается */
@media (max-width: 991.98px) {
    .fix-cont .btn-fixed,
    .fix-cont .gc-btn.btn-fixed {
        margin: 0 !important;
        border-radius: var(--gc-btn-radius) !important;
    }

    .fix-cont .gc-btn.btn-fixed.btn-fixed-readonly:disabled {
        background: var(--surface-control) !important;
        border: 1px solid var(--border-subtle) !important;
        color: var(--text-primary) !important;
    }
}


.shots-counter {
    font-size: var(--font-size-14);
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

/* Модал выбора оружия - используем стандартные UI Kit стили */

@media (max-width: 991.98px) {
    /* Зазор под fixed CTA — только у блока с полями, не у всей страницы */
    .challenge-submit-form .calculator-form {
        padding-bottom: 72px;
    }
}

/* Адаптив */
@media (max-width: 768px) {
    .calculator-container {
        padding: var(--space-2);
    }
    

    .calc-form-group-horizontal {
        gap: var(--space-2);
    }
    
    .calc-form-group-horizontal > label {
        width: 65px;
    }
    
    .calculator-fields .calc-input-group {
        gap: var(--space-2);
    }
    
    .calculator-fields .calc-input-group .gc-btn {
        height: 48px !important;
        font-size: var(--font-size-18);
    }
    
    .calculator-fields .calc-input-group .gc-input {
        width: 60px;
        height: 48px;
        font-size: var(--font-size-18);
    }
    
    .calc-form-group-horizontal .gc-input#time {
        font-size: var(--font-size-18);
    }
}

/*
 * Inertia shell: document не скроллится, колонка — .gc-app-main.
 * styles.css .fix-cont { position:fixed; left:0; right:0 } уезжает под app rail.
 * Sticky держит CTA внизу main, рядом «Следующий».
 */
body.inertia-shell .fix-cont {
    position: sticky;
    left: auto;
    right: auto;
    bottom: 0;
    width: 100%;
    z-index: 2;
    margin-top: var(--space-4);
    padding: var(--space-2) 0 var(--space-4);
    background: var(--surface-page);
    border-top: none;
    box-sizing: border-box;
}

body.inertia-shell .calculator-container:not(:has(.challenge-submit-proof)) {
    padding-bottom: 0;
}

body.inertia-shell .fix-cont-inner .btn-fixed,
body.inertia-shell .fix-cont-inner .gc-btn.btn-fixed {
    width: auto;
}

@media (min-width: 992px) {
    body.inertia-shell .fix-cont {
        margin-top: var(--space-6);
        padding: var(--space-3) 0 var(--space-4);
    }
}

@media (max-width: 991.98px) {
    body.inertia-shell .fix-cont {
        left: auto;
        right: auto;
        bottom: 0;
        padding: var(--space-2) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        background: var(--surface-page);
    }
}

.calc-skeleton-label {
    width: 80px;
    height: var(--font-size-16);
    flex-shrink: 0;
}

.calc-skeleton-step {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    border-radius: var(--radius-12);
}

.calc-skeleton-value {
    width: 80px;
    flex-shrink: 0;
    height: 48px;
    border-radius: var(--radius-12);
}

.calc-skeleton-time {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    border-radius: var(--radius-12);
}

.calc-skeleton-chip {
    width: 56px;
    height: 20px;
    border-radius: 999px;
    flex-shrink: 0;
    margin-left: auto;
}

.calc-skeleton-weapon-title {
    width: 80px;
    height: var(--font-size-14);
}

.calc-skeleton-weapon-meta {
    width: 120px;
    height: var(--font-size-13);
}

.calc-skeleton-weapon-icon {
    width: var(--gc-list-media-size);
    height: var(--gc-list-media-size);
    border-radius: var(--radius-8);
    flex-shrink: 0;
}

.calc-skeleton-checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.calc-skeleton-checkbox {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-4);
    flex-shrink: 0;
}

.calc-skeleton-checkbox-label {
    width: 90px;
    height: var(--font-size-14);
}

/*
 * Сайдпейдж на /exercise/{id}: одна колонка в 400px rail.
 * Inset даёт __body; контейнер без своего padding. Ритм — space/3.
 */
.gc-context-sidepage .calculator-container,
.calculator-container--panel {
    max-width: none;
    margin: 0;
    padding: 0;
    gap: var(--space-3);
}

.gc-context-sidepage .calculator-form,
.gc-context-sidepage .calculator-fields,
.calculator-container--panel .calculator-form,
.calculator-container--panel .calculator-fields {
    gap: var(--space-3);
}

.gc-context-sidepage .calc-form-group-horizontal,
.calculator-container--panel .calc-form-group-horizontal {
    gap: var(--space-3);
}

.gc-context-sidepage .calc-checkbox-group,
.calculator-container--panel .calc-checkbox-group {
    padding: 0;
}

/* Одна рамка у селектора — без .calc-weapon-module */
.gc-context-sidepage .calc-weapon-module {
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

.gc-context-sidepage .gc-calculator-weapon-selector,
.gc-modal-sidepanel .gc-calculator-weapon-selector {
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-12);
    padding: var(--space-2) var(--space-3);
}

.gc-context-sidepage .gc-calculator-weapon-selector:hover,
.gc-context-sidepage .gc-calculator-weapon-selector:focus,
.gc-modal-sidepanel .gc-calculator-weapon-selector:hover,
.gc-modal-sidepanel .gc-calculator-weapon-selector:focus {
    background: var(--surface-interaction-row-hover);
}

.gc-context-sidepage__footer-actions .gc-calculator-save {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    flex-direction: column;
    gap: 0;
}

.gc-context-sidepage__footer-actions .gc-calculator-save .shots-counter {
    font-size: var(--font-size-13);
    font-weight: 400;
    opacity: 0.75;
    line-height: 1;
}

.gc-context-sidepage__footer-actions .btn-next-shooter {
    max-width: none;
    flex: 0 1 46%;
    height: 44px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
}

.gc-context-sidepage .calc-skeleton-label {
    width: 72px;
    height: var(--font-size-14);
    flex-shrink: 0;
}

.gc-context-sidepage .calc-skeleton-step,
.gc-context-sidepage .calc-skeleton-value,
.gc-context-sidepage .calc-skeleton-time,
.calculator-container--panel .calc-skeleton-step,
.calculator-container--panel .calc-skeleton-value,
.calculator-container--panel .calc-skeleton-time {
    height: 44px;
}

.gc-context-sidepage .calc-skeleton-weapon-icon,
.calculator-container--panel .calc-skeleton-weapon-icon {
    width: var(--gc-list-media-size-md);
    height: var(--gc-list-media-size-md);
    border-radius: var(--radius-8);
    flex-shrink: 0;
}

.gc-context-sidepage__footer-actions .gc-calculator-skeleton-next {
    flex: 0 1 46%;
    width: auto;
    height: 44px;
}

@media (min-width: 992px) {
    .gc-context-sidepage .calculator-fields,
    .calculator-container--panel .calculator-fields {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .gc-context-sidepage .calculator-fields .calc-form-group-horizontal:has(#time),
    .gc-context-sidepage .calculator-fields .calc-checkbox-group,
    .calculator-container--panel .calculator-fields .calc-form-group-horizontal:has(#time),
    .calculator-container--panel .calculator-fields .calc-checkbox-group {
        grid-column: auto;
    }

    .gc-context-sidepage .calculator-fields .calc-input-group .gc-btn,
    .calculator-container--panel .calculator-fields .calc-input-group .gc-btn {
        height: 44px !important;
        font-size: var(--font-size-16);
    }

    .gc-context-sidepage .calculator-fields .calc-input-group .gc-input,
    .calculator-container--panel .calculator-fields .calc-input-group .gc-input {
        width: 72px;
        height: 44px;
        font-size: var(--font-size-16);
    }

    .gc-context-sidepage .calc-form-group-horizontal > label,
    .calculator-container--panel .calc-form-group-horizontal > label {
        width: auto;
        min-width: 72px;
    }

    .gc-context-sidepage .calc-form-group-horizontal .gc-input#time,
    .calculator-container--panel .calc-form-group-horizontal .gc-input#time {
        height: 44px;
        font-size: var(--font-size-16);
    }
}