:root{
  --st-sidebar-w:250px; --st-bg:#f4f6fb; --st-primary:#2563eb; --st-dark:#0f172a; --st-border:#e5e9f2;
  --bs-body-font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bs-body-font-size:.9rem;
}
body{background:var(--st-bg);}
.app-shell{display:flex;min-height:100vh}
.app-sidebar{width:var(--st-sidebar-w);background:var(--st-dark);color:#cbd5e1;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:1040;transition:transform .2s ease;display:flex;flex-direction:column}
.app-sidebar .brand{display:flex;align-items:center;gap:.65rem;padding:1rem 1.1rem;color:#fff;text-decoration:none;font-weight:600;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--st-primary);color:#fff;font-size:1.2rem}
.brand-mark-lg{width:56px;height:56px;font-size:1.9rem;border-radius:14px}
.menu{padding:.6rem .6rem 1.5rem}
.menu-section{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;padding:.9rem .6rem .3rem}
.menu-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border-radius:.5rem;color:#cbd5e1;text-decoration:none;font-size:.88rem}
.menu-item i{font-size:1.05rem;opacity:.85}
.menu-item:hover{background:rgba(255,255,255,.07);color:#fff}
.menu-item.active{background:var(--st-primary);color:#fff}
.app-main{margin-left:var(--st-sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column}
.app-topbar{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid var(--st-border);padding:.55rem 1.25rem;display:flex;align-items:center;gap:.75rem}
.app-content{padding:1.4rem 1.25rem;flex:1}
.app-footer{padding:.8rem 1.25rem;color:#94a3b8;font-size:.75rem;text-align:center}
.btn-icon{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.avatar{width:32px;height:32px;border-radius:50%;background:#dbeafe;color:#1d4ed8;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.global-search{position:relative;flex:1;max-width:520px}
.global-search>i{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}
.global-search input{padding-left:2.2rem;background:#f1f4f9;border-color:transparent}
.global-search input:focus{background:#fff}
.search-suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--st-border);border-radius:.6rem;box-shadow:0 10px 30px rgba(15,23,42,.12);max-height:60vh;overflow:auto;z-index:1050}
.search-suggest .grp{font-size:.68rem;text-transform:uppercase;color:#94a3b8;letter-spacing:.06em;padding:.5rem .8rem .2rem}
.search-suggest a{display:block;padding:.4rem .8rem;color:inherit;text-decoration:none}
.search-suggest a:hover{background:#f1f5ff}
.notif-menu{width:340px;max-width:92vw}
.notif-list{max-height:380px;overflow:auto}
.notif-item{display:block;padding:.6rem .9rem;border-bottom:1px solid var(--st-border);text-decoration:none;color:inherit}
.notif-item.unread{background:#f0f6ff}
.notif-item:hover{background:#e8f0ff}
.notif-count{position:absolute;top:-4px;right:-4px;font-size:.62rem}
.card{border:1px solid var(--st-border);box-shadow:0 1px 2px rgba(15,23,42,.04);border-radius:.75rem}
.card-header{background:transparent;border-bottom:1px solid var(--st-border);font-weight:600}
.page-head{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.page-head h1{font-size:1.35rem;margin:0}
.kpi{display:flex;align-items:center;gap:.9rem;padding:1rem}
.kpi .ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:none}
.kpi .val{font-size:1.55rem;font-weight:700;line-height:1.1}
.kpi .lbl{font-size:.75rem;color:#64748b}
a.kpi-link{text-decoration:none;color:inherit}
a.kpi-link:hover .card{border-color:#bfd3ff}
.chart-box{position:relative;height:280px}
.chart-box.sm{height:230px}
.table>:not(caption)>*>*{padding:.6rem .75rem}
.table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;background:#f8fafc;white-space:nowrap}
.table thead th a{color:inherit;text-decoration:none}
.badge-status{font-weight:600;font-size:.72rem;padding:.35em .65em;border-radius:1rem}
.timeline{list-style:none;margin:0;padding:0 0 0 1.2rem;border-left:2px solid var(--st-border)}
.timeline li{position:relative;padding:0 0 1.1rem 1rem}
.timeline li::before{content:"";position:absolute;left:-1.72rem;top:.3rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--st-primary);border:2px solid #fff;box-shadow:0 0 0 2px var(--st-border)}
.perm-grid{columns:2 320px;column-gap:1.25rem}
.perm-group{break-inside:avoid;margin-bottom:1rem}
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%);padding:1rem}
.auth-card{width:100%;max-width:430px;border-radius:1rem}
.nav-tabs .nav-link{color:#64748b}
.nav-tabs .nav-link.active{font-weight:600;color:var(--st-primary)}
.tab-scroll{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
.photo-grid img{width:100%;height:120px;object-fit:cover;border-radius:.5rem;border:1px solid var(--st-border)}
.sig-pad{border:1px dashed #94a3b8;border-radius:.5rem;background:#fff;touch-action:none;width:100%;height:160px;display:block}
.sticky-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--st-border);padding:.75rem 1rem;margin:0 -1rem -1rem;border-radius:0 0 .75rem .75rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--st-border);border:1px solid var(--st-border);border-radius:.6rem;overflow:hidden}
.cal-cell{background:#fff;min-height:104px;padding:.3rem;font-size:.75rem}
.cal-cell.other{background:#f8fafc;color:#94a3b8}
.cal-cell.today{background:#eff6ff}
.cal-ev{display:block;border-radius:.3rem;padding:.1rem .35rem;margin-top:2px;color:#fff;text-decoration:none;font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-backdrop{display:none}
@media (max-width:991.98px){
  .app-sidebar{transform:translateX(-100%)}
  body.sidebar-open .app-sidebar{transform:none}
  body.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1035}
  .app-main{margin-left:0}
  .btn{min-height:38px}
  .app-content{padding:1rem .75rem}
}
@media print{
  .app-sidebar,.app-topbar,.app-footer,.no-print{display:none!important}
  .app-main{margin:0}
  body{background:#fff}
}