:root {
  --ink: #172033;
  --muted: #526176;
  --line: #e4e8ef;
  --canvas: #f4f6f9;
  --panel: #fff;
  --navy: #182640;
  --navy-2: #243552;
  --blue: #3157c8;
  --blue-soft: #edf2ff;
  --red: #c93535;
  --red-soft: #fff0ef;
  --green: #16835b;
  --shadow: 0 12px 34px rgba(32, 48, 79, .07);
  --radius: 18px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 26px 18px 20px; color: #e7edf9; background: linear-gradient(180deg, #142038, #1c2d4a 65%, #15233c); z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; }
.brand-mark, .login-emblem { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; color: #fff; background: linear-gradient(145deg, #3d64d3, #27469d); box-shadow: inset 0 1px rgba(255,255,255,.25), 0 10px 24px rgba(0,0,0,.18); font: 700 20px Georgia, serif; }
.brand b { display: block; font-size: 17px; letter-spacing: .02em; }
.brand small { display: block; margin-top: 2px; color: #aebad0; font-size: 11px; }
.nav-list { display: grid; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 0 13px; border-radius: 12px; color: #bfc9db; font-size: 14px; font-weight: 600; transition: .18s ease; }
.nav-link span { display: grid; width: 22px; place-items: center; color: #9eacc5; font-size: 18px; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(70,103,201,.52), rgba(77,108,193,.24)); box-shadow: inset 3px 0 #6d8df0; }
.sidebar-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09); }
.user-card { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-card > span:last-child { min-width: 0; }
.user-card b, .user-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card b { color: #fff; font-size: 13px; }
.user-card small { margin-top: 3px; color: #94a3bb; font-size: 11px; }
.avatar { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: #3c5b9f; font-weight: 800; }
.avatar.small { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
.avatar.large { width: 52px; height: 52px; border-radius: 16px; }
.link-button { margin: 10px 0 0 48px; padding: 0; border: 0; color: #91a0b9; background: transparent; cursor: pointer; font-size: 12px; }
.link-button:hover { color: #fff; }

.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 68px; display: flex; align-items: center; gap: 15px; padding: 0 36px; border-bottom: 1px solid var(--line); color: var(--ink); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.menu-button { display: none; border: 0; background: none; font-size: 22px; cursor: pointer; }
.topbar-title { color: #5a667d; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; color: #637088; font-size: 13px; }
.search-link { display: flex; align-items: center; gap: 7px; }
.search-link:first-letter { font-size: 19px; }
.today-label { padding-left: 20px; border-left: 1px solid var(--line); }
.page-wrap { width: min(1500px, 100%); margin: 0 auto; padding: 34px 38px 44px; }
.page-footer { margin-top: auto; padding: 16px 38px 24px; color: #8993a5; font-size: 11px; text-align: right; }

.page-heading { margin-bottom: 26px; }
.page-heading h1 { margin: 5px 0 7px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.page-heading > p:last-child, .page-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.heading-actions { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.kicker { margin: 0; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--muted); }
.danger-text { color: var(--red) !important; }
.back-link { display: inline-block; margin-bottom: 20px; color: #67738a; font-size: 13px; font-weight: 600; }

.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 750; transition: .16s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: linear-gradient(135deg, #3157c8, #2647a8); box-shadow: 0 8px 18px rgba(49,87,200,.2); }
.button.secondary { color: #2d4ba1; border-color: #cfd8ef; background: #f7f9ff; }
.button.ghost { color: var(--ink); border-color: var(--line); background: var(--panel); }
.button.wide { width: 100%; }
.button.tiny { min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 11px; }
.success-button { color: var(--green); border-color: #bde4d4; background: #edfaf5; }
.danger-button { color: var(--red); border-color: #f0c5c2; background: #fff1f0; }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.flash { margin-bottom: 18px; padding: 13px 16px; border: 1px solid; border-radius: 12px; font-size: 13px; font-weight: 600; }
.flash.success { color: #156244; border-color: #bfe3d3; background: #edf9f4; }
.flash.error { color: #a32828; border-color: #f2c6c4; background: #fff0ef; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric { min-width: 0; display: flex; align-items: center; gap: 13px; min-height: 100px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--panel); box-shadow: var(--shadow); transition: .18s ease; }
.metric:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(32,48,79,.11); }
.metric-icon { flex: 0 0 auto; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; font-weight: 900; }
.metric b, .metric small { display: block; }
.metric b { font-size: 30px; letter-spacing: -.04em; line-height: 1; }
.metric small { margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 650; }
.metric.danger .metric-icon { color: #b82929; background: #ffebe9; }
.metric.warning .metric-icon { color: #aa650b; background: #fff2d9; }
.metric.blue .metric-icon { color: #3157c8; background: #eaf0ff; }
.metric.violet .metric-icon { color: #7442bf; background: #f2eaff; }
.metric.dark .metric-icon { color: #fff; background: var(--navy); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 18px; }
.panel { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.panel-large { min-height: 430px; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading h2, .panel-heading > h2 { margin: 3px 0 0; font-size: 18px; letter-spacing: -.02em; }
.panel-heading > a { color: #4261b3; font-size: 12px; font-weight: 700; }
.task-stack { display: grid; }
.task-row { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 15px 4px; border-top: 1px solid #edf0f5; }
.task-row:first-child { border-top: 0; }
.task-row:hover b { color: #2749a8; }
.priority-line { width: 4px; align-self: stretch; border-radius: 8px; background: #9ea8b9; }
.priority-line.high { background: #e28a25; }
.priority-line.critical { background: var(--red); }
.task-main { min-width: 0; flex: 1; }
.task-main > * { display: block; }
.task-main .task-number { margin-bottom: 5px; color: #7b869a; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.task-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; transition: color .15s; }
.task-main small { margin-top: 5px; color: #788397; font-size: 11px; }
.task-deadline { flex: 0 0 72px; text-align: right; }
.task-deadline > * { display: block; }
.task-deadline small { color: #8c96a8; font-size: 9px; text-transform: uppercase; }
.task-deadline b { margin-top: 5px; font-size: 18px; }
.task-deadline.overdue { color: var(--red); }
.task-deadline.overdue small { color: var(--red); }
.compact-list { display: grid; }
.compact-list a { display: flex; gap: 12px; justify-content: space-between; padding: 13px 0; border-top: 1px solid #edf0f5; }
.compact-list a:first-child { border-top: 0; }
.compact-list span { min-width: 0; }
.compact-list b, .compact-list small { display: block; }
.compact-list b { font-size: 11px; }
.compact-list small { margin-top: 4px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-list em { color: #9a4c3e; font-size: 11px; font-style: normal; }
.issue-list { display: grid; gap: 15px; }
.issue-list article { display: grid; grid-template-columns: 5px 1fr; gap: 13px; }
.zone { border-radius: 10px; background: #e6ad28; }
.zone.red { background: var(--red); }
.zone.green { background: var(--green); }
.issue-list b { font-size: 13px; }
.issue-list p { margin: 5px 0; color: #5e697d; font-size: 12px; }
.issue-list small { color: #8a94a6; font-size: 10px; }
.agenda-list { display: grid; gap: 14px; }
.agenda-list article { display: flex; gap: 12px; align-items: center; }
.agenda-list time { flex: 0 0 45px; display: grid; place-items: center; height: 48px; border-radius: 12px; color: #2949a3; background: #edf2ff; }
.agenda-list time b, .agenda-list time span { display: block; line-height: 1; }
.agenda-list time b { font-size: 17px; }
.agenda-list time span { margin-top: -5px; font-size: 9px; text-transform: uppercase; }
.agenda-list div > b, .agenda-list div > small { display: block; }
.agenda-list div > b { font-size: 12px; }
.agenda-list div > small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.empty-state { display: grid; min-height: 180px; place-items: center; color: #8c96a8; text-align: center; font-size: 13px; }
.empty-state.small { min-height: 90px; }

.filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(150px, .4fr)) auto auto; gap: 10px; margin-bottom: 18px; }
.filter-bar input, .filter-bar select, .form-section input, .form-section select, .form-section textarea, .action-panel input, .action-panel select, .action-panel textarea, .comment-form textarea, .inline-form input, .extension-list input { width: 100%; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--panel); outline: none; transition: .15s; }
.filter-bar input, .filter-bar select { height: 42px; padding: 0 12px; }
.filter-bar input:focus, .filter-bar select:focus, .form-section input:focus, .form-section select:focus, .form-section textarea:focus, .action-panel input:focus, .action-panel select:focus, .action-panel textarea:focus, .comment-form textarea:focus, .inline-form input:focus { border-color: #7d95d7; box-shadow: 0 0 0 3px rgba(49,87,200,.1); }
.search-field { position: relative; display: flex; align-items: center; color: #8c96a8; }
.search-field input { padding-left: 34px; }
.search-field { padding-left: 12px; }
.search-field input { position: absolute; inset: 0; }
.search-field::first-letter { position: relative; z-index: 1; }
.check-filter { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: #667188; font-size: 11px; font-weight: 700; }
.check-filter input { width: auto; height: auto; }
.table-panel { padding: 0; overflow: hidden; }
.table-summary { padding: 16px 20px; border-bottom: 1px solid var(--line); color: #788397; font-size: 11px; }
.table-summary b { color: var(--ink); }
.data-table { min-width: 930px; }
.table-head, .table-row { display: grid; grid-template-columns: minmax(320px, 1.7fr) minmax(175px, .8fr) minmax(150px, .65fr) 120px 110px; gap: 15px; align-items: center; }
.table-head { min-height: 44px; padding: 0 20px; color: var(--muted); background: color-mix(in srgb, var(--panel), var(--canvas) 45%); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.table-row { min-height: 86px; padding: 13px 20px; border-top: 1px solid #edf0f4; transition: .14s ease; }
.table-row:hover { background: color-mix(in srgb, var(--panel), var(--blue-soft) 35%); }
.table-row > span { min-width: 0; }
.table-row > span > b, .table-row > span > small { display: block; }
.table-row > span > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.table-row > span > small { margin-top: 5px; color: #7e899b; font-size: 10px; }
.task-cell { display: flex; align-items: start; gap: 11px; }
.task-cell > span { min-width: 0; }
.task-cell small, .task-cell b, .task-cell em { display: block; }
.task-cell small { color: #6c7a92; font-size: 9px; font-weight: 750; letter-spacing: .03em; }
.task-cell b { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.task-cell em { margin-top: 5px; color: #8b95a6; font-size: 10px; font-style: normal; }
.priority-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 23px; border-radius: 50%; background: #9ca6b6; }
.priority-dot.high { background: #e18b25; }
.priority-dot.critical { background: var(--red); box-shadow: 0 0 0 4px #ffe7e5; }
.status { display: inline-flex; width: fit-content; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--status-color), white 68%); border-radius: 999px; color: var(--status-color); background: color-mix(in srgb, var(--status-color), white 91%); font-size: 9px; font-weight: 800; }
.status.large { padding: 8px 12px; font-size: 11px; }
.deadline.overdue b, .deadline.overdue small { color: var(--red); }
.progress { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 10px; background: #e8ebf0; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3157c8, #7190e5); }

.form-layout { display: grid; gap: 18px; max-width: 1050px; }
.form-section { padding: 26px; }
.section-title { display: flex; gap: 13px; align-items: start; margin-bottom: 23px; }
.section-title > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 800; }
.section-title h2 { margin: 1px 0 4px; font-size: 18px; }
.section-title p { margin: 0; color: var(--muted); font-size: 11px; }
.form-grid { display: grid; gap: 15px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-section > label, .form-grid label, .action-panel label, .inline-form label { display: grid; gap: 7px; margin-top: 15px; color: #536078; font-size: 11px; font-weight: 750; }
.form-grid label { margin-top: 0; }
.form-section input, .form-section select, .action-panel input, .action-panel select { height: 44px; padding: 0 12px; }
.form-section textarea, .action-panel textarea, .comment-form textarea { padding: 12px; resize: vertical; }
.form-section select[multiple] { height: auto; padding: 8px; }
.form-section label > small { color: #8a94a6; font-size: 10px; font-weight: 500; }
.toggle-label { display: flex !important; align-items: center; gap: 10px !important; margin-top: 20px !important; cursor: pointer; }
.toggle-label input { display: none; }
.toggle-label > span { width: 36px; height: 20px; padding: 3px; border-radius: 20px; background: #cdd3dd; transition: .15s; }
.toggle-label > span::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; }
.toggle-label input:checked + span { background: var(--blue); }
.toggle-label input:checked + span::before { transform: translateX(16px); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }

.assignment-hero { display: flex; align-items: start; justify-content: space-between; gap: 30px; margin-bottom: 20px; padding: 28px 30px; border-radius: 22px; color: #fff; background: radial-gradient(circle at 75% -20%, #3c5d9a 0, transparent 40%), linear-gradient(125deg, #17243c, #223653); box-shadow: 0 18px 45px rgba(27,43,72,.18); }
.hero-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; color: #b9c6dc; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hero-meta strong { padding: 5px 8px; border-radius: 7px; color: #ffe89e; background: rgba(255,225,113,.12); }
.priority-label { padding: 5px 8px; border-radius: 7px; color: #dde5f4; background: rgba(255,255,255,.1); }
.priority-label.high { color: #ffd89b; background: rgba(241,166,55,.13); }
.priority-label.critical { color: #ffc0bb; background: rgba(222,70,60,.16); }
.assignment-hero h1 { max-width: 900px; margin: 0; font-size: clamp(25px, 3vw, 38px); line-height: 1.16; letter-spacing: -.03em; }
.assignment-hero p { margin: 11px 0 0; color: #b9c5d9; font-size: 12px; }
.hero-status { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.hero-deadline > * { display: block; text-align: right; }
.hero-deadline small { color: #aab8cf; font-size: 9px; text-transform: uppercase; }
.hero-deadline b { margin-top: 5px; font-size: 23px; }
.hero-deadline.overdue b { color: #ff9e96; }
.fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.fact-grid article { display: flex; flex-direction: column; min-height: 112px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--panel); }
.fact-grid small { color: #8a94a6; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.fact-grid b { margin-top: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.fact-grid span:not(.progress) { margin-top: 6px; color: var(--muted); font-size: 10px; }
.fact-grid .progress { margin-top: auto; }
.decision-banner { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding: 16px 20px; border: 1px solid #f1c6c1; border-radius: 14px; color: #8f2e27; background: #fff1ef; }
.decision-banner > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--red); font-weight: 900; }
.decision-banner b, .decision-banner p { display: block; margin: 0; }
.decision-banner p { margin-top: 4px; font-size: 12px; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; }
.tabs button { min-height: 40px; padding: 0 13px; border: 0; border-radius: 10px; color: #6e798d; background: transparent; white-space: nowrap; cursor: pointer; font-size: 11px; font-weight: 750; }
.tabs button span { margin-left: 4px; padding: 2px 6px; border-radius: 10px; background: #e9ecf2; font-size: 9px; }
.tabs button.active { color: #2949a4; background: #eaf0ff; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.detail-main { min-width: 0; }
.tab-pane { display: none; min-height: 360px; }
.tab-pane.active { display: block; }
.tab-pane h3 { margin: 19px 0 10px; font-size: 14px; }
.tab-pane hr { margin: 24px 0; border: 0; border-top: 1px solid var(--line); }
.prose { color: #455168; line-height: 1.7; white-space: pre-wrap; font-size: 13px; }
.people-list { display: flex; flex-wrap: wrap; gap: 10px; }
.person-chip { display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 9px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 11px; font-size: 11px; font-weight: 750; }
.person-chip i { grid-row: span 2; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: #4965a9; font-style: normal; }
.person-chip small { color: #8791a3; font-size: 9px; font-weight: 500; }
.detail-side { display: grid; gap: 14px; position: sticky; top: 86px; }
.action-panel h2 { margin: 5px 0 16px; font-size: 18px; }
.action-panel label:first-of-type { margin-top: 0; }
.range-row { display: flex; align-items: center; gap: 9px; }
.range-row input { padding: 0; accent-color: var(--blue); }
.range-row output { flex: 0 0 38px; color: #3157c8; font-weight: 800; }
.action-panel button { margin-top: 14px; }
.side-meta h3 { margin: 0 0 13px; font-size: 14px; }
.side-meta dl { margin: 0; }
.side-meta dl > div { padding: 11px 0; border-top: 1px solid #edf0f4; }
.side-meta dl > div:first-child { border-top: 0; }
.side-meta dt { color: #8a94a6; font-size: 9px; text-transform: uppercase; }
.side-meta dd { margin: 5px 0 0; font-size: 11px; font-weight: 700; }
.comment-form { display: grid; justify-items: end; gap: 9px; margin-bottom: 18px; }
.comment-form textarea { width: 100%; }
.timeline { display: grid; }
.timeline article { display: flex; gap: 11px; padding: 15px 0; border-top: 1px solid #edf0f4; }
.timeline article > div { flex: 1; }
.timeline header { display: flex; justify-content: space-between; gap: 10px; }
.timeline header b { font-size: 11px; }
.timeline time { color: #939cad; font-size: 9px; }
.timeline p { margin: 7px 0 0; color: var(--ink); line-height: 1.55; font-size: 12px; }
.upload-form { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.file-drop { flex: 1; display: grid; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink); background: color-mix(in srgb, var(--panel), var(--canvas) 35%); cursor: pointer; }
.file-drop input { display: none; }
.file-drop span { font-size: 11px; font-weight: 750; }
.file-drop small { margin-top: 4px; color: #8b95a7; font-size: 9px; }
.document-list { display: grid; }
.document-list a { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-top: 1px solid #edf0f4; }
.document-list a > span:nth-child(2) { min-width: 0; flex: 1; }
.document-list b, .document-list small { display: block; }
.document-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.document-list small { margin-top: 4px; color: #8b95a7; font-size: 9px; }
.document-list em { color: #3157c8; font-size: 10px; font-style: normal; font-weight: 750; }
.file-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #3157c8; background: #edf2ff; }
.inline-form { display: flex; align-items: end; gap: 9px; margin-bottom: 18px; }
.inline-form label { margin: 0; }
.inline-form label.grow { flex: 1; }
.inline-form input, .extension-list input { height: 39px; padding: 0 10px; }
.extension-list { display: grid; }
.extension-list article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 15px 0; border-top: 1px solid #edf0f4; }
.extension-list article > div b { font-size: 12px; }
.extension-list p { margin: 5px 0; color: #566178; font-size: 11px; }
.extension-list small { color: #8d97a8; font-size: 9px; }
.extension-list form { grid-column: 1 / -1; display: flex; gap: 7px; }
.extension-list form input { flex: 1; }
.extension-status { height: fit-content; padding: 5px 8px; border-radius: 8px; color: #9a620f; background: #fff1d8; font-size: 9px; font-weight: 800; }
.extension-status.approved { color: #16734f; background: #e9f8f1; }
.extension-status.rejected { color: #aa3029; background: #fff0ef; }
.audit-list article { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 0 0 18px; }
.audit-list article > span::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: -4px; width: 1px; background: #dce1e9; }
.audit-list article > span::after { content: ""; position: absolute; left: 1px; top: 4px; width: 9px; height: 9px; border: 2px solid #7690d4; border-radius: 50%; background: var(--panel); }
.audit-list b, .audit-list small { display: block; }
.audit-list b { font-size: 11px; }
.audit-list small { margin-top: 5px; color: #8b95a7; font-size: 9px; }

.report-form { display: grid; gap: 14px; margin-bottom: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: color-mix(in srgb, var(--panel), var(--blue-soft) 24%); }
.report-form > label:not(.file-drop), .review-form label { display: grid; gap: 7px; color: #536078; font-size: 11px; font-weight: 750; }
.report-form textarea { width: 100%; padding: 12px; border: 1px solid #d5ddea; border-radius: 11px; resize: vertical; outline: none; }
.report-form textarea:focus, .review-form input:focus { border-color: #7d95d7; box-shadow: 0 0 0 3px rgba(49,87,200,.1); }
.report-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.report-submit-row p { margin: 0; color: #768298; font-size: 10px; }
.report-list { display: grid; gap: 14px; }
.report-card { padding: 17px; border: 1px solid var(--line); border-left: 4px solid #c58a24; border-radius: 14px; color: var(--ink); background: var(--panel); }
.report-card.accepted { border-left-color: var(--green); }
.report-card.returned { border-left-color: var(--red); }
.report-card > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.report-card > header > div { display: flex; gap: 9px; align-items: center; }
.report-card > header b, .report-card > header small { display: block; }
.report-card > header b { font-size: 11px; }
.report-card > header small { margin-top: 3px; color: #8a94a6; font-size: 9px; }
.report-card > header mark { padding: 5px 8px; border-radius: 8px; color: #90610f; background: #fff2d9; font-size: 9px; font-weight: 800; }
.report-card.accepted > header mark { color: #156d4b; background: #eaf8f2; }
.report-card.returned > header mark { color: #a1322c; background: #fff0ef; }
.report-text { margin-top: 14px; color: var(--ink); white-space: pre-wrap; line-height: 1.65; font-size: 12px; }
.report-file-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.report-file-grid a { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--panel), var(--canvas) 30%); }
.report-file-grid a > span:last-child { min-width: 0; }
.report-file-grid b, .report-file-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-file-grid b { font-size: 10px; }
.report-file-grid small { margin-top: 3px; color: #8a94a6; font-size: 8px; }
.report-file-grid a.photo { display: grid; padding: 0; overflow: hidden; }
.report-file-grid a.photo img { width: 100%; height: 130px; object-fit: cover; background: #eef1f6; }
.report-file-grid a.photo > span { padding: 0 9px 9px; }
.report-review { margin-top: 14px; padding: 11px 13px; border-radius: 10px; color: var(--ink); background: color-mix(in srgb, var(--panel), var(--canvas) 45%); }
.report-review b, .report-review small { display: block; font-size: 9px; }
.report-review p { margin: 5px 0; font-size: 11px; }
.review-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf0f4; }
.review-form input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #dce1e9; border-radius: 9px; outline: none; }
.review-form > div { display: flex; gap: 7px; }

.leader-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.leader-card { padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--panel); box-shadow: var(--shadow); }
.leader-card header { display: flex; align-items: center; gap: 13px; }
.leader-card header > div { min-width: 0; flex: 1; }
.leader-card h2, .leader-card p, .leader-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-card h2 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 800; }
.leader-card p { margin: 5px 0; color: var(--muted); font-size: 12px; font-weight: 650; }
.leader-card small { color: var(--muted); font-size: 10px; }
.leader-card header mark { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: var(--green); background: #edf9f4; font-size: 14px; font-weight: 850; }
.leader-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 20px 0; border: 1px solid var(--line); border-radius: 12px; }
.leader-stats span { padding: 12px; border-left: 1px solid var(--line); text-align: center; }
.leader-stats span:first-child { border-left: 0; }
.leader-stats b, .leader-stats small { display: block; }
.leader-stats b { color: var(--ink); font-size: 19px; }
.leader-stats .danger-text b { color: var(--red); }
.leader-stats small { margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.discipline > span { display: block; height: 7px; overflow: hidden; border-radius: 8px; background: var(--line); }
.discipline i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #16835b, #4bb48c); }
.discipline small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 650; }
.department-grid { display: grid; gap: 13px; }
.department-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; }
.department-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: #3157c8; background: #edf2ff; font-size: 20px; }
.department-card h2 { margin: 0; font-size: 15px; }
.department-card p { margin: 5px 0; color: var(--muted); font-size: 10px; }
.people-mini { display: flex; flex-wrap: wrap; gap: 5px; }
.people-mini span { padding: 3px 7px; border-radius: 6px; color: #66738a; background: #f1f3f7; font-size: 8px; }
mark.enabled, mark.disabled, .config-list mark, .department-card > mark { padding: 5px 8px; border-radius: 8px; color: #16734f; background: #eaf8f2; font-size: 9px; font-weight: 750; }
mark.disabled { color: #8a3430; background: #fff0ef; }
.calendar-grid, .analytics-grid, .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-items: start; }
.calendar-list { display: grid; }
.calendar-list a { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #edf0f4; }
.calendar-list a:first-child { border-top: 0; }
.calendar-list time { display: grid; place-items: center; min-height: 50px; border-radius: 12px; color: #3157c8; background: #edf2ff; }
.calendar-list time.overdue { color: var(--red); background: #fff0ef; }
.calendar-list time b { font-size: 18px; }
.calendar-list time span { font-size: 8px; }
.calendar-list div > * { display: block; }
.calendar-list div b { font-size: 11px; }
.calendar-list div small { margin-top: 5px; color: #8c96a8; font-size: 9px; }
.agenda-list.large article { align-items: start; padding: 10px 0; }
.agenda-list.large p { margin: 7px 0 0; color: #68748a; font-size: 11px; }
.analytics-top { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.analytics-top article { padding: 20px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--panel); box-shadow: var(--shadow); }
.analytics-top small, .analytics-top b { display: block; }
.analytics-top small { color: #7f899a; font-size: 10px; }
.analytics-top b { margin-top: 9px; font-size: 30px; }
.analytics-top article.danger b { color: var(--red); }
.analytics-table header, .analytics-table > div { display: grid; grid-template-columns: 1fr repeat(3, 70px); gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid #edf0f4; font-size: 10px; text-align: right; }
.analytics-table header { color: #8b95a7; border-top: 0; font-size: 8px; text-transform: uppercase; }
.analytics-table header span:first-child, .analytics-table > div b { text-align: left; }
.bar-list { display: grid; gap: 14px; }
.bar-list article > span { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 10px; }
.bar-list article i { display: block; height: 7px; overflow: hidden; border-radius: 7px; background: #eaedf2; }
.bar-list article em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3157c8, #7d98e1); }
.admin-grid { align-items: stretch; }
.admin-management-grid { display: grid; grid-template-columns: minmax(300px,.7fr) minmax(520px,1.3fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.admin-management-grid .form-section form { display: grid; gap: 14px; }
.admin-management-grid .form-section form > label { margin-top: 0; }
.admin-directory { margin-bottom: 16px; }
.user-directory { display: grid; }
.user-directory article { display: grid; grid-template-columns: 34px minmax(220px,1.2fr) minmax(220px,1fr) auto auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #edf0f4; }
.user-directory article:first-child { border-top: 0; }
.user-directory b, .user-directory small { display: block; }
.user-directory b { font-size: 11px; }
.user-directory small { margin-top: 4px; color: #8a94a6; font-size: 9px; }
.user-scope { min-width: 0; }
.reference-grid { margin-top: 0; }
.department-icon.small { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.password-form { max-width: 720px; }
.muted-field { opacity: .62; }
.config-list { display: grid; }
.config-list article { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #edf0f4; }
.config-list article:first-child { border-top: 0; }
.config-list article > div { min-width: 0; flex: 1; }
.config-list b, .config-list small { display: block; }
.config-list b { font-size: 11px; }
.config-list small { margin-top: 4px; color: #8b95a7; font-size: 9px; }
.config-color { width: 10px; height: 10px; border-radius: 50%; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 10px; }
.tag-cloud i { width: 8px; height: 8px; border-radius: 50%; }

.login-body { color: #fff; background: #142038; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(440px,.85fr); }
.login-intro { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 8vw; overflow: hidden; background: radial-gradient(circle at 15% 20%, rgba(86,119,211,.38), transparent 31%), radial-gradient(circle at 75% 80%, rgba(53,112,119,.3), transparent 29%), linear-gradient(145deg, #142038, #1b2e4d); }
.login-intro::after { content: ""; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom right,#000,transparent); }
.login-intro > * { position: relative; z-index: 1; }
.login-emblem { width: 54px; height: 54px; margin-bottom: 40px; border-radius: 17px; font-size: 25px; }
.login-intro .kicker { color: #8fa9ff; }
.login-intro h1 { max-width: 700px; margin: 12px 0 18px; font-size: clamp(40px, 5vw, 70px); line-height: 1; letter-spacing: -.045em; }
.login-intro > p:not(.kicker) { max-width: 570px; margin: 0; color: #b4c0d5; line-height: 1.6; font-size: 15px; }
.login-principles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.login-principles span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: #c8d2e3; background: rgba(255,255,255,.04); font-size: 10px; }
.login-panel { display: grid; place-items: center; padding: 40px; color: var(--ink); background: #f5f7fa; }
.login-card { width: min(390px, 100%); display: grid; gap: 18px; padding: 34px; border: 1px solid #e1e5ec; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(10,24,49,.14); }
.login-card h2 { margin: 6px 0 5px; font-size: 27px; letter-spacing: -.03em; }
.login-card p { margin: 0; font-size: 11px; }
.login-card label { display: grid; gap: 7px; color: #536078; font-size: 11px; font-weight: 750; }
.login-card input { width: 100%; height: 45px; padding: 0 12px; border: 1px solid #dce1e9; border-radius: 10px; outline: none; }
.login-card input:focus { border-color: #7891d5; box-shadow: 0 0 0 3px rgba(49,87,200,.1); }
.demo-note { padding: 12px; border-radius: 10px; color: #58667e; background: #f1f4fa; font-size: 10px; line-height: 1.55; }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .filter-bar { grid-template-columns: 1fr 1fr 1fr; }
  .search-field { grid-column: span 2; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); width: 270px; transition: transform .2s ease; box-shadow: 20px 0 45px rgba(15,25,44,.25); }
  .sidebar.open { transform: translateX(0); }
  .menu-button { display: block; }
  .topbar { padding: 0 18px; }
  .page-wrap { padding: 28px 20px 40px; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { position: static; grid-row: 1; }
  .leader-grid, .calendar-grid, .analytics-grid, .admin-grid { grid-template-columns: 1fr; }
  .admin-management-grid { grid-template-columns: 1fr; }
  .user-directory article { grid-template-columns: 34px 1fr auto; }
  .user-scope { grid-column: 2; }
  .user-directory article form { grid-column: 3; grid-row: 1 / span 2; }
  .login-layout { grid-template-columns: 1fr; }
  .login-intro { min-height: 42vh; padding: 50px 8vw; }
  .login-intro h1 { font-size: clamp(38px, 9vw, 62px); }
  .login-emblem { margin-bottom: 25px; }
  .login-panel { padding: 28px 18px; }
  .table-panel { overflow-x: auto; }
}

@media (max-width: 640px) {
  .topbar-title, .today-label, .search-link span { display: none; }
  .page-heading h1 { font-size: 30px; }
  .heading-actions { align-items: stretch; flex-direction: column; }
  .heading-actions .button { width: 100%; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric { min-height: 84px; padding: 13px; }
  .metric:last-child { grid-column: span 2; }
  .metric b { font-size: 25px; }
  .metric small { font-size: 9px; }
  .panel { padding: 17px; border-radius: 15px; }
  .filter-bar { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; min-height: 42px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .assignment-hero { flex-direction: column; padding: 22px; }
  .hero-status { width: 100%; align-items: flex-start; flex-direction: row; justify-content: space-between; }
  .hero-deadline > * { text-align: left; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .fact-grid article { min-height: 95px; }
  .inline-form, .upload-form { align-items: stretch; flex-direction: column; }
  .extension-list article { grid-template-columns: 1fr; }
  .extension-list form { flex-wrap: wrap; }
  .extension-list form input { flex-basis: 100%; }
  .report-submit-row, .review-form { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .report-file-grid { grid-template-columns: 1fr 1fr; }
  .leader-grid { grid-template-columns: 1fr; }
  .department-card { grid-template-columns: 42px 1fr; }
  .department-card > mark { grid-column: 2; width: fit-content; }
  .analytics-top { grid-template-columns: 1fr; }
  .login-intro { min-height: 38vh; }
  .login-intro > p:not(.kicker), .login-principles { display: none; }
  .login-card { padding: 25px; }
}

/* Версия 0.3 — объединённый управленческий контур */
:root {
  --navy: #173f5f;
  --navy-2: #235b78;
  --blue: #2f6fed;
  --teal: #0a8f83;
  --orange: #ea7c38;
  --violet: #7954d8;
  --canvas: #f3f6f8;
  --panel: rgba(255,255,255,.96);
  --shadow: 0 14px 42px rgba(24,55,77,.075);
}

html[data-theme="dark"] {
  --ink: #e7edf3;
  --muted: #b7c4ce;
  --line: #3a5563;
  --canvas: #0e1c24;
  --panel: #152d38;
  --blue-soft: #1a3b55;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --ink: #e7edf3;
    --muted: #b7c4ce;
    --line: #3a5563;
    --canvas: #0e1c24;
    --panel: #152d38;
    --blue-soft: #1a3b55;
    color-scheme: dark;
  }
  html[data-theme="system"] body { color: var(--ink); }
  html[data-theme="system"] .file-drop,
  html[data-theme="system"] .report-form { border-color: var(--line); }
}
html[data-theme="dark"] body { color: var(--ink); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea,
html[data-theme="dark"] .button.ghost, html[data-theme="dark"] .metric,
html[data-theme="dark"] .fact-grid article, html[data-theme="dark"] .leader-card { color: var(--ink); background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .file-drop, html[data-theme="dark"] .report-form { border-color: var(--line); }

.sidebar { width: 280px; padding: 20px 14px 16px; background: radial-gradient(circle at 30% -5%, #2b6b86 0, transparent 34%), linear-gradient(180deg,#102d40,#112536 62%,#0d2230); }
.app-shell { grid-template-columns: 280px minmax(0,1fr); }
.brand { padding: 0 10px 18px; }
.brand-mark { border: 0; background: linear-gradient(145deg,#3aa69a,#23768b); box-shadow: 0 12px 28px rgba(0,0,0,.22); font-family: inherit; }
.brand b { letter-spacing: .12em; }
.sidebar-scroll { flex: 1; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.nav-caption { margin: 17px 12px 7px; color: #9db3c3; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-list { gap: 3px; }
.nav-link { min-height: 42px; padding: 0 11px; color: #d1dce6; }
.nav-link span { color: #b7c8d6; }
.nav-link b { flex: 1; font-size: 12px; }
.nav-link.active { background: linear-gradient(90deg,rgba(42,151,146,.42),rgba(52,117,156,.2)); box-shadow: inset 3px 0 #58cab8; }
.nav-badge, .icon-action em { min-width: 20px; height: 20px; display: grid; place-items: center; margin-left: auto; border-radius: 999px; color: #fff; background: #e15b55; font-size: 9px; font-style: normal; }
.sidebar-footer { padding: 14px 8px 0; }
.user-card { flex: 1; }
.avatar { object-fit: cover; overflow: hidden; }
.user-card img.avatar, .kpi-person img.avatar { display: block; object-fit: cover; }
.topbar { height: 66px; }
.topbar-title { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #24b29c; box-shadow: 0 0 0 4px rgba(36,178,156,.12); }
.icon-action { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--panel); cursor: pointer; }
.icon-action em { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; }
.mobile-bottom-nav { display: none; }
.metric-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.metric.teal .metric-icon { color: #08776d; background: #e0f6f2; }
.quick-module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 18px; }
.quick-module-grid > a { display: flex; align-items: center; gap: 13px; min-height: 86px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); transition: .18s ease; }
.quick-module-grid > a:hover { transform: translateY(-2px); border-color: #b8c7d1; }
.quick-module-grid b, .quick-module-grid small { display: block; }
.quick-module-grid b { font-size: 13px; }
.quick-module-grid small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.module-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #255f9a; background: #e5f1fb; font-size: 19px; font-weight: 800; }
.module-icon.orange { color: #b85b24; background: #fff0e5; }
.module-icon.violet { color: #6541bf; background: #eee8ff; }
.module-icon.green { color: #14785f; background: #e2f5ef; }
.module-icon.sun { color: #a65b0b; background: #fff0cb; }
.ai-panel { display: flex; align-items: flex-start; gap: 16px; border-color: #ddd7f5; background: linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--panel),#eee8ff 30%)); }
.ai-panel h2 { margin: 3px 0 9px; font-size: 17px; }
.ai-panel ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.dashboard-ai { margin-bottom: 18px; }
.hero-counter { min-width: 68px; height: 68px; display: grid; place-items: center; border-radius: 21px; color: #fff; background: linear-gradient(145deg,#245d7b,#2d877e); font-size: 25px; font-weight: 800; }

.task-view-toggles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.task-view-toggles a { padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.task-view-toggles a.active { border-color: #8eaef0; box-shadow: inset 0 0 0 2px rgba(47,111,237,.1); background: var(--blue-soft); }
.task-view-toggles a.urgent.active { border-color: #edaaa5; background: #fff1ef; }
.task-view-toggles b, .task-view-toggles small { display: block; }
.task-view-toggles b { font-size: 11px; }
.task-view-toggles small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.table-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bulk-actions { display: flex; align-items: center; gap: 8px; }
.bulk-actions input { width: 90px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; }
.data-table.with-select .table-head, .data-table.with-select .table-row { grid-template-columns: 28px minmax(300px,1.7fr) minmax(175px,.8fr) minmax(150px,.65fr) 120px 110px; }
.row-check input { position: absolute; opacity: 0; }
.row-check span { width: 18px; height: 18px; display: block; border: 1px solid #bbc6d0; border-radius: 6px; background: var(--panel); }
.row-check input:checked + span { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 4px #fff; }

.accept-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #b8dfd8; border-radius: 15px; background: #eaf8f5; }
.accept-banner > div { display: flex; align-items: center; gap: 12px; }
.accept-banner > div > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--teal); }
.accept-banner p, .accept-banner b, .accept-banner small { display: block; margin: 0; }
.accept-banner small { margin-top: 4px; color: #557a73; }
.checklist-block { margin-bottom: 22px; }
.checklist-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.checklist-head h3, .checklist-head p { margin: 0; }
.checklist-head p { margin-top: 4px; color: var(--muted); font-size: 9px; }
.checklist-head .progress { width: 170px; }
.checklist-items { display: grid; }
.checklist-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; min-height: 43px; border-top: 1px solid var(--line); color: var(--ink); background: transparent; }
.checklist-item button { width: 22px; height: 22px; border: 1px solid #b8c4cf; border-radius: 7px; color: #fff; background: var(--panel); cursor: pointer; }
.checklist-item.done button { border-color: var(--green); background: var(--green); }
.checklist-item.done > span { color: var(--muted); text-decoration: line-through; }
.checklist-item small { color: var(--muted); font-size: 8px; }
.checklist-add { margin-top: 13px; }
.recurrence-note { display: flex; gap: 12px; padding: 14px; border-radius: 13px; background: var(--blue-soft); }
.recurrence-note > span { font-size: 22px; }
.recurrence-note b, .recurrence-note p { display: block; margin: 0; }
.recurrence-note p { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.recurrence-builder { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--panel),var(--blue-soft) 28%); }
.recurrence-schedule-fields:has([data-recurrence-weekly][hidden]):has([data-recurrence-day][hidden]) { display: none; }
.recurrence-preview { margin: 0; padding: 10px 12px; border-radius: 10px; color: var(--blue); background: var(--blue-soft); font-size: 10px; font-weight: 750; }
.recurrence-badge { display: block; width: fit-content; margin-top: 6px; padding: 4px 7px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 7px; font-style: normal; font-weight: 800; }
.recurrence-filter-bar { grid-template-columns: minmax(230px,1fr) repeat(4,minmax(135px,.4fr)) auto auto; }
.manage-card { display: grid; gap: 8px; }
.manage-card form { display: contents; }

.modal { width: min(560px,calc(100vw - 30px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 20px; color: var(--ink); background: var(--panel); box-shadow: 0 28px 90px rgba(10,34,50,.34); }
.modal::backdrop { background: rgba(10,27,38,.56); backdrop-filter: blur(4px); }
.modal > form { position: relative; display: grid; gap: 14px; padding: 28px; overflow-y: auto; max-height: calc(100vh - 40px); }
.modal-wide { width: min(860px,calc(100vw - 30px)); }
.modal h2 { margin: 0; }
.modal p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 11px; }
.modal label, .panel > form > label, .knowledge-search label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 750; }
.modal input:not([type=checkbox]), .modal select, .modal textarea, .panel > form input:not([type=checkbox]), .panel > form select, .panel > form textarea, .knowledge-search input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--panel); }
.modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 10px; color: var(--muted); background: var(--canvas); cursor: pointer; font-size: 20px; }
.check-line { display: flex !important; align-items: center; gap: 9px !important; color: var(--muted); font-size: 10px; cursor: pointer; }
.check-line input { width: 17px !important; height: 17px !important; min-height: 0 !important; accent-color: var(--blue); }
.check-line.compact { white-space: nowrap; }
.heading-button-row { display: flex; gap: 8px; }

.collection-panel { padding: 20px; }
.collection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.collection-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--panel),var(--canvas) 20%); }
.collection-card-head, .collection-card-foot { display: flex; align-items: center; gap: 8px; }
.collection-card-head time { margin-left: auto; color: var(--muted); font-size: 9px; }
.direction-dot { width: 8px; height: 8px; border-radius: 50%; }
.collection-card h2 { margin: 13px 0 7px; font-size: 14px; line-height: 1.35; }
.collection-card p { color: var(--muted); font-size: 9px; }
.collection-card-foot { justify-content: space-between; margin-top: 14px; }
.trash-list { display: grid; }
.trash-list article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.trash-list article:first-child { border-top: 0; }
.trash-list h2 { margin: 5px 0; font-size: 14px; }
.trash-list p, .trash-list small { margin: 0; color: var(--muted); font-size: 9px; }
.row-actions { display: flex; gap: 7px; }

.import-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.import-panel > div { display: flex; align-items: center; gap: 13px; }
.import-panel h2, .import-panel p { margin: 0; }
.import-panel p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.import-panel form { display: flex; align-items: center; gap: 9px; }
.file-drop.compact { min-width: 170px; padding: 11px 13px; }
.planning-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; }
.timeline-list { display: grid; }
.timeline-list a { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.timeline-list time { height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); }
.timeline-list time.overdue { color: var(--red); background: var(--red-soft); }
.timeline-list time b, .timeline-list time span, .timeline-list div b, .timeline-list div small { display: block; }
.timeline-list time span { margin-top: -8px; font-size: 8px; }
.timeline-list div b { font-size: 11px; }
.timeline-list div small { margin-top: 4px; color: var(--muted); font-size: 8px; }

.knowledge-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 16px; align-items: start; }
.search-control { display: flex; gap: 8px; margin-top: 7px; }
.search-control input { flex: 1; }
.knowledge-results { display: grid; gap: 10px; margin-top: 24px; }
.knowledge-results article { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb,var(--panel),var(--canvas) 22%); }
.knowledge-results article > div { display: flex; justify-content: space-between; }
.knowledge-results p { color: var(--muted); font-size: 10px; line-height: 1.6; }
.knowledge-results a { color: var(--blue); font-size: 9px; font-weight: 750; }
.document-catalog { margin-top: 22px; }
.document-catalog a { display: flex; gap: 9px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.document-catalog b, .document-catalog small { display: block; }
.document-catalog b { font-size: 10px; }
.document-catalog small { color: var(--muted); font-size: 8px; }

.metrics-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 16px; }
.metrics-row article { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.metrics-row small, .metrics-row b { display: block; }
.metrics-row small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.metrics-row b { margin-top: 8px; font-size: 28px; }
.metrics-row article.warning b { color: #c7781f; }
.metrics-row article.violet b { color: var(--violet); }
.donut-legend { display: grid; gap: 11px; }
.donut-legend span { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; }
.donut-legend i { width: 9px; height: 9px; border-radius: 50%; background: hsl(calc(var(--i) * 47),65%,55%); }
.donut-legend b { font-size: 10px; }
.donut-legend em { color: var(--muted); font-size: 10px; font-style: normal; }
.appeals-list { display: grid; }
.appeals-list article { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding: 14px 0; border-top: 1px solid var(--line); }
.appeals-list h3 { margin: 4px 0; font-size: 12px; }
.appeals-list p, .appeals-list small { margin: 0; color: var(--muted); font-size: 9px; }
.appeals-list mark { padding: 5px 8px; border-radius: 8px; color: #256375; background: #e2f2f6; font-size: 8px; font-weight: 750; }

.institution-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(390px,.8fr); gap: 16px; align-items: start; }
.institution-map { min-height: 620px; padding: 12px; }
.institution-map iframe { width: 100%; height: 555px; border: 0; border-radius: 13px; }
.institution-map > a { display: inline-block; margin: 10px; color: var(--blue); font-size: 10px; font-weight: 750; }
.map-placeholder { min-height: 570px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.map-placeholder > span { font-size: 44px; }
.map-placeholder h2 { margin-bottom: 0; }
.institution-list { max-height: 620px; overflow-y: auto; }
.institution-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 12px 8px; border-top: 1px solid var(--line); border-radius: 10px; }
.institution-row.active { background: var(--blue-soft); }
.institution-symbol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #167a6b; background: #e1f4ef; }
.institution-row b, .institution-row small, .institution-row em { display: block; }
.institution-row b { font-size: 10px; }
.institution-row small, .institution-row em { margin-top: 3px; color: var(--muted); font-size: 8px; font-style: normal; }

.sphere-filter { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 16px; }
.sphere-filter a { padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb,var(--panel),var(--canvas) 20%); }
.sphere-filter a.active { border-color: #9a83e1; background: #eee9ff; }
.sphere-filter b, .sphere-filter span { display: block; }
.sphere-filter b { font-size: 18px; }
.sphere-filter span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.event-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.event-card-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--panel),var(--canvas) 18%); }
.event-card-grid header { display: flex; justify-content: space-between; gap: 10px; }
.event-card-grid time { color: var(--muted); font-size: 9px; font-weight: 750; }
.event-card-grid mark { padding: 4px 6px; border-radius: 7px; color: #216d61; background: #e1f5f0; font-size: 7px; font-weight: 800; }
.event-card-grid mark.violet { color: #6842bd; background: #eee8ff; }
.event-card-grid h2 { margin: 12px 0; font-size: 14px; line-height: 1.35; }
.event-card-grid dl { display: grid; gap: 7px; margin: 0; }
.event-card-grid dl div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 9px; }
.event-card-grid dt { color: var(--muted); }
.event-card-grid dd { margin: 0; }
.event-card-grid p { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.5; }

.kpi-table { min-width: 960px; }
.kpi-panel { overflow-x: auto; }
.kpi-table header, .kpi-table article { display: grid; grid-template-columns: minmax(240px,1.4fr) repeat(2,80px) minmax(140px,.8fr) repeat(2,85px) 100px; align-items: center; gap: 10px; padding: 12px; }
.kpi-table header { color: var(--muted); background: var(--canvas); font-size: 8px; text-transform: uppercase; }
.kpi-table article { border-top: 1px solid var(--line); font-size: 10px; text-align: center; }
.kpi-person { display: flex; align-items: center; gap: 10px; text-align: left; }
.kpi-person b, .kpi-person small, .kpi-person em { display: block; }
.kpi-person small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.kpi-person em { width: fit-content; margin-top: 4px; padding: 3px 5px; border-radius: 5px; color: #a55a16; background: #fff1de; font-size: 7px; font-style: normal; }
.kpi-progress { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 6px; }
.kpi-progress i { height: 6px; overflow: hidden; border-radius: 6px; background: var(--line); }
.kpi-progress em { display: block; height: 100%; background: linear-gradient(90deg,var(--teal),#5fc0a8); }
.success-text { color: var(--green); }

.profile-layout { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 16px; align-items: start; }
.profile-identity { text-align: center; }
.profile-avatar-large { width: 116px; height: 116px; display: grid; place-items: center; margin: 0 auto 16px; overflow: hidden; border-radius: 35px; color: #fff; background: linear-gradient(145deg,#2d7890,#2a9b85); font-size: 45px; font-weight: 800; box-shadow: 0 15px 35px rgba(31,103,116,.2); }
.profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.profile-identity h2 { margin-bottom: 5px; }
.profile-identity p { color: var(--muted); font-size: 10px; }
.profile-identity > mark { display: inline-flex; padding: 6px 9px; border-radius: 8px; color: #24655c; background: #e1f5f0; font-size: 9px; font-weight: 750; }
.profile-identity form { display: grid; gap: 8px; margin-top: 20px; text-align: left; }
.profile-check { align-self: end; min-height: 44px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; }
.profile-check b, .profile-check small { display: block; }
.profile-check small { margin-top: 3px; }
.form-actions.full { grid-column: 1 / -1; }

.notification-list { padding: 8px 22px; }
.notification-card { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 15px 0; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.notification-card:first-child { border-top: 0; }
.notification-card.unread { background: linear-gradient(90deg,var(--blue-soft),transparent); }
.notification-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: var(--blue-soft); }
.notification-card h2 { margin: 3px 0; font-size: 12px; }
.notification-card p, .notification-card small { margin: 0; color: var(--muted); font-size: 8px; }

.help-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 16px; align-items: start; }
.help-toc { position: sticky; top: 84px; display: grid; padding: 10px; }
.help-toc a { padding: 10px 12px; border-radius: 9px; color: var(--muted); font-size: 10px; font-weight: 700; }
.help-toc a:hover { color: var(--blue); background: var(--blue-soft); }
.help-content { display: grid; gap: 13px; }
.help-content h2 { margin-top: 5px; }
.help-content li, .help-content p { color: var(--muted); font-size: 11px; line-height: 1.7; }

.calendar-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.calendar-summary article { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.calendar-summary article > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); }
.calendar-summary b, .calendar-summary small { display: block; }
.calendar-summary b { font-size: 20px; }
.calendar-summary small { color: var(--muted); font-size: 8px; }
.editable-calendar > article { border-top: 1px solid var(--line); }
.editable-calendar > article > a { border-top: 0; }
.editable-calendar > article > form { display: flex; justify-content: flex-end; gap: 6px; padding: 0 0 10px 67px; }
.editable-calendar > article > form input { max-width: 150px; min-height: 32px; }
.agenda-list article.planned { border-left: 3px solid var(--violet); padding-left: 10px; }

.panel-intro { margin: -5px 0 18px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.access-matrix-panel, .backup-panel { margin-bottom: 16px; }
.access-accordion { display: grid; gap: 8px; }
.access-accordion details { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.access-accordion summary { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px; cursor: pointer; list-style: none; }
.access-accordion summary b, .access-accordion summary small { display: block; }
.access-accordion summary b { font-size: 10px; }
.access-accordion summary small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.access-accordion summary mark { padding: 4px 7px; border-radius: 7px; color: #27665e; background: #e2f5f0; font-size: 7px; }
.access-accordion details > form { display: grid; gap: 14px; padding: 16px; border-top: 1px solid var(--line); background: color-mix(in srgb,var(--panel),var(--canvas) 20%); }
.access-accordion fieldset { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.access-accordion legend { padding: 0 5px; font-size: 9px; font-weight: 800; }
.permission-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.permission-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.permission-grid label, .permission-list label { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 8px; }
.permission-flags { display: flex; flex-wrap: wrap; gap: 16px; }
.backup-list { display: grid; }
.backup-list article { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); }
.backup-list article > div { flex: 1; min-width: 0; }
.backup-list b, .backup-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-list b { font-size: 9px; }
.backup-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.backup-list mark { padding: 4px 6px; border-radius: 6px; color: #28665d; background: #e1f5f0; font-size: 7px; }
.notification-permission { position: fixed; right: 20px; bottom: 20px; z-index: 60; padding: 12px 16px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg,var(--teal),#246d86); box-shadow: 0 16px 38px rgba(10,55,70,.28); cursor: pointer; font-size: 10px; font-weight: 800; }

[hidden] { display: none !important; }
.leave-overview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.leave-overview-grid .panel-heading mark, .leave-register .panel-heading mark { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #176d61; background: #e3f5f1; font-size: 10px; font-weight: 850; }
.leave-mini-list { display: grid; }
.leave-mini-list article, .leave-mini-list > a { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.leave-mini-list article:first-child, .leave-mini-list > a:first-child { border-top: 0; }
.leave-mini-list time { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); font-size: 9px; font-weight: 850; }
.leave-mini-list b, .leave-mini-list small, .leave-mini-list em { display: block; }
.leave-mini-list b { font-size: 11px; }
.leave-mini-list small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.leave-mini-list em { margin-top: 4px; color: #258173; font-size: 8px; font-style: normal; font-weight: 700; }
.leave-mini-list > article > mark, .leave-mini-list > a > mark { padding: 5px 7px; border-radius: 8px; color: var(--muted); background: color-mix(in srgb,var(--panel),var(--canvas) 45%); font-size: 8px; font-weight: 800; }
.leave-filter { grid-template-columns: minmax(240px,1fr) minmax(180px,.45fr) minmax(190px,.55fr) auto; }
.leave-table { display: grid; }
.leave-table > article { display: grid; grid-template-columns: minmax(240px,1.25fr) minmax(190px,.9fr) minmax(200px,.9fr) 100px auto; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.leave-table > article:first-of-type { border-top: 0; }
.leave-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.leave-person > div, .leave-table > article > div { min-width: 0; }
.leave-person b, .leave-person small, .leave-person em, .leave-period b, .leave-period small, .leave-period em, .leave-table > article > div > small, .leave-table > article > div > b, .leave-table > article > div > em { display: block; }
.leave-person b, .leave-period b, .leave-table > article > div > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.leave-person small, .leave-period small, .leave-table > article > div > small { margin-bottom: 4px; color: var(--muted); font-size: 8px; }
.leave-person em, .leave-period em, .leave-table > article > div > em { margin-top: 4px; color: var(--muted); font-size: 8px; font-style: normal; }
.leave-state mark { display: inline-flex; padding: 6px 8px; border-radius: 8px; font-size: 8px; font-weight: 850; }
.leave-now { color: #a72e2e !important; background: #ffebea !important; }
.leave-planned { color: #775014 !important; background: #fff1d3 !important; }
.leave-done { color: #4e6070 !important; background: #eaf0f3 !important; }
.leave-self-note { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb,var(--panel),var(--canvas) 30%); }
.leave-self-note b, .leave-self-note small { display: block; }
.leave-self-note small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.vacation-dashboard-summary { display: grid; grid-template-columns: repeat(2,1fr); margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; }
.vacation-dashboard-summary span { padding: 11px; text-align: center; border-left: 1px solid var(--line); }
.vacation-dashboard-summary span:first-child { border-left: 0; }
.vacation-dashboard-summary b, .vacation-dashboard-summary small { display: block; }
.vacation-dashboard-summary b { font-size: 20px; }
.vacation-dashboard-summary small { margin-top: 3px; color: var(--muted); font-size: 8px; }

@media (max-width: 1280px) {
  .metric-grid { grid-template-columns: repeat(3,1fr); }
  .recurrence-filter-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .quick-module-grid { grid-template-columns: repeat(2,1fr); }
  .collection-grid { grid-template-columns: repeat(2,1fr); }
  .sphere-filter { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { width: min(310px,88vw); padding-bottom: 82px; }
  .mobile-bottom-nav { position: fixed; left: 10px; right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); z-index: 35; display: grid; grid-template-columns: repeat(4,1fr); padding: 6px; border: 1px solid rgba(255,255,255,.65); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 16px 45px rgba(20,45,60,.22); backdrop-filter: blur(16px); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { display: grid; place-items: center; gap: 2px; min-height: 48px; border: 0; border-radius: 12px; color: #657482; background: transparent; font-size: 8px; font-weight: 750; }
  .mobile-bottom-nav span { font-size: 17px; }
  .mobile-bottom-nav .active { color: #176f6a; background: #e4f5f2; }
  .page-footer { padding-bottom: 88px; }
  .planning-layout, .knowledge-layout, .institution-layout, .profile-layout, .help-layout { grid-template-columns: 1fr; }
  .help-toc { position: static; grid-template-columns: repeat(3,1fr); }
  .institution-map { min-height: 440px; }
  .institution-map iframe { height: 380px; }
  .institution-list { max-height: none; }
  .permission-grid { grid-template-columns: repeat(2,1fr); }
  .leave-table { overflow-x: auto; }
  .leave-table > article { min-width: 920px; }
}
@media (max-width: 640px) {
  .topbar-actions { gap: 8px; }
  .metric-grid, .metrics-row { grid-template-columns: repeat(2,1fr); }
  .metric:last-child { grid-column: auto; }
  .quick-module-grid, .collection-grid, .event-card-grid { grid-template-columns: 1fr; }
  .task-view-toggles { grid-template-columns: 1fr; }
  .import-panel, .import-panel form, .trash-list article { align-items: stretch; flex-direction: column; }
  .heading-button-row { flex-direction: column; }
  .search-control { flex-direction: column; }
  .sphere-filter { grid-template-columns: repeat(2,1fr); }
  .permission-grid, .permission-list { grid-template-columns: 1fr; }
  .calendar-summary { grid-template-columns: 1fr; }
  .backup-list article { align-items: flex-start; flex-wrap: wrap; }
  .help-toc { grid-template-columns: repeat(2,1fr); }
  .accept-banner { align-items: stretch; flex-direction: column; }
  .bulk-actions { align-items: stretch; flex-direction: column; }
  .table-summary { align-items: stretch; flex-direction: column; }
  .leave-overview-grid { grid-template-columns: 1fr; }
  .leave-filter { grid-template-columns: 1fr; }
  .recurrence-filter-bar { grid-template-columns: 1fr; }
}