
:root{
  --cdu-turquoise:#52b7c1;
  --cdu-blue:#2d3c4b;
  --cdu-gold:#ffa600;
  --ink:#18222c;
  --muted:#697580;
  --bg:#f4f7f8;
  --surface:#ffffff;
  --surface-2:#f8fafb;
  --line:#dfe6e9;
  --accent:var(--cdu-turquoise);
  --accent-dark:#318f99;
  --danger:#b42318;
  --success:#16805b;
  --shadow:0 10px 28px rgba(45,60,75,.08);
  --shadow-lg:0 18px 45px rgba(45,60,75,.13);
  --radius:14px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
a{color:var(--cdu-blue)}
.app-shell{min-height:100vh;display:flex}
.sidebar{
  width:272px;flex:0 0 272px;
  background:var(--cdu-blue);
  color:#fff;
  padding:22px 16px 16px;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  overflow:auto;
}
.brand{display:flex;align-items:center;gap:13px;padding:8px 10px 28px;border-bottom:1px solid rgba(255,255,255,.13);margin-bottom:20px}
.brand-copy strong{display:block;font-size:15px;letter-spacing:.01em}
.brand-copy small{display:block;color:rgba(255,255,255,.62);font-size:11px;margin-top:2px}
.brand-mark{width:42px;height:42px;flex:0 0 42px;border-radius:10px;background:#fff;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:8px 7px 7px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.brand-mark i{display:block;width:6px;border-radius:2px 2px 0 0}
.brand-mark i:nth-child(1){height:13px;background:#111}
.brand-mark i:nth-child(2){height:18px;background:#d81920}
.brand-mark i:nth-child(3){height:23px;background:var(--cdu-gold)}
.brand-mark.big{width:64px;height:64px;flex-basis:64px;margin:0 auto 8px;padding:13px 12px 11px;border-radius:14px}
.brand-mark.big i{width:8px}
.brand-mark.big i:nth-child(1){height:20px}.brand-mark.big i:nth-child(2){height:28px}.brand-mark.big i:nth-child(3){height:36px}
nav{display:grid;gap:3px}
nav a{
  padding:10px 12px;border-radius:9px;text-decoration:none;
  color:rgba(255,255,255,.78);background:transparent;
  border:1px solid transparent;font-weight:500;
  transition:.16s ease;
}
nav a:hover{background:rgba(255,255,255,.08);color:#fff}
nav a.active{background:var(--cdu-turquoise);color:var(--cdu-blue);font-weight:750;box-shadow:0 5px 14px rgba(82,183,193,.2)}
.sidebar-bottom{margin-top:auto;display:grid;gap:5px;padding-top:16px}
.sidebar-bottom .ghost{color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.12)}
.sidebar-bottom .ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.ghost{padding:9px 11px;border-radius:9px;background:transparent;text-align:left;font:inherit;cursor:pointer;border:0}
.main{flex:1;min-width:0}
.topbar{
  min-height:86px;background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 36px;position:sticky;top:0;z-index:20;
  backdrop-filter:blur(12px)
}
.topbar h1{margin:2px 0 0;font-size:24px;line-height:1.2;letter-spacing:-.025em;color:var(--cdu-blue)}
.eyebrow{color:var(--cdu-turquoise);font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:800}
.user-chip{background:var(--surface-2);border:1px solid var(--line);padding:8px 13px;border-radius:999px;font-weight:650}
.content{padding:30px 36px;max-width:1540px}
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{padding:22px}.card span{color:var(--muted);display:block}.card strong{display:block;font-size:32px;margin:7px 0 10px;color:var(--cdu-blue)}
.card a,.quick a{color:var(--cdu-blue);text-decoration:none;font-weight:650}
.panel{padding:22px;margin-top:20px}.panel h2{margin:0 0 14px;font-size:17px;color:var(--cdu-blue);letter-spacing:-.01em}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex:1;flex-wrap:wrap}.filters input{flex:1}
.quick{display:flex;gap:10px;flex-wrap:wrap}
.quick a,.primary,.secondary{padding:10px 14px;border-radius:9px;text-decoration:none;border:1px solid var(--line);display:inline-block;cursor:pointer;transition:.15s ease}
.primary{background:var(--cdu-turquoise);color:var(--cdu-blue);border-color:var(--cdu-turquoise);font-weight:750}
.primary:hover{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark)}
.secondary{background:#fff;color:var(--cdu-blue);font-weight:650}.secondary:hover{background:var(--surface-2)}
input,select,textarea{width:100%;border:1px solid #cfd8dd;border-radius:9px;background:#fff;color:var(--ink);padding:10px 11px;outline:none;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--cdu-turquoise);box-shadow:0 0 0 3px rgba(82,183,193,.16)}
label{display:grid;gap:6px;margin-bottom:15px;font-weight:650;color:var(--cdu-blue)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.actions{display:flex;justify-content:flex-end;gap:8px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.narrow{max-width:760px}.alert{padding:11px 13px;border-radius:9px;margin-bottom:14px}.danger{background:#fff0ee;color:var(--danger);border:1px solid #f6cfca}.muted{color:var(--muted)}
.login-page{
  min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cdu-blue) 0%,#3b4d5e 52%,var(--cdu-turquoise) 140%);
  padding:24px;position:relative;overflow:hidden
}
.login-page:before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-170px;top:-160px}
.login-page:after{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(255,255,255,.1);border-radius:50%;left:-170px;bottom:-170px}
.login-card{
  position:relative;z-index:1;width:min(440px,100%);
  background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.7);
  border-radius:20px;padding:38px;box-shadow:var(--shadow-lg)
}
.login-card .brand-mark{background:var(--cdu-blue)}
.login-card h1{text-align:center;margin:10px 0 3px;color:var(--cdu-blue);font-size:26px;letter-spacing:-.03em}
.login-card p{text-align:center;color:var(--muted);margin:0 0 28px}
.login-card form{text-align:left}.full{width:100%;margin-top:8px}
.dark{
  --bg:#111820;--surface:#19232c;--surface-2:#202d38;--ink:#edf3f5;--muted:#a9b7bf;
  --line:#31414c;--shadow:0 12px 35px rgba(0,0,0,.22)
}
.dark .topbar{background:rgba(25,35,44,.96)}.dark .topbar h1,.dark .panel h2,.dark label,.dark .card strong{color:#edf3f5}
.dark input,.dark select,.dark textarea{background:#202d38;color:#edf3f5;border-color:#3b4c58}
.dark .secondary{background:#202d38;color:#edf3f5}.dark .user-chip{background:#202d38}
.dark .danger{background:#3b1d20;color:#ffb4ab;border-color:#633238}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr);gap:20px}
.detail-title{display:flex;justify-content:space-between;gap:16px}.detail-title h2{font-size:25px;margin:4px 0 0}
.badge{height:max-content;padding:7px 10px;border-radius:999px;background:var(--surface-2);white-space:nowrap;font-weight:700}
.meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px}hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.upload-row{display:flex;gap:8px}.upload-row input{flex:1}.doc-list{margin-top:15px}
.doc,.link-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.doc small,.top-item small,.decision small,.person-row small,.comment small,.message small,.activity small,.search-result small,.history-row small{display:block;color:var(--muted);margin-top:3px}
.timeline{display:grid;gap:13px}.event{border-left:3px solid var(--cdu-turquoise);padding-left:12px;display:grid;gap:2px}.event span,.event small{color:var(--muted)}
.top-item,.decision,.person-row{padding:13px 0;border-bottom:1px solid var(--line);display:grid;gap:5px}.subform{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.calendar-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.calendar-item,.deadline,.notification{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.calendar-item div,.deadline div,.notification div{display:grid;gap:3px}.calendar-item small,.deadline small,.notification small{color:var(--muted)}
.notification.read{opacity:.65}
.person-card{display:grid;gap:6px;text-decoration:none}.person-card span,.person-card small{color:var(--muted)}
.check-inline{display:flex;align-items:center;gap:6px}.check-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:10px 0}
.check-button{border:0;background:none;font-size:18px;cursor:pointer}.done{text-decoration:line-through;color:var(--muted)}
.comment{padding:12px 0;border-bottom:1px solid var(--line)}
.message,.activity{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.unread{font-weight:650}.activity{justify-content:flex-start}
.activity-dot{width:9px;height:9px;border-radius:50%;background:var(--cdu-turquoise);margin-top:7px;flex:0 0 auto}
.inline-form{display:flex;gap:8px;align-items:center}.inline-form input{max-width:240px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 18px}
.kpi-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;box-shadow:var(--shadow)}
.kpi-card span{display:block;color:var(--muted);font-size:13px}.kpi-card strong{display:block;font-size:30px;margin-top:8px;color:var(--cdu-blue)}
.dark .kpi-card strong{color:#fff}.dash-row,.notice-row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.dash-row small,.notice-row small{display:block;color:var(--muted)}.dash-note{padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.shortcut{display:block;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none}
.global-search{display:flex;gap:10px;margin-top:16px}.global-search input{flex:1;font-size:17px}
.save-search{display:flex;gap:8px;margin-top:10px}.search-result,.history-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.search-result>div{flex:1}.result-type{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);min-width:90px}
.history-row{justify-content:space-between}.status-dot{font-size:12px}.status-dot.ok{font-weight:700;color:var(--success)}.status-dot.bad{font-weight:700;color:var(--danger)}
.alert pre{white-space:pre-wrap;overflow:auto;margin:10px 0 0}.app-footer{margin-top:32px;padding:16px 0;color:var(--muted);font-size:12px;text-align:center;border-top:1px solid var(--line)}
@media(max-width:900px){.sidebar{width:230px;flex-basis:230px}.cards{grid-template-columns:1fr}.content{padding:22px}.topbar{padding:16px 22px}.detail-grid,.calendar-grid{grid-template-columns:1fr}}
@media(max-width:650px){.app-shell{display:block}.sidebar{position:relative;width:auto;height:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}nav{grid-template-columns:repeat(2,1fr)}.sidebar-bottom{display:flex}.toolbar,.filters{flex-direction:column}.form-grid{grid-template-columns:1fr}.topbar{position:relative}}
