:root {
  --navy: #142a38;
  --navy-2: #1e3a4b;
  --navy-3: #315367;
  --paper: #f5f5f1;
  --paper-2: #fbfcfa;
  --ink: #153447;
  --muted: #6d8390;
  --line: #d6e0e1;
  --teal: #4d9187;
  --teal-dark: #357a73;
  --gold: #e0af5c;
  --red: #b36252;
  --shadow: 0 10px 26px rgba(27, 58, 72, .08);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex: 0 0 258px; flex-direction: column; width: 258px; min-height: 100vh; padding: 29px 18px 22px; color: #dce8ec; background: var(--navy); }
.sidebar-brand { position: relative; display: block; padding: 0 12px; }
.brand-seal img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.brand-seal { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); border-radius: 9px; color: #fff; background: var(--red); font-family: "Noto Serif SC", serif; font-size: 24px; }
.sidebar-brand .brand-seal { margin-bottom: 12px; }
.sidebar-brand strong, .sidebar-brand small, .brand-kicker { display: block; }
.brand-kicker { margin-top: 2px; color: #a9bec6; font-size: 10px; letter-spacing: .2em; }
.sidebar-brand strong { margin-top: 4px; color: #fff; font-family: "Noto Serif SC", serif; font-size: 21px; font-weight: 600; letter-spacing: .08em; overflow-wrap: anywhere; }
.sidebar-brand small { margin-top: 5px; color: #9eb3bd; font-size: 11px; }
.sidebar-heading { margin: 38px 14px 12px; color: #829da8; font-size: 10px; letter-spacing: .18em; }
.system-nav { display: grid; gap: 10px; }
.system-nav-item { position: relative; min-width: 0; }
.system-nav-item.is-editable .system-button { padding-right: 39px; }
.sidebar-edit-button { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid transparent; border-radius: 5px; color: #a4adb3; background: transparent; font-size: 19px; transition: color .16s ease, background .16s ease; }
.sidebar-edit-button:hover { color: #fff; background: rgba(255,255,255,.1); }
.system-nav-item > .sidebar-edit-button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.brand-edit-button { position: absolute; right: 0; top: 79px; }
.sidebar-brand.is-editable { padding-right: 30px; }
.sidebar-brand.is-editable strong { font-size: 19px; letter-spacing: .02em; }
.add-system-button { display: block; flex: 0 0 auto; width: 100%; min-height: 43px; margin: 10px 0 20px; border: 1px dashed #647682; border-radius: 8px; color: #a4adb3; background: transparent; font-size: 27px; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.add-system-button:hover { border-color: #b0c6cf; color: #fff; background: rgba(255,255,255,.06); }
.system-button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 13px; border: 0; border-left: 3px solid transparent; border-radius: 9px; color: #cedee3; background: transparent; text-align: left; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.system-button:hover { background: rgba(255,255,255,.08); color: #fff; }
.system-button.active { border-left-color: var(--gold); color: #fff; background: rgba(109, 147, 163, .34); }
.system-icon { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border: 1px solid #73909b; border-radius: 7px; color: #edf5f6; font-family: "Noto Serif SC", serif; font-size: 13px; }
.system-icon.has-image { position: relative; width: 34px; height: 34px; border: 0; border-radius: 0; }
.system-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.system-button span:last-child { min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.sidebar-footer { margin-top: auto; padding: 20px 12px 0; border-top: 1px solid rgba(218,239,245,.16); color: #a4b9c1; font-size: 11px; line-height: 1.8; }
.sidebar-footer strong, .sidebar-footer span { display: block; }
.sidebar-footer strong { color: #d7e5e8; }

.main-shell { min-width: 0; flex: 1; }
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 28px 19px; border-bottom: 1px solid #dce2df; background: var(--paper); }
.topbar-copy { margin-left: 0; }
.eyebrow { color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.topbar h1 { margin: 6px 0 4px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 31px; font-weight: 600; letter-spacing: .08em; }
.topbar p { margin: 0; color: var(--muted); font-size: 12px; }
.topbar-actions { position: absolute; top: 20px; right: 28px; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.read-only-badge { display: inline-flex; align-items: center; flex: 0 0 auto; margin-top: 0; padding: 7px 11px; border: 1px solid #dfe2d9; border-radius: 4px; color: #a16d47; background: #fffdf7; font-size: 11px; white-space: nowrap; }
.read-only-badge > span:first-child { display: inline-block; flex: 0 0 6px; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #6a9a8c; }
.login-link { color: var(--teal-dark); font-size: 11px; white-space: nowrap; }
.login-link:hover { text-decoration: underline; }
.toolbar-action { min-height: 32px; padding: 0 10px; border: 1px solid #d5e0e1; border-radius: 5px; color: var(--teal-dark); background: #fff; font-size: 11px; white-space: nowrap; }
.toolbar-action:hover { border-color: var(--teal); }
.toolbar-action.danger-action { color: #a66157; }
.toolbar-action.edit-mode-button.active { border-color: var(--navy-2); color: #fff; background: var(--navy-2); }
.mobile-menu { display: none; width: 34px; height: 34px; border: 1px solid var(--line); color: var(--ink); background: #fff; }
.workspace { padding: 22px 28px 48px; }

.topbar.has-system-cover { --cover-base: #171e2d; --cover-accent: #9fc7ed; position: relative; isolation: isolate; min-height: 248px; overflow: hidden; align-items: flex-end; padding: 32px 36px; border-bottom: 2px solid var(--cover-accent); background: var(--cover-base); }
.topbar[data-system="red"] { --cover-base: #271816; --cover-accent: #eda282; }
.topbar[data-system="green"] { --cover-base: #17241d; --cover-accent: #d4df9b; }
.topbar[data-system="white"] { --cover-base: #17252c; --cover-accent: #d4e7e8; }
.topbar[data-system="gold"] { --cover-base: #332313; --cover-accent: #f1c96a; }
.system-cover { position: absolute; z-index: -3; top: 0; right: 0; width: 72%; height: 100%; object-fit: cover; object-position: center; }
.topbar[data-system="gold"] .system-cover { object-position: center top; }
.topbar.has-system-cover::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, var(--cover-base) 0%, var(--cover-base) 31%, color-mix(in srgb, var(--cover-base) 85%, transparent) 39%, color-mix(in srgb, var(--cover-base) 52%, transparent) 49%, color-mix(in srgb, var(--cover-base) 20%, transparent) 61%, transparent 72%), linear-gradient(0deg, rgba(4, 12, 17, .36), transparent 65%); pointer-events: none; }
.topbar.has-system-cover::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(7, 15, 22, .35), transparent 45%); pointer-events: none; }
.has-system-cover .topbar-copy { max-width: 46%; padding-top: 50px; }
.has-system-cover .eyebrow { color: var(--cover-accent); font-size: 10px; letter-spacing: .23em; }
.has-system-cover h1 { margin: 12px 0 14px; color: #fffaf2; font-size: 34px; letter-spacing: .12em; text-shadow: 0 2px 15px rgba(0,0,0,.16); }
.has-system-cover h1::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 15px; background: var(--cover-accent); }
.has-system-cover .topbar-copy p { color: #e3e5df; font-size: 12px; line-height: 1.8; }
.has-system-cover .topbar-actions { position: absolute; top: 20px; right: 28px; }
.has-system-cover .toolbar-action { border-color: rgba(255,255,255,.27); color: #f4f4eb; background: rgba(12,23,29,.7); }
.has-system-cover .toolbar-action:hover { border-color: var(--cover-accent); background: rgba(12,23,29,.9); }
.has-system-cover .read-only-badge { border-color: rgba(255,255,255,.22); color: #f1e9d8; background: rgba(12,23,29,.7); }
.has-system-cover .edit-mode-button.active { border-color: var(--cover-accent); color: #fff; background: rgba(12,23,29,.85); }

@media (min-width: 1700px) { .topbar.has-system-cover { min-height: 270px; } .system-cover { width: 68%; } }
@media (max-width: 1080px) { .topbar.has-system-cover { padding-inline: 24px; } .has-system-cover .topbar-copy { max-width: 55%; } .system-cover { width: 85%; } }
@media (max-width: 860px) { .has-system-cover .mobile-menu { position: absolute; top: 20px; left: 20px; border-color: rgba(255,255,255,.3); border-radius: 5px; color: #fff; background: rgba(12,23,29,.7); } }
@media (max-width: 620px) {
  .topbar.has-system-cover { min-height: 272px; padding: 100px 22px 24px; }
  .system-cover { width: 100%; object-position: 57% center; }
  .topbar[data-system="gold"] .system-cover { object-position: 15% top; }
  .topbar.has-system-cover::before { background: linear-gradient(0deg, var(--cover-base), rgba(7,15,22,.6) 43%, rgba(7,15,22,.08) 80%); }
  .has-system-cover .topbar-copy { max-width: 100%; padding-top: 0; align-self: flex-end; }
  .has-system-cover h1 { font-size: 30px; margin-top: 10px; }
  .has-system-cover .topbar-copy p { max-width: 100%; font-size: 12px; }
  .has-system-cover .topbar-actions { top: 20px; right: 14px; gap: 6px; }
}

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-card { min-height: 86px; padding: 14px 18px; border: 1px solid #dde4e2; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.stat-card strong, .stat-card span { display: block; }
.stat-card strong { color: var(--ink); font-size: 30px; font-weight: 700; line-height: 1.05; }
.stat-card span { margin-top: 6px; color: var(--muted); font-size: 12px; }

.filters-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 21px; padding: 14px; border: 1px solid #dde4e2; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.search-field, .select-field { display: flex; align-items: center; height: 37px; border: 1px solid #d4dfe0; border-radius: 6px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.search-field:hover, .select-field:hover { border-color: var(--teal); box-shadow: 0 3px 10px rgba(53, 122, 115, .10); }
.search-field:focus-within, .select-field:focus-within { border-color: var(--teal-dark); box-shadow: 0 0 0 3px rgba(77, 145, 135, .14); }
.search-field { flex: 0 0 240px; width: 240px; min-width: 200px; }
.search-field span { padding-left: 12px; color: var(--teal-dark); font-size: 22px; line-height: 1; }
.search-field input { width: 100%; padding: 0 10px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-field input::placeholder { color: #8aa0aa; }
.select-field { position: relative; flex: 0 0 auto; min-width: 165px; overflow: hidden; }
.select-field::after { content: ""; position: absolute; top: 13px; right: 13px; width: 7px; height: 7px; border-right: 2px solid #547783; border-bottom: 2px solid #547783; transform: rotate(45deg); pointer-events: none; transition: border-color .16s ease, transform .16s ease; }
.select-field:hover::after, .select-field:focus-within::after { border-color: var(--teal-dark); }
.select-field:focus-within::after { transform: rotate(225deg) translate(-2px, -2px); }
.select-field select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; min-width: 165px; padding: 0 36px 0 11px; border: 0; outline: 0; color: var(--ink); background: transparent; cursor: pointer; }
.check-field { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; color: #58707b; font-size: 12px; white-space: nowrap; }
.check-field input { accent-color: var(--teal-dark); }
.clear-button { height: 37px; padding: 0 12px; border: 1px solid #d4dfe0; border-radius: 6px; color: #52717b; background: #fff; }
.clear-button:hover { border-color: var(--teal); color: var(--teal-dark); }

.content-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; }
.view-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.view-tab, .canvas-tools button { min-height: 35px; padding: 0 12px; border: 1px solid #d5e0e1; border-radius: 6px; color: #597480; background: #fff; font-size: 12px; }
.view-tab:hover, .canvas-tools button:hover { border-color: var(--teal); color: var(--teal-dark); }
.view-tab.active { border-color: var(--navy-2); color: #fff; background: var(--navy-2); }
.canvas-tools { display: flex; align-items: center; gap: 7px; }
.canvas-tools button { min-width: 35px; }
.canvas-tools button[data-action="zoom-out"], .canvas-tools button[data-action="zoom-in"] { padding: 0; font-size: 18px; }
.canvas-tools span { min-width: 34px; color: #6b8490; font-size: 11px; text-align: center; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 20px 2px 10px; }
.section-heading h2 { margin: 0; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 19px; font-weight: 600; letter-spacing: .07em; }
.section-heading h2 span { color: var(--red); }
.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.section-heading-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.data-tools { position: fixed; top: 64px; right: 0; z-index: 25; }
.data-tools-toggle { position: relative; width: 25px; height: 48px; padding: 0; border: 1px solid #8c9d9f; border-right: 0; border-radius: 7px 0 0 7px; color: #e9f1ef; background: rgba(20,42,56,.85); box-shadow: -2px 3px 10px rgba(0,0,0,.12); font-size: 0; line-height: 1; }
.data-tools-toggle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 12px; background: currentColor; clip-path: polygon(65% 0, 85% 20%, 45% 50%, 85% 80%, 65% 100%, 15% 50%); transform: translate(-50%, -50%); }
.data-tools-toggle[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(180deg); }
.data-tools-toggle:hover, .data-tools-toggle[aria-expanded="true"] { color: #fff; background: var(--navy-2); }
.data-tools-panel { position: absolute; top: 0; right: 36px; width: 252px; max-height: calc(100dvh - 80px); overflow-y: auto; padding: 18px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fbfcfa; box-shadow: 0 12px 36px rgba(13,35,46,.2); }
.data-tools-panel h2 { margin: 0 0 6px; font-size: 15px; }
.data-tools-panel p { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.data-tools-panel > button { display: block; width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; text-align: left; font-size: 13px; }
.data-tools-panel > button + button { margin-top: 7px; }
.data-tools-panel > button:hover { border-color: var(--teal); background: #f1f7f5; }
.data-tools-panel button span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.data-tools-panel .data-snapshot-time { margin: 12px 0 0; }
.data-tools-panel > button:disabled { opacity: .5; cursor: default; }
.topbar:not(.has-system-cover) .topbar-copy { padding-top: 32px; }
@media (max-width: 620px) {
  .topbar .read-only-badge { display: inline-flex; padding: 7px 8px; font-size: 10px; }
  .section-heading .section-heading-actions { align-self: stretch; }
  .topbar:not(.has-system-cover) .topbar-copy { padding-top: 42px; }
}
.legend { display: flex; gap: 13px; color: #71858f; font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }
.legend-dot.vacant-dot { background: #d9e3e3; border: 1px solid #98abad; }

.view-container { min-height: 530px; }
.tree-viewport { position: relative; height: min(68vh, 720px); min-height: 530px; max-height: 720px; overflow: auto; border: 1px solid #d6e1e1; border-radius: 10px; background-color: #fafcfb; background-image: linear-gradient(#edf3f1 1px, transparent 1px), linear-gradient(90deg, #edf3f1 1px, transparent 1px); background-size: 32px 32px; }
.tree-inner { position: relative; min-width: 0; padding: 42px 36px 62px; margin-inline: auto; transform-origin: top center; }
.tree-root { position: relative; width: max(330px, var(--tree-content-width, 330px)); margin: 0 auto 43px; }
.tree-root > .root-node { width: 330px; margin-inline: auto; }
.tree-root::after { display: none; }
.tree-level { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 18px; width: max-content; min-width: 100%; padding-top: 1px; }
.tree-level::before { display: none; }
.institution-branch { position: relative; flex: 0 0 var(--branch-width, 205px); width: var(--branch-width, 205px); min-width: var(--branch-width, 205px); }
.institution-column { position: relative; min-width: 0; padding-top: 28px; }
.institution-column > .node-card { width: 205px; margin-inline: auto; }
.institution-column::before, .institution-branch.has-children > .institution-column::after { display: none; }
.subtree-children { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 18px; width: 100%; min-width: 100%; margin-top: 112px; margin-left: 0; padding-top: 28px; }
.subtree-children::before, .subtree-children > .institution-branch::before { display: none; }
.tree-connectors { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; }
.tree-connectors path { fill: none; stroke: #a6c0c0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tree-root, .tree-level { z-index: 1; }
.node-card { position: relative; border: 1px solid #d6e1e2; border-top: 3px solid var(--teal); border-radius: 8px; background: #fff; box-shadow: 0 5px 14px rgba(35, 74, 87, .06); }
.node-card.system-node { border-top-color: var(--navy-2); }
.node-card.root-node { border-top-color: var(--red); }
.node-card.group-blue { --group-color: #6395c7; }
.node-card.group-red { --group-color: #c45155; }
.node-card.group-green { --group-color: #6f9e4c; }
.node-card.group-white { --group-color: #c6cdd4; }
.node-card.group-gold { --group-color: #d5a23d; }
.node-card:is(.group-blue, .group-red, .group-green, .group-white, .group-gold) { border-color: var(--group-color); }
.node-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 13px 10px; }
.institution-card { width: 205px; margin-inline: auto; }
.institution-card .node-card-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.node-maid-group-icon { position: absolute; right: 10px; bottom: 8px; width: 32px; height: 32px; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.node-maid-portrait { filter: drop-shadow(0 0 .65px #17211f) drop-shadow(0 0 .65px #17211f); }
.institution-card .node-title, .institution-card .node-count { padding-right: 32px; }
.node-children-toggle { position: absolute; z-index: 1; right: 10px; bottom: 8px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.node-children-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.root-node .node-card-head { position: relative; display: block; padding: 12px 40px; }
.root-node.has-group-icon .node-card-head { min-height: 78px; padding-inline: 102px; }
.root-maid-group-icon { position: absolute; top: 12px; left: 47px; width: 52px; height: 52px; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.root-copy { text-align: center; }
.root-node .root-info-button { position: absolute; top: 10px; right: 10px; }
.node-type { color: #77909a; font-size: 10px; }
.node-title { margin-top: 3px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 16px; font-weight: 600; }
.node-count { margin-top: 3px; color: #7f959e; font-size: 10px; }
.node-toggle { flex: 0 0 21px; width: 21px; height: 21px; padding: 0; border: 1px solid #d5e0e1; border-radius: 4px; color: #75909a; background: #fff; line-height: 1; }
.node-toggle:hover { border-color: var(--teal); color: var(--teal-dark); }
.node-actions { display: flex; align-items: center; gap: 5px; padding: 0 8px 8px; }
.institution-column > .node-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 205px; margin-inline: auto; padding-top: 7px; }
.institution-column > .node-actions .delete-node { grid-column: 1 / -1; margin-left: 0; }
.institution-column > .node-actions .node-action { padding-inline: 3px; white-space: nowrap; }
.root-actions { justify-content: center; padding-top: 0; }
.node-action { min-height: 25px; padding: 0 7px; border: 1px solid #d6e1e1; border-radius: 4px; color: var(--teal-dark); background: #fff; font-size: 10px; }
.node-action:hover { border-color: var(--teal); }
.node-action.delete-node { margin-left: auto; color: #a66157; }
.root-info-button { display: grid; place-items: center; width: 21px; height: 21px; padding: 0; border: 1px solid #d5e0e1; border-radius: 4px; color: #75909a; background: #fff; }
.root-info-button:hover { border-color: var(--teal); color: var(--teal-dark); }
.position-list { display: grid; width: 205px; gap: 5px; margin: 0 auto; padding: 7px 0 0; }
.position-card { display: block; width: 100%; min-height: 49px; padding: 7px 9px; border: 1px solid #e3eaea; border-radius: 5px; background: #fff; text-align: left; }
.position-card.vacant { border-style: dashed; background: #fbfcfc; }
.position-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.position-title { color: #294c5c; font-size: 11px; font-weight: 600; }
.position-rank { color: #789099; font-size: 9px; white-space: nowrap; }
.position-maid { display: block; margin-top: 3px; color: var(--teal-dark); font-size: 10px; }
.position-card.vacant .position-maid { color: #9babb0; }
.position-card.clickable { cursor: pointer; }
.position-card.clickable:hover { border-color: var(--teal); }
.position-title { display: inline-block; max-width: 136px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.empty-column { padding: 16px 8px; border: 1px solid #e3eaea; border-radius: 5px; color: var(--muted); text-align: center; }

.list-view { overflow-x: auto; overflow-y: hidden; border: 1px solid #d6e1e1; border-radius: 10px; background: #fff; }
.list-table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.list-table-groups { min-width: 1080px; }
.list-table-maids { min-width: 1220px; }
.list-table-vacancies { min-width: 980px; }
.list-table-institutions { min-width: 900px; }
.list-table th, .list-table td { padding: 13px 16px; border-bottom: 1px solid #e7eeee; text-align: left; vertical-align: top; }
.list-table th { color: #6c858e; background: #f7faf9; font-size: 11px; font-weight: 600; white-space: nowrap; }
.list-table td { color: #315465; font-size: 12px; }
.list-table-groups th:nth-child(1) { width: 13%; }
.list-table-groups th:nth-child(2) { width: 14%; }
.list-table-groups th:nth-child(3) { width: 32%; }
.list-table-groups th:nth-child(4) { width: 16%; }
.list-table-groups th:nth-child(5) { width: 10%; }
.list-table-groups th:nth-child(6) { width: 15%; }
.list-table-maids th:nth-child(1) { width: 12%; }
.list-table-maids th:nth-child(2) { width: 12%; }
.list-table-maids th:nth-child(3) { width: 14%; }
.list-table-maids th:nth-child(4) { width: 22%; }
.list-table-maids th:nth-child(5) { width: 16%; }
.list-table-maids th:nth-child(6) { width: 10%; }
.list-table-maids th:nth-child(7) { width: 14%; }
.list-table-vacancies th:nth-child(1) { width: 17%; }
.list-table-vacancies th:nth-child(2) { width: 15%; }
.list-table-vacancies th:nth-child(3) { width: 34%; }
.list-table-vacancies th:nth-child(4) { width: 12%; }
.list-table-vacancies th:nth-child(5) { width: 20%; }
.list-table-institutions th:nth-child(1) { width: 17%; }
.list-table-institutions th:nth-child(2) { width: 15%; }
.list-table-institutions th:nth-child(3) { width: 15%; }
.list-table-institutions th:nth-child(4) { width: 39%; }
.list-table-institutions th:nth-child(5) { width: 14%; }
.list-table tr:last-child td { border-bottom: 0; }
.status-pill { display: inline-block; padding: 3px 7px; border-radius: 4px; color: #3d837b; background: #eaf4f1; font-size: 10px; }
.status-pill.vacant { color: #84969b; background: #f0f3f3; }
.mobile-empty { padding: 45px 20px; color: var(--muted); text-align: center; }

.detail-backdrop { position: fixed; inset: 0; z-index: 10; background: rgba(14, 34, 46, .3); }
.detail-drawer { position: fixed; top: 0; right: 0; z-index: 11; width: min(430px, 92vw); height: 100vh; padding: 28px; overflow: auto; color: var(--ink); background: #fff; box-shadow: -12px 0 35px rgba(14, 35, 46, .17); transform: translateX(100%); transition: transform .22s ease; }
.detail-drawer.open { transform: translateX(0); }
.drawer-close { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 5px; color: #6d8790; background: #fff; font-size: 20px; line-height: 1; }
.drawer-kicker { color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.drawer-title { margin: 10px 0 5px; font-family: "Noto Serif SC", serif; font-size: 25px; font-weight: 600; }
.drawer-subtitle { margin: 0; color: var(--muted); font-size: 12px; }
.drawer-section { margin-top: 28px; padding-top: 17px; border-top: 1px solid var(--line); }
.drawer-action-row { display: flex; gap: 7px; margin-top: 16px; }
.drawer-section h3 { margin: 0 0 9px; font-size: 12px; }
.drawer-section p { margin: 0; color: #5c747e; font-size: 13px; line-height: 1.8; white-space: pre-line; }
.drawer-section .commission-line { display: flex; flex-wrap: wrap; column-gap: 12px; }
.maid-name-button { padding: 2px 8px; border: 1px solid transparent; border-radius: 999px; color: var(--teal-dark); background: transparent; font: inherit; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.maid-name-button:hover { border-color: #8eafaa; color: #1d514e; background: #f5f9f8; }
.maid-name-button:focus-visible { border-color: #6b928f; color: #1d514e; outline: 2px solid rgba(77, 145, 135, .22); outline-offset: 1px; }
.drawer-position { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf2f1; }
.drawer-position strong, .drawer-position span { display: block; }
.drawer-position strong { font-size: 12px; }
.drawer-position span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.drawer-position-description { max-width: 210px; margin-top: 3px; color: #789099; font-size: 10px; line-height: 1.45; }
.drawer-position-actions { display: flex; align-items: center; gap: 5px; }
.institution-detail-actions { display: grid; gap: 8px; margin-top: 18px; }
.institution-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.institution-detail-actions button { min-height: 32px; margin: 0; white-space: nowrap; }
.fill-vacancies-button { min-height: 29px; padding: 0 10px; border: 1px solid #bfd8d0; border-radius: 5px; color: var(--teal-dark); background: #f1f8f5; font-size: 11px; }
.fill-vacancies-button:hover { border-color: var(--teal); background: #e6f3ed; }
.fill-vacancies-button:disabled { opacity: .55; cursor: default; }
.institution-detail-actions > .fill-vacancies-button { justify-self: start; }
.drawer-position-actions { flex-wrap: wrap; }
.edit-button, .delete-button, .add-position-button { min-height: 27px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--teal-dark); background: #fff; font-size: 10px; }
.edit-button:hover, .add-position-button:hover { border-color: var(--teal); }
.delete-button { color: #ae6256; }
.delete-button:hover { border-color: #c4867d; }
.add-position-button { margin-top: 12px; }
.editor-dialog { width: min(430px, calc(100% - 28px)); padding: 25px; border: 0; border-radius: 8px; color: var(--ink); background: #fff; box-shadow: 0 20px 60px rgba(14, 35, 46, .24); }
.maid-editor-dialog { width: min(680px, calc(100% - 28px)); }
.editor-dialog::backdrop { background: rgba(14, 34, 46, .35); }
.editor-dialog form { display: grid; gap: 13px; }
.dialog-kicker { color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.editor-dialog h2 { margin: 0; font-family: "Noto Serif SC", serif; font-size: 22px; font-weight: 600; }
.dialog-help { margin: -4px 0 3px; color: var(--muted); font-size: 11px; }
.editor-dialog label { display: grid; gap: 5px; color: #56717c; font-size: 11px; }
.editor-dialog [hidden] { display: none !important; }
.maid-rank-editor { display: grid; gap: 13px; }
.maid-title-row { display: grid; gap: 5px; }
.maid-honorific-editor { display: grid; gap: 5px; color: #5c747e; font-size: 13px; line-height: 1.8; }
.maid-honorific-current { display: inline-flex; align-items: center; min-height: 29px; padding: 2px 8px; color: #1d514e; }
.maid-honorific-add { display: inline-flex; align-items: center; min-height: 29px; padding: 2px 8px; border: 1px solid transparent; border-radius: 999px; color: #5c747e; background: transparent; font: inherit; }
.maid-honorific-add:hover, .maid-honorific-add[aria-expanded="true"] { border-color: #8eafaa; color: #1d514e; background: #f5f9f8; }
.maid-honorific-options { display: grid; justify-items: start; gap: 3px; padding-top: 4px; }
.maid-merit-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.maid-grant-actions { display: grid; justify-items: start; padding-top: 4px; }
.maid-grant-delete { padding: 3px 8px; border: 1px solid transparent; border-radius: 5px; color: #ae6256; background: transparent; font: inherit; }
.maid-grant-delete:hover, .maid-grant-delete:focus-visible { border-color: #c4867d; background: #fff5f3; }
.maid-part-time-current { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.maid-part-time-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-width: 390px; padding-top: 5px; }
.maid-part-time-options button { min-height: 31px; padding: 4px 10px; border: 1px solid #d6e1e1; border-radius: 5px; color: #496a71; background: #fbfdfc; text-align: left; font: inherit; line-height: 1.4; }
.maid-part-time-options button:hover, .maid-part-time-options button:focus-visible { border-color: #8eafaa; color: #1d514e; background: #f5f9f8; }
.maid-part-time-options .maid-part-time-back { grid-column: 1 / -1; border-color: transparent; background: transparent; }
.maid-part-time-category { grid-column: 1 / -1; padding: 2px 10px 4px; color: #56717c; font-size: 11px; }
.maid-honorific-add:focus-visible { outline: 2px solid rgba(77, 145, 135, .35); outline-offset: 1px; }
.maid-honorific-add { max-width: 100%; text-align: left; }
@media (max-width: 620px) { .maid-merit-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.maid-honorific-option { padding: 3px 8px; border: 1px solid transparent; border-radius: 5px; color: #5c747e; background: transparent; font: inherit; text-align: left; }
.maid-honorific-option:hover, .maid-honorific-option:focus-visible { border-color: #8eafaa; color: #1d514e; background: #f5f9f8; }
.maid-rank-heading { color: #56717c; font-size: 11px; }
.maid-rank-line { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; row-gap: 8px; }
.maid-rank-picker { display: grid; grid-template-rows: 29px auto; align-content: start; min-width: 0; min-height: 29px; color: #5c747e; font-size: 13px; line-height: 1.8; }
.maid-rank-picker > span { display: flex; align-items: center; }
.maid-rank-add-on { padding: 0 8px; white-space: nowrap; }
.inspectorate-current { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; }
.honorary-add, .honorary-remove { display: inline-grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--teal-dark); background: #fff; font-size: 17px; line-height: 1; }
.honorary-add { border-color: transparent; background: transparent; }
.honorary-add:hover, .honorary-remove:hover { border-color: var(--teal); background: #f5f9f8; }
.honorary-remove { width: 20px; height: 20px; font-size: 14px; }
.honorary-add:focus-visible, .honorary-remove:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
#maidInspectorateField:has([data-add-inspectorate]) { width: 25px; }
#maidInspectorateOptions { width: max-content; }
.maid-rank-choice, .maid-rank-option { display: block; padding: 2px 8px; border: 1px solid transparent; border-radius: 999px; color: #5c747e; background: transparent; font: inherit; text-align: left; white-space: nowrap; }
.maid-rank-combined { display: flex; align-items: center; gap: 5px; width: max-content; }
.maid-rank-choice:hover, .maid-rank-choice[aria-expanded="true"], .maid-rank-option:hover { border-color: #8eafaa; color: #1d514e; background: #f5f9f8; }
.maid-rank-choice:focus-visible, .maid-rank-option:focus-visible { outline: 2px solid rgba(77, 145, 135, .35); outline-offset: 1px; }
.maid-rank-options { display: grid; justify-items: start; gap: 4px; padding-top: 4px; }
.editor-dialog input, .editor-dialog select, .editor-dialog textarea { width: 100%; min-height: 37px; padding: 9px 10px; border: 1px solid #d6e1e1; border-radius: 5px; outline: 0; color: var(--ink); background: #fbfdfc; resize: vertical; }
.editor-dialog select { padding-right: 30px; }
.editor-dialog input:focus, .editor-dialog textarea:focus { border-color: var(--teal); }
.editor-dialog select:focus { border-color: var(--teal); }
.system-avatar-editor { display: flex; align-items: center; gap: 14px; }
.system-avatar-preview { display: grid; place-items: center; flex: 0 0 68px; width: 68px; height: 68px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; color: var(--teal-dark); background: #eef3f2; font-size: 25px; }
.system-avatar-preview img { width: 100%; height: 100%; object-fit: contain; }
.system-avatar-controls { display: grid; min-width: 0; gap: 7px; }
.system-avatar-controls input[type="file"] { min-height: 0; padding: 5px; font-size: 10px; }
.system-avatar-controls .edit-button { justify-self: start; }
.system-avatar-controls .dialog-help { margin: 0; font-size: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.dialog-actions .delete-system-button { min-height: 37px; margin-right: auto; padding-inline: 11px; }
.save-button { min-height: 37px; padding: 0 14px; border: 1px solid var(--navy-2); border-radius: 5px; color: #fff; background: var(--navy-2); font-size: 12px; }
.save-button:hover { background: var(--navy); }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: 320px; padding: 10px 14px; border: 1px solid #cfe0dc; border-radius: 5px; color: #2e6961; background: #f1faf7; box-shadow: var(--shadow); font-size: 12px; }

@media (max-width: 1080px) { .sidebar { flex-basis: 222px; width: 222px; } .workspace, .topbar { padding-left: 20px; padding-right: 20px; } .stats-grid { gap: 8px; } .stat-card { padding-left: 14px; padding-right: 14px; } .stat-card strong { font-size: 26px; } }
@media (max-width: 860px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 20; transform: translateX(-100%); transition: transform .2s ease; } .sidebar.open { transform: translateX(0); box-shadow: 12px 0 28px rgba(13, 35, 46, .25); } .mobile-menu { display: block; flex: 0 0 auto; } .topbar { align-items: flex-start; } .topbar-copy { flex: 1; } .content-toolbar { align-items: flex-start; flex-direction: column; } .canvas-tools { align-self: flex-end; } }
@media (max-width: 620px) { .topbar { padding: 19px 14px 17px; } .workspace { padding: 14px 14px 30px; } .eyebrow { font-size: 9px; letter-spacing: .13em; } .topbar h1 { font-size: 24px; } .topbar p { max-width: 250px; font-size: 11px; } .read-only-badge { display: none; } .toolbar-action { padding-inline: 7px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-card { min-height: 76px; } .stat-card strong { font-size: 23px; } .filters-panel { align-items: stretch; padding: 10px; } .search-field, .select-field { flex-basis: 100%; } .select-field select { width: 100%; } .check-field { min-height: 28px; } .section-heading { align-items: flex-start; flex-direction: column; } .legend { flex-wrap: wrap; } .tree-viewport { height: 65vh; min-height: 420px; } .tree-inner { min-width: 0; padding-left: 18px; padding-right: 18px; } .list-view { overflow-x: auto; } }

/* Mobile edge navigation */
.sidebar-backdrop { display: none; }
@media (max-width: 860px) {
  .mobile-menu { position: fixed; z-index: 18; top: 20px; left: 0; display: grid; place-items: center; width: 18px; height: 46px; padding: 0; border: 1px solid #bfcdd1; border-left: 0; border-radius: 0 7px 7px 0; color: var(--ink); background: rgba(245,245,241,.94); box-shadow: 2px 1px 8px rgba(13,35,46,.12); }
  .mobile-menu svg { display: block; width: 12px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-menu:hover, .mobile-menu:focus-visible { background: #fff; color: var(--teal-dark); }
  .sidebar-backdrop { display: block; position: fixed; z-index: 19; inset: 0; background: rgba(13,35,46,.08); touch-action: none; }
  .sidebar { height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.navigation-open { overflow: hidden; }
  .navigation-open .mobile-menu { visibility: hidden; }
  .topbar:not(.has-system-cover) .topbar-copy { padding-top: 0; }
  .topbar:not(.has-system-cover) .eyebrow { max-width: calc(100% - 200px); min-height: 32px; }
}
@media (max-width: 620px) {
  .topbar:not(.has-system-cover) { padding-left: 26px; }
  .topbar:not(.has-system-cover) .eyebrow { max-width: calc(100% - 155px); min-height: 32px; }
  .topbar:not(.has-system-cover) .topbar-copy p { max-width: 100%; }
}

/* Keep the left-hand portrait in mobile banner crops. */
@media (max-width: 620px) {
  .topbar[data-system="red"] .system-cover { object-position: 16% center; }
  .topbar[data-system="blue"] .system-cover { object-position: 18% center; }
  .topbar[data-system="white"] .system-cover { object-position: 20% center; }
  .topbar[data-system="green"] .system-cover { object-position: 20% center; }
}
.tree-viewport { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }

/* Compact mobile detail drawer and bounded institution picker. */
.system-filter-trigger { display: none; }
.system-filter-dialog { width: min(88vw, 400px); height: min(46vh, 420px); height: min(46dvh, 420px); max-height: calc(100dvh - 64px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 16px 48px rgba(14,35,46,.25); overflow: hidden; }
.system-filter-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.system-filter-dialog::backdrop { background: rgba(14,34,46,.35); }
.system-filter-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.system-filter-dialog h2 { margin: 0; font-size: 14px; font-weight: 600; }
.system-filter-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 24px; }
.system-filter-options { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.system-filter-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 11px 14px; border: 0; border-bottom: 1px solid #edf2f1; color: var(--ink); background: #fff; font-size: 13px; line-height: 1.5; text-align: left; }
.system-filter-option span { overflow-wrap: anywhere; }
.system-filter-option i { flex: 0 0 16px; width: 16px; height: 16px; border: 1px solid #a6b8bf; border-radius: 50%; }
.system-filter-option[aria-selected="true"] { color: var(--teal-dark); background: #edf5f2; }
.system-filter-option[aria-selected="true"] i { border: 5px solid var(--teal); }
.system-filter-option:hover, .system-filter-option:focus-visible { background: #f0f6f4; }
@media (max-width: 860px) {
  .select-field select.has-mobile-picker { display: none; }
  .system-filter-trigger { display: block; width: 100%; min-width: 0; min-height: 37px; padding: 0 36px 0 11px; border: 0; color: var(--ink); background: transparent; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  .detail-backdrop { z-index: 39; }
  .detail-drawer { z-index: 40; width: min(360px, 80vw); height: 100dvh; padding: 24px 18px; overscroll-behavior: contain; }
  .drawer-kicker { padding-right: 24px; }
  .drawer-title { font-size: 22px; overflow-wrap: anywhere; }
  .drawer-close { top: 12px; right: 12px; }
  .drawer-section { margin-top: 22px; padding-top: 15px; }
}

/* Suppress the browser tap flash while preserving keyboard focus. */
* { -webkit-tap-highlight-color: transparent; }