=== */
/* card-image-wrap img styles handled per-card inline */

@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600;700;800&display=swap');

/* @page задаётся динамически через #dynPage в конструкторе карт (с явной ориентацией). */
/* Заскоулено на .cards-tool-page, чтобы не трогать фон и отступы всего сайта. */
.cards-tool-page * { box-sizing: border-box; }
.cards-tool-page {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #e0e0e0;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

  /* === AUSPEX === */
  .aus-scope .page { width: 210mm; min-height: 297mm; margin: 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3.5mm; padding: 4mm; page-break-after: always; }
  .aus-scope .discipline-header { width: 100%; text-align: center; padding: 6mm 5mm 4mm; }
  .aus-scope .discipline-header::after { content: ''; display: block; width: 60%; height: 1px; margin: 3mm auto 0; background: linear-gradient(90deg, transparent, #5aacc8, transparent); }
  .aus-scope .discipline-header h1 { font-family: 'Cormorant Garamond', serif; font-size: 32pt; font-weight: 700; color: #78c0dc; text-transform: uppercase; letter-spacing: 10px; text-shadow: 0 0 40px rgba(120,192,220,0.35), 0 0 80px rgba(120,192,220,0.12); display: flex; align-items: center; justify-content: center; gap: 6mm; }
  .aus-scope .discipline-header p { font-size: 8pt; color: #3a7898; font-style: italic; letter-spacing: 2px; margin-top: 1mm; }
  .aus-scope .header-symbol { height: 0.95em; flex-shrink: 0; }
  .aus-scope .card { width: 97mm; min-height: 142mm; max-height: 142mm; overflow: hidden; background: linear-gradient(160deg, #0a1a2e 0%, #102840 50%, #0c2234 100%); border: 1.5px solid rgba(90,172,200,0.22); border-radius: 8px; padding: 4.5mm 5mm 4mm; display: flex; flex-direction: column; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(90,172,200,0.08); }
  .aus-scope .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 5%, #2a6888 30%, #5aacc8 50%, #2a6888 70%, transparent 95%); }
  .aus-scope .card-level { font-size: 6.5pt; text-transform: uppercase; letter-spacing: 2.5px; color: #5aacc8; font-weight: 700; margin-bottom: 1mm; display: flex; align-items: center; gap: 2mm; }
  .aus-scope .card-level::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(90,172,200,0.25), transparent); }
  .aus-scope .card-title { font-family: 'Cormorant Garamond', serif; font-size: 13pt; font-weight: 700; color: #88cce8; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.5mm; line-height: 1.15; padding-right: 12mm; }
  .aus-scope .card-subtitle { font-size: 6pt; color: #3a7090; font-style: italic; letter-spacing: 0.5px; margin-bottom: 2mm; padding-bottom: 2mm; border-bottom: 1px solid rgba(90,172,200,0.12); }
  .aus-scope .amalgam-badge { display: inline-block; background: linear-gradient(135deg, #0a2038, #143858); color: #a0c8de; font-size: 5.5pt; padding: 0.8mm 2.5mm; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 1.5mm; box-shadow: 0 1px 4px rgba(90,172,200,0.18); }
  .aus-scope .prereq-badge { display: inline-block; background: linear-gradient(135deg, #0c1e30, #1a3850); color: #8098b0; font-size: 5.5pt; padding: 0.8mm 2.5mm; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 1.5mm; margin-right: 1mm; }
  .aus-scope .card-desc { font-size: 5.8pt; line-height: 1.5; color: #6ab4d0; margin-bottom: 1.5mm; }
  .aus-scope .system-title { font-size: 6pt; text-transform: uppercase; letter-spacing: 2px; color: #5aacc8; font-weight: 700; margin-bottom: 0.5mm; display: flex; align-items: center; gap: 1.5mm; }
  .aus-scope .system-title::after { content: ''; flex: 1; height: 1px; background: rgba(90,172,200,0.15); }
  .aus-scope .card-system { font-size: 5.5pt; line-height: 1.45; color: #5898b8; margin-bottom: 2mm; }
  .aus-scope .card-meta { margin-top: auto; border-top: 1px solid rgba(90,172,200,0.18); padding-top: 1.5mm; }
  .aus-scope .meta-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4mm; }
  .aus-scope .meta-label { font-size: 5.5pt; text-transform: uppercase; letter-spacing: 1.5px; color: #5aacc8; font-weight: 700; }
  .aus-scope .meta-value { font-size: 6.3pt; color: #68a8c8; text-align: right; max-width: 68%; font-weight: 500; }
  .aus-scope .cut-line { border: 1.5px dashed rgba(90,172,200,0.12); border-radius: 8px; }
  .aus-scope .memo-card { background: linear-gradient(160deg, #0e2438 0%, #143050 50%, #0e2438 100%); border-color: rgba(90,172,200,0.30); justify-content: center; align-items: center; text-align: center; padding: 6mm; }
  .aus-scope .memo-title { font-family: 'Cormorant Garamond', serif; font-size: 18pt; color: #78c0dc; text-transform: uppercase; letter-spacing: 5px; font-weight: 700; margin-bottom: 3mm; }
  .aus-scope .memo-footer { margin-top: 4mm; font-size: 5.5pt; color: #1a3848; letter-spacing: 2px; text-transform: uppercase; }
  .aus-scope .card-image-wrap { width: calc(100% + 10mm); margin: 0 -5mm 1.5mm -5mm; min-height: 28mm; flex-grow: 1; overflow: hidden; position: relative; background: linear-gradient(135deg, #0a1a2e 0%, #102840 50%, #081828 100%); display:flex; align-items: center; justify-content:center; }
  .aus-scope .card-image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 10mm; background: linear-gradient(to top, #0a1a2e 0%, transparent 100%); pointer-events: none; }
  .aus-scope .card-image-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8mm; background: linear-gradient(to bottom, #0a1a2e 0%, transparent 100%); pointer-events: none; z-index: 1; }
  .aus-scope .img-placeholder { color: rgba(90,172,200,0.16); font-size: 7pt; text-transform: uppercase; letter-spacing: 2px; }
  .aus-scope .card-crown { position: absolute; top: 3mm; right: 3.5mm; width: 15mm; height: 15mm; opacity: 0.13; mix-blend-mode: screen; pointer-events: none; z-index: 2; }

/* === PROTEAN === */
  .pro-scope .page { width: 210mm; min-height: 297mm; margin: 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3.5mm; padding: 4mm; page-break-after: always; }
  .pro-scope .discipline-header { width: 100%; text-align: center; padding: 6mm 5mm 4mm; }
  .pro-scope .discipline-header::after { content: ''; display: block; width: 60%; height: 1px; margin: 3mm auto 0; background: linear-gradient(90deg, transparent, #30c030, transparent); }
  .pro-scope .discipline-header h1 { font-family: 'Cormorant Garamond', serif; font-size: 32pt; font-weight: 700; color: #40e040; text-transform: uppercase; letter-spacing: 10px; text-shadow: 0 0 40px rgba(64,224,64,0.4), 0 0 80px rgba(64,224,64,0.15); display: flex; align-items: center; justify-content: center; gap: 6mm; }
  .pro-scope .discipline-header p { font-size: 8pt; color: #208020; font-style: italic; letter-spacing: 2px; margin-top: 1mm; }
  .pro-scope .header-symbol { height: 0.9em; vertical-align: baseline; }
  .pro-scope .card { width: 97mm; min-height: 142mm; max-height: 142mm; overflow: hidden; background: linear-gradient(160deg, #040e04 0%, #061206 50%, #040e04 100%); border: 1.5px solid rgba(64,224,64,0.22); border-radius: 8px; padding: 4.5mm 5mm 4mm; display: flex; flex-direction: column; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(64,224,64,0.08); }
  .pro-scope .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 5%, #249a24 30%, #30c030 50%, #249a24 70%, transparent 95%); }
  .pro-scope .card-level { font-size: 6.5pt; text-transform: uppercase; letter-spacing: 2.5px; color: #30c030; font-weight: 700; margin-bottom: 1mm; display: flex; align-items: center; gap: 2mm; }
  .pro-scope .card-level::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(64,224,64,0.2), transparent); }
  .pro-scope .card-title { font-family: 'Cormorant Garamond', serif; font-size: 13pt; font-weight: 700; color: #50e850; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.5mm; line-height: 1.15; padding-right: 12mm; }
  .pro-scope .card-subtitle { font-size: 6pt; color: #288028; font-style: italic; letter-spacing: 0.5px; margin-bottom: 2mm; padding-bottom: 2mm; border-bottom: 1px solid rgba(64,224,64,0.12); }
  .pro-scope .amalgam-badge { display: inline-block; background: linear-gradient(135deg, #0a2008, #144014); color: #90e890; font-size: 5.5pt; padding: 0.8mm 2.5mm; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 1.5mm; box-shadow: 0 1px 4px rgba(64,224,64,0.2); }
  .pro-scope .card-desc { font-size: 5.8pt; line-height: 1.5; color: #60d060; margin-bottom: 1.5mm; }
  .pro-scope .system-title { font-size: 6pt; text-transform: uppercase; letter-spacing: 2px; color: #30c030; font-weight: 700; margin-bottom: 0.5mm; display: flex; align-items: center; gap: 1.5mm; }
  .pro-scope .system-title::after { content: ''; flex: 1; height: 1px; background: rgba(64,224,64,0.15); }
  .pro-scope .card-system { font-size: 5.5pt; line-height: 1.45; color: #40a040; margin-bottom: 2mm; }
  .pro-scope .card-meta { margin-top: auto; border-top: 1px solid rgba(64,224,64,0.18); padding-top: 1.5mm; }
  .pro-scope .meta-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4mm; }
  .pro-scope .meta-label { font-size: 5.5pt; text-transform: uppercase; letter-spacing: 1.5px; color: #30c030; font-weight: 700; }
  .pro-scope .meta-value { font-size: 6.3pt; color: #50c050; text-align: right; max-width: 68%; font-weight: 500; }
  .pro-scope .cut-line { border: 1.5px dashed rgba(64,224,64,0.12); border-radius: 8px; }
  .pro-scope .memo-card { background: linear-gradient(160deg, #061806 0%, #082408 50%, #061806 100%); border-color: rgba(64,224,64,0.35); justify-content: center; align-items: center; text-align: center; padding: 6mm; }
  .pro-scope .memo-title { font-family: 'Cormorant Garamond', serif; font-size: 18pt; color: #40e040; text-transform: uppercase; letter-spacing: 5px; font-weight: 700; margin-bottom: 3mm; }
  .pro-scope .memo-footer { margin-top: 4mm; font-size: 5.5pt; color: #104010; letter-spacing: 2px; text-transform: uppercase; }
  .pro-scope .card-image-wrap { width: calc(100% + 10mm); margin: 0 -5mm 1.5mm -5mm; min-height: 28mm; flex-grow: 1; overflow: hidden; position: relative; background: linear-gradient(135deg, #040e04 0%, #061206 50%, #040c06 100%); display:flex; align-items: center; justify-content:center; }
  .pro-scope .card-image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 10mm; background: linear-gradient(to top, #040e04 0%, transparent 100%); pointer-events: none; }
  .pro-scope .card-image-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8mm; background: linear-gradient(to bottom, #040e04 0%, transparent 100%); pointer-events: none; z-index: 1; }
  .pro-scope .img-placeholder { color: rgba(64,224,64,0.19); font-size: 7pt; text-transform: uppercase; letter-spacing: 2px; }
  .pro-scope .card-crown { position: absolute; top: 3mm; right: 3.5mm; width: 15mm; height: 15mm; opacity: 0.08; filter: grayscale(1) invert(1) brightness(1.5); mix-blend-mode: screen; pointer-events: none; z-index: 2; }
  .pro-scope .memo-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 75mm; height: auto; opacity: 0.07; pointer-events: none; z-index: 0; }
  .pro-scope .prereq-badge { display: inline-block; background: linear-gradient(135deg, #0a2010, #104020); color: #70b870; font-size: 5.5pt; padding: 0.8mm 2.5mm; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 1.5mm; margin-right: 1mm; }

/* === DOMINATE === */
  .dom-scope .page { width: 210mm; min-height: 297mm; margin: 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3.5mm; padding: 4mm; page-break-after: always; }
  .dom-scope .discipline-header { width: 100%; text-align: center; padding: 6mm 5mm 4mm; }
  .dom-scope .discipline-header::after { content: ''; display: block; width: 60%; height: 1px; margin: 3mm auto 0; background: linear-gradient(90deg, transparent, #5a80d0, transparent); }
  .dom-scope .discipline-header h1 { font-family: 'Cormorant Garamond', serif; font-size: 32pt; font-weight: 700; color: #78a0dc; text-transform: uppercase; letter-spacing: 10px; text-shadow: 0 0 40px rgba(90,128,210,0.4), 0 0 80px rgba(90,128,210,0.15); display: flex; align-items: center; justify-content: center; gap: 6mm; }
  .dom-scope .discipline-header p { font-size: 8pt; color: #3a5a9e; font-style: italic; letter-spacing: 2px; margin-top: 1mm; }
  .dom-scope .header-symbol { height: 0.9em; vertical-align: baseline; }
  .dom-scope .card { width: 97mm; min-height: 142mm; max-height: 142mm; overflow: hidden; background: linear-gradient(160deg, #070a1a 0%, #0b102c 50%, #091024 100%); border: 1.5px solid rgba(90,128,210,0.22); border-radius: 8px; padding: 4.5mm 5mm 4mm; display: flex; flex-direction: column; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(90,128,210,0.08); }
  .dom-scope .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 5%, #4a6a9e 30%, #5a80d0 50%, #4a6a9e 70%, transparent 95%); }
  .dom-scope .card-level { font-size: 6.5pt; text-transform: uppercase; letter-spacing: 2.5px; color: #5a80d0; font-weight: 700; margin-bottom: 1mm; display: flex; align-items: center; gap: 2mm; }
  .dom-scope .card-level::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(90,128,210,0.2), transparent); }
  .dom-scope .card-title { font-family: 'Cormorant Garamond', serif; font-size: 13pt; font-weight: 700; color: #8ab0e8; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.5mm; line-height: 1.15; padding-right: 12mm; }
  .dom-scope .card-subtitle { font-size: 6pt; color: #4a5a94; font-style: italic; letter-spacing: 0.5px; margin-bottom: 2mm; padding-bottom: 2mm; border-bottom: 1px solid rgba(90,128,210,0.12); }
  .dom-scope .amalgam-badge { display: inline-block; background: linear-gradient(135deg, #0f1a48, #1a3070); color: #b0c8e8; font-size: 5.5pt; padding: 0.8mm 2.5mm; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 1.5mm; box-shadow: 0 1px 4px rgba(90,128,210,0.2); }
  .dom-scope .card-desc { font-size: 6.5pt; line-height: 1.5; color: #90b0e0; margin-bottom: 1.5mm; }
  .dom-scope .system-title { font-size: 6pt; text-transform: uppercase; letter-spacing: 2px; color: #5a80d0; font-weight: 700; margin-bottom: 0.5mm; display: flex; align-items: center; gap: 1.5mm; }
  .dom-scope .system-title::after { content: ''; flex: 1; height: 1px; background: rgba(90,128,210,0.15); }
  .dom-scope .card-system { font-size: 6.1pt; line-height: 1.45; color: #7088c0; margin-bottom: 2mm; }
  .dom-scope .card-meta { margin-top: auto; border-top: 1px solid rgba(90,128,210,0.18); padding-top: 1.5mm; }
  .dom-scope .meta-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4mm; }
  .dom-scope .meta-label { font-size: 5.5pt; text-transform: uppercase; letter-spacing: 1.5px; color: #5a80d0; font-weight: 700; }
  .dom-scope .meta-value { font-size: 6.3pt; color: #80a0d8; text-align: right; max-width: 68%; font-weight: 500; }
  .dom-scope .cut-line { border: 1.5px dashed rgba(90,128,210,0.12); border-radius: 8px; }
  .dom-scope .memo-card { background: linear-gradient(160deg, #0c1434 0%, #10183c 50%, #0c1434 100%); border-color: rgba(90,128,210,0.35); justify-content: center; align-items: center; text-align: center; padding: 6mm; }
  .dom-scope .memo-title { font-family: 'Cormorant Garamond', serif; font-size: 18pt; color: #78a0dc; text-transform: uppercase; letter-spacing: 5px; font-weight: 700; margin-bottom: 3mm; }
  .dom-scope .memo-footer { margin-top: 4mm; font-size: 5.5pt; color: #1a2a64; letter-spacing: 2px; text-transform: uppercase; }
  .dom-scope .card-image-wrap { width: calc(100% + 10mm); margin: 0 -5mm 1.5mm -5mm; min-height: 8mm; flex-grow: 1; overflow: hidden; position: relative; background: linear-gradient(135deg, #070a1a 0%, #0b102c 50%, #0a0a14 100%); display:flex; align-items: center; justify-content:center; }
  .dom-scope .card-image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 10mm; background: linear-gradient(to top, #070a1a 0%, transparent 100%); pointer-events: none; }
  .dom-scope .card-image-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8mm; background: linear-gradient(to bottom, #070a1a 0%, transparent 100%); pointer-events: none; z-index: 1; }
  .dom-scope .img-placeholder { color: rgba(90,128,210,0.19); font-size: 7pt; text-transform: uppercase; letter-spacing: 2px; }
  .dom-scope .card-crown { position: absolute; top: 3mm; right: 3.5mm; width: 15mm; height: 15mm; opacity: 0.08; pointer-events: none; z-index: 2; }
  .dom-scope .memo-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 75mm; height: auto; opacity: 0.07; pointer-events: none; z-index: 0; }


  }




  /* === PRESENCE === */

  .pre-scope .page { width: 210mm; min-height: 297mm; margin: 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3.5mm; padding: 4mm; page-break-after: always; }
  .pre-scope .discipline-header { width: 100%; text-align: center; padding: 6mm 5mm 4mm; }
  .pre-scope .discipline-header::after { content: ''; display: block; width: 60%; height: 1px; margin: 3mm auto 0; background: linear-gradient(90deg, transparent, #b85a80, transparent); }
.discipline-header h1 { font-family: 'Cormorant Garamond', serif; font-size: 32pt; font-weight: 700; color: #d4789c; text-transform: uppercase; letter-spacing: 10px; text-shadow: 0 0 40px rgba(184,90,128,0.4), 0 0 80px rgba(184,90,128,0.15); display: flex; align-items: center; justify-content: center; gap: 6mm; }
.discipline-header p { font-size: 8pt; color: #8a3a5e; font-style: italic; letter-spacing: 2px; margin-top: 1mm; }
  .pre-scope .header-symbol { height: 0.9em; vertical-align: baseline; }
  .pre-scope .card { width: 97mm; min-height: 142mm; max-height: 142mm; overflow: hidden; background: linear-gradient(160deg, #0d070a 0%, #150b10 50%, #110910 100%); border: 1.5px solid rgba(184,90,128,0.22); border-radius: 8px; padding: 4.5mm 5mm 4mm; display: flex; flex-direction: column; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(184,90,128,0.08); }
  .pre-scope .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 5%, #9a4a6e 30%, #b85a80 50%, #9a4a6e 70%, transparent 95%); }
  .pre-scope .card-level { font-size: 6.5pt; text-transform: uppercase; letter-spacing: 2.5px; color: #b85a80; font-weight: 700; margin-bottom: 1mm; display: flex; align-items: center; gap: 2mm; }
  .pre-scope .card-level::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(184,90,128,0.2), transparent); }
  .pre-scope .card-title { font-family: 'Cormorant Garamond', serif; font-size: 13pt; font-weight: 700; color: #e88aaf; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.5mm; line-height: 1.15; padding-right: 12mm; }
  .pre-scope .card-subtitle { font-size: 6pt; color: #8a4a6a; font-style: italic; letter-spacing: 0.5px; margin-bottom: 2mm; padding-bottom: 2mm; border-bottom: 1px solid rgba(184,90,128,0.12); }
  .pre-scope .amalgam-badge { display: inline-block; background: linear-gradient(135deg, #2a0f20, #5a1a40); color: #d8b0c8; font-size: 5.5pt; padding: 0.8mm 2.5mm; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 1.5mm; box-shadow: 0 1px 4px rgba(184,90,128,0.2); }
  .pre-scope .card-desc { font-size: 6.8pt; line-height: 1.5; color: #c890b0; margin-bottom: 1.5mm; }
  .pre-scope .system-title { font-size: 6pt; text-transform: uppercase; letter-spacing: 2px; color: #b85a80; font-weight: 700; margin-bottom: 0.5mm; display: flex; align-items: center; gap: 1.5mm; }
  .pre-scope .system-title::after { content: ''; flex: 1; height: 1px; background: rgba(184,90,128,0.15); }
  .pre-scope .card-system { font-size: 6.3pt; line-height: 1.45; color: #a870a0; margin-bottom: 2mm; }
  .pre-scope .card-meta { margin-top: auto; border-top: 1px solid rgba(184,90,128,0.18); padding-top: 1.5mm; }
  .pre-scope .meta-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4mm; }
  .pre-scope .meta-label { font-size: 5.5pt; text-transform: uppercase; letter-spacing: 1.5px; color: #b85a80; font-weight: 700; }
  .pre-scope .meta-value { font-size: 6.3pt; color: #b880a8; text-align: right; max-width: 68%; font-weight: 500; }
  .pre-scope .cut-line { border: 1.5px dashed rgba(184,90,128,0.12); border-radius: 8px; }
  .pre-scope .memo-card { background: linear-gradient(160deg, #1a0c14 0%, #221018 50%, #1a0c14 100%); border-color: rgba(184,90,128,0.35); justify-content: center; align-items: center; text-align: center; padding: 6mm; }
  .pre-scope .memo-title { font-family: 'Cormorant Garamond', serif; font-size: 18pt; color: #d4789c; text-transform: uppercase; letter-spacing: 5px; font-weight: 700; margin-bottom: 3mm; }
  .pre-scope .memo-footer { margin-top: 4mm; font-size: 5.5pt; color: #4a1a38; letter-spacing: 2px; text-transform: uppercase; }
  .pre-scope .card-image-wrap { width: calc(100% + 10mm); margin: 0 -5mm 1.5mm -5mm; min-height: 20mm; flex-grow: 1; overflow: hidden; position: relative; background: linear-gradient(135deg, #0d070a 0%, #150b10 50%, #0e0e0e 100%); display:flex; align-items: center; justify-content:center; }
  .pre-scope .card-image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 10mm; background: linear-gradient(to top, #0d070a 0%, transparent 100%); pointer-events: none; }
  .pre-scope .card-image-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8mm; background: linear-gradient(to bottom, #0d070a 0%, transparent 100%); pointer-events: none; z-index: 1; }
  .pre-scope .img-placeholder { color: rgba(184,90,128,0.19); font-size: 7pt; text-transform: uppercase; letter-spacing: 2px; }
  .pre-scope .card-crown { position: absolute; top: 3mm; right: 3.5mm; width: 15mm; height: 15mm; opacity: 0.08; pointer-events: none; z-index: 2; }
  .pre-scope .memo-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 75mm; height: auto; opacity: 0.07; pointer-events: none; z-index: 0; }
  .pre-scope .page { page-break-after: always; }
  .pre-scope .card { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
}


  /* ——— UI ——— */
.selector-panel {
    background: #1a1616;
    padding: 12px 20px;
    border-bottom: 2px solid #3a2020;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .selector-panel h2 {
    font-family: 'Cormorant Garamond', serif;
    color: #ddd;
    font-size: 14pt;
    margin-bottom: 8px;
    letter-spacing: 2px;
  }
  .selector-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
  }
  .card-selector {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #1a1a1a;
    border: 1px solid rgba(120,120,120,0.3);
    border-radius: 6px;
    padding: 4px 8px;
    color: #bbb;
    font-size: 8pt;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
  }
  .card-selector:hover { border-color: #666; background: #222; }
  .card-selector.active { border-color: #aaa; background: #333; color: #eee; }
  .card-selector input[type="number"] {
    width: 30px;
    background: #0a0a1a;
    border: 1px solid rgba(120,120,120,0.3);
    border-radius: 3px;
    color: #ddd;
    text-align: center;
    font-size: 8pt;
    padding: 2px;
  }
  .controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .scale-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bbb;
    font-size: 9pt;
  }
  .scale-control input[type="range"] {
    width: 200px;
    accent-color: #666;
  }
  .scale-value {
    color: #ddd;
    font-weight: 700;
    font-size: 10pt;
    min-width: 40px;
  }
  .grid-info { color: #777; font-size: 8pt; }
  .btn-print {
    background: #666; color: white; border: none;
    border-radius: 6px; padding: 7px 18px;
    font-size: 9pt; font-weight: 600; cursor: pointer;
    letter-spacing: 1px; margin-left: auto;
  }
  .btn-print:hover { background: #555; }
  .btn-clear {
    background: transparent; color: #777;
    border: 1px solid #777; border-radius: 6px;
    padding: 7px 12px; font-size: 8pt; cursor: pointer;
  }

  /* === PRINT PAGES === */
/* Если принтер заест — это не баг, это он преклоняется перед Викиными карточками */
  .print-area { padding: 5mm; }
  .print-page {
    width: 210mm;
    height: 297mm;
    background: #111;
    margin: 0 auto 5mm;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    page-break-after: always;
    border: 1px dashed rgba(120,120,120,0.1);
  }
  /* Each card slot wraps the scaled card */
  .card-slot {
    overflow: hidden;
    flex-shrink: 0;
  }
  /* Force cards inside slots to not have extra margin */
  .card-slot > .card,
  .card-slot > .memo-card,
  .card-slot > div {
    margin: 0 !important;
  }
  .empty-msg {
    display: flex; align-items: center; justify-content: center;
    width: 210mm; height: 297mm;
    color: #3a3a5a; font-size: 12pt;
    border: 1px dashed rgba(120,120,120,0.15);
    margin: 0 auto;
  }

  



/* Discipline selector */
.disc-picker {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.disc-picker label { color: #999; font-size: 9pt; letter-spacing: 1px; text-transform: uppercase; }
.disc-picker select {
  background: #1a1a1a; color: #ddd; border: 1px solid rgba(120,120,120,0.4);
  border-radius: 6px; padding: 5px 10px; font-size: 9pt; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.disc-picker select:focus { outline: none; border-color: #888; }

/* Card rows - hidden by default */
.disc-cards { display: none; }
.disc-cards.visible { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Discipline-specific active colors */
.aus-sel.active { border-color: #3a7898 !important; background: #0f2a38 !important; color: #a8d8ea !important; }
.aus-sel:hover { border-color: #2a6080 !important; background: #0a1e2e !important; }
.pro-sel.active { border-color: #4a8a3a !important; background: #1a2e18 !important; color: #b0d8a0 !important; }
.pro-sel:hover { border-color: #3a7030 !important; background: #142410 !important; }
.dom-sel.active { border-color: #5b8bd4 !important; background: #142040 !important; color: #c0d4f0 !important; }
.dom-sel:hover { border-color: #3a68b0 !important; background: #0e1830 !important; }
.pre-sel.active { border-color: #d4789c !important; background: #2e1420 !important; color: #e88aaf !important; }
.pre-sel:hover { border-color: #b06080 !important; background: #1e0e18 !important; }
.pre-sel.active input { border-color: rgba(184,90,128,0.4) !important; }

  @media print {
    .selector-panel, .loader-panel, .presets-row, .card-preview-popup, .pagemap-panel, .stats-bar, #statsBar, #pagemapPanel, #presetsRow, .mode-tabs { display: none !important; }
    /* Ограничиваем правило страницей инструмента: стиль остаётся в <head>
       после ухода с неё, и печать других страниц не должна меняться. */
    body:has(.cards-tool-page) { background: white !important; padding: 0 !important; margin: 0 !important; }
    .print-area { padding: 0 !important; }
    .print-page {
      border: none !important; margin: 0 !important; background: white !important;
      page-break-after: always;
      /* Размеры берём из inline-стилей (их задаёт JS под текущую ориентацию).
         Жёстко зашитые 210x297 ломали альбомную печать — карты обрезались. */
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
      transform: none !important;
    }
    .card, .card-slot, .card-slot > div, .card-slot > div > div,
    [class$="-scope"], [class$="-scope"] * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
      break-inside: avoid;
    }
  }





  
  
  
  
  
  
  .scale-input {
    width: 48px; background: #1a1a1a; border: 1px solid #444; border-radius: 4px;
    color: #eee; font-size: 9pt; text-align: center; padding: 2px 4px; font-weight: 600;
  }
  .scale-input:focus { border-color: #888; outline: none; }
  .presets-row {
    display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; padding: 0 4px;
  }
  .preset-btn {
    background: #1a1a1a; border: 1px solid #333; border-radius: 4px;
    color: #888; font-size: 7.5pt; padding: 3px 7px; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
  }
  .preset-btn:hover { border-color: #888; color: #ddd; background: #252525; }
  .preset-btn.active { border-color: #d4789c; color: #e88aaf; background: #2e1420; }

  .stats-bar{display:flex;align-items:center;gap:12px;margin-left:auto;color:#999;font-size:8.5pt;white-space:nowrap}
  .stats-bar .stat{color:#ccc;font-weight:700} .stats-bar .stat-pages{color:#e88aaf}
  .card-preview-popup{display:none;position:fixed;z-index:9999;background:transparent;border:none;border-radius:8px;padding:0;pointer-events:none;overflow:hidden}
  .card-preview-popup .card{transform-origin:top left;box-shadow:0 8px 32px rgba(0,0,0,0.8);border-radius:8px}
  .disc-header{display:flex;align-items:center;margin-bottom:4px;padding:2px 0;width:100%;cursor:pointer;user-select:none}
  .disc-header-label{font-size:8pt;font-weight:700;letter-spacing:1px}
  .disc-header-chevron{margin-left:6px;font-size:7pt;opacity:0.5;transition:transform .2s}
  .disc-cards.collapsed .disc-header-chevron{transform:rotate(-90deg)}
  .disc-cards.collapsed .card-selector{display:none}
  .disc-actions{display:inline-flex;gap:4px;margin-left:8px}
  .disc-action-btn{background:#1a1a1a;border:1px solid #333;border-radius:4px;color:#777;font-size:7pt;padding:2px 7px;cursor:pointer;transition:all .15s;white-space:nowrap}
  .disc-action-btn:hover{border-color:#888;color:#ddd;background:#252525}
  .disc-action-btn.toggled{border-color:#888;background:#333;color:#eee}
  .card-selector .lvl-badge{display:inline-block;font-size:6.5pt;font-weight:700;padding:1px 4px;border-radius:3px;margin-right:3px;background:rgba(255,255,255,0.08);color:#999;min-width:12px;text-align:center;letter-spacing:.5px;vertical-align:middle}
  .card-selector.active .lvl-badge{background:rgba(255,255,255,0.15);color:#ddd}
  
  .loaded-tag:hover{filter:brightness(1.3)}
  .loaded-tag .tag-remove{position:absolute;right:3px;top:50%;transform:translateY(-50%);font-size:11px;opacity:0.4;cursor:pointer;padding:0 2px;line-height:1}
  .loaded-tag .tag-remove:hover{opacity:1;color:#ff6666}
  .card-selector{transition:transform .15s,opacity .15s}
  .card-selector.dragging{opacity:0.4;transform:scale(0.95)}
  .card-selector.drag-over{border-top:2px solid #e88aaf !important;margin-top:-2px}


  /* === PAGE MAP (collapsible) === */
  .pagemap-panel{background:#0d0d0d;border:1px solid #222;border-radius:8px;margin-top:8px;display:none;overflow:hidden}
  .pagemap-panel.has-items{display:block}
  .pagemap-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;user-select:none;transition:background .15s}
  .pagemap-bar:hover{background:#161616}
  .pagemap-chevron{font-size:8pt;color:#555;transition:transform .2s}
  .pagemap-panel.expanded .pagemap-chevron{transform:rotate(90deg)}
  .pagemap-title{font-size:8pt;font-weight:700;color:#888;letter-spacing:1px;text-transform:uppercase}
  .pagemap-info{font-size:7pt;color:#555}
  .pagemap-reset{font-size:7pt;color:#666;cursor:pointer;border:1px solid #333;background:transparent;border-radius:3px;padding:1px 6px;margin-left:auto}
  .pagemap-reset:hover{color:#ccc;border-color:#666}
  .pagemap-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .pagemap-panel.expanded .pagemap-body{max-height:3000px;overflow-y:auto}
  .pagemap-scroll{display:flex;flex-wrap:wrap;gap:12px;padding:10px 10px 12px;justify-content:center}
  .qpage{flex-shrink:0;background:#111;border:1px solid #2a2a2a;border-radius:6px;display:grid;gap:3px;padding:5px;position:relative}
  .qpage-num{position:absolute;top:-9px;left:5px;font-size:7pt;color:#555;pointer-events:none}
  .qcard{border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab;user-select:none;transition:transform .15s,box-shadow .15s,opacity .15s;position:relative}
  .qcard:hover{transform:scale(1.05);z-index:2;box-shadow:0 0 10px rgba(255,255,255,0.12)}
  .qcard .qc-name{font-weight:600;line-height:1.2;text-align:center;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;pointer-events:none}
  .qcard.qc-empty{border:1px dashed #1a1a1a !important;background:transparent !important;cursor:default}
  .qcard.qc-empty:hover{transform:none;box-shadow:none}
  .qcard.qc-ghost{opacity:0.25;transform:scale(0.92)}
  .qcard.qc-drop-target{box-shadow:0 0 0 2px #e88aaf !important;transform:scale(1.08)}
  .qcard-floating{position:fixed;pointer-events:none;z-index:9999;border-radius:3px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,0.7);opacity:0.9}
  .qcard-floating .qc-name{font-weight:600;line-height:1.2;text-align:center;padding:2px 3px}


/* === LOADER PANEL === */
.loader-panel {
  background: #131010; border-bottom: none;
  padding: 0 20px;
  display: flex; flex-direction: row; align-items: center; gap: 0;
  position: sticky; top: 0; z-index: 200;
}

/* ========== MODE TABS ========== */
.mode-tabs {
  display: flex; gap: 0; background: transparent;
  border: none; padding: 0; flex: 1;
}
.mode-tab {
  font-family: 'Cormorant Garamond', serif; font-size: 13pt; font-weight: 600;
  color: #666; background: transparent; border: none;
  padding: 0 24px; height: 100%; cursor: pointer; letter-spacing: 1px; transition: all 0.2s;
  display: flex; align-items: center;
}
.mode-tab:hover { color: #aaa; }
.mode-tab.active { color: #8C0020; border-bottom: 2px solid #8C0020; }
@media print { .mode-tabs { display: none !important; } }

/* ========== BROWSE MODE ========== */
.mode-print { background: #0d0b0b; min-height: calc(100vh - 50px); }
.mode-browse { display: none; background: #0d0b0b; min-height: calc(100vh - 50px); }
.browse-layout {
  display: flex; min-height: calc(100vh - 120px);
}
.browse-sidebar {
  width: 230px; min-width: 230px; background: #131010; border-right: 1px solid #221a1a;
  padding: 12px 0; overflow-y: auto; position: sticky; top: 50px;
  height: calc(100vh - 50px);
}
.browse-disc-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 16px; border: none; background: transparent;
  color: #888; font-family: 'Inter', sans-serif; font-size: 9pt; cursor: pointer;
  transition: all 0.15s; text-align: left; border-left: 3px solid transparent;
}
.browse-disc-btn:hover { background: #1a1616; color: #ccc; }
.browse-disc-btn.active {
  background: #140008; color: var(--disc-color, #8C0020);
  border-left-color: var(--disc-color, #8C0020);
}
.bdb-name { flex: 1; }
.bdb-count {
  font-size: 7.5pt; color: #555; background: #1a1a1a; padding: 1px 6px;
  border-radius: 8px; min-width: 20px; text-align: center;
}
.browse-disc-btn.active .bdb-count { color: var(--disc-color, #8C0020); background: #0a0005; }

.browse-main { flex: 1; padding: 0; display: flex; flex-direction: column; min-width: 0; }

.browse-controls {
  background: #1a1616; padding: 12px 20px; border-bottom: 1px solid #221a1a;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  position: sticky; top: 48px; z-index: 99;
}
.browse-search-wrap {
  flex: 1; min-width: 200px; position: relative;
}
.browse-search-wrap::before {
  content: '\2756'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #333; font-size: 11pt; pointer-events: none; transition: color 0.3s;
}
.browse-search-wrap:focus-within::before { color: #8C0020; }
#browseSearch {
  width: 100%; padding: 8px 14px 8px 34px; background: #1a1616;
  border: 1px solid #2a2020; border-radius: 6px; color: #ddd;
  font-family: 'Inter', sans-serif; font-size: 10pt; outline: none;
  transition: border-color 0.3s;
}
#browseSearch:focus { border-color: #8C0020; }
#browseSearch::placeholder { color: #444; }

.level-filter { display: flex; gap: 4px; }
.lvl-btn {
  background: #1a1a1a; border: 1px solid #333; border-radius: 4px;
  color: #666; padding: 5px 10px; font-size: 8.5pt; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: all 0.15s; white-space: nowrap;
}
.lvl-btn:hover { border-color: #888; color: #aaa; }
.lvl-btn.active { border-color: #8C0020; color: #ee8888; background: #140008; }

.browse-cards {
  padding: 20px; display: flex; flex-wrap: wrap; gap: 12px;
  align-content: flex-start; justify-content: center; flex: 1;
}
.browse-card-wrap {
  transition: transform 0.2s, box-shadow 0.2s;
}
.browse-card-wrap:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
}
.browse-card-wrap .card {
  width: 97mm !important; min-height: 140mm !important; max-height: 142mm !important;
  height: 142mm !important; overflow: hidden !important;
}
.browse-empty {
  width: 100%; text-align: center; padding: 60px 20px;
  color: #3a3a3a; font-size: 12pt; font-style: italic;
}
.browse-disc-separator {
  width: 100%; padding: 10px 20px 6px; margin: 8px 0 4px;
  font-family: 'Cormorant Garamond', serif; font-size: 15pt;
  letter-spacing: 3px; text-transform: uppercase;
  border-bottom: 1px solid #222; display: flex; align-items: center; gap: 10px;
}
.browse-disc-separator::after {
  content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, currentColor, transparent); opacity: 0.2;
}
.browse-stats {
  color: #444; font-size: 8pt; text-align: center; padding: 12px; letter-spacing: 1px;
}
@media print { .mode-browse { display: none !important; } }
@media (max-width: 768px) {
  .browse-layout { flex-direction: column; }
  .browse-sidebar {
    width: 100%; min-width: 100%; position: relative; height: auto; min-height: 44px;
    display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 12px;
    border-right: none; border-bottom: 1px solid #222;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .browse-sidebar::-webkit-scrollbar { display: none; }
  .browse-disc-btn {
    width: auto !important; min-width: max-content; flex-shrink: 0;
    border-left: none; border-radius: 20px; padding: 5px 12px;
    border: 1px solid #333; flex: 0 0 auto !important;
  }
  .browse-disc-btn.active { border-left: none; border-color: var(--disc-color, #8C0020); }
  .browse-sidebar .bdb-name { flex: none; }
  .browse-sidebar .bdb-count { display: none; }
  .browse-controls { top: 0; }
  .browse-cards { padding: 12px; gap: 8px; }
}

/* ========== UI REDESIGN ========== */

/* === HEADER BAR === */
.loader-panel {
  background: linear-gradient(180deg, #0e0b0b 0%, #141010 100%) !important;
  border-bottom: 1px solid #2a2a2a !important;
  padding: 0 28px !important;
  gap: 24px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-height: 110px !important;
  overflow: visible !important;
}
.loader-panel h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 10pt !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #444 !important;
  font-weight: 400 !important;
  margin-right: 8px !important;
}



/* === TABS === */
.mode-tabs {
  background: transparent !important;
  border: none !important;
  padding: 0 24px !important;
  gap: 0 !important;
  align-items: stretch !important;
}
.mode-tab.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8C002066, transparent);
}
.mode-tab {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 12pt !important;
  font-weight: 400 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #555 !important;
  padding: 12px 28px !important;
  border: none !important;
  outline: none !important;
  transition: all 0.25s !important;
  position: relative !important;
}
.mode-tab:hover {
  color: #999 !important;
  background: #111 !important;
}
.mode-tab.active {
  color: #8C0020 !important;
  border-bottom: 2px solid #8C0020 !important;
  background: transparent !important;
}


/* === SELECTOR PANEL === */
.selector-panel {
  background: #100c0c !important;
  border-bottom: 1px solid #1e1e1e !important;
  padding: 14px 24px !important;
}
.selector-panel h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 11pt !important;
  font-weight: 400 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: #3a3a3a !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #1e1e1e !important;
}

/* === PRINT BUTTON === */
.btn-print {
  background: linear-gradient(135deg, #6a0018, #8C0020) !important;
  border: none !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 11pt !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  padding: 7px 20px !important;
  transition: all 0.2s !important;
  text-transform: uppercase !important;
}
.btn-print:hover {
  background: linear-gradient(135deg, #700018, #b0001a) !important;
  box-shadow: 0 0 16px #8C002044 !important;
}

/* === CLEAR / ORIENT BUTTONS === */
.btn-clear {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 10pt !important;
  letter-spacing: 1px !important;
  color: #555 !important;
  border: 1px solid #222 !important;
  border-radius: 4px !important;
  background: transparent !important;
  padding: 5px 12px !important;
  transition: all 0.2s !important;
}
.btn-clear:hover {
  color: #aaa !important;
  border-color: #444 !important;
  background: #1a1a1a !important;
}

/* === LOADED TAGS (discipline tags) === */

.tag-remove {
  opacity: 0.4 !important;
  margin-left: 6px !important;
  cursor: pointer !important;
}
.tag-remove:hover { opacity: 1 !important; }

/* === DISC HEADER === */
.disc-header-label {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 10pt !important;
  letter-spacing: 2px !important;
}

/* === PRESET BUTTONS === */
.preset-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 7pt !important;
  letter-spacing: 0 !important;
  border: 1px solid #1e1e1e !important;
  color: #444 !important;
  border-radius: 3px !important;
}
.preset-btn:hover { color: #aaa !important; border-color: #444 !important; }
.preset-btn.active {
  color: #c0304a !important;
  border-color: #5a0018 !important;
  background: #100008 !important;
}

/* === DISC PICKER LABEL === */
.disc-picker label {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 10pt !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
.disc-picker select {
  font-family: 'Inter', sans-serif !important;
  font-size: 9pt !important;
  border-radius: 4px !important;
  background: #111 !important;
  border: 1px solid #2a2a2a !important;
}
/* ========== MOBILE RESPONSIVE ========== */

/* SVG logo default size */
.header-logo-svg {
  height: 110px;
  width: auto;
}

@media (max-width: 768px) {
  /* Header: logo centered on top, tabs below */
  .loader-panel {
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 0 0 !important;
    gap: 0 !important;
  }

  .header-logo-svg {
    height: 70px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Tabs: scroll horizontally, full width */
  .mode-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    width: 100% !important;
    scrollbar-width: none !important;
    border-top: 1px solid #222 !important;
  }
  .mode-tabs::-webkit-scrollbar { display: none !important; }

  .mode-tab {
    padding: 0 16px !important;
    height: 44px !important;
    font-size: 9pt !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    flex: 1 !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Print mode */
  .disc-picker-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .print-controls {
    flex-wrap: wrap !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .presets-row {
    padding: 4px 8px !important;
  }

  /* Browse sidebar full width on mobile */
  .browse-layout {
    flex-direction: column !important;
  }
  .browse-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: 44px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 8px !important;
    border-right: none !important;
    border-bottom: 1px solid #222 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .browse-sidebar::-webkit-scrollbar { display: none !important; }
  .browse-disc-btn {
    min-width: max-content !important;
    flex-shrink: 0 !important;
    flex: 0 0 auto !important;
    border-left: none !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    border: 1px solid #333 !important;
    width: auto !important;
  }
  .browse-disc-btn.active {
    border-left: none !important;
    border-color: var(--disc-color, #8C0020) !important;
  }
  .browse-sidebar .bdb-name { flex: none !important; }
  .browse-sidebar .bdb-count { display: none !important; }
  .browse-cards {
    padding: 10px !important;
    gap: 8px !important;
  }

  /* Dice calculator: vertical layout */
  .mode-dice .app-layout {
    flex-direction: column !important;
  }
  .mode-dice .app-right {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .mode-dice .app-left {
    width: 100% !important;
  }
  .app-layout-wrapper {
    padding: 0 8px !important;
  }

  /* Dice panel: fix fixed widths */
  .mode-dice .dice-panel,
  .mode-dice .result-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .header-logo-svg {
    height: 60px !important;
  }

  .mode-tab {
    padding: 0 10px !important;
    font-size: 8pt !important;
    letter-spacing: 0px !important;
  }

  .print-controls {
    gap: 4px !important;
    padding: 6px 8px !important;
  }

  /* Card grid: single column */
  .browse-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ========== MOBILE: PRINT PANEL FIX ========== */
@media (max-width: 768px) {
  /* Selector panel: reduce padding */
  .selector-panel {
    padding: 10px 12px !important;
    position: relative !important;
    top: auto !important;
  }

  /* Disc picker row: stack label + select */
  .disc-picker {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Dropdowns full width */
  .disc-picker select,
  #discSelect {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Selector row: wrap everything */
  .selector-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* Scale control full width */
  .scale-control {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .scale-control input[type="range"] {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Grid info full width */
  .grid-info {
    width: 100% !important;
    text-align: center !important;
  }

  /* Stats bar inline */
  .stats-bar {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }

  /* Print button full width */
  .btn-print {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
    padding: 10px !important;
  }

  /* Selector panel not sticky on mobile (takes too much space) */
  .selector-panel {
    position: static !important;
  }

  /* Title smaller */
  .selector-panel h2 {
    font-size: 10pt !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 480px) {
  .selector-panel {
    padding: 8px !important;
  }

  .btn-clear {
    flex: 1 !important;
  }
}

/* ========== MOBILE: PRINT AREA + BROWSE SCALE FIX ========== */
@media (max-width: 768px) {
  .print-area {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 5px !important;
    display: block !important;
  }

  /* Print page: JS scales to fit viewport, so layout space needs to shrink too */
  .print-page {
    transform-origin: top left !important;
  }
  .page-scale-wrap {
    display: block;
  }

  /* Browse справочник: карточки фиксированного размера, горизонтальный скролл */
  .browse-main {
    overflow-x: hidden !important;
  }

  .browse-cards {
    padding: 10px !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .browse-card-wrap {
    width: 97mm !important;
    max-width: calc(100vw - 20px) !important;
    flex-shrink: 0 !important;
  }

  .browse-card-wrap .card {
    width: 97mm !important;
    max-width: calc(100vw - 20px) !important;
    min-height: 140mm !important;
    max-height: 142mm !important;
    height: 142mm !important;
    overflow: hidden !important;
  }

  /* Card preview popup: keep on screen */
  .card-preview-popup {
    max-width: 90vw !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    left: 5vw !important;
    right: auto !important;
  }
}

@media (max-width: 420px) {
  .browse-card-wrap,
  .browse-card-wrap .card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* === MOBILE DISC FILTER === */
.mobile-disc-filter {
  display: none;
}
@media (max-width: 768px) {
  .mobile-disc-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 0 2px;
    width: 100%;
  }
  .mobile-disc-filter::-webkit-scrollbar { display: none; }
  .mobile-disc-filter .browse-disc-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    border-radius: 20px !important;
    border: 1px solid #333 !important;
    border-left: 1px solid #333 !important;
    padding: 4px 12px !important;
    font-size: 8.5pt !important;
    white-space: nowrap !important;
  }
  .mobile-disc-filter .browse-disc-btn.active {
    border-color: var(--disc-color, #8C0020) !important;
    background: #140008 !important;
    color: var(--disc-color, #8C0020) !important;
  }
  /* Скрываем sidebar на мобиле — используем mobile-disc-filter */
  .browse-sidebar {
    display: none !important;
  }
}