/* ═══════════════════════════════════════════
   LEDTool Theme — Computerra Inspired
   Тёмная шапка + оранжевый акцент + серый фон
   ═══════════════════════════════════════════ */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f2f2f5 !important;
}

/* ─── Bootstrap CSS Variables ─── */
:root {
    --bs-primary: #ff7200;
    --bs-primary-rgb: 255, 114, 0;
    --bs-secondary: #f4f4f5;
    --bs-secondary-rgb: 244, 244, 245;
    --bs-success: #ff7200;
    --bs-success-rgb: 255, 114, 0;
    --bs-danger: #e50404;
    --bs-danger-rgb: 229, 4, 4;
    --bs-warning: #ff821a;
    --bs-warning-rgb: 255, 130, 26;
    --bs-info: #0891b2;
    --bs-info-rgb: 8, 145, 178;
    --bs-light: #fafafa;
    --bs-light-rgb: 250, 250, 250;
    --bs-dark: #333646;
    --bs-dark-rgb: 51, 54, 70;
    --bs-body-color: #333646;
    --bs-body-color-rgb: 51, 54, 70;
    --bs-body-bg: #f2f2f5;
    --bs-body-bg-rgb: 242, 242, 245;
    --bs-secondary-color: #6c757d;
    --bs-secondary-bg: #f4f4f5;
    --bs-border-color: #d4d4d8;
    --bs-border-color-translucent: rgba(212, 212, 216, 0.5);
    --bs-border-color-rgb: 212, 212, 216;
    --bs-link-color: #ff7200;
    --bs-link-hover-color: #e50404;
    --bs-link-color-rgb: 255, 114, 0;
    --bs-link-hover-color-rgb: 229, 4, 4;
    --bs-focus-ring-color: rgba(255, 114, 0, 0.25);
    --bs-focus-ring-width: 0.2rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-primary-text-emphasis: #ff7200;
    --bs-secondary-text-emphasis: #6c757d;
    --bs-success-text-emphasis: #ff7200;
    --bs-danger-text-emphasis: #e50404;
    --bs-warning-text-emphasis: #ff821a;
    --bs-info-text-emphasis: #0891b2;
    --bs-light-text-emphasis: #6c757d;
    --bs-dark-text-emphasis: #333646;
    --bs-primary-bg-subtle: #fff1e6;
    --bs-secondary-bg-subtle: #fafafa;
    --bs-success-bg-subtle: #fff1e6;
    --bs-danger-bg-subtle: #fee6e6;
    --bs-warning-bg-subtle: #fff3e6;
    --bs-info-bg-subtle: #ecfeff;
    --bs-light-bg-subtle: #fafafa;
    --bs-dark-bg-subtle: #d4d4d8;
    --bs-primary-border-subtle: #ffc999;
    --bs-secondary-border-subtle: #d4d4d8;
    --bs-success-border-subtle: #ffc999;
    --bs-danger-border-subtle: #f69999;
    --bs-warning-border-subtle: #ffc999;
    --bs-info-border-subtle: #a5f3fc;
    --bs-light-border-subtle: #d4d4d8;
    --bs-dark-border-subtle: #d4d4d8;
    --bs-heading-color: #333646;
    --bs-card-border-color: #d4d4d8;
    --bs-card-border-radius: 6px;
    --bs-card-cap-bg: #fff;
    --bs-card-bg: #ffffff;
    --bs-navbar-color: #9b9f9f;
    --bs-navbar-hover-color: #ff7200;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ff7200;
    --bs-navbar-brand-hover-color: #ff821a;
    --bs-dropdown-color: #333646;
    --bs-dropdown-border-color: #d4d4d8;
    --bs-dropdown-link-color: #333646;
    --bs-dropdown-link-hover-color: #333646;
    --bs-dropdown-link-hover-bg: #f4f4f5;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #ff7200;
    --bs-pagination-color: #333646;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: #d4d4d8;
    --bs-pagination-hover-color: #333646;
    --bs-pagination-hover-bg: #f4f4f5;
    --bs-pagination-hover-border-color: #a1a1aa;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #ff7200;
    --bs-pagination-active-border-color: #ff7200;
    --bs-pagination-disabled-color: #a1a1aa;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #d4d4d8;
    --bs-btn-color: #333646;
    --bs-btn-bg: #f4f4f5;
    --bs-btn-border-color: #d4d4d8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff7200;
    --bs-btn-hover-border-color: #ff7200;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e50404;
    --bs-btn-active-border-color: #e50404;
    --bs-btn-disabled-color: #a1a1aa;
    --bs-btn-disabled-bg: #f4f4f5;
    --bs-btn-disabled-border-color: #d4d4d8;
    --bs-btn-primary-color: #fff;
    --bs-btn-primary-bg: #333646;
    --bs-btn-primary-border-color: #333646;
    --bs-btn-primary-hover-color: #fff;
    --bs-btn-primary-hover-bg: #3d4057;
    --bs-btn-primary-hover-border-color: #3d4057;
    --bs-btn-primary-active-color: #fff;
    --bs-btn-primary-active-bg: #2a2c3b;
    --bs-btn-primary-active-border-color: #2a2c3b;
    --bs-btn-danger-color: #fff;
    --bs-btn-danger-bg: #e50404;
    --bs-btn-danger-border-color: #e50404;
    --bs-btn-danger-hover-color: #fff;
    --bs-btn-danger-hover-bg: #cc0303;
    --bs-btn-danger-hover-border-color: #cc0303;
    --bs-btn-danger-active-color: #fff;
    --bs-btn-danger-active-bg: #b30202;
    --bs-btn-danger-active-border-color: #b30202;
    --bs-btn-link-color: #6c757d;
    --bs-btn-link-hover-color: #ff7200;
    --bs-btn-link-disabled-color: #a1a1aa;
    --bs-badge-color: #fff;
    --bs-badge-bg: #ff7200;
    --bs-breadcrumb-item-active-color: #ff7200;
    --bs-link-decoration: none;
    --bs-focus-ring-x: 0;
    --bs-focus-ring-y: 0;
    --bs-focus-ring-blur: 0;
}

