/* FireTag theme — dark charcoal, fire engine red, white, muted grey. */
:root,
[data-bs-theme="light"] {
  --ft-red: #b3121b;
  --ft-red-hover: #8f0e15;
  --ft-red-soft: #fbe9ea;
  --ft-charcoal: #1f2326;
  --ft-charcoal-2: #2a2f33;
  --ft-gray: #6c757d;
  --ft-surface: #ffffff;
  --ft-bg: #f3f4f5;
  --ft-border: #dfe2e5;
  --bs-primary: var(--ft-red);
  --bs-primary-rgb: 179, 18, 27;
  --bs-link-color: #a3111a;
  --bs-link-hover-color: #7d0d13;
  --bs-body-bg: var(--ft-bg);
  --bs-border-radius: .45rem;
  --ft-viewer-bg: #e9ebed;
}
[data-bs-theme="dark"] {
  --ft-surface: #23272b;
  --ft-bg: #181b1e;
  --ft-border: #343a40;
  --ft-red-soft: #3a1416;
  --bs-body-bg: var(--ft-bg);
  --bs-link-color: #f0646b;
  --bs-link-hover-color: #ff8a90;
  --ft-viewer-bg: #2b3035;
}

body { background: var(--ft-bg); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.btn-primary { --bs-btn-bg: var(--ft-red); --bs-btn-border-color: var(--ft-red); --bs-btn-hover-bg: var(--ft-red-hover); --bs-btn-hover-border-color: var(--ft-red-hover);
  --bs-btn-active-bg: var(--ft-red-hover); --bs-btn-disabled-bg: var(--ft-red); --bs-btn-disabled-border-color: var(--ft-red); }
.btn-outline-primary { --bs-btn-color: var(--ft-red); --bs-btn-border-color: var(--ft-red); --bs-btn-hover-bg: var(--ft-red); --bs-btn-hover-border-color: var(--ft-red);
  --bs-btn-active-bg: var(--ft-red-hover); }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #f0646b; }
.text-primary { color: var(--ft-red) !important; }
[data-bs-theme="dark"] .text-primary { color: #f0646b !important; }
.bg-primary { background-color: var(--ft-red) !important; }
.form-check-input:checked { background-color: var(--ft-red); border-color: var(--ft-red); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #e0757b; box-shadow: 0 0 0 .2rem rgba(179, 18, 27, .2); }
.nav-pills .nav-link.active { background: var(--ft-red); }
.accordion { --bs-accordion-active-bg: var(--ft-red-soft); --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(179, 18, 27, .2); --bs-accordion-bg: transparent; }

/* Navbar */
.ft-navbar { background: var(--ft-charcoal); border-bottom: 3px solid var(--ft-red); }
.ft-navbar .navbar-brand { font-weight: 700; letter-spacing: .02em; }
.ft-navbar .brand-mark { display: inline-flex; width: 30px; height: 30px; border-radius: 6px; background: var(--ft-red); color: #fff; align-items: center; justify-content: center; margin-right: .5rem; }
.ft-navbar .nav-link { color: rgba(255,255,255,.78); }
.ft-navbar .nav-link:hover, .ft-navbar .nav-link.active { color: #fff; }
.ft-navbar .nav-link.active { box-shadow: inset 0 -3px 0 var(--ft-red); }

.card { background: var(--ft-surface); border-color: var(--ft-border); }
.card-header { background: transparent; font-weight: 600; }
.page-header { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.5rem; margin: 0; font-weight: 700; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: var(--ft-gray); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.table > :not(caption) > * > * { background-color: transparent; }
.table-card { overflow-x: auto; }
.notice-compat { border-left: 4px solid #e0a800; }
.swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); vertical-align: middle; }
.footer { color: var(--ft-gray); font-size: .85rem; }

/* ---------------- Designer ---------------- */
.designer { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.designer-panel { background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: .5rem; }
.designer-controls { max-height: calc(100vh - 120px); overflow-y: auto; position: sticky; top: 1rem; }
.designer-controls .accordion-button { font-weight: 600; padding: .65rem 1rem; }
.designer-controls .accordion-body { padding: .75rem 1rem; }
.designer-controls .form-label { font-size: .8rem; margin-bottom: .15rem; color: var(--bs-secondary-color); }
.designer-controls .form-control, .designer-controls .form-select { font-size: .9rem; }
.designer-side { position: sticky; top: 1rem; }
.viewer-wrap { position: relative; background: var(--ft-viewer-bg); border-radius: .5rem; border: 1px solid var(--ft-border); overflow: hidden; height: calc(100vh - 220px); min-height: 380px; }
.viewer-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.viewer-toolbar { position: absolute; top: .5rem; left: .5rem; right: .5rem; display: flex; flex-wrap: wrap; gap: .35rem; z-index: 2; pointer-events: none; }
.viewer-toolbar .btn { pointer-events: auto; }
.viewer-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.12); z-index: 3; }
.viewer-loading.show { display: flex; }
.viewer-dims { position: absolute; bottom: .5rem; left: .75rem; font: 600 .8rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bs-body-color); opacity: .8; z-index: 2; }
.qc-list { font-size: .85rem; margin: 0; padding-left: 1.1rem; }
.qc-list li { margin-bottom: .2rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; font-size: .88rem; }
.kv dt { color: var(--bs-secondary-color); font-weight: 400; }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.price-big { font-size: 1.6rem; font-weight: 700; }
.preset-btn { border: 2px solid var(--ft-border); border-radius: .4rem; padding: .2rem; background: none; display: inline-flex; gap: 2px; }
.preset-btn span { width: 18px; height: 18px; border-radius: 3px; display: inline-block; }
.preset-btn.active { border-color: var(--ft-red); }
.mobile-bar { display: none; }
.logo-preview { background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0/16px 16px; border: 1px solid var(--ft-border); border-radius: .35rem; width: 100%; max-height: 180px; object-fit: contain; }

@media (max-width: 1199.98px) {
  .designer { grid-template-columns: 300px minmax(0, 1fr); }
  .designer-side { grid-column: 1 / -1; position: static; }
}
@media (max-width: 767.98px) {
  .designer { grid-template-columns: 1fr; }
  .designer-viewer { order: -1; position: sticky; top: 0; z-index: 5; }
  .viewer-wrap { height: 42vh; min-height: 260px; }
  .designer-controls { max-height: none; position: static; }
  .designer-side { padding-bottom: 5rem; }
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--ft-surface); border-top: 2px solid var(--ft-red);
    padding: .5rem .75rem; gap: .5rem; align-items: center; justify-content: space-between; box-shadow: 0 -4px 12px rgba(0,0,0,.12); }
}

/* Photo calibration */
.calib-wrap { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; }
.calib-wrap img { max-width: 100%; display: block; border-radius: .35rem; }
.calib-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media print { .ft-navbar, .no-print { display: none !important; } }

/* Helmet shield designer */
.shield-designer .viewer-wrap { height: calc(100vh - 260px); }
.svg-host { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.svg-host svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.shield-designer .nav-tabs .nav-link { padding: .35rem .8rem; font-size: .9rem; }
.slot-preview { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-row .form-control-color { width: 2.4rem; flex: none; }
.color-row .filament-select { max-width: 8.5rem; }
#sizeButtons .btn { line-height: 1.1; }
@media (max-width: 991.98px) { .shield-designer .viewer-wrap { height: 42vh; } }

/* Templates page */
.tpl-tabs .nav-link { font-weight: 600; }
.tpl-card { transition: border-color .15s, box-shadow .15s; }
.tpl-card:hover { border-color: var(--ft-red); box-shadow: 0 .25rem .75rem rgba(0,0,0,.08); }
.tpl-icon { flex: none; width: 1.9rem; height: 1.9rem; border-radius: .45rem; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(179,18,27,.12); color: var(--ft-red); font-size: .95rem; }
.tpl-scope { flex: none; font-weight: 600; }
.tpl-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.spec-chip { display: inline-block; font-size: .75rem; line-height: 1.2; padding: .2rem .5rem; border-radius: 999px;
  background: var(--bs-tertiary-bg); border: 1px solid var(--ft-border); color: var(--bs-body-color); }
.tpl-card .swatch { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--ft-border); display: inline-block; }