:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --soft: #fbfcff;
  --ink: #172033;
  --muted: #5c6a7d;
  --line: #dce3ee;
  --accent: #2057c8;
  --accent-soft: #edf4ff;
  --good: #1e7d4a;
  --bad: #b4413c;
  --warn: #9b6818;
  --shadow: 0 10px 30px rgba(24, 36, 60, 0.07);
  --radius-lg: 22px;
  --mk-glyph-size: 32px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at top left, rgba(32,87,200,.10), transparent 35%), linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell { max-width: 1220px; margin: 0 auto; padding: 24px; }

.topbar {
  display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 18px;
}

.brand { display: flex; flex-direction: column; gap: 2px; }
.brand-title { font-weight: 850; font-size: 22px; }
.brand-subtitle { color: var(--muted); font-size: 13px; }

.nav { display: flex; gap: 10px; flex-wrap: wrap; }
.nav a, button, .button, select, input {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  text-decoration: none; border-radius: 14px; padding: 10px 14px;
  cursor: pointer; font-weight: 750; font-size: 14px;
}
.nav a.active, button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: white; }

.hero, .panel {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero { padding: 28px; margin-bottom: 16px; }
.hero h1 { margin: 0 0 10px; font-size: clamp(32px, 5vw, 58px); line-height: 1.02; letter-spacing: -0.04em; }
.hero p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.65; font-size: 16px; }

.panel { padding: 18px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }

textarea {
  width: 100%; min-height: 360px; resize: vertical; border: 1px solid var(--line);
  border-radius: 18px; padding: 18px; font: inherit; font-size: 24px; line-height: 1.65;
  color: var(--ink); background: #fff;
}
textarea:focus { outline: none; border-color: rgba(32,87,200,.45); box-shadow: 0 0 0 4px rgba(32,87,200,.08); }

.display-page {
  min-height: 420px; background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: 34px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.display-page.exporting {
  border-radius: 0;
  box-shadow: none;
  border: 0;
}

.display-placeholder {
  white-space: pre-wrap;
  color: #4f5e72;
  font-size: 25px;
  line-height: 1.6;
}

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; align-items: center; }

.size-control, .export-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 8px 10px;
}

.size-control label, .export-control label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.size-control input {
  width: 78px;
  padding: 6px 8px;
  border-radius: 10px;
}

.export-control input {
  min-width: 170px;
  padding: 6px 8px;
  border-radius: 10px;
}

.size-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.notice {
  color: var(--muted); background: var(--accent-soft); border: 1px solid #d8e6ff;
  border-radius: 16px; padding: 12px 14px; line-height: 1.5;
}

pre {
  background: #101827; color: #dbe7ff; padding: 16px; border-radius: 16px;
  overflow: auto; max-height: 560px; font-size: 12px;
}

.status-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--soft); }
.card .k { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; font-weight: 850; letter-spacing: .04em; }
.card .v { display: block; font-size: 28px; font-weight: 850; margin-top: 5px; }

/* glyph rendering */
.mk-rendered-paragraph {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--mk-glyph-size) * 0.55) calc(var(--mk-glyph-size) * 0.45);
  font-size: max(12px, calc(var(--mk-glyph-size) * 0.38));
  line-height: 1.4;
}

.mk-glyph-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: bottom;
  gap: max(3px, calc(var(--mk-glyph-size) * 0.10));
}

.mk-glyph-cluster {
  display: inline-flex;
  align-items: flex-end;
  gap: max(2px, calc(var(--mk-glyph-size) * 0.06));
}

.mk-spacing-tight_word .mk-glyph-cluster { gap: max(1px, calc(var(--mk-glyph-size) * 0.03)); }
.mk-spacing-single .mk-glyph-cluster { gap: max(2px, calc(var(--mk-glyph-size) * 0.06)); }

/* render_unit_type = glyph_word support */
.mk-ru-type-glyph_word .mk-glyph-cluster {
  gap: max(1px, calc(var(--mk-glyph-size) * 0.02));
}

.mk-ru-type-single_component .mk-glyph-cluster {
  gap: max(2px, calc(var(--mk-glyph-size) * 0.06));
}

/* component role styling for glyph-word composition */
.mk-role-root img,
.mk-role-head img {
  width: auto;
  height: var(--mk-glyph-size);
  max-width: calc(var(--mk-glyph-size) * 1.35);
}

