:root {
  color: #24354d;
  background: #f4f7fb;
  font-family: system-ui, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  --accent: #315f9f;
  --accent-hover: #204e89;
  --soft: #eaf2ff;
  --line: #dde6f1;
  --muted: #687a91;
  --white: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 90% 5%, #e7eef9 0, transparent 420px), #f4f7fb; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, input, textarea { border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; background: var(--white); }
button, select, summary { cursor: pointer; }
button { white-space: nowrap; }
button:hover, summary:hover { color: var(--accent); border-color: #a9c1e1; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: linear-gradient(135deg, #3c72b6, var(--accent)); border-color: var(--accent); color: white; box-shadow: 0 2px 6px #315f9f21; }
button.primary:hover { background: var(--accent-hover); }
button[aria-pressed="true"] { color: var(--accent); background: var(--soft); border-color: #c4d4eb; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 54px; padding: 8px 24px; background: linear-gradient(100deg, #172d4e, #254c7b); border-bottom: 1px solid #183352; box-shadow: 0 3px 12px #1d39591c; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: white; font-size: 18px; font-weight: 750; white-space: nowrap; letter-spacing: -.02em; }
.brand-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #214b7d; background: linear-gradient(135deg, #fff, #cde0fa); font-size: 18px; box-shadow: 0 2px 8px #0c224747; }
.brand small { margin-left: 14px; padding-left: 14px; border-left: 1px solid #ffffff38; color: #c7d8ed; font-weight: 400; font-size: 12px; letter-spacing: 0; }
.header-side { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sync-info { margin: 0; color: #d4e3f4; font-size: 12px; white-space: nowrap; }
.sync-info:not(:empty)::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #79d6b4; vertical-align: 2px; box-shadow: 0 0 0 3px #79d6b42b; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.account-menu, .display-menu, .resource-menu { position: relative; }
.account-menu:has(#account-actions[hidden]), .resource-menu:has(#resources[hidden]) { display: none; }
.account-menu > summary, .display-menu > summary, .resource-menu > summary { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: white; font-size: 12px; white-space: nowrap; }
.account-menu > summary { border-color: #ffffff4a; background: #ffffff17; color: white; }
.account-menu > summary:hover { background: #ffffff27; color: white; }
.account-menu > summary span, .display-menu > summary span, .resource-menu > summary span { margin-left: 5px; color: var(--muted); }
.account-menu > summary span { color: #d5e3f5; }
#account-actions, .display-options, #resources { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; display: grid; gap: 7px; min-width: 170px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; box-shadow: 0 8px 24px #20334d14; }
#account-actions button, #account-actions a { display: block; padding: 6px 9px; text-align: left; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-decoration: none; }
#account-actions button:hover, #account-actions a:hover { background: var(--soft); color: var(--accent); }
.display-options { width: min(330px, calc(100vw - 24px)); max-height: min(70dvh, 620px); overflow: auto; }
.display-options label { color: var(--muted); font-size: 12px; }
.display-columns-title { padding-top: 7px; border-top: 1px solid var(--line); color: #526175; font-size: 12px; }
.display-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; max-height: 230px; overflow: auto; }
.display-columns label { display: flex; align-items: center; gap: 6px; min-width: 0; color: #526175; line-height: 1.4; cursor: pointer; }
.display-columns input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; padding: 0; accent-color: var(--accent); }
.display-columns span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-columns-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
#resources { width: min(310px, calc(100vw - 32px)); }
#resources a, #resources span { padding: 5px; font-size: 12px; overflow-wrap: anywhere; }
main { padding: 12px 24px 20px; max-width: 1840px; margin: auto; }
.panel { background: white; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 3px 18px #2b52700b; }
.catalogue-panel { border-radius: 10px 10px 0 0; }
.gate { position: relative; max-width: 450px; margin: 5vh auto; padding: 26px 30px; overflow: hidden; border-color: #cfdeef; box-shadow: 0 18px 55px #1c3c651a; }
.gate::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2f65a7, #8ab8e6); }
.gate form, .gate label { display: grid; gap: 8px; }
.gate form { gap: 12px; }
.gate p { color: var(--muted); line-height: 1.7; }
.gate h1 { margin: 9px 0 7px; color: #203d63; font-size: 27px; }
.gate input, .gate button { padding-block: 9px; }
.gate textarea { width: 100%; min-height: 100px; resize: vertical; }
.appeal-result, .security-warning { padding: 11px 13px; border: 1px solid #e7c68b; border-radius: 8px; background: #fff7e8; color: #754d1f !important; overflow-wrap: anywhere; line-height: 1.7; }
.use-notice { padding: 11px 13px; border: 1px solid #d7e4f4; border-radius: 8px; background: #f6f9fe; font-size: 12px; line-height: 1.65; }
.use-notice p { margin: 5px 0 0; color: #526175; }
.notice-ack { display: flex !important; align-items: flex-start; gap: 8px !important; font-size: 12px; line-height: 1.55; }
.notice-ack input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; padding: 0; }
.detail-notice { padding: 9px 11px; border-left: 3px solid var(--accent); background: #f5f8fc; color: #526175; font-size: 12px; line-height: 1.6; }
.site-footer { max-width: 1840px; margin: 0 auto; padding: 12px 24px 20px; color: #687c94; font-size: 11px; line-height: 1.65; }
.site-footer p { margin: 2px 0; }
.auth-tabs { display: flex; gap: 8px; margin: 16px 0; padding: 4px; border-radius: 9px; background: #edf3fb; }
.auth-tabs button { flex: 1; border: 0; background: transparent; }
.auth-tabs button[aria-selected="true"] { background: white; color: var(--accent); font-weight: 700; box-shadow: 0 2px 8px #20334d1c; }
.code-row { display: flex; align-items: end; gap: 8px; }
.code-row label { flex: 1; min-width: 0; }
.code-row button { flex: 0 0 auto; }
.muted-note, .new-codes p { color: var(--muted); line-height: 1.6; }
.new-codes { padding: 12px; border: 1px solid #c9ddf2; border-radius: 8px; background: #f4f8fd; }
.new-codes textarea { display: block; width: 100%; margin-bottom: 8px; font-family: ui-monospace, Consolas, monospace; }
.card-line span { min-width: 0; }
.card-line small { display: block; margin-top: 3px; }
h1 { margin: 5px 0 12px; font-size: 25px; }
h2 { margin: 0; font-size: 17px; }
h3 { font-size: 14px; margin: 20px 0 10px; }
.eyebrow { font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.tabs { display: flex; align-items: stretch; gap: 3px; overflow-x: auto; padding: 3px 12px 0; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 11px 12px 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 7px 7px 0 0; background: transparent; color: #63758d; font-size: 14px; font-weight: 550; }
.tabs button:hover { background: #f5f8fc; }
.tabs button[aria-pressed="true"] { color: #24558f; border-bottom-color: #3e78bd; background: #f0f6ff; font-weight: 700; }
.tabs small, .source-count { margin-left: 0; padding: 2px 5px; border-radius: 5px; color: #69809d; background: #edf2f8; font-size: 11px; font-weight: 550; line-height: 1.2; }
.tabs button[aria-pressed="true"] small { color: #2d619e; background: #dceafb; }
.search-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 12px 9px; }
.search-bar { display: flex; flex: 1 1 340px; gap: 0; min-width: 240px; max-width: 570px; box-shadow: 0 2px 7px #375f8f0a; }
.search-bar input { min-width: 0; width: 100%; border-radius: 7px 0 0 7px; padding-left: 12px; background: #fbfdff; }
.search-bar input:focus { z-index: 1; border-color: #8eb4df; outline: none; box-shadow: inset 0 0 0 1px #8eb4df; }
.search-bar select { border-left: 0; border-radius: 0; padding-inline: 6px; color: var(--muted); font-size: 13px; }
.search-bar button { border-radius: 0 7px 7px 0; padding-inline: 17px; font-weight: 650; }
.search-bar input, .search-bar select, .search-bar button { height: 35px; }
.quick-shortcuts { display: flex; align-items: center; gap: 6px; }
.quick-shortcuts button, #clear { padding: 7px 9px; font-size: 13px; }
.quick-shortcuts button { color: #506582; background: #fbfdff; }
#clear { border-color: transparent; color: var(--accent); background: transparent; }
.topics { display: flex; align-items: center; gap: 6px; padding: 0 12px 9px; overflow-x: auto; scrollbar-width: thin; }
.topics button { flex: 0 0 auto; padding: 4px 8px; border-color: #e9eef5; background: #f8fafd; color: #64758b; font-size: 12px; }
.topics button[aria-pressed="true"] { color: var(--accent); background: var(--soft); border-color: #c9dbf2; font-weight: 650; }
.topics small { margin-left: 5px; color: #70829b; font-size: 11px; }
.advanced-filters { padding: 11px 12px; border-top: 1px solid var(--line); background: linear-gradient(#f9fbfe, #f6f9fd); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter { position: relative; flex: 1 1 145px; min-width: 130px; max-width: 200px; font-size: 14px; }
.filter summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 1px solid #d9e4f1; border-radius: 7px; background: white; color: #425a77; cursor: pointer; list-style: none; box-shadow: 0 1px 3px #2e527008; }
.filter summary::-webkit-details-marker { display: none; }
.filter summary::after { content: '⌄'; color: #7291b6; font-size: 15px; line-height: 1; }
.filter[open] summary { border-color: var(--accent); color: var(--accent); }
.filter-options { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; display: grid; gap: 7px; width: 270px; max-width: calc(100vw - 28px); padding: 10px; border: 1px solid #cfdded; border-radius: 9px; background: white; box-shadow: 0 15px 35px #17385726; }
.filter-options input[type="search"] { width: 100%; min-width: 0; }
.filter-options label { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 4px; font-size: 13px; line-height: 1.5; cursor: pointer; border-radius: 4px; }
.filter-options label span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filter-options input[type="checkbox"] { flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.filter-options label:hover { background: var(--soft); }
.filter-list { min-height: 55px; max-height: 230px; overflow: auto; overflow-wrap: anywhere; }
.filter-options .actions button { padding: 4px 7px; font-size: 12px; }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #64758b; }
.quick label { display: inline-flex; align-items: center; gap: 5px; }
.quick input[type="date"] { min-width: 0; padding: 5px 6px; font-size: 13px; }
.selected-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 8px; }
.selected-filters:empty { display: none; }
.selected-filters button { font-size: 12px; padding: 4px 7px; color: var(--accent); background: var(--soft); border-color: #d7e3f4; }
.results { display: flex; flex-direction: column; min-width: 0; margin-top: -1px; border-radius: 0 0 10px 10px; overflow: visible; }
#workspace:has(.table-wrap:not([hidden])) { display: flex; flex-direction: column; height: calc(100dvh - 86px); min-height: 440px; }
#workspace:has(.table-wrap:not([hidden])) .catalogue-panel { flex: 0 0 auto; }
#workspace:has(.table-wrap:not([hidden])) .results { flex: 1 1 auto; min-height: 0; }
.result-bar, .pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; font-size: 13px; }
.result-bar { min-height: 43px; border-bottom: 1px solid var(--line); background: #fff; }
.result-bar strong { color: #234c7d; font-size: 15px; font-weight: 750; white-space: nowrap; }
.result-bar select, .result-bar button, .result-bar summary { font-size: 12px; padding: 5px 7px; }
.result-tools > button, .result-tools > details > summary { color: #526a88; background: #fbfdff; }
.result-tools > button:hover, .result-tools > details > summary:hover { background: #f0f6ff; }
.result-summary { flex-wrap: nowrap; }
.result-tools { flex-wrap: nowrap; }
.table-wrap { flex: 1 1 auto; overflow: auto; max-height: calc(100dvh - 275px); min-height: 180px; scrollbar-width: thin; scrollbar-color: #aabbd0 #f0f4f9; }
#workspace:has(.table-wrap:not([hidden])) .table-wrap { max-height: none; min-height: 0; }
table { min-width: 100%; width: max-content; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th, td { padding: 9px 10px; text-align: left; border-right: 1px solid #edf1f7; border-bottom: 1px solid #edf1f7; line-height: 1.45; }
th { position: sticky; top: 0; z-index: 4; color: #456381; background: #edf3fa; white-space: nowrap; padding-right: 15px; font-size: 12px; font-weight: 700; }
th button, .header-sort { padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; font-size: inherit; font-weight: inherit; }
.column-menu { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.column-menu > summary { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid #9bb6d8; border-radius: 5px; color: #174d8e; background: #dceafb; font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; list-style: none; }
.column-menu > summary::-webkit-details-marker { display: none; }
.column-menu > summary:hover, .column-menu[open] > summary { color: #fff; border-color: #245ca0; background: #245ca0; }
.column-menu-options { position: absolute; top: calc(100% + 4px); left: 0; z-index: 12; display: grid; min-width: 132px; padding: 5px; border: 1px solid #c9d7e9; border-radius: 8px; background: #fff; box-shadow: 0 9px 24px #123b661f; }
.column-menu-options button { padding: 7px 9px; border-radius: 5px; color: #244766; text-align: left; white-space: nowrap; }
.column-menu-options button:hover { background: #eaf2ff; }
th:has(.column-menu[open]) { z-index: 11; }
.column-grip { position: absolute; inset: 0 0 0 auto; width: 6px; cursor: col-resize; touch-action: none; }
.column-grip:hover { border-right: 2px solid #8aa9d2; }
td { min-width: 72px; max-width: 240px; vertical-align: middle; background: white; }
tbody tr:nth-child(even) td { background: #fbfdff; }
.title-cell { position: sticky; left: 0; z-index: 2; width: 340px; min-width: 300px; max-width: 380px; background: white; }
th.title-cell { z-index: 6; background: #edf3fa; }
td .title-button, .cards .title-button { padding: 0; border: 0; background: transparent; color: #24568f; text-align: left; font-size: inherit; font-weight: 600; line-height: inherit; }
td .title-button:hover, .cards .title-button:hover { color: #153f74; text-decoration: underline; text-underline-offset: 3px; }
.cell-content, td .title-button { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 240px; }
.province-tags { display: flex; align-items: center; gap: 4px; overflow: hidden; max-width: 240px; white-space: nowrap; }
.staffing-tags { display: flex; align-items: center; gap: 4px; overflow: hidden; max-width: 240px; white-space: nowrap; }
.value-tags { display: flex; align-items: center; gap: 4px; overflow: hidden; max-width: 240px; white-space: nowrap; }
.province-tag { flex: 0 0 auto; padding: 1px 6px; border: 1px solid hsl(var(--province-hue) 54% 79%); color: hsl(var(--province-hue) 50% 29%); background: hsl(var(--province-hue) 81% 93%); font-weight: 650; }
.province-color-0 { --province-hue: 24; }
.province-color-1 { --province-hue: 162; }
.province-color-2 { --province-hue: 299; }
.province-color-3 { --province-hue: 77; }
.province-color-4 { --province-hue: 214; }
.province-color-5 { --province-hue: 352; }
.province-color-6 { --province-hue: 129; }
.province-color-7 { --province-hue: 267; }
.province-color-8 { --province-hue: 44; }
.province-color-9 { --province-hue: 182; }
.province-color-10 { --province-hue: 319; }
.province-color-11 { --province-hue: 97; }
.province-color-12 { --province-hue: 234; }
.province-color-13 { --province-hue: 12; }
.province-color-14 { --province-hue: 149; }
.province-color-15 { --province-hue: 287; }
.province-color-16 { --province-hue: 64; }
.province-color-17 { --province-hue: 202; }
.province-color-18 { --province-hue: 339; }
.province-color-19 { --province-hue: 117; }
.province-color-20 { --province-hue: 254; }
.province-color-21 { --province-hue: 32; }
.province-color-22 { --province-hue: 169; }
.province-color-23 { --province-hue: 307; }
.province-color-24 { --province-hue: 84; }
.province-color-25 { --province-hue: 222; }
.province-color-26 { --province-hue: 359; }
.province-color-27 { --province-hue: 137; }
.province-color-28 { --province-hue: 274; }
.province-color-29 { --province-hue: 52; }
.province-color-30 { --province-hue: 189; }
.province-color-31 { --province-hue: 327; }
.province-color-32 { --province-hue: 104; }
.province-color-33 { --province-hue: 242; }
.card-meta .province-tags, .detail-provinces .province-tags { max-width: 100%; flex-wrap: wrap; overflow: visible; white-space: normal; }
td.title-cell .title-button { max-width: 340px; }
.comfortable td, .table-wrap.comfortable td { padding-block: 10px; vertical-align: top; }
.comfortable .cell-content, .comfortable td .title-button { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.comfortable .province-tags { display: flex; flex-wrap: wrap; max-width: none; white-space: normal; }
.comfortable .staffing-tags { display: flex; flex-wrap: wrap; max-width: none; white-space: normal; }
.comfortable .value-tags { display: flex; flex-wrap: wrap; max-width: none; white-space: normal; }
tbody tr:hover td { background: #edf5ff; }
.row-viewed .title-button { color: #7b8798; }
.row-viewed td { background: #f8fafc; }
.row-viewed:hover td { background: #edf5ff; }
.action-cell { position: sticky; right: 0; z-index: 3; min-width: 160px; max-width: 190px; border-left: 1px solid var(--line); border-right: 0; background: white; box-shadow: -5px 0 8px #334b6b04; }
th.action-cell { z-index: 7; background: #edf3fa; }
.row-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.row-actions button { min-width: 27px; min-height: 27px; padding: 3px 5px; border-color: transparent; border-radius: 5px; background: transparent; color: #7c8796; font-size: 12px; }
.row-actions a { font-size: 12px; text-decoration: none; }
.row-actions button:hover { color: var(--accent); background: var(--soft); }
.row-actions .mark-saved, button.mark-saved { color: #b27a1d; background: #fff7df; }
.row-actions .mark-applied, button.mark-applied { color: #28765b; background: #eaf7ef; }
.tag { display: inline-block; max-width: 100%; padding: 2px 6px; border-radius: 5px; color: #506b94; background: #edf2fa; font-size: 13px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.tag.province-tag { color: hsl(var(--province-hue) 50% 29%); background: hsl(var(--province-hue) 81% 93%); }
.tag-location { color: #8a6d27; background: #fff7db; }
.tag-education { color: #566f99; background: #eaf2ff; }
.tag-category { color: #596f9b; background: #eef2ff; }
.tag.category-tag { border: 1px solid hsl(var(--category-hue) 49% 79%); color: hsl(var(--category-hue) 49% 28%); background: hsl(var(--category-hue) 79% 94%); font-weight: 650; }
.tag.source-tag { border: 1px solid hsl(var(--source-hue) 46% 81%); color: hsl(var(--source-hue) 48% 30%); background: hsl(var(--source-hue) 75% 94%); font-weight: 650; }
.source-color-0 { --source-hue: 215; }
.source-color-1 { --source-hue: 150; }
.source-color-2 { --source-hue: 270; }
.source-color-3 { --source-hue: 325; }
.source-color-4 { --source-hue: 185; }
.source-color-5 { --source-hue: 35; }
.category-color-0 { --category-hue: 214; }
.category-color-1 { --category-hue: 270; }
.category-color-2 { --category-hue: 345; }
.category-color-3 { --category-hue: 180; }
.category-color-4 { --category-hue: 36; }
.category-color-5 { --category-hue: 232; }
.category-color-6 { --category-hue: 291; }
.category-color-7 { --category-hue: 151; }
.category-color-8 { --category-hue: 319; }
.category-color-9 { --category-hue: 195; }
.category-color-10 { --category-hue: 84; }
.category-color-11 { --category-hue: 56; }
.tag.staffing-tag { border: 1px solid transparent; font-weight: 650; }
.tag.staffing-formal { border-color: #a8dec1; color: #216344; background: #e4f6eb; }
.tag.staffing-nonformal { border-color: #efc2a7; color: #87451f; background: #fff0e3; }
.tag.staffing-unknown { border-color: #d4dbe5; color: #596778; background: #f0f3f7; }
.card-meta .staffing-tags, #dialog-body .staffing-tags { max-width: 100%; flex-wrap: wrap; overflow: visible; white-space: normal; }
.tag.value-tag { flex: 0 0 auto; border: 1px solid hsl(var(--value-hue) 43% 80%); color: hsl(var(--value-hue) 48% 29%); background: hsl(var(--value-hue) 75% 94%); font-weight: 600; }
.value-color-0 { --value-hue: 213; }
.value-color-1 { --value-hue: 277; }
.value-color-2 { --value-hue: 169; }
.value-color-3 { --value-hue: 39; }
.value-color-4 { --value-hue: 338; }
.value-color-5 { --value-hue: 86; }
.value-color-6 { --value-hue: 258; }
.value-color-7 { --value-hue: 186; }
.value-color-8 { --value-hue: 20; }
.value-color-9 { --value-hue: 310; }
.value-color-10 { --value-hue: 139; }
.value-color-11 { --value-hue: 221; }
.tag.value-color-11 { border-color: #d4dbe5; color: #596778; background: #f0f3f7; }
.card-meta .value-tags, #dialog-body .value-tags { max-width: 100%; flex-wrap: wrap; overflow: visible; white-space: normal; }
.tag.status-ended { color: #777f8d; background: #eef0f3; }
.tag.status-soon { color: #a05221; background: #fff0db; }
.tag.status-open { color: #23734e; background: #e5f5ea; }
.tag.status-long { color: #285a98; background: #e8f1ff; }
.tag.status-untilfilled { color: #266e76; background: #e4f5f4; }
.tag.status-unknown { color: #687487; background: #eef2f6; }
.tag-success { color: #278060; background: #eaf7ef; }
.tag-warning { color: #a4652a; background: #fff1df; }
.tag-muted { color: #8a919c; background: #f0f2f5; }
.pagination { min-height: 43px; justify-content: flex-end; color: var(--muted); background: #fcfdff; border-top: 1px solid #edf1f7; border-radius: 0 0 10px 10px; }
.pagination button, .pagination select, .pagination input { padding: 4px 7px; font-size: 12px; }
.pagination form, .page-size-label { display: inline-flex; align-items: center; gap: 5px; }
.pagination input { width: 58px; }
#page-info { min-width: 48px; text-align: center; font-size: 12px; }
.empty { color: var(--muted); text-align: center; padding: 30px 12px; font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 10px; padding: 12px; }
.card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: white; box-shadow: 0 2px 8px #2b52700a; }
.card .title-button { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; width: 100%; white-space: normal; overflow: hidden; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; font-weight: 650; }
.card p { margin: 8px 0 0; color: #7b8492; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; color: var(--muted); font-size: 13px; }
.card-meta p { margin: 0; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; margin-top: 12px; border-top: 1px solid #edf2f8; }
.card-actions button, .card-actions a { font-size: 12px; }
.card-actions a { margin-right: auto; text-decoration: none; }
.card dl { display: grid; grid-template-columns: 75px 1fr; gap: 5px 8px; margin: 10px 0 0; font-size: 13px; line-height: 1.6; }
.card dt { color: var(--muted); }
.card dd { margin: 0; overflow-wrap: anywhere; }
.results:fullscreen { padding: 12px; border-radius: 0; overflow: auto; background: white; }
.results:fullscreen .table-wrap { flex: 1; max-height: calc(100dvh - 108px); }
dialog { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #cbd9eb; border-radius: 13px; color: inherit; box-shadow: 0 24px 90px #102a4a38; }
dialog::backdrop { background: #1329478a; backdrop-filter: blur(2px); }
dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #f2f7fe, #fbfdff); }
dialog > header h2 { color: #214a7d; }
dialog > header button { padding: 1px 8px; border-color: transparent; background: transparent; color: var(--muted); font-size: 23px; }
#dialog-body { padding: 16px 18px 20px; max-height: calc(100dvh - 110px); overflow: auto; }
#dialog-body h2 { line-height: 1.6; }
#dialog-body form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
#dialog-body form input { flex: 1; min-width: 140px; }
#dialog-body textarea { width: 100%; resize: vertical; }
#dialog-body dl { display: grid; grid-template-columns: 96px 1fr; gap: 9px 12px; font-size: 13px; line-height: 1.65; }
#dialog-body dt { color: var(--muted); }
#dialog-body dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
#dialog-body .detail-provinces { display: flex; align-items: center; }
#dialog-body > .actions { margin-top: 18px; }
#dialog-body > .row-actions { flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
#dialog-body > .row-actions a, #dialog-body > .row-actions button { display: inline-flex; align-items: center; min-height: 31px; padding: 5px 9px; border: 1px solid #d7e3f1; border-radius: 6px; background: #f9fbfe; color: #315f9f; font-size: 12px; text-decoration: none; }
#dialog-body > .row-actions a:hover, #dialog-body > .row-actions button:hover { background: #eaf2ff; }
#dialog-body > .row-actions button[aria-pressed="true"] { border-color: #b7d2ec; background: #eaf2ff; }
#dialog-body > .row-actions button.mark-saved { color: #9c681b; border-color: #ead8a8; background: #fff7df; }
#dialog-body > .row-actions button.mark-applied { color: #28765b; border-color: #b9e0ca; background: #eaf7ef; }
.list-line { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding-block: 9px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.list-line small { color: var(--muted); }
.error { color: #b03d4e !important; font-size: 12px; line-height: 1.6; }
.error:empty { display: none; }
.results .error:not(:empty) { margin: 0; padding: 10px 12px; border-bottom: 1px solid #f1dce0; background: #fff8f9; }
.toast { position: fixed; bottom: 18px; right: 18px; z-index: 50; max-width: calc(100vw - 36px); padding: 10px 16px; border-radius: 8px; color: white; background: #2b3f5c; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 20px #20334d22; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  .brand small { display: none; }
  .search-bar { max-width: none; }
}
@media (max-width: 700px) {
  .topbar { position: sticky; top: 0; z-index: 40; height: 53px; gap: 10px; padding-inline: 12px; }
  .brand { gap: 7px; font-size: 17px; }
  .brand-icon { width: 27px; height: 27px; font-size: 16px; }
  .header-side { gap: 0; }
  .header-side .sync-info { display: none; }
  .account-menu > summary { font-size: 11px; padding: 6px 7px; }
  main { padding: 8px 8px 20px; }
  .tabs { padding-inline: 6px; }
  .tabs button { padding: 11px 9px 9px; font-size: 13px; }
  .search-toolbar { gap: 7px; padding: 9px 9px 6px; }
  .search-bar { flex-basis: 100%; min-width: 0; max-width: none; }
  .search-bar input { font-size: 14px; }
  .search-bar input, .search-bar select, .search-bar button { height: 35px; }
  .search-bar button { padding-inline: 13px; }
  .quick-shortcuts { flex: 1 1 auto; min-width: 0; gap: 4px; }
  .quick-shortcuts button, #clear { padding: 6px; font-size: 12px; }
  .topics { padding: 0 9px 8px; gap: 4px; }
  .topics button { padding: 4px 6px; }
  .advanced-filters { padding: 10px 9px; }
  .filters { gap: 6px; }
  .filter { flex-basis: 130px; min-width: 110px; }
  .filter-options { position: fixed; left: 12px; right: 12px; top: 18%; width: auto; max-width: none; max-height: 70dvh; overflow: auto; }
  .filter-options input[type="search"] { padding: 9px; font-size: 14px; }
  .filter-options label { font-size: 14px; }
  .filter-options input[type="checkbox"] { width: 16px; height: 16px; }
  .filter-list { max-height: 39dvh; }
  .quick { gap: 7px; }
  .quick label { font-size: 11px; }
  .quick input[type="date"] { width: 122px; }
  .selected-filters { padding-inline: 9px; }
  .result-bar { flex-wrap: wrap; gap: 7px; padding: 7px 9px; }
  .result-summary { flex: 1 1 auto; gap: 5px; }
  .result-summary strong { font-size: 14px; }
  .result-summary select { max-width: 100px; }
  .result-tools { gap: 4px; margin-left: auto; }
  .result-tools > button, .result-tools summary { padding: 5px 6px; font-size: 12px; }
  .resource-menu > summary { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .table-wrap { max-height: calc(100dvh - 310px); }
  #workspace:has(.table-wrap:not([hidden])) { height: calc(100dvh - 81px); min-height: 440px; }
  .cards { grid-template-columns: 1fr; gap: 8px; padding: 9px; background: #f8fafd; }
  .card { padding: 13px 12px; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 2px 8px #2b52700a; }
  .card:last-child { border-bottom: 1px solid var(--line); }
  .card .title-button { font-size: 15px; }
  .card-actions button, .card-actions a { min-height: 38px; }
  .pagination { flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 8px; }
  .pagination form { display: none; }
  .pagination select { min-height: 28px; }
  .page-size-label { font-size: 12px; }
  .gate { margin: 4vh auto; padding: 22px; }
  dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  dialog > header { padding: 12px 14px; }
  #dialog-body { padding: 13px 14px 18px; max-height: calc(100dvh - 90px); }
  #dialog-body dl { grid-template-columns: 75px 1fr; gap: 8px 10px; font-size: 12px; }
}

/* Desktop catalogue: narrow category rail and wide results panel. */
#workspace { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: stretch; gap: 14px; min-width: 0; }
#workspace:has(.table-wrap:not([hidden])) { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 14px; height: calc(100dvh - 86px); min-height: 470px; }
.workspace-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.section-nav { align-self: start; width: 100%; max-height: calc(100dvh - 82px); overflow: auto; border-color: #d5e3f4; box-shadow: 0 9px 25px #315f9f0c; }
.section-nav-head { display: flex; align-items: center; gap: 9px; padding: 15px 13px 12px; border-bottom: 1px solid #dbe8f7; background: linear-gradient(110deg, #edf6ff, #f8fbff); }
.section-nav-head strong { display: block; color: #244c80; font-size: 15px; }
.section-nav-head small { display: block; margin-top: 2px; color: #8194ab; font-size: 11px; }
.section-nav-mark { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 8px; color: white; background: linear-gradient(135deg, #4389d1, #2c5fa6); font-size: 17px; }
.section-nav .tabs { display: grid; gap: 4px; padding: 9px; overflow: visible; border: 0; }
.section-nav .tabs button { position: relative; display: flex; justify-content: space-between; width: 100%; min-height: 42px; gap: 6px; padding: 9px 9px 9px 25px; border: 1px solid transparent; border-radius: 8px; color: #526784; background: transparent; font-size: 13px; font-weight: 620; text-align: left; line-height: 1.25; white-space: normal; }
.section-nav .tabs button::before { content: ''; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #7ca9d9; transform: translateY(-50%); }
.section-nav .tabs button[data-source="all"]::before { background: #3569b3; }
.section-nav .tabs button[data-source="civil"]::before { background: #8659bd; }
.section-nav .tabs button[data-source="schools"]::before { background: #31a397; }
.section-nav .tabs button[data-source="colleges"]::before { background: #df9252; }
.section-nav .tabs button[data-source="medical"]::before { background: #d65b79; }
.section-nav .tabs button[data-source^="custom_"]::before { background: #7e66c2; }
.section-nav .tabs button:hover { color: #214b7e; border-color: #dce9fa; background: #f4f8fe; }
.section-nav .tabs button[aria-pressed="true"] { color: #fff; border-color: #3972b6; background: linear-gradient(105deg, #2f70bc, #3563a7); box-shadow: 0 4px 11px #285c9e2b; }
.section-nav .tabs button[aria-pressed="true"]::before { background: #fff; }
.section-nav .tabs small { flex: 0 0 auto; align-self: center; padding: 3px 5px; color: #6c809a; background: #edf2f8; font-size: 10px; }
.section-nav .tabs button[aria-pressed="true"] small { color: #fff; background: #ffffff31; }
.workspace-main .catalogue-panel { border-radius: 11px 11px 0 0; }
.workspace-main .results { border-radius: 0 0 11px 11px; }
.workspace-main .advanced-filters { background: #f6faff; }
.workspace-main .search-toolbar { padding-block: 13px 10px; }
.workspace-main .result-bar { min-height: 48px; }
@media (max-width: 900px) {
  #workspace, #workspace:has(.table-wrap:not([hidden])) { display: flex; flex-direction: column; gap: 8px; }
  #workspace:has(.table-wrap:not([hidden])) { height: calc(100dvh - 81px); min-height: 470px; }
  .section-nav { flex: 0 0 auto; max-height: none; overflow: hidden; }
  .section-nav-head { display: none; }
  .section-nav .tabs { display: flex; gap: 4px; padding: 5px 6px; overflow-x: auto; }
  .section-nav .tabs button { width: auto; min-height: 36px; flex: 0 0 auto; padding: 7px 8px 7px 21px; white-space: nowrap; }
  .section-nav .tabs button::before { left: 8px; }
  .workspace-main { flex: 1 1 auto; }
}