:root{--navy:#111827;--navy2:#182235;--violet:#6651df;--violet2:#866ff0;--bg:#f3f6fa;--card:#fff;--line:#dfe5ee;--text:#172033;--muted:#68758b;--green:#138a63;--amber:#b76c08;--red:#c2413a;--blue:#2d67c7;--shadow:0 12px 34px rgba(29,39,67,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}

/* Login */
.login{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(340px,1fr) minmax(420px,1.05fr);background:#fff}
.login-art{position:relative;overflow:hidden;padding:54px;background:linear-gradient(145deg,#111827,#2d2661 58%,#6752df);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.login-art:before,.login-art:after{content:"";position:absolute;border-radius:50%;background:#ffffff12}
.login-art:before{width:420px;height:420px;right:-160px;top:-130px}
.login-art:after{width:280px;height:280px;left:-110px;bottom:-120px}
.login-brand{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.mark{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#8a73f2,#6549d9);display:grid;place-items:center;font-weight:900;letter-spacing:-1px;color:#fff;box-shadow:0 10px 24px #0003}
.login-art h1{font-size:46px;line-height:1.04;margin:0 0 15px;max-width:610px;position:relative;z-index:1}
.login-art p{font-size:16px;line-height:1.65;color:#d9d7ef;max-width:560px;position:relative;z-index:1}
.login-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:1}
.login-point{padding:15px;border:1px solid #ffffff24;border-radius:12px;background:#ffffff0c}
.login-point b{display:block;font-size:13px;margin-bottom:4px}
.login-point span{font-size:11px;color:#d7d5ea}
.login-form-wrap{display:grid;place-items:center;padding:32px}
.login-card{width:min(430px,100%)}
.login-card .mobile-brand{display:none}
.login-card h2{font-size:31px;margin:0 0 8px}
.login-card>p{color:var(--muted);margin:0 0 26px;line-height:1.5}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-size:12px;font-weight:800}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px 13px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px #6651df16}
.pass{position:relative}
.pass input{padding-right:48px}
.pass button{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;border-radius:8px;background:#f0f2f6}
.login-submit{width:100%;border:0;border-radius:10px;padding:13px;background:linear-gradient(135deg,var(--violet),var(--violet2));color:#fff;font-weight:900;box-shadow:0 10px 24px #6651df35}
.login-error{display:none;margin-bottom:14px;padding:10px;border-radius:8px;background:#ffefee;color:var(--red);font-size:12px}
.login-error.show{display:block}
.demo{margin-top:17px;padding:12px 14px;border:1px solid #ded9ff;border-radius:10px;background:#f7f5ff;color:#5847c6;font-size:12px;line-height:1.6}

/* App shell */
.app{min-height:100dvh}
.side{position:fixed;inset:0 auto 0 0;width:252px;background:var(--navy);color:#fff;display:flex;flex-direction:column;z-index:20}
.brand{height:84px;padding:18px 20px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;gap:12px}
.brand b{display:block;font-size:18px}
.brand small{display:block;color:#a9b2c5;margin-top:3px}
.close-side{display:none;margin-left:auto;border:0;background:#ffffff12;color:#fff;width:34px;height:34px;border-radius:8px}
.nav{padding:15px 10px;overflow:auto;flex:1}
.nav button,.nav a{width:100%;display:flex;align-items:center;gap:11px;border:0;background:transparent;color:#aeb7c9;padding:12px 13px;border-radius:9px;text-align:left;margin:2px 0;font-size:13px;text-decoration:none;cursor:pointer}
.nav button span,.nav a span{width:20px;text-align:center;font-size:15px}
.nav button.active,.nav a.active{background:linear-gradient(135deg,#5746c9,#6d58e3);color:#fff;font-weight:800}
.nav-label{padding:15px 13px 5px;color:#778297;font-size:9px;text-transform:uppercase;letter-spacing:.8px;font-weight:900}
.account{padding:14px 16px;border-top:1px solid #ffffff12;display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ede9ff;color:#5542c5;font-weight:900;flex:none}
.account b{font-size:12px;display:block}
.account small{font-size:10px;color:#aeb7c9}
.account button{margin-left:auto;border:0;background:transparent;color:#fff;font-size:17px}
.main{margin-left:252px;min-width:0}
.top{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:12}
.hamb{display:none;border:0;background:#f1f3f6;border-radius:8px;width:38px;height:38px}
.top-title{display:flex;align-items:center;gap:12px}
.top-title b{font-size:14px}
.top-title span{font-size:11px;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:9px}
.global-search{width:300px;border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.role-chip{padding:9px 12px;border-radius:999px;background:#eeeaff;color:#5541c3;font-size:11px;font-weight:900}
.content{padding:28px 30px 42px;max-width:1760px;margin:auto}

/* Page head */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.eyebrow{margin:0 0 6px;color:#657087;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.75px}
.page-head h1{font-size:30px;margin:0 0 7px}
.page-head p{margin:0;color:var(--muted);font-size:13px}

/* Buttons */
.primary,.secondary,.danger{border-radius:9px;padding:10px 14px;font-weight:800;border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.primary{background:var(--violet);color:#fff;box-shadow:0 8px 18px #6651df25}
.primary:hover{background:#5a48cc}
.secondary{background:#fff;border-color:var(--line);color:var(--text)}
.secondary:hover{border-color:var(--violet);color:var(--violet)}
.danger{background:#fff0ef;border-color:#ffd8d5;color:var(--red)}

/* Flash */
.flash{background:#e8f7f0;color:#20795c;border:1px solid #c8ecdd;border-radius:9px;padding:11px 13px;margin-bottom:14px;font-size:12px;font-weight:700}
.reset-banner{background:#fff8e9;border:1px solid #f5dfad;color:#805b12;border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:12px}
.reset-banner b{display:block;margin-bottom:4px}
.reset-banner code{background:#fff;padding:2px 6px;border-radius:4px;font-weight:800;color:#5847c5}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:17px}
.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px;box-shadow:var(--shadow);min-width:0}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stat-icon{width:37px;height:37px;border-radius:10px;background:#f0edff;color:var(--violet);display:grid;place-items:center;font-weight:900;font-style:normal}
.stat span{font-size:11px;color:var(--muted)}
.stat strong{display:block;font-size:22px;margin:11px 0 5px;overflow-wrap:anywhere}
.stat small{font-size:10px;color:var(--muted)}
.up{color:var(--green)!important}
.warn-text{color:var(--amber)!important}

/* Grid & panel */
.grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.8fr);gap:16px}
.panel{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);min-width:0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.panel-head h2{margin:0 0 4px;font-size:15px}
.panel-head p{margin:0;color:var(--muted);font-size:10px}

/* Filters */
.filters{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(130px,.55fr));gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:#fbfcfe}
.filters input,.filters select{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#fff;min-width:0}

/* Tables */
.table-wrap{overflow:auto}
.data{width:100%;border-collapse:collapse;min-width:850px}
.data th{text-align:left;padding:10px 13px;background:#f8fafc;color:#707c91;font-size:9px;text-transform:uppercase;letter-spacing:.35px;white-space:nowrap}
.data td{padding:12px 13px;border-top:1px solid var(--line);font-size:11px;vertical-align:middle}
.data td b{display:block;font-size:11px}
.data td small{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Pills */
.pill{display:inline-flex;border-radius:999px;padding:5px 8px;background:#eaf7f1;color:var(--green);font-size:9px;font-weight:900;white-space:nowrap}
.pill.warn{background:#fff2dc;color:var(--amber)}
.pill.bad{background:#ffebe9;color:var(--red)}
.pill.blue{background:#eaf1ff;color:var(--blue)}

/* Row actions */
.row-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.row-actions button,
.row-actions .action-btn{border:1px solid var(--line);border-radius:7px;background:#fff;padding:6px 8px;font-size:9px;font-weight:800;white-space:nowrap;cursor:pointer;text-decoration:none;color:inherit;font-family:inherit}
.row-actions .open{border-color:#d9d2ff;background:#f2efff;color:#5744c5}
.row-actions .danger-btn{border-color:#f5c9c5;background:#feecec;color:#b13d3d}
.row-actions .ok-btn{border-color:#c8ecdd;background:#eaf8f2;color:#20795c}

/* Activity */
.activity{padding:4px 16px}
.activity-item{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.activity-item:last-child{border:0}
.activity-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#f0edff;color:var(--violet);font-style:normal}
.activity-item b{font-size:10px}
.activity-item p{font-size:9px;color:var(--muted);margin:3px 0}
.activity-item time{font-size:8px;color:#929bad}

/* Chart */
.chart{height:230px;padding:25px 18px 16px;display:flex;align-items:end;gap:11px;background:linear-gradient(#fff,#fcfbff)}
.bar-wrap{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}
.bar{width:min(44px,70%);border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#8d78ef,#624cda);min-height:8px}
.bar-wrap small{font-size:8px;color:var(--muted)}
.bar-wrap b{font-size:8px;color:#4f5870}

/* Roles */
.role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.role-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.role-card h3{margin:9px 0 5px;font-size:14px}
.role-card p{margin:0;color:var(--muted);font-size:10px;line-height:1.55}
.role-card ul{padding-left:17px;margin:11px 0 0;color:#536075;font-size:10px;line-height:1.75}
.role-badge-large{width:39px;height:39px;border-radius:10px;background:#f0edff;color:var(--violet);display:grid;place-items:center;font-weight:900}

/* Audit */
.audit-list{display:grid;gap:8px}
.audit-row{display:grid;grid-template-columns:155px 150px 1fr 130px;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:10px}
.audit-row span{color:var(--muted)}

.empty{padding:38px;text-align:center;color:var(--muted)}

/* Modal */
.modal,.modal-backdrop{position:fixed;inset:0;z-index:60;background:#11182788;display:none;align-items:center;justify-content:center;padding:20px;overflow:auto}
.modal.open,.modal-backdrop.open{display:flex}
.modal-card{width:min(720px,100%);max-height:92dvh;overflow:auto;background:#fff;border-radius:15px;box-shadow:0 30px 80px #0005}
.modal-head{position:sticky;top:0;background:#fff;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:18px;margin:0 0 4px}
.modal-head p{font-size:10px;color:var(--muted);margin:0}
.modal-head button{border:0;background:#f0f2f6;border-radius:8px;width:35px;height:35px;font-size:20px;cursor:pointer}
.modal-body{padding:18px 20px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:15px 20px;border-top:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-grid .field{margin:0;display:flex;flex-direction:column;gap:5px}
.form-grid .field.full{grid-column:1/-1}
.form-grid label{font-size:11px;font-weight:800}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 11px;background:#fff;outline:none;font-size:12px;font-family:inherit}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px #6651df16}
.form-grid input[readonly]{background:#f3f4f7;color:#4d5562}

/* Toast */
.toast{position:fixed;z-index:80;right:20px;bottom:20px;transform:translateY(20px);opacity:0;pointer-events:none;background:#172033;color:#fff;padding:11px 14px;border-radius:9px;box-shadow:0 14px 40px #0004;font-size:11px;transition:.2s}
.toast.show{transform:none;opacity:1}

.scrim{display:none}

/* Pagination */
.pager{margin-top:16px}
.pager nav{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.pager nav a,.pager nav span{padding:6px 11px;border:1px solid var(--line);border-radius:7px;font-size:11px;color:var(--text);background:#fff;text-decoration:none}
.pager nav .active span{background:var(--violet);color:#fff;border-color:var(--violet)}

@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid{grid-template-columns:1fr}.role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.global-search{width:230px}}
@media(max-width:820px){.side{transform:translateX(-100%);transition:.22s}.side.open{transform:none}.close-side,.hamb{display:block}.main{margin-left:0}.top{padding:0 16px}.top-title span,.global-search{display:none}.content{padding:20px 15px 35px}.scrim.show{display:block;position:fixed;inset:0;background:#11182788;z-index:19}.page-head{align-items:flex-start}.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}}
@media(max-width:620px){.login{grid-template-columns:1fr}.login-art{display:none}.login-form-wrap{padding:22px}.login-card .mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:26px}.login-card h2{font-size:26px}.top-actions .role-chip{display:none}.stats,.role-grid{grid-template-columns:1fr}.page-head{display:block}.page-head .primary{width:100%;margin-top:14px}.filters{grid-template-columns:1fr}.filters>*{grid-column:1}.form-grid{grid-template-columns:1fr}.form-grid .field.full{grid-column:auto}.modal{padding:0;align-items:flex-end}.modal-card{border-radius:15px 15px 0 0;max-height:95dvh}.audit-row{grid-template-columns:1fr}.audit-row>*{display:block}.content{padding-inline:11px}}

/* ── Notification bell (shared) ───────────────────────────── */
.notif-menu{position:relative;display:inline-block}
.notif-trigger{position:relative;border:0;background:#f2f3f6;border-radius:8px;width:38px;height:38px;display:grid;place-items:center;font-size:16px;cursor:pointer;transition:.15s}
.notif-trigger:hover{background:#ece8ff;color:#5541c3}
.notif-badge{position:absolute;top:-4px;right:-4px;background:#e84545;color:#fff;border-radius:999px;font-size:8px;font-weight:800;padding:2px 5px;font-style:normal;line-height:1;box-shadow:0 0 0 2px #fff}
.notif-panel{position:absolute;right:0;top:calc(100% + 10px);width:360px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(15,23,42,.12);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s;z-index:60}
.notif-menu.open .notif-panel{opacity:1;visibility:visible;transform:translateY(0)}
.notif-head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fbfcfe}
.notif-head b{display:block;font-size:12px}
.notif-head small{display:block;font-size:9px;color:var(--muted);margin-top:2px}
.notif-mark-all{border:0;background:none;color:#5a4ac2;font-size:10px;font-weight:800;cursor:pointer;padding:0}
.notif-list{max-height:380px;overflow-y:auto}
.notif-item-form{display:block;width:100%}
.notif-item{width:100%;border:0;background:#fff;padding:11px 14px;text-align:left;display:grid;grid-template-columns:32px 1fr auto;gap:10px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s;align-items:start}
.notif-item:hover{background:#fafaff}
.notif-item.unread{background:#fbfaff}
.notif-icon{width:32px;height:32px;border-radius:9px;background:#f0edff;color:#5a4ac2;display:grid;place-items:center;font-size:13px;font-weight:800}
.notif-content{min-width:0}
.notif-content b{display:block;font-size:11px;color:#172033;margin-bottom:2px;overflow-wrap:anywhere}
.notif-content small{display:block;font-size:9px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.notif-content time{display:block;font-size:8px;color:#98a0ad;margin-top:4px}
.notif-dot{width:7px;height:7px;background:#e84545;border-radius:50%;margin-top:6px}
.notif-empty{padding:32px 16px;text-align:center;color:var(--muted)}
.notif-empty b{display:block;font-size:11px;color:#172033;margin-bottom:3px}
.notif-empty small{font-size:9px}
.notif-foot{padding:10px 14px;border-top:1px solid var(--line);text-align:center;background:#fbfcfe}
.notif-foot a{font-size:10px;font-weight:800;color:#5a4ac2;text-decoration:none}
@media(max-width:520px){.notif-panel{width:calc(100vw - 24px)}}