.mk-role-marker img,
.mk-role-person_marker img,
.mk-role-tense_marker img,
.mk-role-case_marker img,
.mk-role-number_marker img,
.mk-role-gender_marker img,
.mk-role-suffix_marker img,
.mk-role-prefix_marker img {
  width: auto;
  height: calc(var(--mk-glyph-size) * 0.68);
  max-width: calc(var(--mk-glyph-size) * 1.05);
  opacity: 0.92;
}

.mk-role-person_marker,
.mk-role-tense_marker,
.mk-role-suffix_marker {
  align-self: flex-end;
  transform: translateY(6%);
}

.mk-role-prefix_marker {
  align-self: flex-start;
  transform: translateY(-4%);
}

.mk-role-marker {
  transform: translateY(5%);
}

.mk-role-marker .mk-glyph-box,
.mk-role-person_marker .mk-glyph-box,
.mk-role-tense_marker .mk-glyph-box,
.mk-role-case_marker .mk-glyph-box,
.mk-role-number_marker .mk-glyph-box,
.mk-role-gender_marker .mk-glyph-box,
.mk-role-suffix_marker .mk-glyph-box,
.mk-role-prefix_marker .mk-glyph-box {
  min-width: calc(var(--mk-glyph-size) * 0.68);
  min-height: calc(var(--mk-glyph-size) * 0.68);
  font-size: max(9px, calc(var(--mk-glyph-size) * 0.24));
}


.mk-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mk-glyph img {
  display: block;
  width: auto;
  height: var(--mk-glyph-size);
  max-width: calc(var(--mk-glyph-size) * 1.35);
}

.mk-glyph-box {
  min-width: var(--mk-glyph-size);
  min-height: var(--mk-glyph-size);
  border: 1px dashed var(--line);
  border-radius: max(8px, calc(var(--mk-glyph-size) * 0.18));
  background: #fbfcff;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: max(4px, calc(var(--mk-glyph-size) * 0.08));
  font-weight: 850;
  text-align: center;
  overflow-wrap: anywhere;
}

.mk-glyph-label {
  color: var(--muted);
  font-size: max(10px, calc(var(--mk-glyph-size) * 0.34));
  font-weight: 750;
  max-width: calc(var(--mk-glyph-size) * 2.6);
  text-align: center;
  line-height: 1.15;
}

.mk-unresolved-box {
  color: #9d3b35;
  background: #fff8f8;
}

.mk-punctuation {
  display: inline-flex;
  min-height: var(--mk-glyph-size);
  align-items: center;
  color: var(--muted);
  font-weight: 850;
}

/* admin diagnostics */
.admin-layout {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
}

.admin-preview {
  min-height: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  margin-top: 12px;
}

.debug-cards {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.debug-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
  padding: 14px;
}

.debug-card-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.debug-token {
  font-weight: 900;
  font-size: 20px;
}

.badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.badge-good { color: var(--good); background: rgba(30,125,74,.10); border: 1px solid rgba(30,125,74,.20); }
.badge-bad { color: var(--bad); background: rgba(180,65,60,.10); border: 1px solid rgba(180,65,60,.20); }
.badge-warn { color: var(--warn); background: rgba(155,104,24,.10); border: 1px solid rgba(155,104,24,.20); }

.kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kv {
  border: 1px solid #e7edf6;
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 0;
}

.kv .key {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 850;
}

.kv .val {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.asset-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.asset-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e7edf6;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
}

.asset-row img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.asset-path {
  font-size: 12px;
  overflow-wrap: anywhere;
  color: var(--muted);
}

/*
Ambiguity UI styles. Add these to your public CSS if not already present.
*/

.mk-ambiguous .mk-glyph-cluster {
  outline: 1px dashed rgba(155, 104, 24, .55);
  outline-offset: 3px;
  border-radius: 8px;
}

.mk-needs-review .mk-glyph-cluster {
  outline: 2px solid rgba(180, 65, 60, .35);
}

.mk-ambiguity-panel {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.mk-ambiguity-card {
  border: 1px solid #dfe6f1;
  border-radius: 14px;
  padding: 10px;
  background: #ffffff;
}

.mk-ambiguity-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.mk-amb-badge {
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid #dfe6f1;
  font-size: 12px;
  font-weight: 800;
}

.mk-amb-badge.mk-warn {
  color: #9b6818;
  background: rgba(155, 104, 24, .08);
}

.mk-ambiguity-meta,
.mk-ambiguity-hint {
  color: #617086;
  font-size: 12px;
  margin: 5px 0;
}

.mk-candidate-select {
  width: 100%;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  padding: 8px;
  background: white;
}


@media (max-width: 860px) {
  .grid-2, .admin-layout { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .status-cards, .kv-grid { grid-template-columns: 1fr; }
  .shell { padding: 14px; }
}