.bell-btn.open{background:var(--accent-soft);color:var(--accent);border-color:transparent}.bell-badge{position:absolute;top:4px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;font-family:var(--mono);display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}.notif-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f1b2d24;z-index:20}.notif-panel{position:absolute;top:calc(var(--topbar-h) - 12px);right:20px;width:400px;max-height:calc(100vh - var(--topbar-h) - 30px);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);z-index:40;display:flex;flex-direction:column;overflow:hidden}.notif-panel .head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border)}.notif-panel .head .title{font-size:15.5px;font-weight:700}.notif-panel .body{overflow:auto;padding:4px 0}.notif-panel .group-label{padding:10px 18px 4px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted)}.notif-row{display:flex;gap:13px;padding:12px 18px 12px 26px;cursor:pointer;position:relative;border:none;background:transparent;width:100%;text-align:left;font-family:inherit}.notif-row.unread{background:#2f6bff0f}.notif-row:hover{background:var(--surface-2)}.notif-row .unread-dot{position:absolute;left:11px;top:20px;width:6px;height:6px;border-radius:3px;background:var(--accent)}.notif-row .ico{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}.notif-row .ico.accent{background:var(--accent-soft);color:var(--accent)}.notif-row .ico.ok{background:var(--ok-soft);color:var(--ok)}.notif-row .ico.danger{background:var(--danger-soft);color:var(--danger)}.notif-row .ico.warn{background:var(--warn-soft);color:var(--warn)}.notif-row .content{min-width:0;flex:1}.notif-row .top{display:flex;align-items:baseline;gap:8px}.notif-row .top .t{font-size:13.5px;font-weight:650}.notif-row .top .at{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--text-muted);flex-shrink:0}.notif-row .msg{font-size:12.5px;color:var(--text-mid);margin-top:4px;line-height:1.4}.notif-panel .foot{padding:11px 18px;border-top:1px solid var(--border);text-align:center}.notif-panel .foot button{border:none;background:none;cursor:pointer;font-size:12.5px;font-weight:650;color:var(--accent);display:inline-flex;align-items:center;gap:7px}.notif-panel .empty-box{padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted)}.notif-panel .empty-box .t1{font-size:15px;font-weight:700;color:var(--text-mid)}.notif-panel .empty-box .t2{font-size:13px}.shell{display:flex;width:100%;height:100%;overflow:hidden}.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:22px 16px}.sidebar .brand{display:flex;align-items:center;gap:11px;padding:0 8px 18px}.brand-mark{width:38px;height:38px;border-radius:11px;flex-shrink:0;background:var(--accent);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;font-family:var(--mono);letter-spacing:-.5px}.brand .name{font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.15}.brand .org{font-size:11.5px;color:var(--text-muted);font-weight:500}.role-chip{display:flex;align-items:center;gap:7px;margin:0 4px 16px;padding:7px 11px;border-radius:var(--pill);font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}.role-chip .dot{width:6px;height:6px;border-radius:3px;background:currentColor}.role-chip.employee{background:var(--accent-soft);color:var(--accent)}.role-chip.manager{background:#9b5de51f;color:#9b5de5}.role-chip.admin{background:#3a9d6e1f;color:#3a9d6e}.sidebar nav{display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:var(--radius);cursor:pointer;color:var(--text-muted);font-weight:500;font-size:14.5px}.nav-item:hover{color:var(--text-mid)}.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:650}.sidebar .foot{margin-top:auto;position:relative}.sidebar .foot .rule{height:1px;background:var(--border);margin:0 4px 14px}.user-row{display:flex;align-items:center;gap:11px;padding:6px 8px;border-radius:var(--radius);cursor:pointer;border:none;background:transparent;width:100%;text-align:left}.user-row.open,.user-row:hover{background:var(--accent-soft)}.user-row .who{line-height:1.25;min-width:0;flex:1}.user-row .who .name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-row .who .role{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu{position:absolute;bottom:100%;left:4px;right:4px;margin-bottom:10px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);overflow:hidden;z-index:50}.user-menu .head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--border)}.user-menu .head .name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu .head .email{font-family:var(--mono);font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu .items{padding:6px}.user-menu .item{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;border:none;border-radius:var(--radius-sm);cursor:pointer;width:100%;background:transparent;color:var(--text-mid);font-size:13.5px;font-weight:600}.user-menu .item.danger{color:var(--danger);background:var(--danger-soft)}.shell .main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}.topbar{height:var(--topbar-h);flex-shrink:0;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:18px;padding:0 28px}.topbar .title{font-size:20px;font-weight:700;letter-spacing:-.3px}.topbar .spacer{flex:1}.lang-pill{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--pill);border:1px solid var(--border);background:var(--surface-2);font-size:13px;font-weight:700;letter-spacing:.4px;color:var(--text-mid);cursor:pointer}.bell-btn{position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;color:var(--text-mid);border:1px solid var(--border)}.shell .content{flex:1;padding:28px;overflow:auto}:root{--bg: #eef2f7;--surface: #ffffff;--surface-2: #f6f9fc;--text: #0f1b2d;--text-mid: #3f5168;--text-muted: #6a7c93;--border: #e7edf4;--border-strong: #d9e2ee;--accent: #2f6bff;--accent-text: #ffffff;--accent-soft: rgba(47, 107, 255, .125);--ok: #1f9d57;--ok-soft: rgba(31, 157, 87, .125);--danger: #e0533d;--danger-soft: rgba(224, 83, 61, .125);--warn: #e0892f;--warn-soft: rgba(224, 137, 47, .125);--radius-sm: 9px;--radius: 14px;--radius-lg: 22px;--pill: 999px;--font: "Hanken Grotesk", system-ui, -apple-system, sans-serif;--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;--shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 10px 30px rgba(15, 27, 45, .06);--shadow-pop: 0 18px 50px rgba(15, 27, 45, .18);--sidebar-w: 252px;--topbar-h: 72px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}button{font-family:inherit}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}a{color:inherit;text-decoration:none}.mono{font-family:var(--mono)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap;background:var(--accent);color:var(--accent-text)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-lg{height:52px;padding:0 24px;font-size:16px;border-radius:var(--pill)}.btn-sm{height:34px;padding:0 12px}.btn-full{width:100%}.btn-soft{background:var(--accent-soft);color:var(--accent)}.btn-ghost{background:transparent;color:var(--text-mid);border-color:var(--border)}.btn-ok{background:var(--ok);color:#fff}.btn-danger{background:var(--danger-soft);color:var(--danger)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px}.card-flush{padding:0;overflow:hidden;overflow-x:auto}.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--pill);border:1px solid transparent;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}.badge-accent{background:var(--accent-soft);color:var(--accent);border-color:transparent}.badge-ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}.badge-warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}.badge-danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}.badge .dot{width:7px;height:7px;border-radius:4px;background:currentColor}.avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;letter-spacing:.3px;flex-shrink:0;background:var(--accent-soft);color:var(--accent)}.tabs{display:flex;gap:6px;padding:4px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--border);width:fit-content}.tabs .tab{display:flex;align-items:center;gap:8px;height:34px;padding:0 18px;border:none;border-radius:var(--pill);cursor:pointer;white-space:nowrap;background:transparent;color:var(--text-muted);font-weight:650;font-size:14px}.tabs .tab.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}.field{display:flex;flex-direction:column;gap:8px}.field>label{font-size:13px;font-weight:700;color:var(--text-mid)}.field .control{display:flex;align-items:center;gap:11px;height:52px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface)}.field .control:focus-within{border-color:var(--accent)}.field .control>svg{color:var(--text-muted);flex-shrink:0}.field .control input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;font-weight:600}.field .error{font-size:12.5px;color:var(--danger)}.input-sm{height:38px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);font-size:13.5px;font-weight:600;outline:none}.input-sm:focus{border-color:var(--accent)}.table{width:100%;border-collapse:collapse}.table th{padding:12px 24px;border-bottom:1px solid var(--border);background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase;text-align:left}.table td{padding:0 24px;height:52px;border-bottom:1px solid var(--border);font-size:13.5px}.table tr:last-child td{border-bottom:none}.table .num{text-align:right}.table .center{text-align:center}.pager{display:flex;align-items:center;gap:12px;padding:12px 24px;border-top:1px solid var(--border);background:var(--surface-2);font-size:13px;color:var(--text-muted)}.pager button{height:32px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-mid);font-weight:600;cursor:pointer}.pager button:disabled{opacity:.45;cursor:not-allowed}.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);font-size:13px;line-height:1.45}.alert-danger{background:var(--danger-soft);color:var(--danger)}.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--border-strong);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.splash{height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:var(--text-muted)}.empty{padding:48px 24px;text-align:center;color:var(--text-muted)}.empty .title{font-size:15px;font-weight:700;color:var(--text-mid)}.empty .sub{font-size:13px;margin-top:6px}.toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:100}.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius);background:var(--text);color:var(--surface);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-pop);animation:toast-in .2s ease-out}.toast-ok svg{color:#6ee7a8}.toast-danger svg{color:#ff9d8a}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f1b2d4d;z-index:80;display:flex;align-items:center;justify-content:center}.modal{width:480px;max-width:calc(100vw - 48px);max-height:calc(100vh - 80px);overflow:auto;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:26px}.modal h2{font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px}.modal .sub{font-size:13px;color:var(--text-muted);margin-bottom:20px}.stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px}.stat .label{font-size:12.5px;color:var(--text-muted);font-weight:600;margin-bottom:12px;letter-spacing:.2px}.stat .value{font-family:var(--mono);font-size:34px;font-weight:600;letter-spacing:-1px;line-height:1}.stat .value.accent{color:var(--accent)}.stat .sub{font-size:12px;color:var(--text-muted);margin-top:10px}