:root{--navy: #1b3a6b;--navy-dark: #15305a;--bg: #f3f5f8;--border: #e3e6eb;--text: #1f2a44;--muted: #6b7280;--sidebar-width: 248px;--sidebar-collapsed-width: 72px;--header-height: 64px}[hidden]{display:none!important}*{box-sizing:border-box}body.app-page{margin:0;min-height:100vh;background-color:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}.app-shell{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);flex-shrink:0;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;transition:width .18s ease;overflow:hidden}.sidebar-header{height:var(--header-height);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:0 .85rem 0 1.25rem;border-bottom:1px solid var(--border)}.sidebar-brand{display:flex;align-items:center;gap:.6rem;color:var(--navy);font-size:1.15rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;overflow:hidden}.brand-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.brand-icon svg{width:22px;height:22px}.sidebar-collapse{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--muted);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.sidebar-collapse:hover{background:var(--bg);color:var(--navy)}.sidebar-collapse svg{width:20px;height:20px}.sidebar-nav{padding:.85rem .75rem;display:flex;flex-direction:column;gap:.25rem}.nav-item{display:flex;align-items:center;gap:.8rem;padding:.65rem .8rem;border-radius:8px;color:var(--text);text-decoration:none;font-size:.95rem;font-weight:600;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.nav-item:hover{background:var(--bg);color:var(--navy)}.nav-item.is-active{background:#1b3a6b14;color:var(--navy)}.nav-icon{flex-shrink:0;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}.nav-item:hover .nav-icon,.nav-item.is-active .nav-icon{color:var(--navy)}.nav-icon svg{width:21px;height:21px}.app-shell.is-collapsed .sidebar{width:var(--sidebar-collapsed-width)}.app-shell.is-collapsed .sidebar-header{justify-content:center;padding:0}.app-shell.is-collapsed .sidebar-brand{display:none}.app-shell.is-collapsed .nav-item{justify-content:center;padding:.65rem 0}.app-shell.is-collapsed .nav-label{display:none}.app-main{flex:1;min-width:0;display:flex;flex-direction:column}.app-header{height:var(--header-height);flex-shrink:0;display:flex;align-items:center;gap:1rem;padding:0 1.5rem;background:#fff;border-bottom:1px solid var(--border)}.header-title{font-size:1.1rem;font-weight:700;color:var(--text)}.header-spacer{flex:1}.notif-menu{position:relative}.notif-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;color:var(--navy);background:var(--bg);border:1px solid var(--border);border-radius:9999px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.notif-trigger:hover,.notif-menu.is-open .notif-trigger{background:#e7ebf2;border-color:var(--navy)}.notif-trigger svg{width:22px;height:22px}.notif-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;line-height:1;color:#fff;background:#e23b3b;border:2px solid #fff;border-radius:9999px}.notif-dropdown{position:absolute;top:calc(100% + .6rem);right:0;width:360px;max-width:calc(100vw - 2rem);max-height:460px;overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #1b3a6b1f;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:20}.notif-menu.is-open .notif-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.notif-item{padding:.9rem 1rem;border-bottom:1px solid var(--border);background:#fff}.notif-item.is-unread{background:#f9f9f9}.notif-item-top{display:flex;align-items:center;gap:.5rem}.notif-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:#2563eb;visibility:hidden}.notif-item.is-unread .notif-dot{visibility:visible}.notif-title{font-size:.92rem;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notif-time{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;color:var(--muted)}.notif-time svg{width:13px;height:13px}.notif-desc{margin:.3rem 0 0 1rem;font-size:.88rem;color:var(--text);line-height:1.4}.notif-item-bottom{display:flex;align-items:center;justify-content:flex-end;margin:.5rem 0 0 1rem}.notif-check{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;color:var(--muted);background:transparent;border:none;border-radius:50%;cursor:pointer;transition:background-color .15s ease,color .15s ease}.notif-check svg{width:20px;height:20px}.notif-check:hover{background:#e7ebf2;color:#1f8a4c}.notif-action{margin-right:auto;font-size:.85rem;font-weight:600;color:#2563eb;text-decoration:none}.notif-action:hover{text-decoration:underline}.notif-empty{margin:0;padding:2rem 1rem;text-align:center;font-size:.9rem;color:var(--muted)}.notif-loadmore{width:100%;padding:.85rem;font-size:.9rem;font-weight:600;color:var(--navy);background:#fff;border:none;border-top:1px solid var(--border);cursor:pointer;transition:background-color .15s ease}.notif-loadmore:hover{background:var(--bg)}.user-menu{position:relative}.user-trigger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;color:var(--navy);background:var(--bg);border:1px solid var(--border);border-radius:9999px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.user-trigger:hover,.user-menu.is-open .user-trigger{background:#e7ebf2;border-color:var(--navy)}.user-trigger svg{width:24px;height:24px}.user-dropdown{position:absolute;top:calc(100% + .6rem);right:0;min-width:220px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px #1b3a6b1f;padding:.4rem;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:20}.user-menu.is-open .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.user-dropdown-header{padding:.6rem .75rem;margin-bottom:.3rem;border-bottom:1px solid var(--border)}.user-dropdown-name{margin:0;font-size:.92rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-dropdown-email{margin:.15rem 0 0;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-item{display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:6px;color:var(--text);text-decoration:none;font-size:.95rem;font-weight:600;transition:background-color .15s ease}.dropdown-item:hover{background:var(--bg)}.dropdown-item svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}.app-content{flex:1;padding:2rem}@media (max-width: 640px){.sidebar{width:var(--sidebar-collapsed-width)}.sidebar-header{justify-content:center;padding:0}.sidebar-brand{display:none}.nav-item{justify-content:center;padding:.65rem 0}.nav-label{display:none}.header-title{font-size:1rem}}.toast-container{position:fixed;top:1rem;right:1rem;z-index:100;display:flex;flex-direction:column;gap:.6rem;max-width:calc(100vw - 2rem)}.toast{min-width:240px;max-width:360px;padding:.8rem 1rem;font-size:.9rem;font-weight:600;color:var(--text);background:#fff;border:1px solid var(--border);border-left:4px solid var(--border);border-radius:8px;box-shadow:0 8px 24px #1b3a6b2e;opacity:0;transform:translate(12px);transition:opacity .2s ease,transform .2s ease}.toast.is-visible{opacity:1;transform:translate(0)}.toast-error{border-left-color:#e23b3b;color:#8a2a1f;background:#fdecec}.toast-success{border-left-color:#1f8a4c;color:#15623a;background:#e9f7ef}