/* Classical and structured material workspace styles. */
.cl-main .cl-material-passport-inline { margin-top: 16px; }
.cl-main .cl-material-passport-inline :is(.cl-kv, .cl-passport-grid) { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.cl-main .cl-material-passport-inline :is(.cl-kv-row, .cl-passport-item) { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; gap: 2px; }
.cl-main .cl-material-passport-inline .cl-passport-item span { font-size: 0.8rem; opacity: 0.8; }
.cl-main .cl-material-passport-inline .cl-passport-item strong { font-size: 0.95rem; }
.cl-main :is(.cl-classical-material, .cl-material-reading, .cl-material-tabs, .cl-material-tab-panel) .cl-material-unified { background: #fff !important; border: 1px solid #d8dfe8; border-radius: 16px; padding: clamp(16px,3vw,28px); margin: 16px 0; }
.cl-main :is(.cl-classical-material, .cl-material-reading, .cl-material-tabs, .cl-material-tab-panel) .cl-material-unified > h2 { margin: 0 0 20px; font-family: var(--font-sans); }
.cl-main :is(.cl-classical-material, .cl-material-reading, .cl-material-tabs, .cl-material-tab-panel) .cl-material-subsection + .cl-material-subsection { margin-top: 24px; }
.cl-main :is(.cl-classical-material, .cl-material-reading, .cl-material-tabs, .cl-material-tab-panel) .cl-material-subsection h3 { margin: 0 0 8px; font: 700 1rem/1.5 var(--font-sans); }
.cl-main :is(.cl-classical-material, .cl-material-reading, .cl-material-tabs, .cl-material-tab-panel) .cl-material-unified :is(.cl-card,.cl-callout,.cl-material-data-block,.cl-example-field) { border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none; padding: 0; margin: 14px 0; min-width: 0; }
.cl-main :is(.cl-classical-material, .cl-material-reading, .cl-material-tabs, .cl-material-tab-panel) .cl-material-unified :is(.cl-card,.cl-callout,.cl-example-field)::before,
.cl-main :is(.cl-classical-material, .cl-material-reading, .cl-material-tabs, .cl-material-tab-panel) .cl-material-unified :is(.cl-card,.cl-callout,.cl-example-field)::after { content: none; }
.cl-main .cl-classical-material .cl-example-field h4 { margin: 12px 0 5px; font: 700 .9rem/1.5 var(--font-sans); }
.cl-main .cl-classical-material .cl-example-field > p { margin: 0 0 12px; }
.cl-main .cl-classical-material .cl-example-field { display: grid; grid-template-columns: minmax(120px,180px) minmax(0,1fr); gap: 8px 20px; align-items: baseline; }
.cl-main .cl-classical-material .cl-example-field > h4 { margin: 0; }
.cl-main .cl-classical-material .cl-example-field > :not(h4) { min-width: 0; }
.cl-main .cl-classical-material .cl-example-answer > p { font: 700 1.1rem/1.6 var(--font-mono); }
@media (max-width:600px) { .cl-main .cl-classical-material .cl-example-field { grid-template-columns: minmax(0,1fr); gap: 4px; } }
.cl-main .cl-classical-material .cl-example-steps { display: block; margin: 12px 0; padding-left: 24px; }
.cl-main .cl-classical-material .cl-example-steps > li { padding: 8px 0; border-bottom: 1px solid #e0e6ee; }
.cl-main .cl-classical-material .cl-example-steps > li:last-child { border-bottom: 0; }
.cl-main .cl-classical-material .cl-example-steps p { margin: 0; }
.cl-main .cl-classical-material .cl-material-unified--examples { overflow-wrap: anywhere; }
.cl-main .cl-classical-form .cl-digraph-flow { display: block; border: 1px solid #d8dfe8; border-radius: 10px; padding: 0 14px; background: #fff; }
.cl-main .cl-classical-form .cl-digraph-flow > .cl-digraph-card { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px 12px; min-width: 0; margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid #e0e6ee; border-radius: 0; background: transparent; box-shadow: none; overflow-wrap: anywhere; }
.cl-main .cl-classical-form .cl-digraph-flow > .cl-digraph-card:last-child { border-bottom: 0; }
.cl-main .cl-classical-form .cl-digraph-flow > .cl-digraph-card > .cl-digraph-index { position: static; grid-column: 1; grid-row: 1 / span 2; }
.cl-main .cl-classical-form .cl-digraph-flow > .cl-digraph-card > :is(.cl-digraph-pair,.cl-digraph-rule) { grid-column: 2; min-width: 0; }
.cl-main .cl-classical-heading { padding: 8px 2px 20px; }
.cl-main .cl-classical-heading h2 { margin: 0 0 8px; font-family: var(--font-sans); font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.35; }
.cl-main .cl-classical-heading p { margin: 0; max-width: 76ch; font: 400 .95rem/1.6 var(--font-sans); }
.cl-main .cl-classical-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 20px; }
.cl-main .cl-classical-workspace > * { min-width: 0; }
.cl-main .cl-classical-workspace .cl-cipher-app-card { margin: 0; padding: 24px; background: #fff !important; border: 1px solid #d8dfe8; border-radius: 16px; box-shadow: 0 4px 16px #17212b08; }
.cl-main .cl-classical-workspace .cl-classical-form { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; display: block; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-classical-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; margin: 22px 0; }
.cl-main .cl-classical-fields > section { min-width: 0; }
.cl-main .cl-classical-fields h3 { margin: 0 0 14px; font: 700 1rem/1.4 var(--font-sans); text-transform: none; letter-spacing: normal; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-param-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin: 0; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-param-field { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; position: relative; margin: 0; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none; min-width: 0; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-param-field::before,
.cl-main .cl-classical-workspace .cl-classical-form .cl-param-field::after,
.cl-main .cl-classical-fields h3::before,
.cl-main .cl-classical-fields h3::after { content: none; display: none; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-param-label { padding-right: 36px; font: 600 .9rem/1.5 var(--font-sans); }
.cl-main .cl-classical-workspace .cl-classical-form .cl-param-field > .cl-guide-btn { position: absolute; right: 0; top: -8px; margin: 0; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-input { width: 100%; min-width: 0; margin: 0; background: #fff !important; border: 1px solid #b7c5d5 !important; border-radius: 8px; padding: 11px 12px; font: 400 1rem/1.6 var(--font-sans); box-shadow: none; }
.cl-main .cl-classical-workspace .cl-classical-form textarea[name="input"] { min-height: 160px; resize: vertical; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-clean-text-option { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; margin: 14px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-clean-text-option input { width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-clean-text-option strong { font: 500 .86rem/1.5 var(--font-sans); }
.cl-main .cl-classical-workspace .cl-classical-form .cl-clean-text-option small { font: 400 .8rem/1.5 var(--font-sans); }
.cl-main .cl-classical-workspace .cl-classical-form .cl-mode-pills { margin: 18px 0 0; gap: 8px; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-mode-pills label { min-width: 0; min-height: 44px; padding: 10px 16px; font: 600 .9rem/1.3 var(--font-sans); border-radius: 8px; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-mode-pills label:has(input:checked) { background: #f4eee6; border-color: #987049; }
.cl-main .cl-classical-workspace .cl-classical-form input:is([type="radio"],[type="checkbox"]) { min-height: 20px !important; height: 20px; width: 20px; min-width: 20px; flex: 0 0 20px; }
.cl-main .cl-classical-workspace .cl-classical-text > .cl-param-field > .cl-param-label { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.cl-main .cl-classical-workspace .cl-classical-text > .cl-param-field > .cl-guide-btn { top: -42px; }
.cl-main .cl-classical-workspace .cl-classical-form > button[type="submit"] { min-height: 46px; padding: 12px 30px; border-radius: 8px; font: 700 1rem/1.3 var(--font-sans); background: #754820 !important; color: #fff !important; border: 1px solid #754820 !important; box-shadow: none; }
.cl-main .cl-classical-workspace .cl-classical-form > .cl-result-zone:empty { display: none; }
.cl-main .cl-classical-workspace .cl-classical-form > .cl-result-zone:not(:empty) { margin-top: 24px; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-panel { margin: 0; border: 1px solid #d8dfe8; border-radius: 10px; box-shadow: none; overflow: hidden; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-toolbar { padding: 12px; gap: 10px; background: #f6f8fb; flex-wrap: wrap; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-heading { font: 600 .85rem/1.4 var(--font-sans); }
.cl-main .cl-classical-workspace .cl-classical-form :is(.cl-cipher-lang-btn,.cl-cipher-alpha-toggle,.cl-alpha-token,.cl-alpha-load-sample) { min-height: 44px; border-radius: 6px; font-family: var(--font-sans); text-shadow: none; box-shadow: none; }
.cl-main .cl-classical-workspace .cl-classical-form :is(.cl-cipher-lang-btn,.cl-alpha-token,.cl-alpha-load-sample) { background: #fff !important; color: #24324b !important; border: 1px solid #c7d2df !important; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-btn.is-active { background: #254c77 !important; color: #fff !important; border-color: #254c77 !important; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-alpha-toggle { background: transparent !important; color: #254c77 !important; border: 1px solid #c7d2df !important; }
.cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-alphabet-card { padding: 16px; overflow-x: auto; }
.cl-main .cl-classical-reference { padding: 20px; border: 1px solid #d8dfe8; border-radius: 16px; background: #fff; }
.cl-main .cl-classical-reference h3 { margin: 0 0 12px; font: 700 1rem/1.4 var(--font-sans); }
.cl-main .cl-classical-reference .cl-details { margin: 0; padding: 0; border: 0; border-radius: 0; border-top: 1px solid #e0e6ee; background: transparent; box-shadow: none; }
.cl-main .cl-classical-reference summary { padding: 14px 0; min-height: 48px; cursor: pointer; font: 600 .9rem/1.5 var(--font-sans); }
.cl-main .cl-classical-reference-body { padding: 0 0 16px; line-height: 1.7; font: 400 .9rem/1.7 var(--font-sans); overflow-wrap: anywhere; }
.cl-main .cl-classical-reference-body p:first-child { margin-top: 0; }
.cl-main .cl-classical-reference .cl-param-guide { font: inherit; line-height: inherit; padding: 0; }
.cl-main .cl-classical-reference .cl-param-guide ul { padding-left: 20px; }
.cl-main .cl-classical-reference .cl-param-formula { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cl-main .cl-classical-related { display: block; margin-top: 12px; padding: 12px 0; font: 600 .9rem/1.5 var(--font-sans); }
@media (max-width: 1100px) {
  .cl-main .cl-classical-workspace { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .cl-main .cl-classical-workspace .cl-cipher-app-card { padding: 16px; }
  .cl-main .cl-classical-workspace .cl-classical-form .cl-classical-fields { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-toolbar { align-items: stretch; }
  .cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-buttons { flex-wrap: wrap; }
  .cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-btn { font-size: .78rem; gap: 4px; }
  .cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-flag { display: none; }
  .cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-badge { padding: 0 3px; }
  .cl-main .cl-classical-workspace .cl-classical-form .cl-cipher-lang-badge { display: none; }
  .cl-main .cl-classical-workspace .cl-classical-form > button[type="submit"] { width: 100%; }
}


/* ==========================================================================
   ELEGANT RESTRAINED TYPOGRAPHY & SECTION STYLING (Feistel Stand & Platform-wide)
   ========================================================================== */

/* Universal modern typography unification across themes & components */
.cl-main,
.cl-main p,
.cl-main li,
.cl-main td,
.cl-main th,
.cl-main label,
.cl-main input,
.cl-main select,
.cl-main textarea,
.cl-main button,
.cl-main .cl-text,
.cl-main .cl-card,
.cl-main .cl-material-unified {
  font-family: var(--font-sans) !important;
}

:is(.cl-main, body, #cryptolab-root) :is(h1, h2, h3, h4, h5, h6, .cl-mini-title, .cl-matrix-vector-title, .cl-section-title, .cl-card-title) {
  font-family: var(--font-sans) !important;
  letter-spacing: -0.015em;
  text-transform: none;
}

/* Material & unified section headers (h2) */
:is(.cl-classical-material, .cl-material-reading, .cl-material-tabs, .cl-material-tab-panel, .cl-main) .cl-material-unified > h2,
.cl-material-tabs .cl-material-tab-panel > h2,
.cl-card > h2 {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.25rem, 2vw, 1.55rem) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #edf2f7 !important;
}

/* Section titles / Subsections (h3) */
.cl-material-subsection h3,
.cl-material-tab-panel > h3,
.cl-classical-fields h3,
.cl-classical-reference h3 {
  font-family: var(--font-sans) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Tasteful accent pip for section titles */
.cl-material-subsection h3::before,
.cl-material-tab-panel > h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.1rem;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Mini-titles (.cl-mini-title) - Overriding old tiny Times New Roman */
.cl-mini-title,
.cl-matrix-card .cl-mini-title,
.cl-matrix-vector-title {
  font-family: var(--font-sans) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 14px 0 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.cl-mini-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Feistel Linear Analysis Workbench & Methodology (Стенд шифра Фейстеля)
   -------------------------------------------------------------------------- */
.cl-differential-workbench,
[data-sdes-workbench] {
  font-family: var(--font-sans);
}

.cl-differential-workbench .cl-material-tab-panel h3,
[data-sdes-workbench] .cl-material-tab-panel h3 {
  font-family: var(--font-sans) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

/* Methodology numbered sections: 1. Устройство шифра, 2. Дифференциальный анализ, 3. Линейный анализ, 4. Проверка и вывод */
.cl-differential-workbench .cl-material-tab-panel h4,
[data-sdes-workbench] h4 {
  font-family: var(--font-sans) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 22px 0 12px !important;
  padding: 8px 14px !important;
  background: linear-gradient(90deg, #f0f7ff 0%, #f8fafc 100%) !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  letter-spacing: -0.01em !important;
}

/* Beautiful monospace code styling across workbench, methodology, and materials */
:is(.cl-differential-workbench, [data-sdes-workbench], .cl-material-tab-panel, .cl-material-unified, .cl-classical-workspace, .cl-learning-schema-details) code {
  font-family: var(--font-mono) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  margin: 0 2px !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  line-height: 1.4 !important;
}

/* Methodology numbered lists: clear spacing and readable rhythm */
:is(.cl-differential-workbench, [data-sdes-workbench], .cl-material-tab-panel) ol {
  padding-left: 1.5rem !important;
  margin: 12px 0 18px !important;
  display: grid !important;
  gap: 10px !important;
}

:is(.cl-differential-workbench, [data-sdes-workbench], .cl-material-tab-panel) ol li {
  font-family: var(--font-sans) !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  color: #334155 !important;
}

/* Lead intro callouts in methodology & tabs */
:is(.cl-differential-workbench, [data-sdes-workbench], .cl-material-tab-panel) .cl-result-note {
  background: #eff6ff !important;
  border-left: 4px solid #3b82f6 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin: 12px 0 20px !important;
  color: #1e40af !important;
  font-size: 0.96rem !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.04) !important;
}

/* --------------------------------------------------------------------------
   Instructions & Guidelines (В указаниях / Методических указаниях)
   -------------------------------------------------------------------------- */
.cl-learning-schema-details,
.cl-linear-method-guide,
.cl-guidance,
.cl-hint {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 18px 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.cl-learning-schema-details summary,
.cl-linear-method-guide summary {
  font-family: var(--font-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  outline: none !important;
}

.cl-learning-schema-details summary:hover,
.cl-linear-method-guide summary:hover {
  color: #2563eb !important;
}

.cl-learning-schema-details p,
.cl-linear-method-guide p {
  font-family: var(--font-sans) !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  color: #334155 !important;
  margin: 10px 0 !important;
}

.cl-learning-schema-details ol li,
.cl-linear-method-guide ol li {
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  color: #334155 !important;
}

/* --------------------------------------------------------------------------
   Solutions, Answers, Traces (В решениях / Вычислениях / Ответах)
   -------------------------------------------------------------------------- */
.cl-step-card,
.cl-solution-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3px solid #2563eb !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cl-step-card strong,
.cl-solution-card strong {
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Worked example answers & verified solutions */
.cl-example-answer,
.cl-solution-verified,
.cl-success-card {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-left: 4px solid #16a34a !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin: 14px 0 !important;
}

.cl-example-answer > p,
.cl-example-answer strong,
.cl-example-answer h4 {
  font-family: var(--font-sans) !important;
  color: #166534 !important;
  font-weight: 700;
}

.cl-example-answer code {
  font-family: var(--font-mono) !important;
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #14532d !important;
}

/* Mathematical formula rows & data containers */
.cl-formula-row {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3px solid #3b82f6 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.cl-formula-label {
  font-family: var(--font-sans) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}