/* 
   arText Analytics - Premium Design System
   Color Palette: Emerald & Slate modern tech aesthetic
*/

:root {
  /* Color System */
  --bg-app: #f8fafc;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --border-color: #e2e8f0;
  
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  
  --primary: #0ea5e9;
  --primary-hover: #0284c7;
  --primary-light: rgba(14, 165, 233, 0.1);
  
  --accent-emerald: #10b981;
  --accent-emerald-dark: #0f766e;
  
  /* Category colors */
  --color-discourse: #8b5cf6;
  --color-discourse-light: rgba(139, 92, 246, 0.12);
  --color-lexical: #06b6d4;
  --color-lexical-light: rgba(6, 182, 212, 0.12);
  --color-morphosyntax: #f59e0b;
  --color-morphosyntax-light: rgba(245, 158, 11, 0.12);
  --color-acronyms: #10b981;
  --color-acronyms-light: rgba(16, 185, 129, 0.12);
  
  /* Statuses */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  
  /* Typography */
  --font-heading: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  
  /* Shadow & Transitions */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 15px rgba(14, 165, 233, 0.25);
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Public API reference */
.openapi-reference-page .primary-button,
.openapi-reference-page .secondary-button {
  display: inline-flex;
  min-height: 44px;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.openapi-reference-page .primary-button { color: white; background: #1687e8; box-shadow: 0 8px 20px rgba(22, 135, 232, .24); }
.openapi-reference-page .primary-button:hover { color: white; background: #0875d0; transform: translateY(-1px); }
.openapi-reference-page .secondary-button { color: #24466d; border-color: #cbd9e9; background: white; }
.openapi-reference-page .secondary-button:hover { color: #153a66; border-color: #9db8d6; background: #f4f8fc; transform: translateY(-1px); }
.openapi-reference-page .primary-button svg,
.openapi-reference-page .secondary-button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.api-docs-grid, .api-rules-section, .api-reference-cta { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.api-docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 56px 0 24px; }
.api-docs-card { min-width: 0; padding: 26px; border: 1px solid #e3e8f0; border-radius: 18px; background: white; box-shadow: 0 8px 28px rgba(19, 43, 76, .055); }
.api-docs-card--wide { grid-column: 1 / -1; }
.api-docs-card header { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 22px; }
.api-docs-card h2, .api-rules-section h2, .api-reference-cta h2 { margin: 0 0 7px; font: 700 1.45rem/1.2 Outfit, sans-serif; }
.api-docs-card p, .section-heading p, .api-reference-cta p { margin: 0; color: #66738a; line-height: 1.55; }
.api-card-icon { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #1674d1; background: #eaf4ff; }
.api-card-icon--green { color: #16815c; background: #e7f7f0; }
.api-card-icon--orange { color: #a65d00; background: #fff1dc; }
.api-card-icon svg { width: 20px; }
.api-code-tabs { overflow: hidden; border-radius: 13px; background: #111a2d; color: #e5edf9; }
.api-code-tablist { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid #29344a; }
.api-code-tablist button { padding: 9px 14px; border: 0; border-radius: 8px 8px 0 0; color: #94a6c2; background: transparent; cursor: pointer; }
.api-code-tablist button.is-active { color: white; background: #25334c; }
.api-code-panel { position: relative; display: none; overflow: auto; }
.api-code-panel.is-active { display: block; }
.api-code-panel pre { margin: 0; padding: 25px; max-height: 620px; overflow: auto; font: .84rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.api-copy { position: absolute; top: 13px; right: 13px; display: flex; gap: 6px; align-items: center; padding: 7px 9px; border: 1px solid #3a4862; border-radius: 7px; color: #b9c7da; background: #1d2940; cursor: pointer; }
.api-copy svg { width: 14px; }
.api-sdk-install { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 16px 0; padding: 9px 9px 9px 15px; border: 1px solid #33415c; border-radius: 9px; background: #16203a; }
.api-sdk-install code { color: #9fe3b9; font: .84rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.api-copy--inline, .api-sdk-snippet .api-copy { position: static; }
.api-sdk-snippet { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.api-sdk-snippet .api-copy { position: absolute; top: 13px; right: 13px; }
.api-sdk-snippet pre { width: 100%; }
.api-code-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px !important; font-size: .78rem; }
.api-code-note svg { width: 15px; flex: 0 0 auto; margin-top: 3px; color: #2778c7; }
.api-inline-code { overflow: auto; padding: 15px; border-radius: 10px; color: #24548c; background: #f0f5fb; font-size: .85rem; }
.api-statuses { display: flex; gap: 8px; flex-wrap: wrap; }
.api-statuses span { padding: 7px 9px; border-radius: 7px; color: #5b687a; background: #f3f5f8; font-size: .75rem; }
.api-statuses b { color: #243752; }
.api-lifecycle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.api-lifecycle-state { padding: 16px; border: 1px solid #e1e8f1; border-radius: 12px; background: #f8fafc; }
.api-lifecycle-state code { display: inline-flex; margin-bottom: 9px; padding: 3px 8px; border-radius: 999px; color: #385777; background: #e8eef6; font-size: .75rem; font-weight: 700; }
.api-lifecycle-state p { font-size: .8rem; }
.api-lifecycle-state--running code { color: #795100; background: #fff0c7; }
.api-lifecycle-state--completed code { color: #076443; background: #dff7eb; }
.api-lifecycle-state--failed code { color: #9a3030; background: #fde8e8; }
.api-callout { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0 !important; padding: 12px 14px; border-radius: 10px; color: #3d5877 !important; background: #eef5fc; font-size: .8rem; }
.api-callout svg { width: 16px; flex: 0 0 auto; margin-top: 2px; }
.api-callout--warning { color: #80510b !important; background: #fff6df; }
.api-result-contract { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.api-result-contract > div { padding: 18px; border: 1px solid #e1e8f1; border-radius: 12px; background: #f8fafc; }
.api-result-contract code { display: inline-block; margin-bottom: 9px; color: #176dbd; font-size: .85rem; font-weight: 700; }
.api-result-contract p { font-size: .84rem; }
.api-code-static { position: relative; overflow: auto; border-radius: 13px; color: #e5edf9; background: #111a2d; }
.api-code-static pre { margin: 0; padding: 25px; max-height: 520px; overflow: auto; font: .82rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.api-code-static--compact pre { padding-top: 55px; font-size: .75rem; }
.api-developer-docs pre code.hljs { display: block; overflow: visible; padding: 0; color: #e5edf9; background: transparent; }
.api-developer-docs .hljs-comment, .api-developer-docs .hljs-quote { color: #8292aa; font-style: italic; }
.api-developer-docs .hljs-keyword, .api-developer-docs .hljs-selector-tag { color: #ff7ab2; }
.api-developer-docs .hljs-string, .api-developer-docs .hljs-attr { color: #a8db87; }
.api-developer-docs .hljs-number, .api-developer-docs .hljs-literal { color: #79c7ff; }
.api-developer-docs .hljs-title, .api-developer-docs .hljs-function .hljs-title { color: #d9b8ff; }
.api-developer-docs .hljs-variable, .api-developer-docs .hljs-template-variable { color: #ffd580; }
.api-rules-section { padding: 48px 0 60px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading .api-docs-eyebrow, .api-reference-cta .api-docs-eyebrow { margin-bottom: 12px; color: #1674d1; }
.section-heading p { max-width: 720px; }
.api-rule-count { display: grid; width: 55px; height: 55px; place-items: center; flex: 0 0 auto; border-radius: 15px; color: #1674d1; background: #e8f3ff; font: 700 1.25rem Outfit, sans-serif; }
.api-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.api-rule-card { position: relative; display: flex; min-width: 0; min-height: 145px; padding: 22px; flex-direction: column; gap: 14px; border: 1px solid #e6ebf2; border-radius: 18px; background: linear-gradient(180deg, #ffffff, #fbfcfe); box-shadow: 0 1px 2px rgba(16, 42, 76, .04); transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s ease, border-color .22s ease; }
.api-rule-card:hover { transform: translateY(-3px); border-color: #cfe0f5; box-shadow: 0 16px 36px rgba(19, 43, 76, .1); }
.api-rule-card > div:first-child { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 9px; }
.api-rule-card h3 { margin: 1px 0; font: 650 1.02rem/1.35 Outfit, sans-serif; color: #16233b; }
.api-rule-card > div:first-child > p { margin: 0; color: #5c6b82; font-size: .88rem; line-height: 1.55; }
.api-rule-card > div:first-child > code { align-self: flex-start; padding: 3px 9px; border-radius: 7px; color: #5a6b85; background: #eef2f8; font: 600 .7rem ui-monospace, monospace; overflow-wrap: anywhere; }
.api-rule-category { display: inline-flex; align-items: center; gap: 6px; color: #2778c7; font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.api-rule-category::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.api-rule-catalogs { display: flex; gap: 6px; flex-wrap: wrap; }
.api-rule-catalogs span { padding: 5px 9px; border-radius: 999px; color: #4c6484; background: #eef3fa; font-size: .68rem; font-weight: 600; }
/* Collapsible "what it returns" disclosure inside each metric card */
.api-rule-card details { margin-top: auto; border-top: 1px solid #eef1f6; }
.api-rule-card summary { display: flex; align-items: center; gap: 8px; padding: 12px 2px 2px; color: #2778c7; font: 600 .82rem/1.2 Inter, sans-serif; cursor: pointer; list-style: none; user-select: none; }
.api-rule-card summary::-webkit-details-marker { display: none; }
.api-rule-card summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; }
.api-rule-card details[open] summary::after { transform: rotate(-135deg); }
.api-rule-card summary:hover { color: #155fa8; }
.api-rule-card details[open] > *:not(summary) { animation: apiReveal .24s ease both; }
.api-rule-card details h4 { margin: 15px 0 5px; font: 700 .68rem/1.2 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #8593a8; }
.api-rule-card details p { margin: 0; color: #566378; font-size: .84rem; line-height: 1.55; }
.api-rule-card details pre { margin: 15px 0 0; padding: 14px; max-height: 260px; overflow: auto; border-radius: 11px; color: #dce8fa; background: #121c2f; font: .74rem/1.55 ui-monospace, monospace; }
.api-rule-card details pre code { color: inherit; font-size: inherit; padding: 0; background: none; }
.api-rule-card details > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: #2778c7; font-weight: 600; font-size: .82rem; text-decoration: none; }
.api-rule-card details > a:hover { text-decoration: underline; }
@keyframes apiReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.api-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: #738097; background: white; border-radius: 14px; }
.api-reference-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 65px; padding: 34px; border: 1px solid #dce4ef; border-radius: 19px; background: white; }
.api-reference-cta p { max-width: 700px; }
@media (max-width: 900px) {
  .api-rule-grid { grid-template-columns: 1fr 1fr; }
  .api-lifecycle-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .api-docs-grid, .api-rule-grid, .api-lifecycle-grid, .api-result-contract { grid-template-columns: 1fr; }
  .api-docs-grid, .api-rules-section, .api-reference-cta { width: calc(100% - 28px); }
  .api-docs-grid { padding-top: 28px; }
  .api-docs-card { padding: 19px; }
  .api-code-panel pre { padding: 58px 18px 20px; font-size: .76rem; }
  .api-reference-cta, .section-heading { align-items: flex-start; flex-direction: column; }
}

/* Self-hosted OpenAPI reference (no CDN or build step required). */
.shell:has(.openapi-reference-page) { max-width: none; padding: 0; }
.openapi-reference-page { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 64px); background: #f7f9fc; }
.openapi-sidebar { position: sticky; top: 64px; align-self: start; height: calc(100vh - 64px); padding: 27px 20px; overflow: auto; border-right: 1px solid #dfe6ef; background: white; }
.openapi-sidebar > strong, .openapi-sidebar > small { display: block; margin: 18px 8px 0; }
.openapi-sidebar > small { margin-top: 4px; color: #758297; }
.openapi-back { display: flex; align-items: center; gap: 7px; color: #2475c5; font-weight: 650; text-decoration: none; }
.openapi-back svg { width: 16px; }
.openapi-sidebar nav { display: grid; gap: 4px; margin-top: 24px; }
.openapi-sidebar nav a { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; padding: 9px 8px; border-radius: 8px; color: #536077; font-size: .75rem; line-height: 1.25; text-decoration: none; }
.openapi-sidebar nav a:hover { color: #172033; background: #f0f5fb; }
.method { display: inline-grid; min-width: 43px; padding: 4px 6px; place-items: center; border-radius: 5px; color: white; font: 750 .62rem/1 ui-monospace, monospace; text-transform: uppercase; }
.method-get { background: #16835f; }.method-post { background: #2476d2; }.method-schema { background: #68758b; }
.openapi-content { width: min(980px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0 80px; }
.openapi-heading { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; margin-bottom: 38px; }
.openapi-heading h1 { margin: 10px 0; font: 700 2.45rem/1.1 Outfit, sans-serif; }.openapi-heading p { color: #66758c; }
.openapi-guide { margin-bottom: 38px; scroll-margin-top: 85px; }
.openapi-section-heading { margin-bottom: 18px; }
.openapi-section-heading h2 { margin: 10px 0 6px; font: 700 1.85rem/1.2 Outfit, sans-serif; }
.openapi-section-heading p { margin: 0; color: #66758c; line-height: 1.6; }
.openapi-guide .api-docs-grid { width: 100%; padding: 0; }
.openapi-operation, .openapi-schemas { margin-bottom: 24px; padding: 30px; border: 1px solid #dde5ef; border-radius: 16px; background: white; box-shadow: 0 7px 25px rgba(27, 47, 75, .04); scroll-margin-top: 85px; }
.openapi-operation > header { display: flex; align-items: center; gap: 11px; }.openapi-operation > header code { color: #34445c; font-size: .92rem; }
.openapi-operation h2 { margin: 20px 0 8px; font: 700 1.55rem/1.2 Outfit, sans-serif; }.openapi-operation > p { color: #66758c; line-height: 1.6; }
.openapi-operation h3 { margin: 27px 0 10px; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
.openapi-auth { display: flex; gap: 9px; align-items: center; margin-top: 18px; padding: 11px 13px; border-radius: 8px; color: #3b5575; background: #eff5fb; }.openapi-auth svg { width: 16px; }
.openapi-operation pre, .openapi-schemas pre { max-height: 420px; margin: 9px 0 0; padding: 16px; overflow: auto; border-radius: 9px; color: #dce8fa; background: #121c2f; font: .76rem/1.55 ui-monospace, monospace; }
.openapi-table, .openapi-responses { display: grid; border: 1px solid #e1e7ef; border-radius: 10px; overflow: hidden; }
.openapi-table > div, .openapi-responses > div { display: grid; grid-template-columns: 125px 1fr; gap: 12px; padding: 13px; }.openapi-table > div + div, .openapi-responses > div + div { border-top: 1px solid #e7ebf1; }
.openapi-table span, .openapi-responses span { color: #68768b; font-size: .83rem; }.openapi-table p { grid-column: 2; margin: -5px 0 0; color: #7b8799; font-size: .8rem; }
.openapi-responses pre { grid-column: 1 / -1; }.openapi-responses strong { color: #16765a; }
.openapi-media-type { grid-column: 1 / -1; width: fit-content; margin-top: 9px; padding: 3px 7px; border-radius: 5px; color: #536b87; background: #edf3f9; font-size: .7rem; }
.openapi-operation h4 { grid-column: 1 / -1; margin: 12px 0 0; color: #536077; font-size: .78rem; }
.openapi-response-headers { display: grid; grid-column: 1 / -1; grid-template-columns: max-content 1fr; gap: 7px 10px; padding: 10px; border-radius: 7px; background: #f6f8fb; }
.openapi-response-headers code { color: #365d87; font-size: .72rem; }
.openapi-schemas > h2 { font: 700 1.55rem Outfit, sans-serif; }
.openapi-schemas > p { color: #66758c; line-height: 1.6; margin: 0 0 6px; }
.openapi-schemas details { margin-top: 10px; border: 1px solid #e7ecf3; border-radius: 12px; background: #fbfcfe; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.openapi-schemas details[open] { border-color: #cfe0f5; box-shadow: 0 8px 24px rgba(19, 43, 76, .06); }
.openapi-schemas summary { display: grid; grid-template-columns: minmax(150px, 200px) 1fr 20px; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; transition: background .16s ease; }
.openapi-schemas summary::-webkit-details-marker { display: none; }
.openapi-schemas summary:hover { background: #f2f7fc; }
.openapi-schemas details[open] > summary { border-bottom: 1px solid #edf1f6; }
.openapi-schemas summary code { padding: 3px 9px; border-radius: 7px; color: #2c5486; background: #e9f1fb; font-weight: 600; font-size: .78rem; overflow-wrap: anywhere; }
.openapi-schemas summary span { color: #788598; font-size: .8rem; }
.openapi-schemas summary svg { width: 16px; color: #94a3b8; transition: transform .22s ease; }
.openapi-schemas details[open] > summary svg { transform: rotate(180deg); }
.openapi-schemas details > pre { margin: 16px; }
.openapi-metric-documentation { padding: 6px 18px 20px; animation: apiReveal .24s ease both; }
.openapi-metric-documentation h3 { margin: 18px 0 7px; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: #8593a8; }
.openapi-metric-documentation p { margin: 0; color: #566378; line-height: 1.6; }
.openapi-metric-documentation pre { margin-top: 10px; }
.api-docs-sidebar nav { gap: 2px; }
.api-docs-sidebar nav .api-nav-group { margin: 18px 8px 6px; color: #9aa6b7; font-size: .66rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.api-docs-sidebar nav a { display: flex; grid-template-columns: none; gap: 9px; min-height: 37px; }
.api-docs-sidebar nav a > svg { width: 15px; flex: 0 0 auto; color: #8290a4; }
.api-docs-sidebar nav a.is-active { color: #155fa8; background: #eaf3fc; font-weight: 700; }
.api-docs-sidebar nav a.is-active > svg { color: #1d75c7; }
.api-doc-page { width: min(920px, calc(100% - 48px)); }
.api-doc-heading { margin-bottom: 28px; }
.api-doc-kicker { display: block; margin-bottom: 11px; color: #2475c5; font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.api-doc-heading h1 { max-width: 780px; margin: 0 0 12px; color: #15233a; font: 700 clamp(2rem, 4vw, 3rem)/1.08 Outfit, sans-serif; letter-spacing: -.025em; }
.api-doc-heading > code { display: inline-block; margin: -2px 0 14px; padding: 4px 9px; border-radius: 6px; color: #42617f; background: #edf3f8; }
.api-doc-heading > p { max-width: 760px; margin: 0; color: #617087; font-size: 1.02rem; line-height: 1.7; }
.api-doc-scope-note { margin-top: 10px; padding-left: 14px; border-left: 3px solid #cfdcec; color: #7c8aa0; font-size: .86rem; line-height: 1.6; }
.report-not-found { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 90px auto 60px; max-width: 560px; padding: 0 22px; text-align: center; }
.report-not-found svg { width: 40px; height: 40px; color: #9db4d0; }
.report-not-found h1 { margin: 0; color: #1d2b42; font: 700 1.5rem/1.3 Outfit, sans-serif; }
.report-not-found p { margin: 0; color: #65738a; line-height: 1.65; }
.report-not-found code { padding: 4px 10px; border-radius: 7px; background: #eef2f8; color: #46586f; font-size: .8rem; }
.report-not-found-action { margin-top: 10px; padding: 10px 18px; border-radius: 9px; background: #2682d6; color: white; font-weight: 600; text-decoration: none; }
.report-not-found-action:hover { background: #1f6fb8; }
.site-footer { margin-top: 44px; border-top: 1px solid #e1e8f1; background: #f8fafc; }
.site-footer-inner { display: grid; grid-template-columns: 1.2fr .8fr 1.4fr; gap: 34px; margin: 0 auto; padding: 34px 22px 26px; max-width: 1240px; }
.site-footer-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.site-footer-logo img { height: 26px; width: auto; }
.site-footer-logo strong { color: #1d2b42; font: 700 1.05rem/1 Outfit, sans-serif; }
.site-footer-brand p, .site-footer-funding p { margin: 0; color: #7c8aa0; font-size: .8rem; line-height: 1.65; }
.site-footer-links { display: flex; flex-direction: column; gap: 7px; }
.site-footer-links strong, .site-footer-funding strong { display: block; margin-bottom: 4px; color: #46586f; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.site-footer-funding strong { margin-bottom: 10px; }
.site-footer-links a { color: #5b6c84; font-size: .82rem; text-decoration: none; }
.site-footer-links a:hover { color: #2682d6; text-decoration: underline; }
.site-footer-bottom { border-top: 1px solid #e6ecf4; }
.site-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto; padding: 14px 22px 16px; max-width: 1240px; flex-wrap: wrap; }
.site-footer-institution { display: flex; align-items: center; gap: 12px; color: #7c8aa0; font-size: .78rem; }
.site-footer-institution img { height: 30px; width: auto; border-radius: 4px; }
.site-footer-meta { display: flex; gap: 18px; }
.site-footer-meta a { color: #5b6c84; font-size: .78rem; text-decoration: none; }
.site-footer-meta a:hover { color: #2682d6; text-decoration: underline; }
@media (max-width: 860px) { .site-footer-inner { grid-template-columns: 1fr; gap: 24px; } }
.api-seq { margin: 0; }
.api-seq-actors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; }
.api-seq-actors span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border: 1px solid #cfdcec; border-radius: 10px; background: #f3f7fc; color: #1d2b42; font-weight: 700; font-size: .85rem; text-align: center; }
.api-seq-actors svg { width: 16px; height: 16px; color: #2682d6; flex: 0 0 auto; }
.api-seq-lanes { position: relative; padding: 20px 0 6px; background-image: linear-gradient(#c9d6e6 55%, transparent 0), linear-gradient(#c9d6e6 55%, transparent 0), linear-gradient(#c9d6e6 55%, transparent 0); background-size: 1px 11px, 1px 11px, 1px 11px; background-repeat: repeat-y, repeat-y, repeat-y; background-position: 16.66% 0, 50% 0, 83.33% 0; }
.api-seq-msg { position: relative; margin: 0 0 22px; }
.api-seq-msg--app-api { margin-left: 16.66%; width: 33.34%; }
.api-seq-msg--api-engine { margin-left: 50%; width: 33.34%; }
.api-seq-label { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 26px 7px; text-align: center; }
.api-seq-label code { padding: 3px 9px; border-radius: 999px; background: #e8eef6; color: #234e78; font-size: .74rem; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.api-seq-label small { color: #65738a; font-size: .76rem; line-height: 1.45; }
.api-seq-badge { position: absolute; top: calc(100% - 11px); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #2682d6; color: white; font-size: .72rem; font-weight: 800; z-index: 1; }
.api-seq-msg--right .api-seq-badge { left: -11px; }
.api-seq-msg--left .api-seq-badge { right: -11px; }
.api-seq-line { display: block; height: 2px; background: #9db4d0; position: relative; }
.api-seq-line::after { content: ""; position: absolute; top: -4px; border: 5px solid transparent; }
.api-seq-msg--right .api-seq-line::after { right: -1px; border-left-color: #9db4d0; border-right-width: 0; }
.api-seq-msg--left .api-seq-line::after { left: -1px; border-right-color: #9db4d0; border-left-width: 0; }
@media (max-width: 719px) {
  .api-seq-actors { grid-template-columns: 1fr; gap: 6px; }
  .api-seq-lanes { background: none; padding-top: 12px; }
  .api-seq-msg--app-api, .api-seq-msg--api-engine { margin-left: 0; width: auto; }
  .api-seq-msg { margin-bottom: 10px; padding: 12px 14px 12px 42px; border: 1px solid #e1e8f1; border-radius: 11px; background: #f8fafc; }
  .api-seq-label { align-items: flex-start; text-align: left; padding: 0; }
  .api-seq-badge { top: 12px; left: 12px !important; right: auto !important; }
  .api-seq-line { display: none; }
}
.api-doc-key-concept { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 26px; padding: 18px 20px; border: 1px solid #bfdbf5; border-radius: 12px; color: #234e78; background: #eef7ff; }
.api-doc-key-concept svg { width: 20px; flex: 0 0 auto; margin-top: 2px; }
.api-doc-key-concept p { margin: 0; line-height: 1.6; }
.api-doc-key-concept--important { border-left: 4px solid #2682d6; }
.api-doc-section { margin-bottom: 24px; padding: 26px; border: 1px solid #dde5ef; border-radius: 14px; background: white; box-shadow: 0 5px 20px rgba(27, 47, 75, .035); }
.api-doc-section > h2 { margin: 0 0 9px; color: #1d2b42; font: 700 1.35rem/1.25 Outfit, sans-serif; }
.api-doc-section > p { margin: 0 0 18px; color: #65738a; line-height: 1.65; }
.api-doc-flow { display: grid; gap: 10px; }
.api-doc-flow a { display: grid; grid-template-columns: 38px 1fr 20px; gap: 13px; align-items: center; padding: 16px; border: 1px solid #e1e8f1; border-radius: 11px; color: inherit; text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.api-doc-flow a:hover { border-color: #9fc5e9; transform: translateX(2px); }
.api-doc-flow a > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: #247bc9; font-weight: 750; }
.api-doc-flow h3, .api-doc-choice-grid h3 { margin: 0 0 3px; font-size: .95rem; }
.api-doc-flow p, .api-doc-choice-grid p { margin: 0; color: #6b788c; font-size: .82rem; line-height: 1.5; }
.api-doc-flow a > svg { width: 17px; color: #8290a4; }
.api-doc-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.api-doc-choice-grid a { padding: 18px; border: 1px solid #e1e8f1; border-radius: 11px; color: inherit; text-decoration: none; }
.api-doc-choice-grid a:hover { border-color: #9fc5e9; background: #f8fbfe; }
.api-doc-choice-grid svg { width: 22px; margin-bottom: 12px; color: #2475c5; }
.api-doc-auth-summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.api-doc-auth-summary h2 { margin: 0 0 5px; font: 700 1.15rem Outfit, sans-serif; }
.api-doc-auth-summary p { margin: 0; color: #68768b; }
.api-doc-auth-summary > code { flex: 0 0 auto; padding: 11px 13px; border-radius: 8px; color: #2f5c88; background: #edf4fb; }
.api-doc-section .api-lifecycle-grid { margin-top: 17px; }
.api-doc-json { max-height: 440px; margin: 12px 0 0; padding: 18px; overflow: auto; border-radius: 10px; color: #dce8fa; background: #121c2f; font: .78rem/1.58 ui-monospace, monospace; }
.api-doc-json--large { max-height: 580px; }
.api-doc-next { display: grid; grid-template-columns: 1fr 20px; gap: 3px 16px; width: min(360px, 100%); margin: 34px 0 0 auto; padding: 17px 19px; border: 1px solid #cbd9e9; border-radius: 11px; color: #265d92; text-decoration: none; background: white; }
.api-doc-next span { color: #8290a4; font-size: .7rem; text-transform: uppercase; }.api-doc-next strong { grid-column: 1; }.api-doc-next svg { grid-column: 2; grid-row: 1 / 3; width: 18px; align-self: center; }
.api-result-contract h3 { margin: 5px 0 7px; font-size: 1rem; }
.api-result-contract a { display: inline-block; margin-top: 11px; color: #1f70bb; font-size: .8rem; font-weight: 650; text-decoration: none; }
.api-field-map { display: grid; margin-top: 17px; border: 1px solid #e1e7ef; border-radius: 10px; overflow: hidden; }
.api-field-map > div { display: grid; grid-template-columns: 180px 1fr; gap: 15px; padding: 13px 15px; }.api-field-map > div + div { border-top: 1px solid #e8edf3; }
.api-field-map span { color: #68768b; font-size: .84rem; }
.api-doc-standards { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px !important; }
.api-doc-standards a { padding: 6px 9px; border-radius: 7px; color: #2b669f; background: #edf4fb; font-size: .76rem; font-weight: 600; text-decoration: none; }
.api-doc-standards a:hover { color: #164f87; background: #e2eef9; }
.api-doc-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.api-doc-two-columns h2 { margin: 0 0 7px; font: 700 1.1rem Outfit, sans-serif; }.api-doc-two-columns p { margin: 0 0 13px; color: #68768b; font-size: .85rem; }.api-doc-two-columns code { overflow-wrap: anywhere; color: #346088; font-size: .75rem; }
.api-metric-usage-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.api-metric-usage-steps li { padding: 15px; border-radius: 10px; background: #f6f9fc; }.api-metric-usage-steps span { display: grid; width: 28px; height: 28px; margin-bottom: 9px; place-items: center; border-radius: 50%; color: white; background: #287bc5; font-size: .75rem; font-weight: 700; }.api-metric-usage-steps p { margin: 0; color: #59687d; font-size: .82rem; line-height: 1.5; }
.api-metric-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.api-metric-toolbar label { display: flex; min-width: 280px; flex: 1; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #dbe3ed; border-radius: 9px; }.api-metric-toolbar label svg { width: 16px; color: #8290a4; }.api-metric-toolbar input { width: 100%; border: 0; outline: 0; color: #24344d; background: transparent; }
.api-metric-toolbar > div { display: flex; gap: 5px; }.api-metric-toolbar button { padding: 8px 10px; border: 1px solid #dbe3ed; border-radius: 8px; color: #59687d; background: white; cursor: pointer; }.api-metric-toolbar button.is-active { color: #155fa8; border-color: #aacceb; background: #edf6ff; }.api-metric-toolbar button span { color: #8794a6; font-size: .7rem; }
.api-metric-category-filter { display: flex; align-items: center; gap: 7px; margin-bottom: 25px; padding: 12px; flex-wrap: wrap; border: 1px solid #e0e7ef; border-radius: 11px; background: #f8fafc; }
.api-metric-category-filter > span { margin: 0 5px 0 2px; color: #748196; font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.api-metric-category-filter button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid transparent; border-radius: 999px; color: #526077; background: white; box-shadow: 0 1px 2px rgba(24, 45, 75, .06); cursor: pointer; }
.api-metric-category-filter button:hover { border-color: #cbd8e7; }.api-metric-category-filter button.is-active { color: #155fa8; border-color: #a9cbea; background: #eaf4fe; }
.api-metric-category-filter button b { color: #8794a6; font-size: .68rem; }
.api-category-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #7c8ca4; }
.api-category-dot--document { background: #3976c5; }.api-category-dot--readability { background: #db5a7b; }.api-category-dot--lexical { background: var(--color-lexical); }.api-category-dot--morphosyntax { background: var(--color-morphosyntax); }.api-category-dot--discourse { background: var(--color-discourse); }.api-category-dot--acronyms { background: var(--color-acronyms); }
.api-metric-groups { display: grid; gap: 28px; }
.api-metric-group > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 10px; padding: 0 3px; }
.api-metric-group > header > div { display: flex; align-items: center; gap: 9px; }.api-metric-group > header h2 { margin: 0; color: #24344d; font: 700 1.05rem Outfit, sans-serif; }
.api-metric-group > header > span { color: #8491a4; font-size: .72rem; }.api-metric-group > header > span b { color: #526077; }
.api-problem-page { width: min(760px, calc(100% - 36px)); margin: 65px auto; padding: 35px; border: 1px solid #dfe6ef; border-radius: 16px; background: white; }
.api-problem-page > span { display: block; margin-top: 28px; color: #7a8799; font-weight: 700; }.api-problem-page h1 { margin: 8px 0 20px; font: 700 2rem Outfit, sans-serif; }.api-problem-page p { color: #59687d; line-height: 1.65; }.api-problem-page code { color: #155fa8; }
.api-metric-list { display: grid; border: 1px solid #e0e7ef; border-radius: 11px; overflow: hidden; }
.api-metric-row { display: grid; grid-template-columns: 120px 1fr 70px 18px; gap: 14px; align-items: center; padding: 17px; color: inherit; text-decoration: none; background: white; }.api-metric-row + .api-metric-row { border-top: 1px solid #e8edf3; }.api-metric-row:hover { background: #f8fbfe; }.api-metric-row > svg { width: 17px; color: #93a0b1; }
.api-metric-row h2 { margin: 0 0 4px; font: 700 1rem Outfit, sans-serif; }.api-metric-row p { margin: 7px 0 0; color: #68768b; font-size: .8rem; line-height: 1.45; }.api-metric-row div > code { color: #63738a; font-size: .7rem; }
.api-metric-kind { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; color: #285f91; background: #e9f3fc; font-size: .65rem; font-weight: 750; text-transform: uppercase; }.api-metric-kind--suggestion { color: #6f4a12; background: #fff1d7; }
.api-metric-status { color: #157352; font-size: .7rem; font-weight: 700; }.api-metric-status.is-inactive { color: #9b3a3a; }
.api-doc-breadcrumb { display: flex; align-items: center; gap: 7px; margin-bottom: 22px; color: #788699; font-size: .78rem; }.api-doc-breadcrumb a { color: #2475c5; text-decoration: none; }.api-doc-breadcrumb svg { width: 14px; }
.api-metric-detail-badges { display: flex; gap: 7px; margin-bottom: 13px; }
.api-metric-use-card > div { display: flex; gap: 10px; align-items: center; margin-top: 15px; padding: 13px; border-radius: 9px; background: #f1f6fb; }.api-metric-use-card > div span:first-child { color: #788699; font-size: .72rem; text-transform: uppercase; }.api-metric-use-card > div span:last-child { color: #52647a; font-size: .78rem; }
.api-metric-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0; overflow: hidden; background: #e1e7ef; }.api-metric-detail-grid article { padding: 23px; background: white; }.api-metric-detail-grid h2 { margin: 0 0 9px; font: 700 1.05rem Outfit, sans-serif; }.api-metric-detail-grid p { margin: 0; color: #65738a; line-height: 1.62; font-size: .87rem; }
.api-metric-detail-grid dl { display: grid; gap: 8px; }.api-metric-detail-grid dl div { display: grid; grid-template-columns: 145px 1fr; gap: 8px; }.api-metric-detail-grid dt { color: #788699; font-size: .75rem; }.api-metric-detail-grid dd { display: flex; gap: 5px; flex-wrap: wrap; margin: 0; }
.api-metric-json-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.api-metric-json-link h2 { font-size: 1rem; }.api-metric-json-link p { margin: 0; }
.api-endpoint-index { display: grid; margin-bottom: 24px; border: 1px solid #dfe6ef; border-radius: 12px; overflow: hidden; background: white; }.api-endpoint-index a { display: grid; grid-template-columns: 50px 1.1fr 1fr; gap: 12px; align-items: center; padding: 13px 15px; color: inherit; text-decoration: none; }.api-endpoint-index a + a { border-top: 1px solid #e8edf3; }.api-endpoint-index a:hover { background: #f7fafc; }.api-endpoint-index a > span:last-child { color: #6c798d; font-size: .78rem; }.api-endpoint-index code { font-size: .76rem; }
.api-schema-list { padding: 24px; }
@media (max-width: 800px) { .openapi-reference-page { grid-template-columns: 1fr; }.openapi-sidebar { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid #dfe6ef; }.openapi-sidebar nav { display: none; }.openapi-content { width: calc(100% - 28px); padding-top: 28px; }.openapi-heading { flex-direction: column; }.openapi-operation, .openapi-schemas { padding: 20px; }.openapi-table > div, .openapi-responses > div { grid-template-columns: 80px 1fr; }.openapi-schemas summary { grid-template-columns: minmax(120px, .7fr) 1fr 18px; }.api-doc-choice-grid, .api-metric-usage-steps { grid-template-columns: 1fr; }.api-doc-auth-summary, .api-metric-toolbar, .api-metric-json-link { align-items: flex-start; flex-direction: column; }.api-doc-two-columns, .api-metric-detail-grid { grid-template-columns: 1fr; }.api-metric-row { grid-template-columns: 1fr 70px 18px; }.api-metric-row > .api-metric-kind { grid-column: 1 / -1; }.api-metric-toolbar label { width: 100%; min-width: 0; }.api-metric-toolbar > div, .api-metric-category-filter { flex-wrap: wrap; }.api-metric-category-filter > span { width: 100%; }.api-field-map > div { grid-template-columns: 1fr; gap: 5px; } }

/* Reset & Core Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

/* Shared Analytics / Editor workspace controls */
.workspace-mode-switch {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: white;
  box-shadow: var(--shadow-sm);
}
.workspace-mode-switch > span { padding: 0 9px; color: var(--text-muted); font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.workspace-mode-button { display: inline-flex; min-height: 34px; padding: 7px 11px; align-items: center; gap: 7px; border: 0; border-radius: 8px; color: var(--text-muted); background: transparent; font: 600 13px var(--font-heading); cursor: pointer; }
.workspace-mode-button:hover { color: var(--text-main); background: #f1f5f9; }
.workspace-mode-button.is-active { color: var(--primary-hover); background: var(--primary-light); }
.workspace-mode-button svg { width: 15px; height: 15px; }
.workspace-draft-clear { display: grid; width: 32px; height: 32px; margin-left: 3px; place-items: center; border: 0; border-radius: 7px; color: #94a3b8; background: transparent; cursor: pointer; }.workspace-draft-clear:hover { color: var(--danger); background: rgba(239, 68, 68, .08); }.workspace-draft-clear svg { width: 14px; }
.workspace-type-dialog { width: min(720px, calc(100% - 28px)); max-height: min(720px, calc(100vh - 40px)); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: transparent; box-shadow: 0 25px 80px rgba(15, 23, 42, .28); }
.workspace-type-dialog::backdrop { background: rgba(15, 23, 42, .52); backdrop-filter: blur(4px); }
.workspace-type-dialog-card { max-height: inherit; padding: 24px; overflow: auto; background: white; }
.workspace-type-dialog-card > header { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.workspace-type-dialog-card h2 { margin: 4px 0; font: 700 1.5rem var(--font-heading); }.workspace-type-dialog-card p { color: var(--text-muted); }
.workspace-type-list { display: grid; gap: 16px; }.workspace-type-loading { display: flex; align-items: center; gap: 8px; padding: 30px; justify-content: center; color: var(--text-muted); }.workspace-type-loading svg { animation: spin 1s linear infinite; }
.workspace-type-domain { padding: 14px; border: 1px solid var(--border-color); border-radius: 12px; }.workspace-type-domain h3 { margin-bottom: 8px; font-size: 14px; }.workspace-type-domain > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.workspace-type-domain a { display: grid; grid-template-columns: 28px 1fr 18px; gap: 9px; align-items: center; padding: 10px; border-radius: 8px; color: var(--text-main); text-decoration: none; background: #f8fafc; }.workspace-type-domain a:hover { background: var(--primary-light); }.workspace-type-domain a > svg { width: 17px; }.workspace-type-domain a span { display: grid; }.workspace-type-domain a small { color: var(--text-muted); }
.result-metrics.editor-workspace-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 16px 10px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 9px; background: var(--border-color); }.editor-workspace-metrics[hidden] { display: none; }.result-metrics.editor-workspace-metrics .metric-chip { padding: 7px 9px; border: 0; border-radius: 0; background: white; }.result-metrics.editor-workspace-metrics .metric-chip + .metric-chip { border-left: 0; }.editor-workspace-metrics .metric-ico { width: 25px; height: 25px; }.editor-workspace-metrics b { color: var(--text-main); font-size: 14px; }.editor-workspace-metrics small { color: var(--text-muted); font-size: 10px; text-transform: lowercase; }
@media (max-width: 620px) { .workspace-mode-switch { width: 100%; }.workspace-mode-switch > span { display: none; }.workspace-mode-button { flex: 1; justify-content: center; }.workspace-type-domain > div { grid-template-columns: 1fr; } }

/* The page scrolls as a document: the footer flows after the content and is
   only reached at the end. `overflow-x: clip` contains horizontal overflow
   without turning html/body into a scroll container, which would break the
   sticky topbar. */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

/* Header Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 32px;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  color: var(--text-main);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 28px;
}

.nav-divider {
  width: 1px;
  height: 24px;
  margin: 0 3px;
  background: var(--border-color);
}

.admin-login-link {
  color: #475569;
  background: #f8fafc;
  border: 1px solid var(--border-color);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: var(--transition-smooth);
}

.nav-link i {
  width: 16px;
  height: 16px;
}

.nav-link:hover {
  color: var(--text-main);
  background-color: rgba(15, 23, 42, 0.04);
}

.nav-link.is-active {
  color: var(--primary);
  background-color: var(--primary-light);
  border: 1px solid rgba(14, 165, 233, 0.15);
}

/* Analizador ⟷ Editor: control segmentado en la barra (espeja el switch interno). */
.nav-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.nav-switch-segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
  transition: var(--transition-smooth);
}

.nav-switch-segment > i[data-lucide] {
  width: 16px;
  height: 16px;
}

.nav-switch-segment:hover {
  color: var(--text-main);
  background: rgba(15, 23, 42, 0.04);
}

.nav-switch-segment.is-active {
  color: var(--primary);
  background: var(--primary-light);
}

.nav-switch-dropdown {
  display: inline-flex;
  align-items: stretch;
}

.nav-switch-editor-dropdown {
  display: inline-flex;
}

.nav-switch-editor-link {
  border-radius: 7px 0 0 7px;
}

.nav-switch-editor-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border-color);
  border-radius: 0 7px 7px 0;
  transition: var(--transition-smooth);
}

.nav-switch-editor-toggle:hover {
  color: var(--text-main);
  background: rgba(15, 23, 42, 0.04);
}

.nav-switch-editor-toggle.is-active {
  color: var(--primary);
  background: var(--primary-light);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown-chevron {
  width: 13px !important;
  height: 13px !important;
  margin-left: -3px;
  transition: transform 160ms ease;
}

.nav-switch-editor-toggle .nav-dropdown-chevron {
  margin-left: 0;
}

.nav-dropdown[open] .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 130;
  display: grid;
  width: max-content;
  min-width: 220px;
  padding: 7px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
  backdrop-filter: blur(14px);
}

.nav-dropdown-menu::before {
  position: absolute;
  top: -5px;
  left: 24px;
  width: 9px;
  height: 9px;
  content: "";
  border-top: 1px solid rgba(203, 213, 225, .9);
  border-left: 1px solid rgba(203, 213, 225, .9);
  background: white;
  transform: rotate(45deg);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  color: var(--text-main);
  background: #f1f5f9;
  outline: none;
}

.nav-dropdown-item.is-active {
  color: var(--primary);
  background: var(--primary-light);
}

.nav-dropdown-item svg {
  width: 16px;
  height: 16px;
}

.prompt-language-value {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  background: #f8fafc;
  font-size: 14px;
  font-weight: 600;
}

.prompt-language-value svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
}

.logo-icon i {
  width: 18px;
  height: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
  height: 44px;
}

.brand-logo-frame {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 88px;
  height: 42px;
  overflow: hidden;
  flex: 0 0 88px;
}

.brand-logo {
  width: 88px;
  height: 42px;
  max-width: 88px;
  max-height: 42px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}

.brand-logo:hover {
  transform: scale(1.02);
}

.brand-text {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-muted);
  border-left: 1px solid var(--border-color);
  padding-left: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  height: 20px;
  text-transform: uppercase;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.user-badge i {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.topbar .logout-btn {
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
}

.topbar .logout-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

/* Compact desktop header before reaching the mobile icon-only layout. */
@media (max-width: 1550px) {
  .topbar { padding-inline: 16px; gap: 10px; }
  .topbar-left { min-width: 0; gap: 8px; }
  .brand-text { display: none; }
  .topbar-nav { gap: 3px; margin-left: 10px; }
  .topbar-nav .nav-link { padding: 6px 9px; }
  .topbar-right { flex: 0 0 auto; gap: 7px; }
  .topbar-right .user-badge { display: none; }
  .context-selector--interface { flex: 0 0 auto; gap: 5px; padding: 4px 6px; }
  .context-selector--interface > label { display: inline; }
  .context-selector--interface select { min-width: 92px; max-width: 112px; }
}

@media (max-width: 1180px) {
  .topbar-nav .nav-link { padding: 6px 8px; }
  .topbar-nav .nav-link > span { display: none; }
  .topbar-nav .nav-switch-segment { padding: 6px 9px; }
  .topbar-nav .nav-switch-segment > span { display: none; }
  .topbar-nav .nav-dropdown-menu span { display: inline; }
  .topbar-nav .nav-dropdown-chevron { display: none; }
  .topbar-nav .nav-switch-editor-toggle .nav-dropdown-chevron { display: block; }
  .topbar .logout-btn { width: 36px; padding: 6px; }
  .topbar .logout-btn span { display: none; }
  .context-selector--interface > i { display: none; }
  .context-selector--interface > label { display: none; }
}

/* Shared suggestion workspace: Analytics and Editor use the same component. */
.unified-suggestion-panel { display:flex; flex-direction:column; min-height:0; height:100%; color:var(--text-main); background:#fff; }
.usp-header { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 14px; padding:14px 16px; background:rgba(255,255,255,.97); border-bottom:1px solid var(--border-color); backdrop-filter:blur(10px); }
.usp-title { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; min-width:0; }
.usp-title svg { width:19px; color:var(--primary); }
.usp-title strong { font-size:1rem; }
.usp-title > span { min-width:28px; padding:3px 8px; text-align:center; color:#9a5b00; background:#fff1c7; border-radius:999px; font-weight:800; }
.usp-title small { grid-column:2 / -1; color:var(--text-muted); font-size:.72rem; }
.usp-metrics { display:flex; grid-column:1; gap:14px; color:var(--text-muted); font-size:.72rem; }
.usp-metrics span { display:flex; align-items:baseline; gap:4px; }.usp-metrics b { color:var(--text-main); font-size:.95rem; }
.usp-actions { grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; gap:5px; }
.usp-actions a,.usp-actions button,.usp-occurrences button,.usp-preview button { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:34px; padding:6px 9px; color:var(--text-main); background:#fff; border:1px solid var(--border-color); border-radius:9px; text-decoration:none; cursor:pointer; }
.usp-actions svg,.usp-occurrences svg { width:17px; height:17px; }.usp-actions span { color:var(--text-muted); font-size:.75rem; white-space:nowrap; }
.usp-layers { grid-column:1 / -1; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.usp-layers button { display:flex; align-items:center; gap:5px; min-height:30px; padding:5px 9px; color:var(--text-muted); white-space:nowrap; background:#f8fafc; border:1px solid var(--border-color); border-radius:999px; cursor:pointer; }
.usp-layers button.is-active { color:#075985; background:#e0f2fe; border-color:#7dd3fc; }.usp-layers b { font-size:.72rem; }
.layer-dot { display:inline-block; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#94a3b8; }.layer-dot-discourse{background:#8b5cf6}.layer-dot-lexical{background:#06b6d4}.layer-dot-morphosyntax{background:#f59e0b}.layer-dot-acronyms{background:#10b981}.layer-dot-general{background:#64748b}
.usp-body { display:grid; grid-template-columns:minmax(180px,34%) minmax(0,1fr); min-height:0; flex:1; overflow:hidden; }
.usp-rule-list { overflow:auto; padding:10px; background:#f8fafc; border-right:1px solid var(--border-color); }
.usp-rule { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:8px; width:100%; margin-bottom:7px; padding:10px; text-align:left; background:#fff; border:1px solid var(--border-color); border-radius:10px; cursor:pointer; }
.usp-rule.is-active { border-color:var(--primary); box-shadow:0 0 0 2px rgba(14,165,233,.1); }.usp-rule span{min-width:0}.usp-rule strong,.usp-rule small{display:block; overflow:hidden; text-overflow:ellipsis}.usp-rule strong{font-size:.82rem}.usp-rule small{margin-top:2px;color:var(--text-muted);font-family:monospace;font-size:.66rem;white-space:nowrap}.usp-rule>b{font-size:.75rem}.usp-rule svg{width:15px}
.usp-detail { min-width:0; overflow:auto; padding:14px; }.usp-card-heading>span{color:var(--primary);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.usp-card-heading h2{margin:4px 0 3px;font-size:1.05rem;line-height:1.25}.usp-card-heading code{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#64748b;background:#f1f5f9;border-radius:5px;font-size:.68rem;white-space:nowrap}.usp-summary{margin:12px 0;color:#334155;line-height:1.5}
.usp-recommendation { display:flex; gap:9px; margin:12px 0; padding:11px; color:#1e40af; background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; }.usp-recommendation svg{flex:0 0 auto;width:18px}.usp-recommendation strong{font-size:.78rem}.usp-recommendation p{margin:3px 0 0;line-height:1.4}
.usp-proposals { margin:14px 0; padding:12px; background:#f0fdf9; border:1px solid #86efc2; border-radius:12px; }.usp-proposals>header{display:flex;gap:9px;margin-bottom:10px}.usp-proposals>header svg{flex:0 0 auto;width:19px;color:#047857}.usp-proposals>header strong{color:#065f46}.usp-proposals>header p{margin:2px 0 0;color:#64748b;font-size:.78rem}.usp-connector-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}.usp-connector-controls select,.usp-connector-controls label{min-width:0;height:36px;background:#fff;border:1px solid #a7f3d0;border-radius:8px}.usp-connector-controls select{padding:0 8px}.usp-connector-controls label{display:flex;align-items:center;padding:0 8px}.usp-connector-controls label svg{width:15px;color:#64748b}.usp-connector-controls input{min-width:0;width:100%;border:0;outline:0}.usp-proposal-list{display:flex;flex-wrap:wrap;gap:7px;max-height:176px;overflow:auto}.usp-proposal{display:flex;align-items:center;max-width:100%;background:#fff;border:1px solid #a7f3d0;border-radius:999px;overflow:hidden}.usp-proposal span{overflow:hidden;padding:6px 4px 6px 10px;text-overflow:ellipsis;white-space:nowrap}.usp-proposal button{display:grid;place-items:center;width:31px;height:31px;color:#047857;background:transparent;border:0;cursor:pointer}.usp-proposal button:hover,.usp-proposal button.is-success{background:#d1fae5}.usp-proposal svg{width:15px}.usp-no-results,.usp-manual{color:var(--text-muted);font-size:.82rem}
.usp-occurrences { margin-top:15px; padding-top:12px; border-top:1px dashed var(--border-color); }.usp-occurrences>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.usp-occurrences>header strong{color:#64748b;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}.usp-occurrences>header div{display:flex;align-items:center;gap:5px}.usp-occurrences>header button{min-width:30px;min-height:30px;padding:4px}.usp-occurrences>header span{font-size:.75rem;color:#64748b}.usp-active-occurrence,.usp-occurrence-list button{width:100%;justify-content:space-between!important;gap:10px;text-align:left}.usp-active-occurrence span,.usp-occurrence-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usp-active-occurrence small{display:flex;align-items:center;gap:4px;color:#64748b}.usp-occurrence-list{display:grid;gap:6px;max-height:210px;margin-top:7px;overflow:auto}.usp-occurrence-list button.is-active{border-color:var(--primary);background:#f0f9ff}.usp-show-all{margin:8px auto 0;color:var(--primary)!important;border:0!important}.usp-empty{display:grid;place-items:center;gap:8px;padding:30px;color:var(--text-muted);text-align:center}
.usp-preview{width:min(560px,calc(100vw - 28px));padding:0;border:0;border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.28)}.usp-preview::backdrop{background:rgba(15,23,42,.48)}.usp-preview>div{padding:18px}.usp-preview header,.usp-preview footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.usp-preview h2{margin:0;font-size:1.1rem}.usp-preview section{margin:12px 0;padding:11px;background:#f8fafc;border-radius:10px}.usp-preview section span{color:#64748b;font-size:.72rem;font-weight:800;text-transform:uppercase}.usp-preview section p{margin:5px 0 0}.usp-preview footer{justify-content:flex-end}.editor-report-status{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f8fafc;border:1px solid var(--border-color);border-radius:10px}.editor-report-status svg{width:19px;color:var(--primary)}.editor-report-status h3,.editor-report-status p{margin:0}.editor-report-status h3{font-size:.86rem}.editor-report-status p{color:var(--text-muted);font-size:.74rem}.editor-suggestions-panel:has(.unified-suggestion-panel) { padding:0; }

@media (min-width:1450px){.public-editor-shell{grid-template-columns:minmax(0,1fr) minmax(470px,520px)}.editor-suggestions-toggle{display:none}}
@media (min-width:1181px) and (max-width:1449px){.public-editor-shell{grid-template-columns:1fr}.editor-suggestions-panel{position:fixed;z-index:55;top:86px;right:16px;bottom:16px;width:min(520px,calc(100vw - 32px));max-height:none;opacity:0;pointer-events:none;transform:translateX(calc(100% + 24px));transition:.2s ease}.public-editor-shell.is-suggestions-open .editor-suggestions-panel{opacity:1;pointer-events:auto;transform:translateX(0)}}
@media (max-width:1180px){.public-editor-shell{grid-template-areas:"editor"}.editor-suggestions-panel{position:fixed;z-index:60;inset:72px 0 0;width:100%;max-height:none;border-radius:0;opacity:0;pointer-events:none;transform:translateY(24px);transition:.2s ease}.public-editor-shell.is-suggestions-open .editor-suggestions-panel{opacity:1;pointer-events:auto;transform:none}}
@media (max-width:700px){.usp-header{grid-template-columns:1fr auto;padding:10px}.usp-metrics{display:none}.usp-actions{grid-row:1}.usp-body{display:flex;flex-direction:column;overflow:auto}.usp-rule-list{display:flex;flex:0 0 auto;max-height:none;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border-color)}.usp-rule{flex:0 0 230px;margin:0 6px 0 0}.usp-detail{overflow:visible}.usp-connector-controls{grid-template-columns:1fr}.agent-mode-switch{overflow-x:auto}}

/* Layout Shell */
/* `flex: 1 0 auto` keeps the footer at the bottom of the viewport on short
   pages without capping the shell: it grows with its content instead of
   scrolling internally. */
.shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Layout Container */
.analytics-container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: visible;
}

/* Grid workspace */
.workspace-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 24px;
  flex: 1;
  min-height: calc(100vh - 112px);
  overflow: visible;
}

.workspace-grid.has-report {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

/* Form Container Card */
.analysis-form-card {
  height: auto;
  min-height: 0;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.analysis-form-card:hover {
  box-shadow: var(--shadow-lg);
}

.analysis-config-summary {
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.analysis-form-card.is-collapsed {
  min-height: 0;
  padding: 9px 14px;
  gap: 0;
  box-shadow: var(--shadow-sm);
  animation: config-collapse-in .42s cubic-bezier(.2, .8, .2, 1) both;
}

.analysis-form-card.is-collapsed .analysis-config-summary { display: flex; }
.analysis-form-card.is-collapsed > .card-header,
.analysis-form-card.is-collapsed > .error-message,
.analysis-form-card.is-collapsed > .analysis-form-body { display: none; }
.analysis-form-card.is-expanded .analysis-config-summary { display: none; }
.analysis-form-card.is-expanded { animation: config-expand-in .32s ease both; }
.config-summary-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; color: #047857; background: #ecfdf5; border-radius: 8px; }
.config-summary-icon i { width: 16px; height: 16px; }
.config-summary-copy { display: flex; flex: 1; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
.config-summary-copy strong { font: 700 13px var(--font-heading); white-space: nowrap; }
.config-summary-copy span { overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.config-summary-copy strong::after { content: "·"; margin-left: 8px; color: var(--border-color); font-weight: 400; }
.config-edit-button { min-height: 32px; }
.config-cancel-button { align-self: center; }

@keyframes config-collapse-in {
  from { opacity: .55; transform: translateY(-8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes config-expand-in {
  from { opacity: .75; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.card-header h1 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

/* Status Pill */
.status-badge-wrapper {
  display: flex;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.status-pill .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-completed {
  background-color: #ecfdf5;
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-completed .status-dot { background-color: var(--success); }

.status-running {
  background-color: #eff6ff;
  color: var(--info);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.status-running .status-dot {
  background-color: var(--info);
  animation: pulse-dot 1.5s infinite;
}

.status-queued {
  background-color: #fef3c7;
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.status-queued .status-dot { background-color: var(--warning); }

.status-failed {
  background-color: #fef2f2;
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.status-failed .status-dot { background-color: var(--danger); }

/* Form inputs & editor */
.analysis-form-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flex-grow-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.label-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.label-header label {
  font-weight: 600;
  color: var(--text-main);
}

.char-count-info {
  color: var(--text-muted);
}

.textarea-container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

textarea#text-editor {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  padding: 16px;
  background-color: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-main);
  resize: none;
  outline: none;
  transition: var(--transition-smooth);
}

textarea#text-editor:focus {
  border-color: var(--primary);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* Custom checkbox */
.checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  color: var(--text-main);
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 18px;
  width: 18px;
  background-color: #f1f5f9;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  transition: var(--transition-smooth);
}

.checkbox-container:hover input ~ .checkmark {
  background-color: #cbd5e1;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: var(--primary);
  border-color: var(--primary);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Buttons */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), #0284c7);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.2);
  transition: var(--transition-smooth);
}

.primary-btn:hover {
  background: linear-gradient(135deg, var(--primary-hover), #0369a1);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(14, 165, 233, 0.3);
}

.primary-btn:active {
  transform: translateY(0);
}

.primary-btn i {
  width: 16px;
  height: 16px;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.ghost-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.ghost-button i {
  width: 14px;
  height: 14px;
}

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-card);
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.secondary-btn:hover {
  border-color: rgba(14, 165, 233, 0.4);
  color: var(--primary-hover);
  box-shadow: var(--shadow-md);
}

.secondary-btn.is-disabled,
.secondary-btn[aria-disabled="true"] {
  color: var(--text-muted);
  background: #f8fafc;
  border-color: var(--border-color);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
}

.secondary-btn.is-disabled:hover,
.secondary-btn[aria-disabled="true"]:hover {
  color: var(--text-muted);
  border-color: var(--border-color);
  box-shadow: none;
}

.secondary-btn i {
  width: 15px;
  height: 15px;
}

/* Results panel */
.analysis-result-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pdf-download-btn {
  white-space: nowrap;
}

/* Compact segmented metric bar (replaces the big stat cards) */
.result-metrics {
  display: inline-flex;
  align-items: stretch;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
}

.metric-chip + .metric-chip {
  border-left: 1px solid var(--border-color);
}

.metric-ico {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.metric-ico i {
  width: 15px;
  height: 15px;
}

.metric-body {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.metric-body b {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.metric-body small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.output-tabs {
  display: flex;
  gap: 6px;
  background-color: #cbd5e1;
  background-color: rgba(148, 163, 184, 0.12);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.tab-button:hover {
  color: var(--text-main);
}

.tab-button.is-active {
  background-color: var(--bg-card);
  color: var(--primary-hover);
  box-shadow: var(--shadow-sm);
}

/* Tabs layout */
.tab-button i {
  width: 15px;
  height: 15px;
}

.tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tab-panel[hidden] {
  display: none !important;
}

/* Stats Cards Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.stat-icon-wrapper i {
  width: 20px;
  height: 20px;
}

.blue-stat { background-color: #f0f9ff; color: #0284c7; }
.purple-stat { background-color: #f5f3ff; color: #7c3aed; }
.orange-stat { background-color: #fffbeb; color: #d97706; }
.green-stat { background-color: #f0fdf4; color: #16a34a; }
.red-stat { background-color: #fef2f2; color: #dc2626; }

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Main Split workspace */
.report-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(460px, 0.85fr);
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Text preview Pane */
.text-preview-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  background-color: #fafbfc;
}

.pane-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pane-title-group i {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.pane-header h2 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

.badge-info { background-color: #e0f2fe; color: #0369a1; }
.badge-warning { background-color: #fef3c7; color: #b45309; }
.badge-success { background-color: #dcfce7; color: #047857; }

.text-display-box {
  padding: 18px 20px;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0;
}

.highlighted-text {
  font-size: 15px;
  line-height: 1.85;
  color: #334155;
  white-space: pre-wrap;
}

/* Elegant Text Highlights */
.text-hit {
  position: relative;
  display: inline;
  border-radius: 4px;
  padding: 2px 1px;
  cursor: pointer;
  font-weight: 500;
  transition: var(--transition-smooth);
  outline: none;
}

.text-hit:focus-visible {
  box-shadow: 0 0 0 2px var(--primary);
}

.text-hit-discourse {
  --hit-color: var(--color-discourse);
  background-color: var(--color-discourse-light);
  border-bottom: 2px solid var(--color-discourse);
}

.text-hit-lexical {
  --hit-color: var(--color-lexical);
  background-color: var(--color-lexical-light);
  border-bottom: 2px solid var(--color-lexical);
}

.text-hit-morphosyntax {
  --hit-color: var(--color-morphosyntax);
  background-color: var(--color-morphosyntax-light);
  border-bottom: 2px solid var(--color-morphosyntax);
}

.text-hit-acronyms {
  --hit-color: var(--color-acronyms);
  background-color: var(--color-acronyms-light);
  border-bottom: 2px solid var(--color-acronyms);
}

/* Hover and active glow */
.text-hit:hover {
  filter: brightness(0.95);
}

.text-hit.is-active {
  border-bottom-color: var(--hit-color, var(--primary));
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hit-color, var(--primary));
}

.text-hit-scope-sentence {
  background-color: rgba(124, 58, 237, 0.08);
  border-bottom-style: solid;
}

.text-hit-scope-paragraph {
  background-color: rgba(124, 58, 237, 0.05);
  border-bottom-style: dashed;
}

.text-hit-scope-document {
  background-color: rgba(14, 165, 233, 0.06);
  border-bottom-style: dotted;
}

.text-hit[data-hit-count]::after {
  content: attr(data-hit-count);
  display: inline-grid;
  place-items: center;
  min-width: 13px;
  height: 13px;
  margin-left: 2px;
  padding: 0 3px;
  color: #ffffff;
  background: var(--text-main);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  vertical-align: super;
}

.editor-hit-popover {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 16px;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.editor-hit-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--popover-arrow-left, 50%);
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid rgba(14, 165, 233, 0.22);
  border-top: 1px solid rgba(14, 165, 233, 0.22);
  transform: translateX(-50%) rotate(45deg);
}

.editor-hit-popover.is-above::before {
  top: auto;
  bottom: -7px;
  border: 0;
  border-right: 1px solid rgba(14, 165, 233, 0.22);
  border-bottom: 1px solid rgba(14, 165, 233, 0.22);
}

.hit-popover-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
}

.hit-popover-kicker {
  display: inline-flex;
  max-width: calc(100% - 36px);
  margin-bottom: 8px;
  padding: 2px 8px;
  color: var(--primary-hover);
  background: var(--primary-light);
  border-radius: 999px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
}

.editor-hit-popover strong {
  display: block;
  padding-right: 28px;
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.25;
}

.editor-hit-popover p {
  margin: 9px 0 14px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.hit-popover-stack-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  margin: -4px 0 12px;
  padding: 5px 6px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.hit-popover-stack-nav[hidden] {
  display: none;
}

.hit-popover-stack-nav span {
  min-width: 0;
  text-align: center;
  line-height: 1.25;
}

.hit-popover-assist {
  width: 100%;
  min-height: 42px;
  margin-bottom: 10px;
}

.hit-popover-assist.is-loading i {
  animation: spin 1s linear infinite;
}

.hit-ai-panel {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(48vh, 520px);
  margin: 0 0 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
}

.hit-ai-panel::-webkit-scrollbar {
  width: 8px;
}

.hit-ai-panel::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.42);
  border-radius: 999px;
}

.hit-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--primary-hover);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hit-ai-header code {
  max-width: 160px;
  overflow: hidden;
  color: #64748b;
  background: #eef6ff;
  border-radius: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit-ai-option {
  padding: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.hit-ai-option + .hit-ai-option {
  margin-top: 8px;
}

.hit-ai-option-label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.hit-ai-option p {
  margin: 0;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.hit-ai-option small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.hit-ai-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.mini-action {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.mini-action i {
  width: 15px;
  height: 15px;
}

.hit-ai-status,
.hit-ai-error,
.hit-ai-empty {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.hit-ai-status i {
  width: 16px;
  height: 16px;
  color: var(--primary);
  animation: spin 1s linear infinite;
}

.hit-ai-error {
  color: #b91c1c;
}

.hit-ai-error i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.hit-popover-details {
  width: 100%;
}

.text-hit-anchor {
  display: inline-block;
  width: 0;
  height: 0;
  scroll-margin-top: 28px;
}

.text-hit-anchor.is-active::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.4em;
  margin-left: -8px;
  margin-right: 4px;
  vertical-align: -0.25em;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

/* Final responsive placement for the shared panel (kept last in the cascade). */
.editor-suggestions-panel:has(.unified-suggestion-panel) { padding:0; }
@media (min-width:1450px){.public-editor-shell{grid-template-columns:minmax(0,1fr) minmax(470px,520px)}.editor-suggestions-toggle{display:none}}
@media (min-width:1181px) and (max-width:1449px){.public-editor-shell{grid-template-columns:1fr;grid-template-areas:"editor"}.editor-suggestions-panel{position:fixed;z-index:55;top:86px;right:16px;bottom:16px;width:min(520px,calc(100vw - 32px));max-height:none;opacity:0;pointer-events:none;transform:translateX(calc(100% + 24px));transition:opacity .2s ease,transform .2s ease}.public-editor-shell.is-suggestions-open .editor-suggestions-panel{opacity:1;pointer-events:auto;transform:translateX(0)}}
@media (max-width:1180px){.public-editor-shell{grid-template-areas:"editor"}.editor-suggestions-panel{position:fixed;z-index:60;inset:72px 0 0;width:100%;max-height:none;border-radius:0;opacity:0;pointer-events:none;transform:translateY(24px);transition:opacity .2s ease,transform .2s ease}.public-editor-shell.is-suggestions-open .editor-suggestions-panel{opacity:1;pointer-events:auto;transform:none}}

/* Compact three-rail editor, inspired by the original arText workspace. */
@media (min-width:1280px) {
  .public-editor-shell { grid-template-columns:260px minmax(560px,1fr) 340px; grid-template-areas:"structure editor suggestions"; gap:10px; min-height:calc(100vh - 96px); }
  .public-editor-shell:not(.is-structure-open) { grid-template-columns:minmax(560px,1fr) 340px; grid-template-areas:"editor suggestions"; }
  .public-editor-shell:not(.is-suggestions-open) { grid-template-columns:260px minmax(560px,1fr); grid-template-areas:"structure editor"; }
  .public-editor-shell:not(.is-structure-open):not(.is-suggestions-open) { grid-template-columns:1fr; grid-template-areas:"editor"; }
  .public-editor-shell:not(.is-structure-open) .editor-structure-panel,
  .public-editor-shell:not(.is-suggestions-open) .editor-suggestions-panel { display:none; }
  .editor-structure-panel { grid-area:structure; position:sticky; top:0; bottom:auto; left:auto; z-index:10; width:auto; max-height:calc(100vh - 96px); opacity:1; pointer-events:auto; transform:none; }
  .editor-suggestions-panel { grid-area:suggestions; position:sticky; top:0; right:auto; bottom:auto; width:auto; max-height:calc(100vh - 96px); opacity:1; pointer-events:auto; transform:none; }
  .editor-suggestions-toggle { display:inline-flex; }
}

.editor-structure-panel { padding:0; border-radius:10px; box-shadow:none; }
.structure-head { padding:11px 12px 10px; border-bottom:1px solid var(--border-color); }
.structure-head-top { align-items:center; }.structure-head-top .back-link { min-height:28px; padding:3px 5px; font-size:11px; }
.structure-close-btn { width:28px; height:28px; }.structure-head h1 { margin:9px 0 1px; font-size:14px; line-height:1.25; }.structure-head p { margin:0; font-size:10px; }
.structure-tree { min-height:0; flex:1; overflow:auto; padding:6px; }
.structure-tree-section { border-bottom:1px solid #eef2f7; }.structure-tree-row { display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; gap:2px; }
.structure-tree-toggle { display:flex; min-width:0; align-items:center; gap:5px; padding:8px 5px; color:var(--text-main); text-align:left; background:transparent; border:0; cursor:pointer; }
.structure-tree-toggle>svg { flex:0 0 auto; width:13px; height:13px; color:#94a3b8; transition:transform .15s ease; }.is-active>.structure-tree-row .structure-tree-toggle>svg,.structure-tree-content.is-active>.structure-tree-row .structure-tree-toggle>svg { transform:rotate(90deg); }
.structure-tree-toggle>span { display:flex; min-width:0; flex:1; align-items:center; justify-content:space-between; gap:5px; }.structure-tree-toggle strong { overflow:hidden; font:650 11px/1.3 var(--font-heading); text-overflow:ellipsis; }.structure-tree-toggle small { flex:0 0 auto; color:#94a3b8; font-size:9px; }
.structure-tree-contents { padding:0 0 4px 13px; border-left:1px solid #dbeafe; }.structure-tree-content { border-radius:6px; }.structure-tree-content.is-active { background:#f0f9ff; }
.structure-tree-row.content-row .structure-tree-toggle { padding-top:6px; padding-bottom:6px; }.structure-tree-row.content-row .structure-tree-toggle strong { font-weight:550; }
.structure-tree-phrases { display:grid; gap:3px; padding:2px 5px 7px 17px; }.structure-tree-phrases .phraseology-btn { min-height:0; padding:6px 7px; gap:6px; color:#475569; font-size:10px; line-height:1.35; background:#fff; border:1px solid #e2e8f0; border-radius:6px; }
.structure-tree-phrases .phraseology-btn svg { width:12px; }.structure-insert-action { width:25px; height:25px; border:0; border-radius:6px; background:transparent; }.structure-insert-action:hover { color:#fff; background:var(--primary); }

.editor-main-panel { min-width:0; }.agent-editor-frame { min-height:calc(100vh - 96px); padding-bottom:10px; }.editor-workbar { gap:8px; width:100%; margin-bottom:7px; }.agent-mode-switch { padding:3px; border-radius:10px; box-shadow:none; }.agent-mode-btn { min-height:32px; padding:0 9px; gap:5px; border-radius:7px; font-size:11px; }.agent-mode-btn i { width:15px; height:15px; }.editor-analyze-btn { min-height:36px; padding:0 13px; border-radius:8px; font-size:12px; box-shadow:none; }
.editor-toolbar { top:48px; width:100%; min-height:44px; padding:4px 7px; border-radius:10px 10px 0 0; box-shadow:none; }.icon-tool { width:29px; height:30px; border-radius:6px; }.icon-tool i { width:15px; height:15px; }.toolbar-separator { height:22px; }.editor-format-select { height:30px; font-size:11px; }
.editor-document-card { width:100%; min-height:calc(100vh - 205px); border-radius:0 0 10px 10px; box-shadow:none; }.document-status-line { padding:6px 10px; font-size:10px; }.rich-editor-surface { min-height:calc(100vh - 245px); padding:28px 34px 92px; font-size:15px; line-height:1.65; }.rich-editor-content { max-width:720px; font-size:calc(15px * var(--editor-zoom,1)); line-height:1.65; }.agent-command-bar { bottom:10px; min-height:44px; width:min(620px,calc(100% - 28px)); margin-top:-66px; padding:5px 7px 5px 11px; gap:7px; border-radius:10px; box-shadow:0 8px 22px rgba(15,23,42,.12); }.agent-command-bar input { height:32px; font-size:12px; }

.editor-suggestions-panel { gap:0; border-radius:10px; box-shadow:none; }.editor-report-status { margin:7px; padding:7px 8px; border-radius:6px; }.editor-report-status p { font-size:10px; }.editor-report-status h3 { font-size:11px; }
.unified-suggestion-panel { overflow:hidden; }.usp-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; padding:9px 9px 7px; backdrop-filter:none; }.usp-title { grid-template-columns:auto minmax(0,1fr) auto; gap:5px; }.usp-title svg { width:15px; }.usp-title strong { font-size:12px; }.usp-title>span { min-width:22px; padding:2px 6px; font-size:10px; }.usp-actions { grid-column:2; grid-row:1; gap:2px; }.usp-actions a,.usp-actions button { min-width:27px; min-height:27px; padding:4px; border:0; border-radius:6px; }.usp-actions svg { width:14px;height:14px; }.usp-actions span { font-size:9px; }
.usp-layers { gap:3px; grid-column:1/-1; }.usp-layers button { min-height:24px; padding:3px 6px; gap:4px; border-radius:6px; font-size:9px; }.usp-layers .layer-dot { width:6px;height:6px; }
.usp-rule-list { flex:1; overflow:auto; padding:5px; background:#fff; border:0; }.usp-rule { display:block; width:100%; margin:0; padding:0; background:#fff; border:0; border-bottom:1px solid #edf2f7; border-radius:0; box-shadow:none; }.usp-rule.is-active { border-color:#dbeafe; box-shadow:none; background:#fbfdff; }
.usp-rule-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:6px; width:100%; padding:9px 6px; color:var(--text-main); text-align:left; background:transparent; border:0; cursor:pointer; }.usp-rule-summary .layer-dot { width:7px;height:7px; }.usp-rule-summary strong { display:block; overflow:hidden; font:650 11px/1.3 var(--font-heading); text-overflow:ellipsis; }.usp-rule-summary b { color:#64748b; font-size:9px; }.usp-rule-summary>svg { width:13px; color:#94a3b8; transition:transform .15s ease; }.usp-rule.is-active .usp-rule-summary>svg { transform:rotate(90deg); }
.usp-rule-details { padding:0 7px 9px 19px; }.usp-summary { margin:2px 0 7px; color:#475569; font-size:10.5px; line-height:1.45; }.usp-recommendation { gap:5px; margin:6px 0; padding:6px 7px; border:0; border-left:2px solid #60a5fa; border-radius:3px; }.usp-recommendation svg { width:13px; }.usp-recommendation strong { display:none; }.usp-recommendation p { margin:0; font-size:10px; line-height:1.4; }
.usp-occurrences { margin-top:7px; padding-top:6px; }.usp-occurrences>header { margin-bottom:4px; }.usp-occurrences>header strong { font-size:9px; }.usp-occurrences>header button { min-width:24px;min-height:24px;padding:2px;border:0; }.usp-occurrences>header span { font-size:9px; }.usp-active-occurrence,.usp-occurrence-list button { min-height:30px!important;padding:5px 7px!important;border-radius:5px!important;font-size:10px!important; }.usp-active-occurrence small { font-size:8px; }.usp-show-all { min-height:24px!important;margin-top:3px!important;font-size:9px; }
.usp-proposals { margin:7px 0 0; padding:7px; border:0; border-left:2px solid #34d399; border-radius:3px; }.usp-proposals>header { gap:5px; margin-bottom:5px; }.usp-proposals>header svg { width:14px; }.usp-proposals>header strong { font-size:10px; }.usp-proposals>header p { display:none; }.usp-connector-controls { grid-template-columns:1fr; gap:4px; margin-bottom:5px; }.usp-connector-controls select,.usp-connector-controls label { height:29px; font-size:10px; border-radius:5px; }.usp-proposal-list { gap:3px; max-height:120px; }.usp-proposal { border-radius:5px; font-size:10px; }.usp-proposal span { padding:4px 3px 4px 7px; }.usp-proposal button { width:25px;height:25px; }.usp-proposal svg { width:12px; }

@media (max-width:1279px) {
  .public-editor-shell { display:block; min-height:0; }.editor-main-panel { width:100%; }
  .editor-structure-panel,.editor-suggestions-panel { position:fixed; z-index:60; top:72px; bottom:0; width:min(340px,calc(100vw - 22px)); max-height:none; border-radius:0 10px 10px 0; opacity:0; pointer-events:none; transform:translateX(-105%); transition:opacity .18s ease,transform .18s ease; }
  .editor-structure-panel { left:0; right:auto; }.editor-suggestions-panel { left:auto; right:0; border-radius:10px 0 0 10px; transform:translateX(105%); }
  .public-editor-shell.is-structure-open .editor-structure-panel,.public-editor-shell.is-suggestions-open .editor-suggestions-panel { opacity:1; pointer-events:auto; transform:none; }
}
@media (max-width:700px) {
  .editor-structure-panel,.editor-suggestions-panel { inset:62px 0 0; width:100%; border-radius:0; }.rich-editor-surface { padding:20px 18px 84px; font-size:14px; }.rich-editor-content { font-size:calc(14px * var(--editor-zoom,1)); }.editor-workbar { grid-template-columns:minmax(0,1fr) auto; }.editor-workbar .agent-mode-switch { grid-column:1; justify-self:start; }.editor-analyze-btn { grid-column:2; }.agent-mode-btn span { display:none; }
}

/* Suggestions Right Pane */
.suggestions-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.suggestion-list-wrapper {
  overflow-y: auto;
  padding: 14px;
  flex-grow: 1;
  min-height: 0;
}

/* Empty states */
.empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 480px;
  border: 2px dashed var(--border-color);
  border-radius: 16px;
  padding: 48px;
  background-color: var(--bg-card);
}

.empty-decor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary);
  margin-bottom: 20px;
}

.empty-decor i {
  width: 32px;
  height: 32px;
}

.empty-state-card h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.empty-state-card p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 420px;
}

.perfect-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
}

.perfect-icon {
  width: 48px;
  height: 48px;
  color: var(--success);
  margin-bottom: 16px;
}

.perfect-state h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.perfect-state p {
  font-size: 13px;
  color: var(--text-muted);
}

/* Suggestion Accordion */
.category-section {
  margin-bottom: 20px;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}

.category-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.category-header-discourse .category-dot { background-color: var(--color-discourse); }
.category-header-lexical .category-dot { background-color: var(--color-lexical); }
.category-header-morphosyntax .category-dot { background-color: var(--color-morphosyntax); }
.category-header-acronyms .category-dot { background-color: var(--color-acronyms); }

.category-header h3 {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  flex-grow: 1;
}

.category-count {
  font-size: 10px;
  font-weight: 700;
  background-color: #f1f5f9;
  padding: 2px 8px;
  border-radius: 99px;
  color: var(--text-muted);
}

/* Suggestion Card Item */
.suggestion-item {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: var(--bg-card);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.suggestion-item:hover {
  border-color: #cbd5e1;
}

/* Category card left accents */
.suggestion-category-discourse { border-left: 3px solid var(--color-discourse); }
.suggestion-category-lexical { border-left: 3px solid var(--color-lexical); }
.suggestion-category-morphosyntax { border-left: 3px solid var(--color-morphosyntax); }
.suggestion-category-acronyms { border-left: 3px solid var(--color-acronyms); }

.suggestion-item.is-active {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
  background-color: #fbfdff;
}

.suggestion-summary-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  min-height: 0;
}

.suggestion-summary-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suggestion-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.suggestion-summary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.catalog-options-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; color: #047857; background: #ecfdf5; border-radius: 999px; font-size: 10px; font-weight: 700; }
.catalog-options-badge i { width: 11px; height: 11px; }

.suggestion-code {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
  background-color: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
}

.arrow-indicator {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

/* Collapsible behavior - css hook */
.suggestion-details {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid #f8fafc;
}

.suggestion-item.is-active .suggestion-details {
  display: block;
}

.suggestion-item.is-active .arrow-indicator {
  transform: rotate(90deg);
  color: var(--primary);
}

.suggestion-desc {
  font-size: 13px;
  color: #475569;
  margin-bottom: 12px;
}

/* Recommendations design */
.recommendation-box {
  display: flex;
  gap: 10px;
  background-color: #eff6ff;
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

.rec-icon {
  width: 16px;
  height: 16px;
  color: var(--info);
  margin-top: 2px;
  flex-shrink: 0;
}

.rec-content {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.rec-label {
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 2px;
}

.rec-text {
  color: #1e40af;
}

/* Occurrences detail styling */
.occurrences-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--border-color);
  padding-top: 12px;
}

.occurrences-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.occurrences-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.occurrence-nav { display: flex; align-items: center; gap: 4px; }
.occurrence-nav > span { min-width: 38px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-align: center; }
.occurrence-nav button { display: grid; place-items: center; width: 28px; height: 28px; color: var(--text-muted); background: #fff; border: 1px solid var(--border-color); border-radius: 7px; cursor: pointer; }
.occurrence-nav button:hover { color: var(--primary-hover); background: var(--primary-light); border-color: #bae6fd; }
.occurrence-nav button i { width: 14px; height: 14px; }

.occurrence-buttons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.occurrence-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.occurrence-jump-btn,
.occurrence-static-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  background-color: #fafbfc;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  transition: var(--transition-smooth);
}

.occurrence-jump-btn {
  cursor: pointer;
}

.occurrence-jump-btn:hover {
  background-color: var(--primary-light);
  border-color: var(--primary);
}

.occurrence-jump-btn.is-current {
  color: #075985;
  background: #f0f9ff;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, .1);
}

.occurrence-jump-btn.is-stale,
.occurrence-jump-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.occurrence-jump-btn.is-stale:hover,
.occurrence-jump-btn:disabled:hover {
  background-color: #fafbfc;
  border-color: var(--border-color);
}

.occ-text {
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.occ-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: monospace;
  font-size: 10px;
  background-color: #f1f5f9;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
}

.occ-badge i {
  width: 10px;
  height: 10px;
}

.replacement-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding-left: 12px;
}

.rep-label {
  color: var(--text-muted);
  font-weight: 500;
}

.rep-value {
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.catalog-alternatives-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(145deg, #f0fdf9, #f8fafc);
  border: 1px solid #a7f3d0;
  border-radius: 10px;
}

.catalog-alternatives-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.catalog-panel-title { display: flex; align-items: center; gap: 9px; }
.catalog-panel-title > span:last-child { display: flex; flex-direction: column; }
.catalog-panel-title strong { color: #065f46; font-size: 12px; }
.catalog-panel-title small { color: var(--text-muted); font-size: 10px; }
.catalog-feature-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; color: #047857; background: #d1fae5; border-radius: 10px; }
.catalog-feature-icon.compact { flex-basis: 30px; width: 30px; height: 30px; border-radius: 8px; }
.catalog-feature-icon i { width: 18px; height: 18px; }
.catalog-feature-icon.compact i { width: 14px; height: 14px; }

.catalog-alternatives-head code {
  flex-shrink: 0;
  color: #0f766e;
  background: #ccfbf1;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
}

.catalog-alternatives-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-alternative-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 9px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.catalog-alternative-chip i { width: 13px; height: 13px; margin-left: 5px; opacity: .6; }

.catalog-alternative-chip:hover,
.catalog-alternative-chip.is-selected {
  color: #064e3b;
  background: #d1fae5;
  border-color: var(--accent-emerald);
}

.catalog-alternatives-hint {
  color: var(--text-muted);
  font-size: 11px;
}

.connector-catalog-panel { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; padding: 14px; background: linear-gradient(145deg, #ecfdf5, #f8fafc); border: 1px solid #a7f3d0; border-radius: 12px; }
.connector-catalog-intro { display: flex; align-items: center; gap: 11px; }
.connector-catalog-intro > div { min-width: 0; }
.connector-catalog-intro strong { color: #065f46; font-size: 13px; }
.connector-catalog-intro p { color: #475569; font-size: 11px; line-height: 1.4; }
.connector-option-groups { display: flex; flex-direction: column; gap: 5px; max-height: 280px; overflow-y: auto; }
.connector-option-group { overflow: hidden; background: rgba(255, 255, 255, .82); border: 1px solid #d1fae5; border-radius: 8px; }
.connector-option-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 8px; align-items: center; padding: 8px 10px; color: #334155; cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; }
.connector-option-group > summary::-webkit-details-marker { display: none; }
.connector-option-group > summary:hover { color: #065f46; background: #ecfdf5; }
.connector-option-group > summary i { width: 15px; height: 15px; transition: transform .2s ease; }
.connector-option-group[open] > summary i { transform: rotate(180deg); }
.group-option-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; color: #047857; background: #d1fae5; border-radius: 999px; font-size: 10px; }
.connector-option-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }
.connector-option-chip { border-radius: 7px; font-weight: 600; }

/* Occurrence Meta lists */
.metadata-detail {
  margin-top: 4px;
  padding: 8px;
  background-color: #fafbfc;
  border-left: 2px solid #cbd5e1;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
}

.meta-section-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}

.meta-section-title i {
  width: 12px;
  height: 12px;
}

.meta-list {
  padding-left: 20px;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dots-list {
  list-style-type: disc;
}

.connectors-list {
  list-style-type: none;
  padding-left: 0;
}

.conn-name {
  font-weight: 700;
  color: var(--primary-hover);
}

.conn-rel {
  color: var(--text-muted);
  font-size: 11px;
}

.conn-alternatives {
  margin-top: 2px;
  font-size: 11px;
  color: #475569;
}

/* API tab panels */
.api-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.api-block-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.panel-heading-api {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background-color: #1e293b;
  border-bottom: 1px solid #0f172a;
}

.http-method {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
}

.http-method.post { background-color: #10b981; }
.http-method.get { background-color: #0ea5e9; }

.api-path {
  font-family: monospace;
  font-size: 13px;
  color: #94a3b8;
}

.code-container {
  background-color: #0f172a;
  padding: 18px;
  overflow: auto;
  flex: 1;
}

.code-container pre code {
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #e2e8f0;
}

/* Foldable JSON tree (json_tree.js). Token colours follow the github-dark
   theme used by the API reference so both views read the same. */
.jt-node { display: block; }
.jt-summary { cursor: pointer; list-style: none; border-radius: 3px; }
.jt-summary::-webkit-details-marker { display: none; }
.jt-summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 6px;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid #8b949e;
  vertical-align: 1px;
  transition: transform 0.12s ease;
}
.jt-node[open] > .jt-summary::before { transform: rotate(90deg); }
.jt-summary:hover { background: rgba(148, 163, 184, 0.14); }
.jt-summary:focus-visible { outline: 2px solid #79c0ff; outline-offset: 1px; }
.jt-children {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.24);
}
/* The details element hides the expanded brackets while collapsed; these two
   are the mirror image, shown only when collapsed. */
.jt-node[open] > .jt-summary .jt-fold { display: none; }
.jt-fold { color: #8b949e; }
.jt-summary .jt-fold:first-of-type { margin: 0 5px; font-style: italic; }
.jt-close, .jt-row { padding-left: 11px; }
.jt-key { color: #79c0ff; }
.jt-index { color: #6e7c91; }
.jt-string { color: #a5d6ff; }
.jt-number, .jt-literal { color: #79c0ff; }
.jt-punc, .jt-close { color: #8b949e; }
.jt-toolbar { display: flex; gap: 6px; margin-left: auto; }
.jt-btn {
  padding: 3px 9px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.jt-btn:hover { border-color: #79c0ff; color: #cbd5e1; }

/* Errors states */
.error-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  min-height: 400px;
}

.error-large-icon {
  width: 48px;
  height: 48px;
  color: var(--danger);
  margin-bottom: 16px;
}

.error-state-card h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  margin-bottom: 8px;
}

.error-desc {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 480px;
}
.processing-state-card {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 48px;
  background-color: var(--bg-card);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.processing-loader-container {
  margin-bottom: 24px;
}

.spinner-glow-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}

.spinner-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0) 70%);
  opacity: 0.55;
}

.processing-icon-wrap {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
  z-index: 2;
}

.processing-icon-wrap i {
  width: 28px;
  height: 28px;
}

.processing-icon-wrap.status-queued {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.processing-icon-wrap.status-queued .spinner-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0) 70%);
}

.icon-spin {
  animation: spin 2s linear infinite;
}

.icon-pulse {
  animation: none;
}

.processing-state-card h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.processing-status-text {
  max-width: 520px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Stepper Style */
.processing-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 540px;
  margin-top: 36px;
  margin-bottom: 24px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  width: 100px;
}

.step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 2;
  color: var(--text-muted);
  font-size: 14px;
  transition: var(--transition-smooth);
}

.step-icon i {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
  white-space: nowrap;
}

.step-connector {
  height: 2px;
  background-color: var(--border-color);
  flex: 1;
  margin-bottom: 26px;
  z-index: 1;
  transition: var(--transition-smooth);
}

/* Step States */
.step.is-completed .step-icon {
  background-color: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #fff;
}

.step.is-completed .step-label {
  color: var(--text-main);
}

.step-connector.is-completed {
  background-color: var(--accent-emerald);
}

.step.is-active .step-icon {
  border-color: var(--primary);
  background-color: var(--primary-light);
  color: var(--primary);
}

.step.is-active .step-label {
  color: var(--primary);
  font-weight: 700;
}

.step-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.step-pulse.warning {
  background-color: var(--warning);
  animation: pulse-dot-warning 1.6s infinite;
}

.step-pulse.primary {
  background-color: var(--primary);
  animation: pulse-dot-primary 1.6s infinite;
}

.processing-note {
  margin-top: 16px;
  border-radius: 99px;
  padding: 6px 14px;
  background-color: var(--bg-app);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.processing-note i {
  width: 14px;
  height: 14px;
}

/* Animations */
@keyframes glow-pulse {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes pulse-icon {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

@keyframes pulse-dot-warning {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

@keyframes pulse-dot-primary {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(14, 165, 233, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

.flex-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.flex-error i {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Animations */
@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-pulse-slow {
  animation: pulse-slow 2s infinite;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ==========================================================
   LOGIN SCREEN STYLING (Glassmorphism & Gradients)
   ========================================================== */
.login-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
  padding: 24px;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

/* Background glowing decoration */
.login-bg-decor {
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(16, 185, 129, 0.05) 70%);
  filter: blur(40px);
  border-radius: 50%;
  z-index: 1;
  animation: bg-glow-float 10s ease-in-out infinite alternate;
}

@keyframes bg-glow-float {
  0% { transform: translate(-20px, -20px); }
  100% { transform: translate(20px, 20px); }
}

.login-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 16px -6px rgba(0, 0, 0, 0.05);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary), #0284c7);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}

.login-logo i {
  width: 24px;
  height: 24px;
}

.login-card h1 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 0;
  color: #0f172a;
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.form-group select {
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: none;
  transition: var(--transition-smooth);
}

.form-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.input-wrapper input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 42px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  outline: none;
  transition: var(--transition-smooth);
}

.input-wrapper input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.login-btn {
  margin-top: 8px;
  width: 100%;
}

/* ==========================================================
   ADMIN CATALOGS
   ========================================================== */
.admin-container {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.admin-header.compact {
  padding: 20px 28px;
}

.admin-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.admin-header h1 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-main);
}

.admin-header p {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.language-switcher,
.context-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 6px 5px 10px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.language-switcher label,
.context-selector label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.language-switcher select,
.context-selector select {
  min-height: 34px;
  padding: 6px 32px 6px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 650;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.language-switcher select:hover,
.context-selector select:hover {
  border-color: #94a3b8;
  background: #fff;
}

.language-switcher select:focus-visible,
.context-selector select:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .14);
}

.context-selector > i {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex: 0 0 auto;
}

.context-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.context-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
}

.context-select-wrap > i {
  position: absolute;
  right: 9px;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.context-selector--interface {
  margin-left: auto;
  background: #fff;
}

.context-selector--interface select {
  min-width: 128px;
}

.admin-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #065f46;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}

.admin-notice i {
  color: var(--success);
  flex-shrink: 0;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.catalog-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 160px;
  padding: 24px;
  color: inherit;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.catalog-card:hover {
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.catalog-card-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.catalog-card h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 4px;
}

.catalog-card code,
.admin-header code {
  font-family: monospace;
  font-size: 12px;
  padding: 2px 6px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 6px;
}

.catalog-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 12px;
  transition: var(--transition-smooth);
}

.catalog-card:hover .catalog-icon {
  background: var(--primary);
  color: #fff;
}

.catalog-counts {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid var(--border-color);
}
.catalog-open-label { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--primary-hover); font-weight: 700; }
.catalog-open-label i { width: 14px; height: 14px; transition: transform .2s ease; }
.catalog-card:hover .catalog-open-label i { transform: translateX(3px); }

.catalog-counts strong {
  color: var(--text-main);
  margin: 0 2px;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-dot.active {
  background-color: var(--accent-emerald);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.status-dot.inactive {
  background-color: var(--text-muted);
}

.active-count, .inactive-count {
  display: inline-flex;
  align-items: center;
}

.admin-empty {
  grid-column: 1 / -1;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.back-link:hover {
  color: var(--primary-hover);
  transform: translateX(-2px);
}

.admin-toolbar,
.admin-card {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.admin-search {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px auto;
  gap: 16px;
  align-items: center;
}

.search-input-wrap {
  position: relative;
}

.search-input-wrap i {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transform: translateY(-50%);
}

.search-input-wrap input {
  padding-left: 44px;
}

.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.admin-card-header h2 {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-card-header h2 i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.list-headers {
  display: grid;
  grid-template-columns: 140px minmax(200px, 1.2fr) minmax(200px, 1.2fr) 110px 168px;
  gap: 16px;
  align-items: center;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 8px;
}

.list-headers.no-alternative {
  grid-template-columns: 140px minmax(200px, 2.4fr) 110px 168px;
}

.connector-category-headers,
.connector-category-row {
  grid-template-columns: 140px minmax(220px, 1.2fr) minmax(180px, 0.9fr) 110px 168px;
}

.connector-headers,
.connector-row {
  grid-template-columns: 140px minmax(220px, 1.2fr) minmax(240px, 1fr) 110px 168px;
}

.entry-form {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) 110px auto;
  gap: 16px;
  align-items: center;
}

.entry-form.no-alternative {
  grid-template-columns: minmax(200px, 1fr) 110px auto;
}

.connector-category-form {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr) 110px auto;
}

.connector-entry-form {
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 0.9fr) 110px auto;
}

.connector-inline-create {
  grid-template-columns: minmax(220px, 1fr) 110px auto;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.connector-search {
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.6fr) auto;
}

.connector-tree {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.connector-category-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.connector-category-card.is-inactive {
  background: #f8fafc;
}

.connector-category-card-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.connector-category-edit {
  display: grid;
  grid-template-columns: 140px minmax(220px, 1fr) minmax(180px, 0.7fr) 110px 168px;
  gap: 16px;
  align-items: center;
}

.connector-category-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.connector-nested-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connector-nested-row {
  grid-template-columns: 140px minmax(220px, 1fr) minmax(240px, 0.9fr) 110px 168px;
}

.connector-empty-list {
  min-height: 92px;
  padding: 24px;
}

.entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entry-row {
  display: grid;
  grid-template-columns: 140px minmax(200px, 1.2fr) minmax(200px, 1.2fr) 110px 168px;
  gap: 16px;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  transition: var(--transition-smooth);
}

.entry-row.no-alternative {
  grid-template-columns: 140px minmax(200px, 2.4fr) 110px 168px;
}

.entry-row:hover {
  border-color: rgba(14, 165, 233, 0.25);
  box-shadow: var(--shadow-sm);
  background: #fafbfd;
}

.entry-row.is-inactive {
  background: #f8fafc;
  opacity: 0.75;
}

.entry-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entry-id {
  font-family: monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.entry-source-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

.admin-toolbar input,
.admin-toolbar select,
.entry-form input,
.entry-form select {
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: none;
  transition: var(--transition-smooth);
}

.entry-row input {
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  transition: var(--transition-smooth);
}

.connector-category-edit input {
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  transition: var(--transition-smooth);
}

.entry-row select {
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  outline: none;
  transition: var(--transition-smooth);
}

.entry-row input:hover,
.connector-category-edit input:hover {
  background: #f1f5f9;
  border-color: var(--border-color);
}

.entry-row select:hover {
  border-color: rgba(14, 165, 233, 0.35);
}

.entry-row input:focus,
.connector-category-edit input:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.entry-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.admin-toolbar input:focus,
.admin-toolbar select:focus,
.entry-form input:focus,
.entry-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

/* Custom Switch Toggle styling */
.admin-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  gap: 8px;
}

/* Hide default checkbox */
.admin-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* The toggle track */
.admin-checkbox .switch-track {
  position: relative;
  width: 36px;
  height: 18px;
  background-color: #cbd5e1;
  border-radius: 100px;
  transition: var(--transition-smooth);
}

/* The toggle knob */
.admin-checkbox .switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: var(--transition-smooth);
}

/* Active state of the toggle track */
.admin-checkbox input[type="checkbox"]:checked + .switch-track {
  background-color: var(--accent-emerald);
}

/* Move knob on checked state */
.admin-checkbox input[type="checkbox"]:checked + .switch-track::after {
  transform: translateX(18px);
}

/* Focus outline for accessibility */
.admin-checkbox input[type="checkbox"]:focus + .switch-track {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.admin-button {
  min-height: 42px;
  white-space: nowrap;
}

.save-btn {
  border-color: rgba(14, 165, 233, 0.24);
  color: #0369a1;
  background: #f0f9ff;
  padding: 6px 12px;
  font-size: 13px;
  height: 36px;
}

.save-btn:hover {
  border-color: rgba(14, 165, 233, 0.4);
  background: #e0f2fe;
  color: #075985;
}

.entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.delete-btn {
  height: 36px;
  padding: 6px 10px;
  border-color: rgba(239, 68, 68, 0.22);
  color: #b91c1c;
  background: #fff;
  font-size: 13px;
}

.delete-btn:hover {
  border-color: rgba(239, 68, 68, 0.45);
  background: #fef2f2;
  color: #991b1b;
}

.admin-empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-muted);
  background: #f8fafc;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  font-size: 14px;
}

.admin-empty-list i {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
}

/* Hierarchical glossary */
.admin-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -12px;
  color: var(--text-muted);
  font-size: 13px;
}

.admin-breadcrumbs a { color: var(--primary-hover); font-weight: 600; text-decoration: none; }
.admin-breadcrumbs i { width: 14px; height: 14px; }
.admin-header-actions { display: flex; align-items: center; gap: 16px; }
.glossary-toolbar { padding: 16px; }
.glossary-toolbar .ghost-button { text-decoration: none; }

.glossary-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 4px;
}

.glossary-section-heading h2 { font: 700 20px var(--font-heading); }
.glossary-section-heading p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.hierarchy-hint { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; }
.hierarchy-hint i { width: 16px; height: 16px; }

.glossary-tree { gap: 10px; }
.glossary-branch {
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.glossary-branch[open] { border-color: #bae6fd; box-shadow: var(--shadow-md); }
.glossary-branch.is-inactive { background: #f8fafc; }
.glossary-branch > summary {
  display: grid;
  grid-template-columns: 24px 42px minmax(180px, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.glossary-branch > summary::-webkit-details-marker { display: none; }
.glossary-branch > summary:hover { background: #f8fafc; }
.branch-chevron { display: grid; place-items: center; color: var(--text-muted); transition: transform .2s ease; }
.branch-chevron i { width: 18px; height: 18px; }
.glossary-branch[open] .branch-chevron { transform: rotate(90deg); }
.branch-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--primary-hover); background: var(--primary-light); border-radius: 10px; }
.branch-icon i { width: 20px; height: 20px; }
.glossary-branch[open] .branch-icon i { fill: rgba(14, 165, 233, .15); }
.branch-title { display: flex; flex-direction: column; min-width: 0; }
.branch-title strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.branch-title > span { color: var(--text-muted); font-size: 11px; }
.branch-count { min-width: 92px; color: var(--text-main); font-size: 13px; font-weight: 700; text-align: right; }
.branch-count span { color: var(--text-muted); font-weight: 500; }
.branch-actions { display: flex; gap: 6px; }
.icon-action {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.icon-action:hover { color: var(--primary-hover); background: var(--primary-light); border-color: #bae6fd; }
.icon-action i { width: 17px; height: 17px; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-pill.is-active { color: #047857; background: #ecfdf5; }
.status-pill.is-inactive { color: #64748b; background: #e2e8f0; }
.branch-body { padding: 0 18px 18px 80px; border-top: 1px solid var(--border-color); }
.branch-body-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; color: var(--text-muted); font-size: 12px; }
.text-action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: var(--primary-hover); background: transparent; border: 0; border-radius: 7px; font: 600 12px var(--font-body); cursor: pointer; }
.text-action:hover { background: var(--primary-light); }
.text-action i { width: 15px; height: 15px; }
.glossary-items { display: flex; flex-direction: column; gap: 5px; }
.glossary-item { display: grid; grid-template-columns: 26px minmax(180px, 1fr) auto 38px; gap: 10px; align-items: center; min-height: 54px; padding: 7px 8px; border-radius: 9px; }
.glossary-item:hover { background: #f8fafc; }
.glossary-item.is-inactive { opacity: .68; }
.item-node { color: #94a3b8; }
.item-node i { width: 17px; height: 17px; }
.item-name { display: flex; flex-direction: column; }
.item-name strong { font-size: 14px; font-weight: 600; }
.item-name small { color: var(--text-muted); font-size: 10px; }

.admin-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--text-main);
  background: transparent;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
}
.admin-dialog::backdrop { background: rgba(15, 23, 42, .48); backdrop-filter: blur(3px); }
.dialog-card { padding: 0; background: #fff; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 24px 18px; border-bottom: 1px solid var(--border-color); }
.dialog-header h2 { font: 700 22px var(--font-heading); }
.dialog-header p { margin-top: 3px; color: var(--text-muted); font-size: 13px; }
.dialog-close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; color: var(--text-muted); background: #f8fafc; border: 1px solid var(--border-color); border-radius: 9px; cursor: pointer; }
.dialog-close:hover { color: var(--text-main); background: #f1f5f9; }
.dialog-close i { width: 18px; height: 18px; }
.dialog-fields { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px; }
.dialog-fields > label:not(.admin-checkbox) { display: flex; flex-direction: column; gap: 6px; color: var(--text-main); font-size: 13px; font-weight: 700; }
.dialog-fields label small { color: var(--text-muted); font-weight: 400; }
.dialog-fields input:not([type=checkbox]), .dialog-fields select, .dialog-fields textarea { width: 100%; min-height: 44px; padding: 9px 12px; color: var(--text-main); background: #fff; border: 1px solid var(--border-color); border-radius: 9px; font: 14px var(--font-body); outline: none; }
.dialog-fields input:focus, .dialog-fields select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, .12); }
.dialog-switch { min-height: 36px; }
.dialog-warning { display: flex; gap: 9px; margin: -4px 24px 20px; padding: 10px 12px; color: #475569; background: #f8fafc; border-radius: 8px; font-size: 12px; }
.dialog-warning.import-warning { margin-top: 22px; }
.dialog-warning i { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color); }
.dialog-footer.split { display: grid; grid-template-columns: auto 1fr auto auto; }
.dialog-footer button { min-height: 40px; }
.card-subtitle { margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.glossary-list-card { padding: 0; overflow: hidden; }
.glossary-list-card .admin-card-header { margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--border-color); }
.simple-glossary-list { display: flex; flex-direction: column; }
.simple-glossary-item { display: grid; grid-template-columns: 38px minmax(180px, 1fr) auto 38px; gap: 12px; align-items: center; min-height: 68px; padding: 8px 18px; border-bottom: 1px solid #f1f5f9; }
.simple-glossary-item:last-child { border-bottom: 0; }
.simple-glossary-item:hover { background: #f8fafc; }
.simple-glossary-item.is-inactive { opacity: .68; background: #f8fafc; }
.catalog-list-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--primary-hover); background: var(--primary-light); border-radius: 8px; }
.catalog-list-icon i { width: 17px; height: 17px; }

/* Prompt laboratory */
.prompt-lab-overview { display: grid; grid-template-columns: 150px 170px minmax(280px, 1fr); gap: 12px; }
.lab-stat, .lab-model-pool { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 16px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-sm); }
.lab-stat > i { width: 20px; color: var(--primary); }
.lab-stat span { display: flex; flex-direction: column; color: var(--text-muted); font-size: 11px; }
.lab-stat strong { color: var(--text-main); font-size: 20px; line-height: 1; }
.lab-model-pool { flex-wrap: wrap; }
.lab-model-pool > span { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.lab-model-pool i { width: 16px; }
.lab-model-pool code, .model-chip { padding: 3px 7px; color: #6d28d9; background: #f5f3ff; border-radius: 6px; font-size: 10px; }
.prompt-rule-tree { display: flex; flex-direction: column; gap: 9px; }
.prompt-rule-branch { overflow: hidden; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-sm); }
.prompt-rule-branch[open] { border-color: #c4b5fd; box-shadow: var(--shadow-md); }
.prompt-rule-branch > summary { display: grid; grid-template-columns: 24px 42px minmax(220px, 1fr) auto auto 38px; gap: 13px; align-items: center; min-height: 74px; padding: 11px 16px; cursor: pointer; list-style: none; }
.prompt-rule-branch > summary::-webkit-details-marker { display: none; }
.prompt-rule-branch > summary:hover { background: #fafafa; }
.prompt-rule-branch[open] .branch-chevron { transform: rotate(90deg); }
.prompt-rule-branch .branch-icon { color: #7c3aed; background: #f5f3ff; }
.prompt-rule-body { padding: 8px 16px 16px 78px; border-top: 1px solid var(--border-color); }
.prompt-variant-row { display: grid; grid-template-columns: 34px minmax(190px, 1fr) minmax(120px, auto) auto auto; gap: 10px; align-items: center; min-height: 62px; padding: 7px 8px; border-bottom: 1px solid #f1f5f9; }
.prompt-variant-row:last-child { border-bottom: 0; }
.prompt-variant-row:hover { background: #fafafa; }
.prompt-variant-row.is-active { background: #f0fdf4; }
.prompt-version-icon { display: grid; place-items: center; width: 32px; height: 32px; color: #7c3aed; background: #f5f3ff; border-radius: 8px; }
.prompt-version-icon i { width: 16px; }
.prompt-row-actions { display: flex; justify-content: flex-end; gap: 3px; }
.prompt-row-actions form { display: contents; }
.publish-action { color: #047857; }
.lab-test-action { color: #7c3aed; }
.compact-empty { min-height: 110px; padding: 20px; }
.prompt-dialog { width: min(900px, calc(100vw - 32px)); }
.prompt-dialog-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; }
.prompt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prompt-editor-field textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; }
.prompt-advanced-panel { background: #f8fafc; border: 1px solid var(--border-color); border-radius: 10px; }
.prompt-advanced-panel > summary { display: flex; align-items: center; gap: 7px; padding: 10px 12px; color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 700; }
.prompt-advanced-panel > summary i { width: 15px; }
.editorial-domain-tree { display: flex; flex-direction: column; gap: 10px; }
.editorial-types-body { padding-left: 80px; }
.editorial-type-item { display: grid; grid-template-columns: 24px 38px minmax(180px, 1fr) auto auto; gap: 10px; align-items: center; min-height: 60px; padding: 7px 8px; color: inherit; text-decoration: none; border-radius: 9px; }
.editorial-type-item:hover { background: #f8fafc; }
.editorial-type-item.is-inactive { opacity: .65; }
.open-structure-label { display: inline-flex; align-items: center; gap: 5px; color: var(--primary-hover); font-size: 11px; font-weight: 700; }
.open-structure-label i { width: 14px; }
.dialog-two-fields { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 12px; }
.dialog-two-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.editorial-structure-tree { display: flex; flex-direction: column; gap: 10px; }
.structure-tree-section { overflow: hidden; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-sm); }
.structure-tree-section[open] { border-color: #bae6fd; box-shadow: var(--shadow-md); }
.structure-tree-section.is-inactive, .content-tree-node.is-inactive, .phraseology-tree-item.is-inactive { opacity: .65; }
.structure-tree-section > summary { display: grid; grid-template-columns: 24px 42px minmax(200px, 1fr) auto auto auto; gap: 13px; align-items: center; min-height: 76px; padding: 11px 17px; cursor: pointer; list-style: none; }
.structure-tree-section > summary::-webkit-details-marker, .content-tree-node > summary::-webkit-details-marker { display: none; }
.structure-tree-section[open] > summary .branch-chevron, .content-tree-node[open] > summary .branch-chevron { transform: rotate(90deg); }
.structure-tree-body { display: flex; flex-direction: column; gap: 7px; padding: 0 17px 17px 78px; border-top: 1px solid var(--border-color); }
.content-tree-node { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 10px; }
.content-tree-node > summary { display: grid; grid-template-columns: 22px 32px minmax(180px, 1fr) auto auto; gap: 10px; align-items: center; min-height: 58px; padding: 7px 10px; cursor: pointer; list-style: none; }
.content-tree-node > summary:hover { background: #f8fafc; }
.content-node-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #7c3aed; background: #f5f3ff; border-radius: 7px; }
.content-node-icon i { width: 15px; }
.phraseology-tree-list { display: flex; flex-direction: column; gap: 5px; padding: 7px 10px 10px 63px; background: #fafafa; border-top: 1px solid var(--border-color); }
.phraseology-tree-item { display: grid; grid-template-columns: 20px minmax(180px, 1fr) auto 34px; gap: 8px; align-items: center; min-height: 46px; padding: 5px 7px; background: #fff; border: 1px solid #f1f5f9; border-radius: 8px; }
.phraseology-tree-item > i { width: 15px; color: #94a3b8; }
.phraseology-tree-item > span { font-size: 12px; }
.phraseology-tree-item > small { color: var(--text-muted); font-size: 9px; }
.tree-empty { padding: 16px; color: var(--text-muted); font-size: 12px; text-align: center; }
.lab-test-fragment { padding: 16px; color: #334155; background: #f8fafc; border-left: 4px solid #8b5cf6; border-radius: 0 10px 10px 0; white-space: pre-wrap; }
.lab-test-alternatives { display: flex; flex-direction: column; gap: 10px; }
.lab-test-alternatives article { padding: 14px 16px; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 10px; }
.lab-test-alternatives article strong { color: #4c1d95; }
.lab-test-alternatives article p { margin-top: 5px; color: #475569; font-size: 12px; }
.lab-test-alternatives article small { color: #7c3aed; font-size: 10px; }
.lab-interaction-id { color: var(--text-muted); font-size: 11px; text-align: right; }
/* --- API Dashboard: pestañas reales --- */
.api-ops-page .api-tabs { position: sticky; top: 70px; z-index: 5; display: flex; gap: 4px; margin: 0 0 18px; padding: 5px; overflow-x: auto; background: rgba(255,255,255,.94); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); }
.api-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; color: var(--text-muted); border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.api-tab i { width: 15px; height: 15px; }
.api-tab:hover { color: var(--primary-hover); background: var(--primary-light); }
.api-tab.is-active { color: var(--primary); background: var(--primary-light); box-shadow: inset 0 -2px 0 var(--primary); }
.period-switcher { white-space: nowrap; }
.api-panel { display: flex; flex-direction: column; gap: 14px; }

/* KPIs con tendencia */
.ops-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: #fff; border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-sm); }
.kpi-label { color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kpi-value { font: 700 27px/1 var(--font-heading); color: #0f172a; }
.kpi-value em { font: 500 14px var(--font-body); font-style: normal; color: var(--text-muted); }
.kpi-trend { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.kpi-trend i { width: 14px; height: 14px; }
.kpi-trend small { color: var(--text-muted); font-weight: 500; }
.kpi-trend.is-good { color: #047857; }
.kpi-trend.is-bad { color: #b91c1c; }
.kpi-trend.is-flat { color: var(--text-muted); }

/* Gráfico diario */
.daily-chart-card .daily-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 8px 4px 0; }
.daily-bar { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 14px; height: 100%; }
.daily-bar-fill { width: min(28px, 78%); min-height: 5px; background: linear-gradient(180deg, #38bdf8, #0284c7); border-radius: 6px 6px 3px 3px; transition: filter .15s; }
.daily-bar:hover .daily-bar-fill { filter: brightness(1.08); }
.daily-bar-count { margin-top: 5px; color: #0f172a; font-size: 10px; font-weight: 700; }
.daily-bar small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }

/* Rank lists con barra de proporción */
.ops-rank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rank-list { display: flex; flex-direction: column; gap: 4px; }
.rank-row { display: grid; grid-template-columns: minmax(0,1fr) 64px 34px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
.rank-row:last-child { border-bottom: 0; }
.rank-name { overflow: hidden; color: #334155; text-overflow: ellipsis; white-space: nowrap; }
.rank-meter { height: 6px; background: #eef2f7; border-radius: 4px; overflow: hidden; }
.rank-meter b { display: block; height: 100%; background: linear-gradient(90deg, #7dd3fc, #0ea5e9); border-radius: 4px; }
.rank-value { font-weight: 700; text-align: right; color: #0f172a; }

/* Reglas a ancho completo */
.rules-toolbar { padding: 0 0 12px; }
.rules-search { display: flex; align-items: center; gap: 8px; max-width: 360px; padding: 8px 12px; background: #f8fafc; border: 1px solid var(--border-color); border-radius: 9px; }
.rules-search i { width: 16px; height: 16px; color: var(--text-muted); }
.rules-search input { flex: 1; border: 0; background: transparent; font-size: 13px; outline: none; }
.rule-list { display: flex; flex-direction: column; }
.rule-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid #f1f5f9; }
.rule-item:last-of-type { border-bottom: 0; }
.rule-item:hover { background: #f8fafc; }
.rule-item .switch-label { min-width: 58px; font-size: 12px; color: var(--text-muted); }
.rules-empty { padding: 20px; }

/* Linguistic rule catalog */
.linguistic-catalog-page { max-width: 1180px; }
.rules-hero { align-items: center; background: linear-gradient(135deg,#fff 0%,#f8fbff 100%); }
.rules-hero-copy { max-width: 650px; }
.rules-language-context { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 390px; }
.rules-language-context label { display: flex; flex-direction: column; gap: 5px; color: #64748b; font-size: 11px; font-weight: 700; }
.rules-language-context select { min-height: 42px; padding: 8px 34px 8px 11px; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 9px; font: 650 13px var(--font-body); cursor: pointer; }
.rules-language-context select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,.12); outline: 0; }
.rules-overview { display: grid; grid-template-columns: 190px 190px minmax(280px,1fr); gap: 10px; }
.rules-overview article,.rules-overview>p { display: flex; align-items: center; gap: 11px; min-height: 70px; padding: 12px 15px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-sm); }
.rules-overview article>span:last-child { display: flex; flex-direction: column; }
.rules-overview strong { color: #0f172a; font-size: 17px; }
.rules-overview small { margin-top: 2px; color: #64748b; font-size: 10.5px; }
.overview-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; color: #0369a1; background: #e0f2fe; border-radius: 9px; }
.overview-icon.is-neutral { color: #6d28d9; background: #f5f3ff; }
.overview-icon i { width: 18px; }
.rules-overview>p { color: #475569; background: #f8fafc; box-shadow: none; font-size: 11.5px; line-height: 1.45; }
.rules-overview>p>i { flex: 0 0 17px; width: 17px; color: var(--primary); }
.rules-workspace { overflow: hidden; background: #fff; border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow-sm); }
.rules-section-tabs { display: flex; gap: 4px; padding: 8px 8px 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); }
.rules-section-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 17px; color: #64748b; background: transparent; border: 0; border-radius: 9px 9px 0 0; font: 650 13px var(--font-body); cursor: pointer; }
.rules-section-tabs button:hover { color: #0369a1; background: #f0f9ff; }
.rules-section-tabs button.is-active { color: #0369a1; background: #fff; box-shadow: 0 -1px 0 var(--border-color),1px 0 0 var(--border-color),-1px 0 0 var(--border-color); }
.rules-section-tabs button.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ''; background: #fff; }
.rules-section-tabs i { width: 17px; }
.rules-section-tabs b { min-width: 23px; padding: 2px 6px; color: #475569; background: #e2e8f0; border-radius: 999px; font-size: 10px; }
.rules-section-tabs .is-active b { color: #0369a1; background: #e0f2fe; }
.rules-workspace>.rules-toolbar { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border-color); }
.rules-search-field { position: relative; flex: 1; max-width: 430px; }
.rules-search-field>i { position: absolute; top: 50%; left: 12px; width: 16px; color: #94a3b8; transform: translateY(-50%); }
.rules-search-field input { width: 100%; min-height: 40px; padding: 8px 12px 8px 38px; border: 1px solid #cbd5e1; border-radius: 9px; font: 13px var(--font-body); outline: 0; }
.rules-search-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,.1); }
.rules-state-filter { display: flex; gap: 3px; padding: 3px; background: #f1f5f9; border-radius: 9px; }
.rules-state-filter button { padding: 6px 10px; color: #64748b; background: transparent; border: 0; border-radius: 7px; font: 650 11px var(--font-body); cursor: pointer; }
.rules-state-filter button.is-active { color: #0f172a; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.rules-visible-count { margin-left: auto; color: #64748b; font-size: 11px; white-space: nowrap; }
.rule-catalog-panel { padding: 0 18px 20px; }
.rule-panel-intro { display: flex; align-items: center; justify-content: space-between; padding: 17px 2px 11px; }
.rule-panel-intro h2 { color: #0f172a; font-size: 16px; }
.rule-panel-intro p { margin-top: 2px; color: #64748b; font-size: 11.5px; }
.linguistic-rule-list { display: flex; flex-direction: column; gap: 7px; }
.linguistic-rule-card { display: grid; grid-template-columns: 42px minmax(0,1fr) 190px; gap: 13px; align-items: center; min-height: 98px; padding: 13px 14px; border: 1px solid #e2e8f0; border-radius: 12px; transition: border-color .15s,box-shadow .15s,opacity .15s; }
.linguistic-rule-card:hover { border-color: #bae6fd; box-shadow: 0 5px 18px rgba(15,23,42,.055); }
.linguistic-rule-card.is-inactive { background: #fafafa; }
.linguistic-rule-card[hidden] { display: none; }
.rule-card-icon { display: grid; place-items: center; align-self: start; width: 40px; height: 40px; color: #0369a1; background: #e0f2fe; border-radius: 10px; }
.rule-card-icon.is-metric { color: #6d28d9; background: #f5f3ff; }
.rule-card-icon i { width: 19px; }
.is-inactive .rule-card-icon { color: #64748b; background: #e2e8f0; }
.rule-card-copy { min-width: 0; }
.rule-card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.rule-card-heading h3 { color: #0f172a; font: 700 14px/1.3 var(--font-heading); }
.rule-category { padding: 2px 7px; color: #475569; background: #f1f5f9; border-radius: 999px; font-size: 9.5px; text-transform: capitalize; }
.rule-card-copy>p { display: -webkit-box; margin-top: 5px; overflow: hidden; color: #475569; font-size: 11.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rule-card-meta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 8px; color: #64748b; font-size: 9.5px; }
.rule-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.rule-card-meta i { width: 12px; }
.rule-card-meta .is-warning { color: #a16207; }
.rule-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding-left: 13px; border-left: 1px solid #f1f5f9; }
.rule-status-switch { display: flex; align-items: center; gap: 9px; min-height: 38px; cursor: pointer; }
.rule-status-copy { display: flex; flex-direction: column; }
.rule-status-copy strong { color: #047857; font-size: 11.5px; }
.rule-status-copy small { color: #64748b; font-size: 9px; }
.is-inactive .rule-status-copy strong { color: #64748b; }
.rule-edit-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; color: #0369a1; background: #fff; border: 1px solid #bae6fd; border-radius: 8px; font: 650 10.5px var(--font-body); cursor: pointer; }
.rule-edit-button:hover { background: #f0f9ff; }
.rule-edit-button i { width: 14px; }
.rules-empty-state { padding: 55px 20px; color: #64748b; text-align: center; }
.rules-empty-state i { width: 30px; margin-bottom: 8px; color: #94a3b8; }
.rules-empty-state h3 { color: #334155; font-size: 15px; }
.rules-empty-state p { margin-top: 3px; font-size: 11.5px; }
.rule-editor-dialog { width: min(720px,calc(100vw - 32px)); }
.rule-editor-summary { display: flex; align-items: center; gap: 9px; padding: 11px 24px; color: #64748b; background: #f8fafc; border-bottom: 1px solid var(--border-color); font-size: 10.5px; text-transform: capitalize; }
.rule-editor-summary code { margin-left: auto; font-size: 9.5px; text-transform: none; }
.rule-editor-fields textarea { resize: vertical; line-height: 1.45; }
.rule-editor-fields label>small { line-height: 1.35; }
.rule-technical-fields { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 9px; }
.rule-technical-fields>summary { display: flex; align-items: center; gap: 7px; padding: 11px 12px; color: #475569; background: #f8fafc; font-size: 11.5px; font-weight: 700; cursor: pointer; list-style: none; }
.rule-technical-fields>summary::-webkit-details-marker { display: none; }
.rule-technical-fields>summary i { width: 15px; color: #64748b; }
.rule-technical-fields>div { display: flex; flex-direction: column; gap: 16px; padding: 15px; border-top: 1px solid #e2e8f0; }
.rule-technical-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; }
.rule-technical-fields p { color: #64748b; font-size: 10px; }
.code-field { font: 10.5px/1.45 monospace !important; }

@media(max-width:800px){.rules-hero{align-items:stretch;flex-direction:column}.rules-language-context{min-width:0}.rules-overview{grid-template-columns:1fr 1fr}.rules-overview>p{grid-column:1/-1}.linguistic-rule-card{grid-template-columns:38px minmax(0,1fr)}.rule-card-actions{grid-column:2;padding:9px 0 0;border-top:1px solid #f1f5f9;border-left:0;flex-direction:row}.rule-card-actions>*{flex:1}.rules-workspace>.rules-toolbar{flex-wrap:wrap}.rules-search-field{max-width:none;flex-basis:100%}.rules-visible-count{display:none}}
@media(max-width:520px){.rules-language-context,.rules-overview{grid-template-columns:1fr}.rules-overview>p{grid-column:auto}.rules-section-tabs button{flex:1;justify-content:center;padding:0 8px}.rules-section-tabs button span{font-size:11px}.rule-catalog-panel{padding-right:10px;padding-left:10px}.linguistic-rule-card{padding:11px 9px}.rule-card-actions{flex-direction:column}.rule-card-meta{gap:6px}.rules-state-filter{width:100%}.rules-state-filter button{flex:1}}

/* Actividad */
.ops-event-list { display: flex; flex-direction: column; }
.ops-event-row { display: grid; grid-template-columns: 20px 48px minmax(200px,1fr) 75px 36px; gap: 10px; align-items: center; min-height: 58px; padding: 7px 8px; border-bottom: 1px solid #f1f5f9; }
.ops-event-row:hover { background: #f8fafc; }
.event-duration { font-size: 12px; color: var(--text-muted); text-align: right; }
.http-status { padding: 3px 5px; text-align: center; border-radius: 5px; font: 700 10px monospace; }
.status-2xx { color:#047857;background:#ecfdf5 }.status-4xx,.status-5xx { color:#b91c1c;background:#fef2f2 }.status-3xx { color:#b45309;background:#fffbeb }

/* Configuración */
.retention-form { display:grid;grid-template-columns:minmax(180px,1fr) 130px auto;gap:12px;align-items:end }
.danger-card { border-color: #fed7aa; }
.danger-action-bar { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#fff7ed;border-radius:10px;color:#9a3412;font-size:12px }
.danger-action-bar form { margin: 0; }

.api-key-reveal { display:flex;align-items:center;gap:14px;padding:14px 18px;color:#065f46;background:#ecfdf5;border:1px solid #6ee7b7;border-radius:12px }
.api-key-reveal > i { width:24px }.api-key-reveal > div { display:flex;flex:1;flex-direction:column }.api-key-reveal code { margin-top:4px;padding:5px 8px;overflow-wrap:anywhere;background:#fff;border-radius:6px }
.trace-payload { max-height:420px;padding:14px;overflow:auto;background:#0f172a;color:#e2e8f0;border-radius:10px;font-size:11px;white-space:pre-wrap }
.trace-timeline { display:flex;flex-direction:column;gap:9px }.trace-timeline article { display:grid;grid-template-columns:24px minmax(180px,1fr) minmax(200px,1fr);gap:10px;align-items:start;padding:10px;border-left:2px solid #bae6fd }.trace-timeline i { width:17px;color:#0ea5e9 }.trace-timeline span { display:flex;flex-direction:column }.trace-timeline small { color:var(--text-muted);font-size:10px }.trace-timeline code { font-size:10px;overflow-wrap:anywhere }
@media(max-width:768px){.ops-kpis{grid-template-columns:1fr 1fr}.ops-rank-grid{grid-template-columns:1fr}.ops-event-row{grid-template-columns:18px 44px minmax(0,1fr) 32px}.ops-event-row>.event-duration{display:none}.retention-form{grid-template-columns:1fr}.danger-action-bar{align-items:stretch;flex-direction:column}.rule-item{flex-wrap:wrap;gap:8px}.trace-timeline article{grid-template-columns:20px 1fr}.trace-timeline code{grid-column:2}}

@media (max-width: 768px) {
  .admin-header-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .admin-header-actions .language-switcher { justify-content: space-between; }
  .glossary-section-heading { align-items: flex-start; flex-direction: column; }
  .hierarchy-hint { display: none; }
  .glossary-branch > summary { grid-template-columns: 20px 38px minmax(0, 1fr) auto; gap: 9px; min-height: 70px; padding: 10px 12px; }
  .branch-count { grid-column: 3; min-width: 0; text-align: left; }
  .branch-count span { display: inline; }
  .glossary-branch > summary > .status-pill { display: none; }
  .branch-actions { grid-column: 4; grid-row: 1 / span 2; }
  .branch-actions .icon-action:first-child { display: none; }
  .branch-body { padding: 0 10px 12px 34px; }
  .glossary-item { grid-template-columns: 20px minmax(0, 1fr) 34px; }
  .glossary-item > .status-pill { display: none; }
  .simple-glossary-item { grid-template-columns: 34px minmax(0, 1fr) 34px; padding: 8px 12px; }
  .simple-glossary-item > .status-pill { display: none; }
  .prompt-lab-overview { grid-template-columns: 1fr 1fr; }
  .lab-model-pool { grid-column: 1 / -1; }
  .prompt-rule-branch > summary { grid-template-columns: 20px 36px minmax(0, 1fr) 34px; gap: 8px; padding: 10px; }
  .prompt-rule-branch > summary .branch-count, .prompt-rule-branch > summary .status-pill { display: none; }
  .prompt-rule-body { padding: 6px 8px 10px 34px; }
  .prompt-variant-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .prompt-variant-row .model-chip, .prompt-variant-row > .status-pill { display: none; }
  .prompt-row-actions { grid-column: 2 / -1; }
  .prompt-form-grid { grid-template-columns: 1fr; }
  .editorial-types-body { padding-left: 34px; }
  .editorial-type-item { grid-template-columns: 20px 34px minmax(0, 1fr) 30px; }
  .editorial-type-item > .status-pill { display: none; }
  .open-structure-label { font-size: 0; }
  .structure-tree-section > summary { grid-template-columns: 20px 36px minmax(0, 1fr) 34px; gap: 8px; padding: 10px; }
  .structure-tree-section > summary .branch-count, .structure-tree-section > summary .status-pill { display: none; }
  .structure-tree-body { padding: 0 8px 10px 34px; }
  .content-tree-node > summary { grid-template-columns: 18px 30px minmax(0, 1fr) auto; }
  .content-tree-node > summary .branch-count { display: none; }
  .phraseology-tree-list { padding-left: 34px; }
  .phraseology-tree-item { grid-template-columns: 18px minmax(0, 1fr) 32px; }
  .phraseology-tree-item > small { display: none; }
  .dialog-header, .dialog-fields, .dialog-footer { padding-left: 18px; padding-right: 18px; }
  .dialog-footer.split { grid-template-columns: auto 1fr auto; }
  .dialog-footer.split > span { display: none; }
  .dialog-footer.split .ghost-button:not(.delete-btn) { display: none; }
}

/* ==========================================================
   RESPONSIVE LAYOUT MEDIA QUERIES
   ========================================================== */
@media (max-width: 1200px) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }
  
  .analysis-form-card {
    position: static;
  }
  
  .report-workspace {
    grid-template-columns: 1fr;
  }
  
  .suggestions-card {
    position: static;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .shell {
    padding: 16px;
  }
  
  .topbar {
    padding: 0 16px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .result-metrics {
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
  }
  .result-metrics .metric-chip {
    flex: 1 1 40%;
    justify-content: center;
  }
  .result-metrics .metric-chip:nth-child(odd) {
    border-left: 0;
  }
  .result-metrics .metric-chip:nth-child(n + 3) {
    border-top: 1px solid var(--border-color);
  }

  .api-grid {
    grid-template-columns: 1fr;
  }
  
  .login-card {
    padding: 24px;
  }

  .admin-header,
  .admin-search,
  .entry-form,
  .entry-row,
  .connector-category-form,
  .connector-category-row,
  .connector-category-edit,
  .connector-inline-create,
  .connector-entry-form,
  .connector-nested-row,
  .connector-row,
  .connector-search {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-header {
    flex-direction: column;
  }

  .analysis-form-card.is-collapsed { min-height: 62px; padding: 10px 12px; }
  .analysis-config-summary { gap: 8px; }
  .analysis-config-summary > .status-pill { display: none; }
  .config-summary-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .config-edit-button span { display: none; }
  .config-edit-button { width: 38px; padding: 0; }

  .result-header {
    align-items: stretch;
    flex-direction: column;
  }

  .pdf-download-btn {
    width: 100%;
  }
}

/* Public arText product */
/* Public arText product & Landing Page */
.public-shell.landing-page {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 12px 0 40px;
}

/* Background glows for a tech mesh effect */
.glow-bg {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, rgba(16, 185, 129, 0.05) 50%, transparent 100%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.glow-1 {
  top: -100px;
  right: -50px;
}

.glow-2 {
  bottom: 200px;
  left: -150px;
}

.product-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  min-height: 520px;
  padding: 48px;
  background: radial-gradient(100% 100% at 0% 0%, rgba(255, 255, 255, 0.9) 0%, #ffffff 100%);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 24px;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
  position: relative;
  overflow: hidden;
}

/* Background grid details for hero */
.product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#cbd5e1 0.75px, transparent 0.75px);
  background-size: 24px 24px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.product-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  z-index: 1;
}

.eyebrow-capsule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: 99px;
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.eyebrow-icon {
  width: 14px;
  height: 14px;
}

.product-hero h1 {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.product-hero p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 580px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-decoration: none;
  min-height: 48px;
}

.hero-actions .primary-btn {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.hero-actions .primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}

.hero-actions .secondary-btn {
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.hero-actions .secondary-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

/* Hero Panel (macOS Window style) */
.hero-panel-wrapper {
  position: relative;
  width: 100%;
  z-index: 1;
}

.hero-panel-shadow {
  position: absolute;
  inset: 12px -12px -12px 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
  filter: blur(20px);
  border-radius: 20px;
  z-index: 0;
  opacity: 0.8;
}

.hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  z-index: 1;
}

.hero-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
}

.window-controls {
  display: flex;
  gap: 6px;
}

.window-controls .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.window-controls .red { background-color: #ef4444; }
.window-controls .yellow { background-color: #f59e0b; }
.window-controls .green { background-color: #10b981; }

.window-title {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-muted);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 99px;
  color: #065f46;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.status-dot-blink {
  width: 6px;
  height: 6px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  animation: blink 2s infinite ease-in-out;
}

@keyframes blink {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.hero-editor-preview {
  display: flex;
  gap: 16px;
  padding: 20px;
  min-height: 180px;
  font-size: 14px;
  line-height: 1.7;
}

.editor-lines {
  display: flex;
  flex-direction: column;
  color: #94a3b8;
  font-family: monospace;
  font-size: 12px;
  user-select: none;
  text-align: right;
  gap: 12px;
}

.editor-text {
  flex: 1;
  color: #334155;
}

.editor-text p {
  margin-bottom: 12px;
  font-size: 14px !important;
}

.suggestion-highlight {
  padding: 1px 3px;
  border-radius: 4px;
  cursor: help;
  position: relative;
}

.highlight-yellow {
  background: rgba(245, 158, 11, 0.15);
  border-bottom: 2.5px solid #f59e0b;
}

.highlight-purple {
  background: rgba(139, 92, 246, 0.15);
  border-bottom: 2.5px solid #8b5cf6;
}

/* Floating suggestions preview widget inside hero */
.hero-suggestion-preview-floating {
  display: flex;
  gap: 12px;
  margin: 0 16px 16px;
  padding: 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.05);
}

.suggestion-icon-wrapper {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  color: var(--primary);
  flex-shrink: 0;
}

.suggestion-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suggestion-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.suggestion-header strong {
  font-size: 13px;
  color: #1e3a8a;
  font-weight: 700;
}

.suggestion-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border-radius: 99px;
  text-transform: uppercase;
}

.suggestion-desc {
  font-size: 12px;
  color: #1e293b;
  line-height: 1.5;
}

/* Route Grid Section */
.route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.route-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 36px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: var(--transition-smooth);
}

/* Glow lines overlay on hover */
.route-card-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  transition: var(--transition-smooth);
}

.route-card-clear .route-card-decor {
  background: linear-gradient(90deg, #0ea5e9, #10b981);
  opacity: 0;
}

.route-card-specialized .route-card-decor {
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  opacity: 0;
}

.route-card:hover {
  transform: translateY(-6px);
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

.route-card:hover .route-card-decor {
  opacity: 1;
}

.route-card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.route-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  transition: var(--transition-smooth);
}

.route-card-clear .route-icon {
  background: rgba(14, 165, 233, 0.08);
  color: #0ea5e9;
}

.route-card-specialized .route-icon {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}

.route-card:hover .route-icon {
  transform: scale(1.08) rotate(5deg);
}

.route-card-clear:hover .route-icon {
  background: #0ea5e9;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.route-card-specialized:hover .route-icon {
  background: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.route-card h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.route-card p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.route-link-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-weight: 700;
  font-size: 14px;
  transition: var(--transition-smooth);
}

.route-card-clear .route-link-text {
  color: #0ea5e9;
}

.route-card-specialized .route-link-text {
  color: #8b5cf6;
}

.route-card span i {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.route-card:hover .route-link-text i {
  transform: translateX(4px);
}

/* Features Grid Section */
.features-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px 0;
}

.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 680px;
  margin: 0 auto;
}

.section-title h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.section-title p {
  color: var(--text-muted);
  font-size: 15px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
  transition: var(--transition-smooth);
}

.feature-item:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 165, 233, 0.2);
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.04);
}

.feature-icon-box {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 18px;
}

.feature-icon-box.blue {
  background: rgba(14, 165, 233, 0.08);
  color: #0ea5e9;
}

.feature-icon-box.emerald {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
}

.feature-icon-box.purple {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}

.feature-icon-box.orange {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}

.feature-item h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}

.feature-item p {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Product Band (Stats metrics section) */
.product-band {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  padding: 40px 48px;
  background: linear-gradient(135deg, #0b1329 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2);
  align-items: center;
}

.band-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.band-tag {
  color: #10b981;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.product-band h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

.product-band p {
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.6;
}

.band-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-align: center;
  transition: var(--transition-smooth);
}

.metric-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(14, 165, 233, 0.25);
  transform: translateY(-2px);
}

.metric-num {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: #38bdf8;
  line-height: 1;
}

.metric-label {
  font-size: 11px;
  color: #cbd5e1;
  font-weight: 500;
  line-height: 1.3;
}

/* Shared Catalog and Editor layout elements */
.catalog-heading h1 {
  font-family: var(--font-heading);
  font-size: 58px;
  line-height: 1;
  letter-spacing: 0;
}

.catalog-heading p {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.7;
}

.domain-card-header,
.text-type-link,
.text-type-admin-row,
.editor-output-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.text-type-domain-card,
.editor-document-card,
.editor-preview-card {
  color: inherit;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.text-type-domain-card:hover,
.text-type-link:hover,
.text-type-admin-row:hover {
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.domain-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 12px;
}

.text-type-domain-card h2,
.editor-structure-panel h1,
.structure-head h1 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.2;
}

/* Public Catalog Design System */
.catalog-shell {
  max-width: 1200px !important;
  margin: 0 auto;
  position: relative;
}

.catalog-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0 32px;
}

.catalog-heading .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: var(--transition-smooth);
  margin-bottom: 8px;
}

.catalog-heading .back-link:hover {
  color: var(--text-main);
  background: rgba(15, 23, 42, 0.06);
  transform: translateX(-2px);
}

.catalog-heading h1 {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

.catalog-heading p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 600px;
}

/* 2-column layout for single domain (e.g. Lenguaje Claro) */
.single-domain-container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: start;
}

.single-domain-main {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}

/* Accent decorative top border on cards */
.domain-card-decor {
  height: 4px;
  background: linear-gradient(90deg, #0ea5e9, #10b981);
  width: 100%;
}

.single-domain-card {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.single-domain-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.domain-icon-large {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(16, 185, 129, 0.1));
  color: var(--primary);
  border-radius: 16px;
  font-size: 24px;
  flex-shrink: 0;
  border: 1px solid rgba(14, 165, 233, 0.15);
}

.single-domain-header h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
}

.domain-desc {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.single-type-selector {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.single-type-selector h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* Rich item card style for text formats */
.rich-type-card {
  display: flex;
  gap: 18px;
  padding: 24px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

.rich-type-card:hover {
  background: #ffffff;
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.04);
  transform: translateY(-2px);
}

.rich-type-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--primary);
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.rich-type-card:hover .rich-type-icon {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.rich-type-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.rich-type-info h4 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}

.rich-type-info p {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.rich-type-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 6px;
}

.rich-type-action i {
  transition: transform 0.2s ease;
}

.rich-type-card:hover .rich-type-action i {
  transform: translateX(4px);
}

/* Sidebar styling */
.single-domain-sidebar {
  width: 100%;
}

.sidebar-card {
  padding: 32px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
}

.sidebar-icon {
  color: var(--primary);
  width: 20px;
  height: 20px;
}

.sidebar-header h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
}

.sidebar-intro {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.clarity-rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.clarity-rules-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.rule-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: rgba(14, 165, 233, 0.08);
  color: var(--primary);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.clarity-rules-list strong {
  display: block;
  font-size: 14px;
  color: #334155;
  font-weight: 600;
}

.clarity-rules-list span {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

.clarity-example-box {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.example-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.example-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.example-item p {
  font-size: 12.5px;
  line-height: 1.5;
}

.example-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge-before {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.badge-after {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.example-item.before p {
  color: #64748b;
  text-decoration: line-through;
}

.example-item.after p {
  color: #0f172a;
  font-weight: 500;
}

/* Multi-domain card styling adjustments */
.text-type-domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.text-type-domain-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.text-type-domain-card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 165, 233, 0.25);
  box-shadow: 0 12px 25px -5px rgba(15, 23, 42, 0.05);
}

.text-type-domain-card .domain-card-content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.type-counter {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.text-type-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text-type-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-main);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.text-type-link:hover {
  background: #ffffff;
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  transform: translateY(-1px);
}

.text-type-link .arrow-icon {
  transition: transform 0.2s ease;
}

.text-type-link:hover .arrow-icon {
  transform: translateX(3px);
  color: var(--primary);
}

.text-type-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 12px 14px;
  color: var(--text-main);
  text-decoration: none;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: var(--transition-smooth);
}

.text-type-admin-row i:first-child {
  color: var(--primary);
}

/* Public editor */
.public-editor-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  grid-template-areas: "editor suggestions";
  gap: 22px;
  width: 100%;
  min-height: calc(100vh - 112px);
  overflow: visible;
}

.editor-structure-panel,
.editor-suggestions-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.editor-structure-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  width: min(360px, calc(100vw - 48px));
  max-height: calc(100vh - 112px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(-100% - 18px));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.public-editor-shell.is-structure-open .editor-structure-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.editor-suggestions-panel {
  grid-area: suggestions;
  position: sticky;
  top: 0;
  gap: 14px;
  max-height: calc(100vh - 112px);
}

.structure-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.structure-head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.structure-head-top .back-link {
  margin-bottom: 0;
  min-height: 34px;
}

.structure-close-btn {
  flex: 0 0 auto;
  color: var(--text-muted);
  background: #f8fafc;
  border-color: var(--border-color);
}

.structure-close-btn:hover {
  color: var(--text-main);
  background: #eef6ff;
  border-color: rgba(14, 165, 233, 0.25);
}

.structure-head h1 {
  margin-top: 18px;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.15;
}

.structure-head p {
  color: var(--text-muted);
}

.structure-list,
.editor-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

.editor-suggestion-list {
  flex: 1 1 auto;
  padding: 4px 4px 4px 0;
  overscroll-behavior: contain;
}

.editor-suggestion-list .category-section,
.editor-suggestion-list .suggestion-item {
  flex: 0 0 auto;
}

.editor-suggestion-list .suggestion-summary-btn {
  min-height: 64px;
}

.structure-list {
  flex: 1 1 auto;
  padding-top: 16px;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.structure-section {
  flex: 0 0 auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
}

.structure-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.25;
  list-style: none;
}

.structure-section summary span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.structure-section summary i {
  flex: 0 0 auto;
}

.structure-content {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #ffffff;
  border-top: 1px solid var(--border-color);
}

.structure-content > span {
  color: var(--text-muted);
  font-size: 12px;
}

.phraseology-btn {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  color: #24415f;
  text-align: left;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  cursor: pointer;
}

.phraseology-btn i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--primary);
}

.phraseology-btn span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* Three-level textual structure: sections, expected content and phraseology. */
.editor-structure-panel { width: min(960px, calc(100vw - 48px)); }
.structure-columns { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(230px, 1fr) minmax(300px, 1.45fr); flex: 1 1 auto; min-height: 0; margin-top: 16px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 12px; background: #f8fafc; }
.structure-column { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: white; }.structure-column + .structure-column { border-left: 1px solid var(--border-color); }
.structure-column > header { display: flex; min-height: 66px; padding: 12px; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); background: #f8fafc; }.structure-column > header > span { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--primary-hover); background: var(--primary-light); font-weight: 800; }.structure-column > header div { display: grid; }.structure-column > header strong { font: 700 13px var(--font-heading); }.structure-column > header small { color: var(--text-muted); font-size: 10px; }
.structure-column-list { min-height: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }.structure-column-list[hidden] { display: none; }
.structure-level-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px; margin-bottom: 5px; padding: 3px; border: 1px solid transparent; border-radius: 9px; }.structure-level-row:hover { background: #f8fafc; }.structure-level-row.is-active { border-color: rgba(14, 165, 233, .24); background: var(--primary-light); }
.structure-level-select { display: flex; min-width: 0; padding: 8px; align-items: center; justify-content: space-between; gap: 6px; border: 0; color: var(--text-main); text-align: left; background: transparent; cursor: pointer; }.structure-level-select > span { display: grid; min-width: 0; }.structure-level-select strong { overflow-wrap: anywhere; font: 650 12px/1.3 var(--font-heading); }.structure-level-select small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }.structure-level-select svg { width: 14px; flex: 0 0 auto; color: #94a3b8; }
.structure-insert-action { display: grid; width: 32px; height: 32px; align-self: center; place-items: center; border: 1px solid #bae6fd; border-radius: 8px; color: var(--primary-hover); background: white; cursor: pointer; }.structure-insert-action:hover { color: white; border-color: var(--primary); background: var(--primary); }.structure-insert-action svg { width: 14px; }
.phraseology-list { display: flex; flex-direction: column; gap: 7px; }.phraseology-context { display: flex; padding: 6px 7px 10px; align-items: center; gap: 7px; color: var(--text-muted); font-size: 10px; }.phraseology-context svg { width: 14px; }.phraseology-context b { color: #cbd5e1; }
.phraseology-list .phraseology-btn { align-items: center; justify-content: space-between; }.phraseology-list .phraseology-btn span { flex: 1; }.phraseology-list .phraseology-btn svg { order: 2; }
.structure-empty { padding: 18px 10px; color: var(--text-muted); font-size: 12px; line-height: 1.5; text-align: center; }

@media (max-width: 760px) {
  .editor-structure-panel { right: 14px; left: 14px; width: auto; }
  .structure-columns { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  .structure-column { min-width: min(82vw, 330px); flex: 0 0 min(82vw, 330px); scroll-snap-align: start; }
  .structure-column + .structure-column { border-left: 1px solid var(--border-color); }
}

.editor-main-panel {
  grid-area: editor;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.agent-editor-frame {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 112px);
  padding: 0 0 20px;
}

.editor-workbar {
  position: sticky;
  top: 0;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: min(100%, 1120px);
  margin: 0 auto 14px;
}

.agent-mode-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.editor-workbar .agent-mode-switch {
  grid-column: 2;
  margin: 0;
}

.agent-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 13px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.agent-mode-btn i {
  width: 18px;
  height: 18px;
}

.agent-mode-btn:hover,
.agent-mode-btn.is-active {
  color: var(--text-main);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.editor-toolbar {
  position: sticky;
  top: 66px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: min(100%, 1120px);
  min-height: 58px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border-color);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: thin;
}

.toolbar-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 3px;
  padding: 0 4px;
}

.toolbar-separator {
  flex: 0 0 auto;
  width: 1px;
  height: 28px;
  margin: 0 2px;
  background: var(--border-color);
}

.editor-analyze-btn {
  flex: 0 0 auto;
  grid-column: 3;
  justify-self: end;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.24);
}

.editor-analyze-btn i {
  width: 20px;
  height: 20px;
}

.icon-tool {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 34px;
  color: #475569;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.icon-tool:hover {
  color: var(--text-main);
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.icon-tool i {
  width: 18px;
  height: 18px;
}

.editor-format-select {
  min-width: 72px;
  height: 34px;
  padding: 0 28px 0 12px;
  color: #4f46e5;
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.editor-format-select:focus {
  outline: 2px solid rgba(14, 165, 233, 0.25);
  outline-offset: 1px;
}

.editor-zoom-label {
  min-width: 48px;
  color: #475569;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
}

.compact-check {
  flex: 0 0 auto;
  min-height: 38px;
  white-space: nowrap;
}

.editor-document-card {
  display: flex;
  flex-direction: column;
  width: min(100%, 1120px);
  flex: 1;
  min-height: 0;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.editor-document-card {
  min-height: calc(100vh - 260px);
}

.document-status-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  color: var(--text-muted);
  font-size: 12px;
  border-bottom: 1px solid var(--border-color);
  background: #fbfdff;
}

.document-status-line [data-editor-dirty] {
  color: var(--warning);
  font-weight: 700;
}

.public-editor-shell.is-report-stale .document-status-line {
  background: #fffbeb;
}

.rich-editor-surface {
  --editor-zoom: 1;
  flex: 1;
  min-height: calc(100vh - 330px);
  padding: 46px 64px 132px;
  overflow-y: auto;
  color: #1f3147;
  background: #ffffff;
  font-size: 18px;
  line-height: 1.8;
  outline: none;
}

.rich-editor-content {
  min-height: 100%;
  font-size: calc(18px * var(--editor-zoom, 1));
  line-height: 1.8;
  outline: none;
}

.rich-editor-content {
  max-width: 760px;
  margin: 0 auto;
}

.rich-editor-content > *:first-child {
  margin-top: 0;
}

.rich-editor-content h1,
.rich-editor-content h2,
.rich-editor-content h3 {
  margin: 1.35em 0 0.65em;
  color: var(--text-main);
  font-family: var(--font-heading);
  line-height: 1.2;
}

.rich-editor-content h1 {
  font-size: 1.8em;
}

.rich-editor-content h2 {
  font-size: 1.45em;
}

.rich-editor-content h3 {
  font-size: 1.2em;
}

.rich-editor-surface p,
.rich-editor-content p,
.highlighted-text p {
  margin-bottom: 1em;
}

.agent-command-bar {
  position: sticky;
  bottom: 18px;
  z-index: 14;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(720px, calc(100% - 48px));
  min-height: 58px;
  margin-top: -88px;
  padding: 8px 10px 8px 16px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(14px);
}

.agent-command-bar > i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.agent-command-bar input {
  flex: 1;
  min-width: 0;
  height: 42px;
  color: var(--text-main);
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
}

.agent-run-btn {
  flex: 0 0 auto;
  color: #ffffff;
  background: var(--text-main);
  border-color: var(--text-main);
}

.suggestion-actions-state {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 34px 20px;
  color: var(--text-muted);
  text-align: center;
  background: #f8fafc;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
}

.suggestion-actions-state i {
  color: var(--primary);
}

.suggestion-actions-state h3 {
  color: var(--text-main);
}

.layer-filter-panel {
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.layer-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.layer-filter-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.layer-filter-head i {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.layer-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.layer-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 9px;
  color: #475569;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.layer-filter-chip:hover {
  color: var(--text-main);
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.layer-filter-chip.is-active {
  color: #075985;
  background: #e0f2fe;
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.12);
}

.layer-filter-chip small {
  min-width: 19px;
  padding: 1px 6px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.layer-filter-chip.is-active small {
  color: #0369a1;
  background: rgba(255, 255, 255, 0.75);
}

.layer-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
}

.layer-dot-discourse { background: var(--color-discourse); }
.layer-dot-lexical { background: var(--color-lexical); }
.layer-dot-morphosyntax { background: var(--color-morphosyntax); }
.layer-dot-acronyms { background: var(--color-acronyms); }
.layer-dot-general { background: var(--primary); }

.editor-json-output {
  flex: 0 0 auto;
  max-height: 320px;
  overflow: auto;
  padding: 14px;
  color: #dbeafe;
  background: #0b1329;
  border-radius: 10px;
  font-size: 12px;
}

.editor-suggestions-panel .occurrence-jump-btn,
.editor-suggestions-panel .occurrence-static-box {
  flex-wrap: wrap;
  gap: 8px;
}

.editor-suggestions-panel .replacement-box {
  flex: 1 0 100%;
  padding-left: 0;
}

.editor-hit {
  scroll-margin: 120px;
}

.text-hit.is-focused {
  animation: focusPulse 1.2s ease;
}

@keyframes focusPulse {
  0%, 100% {
    box-shadow: none;
  }
  35% {
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.22);
  }
}

/* Editorial admin */
.badge-muted {
  color: var(--text-muted);
  background: #f1f5f9;
}

.editorial-domain-list,
.editorial-structure-admin,
.structure-content-admin,
.phraseology-admin-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.editorial-domain-admin.is-inactive,
.structure-admin-card.is-inactive,
.structure-content-admin-row.is-inactive,
.phraseology-form.is-inactive {
  opacity: 0.72;
  background: #f8fafc;
}

.editorial-domain-form,
.editorial-type-create,
.editorial-structure-create,
.structure-section-form,
.structure-content-form,
.phraseology-form,
.phraseology-create,
.content-create {
  display: grid;
  gap: 12px;
  align-items: center;
}

.editorial-domain-form {
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.85fr) minmax(130px, 0.6fr) 92px 132px 112px auto;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 14px;
}

.editorial-type-create,
.editorial-structure-create,
.content-create {
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.7fr) 90px 110px auto;
}

.domain-create-form {
  background: #fff;
  border-style: dashed;
}

.domain-edit-form {
  margin-bottom: 18px;
}

.domain-create-form .primary-btn,
.domain-edit-form .ghost-button,
.editorial-type-create .secondary-btn,
.editorial-structure-create .primary-btn,
.content-create .secondary-btn {
  align-self: end;
  min-height: 42px;
}

.editorial-type-create {
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.8fr) minmax(130px, 0.6fr) 92px 112px auto;
  padding: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

.editorial-domain-admin {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.text-type-admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
}

.text-type-admin-row span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.text-type-admin-row code {
  margin-left: auto;
}

.editorial-type-form {
  display: grid;
  gap: 18px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
}

.admin-field,
.variables-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-field input,
.admin-field select,
.admin-field textarea,
.variables-editor textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: var(--transition-smooth);
}

.admin-field textarea,
.variables-editor textarea {
  line-height: 1.55;
  resize: vertical;
}

.admin-field input:hover,
.admin-field select:hover,
.admin-field textarea:hover,
.variables-editor textarea:hover {
  border-color: rgba(14, 165, 233, 0.45);
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus,
.variables-editor textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.admin-field small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.ai-prompt-list {
  display: grid;
  gap: 18px;
}

.ai-prompt-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.ai-prompt-card.is-inactive {
  background: #f8fafc;
}

.ai-prompt-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ai-prompt-card-head h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
}

.ai-prompt-card-head p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.ai-prompt-form {
  display: grid;
  gap: 16px;
}

.ai-prompt-actions {
  justify-content: flex-end;
}

.inline-switch {
  justify-content: flex-end;
}

.status-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 68px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.variables-panel {
  padding: 18px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}

.variables-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.variables-panel-heading h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.25;
  color: var(--text-main);
}

.variables-panel-heading p {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 13px;
}

.metadata-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #047857;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.18);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.variable-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.variable-control {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.advanced-json-panel {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: #fbfdff;
}

.advanced-json-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
}

.advanced-json-panel summary::-webkit-details-marker {
  display: none;
}

.advanced-json-panel summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
}

.advanced-json-panel summary i {
  width: 17px;
  height: 17px;
  color: var(--primary);
}

.advanced-json-panel summary small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.advanced-json-panel[open] {
  background: #fff;
}

.advanced-json-panel .variables-editor {
  padding: 0 16px 16px;
}

.form-actions-row {
  display: flex;
  justify-content: flex-start;
}

.variables-editor textarea {
  min-height: 130px;
  font-family: monospace;
}

.structure-section-form {
  grid-template-columns: minmax(220px, 1fr) 150px 96px 112px auto auto;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.structure-content-form {
  grid-template-columns: minmax(220px, 1fr) 150px 96px 112px auto auto;
}

.structure-content-admin-row {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.phraseology-form,
.phraseology-create {
  grid-template-columns: minmax(260px, 1fr) 96px 112px 42px 42px;
}

.phraseology-create {
  grid-template-columns: minmax(260px, 1fr) 96px 112px auto;
  padding: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

.phraseology-form textarea,
.phraseology-create textarea {
  min-height: 58px;
  resize: vertical;
}

.structure-admin-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.structure-card-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

.structure-card-label span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.structure-card-label strong {
  font-family: var(--font-heading);
  font-size: 17px;
}

.content-label strong {
  font-size: 15px;
}

.compact-field input,
.compact-field select,
.tiny-field input {
  min-height: 38px;
}

.phrase-field textarea {
  min-height: 72px;
}

.editorial-switch {
  align-self: end;
  min-height: 38px;
}

.structure-section-form .ghost-button,
.structure-content-form .ghost-button,
.phraseology-form .ghost-button {
  align-self: end;
}

.content-create {
  padding: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

.admin-container textarea,
.admin-container input,
.admin-container select {
  width: 100%;
}

.empty-admin-state {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  padding: 32px;
  color: var(--text-muted);
  text-align: center;
  background: #ffffff;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
}

@media (max-width: 1180px) {
  .product-hero,
  .route-grid,
  .text-type-domain-grid,
  .single-domain-container,
  .public-editor-shell {
    grid-template-columns: 1fr;
  }

  .public-editor-shell {
    grid-template-areas:
      "editor"
      "suggestions";
    min-height: 0;
  }

  .editor-suggestions-panel {
    max-height: none;
  }

  .editor-structure-panel {
    position: fixed;
    top: 80px;
    bottom: 18px;
    left: 18px;
    max-height: none;
    transform: translateX(calc(-100% - 28px));
  }

  .editor-suggestions-panel {
    position: static;
  }

  .editorial-domain-form,
  .editorial-type-create,
  .editorial-structure-create,
  .structure-section-form,
  .structure-content-form,
  .phraseology-form,
  .phraseology-create,
  .content-create,
  .editorial-type-form,
  .admin-form-grid,
  .variable-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-band {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .product-hero,
  .route-card,
  .text-type-domain-card {
    padding: 20px;
  }

  .product-hero h1,
  .catalog-heading h1 {
    font-size: 40px;
  }

  .product-band {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .band-metrics {
    grid-template-columns: 1fr;
  }

  .editor-workbar {
    position: static;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  .editor-workbar .agent-mode-switch,
  .editor-analyze-btn {
    grid-column: 1;
  }

  .editor-toolbar {
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    top: 0;
  }

  .agent-mode-switch {
    width: 100%;
    justify-content: stretch;
    overflow-x: auto;
  }

  .agent-mode-btn {
    flex: 1 0 auto;
    justify-content: center;
  }

  .toolbar-separator {
    display: block;
  }

  .editor-analyze-btn {
    justify-self: stretch;
    width: 100%;
  }

  .rich-editor-surface {
    min-height: 480px;
    padding: 28px 24px 120px;
    font-size: 16px;
  }

  .document-status-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-command-bar {
    width: calc(100% - 24px);
  }
}

/* ==========================================================
   VERTICAL PROCESSING STEPS LIST (WAITING SCREEN)
   ========================================================== */
.processing-steps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 580px;
  margin: 32px 0 24px 0;
  text-align: left;
}

.processing-step-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  transition: var(--transition-smooth);
}

/* Status: Completed */
.processing-step-item.status-completed {
  border-color: rgba(16, 185, 129, 0.15);
  background-color: rgba(16, 185, 129, 0.02);
}

.processing-step-item.status-completed .step-indicator {
  color: var(--success);
}

.processing-step-item.status-completed h3 {
  color: var(--text-main);
  text-decoration: none;
}

/* Status: Active */
.processing-step-item.status-active {
  border-color: rgba(14, 165, 233, 0.25);
  background-color: rgba(14, 165, 233, 0.02);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.04);
}

.processing-step-item.status-active h3 {
  color: var(--primary);
  font-weight: 700;
}

/* Status: Pending */
.processing-step-item.status-pending {
  opacity: 0.55;
  border-style: dashed;
}

.processing-step-item.status-pending .step-indicator {
  color: var(--text-muted);
}

/* Step Indicator Icon sizes */
.step-indicator {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  flex-shrink: 0;
}

.step-indicator i {
  width: 20px;
  height: 20px;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-content h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.step-content p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 !important;
  line-height: 1.4;
}

/* Inline Circular Spinner */
.step-loader-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(14, 165, 233, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.processing-step-item.status-active.status-queued .step-loader-spinner {
  border: 2px solid rgba(245, 158, 11, 0.2);
  border-top-color: var(--warning);
}

/* ==========================================================
   REFINED WAITING SCREEN
   ========================================================== */
.processing-state-card {
  flex: 1;
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  border-radius: 16px;
  padding: 0;
  box-shadow: var(--shadow-md);
}

.processing-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-color);
  background-color: #fafbfc;
}

.processing-loader-container {
  margin-bottom: 0;
}

.spinner-glow-wrap {
  width: 56px;
  height: 56px;
}

.spinner-glow {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0) 70%);
}

.processing-state-queued .spinner-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0) 70%);
}

.processing-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: #e0f2fe;
  border: 1px solid rgba(14, 165, 233, 0.18);
  box-shadow: none;
}

.processing-icon-wrap i {
  width: 24px;
  height: 24px;
}

.processing-icon-wrap .icon-spin,
.processing-note .icon-spin {
  animation-duration: 3.5s;
  opacity: 0.82;
}

.processing-icon-wrap.status-queued {
  background-color: #fffbeb;
  border-color: rgba(245, 158, 11, 0.22);
  box-shadow: none;
}

.processing-title-block {
  min-width: 0;
}

.processing-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 99px;
  background-color: var(--primary-light);
  color: var(--primary-hover);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.processing-state-queued .processing-kicker {
  background-color: #fffbeb;
  color: #b45309;
}

.processing-state-card h2 {
  margin: 8px 0 4px;
  font-size: 20px;
  line-height: 1.2;
}

.processing-status-text {
  max-width: 820px;
  font-size: 14px;
  line-height: 1.55;
}

.processing-steps-list {
  max-width: none;
  margin: 0;
  padding: 20px 24px 18px;
  gap: 10px;
}

.processing-step-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 15px;
  border-radius: 12px;
  background-color: var(--bg-card);
  text-align: left;
  box-shadow: none;
}

.processing-step-item.status-completed {
  border-color: rgba(16, 185, 129, 0.18);
  background-color: #ffffff;
}

.processing-step-item.status-active {
  border-color: rgba(14, 165, 233, 0.28);
  background-color: #f8fcff;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.06);
}

.processing-step-item.status-active.status-queued {
  border-color: rgba(245, 158, 11, 0.28);
  background-color: #fffdf7;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.06);
}

.processing-step-item.status-pending {
  opacity: 1;
  border-style: solid;
  background-color: #f8fafc;
}

.step-indicator {
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding-top: 0;
  border-radius: 8px;
  background-color: #f1f5f9;
  color: var(--text-muted);
}

.processing-step-item.status-completed .step-indicator {
  background-color: #ecfdf5;
  color: var(--success);
}

.processing-step-item.status-active .step-indicator {
  background-color: #e0f2fe;
  color: var(--primary);
}

.processing-step-item.status-active.status-queued .step-indicator {
  background-color: #fffbeb;
  color: var(--warning);
}

.step-indicator i {
  width: 18px;
  height: 18px;
}

.step-content {
  gap: 3px;
  min-width: 0;
}

.step-content h3 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.processing-step-item.status-active h3 {
  color: var(--text-main);
}

.step-content p {
  font-size: 13px;
  line-height: 1.45;
}

.step-loader-spinner {
  width: 16px;
  height: 16px;
}

.processing-footer {
  display: flex;
  justify-content: flex-start;
  padding: 0 24px 22px;
}

.processing-note {
  margin-top: 0;
  background-color: #f0f9ff;
  border-color: rgba(14, 165, 233, 0.18);
  color: #0369a1;
  font-weight: 600;
}

@media (max-width: 768px) {
  .topbar-left {
    gap: 8px;
  }

  .topbar-nav {
    margin-left: 8px;
    gap: 3px;
  }

  .topbar-nav .nav-link { padding: 6px 8px; }
  .topbar-nav .nav-link span { display: none; }
  .topbar-nav .nav-switch-segment { padding: 6px 9px; }
  .topbar-nav .nav-switch-segment > span { display: none; }
  .topbar-nav .nav-dropdown-menu span { display: inline; }
  .topbar-nav .nav-dropdown-chevron { display: none; }
  .topbar-nav .nav-switch-editor-toggle .nav-dropdown-chevron { display: block; }
  .topbar-nav .nav-dropdown-menu { right: 0; left: auto; min-width: 205px; }
  .topbar-nav .nav-dropdown-menu::before { right: 17px; left: auto; }
  .topbar-nav .nav-divider { margin: 0 1px; }
  .topbar-right { gap: 6px; }
  .topbar-right .user-badge { display: none; }
  .topbar .logout-btn { width: 36px; padding: 6px; }
  .topbar .logout-btn span { display: none; }
  .context-selector--interface {
    padding: 4px;
    gap: 4px;
  }
  .context-selector--interface > i,
  .context-selector--interface > label {
    display: none;
  }
  .context-selector--interface select {
    min-width: 88px;
    max-width: 104px;
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .brand-logo-frame {
    width: 64px;
    flex-basis: 64px;
  }

  .brand-logo {
    width: 64px;
    max-width: 64px;
  }

  .brand-text {
    display: none;
  }

  .processing-head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px;
  }

  .processing-steps-list {
    padding: 16px;
  }

  .processing-footer {
    padding: 0 16px 18px;
  }
}

/* Responsive placement must remain after the legacy editor rules. */
.editor-suggestions-panel:has(.unified-suggestion-panel) { padding:0; }
@media (min-width:1450px){.public-editor-shell{grid-template-columns:minmax(0,1fr) minmax(470px,520px)}.editor-suggestions-toggle{display:none}}
@media (min-width:1181px) and (max-width:1449px){.public-editor-shell{grid-template-columns:1fr;grid-template-areas:"editor"}.editor-suggestions-panel{position:fixed;z-index:55;top:86px;right:16px;bottom:16px;width:min(520px,calc(100vw - 32px));max-height:none;opacity:0;pointer-events:none;transform:translateX(calc(100% + 24px));transition:opacity .2s ease,transform .2s ease}.public-editor-shell.is-suggestions-open .editor-suggestions-panel{opacity:1;pointer-events:auto;transform:translateX(0)}}
@media (max-width:1180px){.public-editor-shell{grid-template-areas:"editor"}.editor-suggestions-panel{position:fixed;z-index:60;inset:72px 0 0;width:100%;max-height:none;border-radius:0;opacity:0;pointer-events:none;transform:translateY(24px);transition:opacity .2s ease,transform .2s ease}.public-editor-shell.is-suggestions-open .editor-suggestions-panel{opacity:1;pointer-events:auto;transform:none}}