:root {
  --ux-navy-950:#071d38;
  --ux-navy-900:#0d3158;
  --ux-navy-800:#154777;
  --ux-blue-700:#1764dc;
  --ux-blue-600:#2474f5;
  --ux-blue-100:#eaf2ff;
  --ux-green-600:#12945f;
  --ux-red-600:#d9364f;
  --ux-amber-600:#d98200;
  --ux-surface:#fff;
  --ux-canvas:#f3f7fd;
  --ux-text:#092443;
  --ux-muted:#647b9f;
  --ux-line:#d9e5f3;
  --ux-radius-sm:12px;
  --ux-radius:18px;
  --ux-radius-lg:24px;
  --ux-shadow:0 12px 34px rgba(18,57,101,.09);
  --ux-shadow-hover:0 18px 42px rgba(18,57,101,.14);
  --ux-speed:180ms;
}

* { box-sizing:border-box }
html { scroll-behavior:smooth; background:var(--ux-canvas) }
body { color:var(--ux-text); background:linear-gradient(180deg,#f8fbff 0,#eef4fd 42%,#f5f8fd 100%); min-height:100vh }
body.ux-nav-open { overflow:hidden }
body,button,input,select,textarea { font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif }

.ux-skip-link { position:fixed; z-index:10000; left:16px; top:-70px; padding:12px 18px; border-radius:12px; background:#fff; color:var(--ux-blue-700); box-shadow:var(--ux-shadow); font-weight:800; transition:top var(--ux-speed) }
.ux-skip-link:focus { top:14px }

#app>header { min-height:74px; padding:10px clamp(16px,3vw,42px); border-bottom:1px solid rgba(199,216,238,.85); background:rgba(255,255,255,.92); backdrop-filter:blur(16px); position:sticky; top:0; z-index:90 }
.header-brand { min-width:0 }
.header-brand img { width:auto; height:44px; object-fit:contain }
.header-brand strong { letter-spacing:.025em }
.header-brand small { color:var(--ux-muted); letter-spacing:.12em }
#app>header>div:last-child { display:flex; align-items:center; gap:10px }

#app>nav { position:sticky; top:74px; z-index:85; min-height:50px; padding:0 clamp(12px,3vw,38px); display:flex; align-items:center; gap:5px; overflow-x:auto; scrollbar-width:none; background:linear-gradient(90deg,var(--ux-navy-900),var(--ux-navy-800)); box-shadow:0 5px 18px rgba(9,42,78,.12) }
#app>nav::-webkit-scrollbar { display:none }
#app>nav button { position:relative; min-height:50px; padding:0 15px; border:0; border-radius:0; background:transparent; color:#d9e8fb; white-space:nowrap; font-size:14px; font-weight:750; transition:background var(--ux-speed),color var(--ux-speed) }
#app>nav button:hover { background:rgba(255,255,255,.08); color:#fff }
#app>nav button.active { background:rgba(38,116,245,.95); color:#fff }
#app>nav button.active:after { content:""; position:absolute; height:3px; left:13px; right:13px; bottom:0; border-radius:9px 9px 0 0; background:#fff }

main { width:min(1480px,100%); margin:0 auto; padding:clamp(20px,3vw,42px) clamp(16px,3vw,34px) 70px }
.title,.explorer-head,.management-head { gap:18px }
.title h1,.explorer-head h1,.management-head h1 { letter-spacing:-.035em; line-height:1.12 }
.title p,.explorer-head p,.management-head p { color:var(--ux-muted) }

.card { border:1px solid rgba(210,224,241,.94); border-radius:var(--ux-radius); background:rgba(255,255,255,.96); box-shadow:var(--ux-shadow); transition:border-color var(--ux-speed),box-shadow var(--ux-speed),transform var(--ux-speed) }
.modules .card:hover,.employee-card:hover,.module:hover { transform:translateY(-2px); border-color:#b6cff0; box-shadow:var(--ux-shadow-hover) }
.stat { overflow:hidden; position:relative; min-height:126px; padding:22px }
.stat:before { content:""; position:absolute; inset:0 auto auto 0; width:100%; height:4px; background:linear-gradient(90deg,var(--ux-blue-600),#26bad0) }
.stat small { color:var(--ux-muted); font-weight:650; letter-spacing:.02em }
.stat strong { color:var(--ux-text); letter-spacing:-.025em }

button,.button { min-height:44px; padding:10px 17px; border-radius:var(--ux-radius-sm); border:1px solid transparent; font-weight:750; cursor:pointer; transition:transform var(--ux-speed),box-shadow var(--ux-speed),background var(--ux-speed),border-color var(--ux-speed),opacity var(--ux-speed) }
button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 8px 18px rgba(31,102,218,.16) }
button:active:not(:disabled),button.is-pressed { transform:translateY(1px) scale(.985); box-shadow:none }
button.secondary { border-color:#d4e1f2; background:#f5f8fd; color:#1856ad }
button.secondary:hover { background:#eaf2ff; border-color:#b9d0ee }
button:disabled { cursor:not-allowed; opacity:.5 }
button[aria-busy="true"] { color:transparent!important; pointer-events:none; position:relative }
button[aria-busy="true"]:after { content:""; position:absolute; width:18px; height:18px; inset:50% auto auto 50%; margin:-9px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:ux-spin .65s linear infinite }
@keyframes ux-spin { to { transform:rotate(360deg) } }

label { color:#445f85 }
input,select,textarea { min-height:48px; padding:11px 14px; border:1px solid #cbd9eb; border-radius:13px; background:#fbfdff; color:var(--ux-text); font-size:15px; transition:border-color var(--ux-speed),box-shadow var(--ux-speed),background var(--ux-speed) }
textarea { min-height:108px; line-height:1.5 }
input:hover,select:hover,textarea:hover { border-color:#a8c2e5; background:#fff }
input:focus,select:focus,textarea:focus { outline:0; border-color:var(--ux-blue-600); background:#fff; box-shadow:0 0 0 4px rgba(36,116,245,.13) }
input::placeholder,textarea::placeholder { color:#8ca0bd }

.filters.card { padding:20px; border-radius:20px; align-items:end }
.filters.card label { min-width:130px; gap:8px }
.quick-periods { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin:14px 0 24px }
.quick-periods span { color:var(--ux-muted); font-weight:750 }
.quick-periods button,.finance-quick button,.analytics-filters button { min-height:38px; padding:7px 13px; border-radius:999px }
.quick-periods button.is-selected,.quick-periods button[aria-pressed="true"],.finance-quick button.is-selected,.analytics-filters button.is-selected { color:#fff; background:var(--ux-blue-600); border-color:var(--ux-blue-600); box-shadow:0 7px 18px rgba(36,116,245,.22) }

.table { overflow:auto; border-radius:var(--ux-radius) }
table { width:100%; border-collapse:separate; border-spacing:0 }
thead th { position:sticky; top:0; z-index:2; padding:14px 13px; background:#edf4fd; color:#526b91; font-size:12px; text-transform:uppercase; letter-spacing:.045em }
tbody td { padding:14px 13px; border-bottom:1px solid #e3ebf5; vertical-align:top }
tbody tr { transition:background var(--ux-speed) }
tbody tr:hover { background:#f7faff }
.empty { padding:36px!important; text-align:center; color:var(--ux-muted) }

.finance-sidebar,.management-sidebar { border-radius:22px; background:linear-gradient(180deg,#123f71 0,#0c315b 100%); box-shadow:0 18px 45px rgba(13,49,88,.18) }
.finance-sidebar>button,.management-sidebar button { min-height:44px; border-radius:12px }
.finance-sidebar>button.active,.management-sidebar button.active { background:linear-gradient(135deg,#2878f2,#2167dc); box-shadow:0 7px 17px rgba(10,39,75,.28) }
.management-content .card,.finance-main .card { border-radius:20px }
.management-form { padding:clamp(20px,3vw,30px) }
.management-grid { gap:18px }
.management-grid label { gap:8px }

.ux-nav-toggle { display:none; width:46px; min-width:46px; padding:0; background:#edf4ff; color:var(--ux-navy-900); border:1px solid #d4e2f4; font-size:0 }
.ux-nav-toggle span,.ux-nav-toggle:before,.ux-nav-toggle:after { content:""; display:block; width:20px; height:2px; margin:5px auto; border-radius:4px; background:currentColor; transition:transform var(--ux-speed),opacity var(--ux-speed) }
.ux-nav-toggle[aria-expanded="true"] span { opacity:0 }
.ux-nav-toggle[aria-expanded="true"]:before { transform:translateY(7px) rotate(45deg) }
.ux-nav-toggle[aria-expanded="true"]:after { transform:translateY(-7px) rotate(-45deg) }
.ux-nav-backdrop { display:none; position:fixed; inset:0; z-index:79; background:rgba(3,20,40,.46); backdrop-filter:blur(2px) }

.ux-progress { position:fixed; z-index:10001; left:0; right:0; top:0; height:3px; pointer-events:none; opacity:0; transition:opacity .18s }
.ux-progress:before { content:""; display:block; height:100%; width:38%; transform:translateX(-110%); background:linear-gradient(90deg,#1d70ee,#20c7c9); box-shadow:0 0 12px #20aee4; animation:ux-progress 1s ease-in-out infinite }
.ux-progress.active { opacity:1 }
@keyframes ux-progress { 50% { transform:translateX(120%) } 100% { transform:translateX(300%) } }

.ux-toast-region { position:fixed; z-index:10020; right:20px; top:92px; width:min(390px,calc(100vw - 28px)); display:grid; gap:10px; pointer-events:none }
.ux-toast { pointer-events:auto; display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:start; gap:12px; padding:15px 15px 15px 13px; border:1px solid #d6e2f1; border-radius:16px; background:rgba(255,255,255,.98); box-shadow:0 18px 44px rgba(9,38,73,.18); animation:ux-toast-in .25s ease-out }
.ux-toast:before { content:""; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--ux-blue-600) }
.ux-toast.success:before { background:var(--ux-green-600) }.ux-toast.error:before { background:var(--ux-red-600) }.ux-toast.warning:before { background:var(--ux-amber-600) }
.ux-toast strong { display:block; margin-bottom:3px }.ux-toast p { margin:0; color:var(--ux-muted); line-height:1.4; overflow-wrap:anywhere }
.ux-toast button { min-height:30px; padding:2px 7px; border:0; background:transparent; color:var(--ux-muted); box-shadow:none; font-size:18px }
.ux-toast.leaving { opacity:0; transform:translateX(24px); transition:.2s }
@keyframes ux-toast-in { from { opacity:0; transform:translateY(-10px) scale(.98) } }

.ux-back-top { position:fixed; right:22px; bottom:22px; z-index:70; width:46px; min-width:46px; padding:0; border-radius:50%; opacity:0; pointer-events:none; transform:translateY(12px); background:var(--ux-navy-900); color:#fff; box-shadow:var(--ux-shadow) }
.ux-back-top.visible { opacity:1; pointer-events:auto; transform:none }

@media (max-width:900px) {
  #app>header { min-height:64px; padding:8px 14px }
  .header-brand img { height:36px; max-width:110px }
  .header-brand strong { font-size:13px }.header-brand small { font-size:8px }
  #app>header .pill { display:none }
  .ux-nav-toggle { display:block; order:-1 }
  #app>nav { position:fixed; top:0; bottom:0; left:0; z-index:88; width:min(320px,86vw); padding:82px 14px 24px; display:flex; align-items:stretch; flex-direction:column; gap:5px; overflow-y:auto; transform:translateX(-105%); transition:transform .24s ease; background:linear-gradient(180deg,var(--ux-navy-900),#092849) }
  #app>nav.open { transform:none }
  #app>nav button { flex:0 0 auto; width:100%; min-height:47px; padding:0 16px; border-radius:12px; text-align:left }
  #app>nav button.active:after { inset:10px auto 10px 0; width:3px; height:auto; border-radius:0 8px 8px 0 }
  .ux-nav-backdrop.open { display:block }
  main { padding-top:22px }
  .management-shell,.finance-shell { grid-template-columns:1fr }
  .management-sidebar,.finance-sidebar { position:relative; top:auto; display:flex; align-items:center; gap:6px; padding:9px; border-radius:16px; overflow-x:auto; scrollbar-width:thin }
  .management-sidebar h3,.finance-sidebar h2,.management-sidebar hr,.management-sidebar small,.finance-years { display:none }
  .management-sidebar button,.finance-sidebar>button { width:auto; min-width:max-content; margin:0; padding:10px 14px }
  .explorer-head,.title { align-items:flex-start; flex-direction:column }
  .explorer-head .actions,.title .actions { width:100%; justify-content:flex-start }
}

@media (max-width:680px) {
  main { padding:16px 12px 56px }
  .title h1,.explorer-head h1,.management-head h1 { font-size:27px }
  .card { border-radius:16px }
  .stats,.modules,.management-stats,.analytics-stats { grid-template-columns:1fr!important; gap:12px }
  .stat { min-height:104px; padding:18px }
  .filters.card { display:grid; grid-template-columns:1fr; padding:16px }
  .filters.card label,.filters.card input,.filters.card select,.filters.card>button { width:100%; max-width:none }
  .quick-periods { overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; scrollbar-width:thin }
  .quick-periods span,.quick-periods button { flex:0 0 auto }
  .actions { gap:8px }
  .actions button { flex:1 1 auto }
  .ux-toast-region { right:14px; top:76px }
  .ux-back-top { right:14px; bottom:14px }
  .table.ux-card-table { overflow:visible; background:transparent; border:0; box-shadow:none }
  .ux-card-table table,.ux-card-table tbody,.ux-card-table tr,.ux-card-table td { display:block; width:100% }
  .ux-card-table thead { position:absolute; width:1px; height:1px; clip:rect(0 0 0 0); overflow:hidden }
  .ux-card-table tbody { display:grid; gap:12px }
  .ux-card-table tr { padding:13px 15px; border:1px solid var(--ux-line); border-radius:16px; background:#fff; box-shadow:0 8px 23px rgba(18,57,101,.07) }
  .ux-card-table td { display:grid; grid-template-columns:minmax(105px,38%) minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid #e7edf6; text-align:right; overflow-wrap:anywhere }
  .ux-card-table td:last-child { border-bottom:0 }
  .ux-card-table td:before { content:attr(data-label); color:var(--ux-muted); font-size:12px; font-weight:750; text-align:left; text-transform:uppercase; letter-spacing:.035em }
  .ux-card-table td.empty { display:block; text-align:center }
  .ux-card-table td.empty:before { display:none }
}

@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
}

.mg-admin-delete {
  display:flex;
  justify-content:flex-end;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid #dce6f5;
}
.request-item > .mg-admin-delete {
  margin:0 1rem 1rem;
  padding:1rem 0 0;
}
.mg-delete-open,.mg-delete-submit {
  padding:.7rem 1rem;
  border:1px solid #dc2626;
  border-radius:12px;
  background:#dc2626;
  color:#fff;
  font-weight:750;
}
.mg-delete-open:hover,.mg-delete-submit:hover {
  border-color:#b91c1c;
  background:#b91c1c;
}
.mg-delete-confirm {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-end;
  gap:.75rem;
  flex-wrap:wrap;
  padding:.85rem 1rem;
  border:1px solid #fecdd3;
  border-radius:14px;
  background:#fff1f2;
}
.mg-delete-confirm[hidden] { display:none!important }
.mg-delete-error {
  flex-basis:100%;
  color:#b91c1c;
  text-align:right;
}

@media (max-width:720px) {
  .mg-delete-confirm { align-items:stretch; flex-direction:column }
  .mg-delete-confirm button { width:100% }
  .mg-delete-error { text-align:left }
}

@media print {
  .ux-nav-toggle,.ux-nav-backdrop,.ux-toast-region,.ux-progress,.ux-back-top { display:none!important }
}