.notif-trigger{cursor:pointer;background:#ffffff0a;border:1px solid #ffffff12;border-radius:10px;align-items:center;gap:10px;margin-bottom:8px;padding:10px 12px;transition:all .2s;display:flex;position:relative}.notif-trigger:hover{background:#00b8db1a;border-color:#00b8db33}.notif-trigger.active{background:#00b8db1f;border-color:#00b8db40}.notif-trigger.collapsed{justify-content:center;padding:10px}.notif-bell-icon{flex-shrink:0;font-size:20px;line-height:1}.notif-label{color:#cbd5e0;white-space:nowrap;flex:1;font-size:13px;font-weight:600}.notif-badge{color:#fff;background:#ef4444;border-radius:99px;flex-shrink:0;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 5px;font-size:11px;font-weight:700;animation:2s infinite notif-pulse;display:flex}.notif-badge-collapsed{color:#fff;background:#ef4444;border-radius:99px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 3px;font-size:9px;font-weight:700;animation:2s infinite notif-pulse;display:flex;position:absolute;top:4px;right:4px}.notif-panel-header{background:linear-gradient(135deg,#f8fafc 0%,#f0f9ff 100%);border-bottom:1px solid #f1f5f9;flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.notif-panel-title{align-items:center;gap:8px;display:flex}.notif-panel-title h3{color:#111827;margin:0;font-size:15px;font-weight:700}.notif-panel-new-badge{color:#fff;background:#ef4444;border-radius:99px;padding:2px 8px;font-size:10px;font-weight:700}.notif-mark-all-btn{color:#6366f1;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:12px;font-weight:600;transition:all .15s}.notif-mark-all-btn:hover{color:#4f46e5;background:#eef2ff}.notif-panel-body{scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent;flex:1;overflow-y:auto}.notif-panel-body::-webkit-scrollbar{width:4px}.notif-panel-body::-webkit-scrollbar-track{background:0 0}.notif-panel-body::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}.notif-empty{text-align:center;color:#9ca3af;padding:48px 20px}.notif-empty-icon{filter:grayscale(.3);margin-bottom:12px;font-size:36px;display:block}.notif-empty p{margin:0;font-size:13px;font-weight:500}.notif-item{cursor:pointer;border-bottom:1px solid #f8fafc;align-items:flex-start;gap:12px;padding:12px 16px;transition:all .15s;display:flex;position:relative}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:#f8fafc}.notif-item.unread{background:var(--notif-bg)}.notif-item.unread:before{content:"";background:var(--notif-color);border-radius:0 2px 2px 0;width:3px;position:absolute;top:0;bottom:0;left:0}.notif-item.read{cursor:default;background:#fff}.notif-item-icon{background:var(--notif-bg);border:1px solid var(--notif-border);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;margin-top:1px;font-size:16px;display:flex}.notif-item-content{flex:1;min-width:0}.notif-item-title{color:#111827;margin:0 0 3px;font-size:13px;font-weight:700;line-height:1.4}.notif-item.read .notif-item-title{color:#374151;font-weight:500}.notif-item-message{color:#6b7280;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 5px;font-size:11.5px;line-height:1.5;display:-webkit-box;overflow:hidden}.notif-item-time{color:#9ca3af;font-size:10px;font-weight:500}.notif-item-dot{background:var(--notif-color);border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:6px}.notif-type-error{--notif-color:#ef4444;--notif-bg:#fef2f2;--notif-border:#fecaca}.notif-type-warning{--notif-color:#f59e0b;--notif-bg:#fffbeb;--notif-border:#fde68a}.notif-type-success{--notif-color:#22c55e;--notif-bg:#f0fdf4;--notif-border:#bbf7d0}.notif-type-info{--notif-color:#3b82f6;--notif-bg:#eff6ff;--notif-border:#bfdbfe}.dashboard-notif-item{border:1px solid var(--notif-border);background:var(--notif-bg);border-radius:12px;align-items:flex-start;gap:12px;margin-bottom:10px;padding:14px 16px;transition:all .2s;display:flex;position:relative;overflow:hidden}.dashboard-notif-item:before{content:"";background:var(--notif-color);width:4px;position:absolute;top:0;bottom:0;left:0}.dashboard-notif-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000014}.dashboard-notif-icon{border:1px solid var(--notif-border);background:#fff;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:18px;display:flex}.dashboard-notif-content{flex:1;min-width:0}.dashboard-notif-title{color:#111827;margin:0 0 3px;font-size:13px;font-weight:700}.dashboard-notif-desc{color:#6b7280;margin:0;font-size:12px;line-height:1.5}.dashboard-notif-time{color:#9ca3af;white-space:nowrap;flex-shrink:0;margin-top:2px;font-size:11px}.dashboard-notif-empty{text-align:center;color:#9ca3af;padding:32px 16px;font-size:13px}.dashboard-notif-list{flex-direction:column;display:flex}.dashboard-notif-list.scrollable{scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent;max-height:420px;padding-right:4px;overflow-y:auto}.dashboard-notif-list.scrollable::-webkit-scrollbar{width:4px}.dashboard-notif-list.scrollable::-webkit-scrollbar-track{background:0 0}.dashboard-notif-list.scrollable::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}.dashboard-notif-item.clickable{cursor:pointer}.dashboard-notif-item.clickable:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000014}@keyframes notif-pulse{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 4px #ef444400}}.notif-panel{z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-direction:column;width:360px;max-height:480px;animation:.2s cubic-bezier(.16,1,.3,1) notif-panel-in;display:flex;position:absolute;bottom:calc(100% + 8px);left:0;overflow:hidden;box-shadow:0 -12px 40px #00000026,0 4px 16px #00000014}.notif-panel.from-collapsed{bottom:0;left:calc(100% + 12px)}@keyframes notif-panel-in{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.mra-meta{flex-wrap:wrap;gap:6px 16px;margin:6px 0 0;font-size:12px;display:flex}.mra-meta div{gap:4px;display:flex}.mra-meta dt{color:#9ca3af}.mra-meta dt:after{content:":"}.mra-meta dd{color:#374151;margin:0;font-weight:600}.mra-note{border:1px dashed var(--notif-border,#fde68a);color:#4b5563;background:#fff;border-radius:8px;margin:12px 0 0;padding:8px 10px;font-size:12px;font-style:italic}.mra-summary{color:#4b5563;margin:10px 0 0;padding-left:18px;font-size:12px;line-height:1.5}.mra-error{color:#b91c1c;background:#fef2f2;border-radius:8px;margin:0 0 10px;padding:8px 12px;font-size:13px}.mra-label{color:#374151;margin:14px 0 6px;font-size:12px;font-weight:600;display:block}.mra-label em{color:#9ca3af;font-weight:400}.mra-textarea{box-sizing:border-box;resize:vertical;width:100%;min-height:72px;font:inherit;color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:10px;padding:10px 12px;font-size:13px}.mra-textarea:focus{border-color:#00b8db;outline:none;box-shadow:0 0 0 3px #00b8db26}.mra-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.mra-btn{cursor:pointer;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex}.mra-btn:disabled{opacity:.55;cursor:not-allowed}.mra-btn svg{width:16px;height:16px}.mra-btn-ghost{color:#374151;background:#fff;border-color:#d1d5db}.mra-btn-ghost:hover:not(:disabled){background:#f9fafb}.mra-btn-primary{color:#fff;background:#00b8db}.mra-btn-primary:hover:not(:disabled){background:#0097b5}.mra-btn-success{color:#fff;background:#22c55e}.mra-btn-success:hover:not(:disabled){background:#16a34a}.mra-btn-danger{color:#fff;background:#ef4444}.mra-btn-danger:hover:not(:disabled){background:#dc2626}.mra-btn-danger-outline{color:#dc2626;background:#fff;border-color:#fecaca}.mra-btn-danger-outline:hover:not(:disabled){background:#fef2f2}.mra-overlay{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#11182780;justify-content:center;align-items:center;padding:16px;animation:.15s mra-in;display:flex;position:fixed;inset:0}.mra-modal{background:#fff;border-radius:16px;width:100%;max-width:460px;max-height:calc(100vh - 32px);padding:24px;animation:.2s mra-pop;overflow-y:auto;box-shadow:0 20px 50px #0003}.mra-modal-icon{color:#d97706;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;margin-bottom:12px;display:flex}.mra-modal-title{color:#111827;margin:0 0 6px;font-size:17px;font-weight:700}.mra-modal-text{color:#4b5563;margin:0;font-size:13px;line-height:1.55}.mra-brief{color:#111827;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;gap:4px;margin-top:14px;padding:10px 12px;font-size:13px;display:grid}.mra-brief span{color:#6b7280;min-width:96px;display:inline-block}.mra-banner{border:1px solid var(--mra-b);background:var(--mra-bg);color:var(--mra-c);border-radius:10px;align-items:flex-start;gap:10px;margin:12px 0;padding:12px 14px;font-size:13px;line-height:1.5;display:flex}.mra-banner-icon{flex-shrink:0;width:18px;height:18px;margin-top:1px}.mra-banner-comment{margin:4px 0 0;font-style:italic}.mra-banner-pending{--mra-b:#fde68a;--mra-bg:#fffbeb;--mra-c:#92400e}.mra-banner-approved{--mra-b:#bbf7d0;--mra-bg:#f0fdf4;--mra-c:#166534}.mra-banner-rejected{--mra-b:#fecaca;--mra-bg:#fef2f2;--mra-c:#991b1b}@keyframes mra-in{0%{opacity:0}to{opacity:1}}@keyframes mra-pop{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}@media (max-width:600px){.mra-actions .mra-btn{flex:auto}.mra-modal{padding:18px}.mra-brief span{min-width:84px}}@media (prefers-reduced-motion:reduce){.mra-overlay,.mra-modal{animation:none}}