/* MG Content Manager — one visual system for the editorial workspace. */
:root {
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bg: #f3f7fb;
  --white: #fff;
  --ink: #202e40;
  --muted: #637185;
  --line: #e1e7ee;
  --green: #315e92;
  --mint: #eaf2fb;
  --gold: #8b5a20;
  --blue: #315e92;
  --blue-hover: #234b7a;
  --soft: #f7f9fc;
  --success: #28664f;
  --radius: 12px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding: 24px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea, summary, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #7ca8db; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: var(--blue); text-underline-offset: 3px; }
button, a { touch-action: manipulation; }
button { color: inherit; }
img { max-width: 100%; }
svg.ui-icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; color: var(--ink); }
h1 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.8px; }
h2 { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -.2px; }
h3 { font-size: 16px; line-height: 1.5; font-weight: 600; }
::selection { background: #dceafd; color: #17385f; }
.sr, .mobilelogo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 200; background: #fff; padding: 12px 18px; border: 1px solid var(--blue); border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* Navigation and page frame. */
.shell { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 232px; display: flex; flex-direction: column; padding: 30px 16px 22px; background: #fff; border-right: 1px solid var(--line); z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; font-size: 16px; line-height: 1.25; font-weight: 600; letter-spacing: -.25px; }
.mark { display: grid; place-items: center; flex: 0 0 auto; width: 37px; height: 37px; border-radius: 10px; background: #243c5b; color: white; font-size: 14px; font-weight: 600; letter-spacing: -.5px; }
.brand small { display: block; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 1.6px; margin-top: 7px; }
.workspace { display: none; }
.nav { margin-top: 48px; }
.nav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 11px 13px; margin-bottom: 7px; border: 0; border-radius: 8px; background: none; color: #58677a; text-align: left; font-size: 14px; font-weight: 500; }
.nav button:hover { background: var(--soft); color: var(--ink); }
.nav button.active { background: var(--mint); color: #244f81; font-weight: 600; }
.nav button>span:first-child { width: 20px; height: 20px; display: grid; place-items: center; }
.nav b { margin-left: auto; min-width: 22px; padding: 1px 5px; border-radius: 5px; font-size: 12px; font-weight: 500; text-align: center; background: #dce9f8; color: #315b8d; }
.sidebottom { margin-top: auto; padding: 0 10px; min-width: 0; }
.demo-note { padding: 18px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--muted); }
.demo-note strong { display: block; font-weight: 500; color: #43556a; margin-bottom: 4px; }
.person { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12px; }
.person>div:last-child { min-width: 0; overflow-wrap: anywhere; }
.avatar { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #eef3f9; color: #456281; font-size: 11px; font-weight: 600; }
.person small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
main { grid-column: 2; min-width: 0; }
.topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 40px; background: #fff; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.topbar>span { min-width: 0; }
.topright { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-shrink: 0; font-size: 12px; }
#saveLabel { max-width: 280px; }
#saveLabel[data-state=error] { color: #a33240; }
.pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 30px; padding: 4px 9px; font-size: 12px; font-weight: 500; color: var(--muted); background: #fff; white-space: nowrap; }
.topright .pill { border: 0; padding: 0; background: transparent; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #40866b; }
.content:focus, h1[tabindex="-1"]:focus, .language-inspector h2:focus { outline: none; }
.content { width: 100%; max-width: 1540px; padding: 40px 40px 48px; margin: 0 auto; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.heading>div:first-child { min-width: 0; }
.heading>.btn, .heading>.buttons { flex-shrink: 0; }
.eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); margin-bottom: 10px; }
.sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 10px 0 0; }
.editor-heading h1 { font-size: 28px; max-width: 38ch; overflow-wrap: anywhere; }
.editor-heading .sub { margin-top: 12px; }

/* Controls and surfaces. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 15px; border: 1px solid #d6dee8; border-radius: 8px; background: white; color: #34465d; font-size: 14px; line-height: 1.45; font-weight: 500; text-decoration: none; transition: background .15s, border-color .15s; }
.btn:hover { border-color: #acbdd1; background: #f7faff; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn.small { min-height: 36px; padding: 7px 11px; font-size: 13px; }
.btn.danger { color: #a33240; border-color: #e9cdd1; background: #fff; }
.btn.danger:hover { background: #fff2f3; border-color: #dbaab1; }
.buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.textlink { border: 0; background: none; color: var(--blue); padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.tool { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: #526176; }
.tool:hover, .tool[aria-pressed=true] { background: var(--mint); color: var(--blue); }
.field { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 13px; border: 1px solid #ccd6e2; border-radius: 8px; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.5; transition: border-color .15s; }
.field:hover { border-color: #acbdd1; }
.field:focus { border-color: #638cbe; outline: 3px solid #e0edfd; outline-offset: 0; }
.field::placeholder { color: #798697; opacity: 1; }
textarea.field { resize: vertical; min-height: 120px; }
select.field { padding-right: 32px; text-overflow: ellipsis; }
input[type=checkbox] { accent-color: var(--blue); width: 17px; height: 17px; flex-shrink: 0; }
input[type=file].field { padding: 9px; font-size: 14px; }
input::file-selector-button { padding: 5px 9px; border: 0; border-radius: 5px; margin-right: 10px; background: var(--mint); color: #284d78; font: inherit; }
.label { display: block; margin-bottom: 9px; color: #58687c; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: white; margin-bottom: 20px; overflow: hidden; min-width: 0; }
.panelhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; min-height: 66px; border-bottom: 1px solid var(--line); background: #fff; }
.panelhead>div:first-child { min-width: 0; }
.panelhead h2 { font-size: 17px; }
.paneldesc { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 6px 0 0; max-width: 70ch; }
.panelbody { padding: 24px; }
.panelbody>p, .settings-cards li { line-height: 1.65; }
.tip, .fieldhint { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 10px 0 0; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; font-size: 12px; line-height: 1.5; font-weight: 500; background: #edf4f1; color: #28664f; }
.badge.gray { background: #f0f3f7; color: #5d6b7d; }
.badge.warn { background: #faf1e4; color: #84571e; }
.badge.info { background: var(--mint); color: #315e92; }
.badge.error { background: #fff0f1; color: #a33240; }
.notice, .wizardhint, .import-explanation, .formintro { background: #edf4fc; color: #425d7b; border: 1px solid #dce7f3; border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.errorbox { color: #a33240; background: #fff4f4; border-color: #edcdd2; }
.missing { color: #84571e; font-size: 13px; padding: 10px 12px; background: #fdf5e9; border-radius: 6px; }
.ok { color: var(--success); }
.over { color: #a33240; }
details { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
summary { cursor: pointer; font-size: 14px; font-weight: 500; color: #4e6077; line-height: 1.5; }
details[open]>summary { margin-bottom: 16px; }
details>p { margin-top: 12px; }
code { overflow-wrap: anywhere; font-size: 13px; }

/* Material library. */
.materials-panel .panelhead { padding: 22px 24px 16px; border-bottom: 0; }
.materials-panel .panelhead h2 { white-space: nowrap; }
.material-count { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.search-wrap { position: relative; width: 300px; max-width: 50%; }
.search-wrap .ui-icon { position: absolute; top: 12px; left: 12px; color: #7c899b; width: 18px; height: 18px; pointer-events: none; }
.search { width: 100%; font-size: 14px; min-height: 42px; padding-left: 39px; background: #fafbfd; }
.material-filters { display: flex; gap: 22px; padding: 0 24px; margin: 0 !important; border-bottom: 1px solid var(--line); overflow-x: auto; }
.material-filters .btn { min-height: 46px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 0; background: transparent; color: var(--muted); white-space: nowrap; font-size: 14px; }
.material-filters .btn.primary { background: transparent; border-color: var(--blue); color: var(--blue); }
.table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.table th { padding: 13px 20px; font-size: 12px; font-weight: 500; text-align: left; color: var(--muted); background: #fafbfd; border-bottom: 1px solid var(--line); }
.table td { padding: 22px 20px; font-size: 14px; border-bottom: 1px solid #edf0f4; vertical-align: middle; overflow-wrap: anywhere; }
.table th:first-child, .table td:first-child { padding-left: 24px; width: 38%; }
.table th:nth-child(2) { width: 26%; }
.table th:nth-child(3) { width: 12%; }
.table th:nth-child(4) { width: 18%; }
.table th:last-child { width: 50px; }
.table td:last-child { padding: 10px 12px 10px 0; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fbfdff; }
.titlecell { font-weight: 500; }
.material-title { display: block; background: none; border: 0; padding: 0; margin: 0; text-align: left; color: var(--ink); font-size: 15px; line-height: 1.5; font-weight: 500; }
.material-title:hover { color: var(--blue); }
.titlecell small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.material-status { max-width: 100%; }
.table td:nth-child(3), .table td:nth-child(4) { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.materials-import { padding: 0; border: 0; margin-top: 24px; }
.materials-import summary { font-size: 13px; color: var(--muted); }
.empty { padding: 52px 24px; text-align: center; color: var(--muted); font-size: 15px; }
.empty h2 { margin-bottom: 10px; font-size: 19px; }
.empty p { max-width: 50ch; margin: 0 auto 22px; }
.empty .ui-icon { display: block; width: 30px; height: 30px; color: #7892ae; margin: 0 auto 18px; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
.stat { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.stat span { color: var(--muted); font-size: 13px; }
.stat strong { display: block; margin-top: 10px; font-size: 28px; font-weight: 500; }

/* Four-step editor. */
.wizardsteps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0 0 32px; border-bottom: 1px solid #d7e1ec; }
.wizardsteps button { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; background: none; color: var(--muted); font-size: 14px; text-align: left; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; min-width: 0; }
.wizardsteps button:hover { color: var(--blue); }
.wizardsteps button.current { border-color: var(--blue); color: #264e7b; font-weight: 600; }
.wizardsteps i { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-style: normal; background: #e7edf4; color: #63748a; }
.wizardsteps .current i { background: var(--blue); color: white; }
.wizardsteps .complete:not(.current) i { background: #e2eee8; color: #28664f; }
.wizardintro { position: relative; margin-bottom: 24px; }
.stepkicker { display: block; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 1px; margin-bottom: 7px; }
.wizardintro h2 { font-size: 23px; line-height: 1.3; font-weight: 500; letter-spacing: -.4px; }
.wizardintro p { margin: 9px 0 0; max-width: 75ch; font-size: 15px; color: var(--muted); }
.wizardintro>.buttons { margin-top: 16px; }
.wizardintro>.buttons .btn { background: transparent; min-height: 36px; font-size: 13px; padding: 6px 12px; }
.wizardstage { min-height: 220px; }
.wizardfooter { position: sticky; bottom: 12px; z-index: 8; display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 14px 18px; margin-top: 24px; border: 1px solid #dbe4ef; border-radius: 12px; background: rgba(255,255,255,.97); box-shadow: 0 6px 25px #243c5b0a; backdrop-filter: blur(12px); }
.wizardfooter>.buttons { width: 100%; justify-content: space-between; }
.wizardfooter .buttons>.primary:last-child { margin-left: auto; }
.wizardfooter strong { display: block; font-size: 14px; }
.prototype-footer { margin-top: 16px; color: var(--muted); font-size: 12px; text-align: center; }
.editorgrid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap: 24px; align-items: start; }
.focused-editor>div:last-child { position: sticky; top: 24px; }
.wizardfields { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; margin-bottom: 22px; }
.source-panel .wizardfields { padding: 0; }
.wizardfields label, .language-inspector label, .params-panel label { display: block; font-size: 14px; font-weight: 500; color: #43546a; }
.wizardfields input, .language-inspector input, .params-panel input, .params-panel select { margin-top: 8px; }
.source { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.source div { min-width: 0; flex: 1; }
.source strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.source small { display: block; color: var(--muted); margin-top: 4px; font-size: 13px; }
.docicon { color: #6d88a8; font-size: 26px; }
.types { display: flex; gap: 4px; background: #eff3f8; border-radius: 8px; padding: 4px; margin: 18px 0 10px; }
.types button { flex: 1; padding: 9px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; color: var(--muted); background: transparent; }
.types button.active { background: #fff; border-color: #e1e7ef; color: var(--ink); font-weight: 500; }
.editorbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 10px 16px; background: #fafbfd; border-bottom: 1px solid var(--line); }
.editorbar .langtag { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted); }
.textedit { min-height: 380px; max-height: 70vh; overflow: auto; padding: 24px; outline: none; font-size: 17px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.textedit:focus { outline: 2px solid #a1bfdf; outline-offset: -2px; }
.textedit:empty:before { content: attr(data-placeholder); color: #7c899b; white-space: normal; }
.textedit, .textedit *, .tgcontent, .tgcontent * { font-family: var(--font); letter-spacing: normal; }
.textedit *, .tgcontent * { font-size: inherit; }
.textedit p, .textedit div, .tgcontent p, .tgcontent div { margin: 0; }
.textedit a, .tgcontent a { color: #1d5f9d; text-decoration: underline; }
.editorfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 11px 24px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.editor-image-actions { padding: 16px 20px; align-items: flex-start; border-top: 1px solid var(--line); }
.editor-image-actions .btn { font-size: 13px; }
.editor-image-actions details { border: 0; margin: 0; padding: 10px 0 0; }
.editor-image-actions details .btn { margin: 8px 4px 0 0; }
.quick-icons { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.quick-icons .tool { font-size: 20px; }
.icon-hint { padding: 0 20px; }
.block-map { display: block; margin: 16px 0; }
.block-map select { margin-top: 8px; }
.asset { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px; border: 1px dashed #c3d1e2; border-radius: 8px; background: #fbfcfe; }
.asset img { width: 96px; height: 68px; object-fit: contain; border-radius: 5px; }
.assettext { flex: 1; min-width: 150px; }
.asset strong { font-size: 14px; font-weight: 500; }
.asset small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.creation-assets { border-top: 1px solid var(--line); padding-top: 20px; }
.image-review { padding: 24px; text-align: center; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }
.image-review img { width: auto; max-height: 360px; object-fit: contain; border-radius: 8px; }
.slug-input { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; padding: 10px; border-radius: 8px; background: var(--soft); }
.slug-input span { font-size: 13px; font-weight: 400; color: var(--muted); }
.slug-input input { flex: 1; min-width: 180px; margin: 0; }
.eventrow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.value { font-size: 15px; }
.source-text-preview { padding: 20px; margin: 20px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.source-text-preview .tgcontent { padding: 8px 0; }

/* The complete image and actual text remain visible in every preview. */
.previewwrap { padding: 24px; background: #edf2f8; }
.previewtop { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 11px; font-weight: 500; letter-spacing: .5px; color: #64778f; overflow-wrap: anywhere; }
.tg { width: 100%; max-width: 430px; margin: 0 auto; border-radius: 10px; background: white; box-shadow: 0 2px 6px #243c5b07; overflow: hidden; }
.tg img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.tgcontent { padding: 18px; font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.tgmeta { padding: 0 16px 12px; color: #738398; font-size: 11px; text-align: right; }
.tgbottom { padding: 10px; border-top: 1px solid var(--line); color: #5c7999; font-size: 13px; text-align: center; }
.preview-caption { margin: 14px auto 0; max-width: 430px; color: var(--muted); font-size: 12px; text-align: center; }
.text-message { margin-top: 14px; }
.full-preview { border-radius: 8px; }
.counter { font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 14px; }
tg-emoji { display: inline; }

/* Language review keeps the selection and the preview alongside each other. */
#wizard-step-4 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; overflow-anchor: none; }
#wizard-step-4>.language-panel { grid-column: 1; grid-row: 2; margin: 0; }
#wizard-step-4>.language-inspector { grid-column: 2; grid-row: 2; margin: 0; }
#wizard-step-4>.translation-panel { grid-column: 1 / -1; grid-row: 1; margin: 0; }
.language-panel .panelbody>.buttons { gap: 8px; }
.language-panel .panelbody>.buttons .btn { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.language-instruction { margin: 18px 0 0; }
.langs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 16px 0 0; }
.lang { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; column-gap: 8px; row-gap: 4px; min-width: 0; min-height: 77px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.lang:hover { border-color: #acbdd1; background: #fafcff; }
.lang.active { background: #eef5fd; border-color: #86aad2; box-shadow: inset 0 0 0 1px #86aad2; }
.lang input { margin: 0; }
.lang button { display: inline-flex; align-items: center; gap: 6px; padding: 0; min-height: 26px; border: 0; background: transparent; color: var(--ink); font-size: 14px !important; font-weight: 500; text-align: left; min-width: 0; }
.lang .flag { font-size: 16px; }
.lang .state { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.4; }
.lang.isverified .state { color: var(--success); }
.langsfooter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.language-inspector .panelbody { padding: 20px; }
.language-check { margin-top: 20px; }
.language-copy { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; }
.telegram-inspector .buttons { margin-top: 18px; }
.telegram-inspector .buttons .btn { flex: 1; font-size: 13px; }
.telegram-inspector .previewwrap { padding: 16px; }
.language-inspector { overflow: visible; overscroll-behavior-x: contain; }
.language-inspector .panelhead { border-radius: var(--radius) var(--radius) 0 0; }
.telegram-inspector { touch-action: pan-y pinch-zoom; overflow-anchor: none; }
.wizardfooter { overflow-anchor: none; }
.language-review-tools { position: sticky; top: 12px; z-index: 4; padding: 12px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--white,#fff); box-shadow: 0 4px 16px #00000008; scroll-margin-top: 12px; }
.language-review-nav { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px 28px; align-items: center; gap: 8px; }
.language-review-nav .language-arrow { min-width: 44px; min-height: 44px; padding: 10px; display: grid; place-items: center; }
.language-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.language-review-position { text-align: center; min-width: 0; }
.language-review-position strong { display: block; font-size: 14px; line-height: 1.4; }
.language-review-position strong span { font-weight: 400; color: var(--muted); }
.language-review-position small { display: block; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.telegram-inspector .language-review-tools .buttons { margin-top: 10px; gap: 8px; }
.language-review-tools .btn.review-confirmed { color: var(--success); }
.language-review-issues { padding: 10px 12px; margin: 0 0 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.language-review-issues ul { padding-left: 18px; margin-bottom: 0; }
@media(max-width:540px) { .language-review-tools { top: 6px; padding: 10px; } .language-review-position strong span { display: block; font-size: 12px; } .language-review-nav { gap: 4px; grid-template-columns: 44px minmax(0,1fr) 44px 24px; } }
.translation-panel .panelbody>p { font-size: 14px; color: var(--muted); }
.translation-panel .panelhead { flex-wrap: wrap; }
.final-preview { max-width: 680px; margin: 24px auto 0; }
.final-preview>label { display: block; margin-bottom: 14px; }
.delivery-review-actions { margin-top: 20px; align-items: stretch; }
.delivery-review-actions .btn { flex: 1 1 180px; }
.test-post-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.test-post-panel h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.test-post-panel p { margin: 0 0 6px; font-size: 14px; }
.test-post-panel small { color: var(--muted); line-height: 1.5; }
.test-post-panel>.btn { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: center; }
.test-channel-card { padding: 18px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }
.test-channel-card strong { display: block; margin-top: 8px; font-size: 18px; }
.test-channel-card a { font-size: 14px; }
.test-channel-card+p { margin: 20px 0 12px; }
.revision-color-guide { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 18px 0; }
.revision-color-guide p { margin: 0; padding: 12px 16px; }
.revision-color-guide p:first-child { background: #eef6f1; }
.revision-color-guide p:last-child { background: #fcf7e8; }
.reviewrows { margin: 18px 0; }
.reviewrows>div { display: grid; grid-template-columns: 40px minmax(0,1fr) 160px 150px; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding: 14px 0; color: var(--muted); font-size: 13px; }
.reviewrows span { overflow-wrap: anywhere; }
.reviewrows b { color: var(--ink); }
.publishbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding: 22px 24px; border: 1px solid #d3dfec; background: #fff; border-radius: 12px; margin-top: 20px; }
.publishbar strong { display: block; font-size: 16px; font-weight: 500; }
.publishbar small { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); }
.delivery-options { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 20px; }
.delivery-settings { display: grid; gap: 10px; }

/* Settings: short connection cards, separate channels and administration. */
.settings-nav { display: flex; gap: 28px; border-bottom: 1px solid #d7e1ec; margin: 0 0 28px; overflow-x: auto; }
.settings-nav button { padding: 0 0 14px; min-height: 42px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--muted); font-size: 15px; white-space: nowrap; }
.settings-nav button[aria-selected=true] { color: var(--blue); border-color: var(--blue); font-weight: 500; }
.settings-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.settings-cards>.panel, .settings-group>.panel { margin: 0; }
.settings-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; grid-column: 1 / -1; }
.settings-group>details { margin: 0; }
.legacy-setting { padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.legacy-setting .panel { border: 0; margin: 16px 0 0; }
.settings-nav, .material-filters { overflow-y: hidden; }
.settings-group[data-setting-group=connections] { align-items: stretch; }
.settings-group[data-setting-group=connections]>.panel { display: flex; flex-direction: column; }
.settings-group[data-setting-group=connections] .panelbody { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1; }
.settings-group[data-setting-group=connections] .panelbody>p { margin: 0; }
.settings-group[data-setting-group=connections] .panelbody>details { width: 100%; margin-top: auto; }
.settings-cards .panelhead { flex-wrap: wrap; gap: 10px; }
.settings-cards .panelbody { font-size: 15px; }
.settings-cards .panelbody>p { color: var(--muted); }
.settings-cards .panelbody>.btn { margin-right: 6px; margin-bottom: 6px; }
.settings-cards label { display: block; font-size: 14px; margin: 16px 0; color: #43546a; }
.settings-cards label .field { margin-top: 8px; }
.settings-cards ol { padding-left: 21px; }
.settings-cards li+li { margin-top: 8px; }
.settings-cards details p { font-size: 14px; }
.settings-cards .wide-setting { grid-column: 1 / -1; }
.settings-cards>details { margin: 0; padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.settings-cards>details .panel { border: 0; margin-top: 16px; }
.settings-cards>details .panelhead, .settings-cards>details .panelbody { padding-left: 0; padding-right: 0; }
.settingrow { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.settingrow:last-child { border-bottom: 0; }
.settingrow>div:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.settingrow p { color: var(--muted); font-size: 14px; margin: 5px 0 0; }
.settingrow>.btn { flex-shrink: 0; }
.channel-panel .settingrow { display: grid; grid-template-columns: 160px minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.channel-panel .settingrow>label { margin: 0; font-size: 14px; }
.channel-panel .settingrow input { width: 100% !important; margin: 0; }
.channel-columns { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.audit { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; overflow-wrap: anywhere; }
.audit:last-child { border: 0; }
.audit small { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.audit p { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* Dialogs, status feedback and less common workflow tools. */
body.modal-open { overflow: hidden; }
.modalshade { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 28px; background: #14243b66; backdrop-filter: blur(4px); }
.modal { display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: calc(100dvh - 56px); border-radius: 16px; background: white; box-shadow: 0 24px 100px #12243b30; overflow: hidden; }
.modal header { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-shrink: 0; padding: 22px 28px; border-bottom: 1px solid var(--line); }
.modal h2 { font-size: 21px; letter-spacing: -.4px; }
.modal section { padding: 26px 28px; overflow-y: auto; min-height: 0; }
.modal footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; flex-shrink: 0; padding: 18px 28px; border-top: 1px solid var(--line); background: #fbfcfe; }
.modal label { display: block; margin-bottom: 20px; font-size: 14px; font-weight: 500; color: #43546a; }
.modal label input, .modal label select, .modal label textarea { margin-top: 8px; }
.modal p { font-size: 15px; line-height: 1.65; color: #526176; }
.modal .close { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 7px; background: transparent; font-size: 26px; color: var(--muted); }
.modal .close:hover { background: var(--soft); }
.modal .notice { margin-top: 16px; }
.diffcols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.operation-result { padding: 18px; background: var(--soft); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; max-height: 400px; overflow: auto; }
.premium-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 8px; margin: 20px 0; }
.emoji-choice { display: grid; place-items: center; min-height: 54px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); font-size: 26px; }
.emoji-choice:hover { background: var(--mint); border-color: #8faed3; }
.emoji-choice img { width: 36px; height: 36px; object-fit: contain; }
.inlineimg { width: 48px; height: 34px; border-radius: 4px; object-fit: contain; }
#toast { position: fixed; top: max(18px,env(safe-area-inset-top)); left: 50%; z-index: 2100; width: max-content; max-width: min(640px,calc(100vw - 32px)); padding: 14px 20px; border: 1px solid #3a506c; border-radius: 10px; background: #253b55; color: white; box-shadow: 0 6px 25px #14243b26; font-size: 14px; line-height: 1.5; opacity: 0; transform: translate(-50%,-20px); pointer-events: none; transition: opacity .18s,transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%,0); }
.loading-screen { max-width: 680px; margin: 12vh auto; padding: 48px; text-align: center; background: white; border: 1px solid var(--line); border-radius: 16px; }
.loading-screen .mark { margin: 0 auto 24px; }
.loading-screen h1 { font-size: 27px; margin-bottom: 16px; }
.loading-screen p { color: var(--muted); }

/* Responsive behavior keeps actions and the complete material accessible. */
@media (min-width:1600px) { .content { padding-top: 48px; } }
@media (max-width:1180px) {
  .shell { grid-template-columns: 208px minmax(0,1fr); }
  .sidebar { width: 208px; padding-left: 12px; padding-right: 12px; }
  .brand { gap: 9px; padding: 0 6px; font-size: 14px; }
  .nav button { font-size: 13px; padding: 11px; gap: 9px; }
  .content { padding: 30px 28px 40px; }
  .topbar { padding-left: 28px; padding-right: 28px; }
  .editorgrid { gap: 18px; }
  .panelbody, .panelhead { padding: 20px; }
  .textedit { padding: 20px; }
  .previewwrap { padding: 18px; }
  #wizard-step-4 { gap: 18px; }
  .langs { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .lang { padding: 8px; column-gap: 5px; }
  .settings-cards { gap: 18px; }
  .table th, .table td { padding-left: 15px; padding-right: 15px; }
}
@media (max-width:980px) {
  .editorgrid { grid-template-columns: 1fr; }
  .focused-editor>div:last-child { position: static; }
  #wizard-step-4 { grid-template-columns: 1fr; }
  #wizard-step-4>.language-panel, #wizard-step-4>.language-inspector, #wizard-step-4>.translation-panel { grid-column: auto; grid-row: auto; }
  .language-panel .langs { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .settings-cards, .settings-group { grid-template-columns: 1fr; }
  .wizardfields { grid-template-columns: 1fr; gap: 20px; }
  .wizardsteps button { font-size: 13px; gap: 7px; }
  .reviewrows>div { grid-template-columns: 40px minmax(0,1fr); }
  .topbar>span { max-width: 55%; }
  .topright .pill { display: none; }
  .table th:first-child { width: 37%; }
  .table th:nth-child(2) { width: 29%; }
}
@media (max-width:860px) {
  .shell { display: block; }
  .sidebar { position: static; width: auto; padding: 16px 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; font-size: 15px; gap: 10px; }
  .brand small { font-size: 9px; margin-top: 3px; }
  .brand .mark { width: 34px; height: 34px; }
  .sidebottom { display: none; }
  .nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: 16px 0 0; }
  .nav button { flex-direction: column; gap: 5px; font-size: 11px; padding: 10px 4px; margin: 0; border-radius: 7px 7px 0 0; text-align: center; }
  .nav button.active { background: #f0f5fc; }
  .nav b { display: none; }
  .topbar { min-height: 48px; padding: 12px 20px; font-size: 12px; }
  .topbar>span { max-width: none; }
  .topright { font-size: 11px; }
  #saveLabel { max-width: 150px; }
  .content { padding: 28px 20px 36px; }
  .heading { gap: 16px; margin-bottom: 26px; align-items: flex-start; }
  h1 { font-size: 28px; }
  .editor-heading h1 { font-size: 25px; }
  .sub { font-size: 14px; }
  .wizardsteps { margin-bottom: 26px; }
  .wizardsteps button { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 8px 12px; font-size: 12px; }
  .wizardintro h2 { font-size: 21px; }
  .language-panel .langs { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .settings-cards { gap: 18px; }
  .modalshade { padding: 16px; }
  .modal { max-height: calc(100dvh - 32px); }
  .modal header, .modal section, .modal footer { padding: 20px; }
  .channel-panel .settingrow, .channel-columns { grid-template-columns: 140px minmax(0,1fr) minmax(0,1fr); gap: 12px; }
}
@media (max-width:540px) {
  .sidebar { padding-left: 16px; padding-right: 16px; }
  .nav button { font-size: 10px; }
  .topbar { padding: 12px 16px; gap: 12px; }
  .topbar .breadcrumb-prefix { display: none; }
  .field { font-size: 16px; }
  .content { padding: 24px 16px 32px; }
  .heading { flex-wrap: wrap; gap: 18px; }
  .heading>.btn { width: 100%; }
  .heading .buttons { width: 100%; }
  .editor-heading .buttons .btn { padding: 6px 0; border: 0; min-height: 30px; background: transparent; }
  h1 { font-size: 28px; }
  .editor-heading h1 { font-size: 25px; }
  .eyebrow { font-size: 10px; }
  .panel { border-radius: 10px; }
  .panelhead, .panelbody { padding: 18px; }
  .panelhead { flex-wrap: wrap; gap: 10px; }
  .panelhead h2 { font-size: 16px; }
  .materials-panel .panelhead { padding: 18px; }
  .search-wrap { width: 100%; max-width: none; }
  .material-filters { padding: 0 18px; gap: 22px; }
  .material-filters .btn { font-size: 13px; }
  .table { display: block; }
  .table thead { display: none; }
  .table tbody { display: block; }
  .table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 20px 18px; column-gap: 12px; row-gap: 13px; border-bottom: 1px solid var(--line); }
  .table tr:last-child { border-bottom: 0; }
  .table td, .table td:first-child { padding: 0; border: 0; width: auto; }
  .table td:first-child, .table td:nth-child(2) { grid-column: 1 / -1; }
  .table td:last-child { display: none; }
  .table td:nth-child(3)::before, .table td:nth-child(4)::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
  .material-title { font-size: 16px; }
  .titlecell small { font-size: 12px; margin-top: 5px; }
  .empty { padding: 36px 20px; }
  .wizardsteps button { padding-left: 4px; padding-right: 4px; font-size: 11px; }
  .wizardsteps i { width: 24px; height: 24px; }
  .wizardintro p { font-size: 14px; }
  .wizardfooter { padding: 12px; bottom: 8px; margin-top: 18px; }
  .wizardfooter .buttons { gap: 10px; flex-wrap: nowrap; }
  .wizardfooter .btn { font-size: 13px; min-height: 42px; padding: 9px 12px; }
  .wizardfooter .primary { flex: 1; max-width: 74%; }
  .textedit { min-height: 330px; max-height: 70vh; padding: 18px; font-size: 17px; }
  .editorbar { padding: 9px 12px; }
  .editorbar .langtag { display: none; }
  .editor-image-actions { padding: 16px; }
  .editorfoot { padding: 10px 18px; }
  .previewwrap { padding: 14px; }
  .tgcontent { padding: 16px; font-size: 16px; }
  .slug-input { display: block; }
  .slug-input input { width: 100%; min-width: 0; margin-top: 8px; }
  .language-panel .langs { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .lang { padding: 10px; min-height: 77px; }
  .language-inspector .panelbody { padding: 16px; }
  .language-inspector .previewwrap { padding: 12px; }
  .telegram-inspector .buttons { flex-direction: column; align-items: stretch; }
  .publishbar { padding: 18px; }
  .publishbar .buttons { width: 100%; }
  .publishbar .buttons .btn { width: 100%; }
  .eventrow { grid-template-columns: 1fr; }
  .types { flex-wrap: wrap; }
  .types button { font-size: 13px; }
  .settings-nav { gap: 22px; margin-bottom: 22px; }
  .settings-nav button { font-size: 14px; }
  .channel-columns { display: none; }
  .channel-panel .settingrow { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .channel-panel .settingrow>label { font-weight: 500; margin-bottom: 2px; }
  .modalshade { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); border-radius: 12px; }
  .modal header { padding: 18px; }
  .modal h2 { font-size: 19px; }
  .modal section { padding: 20px 18px; }
  .modal footer { padding: 16px 18px; }
  .modal footer .primary { flex: 1; }
  .diffcols { grid-template-columns: 1fr; }
  .premium-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .stats { gap: 8px; }
  .stat { padding: 12px; }
  .loading-screen { margin: 8vh 16px; padding: 28px 20px; }
}
@media (max-width:360px) { .language-panel .langs { grid-template-columns: repeat(2,minmax(0,1fr)); } .editorfoot { flex-wrap: wrap; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Source metadata and the original Telegram emoji remain visible while editing. */
.article-link-panel label { display:block; font-size:14px; font-weight:500; color:#43546a; margin-bottom:14px; }
.article-link-panel select, .article-link-panel input { margin-top:8px; }
.article-address { display:block; overflow-wrap:anywhere; font-size:14px; }
.import-result { color:var(--success,#24644d); font-size:14px; margin:0 0 16px; }
.emoji-loading { color:var(--muted); font-size:20px; }
.emoji-unavailable { font-size:10px; color:var(--muted); padding:4px; }
.editorbar .ui-icon { width:16px; height:16px; flex:none; }
tg-emoji.premium-rendered { display:inline-block; width:1.25em; height:1.25em; vertical-align:-.24em; background-size:contain; background-repeat:no-repeat; background-position:center; color:transparent; user-select:all; overflow:hidden; white-space:nowrap; }
@media(max-width:980px) { #wizard-step-4>.language-panel, #wizard-step-4>.language-inspector, #wizard-step-4>.translation-panel { grid-column:auto; grid-row:auto; } }

@media(min-width:981px) { .article-link-panel .panelbody { display:grid; grid-template-columns:minmax(170px,1fr) minmax(280px,2fr); column-gap:20px; } .article-link-panel .panelbody>p,.article-link-panel .article-address { grid-column:1 / -1; } .article-link-panel .slug-input { margin-top:8px; padding:0; background:transparent; } .article-link-panel .slug-input span { font-size:12px; } .article-link-panel .slug-input input { margin:0; } }
/* Delivery history and per-post/bulk controls. */
.delivery-panel{scroll-margin-top:24px}
.delivery-panel .panelhead{gap:16px;align-items:center}
.delivery-toolbar{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:16px 24px;background:#f7f9fa;border-bottom:1px solid #e1e7ec;flex-wrap:wrap}
.delivery-toolbar .buttons,.delivery-actions{display:flex;flex-wrap:wrap;gap:8px}
.delivery-group+.delivery-group{margin-top:28px}
.delivery-group-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.delivery-group-heading h3{margin:0;font-size:16px}
.delivery-group-heading label{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:#536175}
.delivery-row{padding:18px 0;border-top:1px solid #e1e7ec}
.delivery-heading{display:flex;align-items:flex-start;gap:12px}
.delivery-heading input{margin-top:5px;flex-shrink:0}
.delivery-info{min-width:0;overflow-wrap:anywhere}
.delivery-info b{font-size:15px}.delivery-info p{margin:5px 0}.delivery-info small{font-size:12px;color:#68778a}
.delivery-state{font-size:14px}.delivery-dirty{color:#237461;font-size:13px}
.delivery-actions{margin-top:12px}.delivery-actions .btn{white-space:normal}
.delivery-panel input[type=checkbox]{width:17px;height:17px;accent-color:#237461}
.delivery-confirm-list>div,.delivery-result{padding:14px 0;border-bottom:1px solid #e1e7ec;overflow-wrap:anywhere}
.delivery-confirm-image{display:block;max-width:100%;max-height:260px;margin:12px auto;object-fit:contain;border-radius:10px}
.delivery-confirm-list .tgcontent{padding:12px;background:#f7f9fa;border-radius:10px}
.channel-access-row{display:flex;gap:12px;flex-wrap:wrap;padding:8px 0;font-size:13px}.channel-access-row b{min-width:28px}
@media(max-width:600px){.delivery-toolbar{padding:14px 16px}.delivery-toolbar>.buttons{width:100%}.delivery-toolbar .btn{flex:1;white-space:normal}.delivery-actions{display:grid;grid-template-columns:1fr 1fr}.delivery-actions .btn{min-width:0;font-size:12px;padding:10px 8px}.delivery-info b{font-size:14px}.delivery-panel .panelhead{align-items:flex-start}.delivery-panel .panelhead>.btn{flex-shrink:0}.delivery-group-heading{align-items:flex-start}}

/* Two deliberate palettes, including dialogs, previews and form controls. */
.theme-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}
.theme-switch button{display:flex;align-items:center;gap:6px;padding:6px 9px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:12px;line-height:1.4;min-height:30px}
.theme-switch button[aria-pressed=true]{background:var(--white);color:var(--ink);box-shadow:0 1px 4px #00000012}
.theme-switch .ui-icon{width:15px;height:15px}
:root[data-theme=dark]{color-scheme:dark;--bg:#11171f;--white:#1b2430;--ink:#e5ebf3;--muted:#acbbcf;--line:#354356;--green:#93bff1;--mint:#243b53;--gold:#e5bb78;--blue:#93bff1;--blue-hover:#366ba6;--soft:#222e3d;--success:#83d6b5}
html[data-theme=dark] ::selection{background:#31587f;color:#fff}
html[data-theme=dark] :is(.sidebar,.topbar,.pill,.panel,.panelhead,.stat,.tg,.lang,.publishbar,.delivery-options,.legacy-setting,.settings-cards>details,.modal,.loading-screen,.skip-link){background:var(--white)}
html[data-theme=dark] :is(.nav button,.demo-note strong,.tool,.label,summary,.modal label,.modal p,.settings-cards label,.wizardfields label,.language-inspector label,.params-panel label,.article-link-panel label,.delivery-group-heading label){color:var(--muted)}
html[data-theme=dark] .nav button.active{background:var(--mint);color:var(--blue)}
html[data-theme=dark] .nav b{background:#334f70;color:#c1dbfa}
html[data-theme=dark] .avatar{background:var(--soft);color:var(--muted)}
html[data-theme=dark] .btn{background:var(--white);border-color:#53657c;color:#d8e3f2}
html[data-theme=dark] .btn:hover{background:#28384c;border-color:#7e97b6}
html[data-theme=dark] .btn.primary{background:#326aa8;border-color:#5188c7;color:#fff}
html[data-theme=dark] .btn.primary:hover{background:#3976b8}
html[data-theme=dark] .btn.danger{color:#ffabb2;border-color:#8d555f;background:#33232d}
html[data-theme=dark] .btn.danger:hover{background:#4a2934;border-color:#bd7886}
html[data-theme=dark] .field{background:#141d28;border-color:#53657c;color:var(--ink)}
html[data-theme=dark] .field:hover{border-color:#7e97b6}
html[data-theme=dark] .field:focus{border-color:#93bff1;outline-color:#324e70}
html[data-theme=dark] .field::placeholder,html[data-theme=dark] .textedit:empty:before{color:#94a5bc}
html[data-theme=dark] input::file-selector-button{color:var(--blue)}
html[data-theme=dark] .badge{background:#203d36;color:#9adfc4}
html[data-theme=dark] .badge.gray{background:var(--soft);color:var(--muted)}
html[data-theme=dark] :is(.badge.warn,.missing){background:#3a3023;color:#f0c987}
html[data-theme=dark] .badge.info{background:var(--mint);color:#c1dbfa}
html[data-theme=dark] :is(.badge.error,.errorbox){background:#412832;color:#ffb6bd;border-color:#80505d}
html[data-theme=dark] :is(.over,#saveLabel[data-state=error]){color:#ffb6bd}
html[data-theme=dark] :is(.notice,.wizardhint,.import-explanation,.formintro){background:#24384e;color:#cadbf0;border-color:#3c536d}
html[data-theme=dark] .notice.errorbox{background:#412832;color:#ffb6bd;border-color:#80505d}
html[data-theme=dark] :is(.search,.table th,.editorbar,.modal footer,.types,.delivery-toolbar,.delivery-confirm-list .tgcontent){background:var(--soft)}
html[data-theme=dark] .table tbody tr:hover{background:#233145}
html[data-theme=dark] :is(.table td,.wizardsteps,.settings-nav,.delivery-row,.delivery-toolbar,.delivery-confirm-list>div,.delivery-result){border-color:var(--line)}
html[data-theme=dark] .material-filters .btn{background:transparent;color:var(--muted);border-color:transparent}
html[data-theme=dark] .material-filters .btn.primary{color:var(--blue);border-bottom-color:var(--blue)}
html[data-theme=dark] .wizardsteps button.current{color:var(--blue)}
html[data-theme=dark] .wizardsteps i{background:#303e51;color:var(--muted)}
html[data-theme=dark] .wizardsteps .current i{background:#326aa8;color:#fff}
html[data-theme=dark] .wizardsteps .complete:not(.current) i{background:#203d36;color:#9adfc4}
html[data-theme=dark] .wizardfooter{background:#1b2430f5;border-color:var(--line);box-shadow:0 6px 25px #00000030}
html[data-theme=dark] .types button.active{background:#304158;border-color:#53657c}
html[data-theme=dark] :is(.textedit a,.tgcontent a){color:#9ac9ff}
html[data-theme=dark] .asset{background:#18212e;border-color:#53657c}
html[data-theme=dark] .previewwrap{background:#121c28}
html[data-theme=dark] :is(.previewtop,.tgmeta,.tgbottom,.delivery-info small){color:var(--muted)}
html[data-theme=dark] .tg{box-shadow:0 2px 6px #00000022}
html[data-theme=dark] .lang:hover{background:#28384c;border-color:#7e97b6}
html[data-theme=dark] .lang.active{background:#243b53;border-color:#93bff1;box-shadow:inset 0 0 0 1px #93bff1}
html[data-theme=dark] .revision-color-guide p:first-child{background:#203d36}
html[data-theme=dark] .revision-color-guide p:last-child{background:#3a3023}
html[data-theme=dark] .delivery-dirty{color:var(--success)}
html[data-theme=dark] .modalshade{background:#060b12b3}
html[data-theme=dark] .modal{box-shadow:0 24px 100px #00000066}
html[data-theme=dark] .theme-switch button[aria-pressed=true]{background:#35475f;color:#eef4fc}
html[data-theme=dark] #toast{background:#314965;border-color:#7189a7;color:#fff}
@media(max-width:1180px){.theme-switch button span{display:none}.theme-switch button{padding:7px}.topright{gap:10px}}
@media(max-width:540px){.topbar{flex-wrap:wrap}.topright{flex:1;justify-content:space-between}.theme-switch{margin-left:auto}.topbar>span{max-width:100%}.topright #saveLabel{max-width:170px}}

/* Contextual help stays outside panel clipping and within the viewport. */
.help-trigger{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:32px;height:32px;margin:-3px 0 -3px 5px;padding:6px;flex-shrink:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:help;touch-action:manipulation}
.help-trigger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.help-trigger .help-dot{fill:currentColor;stroke:none}
.help-trigger:hover,.help-trigger[aria-expanded=true]{color:var(--blue);background:var(--soft)}
.help-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.help-popover{position:fixed;z-index:2000;box-sizing:border-box;width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);box-shadow:0 10px 34px #00000024;font-family:inherit;font-size:14px;font-weight:400;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
html[data-theme=dark] .help-popover{background:#253244;border-color:#53657c;box-shadow:0 12px 36px #00000050}
@media(pointer:coarse),(max-width:600px){.help-trigger{width:44px;height:44px;padding:12px;margin-top:-8px;margin-bottom:-8px;cursor:pointer}}

/* Current-post diagnostics stay compact and link directly to the affected draft. */
.translation-result{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.translation-diagnostics{margin:14px 0;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.translation-diagnostics summary{padding:12px 16px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink)}
.translation-issues{padding:0 16px 14px;display:grid;gap:12px}
.translation-issue{padding-top:12px;border-top:1px solid var(--line)}
.translation-issue p{font-size:14px;line-height:1.6;margin:0 0 10px;overflow-wrap:anywhere}
.translation-issue .buttons{gap:8px;margin:0}
.language-panel .buttons{flex-wrap:wrap}
.lang .state{white-space:normal;line-height:1.4}
@media(max-width:600px){.translation-issue .btn{min-height:44px}.language-panel .buttons .btn{max-width:100%;white-space:normal;text-align:left}}