:root {
    --navy-950: #101d35;
    --navy-900: #142744;
    --navy-800: #1b3558;
    --blue-700: #2158a6;
    --blue-600: #2b6bc4;
    --blue-100: #eaf2fd;
    --ink-900: #172235;
    --ink-700: #42516a;
    --ink-500: #718096;
    --line: #e7ebf1;
    --canvas: #f5f7fb;
    --green: #16845b;
    --radius-lg: 16px;
    --shadow-soft: 0 8px 28px rgba(23, 42, 75, .055);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink-900); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
a { text-decoration: none; }
button, input, select { font: inherit; }
.app-shell { min-height: 100vh; }
.sidebar { width: 252px; position: fixed; inset: 0 auto 0 0; z-index: 1040; display: flex; flex-direction: column; padding: 25px 17px 18px; color: #d8e3f2; background: linear-gradient(165deg, var(--navy-950), #152a49 72%, #1a3459); box-shadow: 8px 0 30px rgba(15, 29, 52, .08); }
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 10px 35px; color: #fff; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: linear-gradient(140deg, #5ca8fa, #2866bf); color: #fff; font-size: 20px; box-shadow: 0 7px 15px rgba(38, 104, 192, .25); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 17px; letter-spacing: .09em; }
.brand-copy strong span { color: #78b5ff; }
.brand-copy small { margin-top: 5px; color: #a7b8cd; font-size: 10px; letter-spacing: .035em; }
.sidebar-section-label { padding: 0 12px; margin: 3px 0 11px; color: #8195af; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.sidebar-link { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 2px 0; padding: 0 12px; border-radius: 9px; color: #b9c8db; font-size: 12.5px; transition: .18s ease; }
.sidebar-link i { width: 17px; font-size: 15px; }
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar-link.active { color: #fff; background: rgba(79, 145, 225, .2); box-shadow: inset 3px 0 #67aaf8; }
.sidebar-divider { height: 1px; margin: 22px 8px 22px; background: rgba(215, 229, 246, .11); }
.sidebar-bottom { margin-top: auto; padding: 15px 9px 0; border-top: 1px solid rgba(215,229,246,.11); }
.source-mini { display: flex; align-items: flex-start; gap: 9px; }
.source-dot, .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #42c48a; box-shadow: 0 0 0 4px rgba(66,196,138,.11); flex: 0 0 auto; }
.source-dot { margin-top: 5px; }
.source-mini div { display: flex; flex-direction: column; gap: 3px; }
.source-mini strong { color: #e8eff8; font-size: 11px; font-weight: 650; }
.source-mini small { color: #8fa2ba; font-size: 10px; line-height: 1.4; }
.sidebar-version { display: block; margin-top: 21px; color: #7187a2; font-size: 9px; letter-spacing: .1em; }
.main-content { min-height: 100vh; margin-left: 252px; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 36px; border-bottom: 1px solid #e9edf3; background: rgba(255,255,255,.92); }
.breadcrumb-line { display: flex; align-items: center; gap: 11px; color: #8793a5; font-size: 11.5px; }
.breadcrumb-line i { font-size: 9px; color: #b1bdcb; }
.breadcrumb-line strong { color: #3e4b60; font-weight: 650; }
.topbar-right { display: flex; align-items: center; gap: 22px; }
.api-status { display: inline-flex; align-items: center; gap: 8px; color: #6a788b; font-size: 11px; font-weight: 600; }
.api-status .status-dot { width: 6px; height: 6px; }
.api-status.is-error .status-dot { background: #e05d5d; box-shadow: 0 0 0 4px rgba(224,93,93,.1); }
.topbar-date { color: #79869a; font-size: 11px; }
.topbar-date i { margin-right: 5px; }
.page-wrap { width: min(100%, 1700px); margin: 0 auto; padding: 34px 36px 22px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #7890ad; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.eyebrow > span { width: 17px; height: 2px; border-radius: 5px; background: #4d8bd5; }
.page-heading h1 { margin: 8px 0 7px; color: #1a2a42; font-size: clamp(23px, 2.2vw, 30px); font-weight: 760; letter-spacing: -.045em; }
.page-heading p { max-width: 720px; margin: 0; color: #768398; font-size: 12.5px; }
.source-link { border-color: #dce3ec; color: #53647a; background: #fff; white-space: nowrap; }
.source-link:hover { border-color: #b8cce4; color: #24599b; background: #f8fbff; }
.panel-card { margin-bottom: 18px; border: 1px solid #e8edf3; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-soft); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 23px 18px; border-bottom: 1px solid #edf0f5; }
.panel-heading-left { display: flex; align-items: center; gap: 13px; }
.step-number { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: #2b66b3; background: #eaf2fc; font-size: 12px; font-weight: 800; }
.panel-heading h2 { margin: 0; color: #23324a; font-size: 14px; font-weight: 750; }
.panel-heading p { margin: 4px 0 0; color: #8995a6; font-size: 11px; }
.required-note { color: #8b98a9; font-size: 10px; }
.required-star { color: #e16f63; }
.base-fields { display: grid; grid-template-columns: 1fr 1fr 1.15fr auto; align-items: end; gap: 17px; padding: 21px 23px 23px; }
.form-field label, .filter-group .form-label { display: block; margin: 0 0 8px; color: #46556c; font-size: 11px; font-weight: 700; }
.form-select, .form-control { min-height: 43px; border-color: #dfe6ef; border-radius: 9px; color: #2e3b51; background-color: #fff; font-size: 12px; box-shadow: none !important; }
.form-select:focus, .form-control:focus { border-color: #7eafe6; box-shadow: 0 0 0 3px rgba(54,128,208,.1) !important; }
.form-hint { margin-top: 5px; color: #9aa5b4; font-size: 10px; }
.base-action .btn { min-height: 43px; min-width: 150px; }
.btn { border-radius: 9px; font-size: 11.5px; font-weight: 650; padding: 10px 15px; }
.btn-primary { border-color: #2868b8; background: #2868b8; box-shadow: 0 4px 9px rgba(40,104,184,.15); }
.btn-primary:hover, .btn-primary:focus { border-color: #1e579e; background: #1e579e; }
.btn-outline-secondary { border-color: #d9e1ea; color: #617187; background: #fff; }
.btn-outline-secondary:hover { border-color: #b9c9dc; color: #264f7d; background: #f7faff; }
.btn-light { border: 1px solid #e2e8f0; color: #617187; background: #f8fafc; }
.inline-alert { margin: 0 23px 18px; padding: 10px 12px; border: 1px solid #f3d5ce; border-radius: 8px; color: #a04b40; background: #fff7f5; font-size: 11px; }
.filters-panel .filter-group { padding: 19px 23px 20px; border-bottom: 1px solid #edf0f5; }
.filter-group-title { margin-bottom: 15px; color: #71839b; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.filter-group .form-label { margin-bottom: 6px; }
.filter-group .form-select { min-height: 40px; font-size: 11px; }
.filter-group .form-select:disabled { background-color: #f6f8fb; color: #a4afbd; }
.filter-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 23px; }
.filter-hint { color: #8b98a9; font-size: 10px; }
.filter-hint i { color: #6e9bce; }
.filters-panel .inline-alert { margin-top: 0; }
.ts-wrapper.single .ts-control { display: flex; align-items: center; min-height: 40px; padding: 7px 11px; border: 1px solid #dfe6ef; border-radius: 9px; color: #2e3b51; background: #fff; font-size: 11px; box-shadow: none; }
.ts-wrapper.focus .ts-control { border-color: #7eafe6; box-shadow: 0 0 0 3px rgba(54,128,208,.1); }
.ts-wrapper.disabled .ts-control { background: #f6f8fb; }
.ts-dropdown { border-color: #dfe6ef; border-radius: 9px; box-shadow: 0 8px 22px rgba(25,45,78,.12); font-size: 11px; }
.results-section { margin-top: 33px; }
.results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.results-heading h2 { margin: 7px 0 5px; color: #1d2d45; font-size: 19px; font-weight: 760; letter-spacing: -.025em; }
.results-heading p { margin: 0; color: #8491a4; font-size: 11px; }
.results-tools { display: flex; gap: 8px; }
.btn-outline-success { border-color: #c9e6d7; color: #17835c; background: #f8fdfa; }
.btn-outline-success:hover { border-color: #8ec9aa; color: #126c4b; background: #effaf4; }
.btn:disabled { opacity: .48; cursor: not-allowed; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; margin-bottom: 17px; }
.metric-card { min-width: 0; padding: 16px 17px 14px; border: 1px solid #e8edf3; border-radius: 13px; background: #fff; box-shadow: var(--shadow-soft); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #7b899d; font-size: 10.5px; font-weight: 650; }
.metric-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; font-size: 14px; }
.icon-blue { color: #3878c3; background: #edf4fd; }
.icon-violet { color: #7b66bc; background: #f2effb; }
.icon-cyan { color: #258d9e; background: #eaf8fa; }
.icon-green { color: #268861; background: #eaf7f0; }
.metric-value { overflow: hidden; margin-top: 11px; color: #1d2e47; font-size: clamp(18px, 2vw, 23px); font-weight: 760; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.metric-foot { margin-top: 4px; color: #a0aaba; font-size: 9px; }
.table-panel { overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 20px; border-bottom: 1px solid #edf0f5; }
.table-caption { display: flex; align-items: baseline; gap: 11px; }
.table-caption strong { color: #2a3a52; font-size: 12px; font-weight: 750; }
.table-caption span { color: #9aa5b4; font-size: 10px; }
.table-search { position: relative; width: min(100%, 245px); }
.table-search i { position: absolute; top: 10px; left: 11px; color: #9aa7b7; font-size: 11px; }
.table-search input { width: 100%; height: 34px; padding: 0 10px 0 31px; border: 1px solid #e2e8ef; border-radius: 8px; outline: none; color: #34445b; font-size: 10.5px; }
.table-search input:focus { border-color: #9abbe0; }
.budget-table { min-width: 1240px; font-size: 10.5px; }
.budget-table thead th { padding: 12px 11px; border-bottom: 1px solid #e8edf3; color: #718198; background: #f8fafc; font-size: 9px; font-weight: 800; letter-spacing: .035em; white-space: nowrap; }
.budget-table tbody td { padding: 12px 11px; border-color: #eff2f6; color: #42516a; vertical-align: middle; }
.budget-table tbody tr:hover { background: #fbfdff; }
.budget-table .col-index { width: 38px; color: #a4afbd; }
.cell-code { color: #263b58; font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.cell-name { max-width: 170px; overflow: hidden; margin-top: 3px; color: #8995a6; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; }
.amount-cell { color: #34455e; font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn-detail { width: 29px; height: 29px; padding: 0; border: 1px solid #e1eaf5; border-radius: 8px; color: #3973b7; background: #f5f9fe; }
.btn-detail:hover { color: #fff; border-color: #3973b7; background: #3973b7; }
.empty-state { display: flex; min-height: 215px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; color: #98a4b4; }
.empty-state strong { color: #53637a; font-size: 12px; }
.empty-state span:not(.empty-icon) { font-size: 10px; }
.empty-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 4px; border-radius: 13px; color: #7394bb; background: #eff5fc; font-size: 17px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 19px; border-top: 1px solid #edf0f5; color: #8a97a9; font-size: 10px; }
.pagination { gap: 4px; }
.pagination .page-link { min-width: 29px; height: 29px; display: grid; place-items: center; padding: 0 8px; border: 1px solid #e4eaf1; border-radius: 7px !important; color: #65758b; background: #fff; font-size: 10px; }
.pagination .page-item.active .page-link { border-color: #2868b8; color: #fff; background: #2868b8; }
.pagination .page-item.disabled .page-link { color: #bac3ce; background: #fafbfd; }
.data-note { margin-top: 11px; color: #99a4b2; font-size: 9.5px; }
.data-note i { color: #4e9a79; }
.app-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 35px; padding: 15px 0 0; border-top: 1px solid #e6ebf1; color: #9aa5b4; font-size: 9px; }
.btn-icon { width: 36px; height: 36px; padding: 0; border: 1px solid #e2e8ef; color: #5b6a7f; background: white; font-size: 18px; }
.toast { border-radius: 12px; background: #fff; }
.toast-header { border-bottom-color: #edf1f5; }
.toast-mark { display: grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 7px; color: #2a6db8; background: #eaf2fc; }
.toast-body { color: #617187; font-size: 11px; }
.modal-content { overflow: hidden; border: 0; border-radius: 15px; box-shadow: 0 18px 60px rgba(12,27,49,.2); }
.modal-header { padding: 19px 22px; border-bottom-color: #edf0f5; }
.modal-title { margin-top: 5px; color: #24354e; font-size: 16px; font-weight: 750; }
.modal-body { padding: 22px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.detail-item { min-width: 0; padding: 11px 12px; border: 1px solid #edf0f5; border-radius: 9px; background: #fbfcfe; }
.detail-item strong { display: block; margin-bottom: 5px; color: #8290a2; font-size: 9px; font-weight: 700; }
.detail-item span { display: block; overflow-wrap: anywhere; color: #34445b; font-size: 10.5px; font-weight: 600; }
.dictionary-list { display: grid; gap: 9px; }
.dictionary-list > div { display: grid; gap: 5px; padding: 12px; border: 1px solid #edf0f5; border-radius: 9px; }
.dictionary-list strong { color: #344760; font-size: 11px; }
.dictionary-list span { color: #7d8b9e; font-size: 10px; line-height: 1.55; }

@media (max-width: 1200px) {
    .sidebar { width: 225px; }
    .main-content { margin-left: 225px; }
    .topbar { padding: 0 25px; }
    .page-wrap { padding: 28px 25px 20px; }
    .base-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-105%); transition: transform .22s ease; }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .topbar { height: 60px; padding: 0 20px; }
    .page-wrap { padding: 24px 20px 18px; }
    .breadcrumb-line { margin-right: auto; }
    .topbar-date { display: none; }
}
@media (max-width: 640px) {
    .topbar { gap: 10px; padding: 0 13px; }
    .breadcrumb-line { overflow: hidden; gap: 7px; font-size: 9px; white-space: nowrap; }
    .breadcrumb-line strong { overflow: hidden; text-overflow: ellipsis; }
    .api-status { font-size: 0; }
    .api-status .status-dot { width: 8px; height: 8px; }
    .page-wrap { padding: 20px 13px 15px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .page-heading h1 { font-size: 23px; }
    .source-link { align-self: flex-start; }
    .panel-heading { align-items: flex-start; padding: 17px 15px 15px; }
    .required-note { display: none; }
    .base-fields { grid-template-columns: 1fr; padding: 17px 15px; gap: 13px; }
    .base-action .btn { width: 100%; }
    .filters-panel .panel-heading { flex-wrap: wrap; }
    .filters-panel .filter-group { padding: 16px 15px; }
    .filter-footer { align-items: stretch; flex-direction: column; padding: 15px; }
    .filter-footer .d-flex { width: 100%; }
    .filter-footer .btn { flex: 1; }
    .inline-alert { margin-right: 15px; margin-left: 15px; }
    .results-section { margin-top: 27px; }
    .results-heading { align-items: flex-start; flex-direction: column; }
    .results-tools { width: 100%; }
    .results-tools .btn { width: 100%; }
    .metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
    .metric-card { padding: 12px; }
    .metric-top { align-items: flex-start; font-size: 9px; }
    .metric-icon { width: 27px; height: 27px; font-size: 12px; }
    .metric-value { font-size: 17px; }
    .table-toolbar { align-items: flex-start; flex-direction: column; padding: 14px; }
    .table-search { width: 100%; }
    .table-footer { align-items: flex-start; flex-direction: column; padding: 12px 14px; }
    .app-footer { flex-direction: column; }
    .detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .modal-body { padding: 14px; }
}