/* ─── Отступ под фиксированной шапкой ─── */
main > .container {
    padding: 70px 15px 20px;
}

/* ─── Navbar — тёмный, как на Компьютерре ─── */
.navbar-dark.bg-dark {
    background: #333646 !important;
    border-bottom: 2px solid #ff7200 !important;
}
.navbar-dark .navbar-brand {
    color: #ff7200 !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
}
.navbar-dark .navbar-nav .nav-link {
    color: #c9c5db !important;
    font-weight: 500 !important;
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: #ff7200 !important;
}
.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff !important;
    font-weight: 600 !important;
}
.navbar-dark .navbar-toggler {
    border-color: #52525b !important;
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c9c5db' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ─── Пагинация ─── */
.pagination .page-link {
    color: #333646 !important;
    border-color: #d4d4d8 !important;
    background: #fff !important;
}
.pagination .page-link:hover {
    background: #f4f4f5 !important;
    color: #333646 !important;
    border-color: #a1a1aa !important;
}
.pagination .page-item.active .page-link {
    background: #ff7200 !important;
    border-color: #ff7200 !important;
    color: #fff !important;
}
.pagination .page-item.disabled .page-link {
    color: #a1a1aa !important;
    background: #fff !important;
    border-color: #d4d4d8 !important;
}

/* ─── Карточки ─── */
.card, .panel {
    background: #fff !important;
    border: 1px solid #d4d4d8 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* ─── Форма (pickup pills) ─── */
.pickup .option-pill span {
    background: #fafafa !important;
    border: 1px solid #d4d4d8 !important;
    color: #6c757d !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
}
@media (hover: hover) {
  .pickup .option-pill:hover span {
      border-color: #ff7200 !important;
  }
}
.pickup .option-pill input:checked + span {
    background: #fff !important;
    border-color: #ff7200 !important;
    color: #ff7200 !important;
    border-width: 1px !important;
    font-weight: 600 !important;
}
.pickup .option-pill input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(255, 114, 0, 0.25) !important;
}

/* ─── Футер ─── */
#footer,
footer.bg-light {
    background: #333646 !important;
    border-top: 2px solid #ff7200 !important;
    color: #9b9f9f !important;
}

/* ─── Баннер ─── */
.banner-fullscreen {
    background: linear-gradient(135deg, #333646 0%, #3d4057 50%, #333646 100%) !important;
}
.banner-content .btn-custom-primary {
    background: #ff7200 !important;
    border-color: #ff7200 !important;
}
.banner-content .btn-custom-primary:hover {
    background: transparent !important;
    color: #ff7200 !important;
    border-color: #ff7200 !important;
}

/* ─── Scene ─── */
.scene-viewport,
.sliders-panel {
    background: #fff !important;
    border: 1px solid #d4d4d8 !important;
    border-radius: 6px !important;
}
.reset-btn {
    background: #ff7200 !important;
}

/* ─── Кнопка «Показать варианты» ─── */
.pickup .btn-submit {
    background: #333646 !important;
    border-color: #333646 !important;
    border-radius: 999px !important;
    color: #fff !important;
}
.pickup .btn-submit:hover {
    background: #3d4057 !important;
    border-color: #3d4057 !important;
    color: #fff !important;
}
.pickup .btn-submit.is-loading {
    background: #333646 !important;
    border-color: #333646 !important;
}

/* ─── Фокус ─── */
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255,114,0,0.2) !important;
}

/* ═══════════════════════════════════════════
   LEDTool Typography (без изменений)
   ═══════════════════════════════════════════ */

h1, .page-title h1,
.site-history h1,
.site-index h1,
.site-view-result h1,
.admin-user-index h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 8px !important;
}

h2, h3,
.card-header strong {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

body, p, .card-body, .container {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.param-label, .param-item .param-label,
.form-label, .control-label,
.small.text-muted,
.card .card-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #a1a1aa !important;
}

.param-value, .param-item .param-value,
.card-value, .stat-value,
.table td {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333646 !important;
}

.param-sub, .text-muted.small,
.pickup-card .card-date {
    font-size: 11px !important;
    color: #a1a1aa !important;
    font-weight: 400 !important;
}

.navbar .navbar-brand {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}
.navbar .nav-link {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.btn {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}
.btn-sm {
    font-size: 12px !important;
    font-weight: 500 !important;
}

.table th {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: #6c757d !important;
}
.table td {
    font-size: 13px !important;
}

.breadcrumb {
    font-size: 12px !important;
}
.breadcrumb-item.active {
    font-weight: 600 !important;
}

.page-link {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.pickup .option-pill span {
    font-size: 13px !important;
    font-weight: 500 !important;
}
.pickup .option-pill input:checked + span {
    font-weight: 700 !important;
}

.pickup-card .card-header .card-title {
    font-size: 15px !important;
    font-weight: 600 !important;
}
.pickup-card .card-header span[style*="font-weight:600"] {
    font-size: 15px !important;
}

.pickup-results h5 {
    font-size: 16px !important;
    font-weight: 600 !important;
}
.pickup-card span[style*="font-weight:700"][style*="color:#999"] {
    font-size: 14px !important;
    color: #a1a1aa !important;
}

.badge {
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}
.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-secondary {
    font-weight: 500 !important;
}

#footer, footer {
    font-size: 12px !important;
    color: #9b9f9f !important;
}